]> BookStack Code Mirror - bookstack/blob - resources/assets/js/directives.js
Converted toggle switch into a blade/jquery template
[bookstack] / resources / assets / js / directives.js
1 "use strict";
2 import DropZone from "dropzone";
3 import markdown from "marked";
4
5 export default function (ngApp, events) {
6
7     /**
8      * Common tab controls using simple jQuery functions.
9      */
10     ngApp.directive('tabContainer', function() {
11         return {
12             restrict: 'A',
13             link: function (scope, element, attrs) {
14                 const $content = element.find('[tab-content]');
15                 const $buttons = element.find('[tab-button]');
16
17                 if (attrs.tabContainer) {
18                     let initial = attrs.tabContainer;
19                     $buttons.filter(`[tab-button="${initial}"]`).addClass('selected');
20                     $content.hide().filter(`[tab-content="${initial}"]`).show();
21                 } else {
22                     $content.hide().first().show();
23                     $buttons.first().addClass('selected');
24                 }
25
26                 $buttons.click(function() {
27                     let clickedTab = $(this);
28                     $buttons.removeClass('selected');
29                     $content.hide();
30                     let name = clickedTab.addClass('selected').attr('tab-button');
31                     $content.filter(`[tab-content="${name}"]`).show();
32                 });
33             }
34         };
35     });
36
37     /**
38      * Sub form component to allow inner-form sections to act like thier own forms.
39      */
40     ngApp.directive('subForm', function() {
41         return {
42             restrict: 'A',
43             link: function (scope, element, attrs) {
44                 element.on('keypress', e => {
45                     if (e.keyCode === 13) {
46                         submitEvent(e);
47                     }
48                 });
49
50                 element.find('button[type="submit"]').click(submitEvent);
51
52                 function submitEvent(e) {
53                     e.preventDefault()
54                     if (attrs.subForm) scope.$eval(attrs.subForm);
55                 }
56             }
57         };
58     });
59
60
61     /**
62      * Image Picker
63      * Is a simple front-end interface that connects to an ImageManager if present.
64      */
65     ngApp.directive('imagePicker', ['$http', 'imageManagerService', function ($http, imageManagerService) {
66         return {
67             restrict: 'E',
68             template: `
69             <div class="image-picker">
70                 <div>
71                     <img ng-if="image && image !== 'none'" ng-src="{{image}}" ng-class="{{imageClass}}" alt="Image Preview">
72                     <img ng-if="image === '' && defaultImage" ng-src="{{defaultImage}}" ng-class="{{imageClass}}" alt="Image Preview">
73                 </div>
74                 <button class="button" type="button" ng-click="showImageManager()">Select Image</button>
75                 <br>
76
77                 <button class="text-button" ng-click="reset()" type="button">Reset</button>
78                 <span ng-show="showRemove" class="sep">|</span>
79                 <button ng-show="showRemove" class="text-button neg" ng-click="remove()" type="button">Remove</button>
80
81                 <input type="hidden" ng-attr-name="{{name}}" ng-attr-id="{{name}}" ng-attr-value="{{value}}">
82             </div>
83             `,
84             scope: {
85                 name: '@',
86                 resizeHeight: '@',
87                 resizeWidth: '@',
88                 resizeCrop: '@',
89                 showRemove: '=',
90                 currentImage: '@',
91                 currentId: '@',
92                 defaultImage: '@',
93                 imageClass: '@'
94             },
95             link: function (scope, element, attrs) {
96                 let usingIds = typeof scope.currentId !== 'undefined' || scope.currentId === 'false';
97                 scope.image = scope.currentImage;
98                 scope.value = scope.currentImage || '';
99                 if (usingIds) scope.value = scope.currentId;
100
101                 function setImage(imageModel, imageUrl) {
102                     scope.image = imageUrl;
103                     scope.value = usingIds ? imageModel.id : imageUrl;
104                 }
105
106                 scope.reset = function () {
107                     setImage({id: 0}, scope.defaultImage);
108                 };
109
110                 scope.remove = function () {
111                     scope.image = 'none';
112                     scope.value = 'none';
113                 };
114
115                 scope.showImageManager = function () {
116                     imageManagerService.show((image) => {
117                         scope.updateImageFromModel(image);
118                     });
119                 };
120
121                 scope.updateImageFromModel = function (model) {
122                     let isResized = scope.resizeWidth && scope.resizeHeight;
123
124                     if (!isResized) {
125                         scope.$apply(() => {
126                             setImage(model, model.url);
127                         });
128                         return;
129                     }
130
131                     let cropped = scope.resizeCrop ? 'true' : 'false';
132                     let requestString = '/images/thumb/' + model.id + '/' + scope.resizeWidth + '/' + scope.resizeHeight + '/' + cropped;
133                     requestString = window.baseUrl(requestString);
134                     $http.get(requestString).then((response) => {
135                         setImage(model, response.data.url);
136                     });
137                 };
138
139             }
140         };
141     }]);
142
143     /**
144      * DropZone
145      * Used for uploading images
146      */
147     ngApp.directive('dropZone', [function () {
148         return {
149             restrict: 'E',
150             template: `
151             <div class="dropzone-container">
152                 <div class="dz-message">Drop files or click here to upload</div>
153             </div>
154             `,
155             scope: {
156                 uploadUrl: '@',
157                 eventSuccess: '=',
158                 eventError: '=',
159                 uploadedTo: '@'
160             },
161             link: function (scope, element, attrs) {
162                 if (attrs.placeholder) element[0].querySelector('.dz-message').textContent = attrs.placeholder;
163                 let dropZone = new DropZone(element[0].querySelector('.dropzone-container'), {
164                     url: scope.uploadUrl,
165                     init: function () {
166                         let dz = this;
167                         dz.on('sending', function (file, xhr, data) {
168                             let token = window.document.querySelector('meta[name=token]').getAttribute('content');
169                             data.append('_token', token);
170                             let uploadedTo = typeof scope.uploadedTo === 'undefined' ? 0 : scope.uploadedTo;
171                             data.append('uploaded_to', uploadedTo);
172                         });
173                         if (typeof scope.eventSuccess !== 'undefined') dz.on('success', scope.eventSuccess);
174                         dz.on('success', function (file, data) {
175                             $(file.previewElement).fadeOut(400, function () {
176                                 dz.removeFile(file);
177                             });
178                         });
179                         if (typeof scope.eventError !== 'undefined') dz.on('error', scope.eventError);
180                         dz.on('error', function (file, errorMessage, xhr) {
181                             console.log(errorMessage);
182                             console.log(xhr);
183                             function setMessage(message) {
184                                 $(file.previewElement).find('[data-dz-errormessage]').text(message);
185                             }
186
187                             if (xhr.status === 413) setMessage('The server does not allow uploads of this size. Please try a smaller file.');
188                             if (errorMessage.file) setMessage(errorMessage.file[0]);
189
190                         });
191                     }
192                 });
193             }
194         };
195     }]);
196
197     /**
198      * Dropdown
199      * Provides some simple logic to create small dropdown menus
200      */
201     ngApp.directive('dropdown', [function () {
202         return {
203             restrict: 'A',
204             link: function (scope, element, attrs) {
205                 const menu = element.find('ul');
206                 element.find('[dropdown-toggle]').on('click', function () {
207                     menu.show().addClass('anim menuIn');
208                     let inputs = menu.find('input');
209                     let hasInput = inputs.length > 0;
210                     if (hasInput) {
211                         inputs.first().focus();
212                         element.on('keypress', 'input', event => {
213                             if (event.keyCode === 13) {
214                                 event.preventDefault();
215                                 menu.hide();
216                                 menu.removeClass('anim menuIn');
217                                 return false;
218                             }
219                         });
220                     }
221                     element.mouseleave(function () {
222                         menu.hide();
223                         menu.removeClass('anim menuIn');
224                     });
225                 });
226             }
227         };
228     }]);
229
230     /**
231      * TinyMCE
232      * An angular wrapper around the tinyMCE editor.
233      */
234     ngApp.directive('tinymce', ['$timeout', function ($timeout) {
235         return {
236             restrict: 'A',
237             scope: {
238                 tinymce: '=',
239                 mceModel: '=',
240                 mceChange: '='
241             },
242             link: function (scope, element, attrs) {
243
244                 function tinyMceSetup(editor) {
245                     editor.on('ExecCommand change NodeChange ObjectResized', (e) => {
246                         let content = editor.getContent();
247                         $timeout(() => {
248                             scope.mceModel = content;
249                         });
250                         scope.mceChange(content);
251                     });
252
253                     editor.on('keydown', (event) => {
254                         scope.$emit('editor-keydown', event);
255                     });
256
257                     editor.on('init', (e) => {
258                         scope.mceModel = editor.getContent();
259                     });
260
261                     scope.$on('html-update', (event, value) => {
262                         editor.setContent(value);
263                         editor.selection.select(editor.getBody(), true);
264                         editor.selection.collapse(false);
265                         scope.mceModel = editor.getContent();
266                     });
267                 }
268
269                 scope.tinymce.extraSetups.push(tinyMceSetup);
270
271                 // Custom tinyMCE plugins
272                 tinymce.PluginManager.add('customhr', function (editor) {
273                     editor.addCommand('InsertHorizontalRule', function () {
274                         let hrElem = document.createElement('hr');
275                         let cNode = editor.selection.getNode();
276                         let parentNode = cNode.parentNode;
277                         parentNode.insertBefore(hrElem, cNode);
278                     });
279
280                     editor.addButton('hr', {
281                         icon: 'hr',
282                         tooltip: 'Horizontal line',
283                         cmd: 'InsertHorizontalRule'
284                     });
285
286                     editor.addMenuItem('hr', {
287                         icon: 'hr',
288                         text: 'Horizontal line',
289                         cmd: 'InsertHorizontalRule',
290                         context: 'insert'
291                     });
292                 });
293
294                 tinymce.init(scope.tinymce);
295             }
296         }
297     }]);
298
299     /**
300      * Markdown input
301      * Handles the logic for just the editor input field.
302      */
303     ngApp.directive('markdownInput', ['$timeout', function ($timeout) {
304         return {
305             restrict: 'A',
306             scope: {
307                 mdModel: '=',
308                 mdChange: '='
309             },
310             link: function (scope, element, attrs) {
311
312                 // Set initial model content
313                 element = element.find('textarea').first();
314                 let content = element.val();
315                 scope.mdModel = content;
316                 scope.mdChange(markdown(content));
317
318                 element.on('change input', (event) => {
319                     content = element.val();
320                     $timeout(() => {
321                         scope.mdModel = content;
322                         scope.mdChange(markdown(content));
323                     });
324                 });
325
326                 scope.$on('markdown-update', (event, value) => {
327                     element.val(value);
328                     scope.mdModel = value;
329                     scope.mdChange(markdown(value));
330                 });
331
332             }
333         }
334     }]);
335
336     /**
337      * Markdown Editor
338      * Handles all functionality of the markdown editor.
339      */
340     ngApp.directive('markdownEditor', ['$timeout', function ($timeout) {
341         return {
342             restrict: 'A',
343             link: function (scope, element, attrs) {
344
345                 // Elements
346                 const input = element.find('[markdown-input] textarea').first();
347                 const display = element.find('.markdown-display').first();
348                 const insertImage = element.find('button[data-action="insertImage"]');
349                 const insertEntityLink = element.find('button[data-action="insertEntityLink"]')
350
351                 let currentCaretPos = 0;
352
353                 input.blur(event => {
354                     currentCaretPos = input[0].selectionStart;
355                 });
356
357                 // Scroll sync
358                 let inputScrollHeight,
359                     inputHeight,
360                     displayScrollHeight,
361                     displayHeight;
362
363                 function setScrollHeights() {
364                     inputScrollHeight = input[0].scrollHeight;
365                     inputHeight = input.height();
366                     displayScrollHeight = display[0].scrollHeight;
367                     displayHeight = display.height();
368                 }
369
370                 setTimeout(() => {
371                     setScrollHeights();
372                 }, 200);
373                 window.addEventListener('resize', setScrollHeights);
374                 let scrollDebounceTime = 800;
375                 let lastScroll = 0;
376                 input.on('scroll', event => {
377                     let now = Date.now();
378                     if (now - lastScroll > scrollDebounceTime) {
379                         setScrollHeights()
380                     }
381                     let scrollPercent = (input.scrollTop() / (inputScrollHeight - inputHeight));
382                     let displayScrollY = (displayScrollHeight - displayHeight) * scrollPercent;
383                     display.scrollTop(displayScrollY);
384                     lastScroll = now;
385                 });
386
387                 // Editor key-presses
388                 input.keydown(event => {
389                     // Insert image shortcut
390                     if (event.which === 73 && event.ctrlKey && event.shiftKey) {
391                         event.preventDefault();
392                         let caretPos = input[0].selectionStart;
393                         let currentContent = input.val();
394                         const mdImageText = "![](http://)";
395                         input.val(currentContent.substring(0, caretPos) + mdImageText + currentContent.substring(caretPos));
396                         input.focus();
397                         input[0].selectionStart = caretPos + ("![](".length);
398                         input[0].selectionEnd = caretPos + ('![](http://'.length);
399                         return;
400                     }
401
402                     // Insert entity link shortcut
403                     if (event.which === 75 && event.ctrlKey && event.shiftKey) {
404                         showLinkSelector();
405                         return;
406                     }
407
408                     // Pass key presses to controller via event
409                     scope.$emit('editor-keydown', event);
410                 });
411
412                 // Insert image from image manager
413                 insertImage.click(event => {
414                     window.ImageManager.showExternal(image => {
415                         let caretPos = currentCaretPos;
416                         let currentContent = input.val();
417                         let mdImageText = "![" + image.name + "](" + image.thumbs.display + ")";
418                         input.val(currentContent.substring(0, caretPos) + mdImageText + currentContent.substring(caretPos));
419                         input.change();
420                     });
421                 });
422
423                 function showLinkSelector() {
424                     window.showEntityLinkSelector((entity) => {
425                         let selectionStart = currentCaretPos;
426                         let selectionEnd = input[0].selectionEnd;
427                         let textSelected = (selectionEnd !== selectionStart);
428                         let currentContent = input.val();
429
430                         if (textSelected) {
431                             let selectedText = currentContent.substring(selectionStart, selectionEnd);
432                             let linkText = `[${selectedText}](${entity.link})`;
433                             input.val(currentContent.substring(0, selectionStart) + linkText + currentContent.substring(selectionEnd));
434                         } else {
435                             let linkText = ` [${entity.name}](${entity.link}) `;
436                             input.val(currentContent.substring(0, selectionStart) + linkText + currentContent.substring(selectionStart))
437                         }
438                         input.change();
439                     });
440                 }
441                 insertEntityLink.click(showLinkSelector);
442
443                 // Upload and insert image on paste
444                 function editorPaste(e) {
445                     e = e.originalEvent;
446                     if (!e.clipboardData) return
447                     let items = e.clipboardData.items;
448                     if (!items) return;
449                     for (let i = 0; i < items.length; i++) {
450                         uploadImage(items[i].getAsFile());
451                     }
452                 }
453
454                 input.on('paste', editorPaste);
455
456                 // Handle image drop, Uploads images to BookStack.
457                 function handleImageDrop(event) {
458                     event.stopPropagation();
459                     event.preventDefault();
460                     let files = event.originalEvent.dataTransfer.files;
461                     for (let i = 0; i < files.length; i++) {
462                         uploadImage(files[i]);
463                     }
464                 }
465
466                 input.on('drop', handleImageDrop);
467
468                 // Handle image upload and add image into markdown content
469                 function uploadImage(file) {
470                     if (file.type.indexOf('image') !== 0) return;
471                     let formData = new FormData();
472                     let ext = 'png';
473                     let xhr = new XMLHttpRequest();
474
475                     if (file.name) {
476                         let fileNameMatches = file.name.match(/\.(.+)$/);
477                         if (fileNameMatches) {
478                             ext = fileNameMatches[1];
479                         }
480                     }
481
482                     // Insert image into markdown
483                     let id = "image-" + Math.random().toString(16).slice(2);
484                     let selectStart = input[0].selectionStart;
485                     let selectEnd = input[0].selectionEnd;
486                     let content = input[0].value;
487                     let selectText = content.substring(selectStart, selectEnd);
488                     let placeholderImage = window.baseUrl(`/loading.gif#upload${id}`);
489                     let innerContent = ((selectEnd > selectStart) ? `![${selectText}]` : '![]') + `(${placeholderImage})`;
490                     input[0].value = content.substring(0, selectStart) +  innerContent + content.substring(selectEnd);
491
492                     input.focus();
493                     input[0].selectionStart = selectStart;
494                     input[0].selectionEnd = selectStart;
495
496                     let remoteFilename = "image-" + Date.now() + "." + ext;
497                     formData.append('file', file, remoteFilename);
498                     formData.append('_token', document.querySelector('meta[name="token"]').getAttribute('content'));
499
500                     xhr.open('POST', window.baseUrl('/images/gallery/upload'));
501                     xhr.onload = function () {
502                         let selectStart = input[0].selectionStart;
503                         if (xhr.status === 200 || xhr.status === 201) {
504                             let result = JSON.parse(xhr.responseText);
505                             input[0].value = input[0].value.replace(placeholderImage, result.thumbs.display);
506                             input.change();
507                         } else {
508                             console.log('An error occurred uploading the image');
509                             console.log(xhr.responseText);
510                             input[0].value = input[0].value.replace(innerContent, '');
511                             input.change();
512                         }
513                         input.focus();
514                         input[0].selectionStart = selectStart;
515                         input[0].selectionEnd = selectStart;
516                     };
517                     xhr.send(formData);
518                 }
519
520             }
521         }
522     }]);
523
524     /**
525      * Page Editor Toolbox
526      * Controls all functionality for the sliding toolbox
527      * on the page edit view.
528      */
529     ngApp.directive('toolbox', [function () {
530         return {
531             restrict: 'A',
532             link: function (scope, elem, attrs) {
533
534                 // Get common elements
535                 const $buttons = elem.find('[toolbox-tab-button]');
536                 const $content = elem.find('[toolbox-tab-content]');
537                 const $toggle = elem.find('[toolbox-toggle]');
538
539                 // Handle toolbox toggle click
540                 $toggle.click((e) => {
541                     elem.toggleClass('open');
542                 });
543
544                 // Set an active tab/content by name
545                 function setActive(tabName, openToolbox) {
546                     $buttons.removeClass('active');
547                     $content.hide();
548                     $buttons.filter(`[toolbox-tab-button="${tabName}"]`).addClass('active');
549                     $content.filter(`[toolbox-tab-content="${tabName}"]`).show();
550                     if (openToolbox) elem.addClass('open');
551                 }
552
553                 // Set the first tab content active on load
554                 setActive($content.first().attr('toolbox-tab-content'), false);
555
556                 // Handle tab button click
557                 $buttons.click(function (e) {
558                     let name = $(this).attr('toolbox-tab-button');
559                     setActive(name, true);
560                 });
561             }
562         }
563     }]);
564
565     /**
566      * Tag Autosuggestions
567      * Listens to child inputs and provides autosuggestions depending on field type
568      * and input. Suggestions provided by server.
569      */
570     ngApp.directive('tagAutosuggestions', ['$http', function ($http) {
571         return {
572             restrict: 'A',
573             link: function (scope, elem, attrs) {
574
575                 // Local storage for quick caching.
576                 const localCache = {};
577
578                 // Create suggestion element
579                 const suggestionBox = document.createElement('ul');
580                 suggestionBox.className = 'suggestion-box';
581                 suggestionBox.style.position = 'absolute';
582                 suggestionBox.style.display = 'none';
583                 const $suggestionBox = $(suggestionBox);
584
585                 // General state tracking
586                 let isShowing = false;
587                 let currentInput = false;
588                 let active = 0;
589
590                 // Listen to input events on autosuggest fields
591                 elem.on('input focus', '[autosuggest]', function (event) {
592                     let $input = $(this);
593                     let val = $input.val();
594                     let url = $input.attr('autosuggest');
595                     let type = $input.attr('autosuggest-type');
596
597                     // Add name param to request if for a value
598                     if (type.toLowerCase() === 'value') {
599                         let $nameInput = $input.closest('tr').find('[autosuggest-type="name"]').first();
600                         let nameVal = $nameInput.val();
601                         if (nameVal !== '') {
602                             url += '?name=' + encodeURIComponent(nameVal);
603                         }
604                     }
605
606                     let suggestionPromise = getSuggestions(val.slice(0, 3), url);
607                     suggestionPromise.then(suggestions => {
608                         if (val.length === 0) {
609                             displaySuggestions($input, suggestions.slice(0, 6));
610                         } else  {
611                             suggestions = suggestions.filter(item => {
612                                 return item.toLowerCase().indexOf(val.toLowerCase()) !== -1;
613                             }).slice(0, 4);
614                             displaySuggestions($input, suggestions);
615                         }
616                     });
617                 });
618
619                 // Hide autosuggestions when input loses focus.
620                 // Slight delay to allow clicks.
621                 let lastFocusTime = 0;
622                 elem.on('blur', '[autosuggest]', function (event) {
623                     let startTime = Date.now();
624                     setTimeout(() => {
625                         if (lastFocusTime < startTime) {
626                             $suggestionBox.hide();
627                             isShowing = false;
628                         }
629                     }, 200)
630                 });
631                 elem.on('focus', '[autosuggest]', function (event) {
632                     lastFocusTime = Date.now();
633                 });
634
635                 elem.on('keydown', '[autosuggest]', function (event) {
636                     if (!isShowing) return;
637
638                     let suggestionElems = suggestionBox.childNodes;
639                     let suggestCount = suggestionElems.length;
640
641                     // Down arrow
642                     if (event.keyCode === 40) {
643                         let newActive = (active === suggestCount - 1) ? 0 : active + 1;
644                         changeActiveTo(newActive, suggestionElems);
645                     }
646                     // Up arrow
647                     else if (event.keyCode === 38) {
648                         let newActive = (active === 0) ? suggestCount - 1 : active - 1;
649                         changeActiveTo(newActive, suggestionElems);
650                     }
651                     // Enter or tab key
652                     else if ((event.keyCode === 13 || event.keyCode === 9) && !event.shiftKey) {
653                         let text = suggestionElems[active].textContent;
654                         currentInput[0].value = text;
655                         currentInput.focus();
656                         $suggestionBox.hide();
657                         isShowing = false;
658                         if (event.keyCode === 13) {
659                             event.preventDefault();
660                             return false;
661                         }
662                     }
663                 });
664
665                 // Change the active suggestion to the given index
666                 function changeActiveTo(index, suggestionElems) {
667                     suggestionElems[active].className = '';
668                     active = index;
669                     suggestionElems[active].className = 'active';
670                 }
671
672                 // Display suggestions on a field
673                 let prevSuggestions = [];
674
675                 function displaySuggestions($input, suggestions) {
676
677                     // Hide if no suggestions
678                     if (suggestions.length === 0) {
679                         $suggestionBox.hide();
680                         isShowing = false;
681                         prevSuggestions = suggestions;
682                         return;
683                     }
684
685                     // Otherwise show and attach to input
686                     if (!isShowing) {
687                         $suggestionBox.show();
688                         isShowing = true;
689                     }
690                     if ($input !== currentInput) {
691                         $suggestionBox.detach();
692                         $input.after($suggestionBox);
693                         currentInput = $input;
694                     }
695
696                     // Return if no change
697                     if (prevSuggestions.join() === suggestions.join()) {
698                         prevSuggestions = suggestions;
699                         return;
700                     }
701
702                     // Build suggestions
703                     $suggestionBox[0].innerHTML = '';
704                     for (let i = 0; i < suggestions.length; i++) {
705                         let suggestion = document.createElement('li');
706                         suggestion.textContent = suggestions[i];
707                         suggestion.onclick = suggestionClick;
708                         if (i === 0) {
709                             suggestion.className = 'active';
710                             active = 0;
711                         }
712                         $suggestionBox[0].appendChild(suggestion);
713                     }
714
715                     prevSuggestions = suggestions;
716                 }
717
718                 // Suggestion click event
719                 function suggestionClick(event) {
720                     currentInput[0].value = this.textContent;
721                     currentInput.focus();
722                     $suggestionBox.hide();
723                     isShowing = false;
724                 }
725
726                 // Get suggestions & cache
727                 function getSuggestions(input, url) {
728                     let hasQuery = url.indexOf('?') !== -1;
729                     let searchUrl = url + (hasQuery ? '&' : '?') + 'search=' + encodeURIComponent(input);
730
731                     // Get from local cache if exists
732                     if (typeof localCache[searchUrl] !== 'undefined') {
733                         return new Promise((resolve, reject) => {
734                             resolve(localCache[searchUrl]);
735                         });
736                     }
737
738                     return $http.get(searchUrl).then(response => {
739                         localCache[searchUrl] = response.data;
740                         return response.data;
741                     });
742                 }
743
744             }
745         }
746     }]);
747
748     ngApp.directive('entityLinkSelector', [function($http) {
749         return {
750             restict: 'A',
751             link: function(scope, element, attrs) {
752
753                 const selectButton = element.find('.entity-link-selector-confirm');
754                 let callback = false;
755                 let entitySelection = null;
756
757                 // Handle entity selection change, Stores the selected entity locally
758                 function entitySelectionChange(entity) {
759                     entitySelection = entity;
760                     if (entity === null) {
761                         selectButton.attr('disabled', 'true');
762                     } else {
763                         selectButton.removeAttr('disabled');
764                     }
765                 }
766                 events.listen('entity-select-change', entitySelectionChange);
767
768                 // Handle selection confirm button click
769                 selectButton.click(event => {
770                     hide();
771                     if (entitySelection !== null) callback(entitySelection);
772                 });
773
774                 // Show selector interface
775                 function show() {
776                     element.fadeIn(240);
777                 }
778
779                 // Hide selector interface
780                 function hide() {
781                     element.fadeOut(240);
782                 }
783
784                 // Listen to confirmation of entity selections (doubleclick)
785                 events.listen('entity-select-confirm', entity => {
786                     hide();
787                     callback(entity);
788                 });
789
790                 // Show entity selector, Accessible globally, and store the callback
791                 window.showEntityLinkSelector = function(passedCallback) {
792                     show();
793                     callback = passedCallback;
794                 };
795
796             }
797         };
798     }]);
799
800
801     ngApp.directive('entitySelector', ['$http', '$sce', function ($http, $sce) {
802         return {
803             restrict: 'A',
804             scope: true,
805             link: function (scope, element, attrs) {
806                 scope.loading = true;
807                 scope.entityResults = false;
808                 scope.search = '';
809
810                 // Add input for forms
811                 const input = element.find('[entity-selector-input]').first();
812
813                 // Detect double click events
814                 let lastClick = 0;
815                 function isDoubleClick() {
816                     let now = Date.now();
817                     let answer = now - lastClick < 300;
818                     lastClick = now;
819                     return answer;
820                 }
821
822                 // Listen to entity item clicks
823                 element.on('click', '.entity-list a', function(event) {
824                     event.preventDefault();
825                     event.stopPropagation();
826                     let item = $(this).closest('[data-entity-type]');
827                     itemSelect(item, isDoubleClick());
828                 });
829                 element.on('click', '[data-entity-type]', function(event) {
830                     itemSelect($(this), isDoubleClick());
831                 });
832
833                 // Select entity action
834                 function itemSelect(item, doubleClick) {
835                     let entityType = item.attr('data-entity-type');
836                     let entityId = item.attr('data-entity-id');
837                     let isSelected = !item.hasClass('selected') || doubleClick;
838                     element.find('.selected').removeClass('selected').removeClass('primary-background');
839                     if (isSelected) item.addClass('selected').addClass('primary-background');
840                     let newVal = isSelected ? `${entityType}:${entityId}` : '';
841                     input.val(newVal);
842
843                     if (!isSelected) {
844                         events.emit('entity-select-change', null);
845                     }
846
847                     if (!doubleClick && !isSelected) return;
848
849                     let link = item.find('.entity-list-item-link').attr('href');
850                     let name = item.find('.entity-list-item-name').text();
851
852                     if (doubleClick) {
853                         events.emit('entity-select-confirm', {
854                             id: Number(entityId),
855                             name: name,
856                             link: link
857                         });
858                     }
859
860                     if (isSelected) {
861                         events.emit('entity-select-change', {
862                             id: Number(entityId),
863                             name: name,
864                             link: link
865                         });
866                     }
867                 }
868
869                 // Get search url with correct types
870                 function getSearchUrl() {
871                     let types = (attrs.entityTypes) ? encodeURIComponent(attrs.entityTypes) : encodeURIComponent('page,book,chapter');
872                     return window.baseUrl(`/ajax/search/entities?types=${types}`);
873                 }
874
875                 // Get initial contents
876                 $http.get(getSearchUrl()).then(resp => {
877                     scope.entityResults = $sce.trustAsHtml(resp.data);
878                     scope.loading = false;
879                 });
880
881                 // Search when typing
882                 scope.searchEntities = function() {
883                     scope.loading = true;
884                     input.val('');
885                     let url = getSearchUrl() + '&term=' + encodeURIComponent(scope.search);
886                     $http.get(url).then(resp => {
887                         scope.entityResults = $sce.trustAsHtml(resp.data);
888                         scope.loading = false;
889                     });
890                 };
891             }
892         };
893     }]);
894 };