]> BookStack Code Mirror - bookstack/blob - resources/assets/js/directives.js
Merge branch 'v0.11'
[bookstack] / resources / assets / js / directives.js
1 "use strict";
2 const DropZone = require('dropzone');
3 const markdown = require('marked');
4
5 const toggleSwitchTemplate = require('./components/toggle-switch.html');
6 const imagePickerTemplate = require('./components/image-picker.html');
7 const dropZoneTemplate = require('./components/drop-zone.html');
8
9 module.exports = function (ngApp, events) {
10
11     /**
12      * Toggle Switches
13      * Has basic on/off functionality.
14      * Use string values of 'true' & 'false' to dictate the current state.
15      */
16     ngApp.directive('toggleSwitch', function () {
17         return {
18             restrict: 'A',
19             template: toggleSwitchTemplate,
20             scope: true,
21             link: function (scope, element, attrs) {
22                 scope.name = attrs.name;
23                 scope.value = attrs.value;
24                 scope.isActive = scope.value == true && scope.value != 'false';
25                 scope.value = (scope.value == true && scope.value != 'false') ? 'true' : 'false';
26
27                 scope.switch = function () {
28                     scope.isActive = !scope.isActive;
29                     scope.value = scope.isActive ? 'true' : 'false';
30                 }
31
32             }
33         };
34     });
35
36
37     /**
38      * Image Picker
39      * Is a simple front-end interface that connects to an ImageManager if present.
40      */
41     ngApp.directive('imagePicker', ['$http', 'imageManagerService', function ($http, imageManagerService) {
42         return {
43             restrict: 'E',
44             template: imagePickerTemplate,
45             scope: {
46                 name: '@',
47                 resizeHeight: '@',
48                 resizeWidth: '@',
49                 resizeCrop: '@',
50                 showRemove: '=',
51                 currentImage: '@',
52                 currentId: '@',
53                 defaultImage: '@',
54                 imageClass: '@'
55             },
56             link: function (scope, element, attrs) {
57                 let usingIds = typeof scope.currentId !== 'undefined' || scope.currentId === 'false';
58                 scope.image = scope.currentImage;
59                 scope.value = scope.currentImage || '';
60                 if (usingIds) scope.value = scope.currentId;
61
62                 function setImage(imageModel, imageUrl) {
63                     scope.image = imageUrl;
64                     scope.value = usingIds ? imageModel.id : imageUrl;
65                 }
66
67                 scope.reset = function () {
68                     setImage({id: 0}, scope.defaultImage);
69                 };
70
71                 scope.remove = function () {
72                     scope.image = 'none';
73                     scope.value = 'none';
74                 };
75
76                 scope.showImageManager = function () {
77                     imageManagerService.show((image) => {
78                         scope.updateImageFromModel(image);
79                     });
80                 };
81
82                 scope.updateImageFromModel = function (model) {
83                     let isResized = scope.resizeWidth && scope.resizeHeight;
84
85                     if (!isResized) {
86                         scope.$apply(() => {
87                             setImage(model, model.url);
88                         });
89                         return;
90                     }
91
92                     let cropped = scope.resizeCrop ? 'true' : 'false';
93                     let requestString = '/images/thumb/' + model.id + '/' + scope.resizeWidth + '/' + scope.resizeHeight + '/' + cropped;
94                     requestString = window.baseUrl(requestString);
95                     $http.get(requestString).then((response) => {
96                         setImage(model, response.data.url);
97                     });
98                 };
99
100             }
101         };
102     }]);
103
104     /**
105      * DropZone
106      * Used for uploading images
107      */
108     ngApp.directive('dropZone', [function () {
109         return {
110             restrict: 'E',
111             template: dropZoneTemplate,
112             scope: {
113                 uploadUrl: '@',
114                 eventSuccess: '=',
115                 eventError: '=',
116                 uploadedTo: '@'
117             },
118             link: function (scope, element, attrs) {
119                 var dropZone = new DropZone(element[0].querySelector('.dropzone-container'), {
120                     url: scope.uploadUrl,
121                     init: function () {
122                         var dz = this;
123                         dz.on('sending', function (file, xhr, data) {
124                             var token = window.document.querySelector('meta[name=token]').getAttribute('content');
125                             data.append('_token', token);
126                             var uploadedTo = typeof scope.uploadedTo === 'undefined' ? 0 : scope.uploadedTo;
127                             data.append('uploaded_to', uploadedTo);
128                         });
129                         if (typeof scope.eventSuccess !== 'undefined') dz.on('success', scope.eventSuccess);
130                         dz.on('success', function (file, data) {
131                             $(file.previewElement).fadeOut(400, function () {
132                                 dz.removeFile(file);
133                             });
134                         });
135                         if (typeof scope.eventError !== 'undefined') dz.on('error', scope.eventError);
136                         dz.on('error', function (file, errorMessage, xhr) {
137                             console.log(errorMessage);
138                             console.log(xhr);
139                             function setMessage(message) {
140                                 $(file.previewElement).find('[data-dz-errormessage]').text(message);
141                             }
142
143                             if (xhr.status === 413) setMessage('The server does not allow uploads of this size. Please try a smaller file.');
144                             if (errorMessage.file) setMessage(errorMessage.file[0]);
145
146                         });
147                     }
148                 });
149             }
150         };
151     }]);
152
153     /**
154      * Dropdown
155      * Provides some simple logic to create small dropdown menus
156      */
157     ngApp.directive('dropdown', [function () {
158         return {
159             restrict: 'A',
160             link: function (scope, element, attrs) {
161                 const menu = element.find('ul');
162                 element.find('[dropdown-toggle]').on('click', function () {
163                     menu.show().addClass('anim menuIn');
164                     let inputs = menu.find('input');
165                     let hasInput = inputs.length > 0;
166                     if (hasInput) {
167                         inputs.first().focus();
168                         element.on('keypress', 'input', event => {
169                             if (event.keyCode === 13) {
170                                 event.preventDefault();
171                                 menu.hide();
172                                 menu.removeClass('anim menuIn');
173                                 return false;
174                             }
175                         });
176                     }
177                     element.mouseleave(function () {
178                         menu.hide();
179                         menu.removeClass('anim menuIn');
180                     });
181                 });
182             }
183         };
184     }]);
185
186     /**
187      * TinyMCE
188      * An angular wrapper around the tinyMCE editor.
189      */
190     ngApp.directive('tinymce', ['$timeout', function ($timeout) {
191         return {
192             restrict: 'A',
193             scope: {
194                 tinymce: '=',
195                 mceModel: '=',
196                 mceChange: '='
197             },
198             link: function (scope, element, attrs) {
199
200                 function tinyMceSetup(editor) {
201                     editor.on('ExecCommand change NodeChange ObjectResized', (e) => {
202                         var content = editor.getContent();
203                         $timeout(() => {
204                             scope.mceModel = content;
205                         });
206                         scope.mceChange(content);
207                     });
208
209                     editor.on('keydown', (event) => {
210                         scope.$emit('editor-keydown', event);
211                     });
212
213                     editor.on('init', (e) => {
214                         scope.mceModel = editor.getContent();
215                     });
216
217                     scope.$on('html-update', (event, value) => {
218                         editor.setContent(value);
219                         editor.selection.select(editor.getBody(), true);
220                         editor.selection.collapse(false);
221                         scope.mceModel = editor.getContent();
222                     });
223                 }
224
225                 scope.tinymce.extraSetups.push(tinyMceSetup);
226
227                 // Custom tinyMCE plugins
228                 tinymce.PluginManager.add('customhr', function (editor) {
229                     editor.addCommand('InsertHorizontalRule', function () {
230                         var hrElem = document.createElement('hr');
231                         var cNode = editor.selection.getNode();
232                         var parentNode = cNode.parentNode;
233                         parentNode.insertBefore(hrElem, cNode);
234                     });
235
236                     editor.addButton('hr', {
237                         icon: 'hr',
238                         tooltip: 'Horizontal line',
239                         cmd: 'InsertHorizontalRule'
240                     });
241
242                     editor.addMenuItem('hr', {
243                         icon: 'hr',
244                         text: 'Horizontal line',
245                         cmd: 'InsertHorizontalRule',
246                         context: 'insert'
247                     });
248                 });
249
250                 tinymce.init(scope.tinymce);
251             }
252         }
253     }]);
254
255     /**
256      * Markdown input
257      * Handles the logic for just the editor input field.
258      */
259     ngApp.directive('markdownInput', ['$timeout', function ($timeout) {
260         return {
261             restrict: 'A',
262             scope: {
263                 mdModel: '=',
264                 mdChange: '='
265             },
266             link: function (scope, element, attrs) {
267
268                 // Set initial model content
269                 element = element.find('textarea').first();
270                 let content = element.val();
271                 scope.mdModel = content;
272                 scope.mdChange(markdown(content));
273
274                 console.log('test');
275
276                 element.on('change input', (event) => {
277                     content = element.val();
278                     $timeout(() => {
279                         scope.mdModel = content;
280                         scope.mdChange(markdown(content));
281                     });
282                 });
283
284                 scope.$on('markdown-update', (event, value) => {
285                     element.val(value);
286                     scope.mdModel = value;
287                     scope.mdChange(markdown(value));
288                 });
289
290             }
291         }
292     }]);
293
294     /**
295      * Markdown Editor
296      * Handles all functionality of the markdown editor.
297      */
298     ngApp.directive('markdownEditor', ['$timeout', function ($timeout) {
299         return {
300             restrict: 'A',
301             link: function (scope, element, attrs) {
302
303                 // Elements
304                 const input = element.find('[markdown-input] textarea').first();
305                 const display = element.find('.markdown-display').first();
306                 const insertImage = element.find('button[data-action="insertImage"]');
307
308                 let currentCaretPos = 0;
309
310                 input.blur(event => {
311                     currentCaretPos = input[0].selectionStart;
312                 });
313
314                 // Scroll sync
315                 let inputScrollHeight,
316                     inputHeight,
317                     displayScrollHeight,
318                     displayHeight;
319
320                 function setScrollHeights() {
321                     inputScrollHeight = input[0].scrollHeight;
322                     inputHeight = input.height();
323                     displayScrollHeight = display[0].scrollHeight;
324                     displayHeight = display.height();
325                 }
326
327                 setTimeout(() => {
328                     setScrollHeights();
329                 }, 200);
330                 window.addEventListener('resize', setScrollHeights);
331                 let scrollDebounceTime = 800;
332                 let lastScroll = 0;
333                 input.on('scroll', event => {
334                     let now = Date.now();
335                     if (now - lastScroll > scrollDebounceTime) {
336                         setScrollHeights()
337                     }
338                     let scrollPercent = (input.scrollTop() / (inputScrollHeight - inputHeight));
339                     let displayScrollY = (displayScrollHeight - displayHeight) * scrollPercent;
340                     display.scrollTop(displayScrollY);
341                     lastScroll = now;
342                 });
343
344                 // Editor key-presses
345                 input.keydown(event => {
346                     // Insert image shortcut
347                     if (event.which === 73 && event.ctrlKey && event.shiftKey) {
348                         event.preventDefault();
349                         let caretPos = input[0].selectionStart;
350                         let currentContent = input.val();
351                         const mdImageText = "![](http://)";
352                         input.val(currentContent.substring(0, caretPos) + mdImageText + currentContent.substring(caretPos));
353                         input.focus();
354                         input[0].selectionStart = caretPos + ("![](".length);
355                         input[0].selectionEnd = caretPos + ('![](http://'.length);
356                         return;
357                     }
358                     // Pass key presses to controller via event
359                     scope.$emit('editor-keydown', event);
360                 });
361
362                 // Insert image from image manager
363                 insertImage.click(event => {
364                     window.ImageManager.showExternal(image => {
365                         let caretPos = currentCaretPos;
366                         let currentContent = input.val();
367                         let mdImageText = "![" + image.name + "](" + image.url + ")";
368                         input.val(currentContent.substring(0, caretPos) + mdImageText + currentContent.substring(caretPos));
369                         input.change();
370                     });
371                 });
372
373             }
374         }
375     }]);
376
377     /**
378      * Page Editor Toolbox
379      * Controls all functionality for the sliding toolbox
380      * on the page edit view.
381      */
382     ngApp.directive('toolbox', [function () {
383         return {
384             restrict: 'A',
385             link: function (scope, elem, attrs) {
386
387                 // Get common elements
388                 const $buttons = elem.find('[tab-button]');
389                 const $content = elem.find('[tab-content]');
390                 const $toggle = elem.find('[toolbox-toggle]');
391
392                 // Handle toolbox toggle click
393                 $toggle.click((e) => {
394                     elem.toggleClass('open');
395                 });
396
397                 // Set an active tab/content by name
398                 function setActive(tabName, openToolbox) {
399                     $buttons.removeClass('active');
400                     $content.hide();
401                     $buttons.filter(`[tab-button="${tabName}"]`).addClass('active');
402                     $content.filter(`[tab-content="${tabName}"]`).show();
403                     if (openToolbox) elem.addClass('open');
404                 }
405
406                 // Set the first tab content active on load
407                 setActive($content.first().attr('tab-content'), false);
408
409                 // Handle tab button click
410                 $buttons.click(function (e) {
411                     let name = $(this).attr('tab-button');
412                     setActive(name, true);
413                 });
414             }
415         }
416     }]);
417
418     /**
419      * Tag Autosuggestions
420      * Listens to child inputs and provides autosuggestions depending on field type
421      * and input. Suggestions provided by server.
422      */
423     ngApp.directive('tagAutosuggestions', ['$http', function ($http) {
424         return {
425             restrict: 'A',
426             link: function (scope, elem, attrs) {
427
428                 // Local storage for quick caching.
429                 const localCache = {};
430
431                 // Create suggestion element
432                 const suggestionBox = document.createElement('ul');
433                 suggestionBox.className = 'suggestion-box';
434                 suggestionBox.style.position = 'absolute';
435                 suggestionBox.style.display = 'none';
436                 const $suggestionBox = $(suggestionBox);
437
438                 // General state tracking
439                 let isShowing = false;
440                 let currentInput = false;
441                 let active = 0;
442
443                 // Listen to input events on autosuggest fields
444                 elem.on('input focus', '[autosuggest]', function (event) {
445                     let $input = $(this);
446                     let val = $input.val();
447                     let url = $input.attr('autosuggest');
448                     let type = $input.attr('autosuggest-type');
449                     
450                     // Add name param to request if for a value
451                     if (type.toLowerCase() === 'value') {
452                         let $nameInput = $input.closest('tr').find('[autosuggest-type="name"]').first();
453                         let nameVal = $nameInput.val();
454                         if (nameVal !== '') {
455                             url += '?name=' + encodeURIComponent(nameVal);
456                         }
457                     }
458
459                     let suggestionPromise = getSuggestions(val.slice(0, 3), url);
460                     suggestionPromise.then(suggestions => {
461                         if (val.length === 0) {
462                             displaySuggestions($input, suggestions.slice(0, 6));
463                         } else  {
464                             suggestions = suggestions.filter(item => {
465                                 return item.toLowerCase().indexOf(val.toLowerCase()) !== -1;
466                             }).slice(0, 4);
467                             displaySuggestions($input, suggestions);
468                         }
469                     });
470                 });
471
472                 // Hide autosuggestions when input loses focus.
473                 // Slight delay to allow clicks.
474                 let lastFocusTime = 0;
475                 elem.on('blur', '[autosuggest]', function (event) {
476                     let startTime = Date.now();
477                     setTimeout(() => {
478                         if (lastFocusTime < startTime) {
479                             $suggestionBox.hide();
480                             isShowing = false;
481                         }
482                     }, 200)
483                 });
484                 elem.on('focus', '[autosuggest]', function (event) {
485                     lastFocusTime = Date.now();
486                 });
487
488                 elem.on('keydown', '[autosuggest]', function (event) {
489                     if (!isShowing) return;
490
491                     let suggestionElems = suggestionBox.childNodes;
492                     let suggestCount = suggestionElems.length;
493
494                     // Down arrow
495                     if (event.keyCode === 40) {
496                         let newActive = (active === suggestCount - 1) ? 0 : active + 1;
497                         changeActiveTo(newActive, suggestionElems);
498                     }
499                     // Up arrow
500                     else if (event.keyCode === 38) {
501                         let newActive = (active === 0) ? suggestCount - 1 : active - 1;
502                         changeActiveTo(newActive, suggestionElems);
503                     }
504                     // Enter or tab key
505                     else if ((event.keyCode === 13 || event.keyCode === 9) && !event.shiftKey) {
506                         let text = suggestionElems[active].textContent;
507                         currentInput[0].value = text;
508                         currentInput.focus();
509                         $suggestionBox.hide();
510                         isShowing = false;
511                         if (event.keyCode === 13) {
512                             event.preventDefault();
513                             return false;
514                         }
515                     }
516                 });
517
518                 // Change the active suggestion to the given index
519                 function changeActiveTo(index, suggestionElems) {
520                     suggestionElems[active].className = '';
521                     active = index;
522                     suggestionElems[active].className = 'active';
523                 }
524
525                 // Display suggestions on a field
526                 let prevSuggestions = [];
527
528                 function displaySuggestions($input, suggestions) {
529
530                     // Hide if no suggestions
531                     if (suggestions.length === 0) {
532                         $suggestionBox.hide();
533                         isShowing = false;
534                         prevSuggestions = suggestions;
535                         return;
536                     }
537
538                     // Otherwise show and attach to input
539                     if (!isShowing) {
540                         $suggestionBox.show();
541                         isShowing = true;
542                     }
543                     if ($input !== currentInput) {
544                         $suggestionBox.detach();
545                         $input.after($suggestionBox);
546                         currentInput = $input;
547                     }
548
549                     // Return if no change
550                     if (prevSuggestions.join() === suggestions.join()) {
551                         prevSuggestions = suggestions;
552                         return;
553                     }
554
555                     // Build suggestions
556                     $suggestionBox[0].innerHTML = '';
557                     for (let i = 0; i < suggestions.length; i++) {
558                         var suggestion = document.createElement('li');
559                         suggestion.textContent = suggestions[i];
560                         suggestion.onclick = suggestionClick;
561                         if (i === 0) {
562                             suggestion.className = 'active'
563                             active = 0;
564                         }
565                         ;
566                         $suggestionBox[0].appendChild(suggestion);
567                     }
568
569                     prevSuggestions = suggestions;
570                 }
571
572                 // Suggestion click event
573                 function suggestionClick(event) {
574                     let text = this.textContent;
575                     currentInput[0].value = text;
576                     currentInput.focus();
577                     $suggestionBox.hide();
578                     isShowing = false;
579                 };
580
581                 // Get suggestions & cache
582                 function getSuggestions(input, url) {
583                     let hasQuery = url.indexOf('?') !== -1;
584                     let searchUrl = url + (hasQuery ? '&' : '?') + 'search=' + encodeURIComponent(input);
585
586                     // Get from local cache if exists
587                     if (typeof localCache[searchUrl] !== 'undefined') {
588                         return new Promise((resolve, reject) => {
589                             resolve(localCache[searchUrl]);
590                         });
591                     }
592
593                     return $http.get(searchUrl).then(response => {
594                         localCache[searchUrl] = response.data;
595                         return response.data;
596                     });
597                 }
598
599             }
600         }
601     }]);
602
603
604     ngApp.directive('entitySelector', ['$http', '$sce', function ($http, $sce) {
605         return {
606             restrict: 'A',
607             scope: true,
608             link: function (scope, element, attrs) {
609                 scope.loading = true;
610                 scope.entityResults = false;
611                 scope.search = '';
612
613                 // Add input for forms
614                 const input = element.find('[entity-selector-input]').first();
615
616                 // Listen to entity item clicks
617                 element.on('click', '.entity-list a', function(event) {
618                     event.preventDefault();
619                     event.stopPropagation();
620                     let item = $(this).closest('[data-entity-type]');
621                     itemSelect(item);
622                 });
623                 element.on('click', '[data-entity-type]', function(event) {
624                     itemSelect($(this));
625                 });
626
627                 // Select entity action
628                 function itemSelect(item) {
629                     let entityType = item.attr('data-entity-type');
630                     let entityId = item.attr('data-entity-id');
631                     let isSelected = !item.hasClass('selected');
632                     element.find('.selected').removeClass('selected').removeClass('primary-background');
633                     if (isSelected) item.addClass('selected').addClass('primary-background');
634                     let newVal = isSelected ? `${entityType}:${entityId}` : '';
635                     input.val(newVal);
636                 }
637
638                 // Get search url with correct types
639                 function getSearchUrl() {
640                     let types = (attrs.entityTypes) ? encodeURIComponent(attrs.entityTypes) : encodeURIComponent('page,book,chapter');
641                     return window.baseUrl(`/ajax/search/entities?types=${types}`);
642                 }
643
644                 // Get initial contents
645                 $http.get(getSearchUrl()).then(resp => {
646                     scope.entityResults = $sce.trustAsHtml(resp.data);
647                     scope.loading = false;
648                 });
649
650                 // Search when typing
651                 scope.searchEntities = function() {
652                     scope.loading = true;
653                     input.val('');
654                     let url = getSearchUrl() + '&term=' + encodeURIComponent(scope.search);
655                     $http.get(url).then(resp => {
656                         scope.entityResults = $sce.trustAsHtml(resp.data);
657                         scope.loading = false;
658                     });
659                 };
660             }
661         };
662     }]);
663 };
664
665
666
667
668
669
670
671
672
673
674
675
676
677