UIKIT modal LINK + POPOVER

by Greggg

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.24.2/js/uikit.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.24.2/css/uikit.min.css">
<a href="#" data-uk-modal="{target:'.uk-add-link-modal', center:true}">Trigger Modal from wysiwyg link button</a>
<hr>
<br>

<div class="editor" contenteditable="true">
  <span class="wysiwyg-color-green ui-thing"><a href="https://github.com/Voog/wysihtml" target="_blank" rel="nofollow" data-uk-lightbox>open source</a></span><br><br>
<span class="wysiwyg-font-family-lol my-custom-class">test da</span><br><br>
  
  ok this is a test <a>I am a very very very long link</a> oko ok kokok o rtok thrt tryrtuetr  trur<br><br> test<br>
</div>


<div class="uk-dropdown uk-dropdown-small uk-popover-link">
  <a href="#" class="uk-button"><i class="uk-icon-external-link"></i></a>
  <a href="#" class="uk-button"><i class="uk-icon-unlink"></i></a>
  <a href="#" class="uk-button" data-uk-modal="{target:'.uk-add-link-modal', center:true}"><i class="uk-icon-edit"></i></a>
</div>

<div class="uk-modal uk-add-link-modal">
  <div class="uk-modal-dialog">
    <form class="uk-form uk-form-stacked">
      <div class="uk-form-row">
        <input type="text" placeholder="Link title " class="uk-width-1-1">
      </div>
      <div class="uk-form-row uk-width-1-1">
        <ul class="uk-subnav" data-uk-switcher="{connect:'#uk-link-type-switcher', animation:'fade'}">
          <li><a href="">Page</a></li>
          <li><a href="">File</a></li>
          <li><a href="">External</a></li>
          <li><a href="">Email</a></li>
          <li><a href="">Tel</a></li>
        </ul>
        <div id="uk-link-type-switcher" class="uk-switcher">
          <div class="uk-switcher-item">
            <div class="uk-position-relative uk-form-row" data-uk-dropdown-overlay>
              <div class="uk-button-dropdown uk-width-1-1 uk-form" data-uk-dropdown="{mode:'click', justify:'#uk-link-type-switcher'}">
          ...

CSS

.uk-modal-dialog {
  background-color: #ECECEC;
  max-width: 380px;
}

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

.uk-drag-and-drop-switcher:hover {
  cursor: pointer;
}

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

.uk-panel-box {
  padding: 15px;
  background: #FFFFFF;
}

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

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

.uk-drag-and-drop-placeholder {
  border: 2px dashed #ececec;
}

.uk-popover-link {
  border-top: 2px solid black;
  min-width:initial;
}

.uk-popover-link::before {
  width: 5px;
  height: 5px;
  font-family: FontAwesome;
  content: '\f0d8';
  position: absolute;
  top: -14px;
  margin: 0 auto;
  left: 0;
  right: 0
}

JavaScript

$('.uk-page-search').keyup(function () {
  console.log(this.value);
  var re = new RegExp(this.value, 'i')
  $('.uk-list li').each(function (_, e) {
    $(e).toggle(re.test(e.textContent));
  })
})
$('.uk-list li').click(function (e) {
  $('.uk-page-search').val(e.target.textContent.trim());
});
var editor = $(".editor"); //needed for wysi anyway
var linkDropdown = $(".uk-popover-link");
$('.editor a').click(function (e) {
  
});
$('body').click(function (e) {
  //
  //e.stopPropagation();
  if(e.target.nodeName==="A" && $(e.target).parents('.editor').length){
    e.preventDefault();
    linkDropdown.show();
    var r=e.target.getBoundingClientRect();
    linkDropdown.css({left: Math.max(0,(r.left+r.right)/2-linkDropdown.width()/2)+'px', top:(r.top+25+window.scrollY)+'px'})
    console.log(linkDropdown.get(0), e.target, r);
  }else {
    linkDropdown.hide();
  }
});