CMS LINK PICKER

by Greggg

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.28/css/uikit.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.28/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.28/js/uikit-icons.min.js"></script>
<a href="#" data-uk-toggle="target: .uk-add-link-modal">Link picker</a>

<!-- This is the Modal Picker -->
<div class="bk-link-picker uk-add-link-modal" data-uk-modal>
  <div class="uk-modal-dialog uk-box-shadow-xlarge">
    <form class="uk-form-stacked">

      <div class="uk-modal-header">
        <div class="uk-flex-middle" data-uk-grid>
          <div class="uk-width-auto uk-h3">Link</div>
          <div class="uk-width-expand uk-text-right">
            <ul class="uk-subnav uk-flex-right" data-uk-switcher="connect:#uk-link-type-switcher; animation: uk-animation-fade">
              <li class="uk-active"><a href="">Content</a></li>
              <li><a href="">File</a></li>
              <li><a href="">Email</a></li>
              <li><a href="">Tel</a></li>
              <li><a href="">External</a></li>
              <li>
                <a href="" data-uk-icon="icon: info"></a>
              </li>
            </ul>
          </div>
        </div>
      </div>
 
      <div class="uk-modal-body">

        <!-- This is the container of the content items -->
        <div id="uk-link-type-switcher" class="uk-switcher">

          <div class="uk-active">

            <div class="uk-width-1-1 uk-inline">
              <span class="uk-form-icon uk-form-icon-flip" uk-icon="icon: search"></span>
              <input class="uk-input uk-width-1-1 boundary-align uk-page-search" type="text" placeholder="Select..." >
            </div>

            <div class="uk-position-relative" uk-dropdown="pos: bottom-justify; boundary: .boundary-align; boundary-align: true;  mode: click; animation: uk-animation-fade">

              <ul class="uk-list uk-list-space...

CSS

.uk-drag-and-drop-image-and-file > div {
  background: #FFFFFF;
  border: 1px solid #ececec;
}

.uk-drag-and-drop-switcher:not(.uk-active) .uk-h4 span {
  opacity: 0.5;
}

.uk-drag-and-drop-switcher:not(.uk-first-column) {
  margin-left: -1px;
}

.uk-panel:hover {
  cursor: pointer;
}

.uk-drag-and-drop-wrapper,
.uk-file-grid-wrapper {
  padding: 20px;
  background: #FFFFFF;
  border: 1px solid #ececec;
  margin-top: -1px;
}

.uk-existing-file-select {
  border: 1px solid #ececec;
}


.uk-button-group>.uk-button,
.uk-button-group>div .uk-button {
  margin-right: 1px;
}

.uk-button-group>.uk-button:last-child,
.uk-button-group>div:last-child .uk-button {
  margin-left: 0;
  margin-right: 0;
}

.uk-button-group>.uk-button:nth-child(n+2),
.uk-button-group>div:nth-child(n+2) .uk-button {
  margin-left: 0;
}

JavaScript

$('.uk-page-search').keyup(function() {
  //console.log(this.value);
  // should search from left to right and not by chars
  var re = new RegExp(this.value, 'i')
  $('.uk-page').each(function(_, e) {
    $(e).toggle(re.test(e.textContent));
  })
})

$('.uk-page').click(function(e) {
  $('.uk-page-search').val(e.target.textContent);
});