diff --git a/resources/assets/js/directives.js b/resources/assets/js/directives.js index a156c961c..2a0547c97 100644 --- a/resources/assets/js/directives.js +++ b/resources/assets/js/directives.js @@ -496,188 +496,6 @@ module.exports = function (ngApp, events) { } }]); - /** - * 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) { - currentInput[0].value = suggestionElems[active].textContent; - 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++) { - let 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) { - currentInput[0].value = this.textContent; - 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('entityLinkSelector', [function($http) { return { restrict: 'A', diff --git a/resources/assets/js/vues/components/autosuggest.js b/resources/assets/js/vues/components/autosuggest.js new file mode 100644 index 000000000..4d6b97e55 --- /dev/null +++ b/resources/assets/js/vues/components/autosuggest.js @@ -0,0 +1,130 @@ + +const template = ` +
+ + +
+ +`; + +function data() { + return { + suggestions: [], + showSuggestions: false, + active: 0, + }; +} + +const ajaxCache = {}; + +const props = ['url', 'type', 'value', 'placeholder', 'name']; + +function getNameInputVal(valInput) { + let parentRow = valInput.parentNode.parentNode; + let nameInput = parentRow.querySelector('[autosuggest-type="name"]'); + return (nameInput === null) ? '' : nameInput.value; +} + +const methods = { + + inputUpdate(inputValue) { + this.$emit('input', inputValue); + let params = {}; + + if (this.type === 'value') { + let nameVal = getNameInputVal(this.$el); + if (nameVal !== "") params.name = nameVal; + } + + this.getSuggestions(inputValue.slice(0, 3), params).then(suggestions => { + if (inputValue.length === 0) { + this.displaySuggestions(suggestions.slice(0, 6)); + return; + } + // Filter to suggestions containing searched term + suggestions = suggestions.filter(item => { + return item.toLowerCase().indexOf(inputValue.toLowerCase()) !== -1; + }).slice(0, 4); + this.displaySuggestions(suggestions); + }); + }, + + inputBlur() { + setTimeout(() => { + this.$emit('blur'); + this.showSuggestions = false; + }, 100); + }, + + inputKeydown(event) { + if (event.keyCode === 13) event.preventDefault(); + if (!this.showSuggestions) return; + + // Down arrow + if (event.keyCode === 40) { + this.active = (this.active === this.suggestions.length - 1) ? 0 : this.active+1; + } + // Up Arrow + else if (event.keyCode === 38) { + this.active = (this.active === 0) ? this.suggestions.length - 1 : this.active-1; + } + // Enter or tab keys + else if ((event.keyCode === 13 || event.keyCode === 9) && !event.shiftKey) { + this.selectSuggestion(this.suggestions[this.active]); + } + // Escape key + else if (event.keyCode === 27) { + this.showSuggestions = false; + } + }, + + displaySuggestions(suggestions) { + if (suggestions.length === 0) { + this.suggestions = []; + this.showSuggestions = false; + return; + } + + this.suggestions = suggestions; + this.showSuggestions = true; + this.active = 0; + }, + + selectSuggestion(suggestion) { + this.$refs.input.value = suggestion; + this.$refs.input.focus(); + this.$emit('input', suggestion); + this.showSuggestions = false; + }, + + /** + * Get suggestions from BookStack. Store and use local cache if already searched. + * @param {String} input + * @param {Object} params + */ + getSuggestions(input, params) { + params.search = input; + let cacheKey = `${this.url}:${JSON.stringify(params)}`; + + if (typeof ajaxCache[cacheKey] !== "undefined") return Promise.resolve(ajaxCache[cacheKey]); + + return this.$http.get(this.url, {params}).then(resp => { + ajaxCache[cacheKey] = resp.data; + return resp.data; + }); + } + +}; + +const computed = []; + +module.exports = {template, data, props, methods, computed}; \ No newline at end of file diff --git a/resources/assets/js/vues/tag-manager.js b/resources/assets/js/vues/tag-manager.js index d934b6266..d97ceb96b 100644 --- a/resources/assets/js/vues/tag-manager.js +++ b/resources/assets/js/vues/tag-manager.js @@ -1,15 +1,15 @@ const draggable = require('vuedraggable'); +const autosuggest = require('./components/autosuggest'); let data = { pageId: false, tags: [], }; -const components = {draggable}; +const components = {draggable, autosuggest}; +const directives = {}; -let computed = { - -}; +let computed = {}; let methods = { @@ -64,5 +64,5 @@ function mounted() { } module.exports = { - data, computed, methods, mounted, components + data, computed, methods, mounted, components, directives }; \ No newline at end of file diff --git a/resources/assets/sass/_forms.scss b/resources/assets/sass/_forms.scss index 392e9ec3e..866316fc5 100644 --- a/resources/assets/sass/_forms.scss +++ b/resources/assets/sass/_forms.scss @@ -265,7 +265,7 @@ div[editor-type="markdown"] .title-input.page-title input[type="text"] { } } -input.outline { +.outline > input { border: 0; border-bottom: 2px solid #DDD; border-radius: 0; diff --git a/resources/views/pages/form-toolbox.blade.php b/resources/views/pages/form-toolbox.blade.php index 71a4b637e..3bc03a17f 100644 --- a/resources/views/pages/form-toolbox.blade.php +++ b/resources/views/pages/form-toolbox.blade.php @@ -18,10 +18,14 @@
-
-
+
+ +
+
+ +