X-Git-Url: http://source.bookstackapp.com/bookstack/blobdiff_plain/ced8c8e4978a7458f1e3d2b75af64917cd50ec7d..refs/pull/154/head:/resources/assets/js/directives.js diff --git a/resources/assets/js/directives.js b/resources/assets/js/directives.js index 72d35d455..e50f5c6dd 100644 --- a/resources/assets/js/directives.js +++ b/resources/assets/js/directives.js @@ -1,5 +1,6 @@ "use strict"; var DropZone = require('dropzone'); +var markdown = require('marked'); var toggleSwitchTemplate = require('./components/toggle-switch.html'); var imagePickerTemplate = require('./components/image-picker.html'); @@ -14,7 +15,7 @@ module.exports = function (ngApp, events) { */ ngApp.directive('toggleSwitch', function () { return { - restrict: 'E', + restrict: 'A', template: toggleSwitchTemplate, scope: true, link: function (scope, element, attrs) { @@ -110,7 +111,8 @@ module.exports = function (ngApp, events) { scope: { uploadUrl: '@', eventSuccess: '=', - eventError: '=' + eventError: '=', + uploadedTo: '@' }, link: function (scope, element, attrs) { var dropZone = new DropZone(element[0].querySelector('.dropzone-container'), { @@ -120,6 +122,8 @@ module.exports = function (ngApp, events) { dz.on('sending', function (file, xhr, data) { var token = window.document.querySelector('meta[name=token]').getAttribute('content'); data.append('_token', token); + var uploadedTo = typeof scope.uploadedTo === 'undefined' ? 0 : scope.uploadedTo; + data.append('uploaded_to', uploadedTo); }); if (typeof scope.eventSuccess !== 'undefined') dz.on('success', scope.eventSuccess); dz.on('success', function (file, data) { @@ -145,14 +149,30 @@ module.exports = function (ngApp, events) { }; }]); - + /** + * Dropdown + * Provides some simple logic to create small dropdown menus + */ ngApp.directive('dropdown', [function () { return { restrict: 'A', link: function (scope, element, attrs) { - var menu = element.find('ul'); + const menu = element.find('ul'); element.find('[dropdown-toggle]').on('click', function () { menu.show().addClass('anim menuIn'); + let inputs = menu.find('input'); + let hasInput = inputs.length > 0; + if (hasInput) { + inputs.first().focus(); + element.on('keypress', 'input', event => { + if (event.keyCode === 13) { + event.preventDefault(); + menu.hide(); + menu.removeClass('anim menuIn'); + return false; + } + }); + } element.mouseleave(function () { menu.hide(); menu.removeClass('anim menuIn'); @@ -162,7 +182,11 @@ module.exports = function (ngApp, events) { }; }]); - ngApp.directive('tinymce', ['$timeout', function($timeout) { + /** + * TinyMCE + * An angular wrapper around the tinyMCE editor. + */ + ngApp.directive('tinymce', ['$timeout', function ($timeout) { return { restrict: 'A', scope: { @@ -181,6 +205,10 @@ module.exports = function (ngApp, events) { scope.mceChange(content); }); + editor.on('keydown', (event) => { + scope.$emit('editor-keydown', event); + }); + editor.on('init', (e) => { scope.mceModel = editor.getContent(); }); @@ -194,10 +222,452 @@ module.exports = function (ngApp, events) { } scope.tinymce.extraSetups.push(tinyMceSetup); + + // Custom tinyMCE plugins + tinymce.PluginManager.add('customhr', function (editor) { + editor.addCommand('InsertHorizontalRule', function () { + var hrElem = document.createElement('hr'); + var cNode = editor.selection.getNode(); + var parentNode = cNode.parentNode; + parentNode.insertBefore(hrElem, cNode); + }); + + editor.addButton('hr', { + icon: 'hr', + tooltip: 'Horizontal line', + cmd: 'InsertHorizontalRule' + }); + + editor.addMenuItem('hr', { + icon: 'hr', + text: 'Horizontal line', + cmd: 'InsertHorizontalRule', + context: 'insert' + }); + }); + tinymce.init(scope.tinymce); } } - }]) + }]); + + /** + * Markdown input + * Handles the logic for just the editor input field. + */ + ngApp.directive('markdownInput', ['$timeout', function ($timeout) { + return { + restrict: 'A', + scope: { + mdModel: '=', + mdChange: '=' + }, + link: function (scope, element, attrs) { + + // Set initial model content + var content = element.val(); + scope.mdModel = content; + scope.mdChange(markdown(content)); + + element.on('change input', (e) => { + content = element.val(); + $timeout(() => { + scope.mdModel = content; + scope.mdChange(markdown(content)); + }); + }); + + scope.$on('markdown-update', (event, value) => { + element.val(value); + scope.mdModel = value; + scope.mdChange(markdown(value)); + }); + + } + } + }]); + + /** + * Markdown Editor + * Handles all functionality of the markdown editor. + */ + ngApp.directive('markdownEditor', ['$timeout', function ($timeout) { + return { + restrict: 'A', + link: function (scope, element, attrs) { + + // Elements + const input = element.find('textarea[markdown-input]'); + const display = element.find('.markdown-display').first(); + const insertImage = element.find('button[data-action="insertImage"]'); + + let currentCaretPos = 0; + + input.blur(event => { + currentCaretPos = input[0].selectionStart; + }); + + // Scroll sync + let inputScrollHeight, + inputHeight, + displayScrollHeight, + displayHeight; + + function setScrollHeights() { + inputScrollHeight = input[0].scrollHeight; + inputHeight = input.height(); + displayScrollHeight = display[0].scrollHeight; + displayHeight = display.height(); + } + + setTimeout(() => { + setScrollHeights(); + }, 200); + window.addEventListener('resize', setScrollHeights); + let scrollDebounceTime = 800; + let lastScroll = 0; + input.on('scroll', event => { + let now = Date.now(); + if (now - lastScroll > scrollDebounceTime) { + setScrollHeights() + } + let scrollPercent = (input.scrollTop() / (inputScrollHeight - inputHeight)); + let displayScrollY = (displayScrollHeight - displayHeight) * scrollPercent; + display.scrollTop(displayScrollY); + lastScroll = now; + }); + + // Editor key-presses + input.keydown(event => { + // Insert image shortcut + if (event.which === 73 && event.ctrlKey && event.shiftKey) { + event.preventDefault(); + var caretPos = input[0].selectionStart; + var currentContent = input.val(); + var mdImageText = "![](http://)"; + input.val(currentContent.substring(0, caretPos) + mdImageText + currentContent.substring(caretPos)); + input.focus(); + input[0].selectionStart = caretPos + ("![](".length); + input[0].selectionEnd = caretPos + ('![](http://'.length); + return; + } + // Pass key presses to controller via event + scope.$emit('editor-keydown', event); + }); + + // Insert image from image manager + insertImage.click(event => { + window.ImageManager.showExternal(image => { + var caretPos = currentCaretPos; + var currentContent = input.val(); + var mdImageText = "![" + image.name + "](" + image.url + ")"; + input.val(currentContent.substring(0, caretPos) + mdImageText + currentContent.substring(caretPos)); + input.change(); + }); + }); + + } + } + }]); + + /** + * Page Editor Toolbox + * Controls all functionality for the sliding toolbox + * on the page edit view. + */ + ngApp.directive('toolbox', [function () { + return { + restrict: 'A', + link: function (scope, elem, attrs) { + + // Get common elements + const $buttons = elem.find('[tab-button]'); + const $content = elem.find('[tab-content]'); + const $toggle = elem.find('[toolbox-toggle]'); + + // Handle toolbox toggle click + $toggle.click((e) => { + elem.toggleClass('open'); + }); + + // Set an active tab/content by name + function setActive(tabName, openToolbox) { + $buttons.removeClass('active'); + $content.hide(); + $buttons.filter(`[tab-button="${tabName}"]`).addClass('active'); + $content.filter(`[tab-content="${tabName}"]`).show(); + if (openToolbox) elem.addClass('open'); + } + + // Set the first tab content active on load + setActive($content.first().attr('tab-content'), false); + + // Handle tab button click + $buttons.click(function (e) { + let name = $(this).attr('tab-button'); + setActive(name, true); + }); + } + } + }]); + + /** + * Tag Autosuggestions + * Listens to child inputs and provides autosuggestions depending on field type + * and input. Suggestions provided by server. + */ + ngApp.directive('tagAutosuggestions', ['$http', function ($http) { + return { + restrict: 'A', + link: function (scope, elem, attrs) { + + // Local storage for quick caching. + const localCache = {}; + + // Create suggestion element + const suggestionBox = document.createElement('ul'); + suggestionBox.className = 'suggestion-box'; + suggestionBox.style.position = 'absolute'; + suggestionBox.style.display = 'none'; + const $suggestionBox = $(suggestionBox); + + // General state tracking + let isShowing = false; + let currentInput = false; + let active = 0; + + // Listen to input events on autosuggest fields + elem.on('input focus', '[autosuggest]', function (event) { + let $input = $(this); + let val = $input.val(); + let url = $input.attr('autosuggest'); + let type = $input.attr('autosuggest-type'); + + // Add name param to request if for a value + if (type.toLowerCase() === 'value') { + let $nameInput = $input.closest('tr').find('[autosuggest-type="name"]').first(); + let nameVal = $nameInput.val(); + if (nameVal !== '') { + url += '?name=' + encodeURIComponent(nameVal); + } + } + + let suggestionPromise = getSuggestions(val.slice(0, 3), url); + suggestionPromise.then(suggestions => { + if (val.length === 0) { + displaySuggestions($input, suggestions.slice(0, 6)); + } else { + suggestions = suggestions.filter(item => { + return item.toLowerCase().indexOf(val.toLowerCase()) !== -1; + }).slice(0, 4); + displaySuggestions($input, suggestions); + } + }); + }); + + // Hide autosuggestions when input loses focus. + // Slight delay to allow clicks. + let lastFocusTime = 0; + elem.on('blur', '[autosuggest]', function (event) { + let startTime = Date.now(); + setTimeout(() => { + if (lastFocusTime < startTime) { + $suggestionBox.hide(); + isShowing = false; + } + }, 200) + }); + elem.on('focus', '[autosuggest]', function (event) { + lastFocusTime = Date.now(); + }); + + elem.on('keydown', '[autosuggest]', function (event) { + if (!isShowing) return; + + let suggestionElems = suggestionBox.childNodes; + let suggestCount = suggestionElems.length; + + // Down arrow + if (event.keyCode === 40) { + let newActive = (active === suggestCount - 1) ? 0 : active + 1; + changeActiveTo(newActive, suggestionElems); + } + // Up arrow + else if (event.keyCode === 38) { + let newActive = (active === 0) ? suggestCount - 1 : active - 1; + changeActiveTo(newActive, suggestionElems); + } + // Enter or tab key + else if ((event.keyCode === 13 || event.keyCode === 9) && !event.shiftKey) { + let text = suggestionElems[active].textContent; + currentInput[0].value = text; + currentInput.focus(); + $suggestionBox.hide(); + isShowing = false; + if (event.keyCode === 13) { + event.preventDefault(); + return false; + } + } + }); + + // Change the active suggestion to the given index + function changeActiveTo(index, suggestionElems) { + suggestionElems[active].className = ''; + active = index; + suggestionElems[active].className = 'active'; + } + + // Display suggestions on a field + let prevSuggestions = []; + + function displaySuggestions($input, suggestions) { + + // Hide if no suggestions + if (suggestions.length === 0) { + $suggestionBox.hide(); + isShowing = false; + prevSuggestions = suggestions; + return; + } + + // Otherwise show and attach to input + if (!isShowing) { + $suggestionBox.show(); + isShowing = true; + } + if ($input !== currentInput) { + $suggestionBox.detach(); + $input.after($suggestionBox); + currentInput = $input; + } + + // Return if no change + if (prevSuggestions.join() === suggestions.join()) { + prevSuggestions = suggestions; + return; + } + + // Build suggestions + $suggestionBox[0].innerHTML = ''; + for (let i = 0; i < suggestions.length; i++) { + var suggestion = document.createElement('li'); + suggestion.textContent = suggestions[i]; + suggestion.onclick = suggestionClick; + if (i === 0) { + suggestion.className = 'active' + active = 0; + } + ; + $suggestionBox[0].appendChild(suggestion); + } + + prevSuggestions = suggestions; + } + + // Suggestion click event + function suggestionClick(event) { + let text = this.textContent; + currentInput[0].value = text; + currentInput.focus(); + $suggestionBox.hide(); + isShowing = false; + }; + + // Get suggestions & cache + function getSuggestions(input, url) { + let hasQuery = url.indexOf('?') !== -1; + let searchUrl = url + (hasQuery ? '&' : '?') + 'search=' + encodeURIComponent(input); + + // Get from local cache if exists + if (typeof localCache[searchUrl] !== 'undefined') { + return new Promise((resolve, reject) => { + resolve(localCache[searchUrl]); + }); + } + + return $http.get(searchUrl).then(response => { + localCache[searchUrl] = response.data; + return response.data; + }); + } + + } + } + }]); + + + ngApp.directive('entitySelector', ['$http', '$sce', function ($http, $sce) { + return { + restrict: 'A', + scope: true, + link: function (scope, element, attrs) { + scope.loading = true; + scope.entityResults = false; + scope.search = ''; + + // Add input for forms + const input = element.find('[entity-selector-input]').first(); + + // Listen to entity item clicks + element.on('click', '.entity-list a', function(event) { + event.preventDefault(); + event.stopPropagation(); + let item = $(this).closest('[data-entity-type]'); + itemSelect(item); + }); + element.on('click', '[data-entity-type]', function(event) { + itemSelect($(this)); + }); + + // Select entity action + function itemSelect(item) { + let entityType = item.attr('data-entity-type'); + let entityId = item.attr('data-entity-id'); + let isSelected = !item.hasClass('selected'); + element.find('.selected').removeClass('selected').removeClass('primary-background'); + if (isSelected) item.addClass('selected').addClass('primary-background'); + let newVal = isSelected ? `${entityType}:${entityId}` : ''; + input.val(newVal); + } + + // Get search url with correct types + function getSearchUrl() { + let types = (attrs.entityTypes) ? encodeURIComponent(attrs.entityTypes) : encodeURIComponent('page,book,chapter'); + return `/ajax/search/entities?types=${types}`; + } + + // Get initial contents + $http.get(getSearchUrl()).then(resp => { + scope.entityResults = $sce.trustAsHtml(resp.data); + scope.loading = false; + }); + + // Search when typing + scope.searchEntities = function() { + scope.loading = true; + input.val(''); + let url = getSearchUrl() + '&term=' + encodeURIComponent(scope.search); + $http.get(url).then(resp => { + scope.entityResults = $sce.trustAsHtml(resp.data); + scope.loading = false; + }); + }; + } + }; + }]); +}; + + + + + + + + + + + + -}; \ No newline at end of file