2 const DropZone = require('dropzone');
3 const markdown = require('marked');
5 const toggleSwitchTemplate = require('./components/toggle-switch.html');
6 const imagePickerTemplate = require('./components/image-picker.html');
7 const dropZoneTemplate = require('./components/drop-zone.html');
9 module.exports = function (ngApp, events) {
13 * Has basic on/off functionality.
14 * Use string values of 'true' & 'false' to dictate the current state.
16 ngApp.directive('toggleSwitch', function () {
19 template: toggleSwitchTemplate,
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';
27 scope.switch = function () {
28 scope.isActive = !scope.isActive;
29 scope.value = scope.isActive ? 'true' : 'false';
39 * Is a simple front-end interface that connects to an ImageManager if present.
41 ngApp.directive('imagePicker', ['$http', 'imageManagerService', function ($http, imageManagerService) {
44 template: imagePickerTemplate,
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;
62 function setImage(imageModel, imageUrl) {
63 scope.image = imageUrl;
64 scope.value = usingIds ? imageModel.id : imageUrl;
67 scope.reset = function () {
68 setImage({id: 0}, scope.defaultImage);
71 scope.remove = function () {
76 scope.showImageManager = function () {
77 imageManagerService.show((image) => {
78 scope.updateImageFromModel(image);
82 scope.updateImageFromModel = function (model) {
83 let isResized = scope.resizeWidth && scope.resizeHeight;
87 setImage(model, model.url);
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);
106 * Used for uploading images
108 ngApp.directive('dropZone', [function () {
111 template: dropZoneTemplate,
118 link: function (scope, element, attrs) {
119 var dropZone = new DropZone(element[0].querySelector('.dropzone-container'), {
120 url: scope.uploadUrl,
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);
129 if (typeof scope.eventSuccess !== 'undefined') dz.on('success', scope.eventSuccess);
130 dz.on('success', function (file, data) {
131 $(file.previewElement).fadeOut(400, function () {
135 if (typeof scope.eventError !== 'undefined') dz.on('error', scope.eventError);
136 dz.on('error', function (file, errorMessage, xhr) {
137 console.log(errorMessage);
139 function setMessage(message) {
140 $(file.previewElement).find('[data-dz-errormessage]').text(message);
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]);
155 * Provides some simple logic to create small dropdown menus
157 ngApp.directive('dropdown', [function () {
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;
167 inputs.first().focus();
168 element.on('keypress', 'input', event => {
169 if (event.keyCode === 13) {
170 event.preventDefault();
172 menu.removeClass('anim menuIn');
177 element.mouseleave(function () {
179 menu.removeClass('anim menuIn');
188 * An angular wrapper around the tinyMCE editor.
190 ngApp.directive('tinymce', ['$timeout', function ($timeout) {
198 link: function (scope, element, attrs) {
200 function tinyMceSetup(editor) {
201 editor.on('ExecCommand change NodeChange ObjectResized', (e) => {
202 var content = editor.getContent();
204 scope.mceModel = content;
206 scope.mceChange(content);
209 editor.on('keydown', (event) => {
210 scope.$emit('editor-keydown', event);
213 editor.on('init', (e) => {
214 scope.mceModel = editor.getContent();
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();
225 scope.tinymce.extraSetups.push(tinyMceSetup);
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);
236 editor.addButton('hr', {
238 tooltip: 'Horizontal line',
239 cmd: 'InsertHorizontalRule'
242 editor.addMenuItem('hr', {
244 text: 'Horizontal line',
245 cmd: 'InsertHorizontalRule',
250 tinymce.init(scope.tinymce);
257 * Handles the logic for just the editor input field.
259 ngApp.directive('markdownInput', ['$timeout', function ($timeout) {
266 link: function (scope, element, attrs) {
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));
276 element.on('change input', (event) => {
277 content = element.val();
279 scope.mdModel = content;
280 scope.mdChange(markdown(content));
284 scope.$on('markdown-update', (event, value) => {
286 scope.mdModel = value;
287 scope.mdChange(markdown(value));
296 * Handles all functionality of the markdown editor.
298 ngApp.directive('markdownEditor', ['$timeout', function ($timeout) {
301 link: function (scope, element, attrs) {
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"]');
308 let currentCaretPos = 0;
310 input.blur(event => {
311 currentCaretPos = input[0].selectionStart;
315 let inputScrollHeight,
320 function setScrollHeights() {
321 inputScrollHeight = input[0].scrollHeight;
322 inputHeight = input.height();
323 displayScrollHeight = display[0].scrollHeight;
324 displayHeight = display.height();
330 window.addEventListener('resize', setScrollHeights);
331 let scrollDebounceTime = 800;
333 input.on('scroll', event => {
334 let now = Date.now();
335 if (now - lastScroll > scrollDebounceTime) {
338 let scrollPercent = (input.scrollTop() / (inputScrollHeight - inputHeight));
339 let displayScrollY = (displayScrollHeight - displayHeight) * scrollPercent;
340 display.scrollTop(displayScrollY);
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 = "";
352 input.val(currentContent.substring(0, caretPos) + mdImageText + currentContent.substring(caretPos));
354 input[0].selectionStart = caretPos + (";
355 input[0].selectionEnd = caretPos + (';
358 // Pass key presses to controller via event
359 scope.$emit('editor-keydown', event);
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 = "";
368 input.val(currentContent.substring(0, caretPos) + mdImageText + currentContent.substring(caretPos));
378 * Page Editor Toolbox
379 * Controls all functionality for the sliding toolbox
380 * on the page edit view.
382 ngApp.directive('toolbox', [function () {
385 link: function (scope, elem, attrs) {
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]');
392 // Handle toolbox toggle click
393 $toggle.click((e) => {
394 elem.toggleClass('open');
397 // Set an active tab/content by name
398 function setActive(tabName, openToolbox) {
399 $buttons.removeClass('active');
401 $buttons.filter(`[tab-button="${tabName}"]`).addClass('active');
402 $content.filter(`[tab-content="${tabName}"]`).show();
403 if (openToolbox) elem.addClass('open');
406 // Set the first tab content active on load
407 setActive($content.first().attr('tab-content'), false);
409 // Handle tab button click
410 $buttons.click(function (e) {
411 let name = $(this).attr('tab-button');
412 setActive(name, true);
419 * Tag Autosuggestions
420 * Listens to child inputs and provides autosuggestions depending on field type
421 * and input. Suggestions provided by server.
423 ngApp.directive('tagAutosuggestions', ['$http', function ($http) {
426 link: function (scope, elem, attrs) {
428 // Local storage for quick caching.
429 const localCache = {};
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);
438 // General state tracking
439 let isShowing = false;
440 let currentInput = false;
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');
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);
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));
464 suggestions = suggestions.filter(item => {
465 return item.toLowerCase().indexOf(val.toLowerCase()) !== -1;
467 displaySuggestions($input, suggestions);
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();
478 if (lastFocusTime < startTime) {
479 $suggestionBox.hide();
484 elem.on('focus', '[autosuggest]', function (event) {
485 lastFocusTime = Date.now();
488 elem.on('keydown', '[autosuggest]', function (event) {
489 if (!isShowing) return;
491 let suggestionElems = suggestionBox.childNodes;
492 let suggestCount = suggestionElems.length;
495 if (event.keyCode === 40) {
496 let newActive = (active === suggestCount - 1) ? 0 : active + 1;
497 changeActiveTo(newActive, suggestionElems);
500 else if (event.keyCode === 38) {
501 let newActive = (active === 0) ? suggestCount - 1 : active - 1;
502 changeActiveTo(newActive, suggestionElems);
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();
511 if (event.keyCode === 13) {
512 event.preventDefault();
518 // Change the active suggestion to the given index
519 function changeActiveTo(index, suggestionElems) {
520 suggestionElems[active].className = '';
522 suggestionElems[active].className = 'active';
525 // Display suggestions on a field
526 let prevSuggestions = [];
528 function displaySuggestions($input, suggestions) {
530 // Hide if no suggestions
531 if (suggestions.length === 0) {
532 $suggestionBox.hide();
534 prevSuggestions = suggestions;
538 // Otherwise show and attach to input
540 $suggestionBox.show();
543 if ($input !== currentInput) {
544 $suggestionBox.detach();
545 $input.after($suggestionBox);
546 currentInput = $input;
549 // Return if no change
550 if (prevSuggestions.join() === suggestions.join()) {
551 prevSuggestions = 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;
562 suggestion.className = 'active'
566 $suggestionBox[0].appendChild(suggestion);
569 prevSuggestions = suggestions;
572 // Suggestion click event
573 function suggestionClick(event) {
574 let text = this.textContent;
575 currentInput[0].value = text;
576 currentInput.focus();
577 $suggestionBox.hide();
581 // Get suggestions & cache
582 function getSuggestions(input, url) {
583 let hasQuery = url.indexOf('?') !== -1;
584 let searchUrl = url + (hasQuery ? '&' : '?') + 'search=' + encodeURIComponent(input);
586 // Get from local cache if exists
587 if (typeof localCache[searchUrl] !== 'undefined') {
588 return new Promise((resolve, reject) => {
589 resolve(localCache[searchUrl]);
593 return $http.get(searchUrl).then(response => {
594 localCache[searchUrl] = response.data;
595 return response.data;
604 ngApp.directive('entitySelector', ['$http', '$sce', function ($http, $sce) {
608 link: function (scope, element, attrs) {
609 scope.loading = true;
610 scope.entityResults = false;
613 // Add input for forms
614 const input = element.find('[entity-selector-input]').first();
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]');
623 element.on('click', '[data-entity-type]', function(event) {
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}` : '';
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}`);
644 // Get initial contents
645 $http.get(getSearchUrl()).then(resp => {
646 scope.entityResults = $sce.trustAsHtml(resp.data);
647 scope.loading = false;
650 // Search when typing
651 scope.searchEntities = function() {
652 scope.loading = true;
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;