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