2 import DropZone from "dropzone";
3 import markdown from "marked";
5 export default function (ngApp, events) {
8 * Common tab controls using simple jQuery functions.
10 ngApp.directive('tabContainer', function() {
13 link: function (scope, element, attrs) {
14 const $content = element.find('[tab-content]');
15 const $buttons = element.find('[tab-button]');
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();
22 $content.hide().first().show();
23 $buttons.first().addClass('selected');
26 $buttons.click(function() {
27 let clickedTab = $(this);
28 $buttons.removeClass('selected');
30 let name = clickedTab.addClass('selected').attr('tab-button');
31 $content.filter(`[tab-content="${name}"]`).show();
38 * Sub form component to allow inner-form sections to act like thier own forms.
40 ngApp.directive('subForm', function() {
43 link: function (scope, element, attrs) {
44 element.on('keypress', e => {
45 if (e.keyCode === 13) {
50 element.find('button[type="submit"]').click(submitEvent);
52 function submitEvent(e) {
54 if (attrs.subForm) scope.$eval(attrs.subForm);
63 * Is a simple front-end interface that connects to an ImageManager if present.
65 ngApp.directive('imagePicker', ['$http', 'imageManagerService', function ($http, imageManagerService) {
69 <div class="image-picker">
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">
74 <button class="button" type="button" ng-click="showImageManager()">Select Image</button>
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>
81 <input type="hidden" ng-attr-name="{{name}}" ng-attr-id="{{name}}" ng-attr-value="{{value}}">
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;
101 function setImage(imageModel, imageUrl) {
102 scope.image = imageUrl;
103 scope.value = usingIds ? imageModel.id : imageUrl;
106 scope.reset = function () {
107 setImage({id: 0}, scope.defaultImage);
110 scope.remove = function () {
111 scope.image = 'none';
112 scope.value = 'none';
115 scope.showImageManager = function () {
116 imageManagerService.show((image) => {
117 scope.updateImageFromModel(image);
121 scope.updateImageFromModel = function (model) {
122 let isResized = scope.resizeWidth && scope.resizeHeight;
126 setImage(model, model.url);
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);
145 * Used for uploading images
147 ngApp.directive('dropZone', [function () {
151 <div class="dropzone-container">
152 <div class="dz-message">Drop files or click here to upload</div>
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,
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);
173 if (typeof scope.eventSuccess !== 'undefined') dz.on('success', scope.eventSuccess);
174 dz.on('success', function (file, data) {
175 $(file.previewElement).fadeOut(400, function () {
179 if (typeof scope.eventError !== 'undefined') dz.on('error', scope.eventError);
180 dz.on('error', function (file, errorMessage, xhr) {
181 console.log(errorMessage);
183 function setMessage(message) {
184 $(file.previewElement).find('[data-dz-errormessage]').text(message);
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]);
199 * Provides some simple logic to create small dropdown menus
201 ngApp.directive('dropdown', [function () {
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;
211 inputs.first().focus();
212 element.on('keypress', 'input', event => {
213 if (event.keyCode === 13) {
214 event.preventDefault();
216 menu.removeClass('anim menuIn');
221 element.mouseleave(function () {
223 menu.removeClass('anim menuIn');
232 * An angular wrapper around the tinyMCE editor.
234 ngApp.directive('tinymce', ['$timeout', function ($timeout) {
242 link: function (scope, element, attrs) {
244 function tinyMceSetup(editor) {
245 editor.on('ExecCommand change NodeChange ObjectResized', (e) => {
246 let content = editor.getContent();
248 scope.mceModel = content;
250 scope.mceChange(content);
253 editor.on('keydown', (event) => {
254 scope.$emit('editor-keydown', event);
257 editor.on('init', (e) => {
258 scope.mceModel = editor.getContent();
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();
269 scope.tinymce.extraSetups.push(tinyMceSetup);
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);
280 editor.addButton('hr', {
282 tooltip: 'Horizontal line',
283 cmd: 'InsertHorizontalRule'
286 editor.addMenuItem('hr', {
288 text: 'Horizontal line',
289 cmd: 'InsertHorizontalRule',
294 tinymce.init(scope.tinymce);
301 * Handles the logic for just the editor input field.
303 ngApp.directive('markdownInput', ['$timeout', function ($timeout) {
310 link: function (scope, element, attrs) {
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));
318 element.on('change input', (event) => {
319 content = element.val();
321 scope.mdModel = content;
322 scope.mdChange(markdown(content));
326 scope.$on('markdown-update', (event, value) => {
328 scope.mdModel = value;
329 scope.mdChange(markdown(value));
338 * Handles all functionality of the markdown editor.
340 ngApp.directive('markdownEditor', ['$timeout', function ($timeout) {
343 link: function (scope, element, attrs) {
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"]')
351 let currentCaretPos = 0;
353 input.blur(event => {
354 currentCaretPos = input[0].selectionStart;
358 let inputScrollHeight,
363 function setScrollHeights() {
364 inputScrollHeight = input[0].scrollHeight;
365 inputHeight = input.height();
366 displayScrollHeight = display[0].scrollHeight;
367 displayHeight = display.height();
373 window.addEventListener('resize', setScrollHeights);
374 let scrollDebounceTime = 800;
376 input.on('scroll', event => {
377 let now = Date.now();
378 if (now - lastScroll > scrollDebounceTime) {
381 let scrollPercent = (input.scrollTop() / (inputScrollHeight - inputHeight));
382 let displayScrollY = (displayScrollHeight - displayHeight) * scrollPercent;
383 display.scrollTop(displayScrollY);
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 = "";
395 input.val(currentContent.substring(0, caretPos) + mdImageText + currentContent.substring(caretPos));
397 input[0].selectionStart = caretPos + (";
398 input[0].selectionEnd = caretPos + (';
402 // Insert entity link shortcut
403 if (event.which === 75 && event.ctrlKey && event.shiftKey) {
408 // Pass key presses to controller via event
409 scope.$emit('editor-keydown', event);
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 = "";
418 input.val(currentContent.substring(0, caretPos) + mdImageText + currentContent.substring(caretPos));
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();
431 let selectedText = currentContent.substring(selectionStart, selectionEnd);
432 let linkText = `[${selectedText}](${entity.link})`;
433 input.val(currentContent.substring(0, selectionStart) + linkText + currentContent.substring(selectionEnd));
435 let linkText = ` [${entity.name}](${entity.link}) `;
436 input.val(currentContent.substring(0, selectionStart) + linkText + currentContent.substring(selectionStart))
441 insertEntityLink.click(showLinkSelector);
443 // Upload and insert image on paste
444 function editorPaste(e) {
446 if (!e.clipboardData) return
447 let items = e.clipboardData.items;
449 for (let i = 0; i < items.length; i++) {
450 uploadImage(items[i].getAsFile());
454 input.on('paste', editorPaste);
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]);
466 input.on('drop', handleImageDrop);
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();
473 let xhr = new XMLHttpRequest();
476 let fileNameMatches = file.name.match(/\.(.+)$/);
477 if (fileNameMatches) {
478 ext = fileNameMatches[1];
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);
493 input[0].selectionStart = selectStart;
494 input[0].selectionEnd = selectStart;
496 let remoteFilename = "image-" + Date.now() + "." + ext;
497 formData.append('file', file, remoteFilename);
498 formData.append('_token', document.querySelector('meta[name="token"]').getAttribute('content'));
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);
508 console.log('An error occurred uploading the image');
509 console.log(xhr.responseText);
510 input[0].value = input[0].value.replace(innerContent, '');
514 input[0].selectionStart = selectStart;
515 input[0].selectionEnd = selectStart;
525 * Page Editor Toolbox
526 * Controls all functionality for the sliding toolbox
527 * on the page edit view.
529 ngApp.directive('toolbox', [function () {
532 link: function (scope, elem, attrs) {
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]');
539 // Handle toolbox toggle click
540 $toggle.click((e) => {
541 elem.toggleClass('open');
544 // Set an active tab/content by name
545 function setActive(tabName, openToolbox) {
546 $buttons.removeClass('active');
548 $buttons.filter(`[toolbox-tab-button="${tabName}"]`).addClass('active');
549 $content.filter(`[toolbox-tab-content="${tabName}"]`).show();
550 if (openToolbox) elem.addClass('open');
553 // Set the first tab content active on load
554 setActive($content.first().attr('toolbox-tab-content'), false);
556 // Handle tab button click
557 $buttons.click(function (e) {
558 let name = $(this).attr('toolbox-tab-button');
559 setActive(name, true);
566 * Tag Autosuggestions
567 * Listens to child inputs and provides autosuggestions depending on field type
568 * and input. Suggestions provided by server.
570 ngApp.directive('tagAutosuggestions', ['$http', function ($http) {
573 link: function (scope, elem, attrs) {
575 // Local storage for quick caching.
576 const localCache = {};
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);
585 // General state tracking
586 let isShowing = false;
587 let currentInput = false;
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');
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);
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));
611 suggestions = suggestions.filter(item => {
612 return item.toLowerCase().indexOf(val.toLowerCase()) !== -1;
614 displaySuggestions($input, suggestions);
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();
625 if (lastFocusTime < startTime) {
626 $suggestionBox.hide();
631 elem.on('focus', '[autosuggest]', function (event) {
632 lastFocusTime = Date.now();
635 elem.on('keydown', '[autosuggest]', function (event) {
636 if (!isShowing) return;
638 let suggestionElems = suggestionBox.childNodes;
639 let suggestCount = suggestionElems.length;
642 if (event.keyCode === 40) {
643 let newActive = (active === suggestCount - 1) ? 0 : active + 1;
644 changeActiveTo(newActive, suggestionElems);
647 else if (event.keyCode === 38) {
648 let newActive = (active === 0) ? suggestCount - 1 : active - 1;
649 changeActiveTo(newActive, suggestionElems);
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();
658 if (event.keyCode === 13) {
659 event.preventDefault();
665 // Change the active suggestion to the given index
666 function changeActiveTo(index, suggestionElems) {
667 suggestionElems[active].className = '';
669 suggestionElems[active].className = 'active';
672 // Display suggestions on a field
673 let prevSuggestions = [];
675 function displaySuggestions($input, suggestions) {
677 // Hide if no suggestions
678 if (suggestions.length === 0) {
679 $suggestionBox.hide();
681 prevSuggestions = suggestions;
685 // Otherwise show and attach to input
687 $suggestionBox.show();
690 if ($input !== currentInput) {
691 $suggestionBox.detach();
692 $input.after($suggestionBox);
693 currentInput = $input;
696 // Return if no change
697 if (prevSuggestions.join() === suggestions.join()) {
698 prevSuggestions = 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;
709 suggestion.className = 'active';
712 $suggestionBox[0].appendChild(suggestion);
715 prevSuggestions = suggestions;
718 // Suggestion click event
719 function suggestionClick(event) {
720 currentInput[0].value = this.textContent;
721 currentInput.focus();
722 $suggestionBox.hide();
726 // Get suggestions & cache
727 function getSuggestions(input, url) {
728 let hasQuery = url.indexOf('?') !== -1;
729 let searchUrl = url + (hasQuery ? '&' : '?') + 'search=' + encodeURIComponent(input);
731 // Get from local cache if exists
732 if (typeof localCache[searchUrl] !== 'undefined') {
733 return new Promise((resolve, reject) => {
734 resolve(localCache[searchUrl]);
738 return $http.get(searchUrl).then(response => {
739 localCache[searchUrl] = response.data;
740 return response.data;
748 ngApp.directive('entityLinkSelector', [function($http) {
751 link: function(scope, element, attrs) {
753 const selectButton = element.find('.entity-link-selector-confirm');
754 let callback = false;
755 let entitySelection = null;
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');
763 selectButton.removeAttr('disabled');
766 events.listen('entity-select-change', entitySelectionChange);
768 // Handle selection confirm button click
769 selectButton.click(event => {
771 if (entitySelection !== null) callback(entitySelection);
774 // Show selector interface
779 // Hide selector interface
781 element.fadeOut(240);
784 // Listen to confirmation of entity selections (doubleclick)
785 events.listen('entity-select-confirm', entity => {
790 // Show entity selector, Accessible globally, and store the callback
791 window.showEntityLinkSelector = function(passedCallback) {
793 callback = passedCallback;
801 ngApp.directive('entitySelector', ['$http', '$sce', function ($http, $sce) {
805 link: function (scope, element, attrs) {
806 scope.loading = true;
807 scope.entityResults = false;
810 // Add input for forms
811 const input = element.find('[entity-selector-input]').first();
813 // Detect double click events
815 function isDoubleClick() {
816 let now = Date.now();
817 let answer = now - lastClick < 300;
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());
829 element.on('click', '[data-entity-type]', function(event) {
830 itemSelect($(this), isDoubleClick());
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}` : '';
844 events.emit('entity-select-change', null);
847 if (!doubleClick && !isSelected) return;
849 let link = item.find('.entity-list-item-link').attr('href');
850 let name = item.find('.entity-list-item-name').text();
853 events.emit('entity-select-confirm', {
854 id: Number(entityId),
861 events.emit('entity-select-change', {
862 id: Number(entityId),
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}`);
875 // Get initial contents
876 $http.get(getSearchUrl()).then(resp => {
877 scope.entityResults = $sce.trustAsHtml(resp.data);
878 scope.loading = false;
881 // Search when typing
882 scope.searchEntities = function() {
883 scope.loading = true;
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;