CMS LINK PICKER OK GROUPED

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>
<p style="height: 0px"></p>
<a href="#bk-link-picker" data-uk-toggle>Link picker</a>
<p style="height: 250px"></p>
<!-- This is the Link Picker -->
<div id="bk-link-picker" class="uk-width-large" uk-drop="mode: click; pos: right-center; animation: uk-animation-slide-top-small; duration: 1000; delay-hide: 0">
  <div class="uk-card uk-box-shadow-xlarge">

      <div class="uk-card-header">
      <div class="uk-grid-divider uk-flex-right uk-flex-middle" uk-grid>
    <div class="">
      <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="">External</a></li>
      </ul>
    </div>
    <div class="">
      <a href="#" uk-icon="icon: info"></a>
    </div>
  </div>
  </div>
  <!-- ./ -->

      <div class="uk-card-body">
        <div id="uk-link-type-switcher" class="uk-switcher">

          <!-- First tab -->
          <div class="uk-active">
            <h4 class="uk-margin-remove">Pages</h4>
            <div class="uk-width-1-1 uk-inline uk-margin-bottom">
              <span class="uk-form-icon uk-form-icon-flip" uk-icon="icon: search"></span>
              <input class="uk-input uk-width-1-1 boundary-page pb-page-search" type="text" placeholder="Select...">
            </div>
            <div class="pb-page-picker uk-position-relative uk-height-small uk-overflow-auto" uk-drop="pos: bottom-justify; boundary: .boundary-page; boundary-align: true;  mode: click; animation: uk-animation-fade">
              <ul class="uk-list">
                <li class="pb-page">Home</li>
         ...

CSS

h4 {
  text-transform: uppercase;
  font-size: 0.875rem;
}



.pb-page {
  background-color: #f1f1f1;
  padding: 8px 14px;
  color: #444;
  font-size: 0.8rem;
  text-transform: uppercase
}

.pb-image-manager {
  z-index: 1030;
}

.pb-image-picker:hover {
  cursor: pointer;
}

.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;
}

.uk-placeholder {
  border: 1px solid #e5e5e5;
}

JavaScript

$('.pb-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')
  $('.pb-page').each(function(_, e) {
    $(e).toggle(re.test(e.textContent));
  })
})

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

$('.pb-drop-close').on('click', function() {
  UIkit.drop('#bk-link-picker').hide();
});

$('.pb-image-manager').on('click', function(e) {
  e.stopPropagation();
});

$('.pb-remove-image').on('click', function(e) {
  e.stopPropagation();
  $('.pb-image-picker-fill').css('display', 'none');
  $('.pb-image-picker-empty').css('display', 'block');
});

$(document).ready(function(){
	$('.pb-image-picker-fill').css('display', 'none');
})

$('.pb-add-image-example').on('click', function(){
	$('.pb-image-picker-fill').css('display', 'block');
  $('.pb-image-picker-empty').css('display', 'none');
})