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>
<div class="uk-margin">
  <label class="uk-form-label">Pages</label>
  <div class=" uk-inline uk-width-1-1 uk-margin-bottom"><input type="text" placeholder="SĂ©lectionner" class="uk-input uk-width-1-1 uk-select" value=""></div>
  <div class="pb-page-picker uk-position-relative uk-overflow-auto uk-list uk-list-divider" data-uk-dropdown="pos: bottom-justify;  mode: click; animation: uk-animation-fade">
    <div class=" uk-inline uk-width-1-1 uk-margin-bottom ">
      <span data-uk-icon="icon: search" class="uk-form-icon uk-form-icon-flip uk-icon"></span>
      <input type="text" placeholder="Rechercher…" class="uk-input uk-width-1-1 boundary-page pb-page-search" value=""></div>
    <ul class="uk-nav uk-nav-default">
      <li class="uk-nav-header">Pages</li>
      <li class="uk-nav-divider"></li>
      <li class="uk-parent">
        <a href="#">Page 1</a>
        <ul class="uk-nav-sub">
          <li><a class="pb-navitem-page uk-dropdown-close" href="#">Anchor 1</a></li>
          <li><a class="pb-navitem-page uk-dropdown-close" href="#">Anchor 2</a></li>
        </ul>
      </li>
      <li><a class="pb-navitem-page uk-dropdown-close">Page 2</a></li>
      <li class="uk-parent">
        <a href="#">Folder 1</a>
        <ul class="uk-nav-sub">
          <li><a class="pb-navitem-page uk-dropdown-close" href="#">Sub page 1</a></li>
          <li>
            <a href="#">Sub page 2</a>
            <ul>
              <li><a class="pb-navitem-page uk-dropdown-close" href="#">Anchor 3</a></li>
              <li><a class="pb-navitem-page uk-dropdown-close" href="#">Anchor 4</a></li>
            </ul>
          </li>
          <li><a href="#">Sub page 3</a></li>
      ...

CSS

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

.uk-form-label {
    color: #000;
    font-size: .825rem;
    text-transform: uppercase;
}

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');
})