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="#">Link picker</a>

<!-- This is the Link Picker -->
<div class="bk-link-picker uk-width-large" uk-drop="mode: click; pos: right-bottom; offset: 20; animation: uk-animation-slide-top-small; duration: 1000">
  <div class="uk-card uk-box-shadow-xlarge">
    <form class="uk-form-stacked">

      <div class="uk-card-header">
        <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 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">
              <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-list uk-position-relative uk-overflow-auto" uk-dropdown="pos: bottom-justify; boundary: .boundary-page; boundary-align: true;  mode: click; animation: uk-animation-fade">
              <ul class="uk-list uk-list-space">
                <li class="pb-page"><a href="#">Home</a></li>
                <li class="pb-page"><a href="#">About</a></li>
                <li...

CSS

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

.pb-test {
  height: 100px;
  width: 100px;
  margin: 13px 6.5px;
}

.pb-page-list,
.pb-file-list {
  max-height: 300px;
}

.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

$('.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-edit-image').click(function() {
  alert('We will allow to edit image through https://creativesdk.adobe.com/docs/web/#/articles/imageeditorui/index.html')
})