diff --git a/Gruntfile.js b/Gruntfile.js index 7417ba9e76..3b7730e7c1 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -49,7 +49,8 @@ module.exports = grunt => { 'node_modules/moment-timezone/moment-timezone.js', 'client/lib/moment-timezone-data.js', 'node_modules/timepicker/jquery.timepicker.js', - 'client/lib/jquery.autocomplete.js', + "node_modules/devbridge-autocomplete/dist/jquery.autocomplete.js", + "node_modules/jquery-textcomplete/dist/jquery.textcomplete.js", 'client/lib/bootstrap.min.js', 'client/lib/bootstrap-datepicker.js', 'client/lib/bull.js', diff --git a/application/Espo/Resources/metadata/app/client.json b/application/Espo/Resources/metadata/app/client.json index f7bda3cf4a..339f572445 100644 --- a/application/Espo/Resources/metadata/app/client.json +++ b/application/Espo/Resources/metadata/app/client.json @@ -15,7 +15,8 @@ "node_modules/moment-timezone/moment-timezone.js", "client/lib/moment-timezone-data.js", "node_modules/timepicker/jquery.timepicker.js", - "client/lib/jquery.autocomplete.js", + "node_modules/devbridge-autocomplete/dist/jquery.autocomplete.js", + "node_modules/jquery-textcomplete/dist/jquery.textcomplete.js", "client/lib/bootstrap.min.js", "client/lib/bootstrap-datepicker.js", "client/lib/bull.js", diff --git a/application/Espo/Resources/metadata/app/jsLibs.json b/application/Espo/Resources/metadata/app/jsLibs.json index 4e7cc032d3..1b18696024 100644 --- a/application/Espo/Resources/metadata/app/jsLibs.json +++ b/application/Espo/Resources/metadata/app/jsLibs.json @@ -15,8 +15,7 @@ "exportsAs": "summernote" }, "Textcomplete": { - "path": "client/lib/jquery.textcomplete.js", - "exportsTo": "$", + "exportsTo": "$.fn", "exportsAs": "textcomplete" }, "Select2": { diff --git a/client/lib/jquery.autocomplete.js b/client/lib/jquery.autocomplete.js deleted file mode 100644 index 1cf958b03a..0000000000 --- a/client/lib/jquery.autocomplete.js +++ /dev/null @@ -1,998 +0,0 @@ -/** -* Ajax Autocomplete for jQuery, version 1.4.9 -* (c) 2017 Tomas Kirda -* -* Ajax Autocomplete for jQuery is freely distributable under the terms of an MIT-style license. -* For details, see the web site: https://github.com/devbridge/jQuery-Autocomplete -*/ - -/*jslint browser: true, white: true, single: true, this: true, multivar: true */ -/*global define, window, document, jQuery, exports, require */ - -// Expose plugin as an AMD module if AMD loader is present: -(function (factory) { - "use strict"; - if (typeof define === 'function' && define.amd) { - // AMD. Register as an anonymous module. - define(['jquery'], factory); - } else if (typeof exports === 'object' && typeof require === 'function') { - // Browserify - factory(require('jquery')); - } else { - // Browser globals - factory(jQuery); - } -}(function ($) { - 'use strict'; - - var - utils = (function () { - return { - escapeRegExChars: function (value) { - return value.replace(/[|\\{}()[\]^$+*?.]/g, "\\$&"); - }, - createNode: function (containerClass) { - var div = document.createElement('div'); - div.className = containerClass; - div.style.position = 'absolute'; - div.style.display = 'none'; - div.setAttribute('unselectable','on'); - return div; - } - }; - }()), - - keys = { - ESC: 27, - TAB: 9, - RETURN: 13, - LEFT: 37, - UP: 38, - RIGHT: 39, - DOWN: 40 - }, - - noop = $.noop; - - function Autocomplete(el, options) { - var that = this; - - // Shared variables: - that.element = el; - that.el = $(el); - that.suggestions = []; - that.badQueries = []; - that.selectedIndex = -1; - that.currentValue = that.element.value; - that.timeoutId = null; - that.cachedResponse = {}; - that.onChangeTimeout = null; - that.onChange = null; - that.isLocal = false; - that.suggestionsContainer = null; - that.noSuggestionsContainer = null; - that.options = $.extend(true, {}, Autocomplete.defaults, options); - that.classes = { - selected: 'autocomplete-selected', - suggestion: 'autocomplete-suggestion' - }; - that.hint = null; - that.hintValue = ''; - that.selection = null; - - // Initialize and set options: - that.initialize(); - that.setOptions(options); - } - - Autocomplete.utils = utils; - - $.Autocomplete = Autocomplete; - - Autocomplete.defaults = { - ajaxSettings: {}, - autoSelectFirst: false, - appendTo: 'body', - serviceUrl: null, - lookup: null, - onSelect: null, - width: 'auto', - minChars: 1, - maxHeight: 300, - deferRequestBy: 0, - params: {}, - formatResult: _formatResult, - formatGroup: _formatGroup, - delimiter: null, - zIndex: 9999, - type: 'GET', - noCache: false, - onSearchStart: noop, - onSearchComplete: noop, - onSearchError: noop, - preserveInput: false, - containerClass: 'autocomplete-suggestions', - tabDisabled: false, - dataType: 'text', - currentRequest: null, - triggerSelectOnValidInput: true, - preventBadQueries: true, - lookupFilter: _lookupFilter, - paramName: 'query', - transformResult: _transformResult, - showNoSuggestionNotice: false, - noSuggestionNotice: 'No results', - orientation: 'bottom', - forceFixPosition: false - }; - - function _lookupFilter(suggestion, originalQuery, queryLowerCase) { - return suggestion.value.toLowerCase().indexOf(queryLowerCase) !== -1; - }; - - function _transformResult(response) { - return typeof response === 'string' ? $.parseJSON(response) : response; - }; - - function _formatResult(suggestion, currentValue) { - // Do not replace anything if the current value is empty - if (!currentValue) { - return suggestion.value; - } - - var pattern = '(' + utils.escapeRegExChars(currentValue) + ')'; - - return suggestion.value - .replace(new RegExp(pattern, 'gi'), '$1<\/strong>') - .replace(/&/g, '&') - .replace(//g, '>') - .replace(/"/g, '"') - .replace(/<(\/?strong)>/g, '<$1>'); - }; - - function _formatGroup(suggestion, category) { - return '
' + category + '
'; - }; - - Autocomplete.prototype = { - - initialize: function () { - var that = this, - suggestionSelector = '.' + that.classes.suggestion, - selected = that.classes.selected, - options = that.options, - container; - - that.element.setAttribute('autocomplete', 'off'); - - // html() deals with many types: htmlString or Element or Array or jQuery - that.noSuggestionsContainer = $('
') - .html(this.options.noSuggestionNotice).get(0); - - that.suggestionsContainer = Autocomplete.utils.createNode(options.containerClass); - - container = $(that.suggestionsContainer); - - container.appendTo(options.appendTo || 'body'); - - // Only set width if it was provided: - if (options.width !== 'auto') { - container.css('width', options.width); - } - - // Listen for mouse over event on suggestions list: - container.on('mouseover.autocomplete', suggestionSelector, function () { - that.activate($(this).data('index')); - }); - - // Deselect active element when mouse leaves suggestions container: - container.on('mouseout.autocomplete', function () { - that.selectedIndex = -1; - container.children('.' + selected).removeClass(selected); - }); - - // Listen for click event on suggestions list: - container.on('click.autocomplete', suggestionSelector, function () { - that.select($(this).data('index')); - }); - - container.on('click.autocomplete', function () { - clearTimeout(that.blurTimeoutId); - }) - - that.fixPositionCapture = function () { - if (that.visible) { - that.fixPosition(); - } - }; - - $(window).on('resize.autocomplete', that.fixPositionCapture); - - that.el.on('keydown.autocomplete', function (e) { that.onKeyPress(e); }); - that.el.on('keyup.autocomplete', function (e) { that.onKeyUp(e); }); - that.el.on('blur.autocomplete', function () { that.onBlur(); }); - that.el.on('focus.autocomplete', function () { that.onFocus(); }); - that.el.on('change.autocomplete', function (e) { that.onKeyUp(e); }); - that.el.on('input.autocomplete', function (e) { that.onKeyUp(e); }); - }, - - onFocus: function () { - var that = this; - - that.fixPosition(); - - if (that.el.val().length >= that.options.minChars) { - that.onValueChange(); - } - }, - - onBlur: function () { - var that = this; - - // If user clicked on a suggestion, hide() will - // be canceled, otherwise close suggestions - that.blurTimeoutId = setTimeout(function () { - that.hide(); - }, 200); - }, - - abortAjax: function () { - var that = this; - if (that.currentRequest) { - that.currentRequest.abort(); - that.currentRequest = null; - } - }, - - setOptions: function (suppliedOptions) { - var that = this, - options = $.extend({}, that.options, suppliedOptions); - - that.isLocal = Array.isArray(options.lookup); - - if (that.isLocal) { - options.lookup = that.verifySuggestionsFormat(options.lookup); - } - - options.orientation = that.validateOrientation(options.orientation, 'bottom'); - - // Adjust height, width and z-index: - $(that.suggestionsContainer).css({ - 'max-height': options.maxHeight + 'px', - 'width': options.width + 'px', - 'z-index': options.zIndex - }); - - this.options = options; - }, - - - clearCache: function () { - this.cachedResponse = {}; - this.badQueries = []; - }, - - clear: function () { - this.clearCache(); - this.currentValue = ''; - this.suggestions = []; - }, - - disable: function () { - var that = this; - that.disabled = true; - clearTimeout(that.onChangeTimeout); - that.abortAjax(); - }, - - enable: function () { - this.disabled = false; - }, - - fixPosition: function () { - // Use only when container has already its content - - var that = this, - $container = $(that.suggestionsContainer), - containerParent = $container.parent().get(0); - // Fix position automatically when appended to body. - // In other cases force parameter must be given. - if (containerParent !== document.body && !that.options.forceFixPosition) { - return; - } - - // Choose orientation - var orientation = that.options.orientation, - containerHeight = $container.outerHeight(), - height = that.el.outerHeight(), - offset = that.el.offset(), - styles = { 'top': offset.top, 'left': offset.left }; - - if (orientation === 'auto') { - var viewPortHeight = $(window).height(), - scrollTop = $(window).scrollTop(), - topOverflow = -scrollTop + offset.top - containerHeight, - bottomOverflow = scrollTop + viewPortHeight - (offset.top + height + containerHeight); - - orientation = (Math.max(topOverflow, bottomOverflow) === topOverflow) ? 'top' : 'bottom'; - } - - if (orientation === 'top') { - styles.top += -containerHeight; - } else { - styles.top += height; - } - - // If container is not positioned to body, - // correct its position using offset parent offset - if(containerParent !== document.body) { - var opacity = $container.css('opacity'), - parentOffsetDiff; - - if (!that.visible){ - $container.css('opacity', 0).show(); - } - - parentOffsetDiff = $container.offsetParent().offset(); - styles.top -= parentOffsetDiff.top; - styles.top += containerParent.scrollTop; - styles.left -= parentOffsetDiff.left; - - if (!that.visible){ - $container.css('opacity', opacity).hide(); - } - } - - if (that.options.width === 'auto') { - styles.width = that.el.outerWidth() + 'px'; - } - - $container.css(styles); - }, - - isCursorAtEnd: function () { - var that = this, - valLength = that.el.val().length, - selectionStart = that.element.selectionStart, - range; - - if (typeof selectionStart === 'number') { - return selectionStart === valLength; - } - if (document.selection) { - range = document.selection.createRange(); - range.moveStart('character', -valLength); - return valLength === range.text.length; - } - return true; - }, - - onKeyPress: function (e) { - var that = this; - - // If suggestions are hidden and user presses arrow down, display suggestions: - if (!that.disabled && !that.visible && e.which === keys.DOWN && that.currentValue) { - that.suggest(); - return; - } - - if (that.disabled || !that.visible) { - return; - } - - switch (e.which) { - case keys.ESC: - that.el.val(that.currentValue); - that.hide(); - break; - case keys.RIGHT: - if (that.hint && that.options.onHint && that.isCursorAtEnd()) { - that.selectHint(); - break; - } - return; - case keys.TAB: - if (that.hint && that.options.onHint) { - that.selectHint(); - return; - } - if (that.selectedIndex === -1) { - that.hide(); - return; - } - that.select(that.selectedIndex); - if (that.options.tabDisabled === false) { - return; - } - break; - case keys.RETURN: - if (that.selectedIndex === -1) { - that.hide(); - return; - } - that.select(that.selectedIndex); - break; - case keys.UP: - that.moveUp(); - break; - case keys.DOWN: - that.moveDown(); - break; - default: - return; - } - - // Cancel event if function did not return: - e.stopImmediatePropagation(); - e.preventDefault(); - }, - - onKeyUp: function (e) { - var that = this; - - if (that.disabled) { - return; - } - - switch (e.which) { - case keys.UP: - case keys.DOWN: - return; - } - - clearTimeout(that.onChangeTimeout); - - if (that.currentValue !== that.el.val()) { - that.findBestHint(); - if (that.options.deferRequestBy > 0) { - // Defer lookup in case when value changes very quickly: - that.onChangeTimeout = setTimeout(function () { - that.onValueChange(); - }, that.options.deferRequestBy); - } else { - that.onValueChange(); - } - } - }, - - onValueChange: function () { - if (this.ignoreValueChange) { - this.ignoreValueChange = false; - return; - } - - var that = this, - options = that.options, - value = that.el.val(), - query = that.getQuery(value); - - if (that.selection && that.currentValue !== query) { - that.selection = null; - (options.onInvalidateSelection || $.noop).call(that.element); - } - - clearTimeout(that.onChangeTimeout); - that.currentValue = value; - that.selectedIndex = -1; - - // Check existing suggestion for the match before proceeding: - if (options.triggerSelectOnValidInput && that.isExactMatch(query)) { - that.select(0); - return; - } - - if (query.length < options.minChars) { - that.hide(); - } else { - that.getSuggestions(query); - } - }, - - isExactMatch: function (query) { - var suggestions = this.suggestions; - - return (suggestions.length === 1 && suggestions[0].value.toLowerCase() === query.toLowerCase()); - }, - - getQuery: function (value) { - var delimiter = this.options.delimiter, - parts; - - if (!delimiter) { - return value; - } - parts = value.split(delimiter); - return $.trim(parts[parts.length - 1]); - }, - - getSuggestionsLocal: function (query) { - var that = this, - options = that.options, - queryLowerCase = query.toLowerCase(), - filter = options.lookupFilter, - limit = parseInt(options.lookupLimit, 10), - data; - - data = { - suggestions: $.grep(options.lookup, function (suggestion) { - return filter(suggestion, query, queryLowerCase); - }) - }; - - if (limit && data.suggestions.length > limit) { - data.suggestions = data.suggestions.slice(0, limit); - } - - return data; - }, - - getSuggestions: function (q) { - var response, - that = this, - options = that.options, - serviceUrl = options.serviceUrl, - params, - cacheKey, - ajaxSettings; - - options.params[options.paramName] = q; - - if (options.onSearchStart.call(that.element, options.params) === false) { - return; - } - - params = options.ignoreParams ? null : options.params; - - if ($.isFunction(options.lookup)){ - options.lookup(q, function (data) { - that.suggestions = data.suggestions; - that.suggest(); - options.onSearchComplete.call(that.element, q, data.suggestions); - }); - return; - } - - if (that.isLocal) { - response = that.getSuggestionsLocal(q); - } else { - if ($.isFunction(serviceUrl)) { - serviceUrl = serviceUrl.call(that.element, q); - } - cacheKey = serviceUrl + '?' + $.param(params || {}); - response = that.cachedResponse[cacheKey]; - } - - if (response && Array.isArray(response.suggestions)) { - that.suggestions = response.suggestions; - that.suggest(); - options.onSearchComplete.call(that.element, q, response.suggestions); - } else if (!that.isBadQuery(q)) { - that.abortAjax(); - - ajaxSettings = { - url: serviceUrl, - data: params, - type: options.type, - dataType: options.dataType - }; - - $.extend(ajaxSettings, options.ajaxSettings); - - that.currentRequest = $.ajax(ajaxSettings).done(function (data) { - var result; - that.currentRequest = null; - result = options.transformResult(data, q); - that.processResponse(result, q, cacheKey); - options.onSearchComplete.call(that.element, q, result.suggestions); - }).fail(function (jqXHR, textStatus, errorThrown) { - options.onSearchError.call(that.element, q, jqXHR, textStatus, errorThrown); - }); - } else { - options.onSearchComplete.call(that.element, q, []); - } - }, - - isBadQuery: function (q) { - if (!this.options.preventBadQueries){ - return false; - } - - var badQueries = this.badQueries, - i = badQueries.length; - - while (i--) { - if (q.indexOf(badQueries[i]) === 0) { - return true; - } - } - - return false; - }, - - hide: function () { - var that = this, - container = $(that.suggestionsContainer); - - if ($.isFunction(that.options.onHide) && that.visible) { - that.options.onHide.call(that.element, container); - } - - that.visible = false; - that.selectedIndex = -1; - clearTimeout(that.onChangeTimeout); - $(that.suggestionsContainer).hide(); - that.signalHint(null); - }, - - suggest: function () { - if (!this.suggestions.length) { - if (this.options.showNoSuggestionNotice) { - this.noSuggestions(); - } else { - this.hide(); - } - return; - } - - var that = this, - options = that.options, - groupBy = options.groupBy, - formatResult = options.formatResult, - value = that.getQuery(that.currentValue), - className = that.classes.suggestion, - classSelected = that.classes.selected, - container = $(that.suggestionsContainer), - noSuggestionsContainer = $(that.noSuggestionsContainer), - beforeRender = options.beforeRender, - html = '', - category, - formatGroup = function (suggestion, index) { - var currentCategory = suggestion.data[groupBy]; - - if (category === currentCategory){ - return ''; - } - - category = currentCategory; - - return options.formatGroup(suggestion, category); - }; - - if (options.triggerSelectOnValidInput && that.isExactMatch(value)) { - that.select(0); - return; - } - - // Build suggestions inner HTML: - $.each(that.suggestions, function (i, suggestion) { - if (groupBy){ - html += formatGroup(suggestion, value, i); - } - - html += '
' + formatResult(suggestion, value, i) + '
'; - }); - - this.adjustContainerWidth(); - - noSuggestionsContainer.detach(); - container.html(html); - - if ($.isFunction(beforeRender)) { - beforeRender.call(that.element, container, that.suggestions); - } - - that.fixPosition(); - container.show(); - - // Select first value by default: - if (options.autoSelectFirst) { - that.selectedIndex = 0; - container.scrollTop(0); - container.children('.' + className).first().addClass(classSelected); - } - - that.visible = true; - that.findBestHint(); - }, - - noSuggestions: function() { - var that = this, - beforeRender = that.options.beforeRender, - container = $(that.suggestionsContainer), - noSuggestionsContainer = $(that.noSuggestionsContainer); - - this.adjustContainerWidth(); - - // Some explicit steps. Be careful here as it easy to get - // noSuggestionsContainer removed from DOM if not detached properly. - noSuggestionsContainer.detach(); - - // clean suggestions if any - container.empty(); - container.append(noSuggestionsContainer); - - if ($.isFunction(beforeRender)) { - beforeRender.call(that.element, container, that.suggestions); - } - - that.fixPosition(); - - container.show(); - that.visible = true; - }, - - adjustContainerWidth: function() { - var that = this, - options = that.options, - width, - container = $(that.suggestionsContainer); - - // If width is auto, adjust width before displaying suggestions, - // because if instance was created before input had width, it will be zero. - // Also it adjusts if input width has changed. - if (options.width === 'auto') { - width = that.el.outerWidth(); - container.css('width', width > 0 ? width : 300); - } else if(options.width === 'flex') { - // Trust the source! Unset the width property so it will be the max length - // the containing elements. - container.css('width', ''); - } - }, - - findBestHint: function () { - var that = this, - value = that.el.val().toLowerCase(), - bestMatch = null; - - if (!value) { - return; - } - - $.each(that.suggestions, function (i, suggestion) { - var foundMatch = suggestion.value.toLowerCase().indexOf(value) === 0; - if (foundMatch) { - bestMatch = suggestion; - } - return !foundMatch; - }); - - that.signalHint(bestMatch); - }, - - signalHint: function (suggestion) { - var hintValue = '', - that = this; - if (suggestion) { - hintValue = that.currentValue + suggestion.value.substr(that.currentValue.length); - } - if (that.hintValue !== hintValue) { - that.hintValue = hintValue; - that.hint = suggestion; - (this.options.onHint || $.noop)(hintValue); - } - }, - - verifySuggestionsFormat: function (suggestions) { - // If suggestions is string array, convert them to supported format: - if (suggestions.length && typeof suggestions[0] === 'string') { - return $.map(suggestions, function (value) { - return { value: value, data: null }; - }); - } - - return suggestions; - }, - - validateOrientation: function(orientation, fallback) { - orientation = $.trim(orientation || '').toLowerCase(); - - if($.inArray(orientation, ['auto', 'bottom', 'top']) === -1){ - orientation = fallback; - } - - return orientation; - }, - - processResponse: function (result, originalQuery, cacheKey) { - var that = this, - options = that.options; - - result.suggestions = that.verifySuggestionsFormat(result.suggestions); - - // Cache results if cache is not disabled: - if (!options.noCache) { - that.cachedResponse[cacheKey] = result; - if (options.preventBadQueries && !result.suggestions.length) { - that.badQueries.push(originalQuery); - } - } - - // Return if originalQuery is not matching current query: - if (originalQuery !== that.getQuery(that.currentValue)) { - return; - } - - that.suggestions = result.suggestions; - that.suggest(); - }, - - activate: function (index) { - var that = this, - activeItem, - selected = that.classes.selected, - container = $(that.suggestionsContainer), - children = container.find('.' + that.classes.suggestion); - - container.find('.' + selected).removeClass(selected); - - that.selectedIndex = index; - - if (that.selectedIndex !== -1 && children.length > that.selectedIndex) { - activeItem = children.get(that.selectedIndex); - $(activeItem).addClass(selected); - return activeItem; - } - - return null; - }, - - selectHint: function () { - var that = this, - i = $.inArray(that.hint, that.suggestions); - - that.select(i); - }, - - select: function (i) { - var that = this; - that.hide(); - that.onSelect(i); - }, - - moveUp: function () { - var that = this; - - if (that.selectedIndex === -1) { - return; - } - - if (that.selectedIndex === 0) { - $(that.suggestionsContainer).children('.' + that.classes.suggestion).first().removeClass(that.classes.selected); - that.selectedIndex = -1; - that.ignoreValueChange = false; - that.el.val(that.currentValue); - that.findBestHint(); - return; - } - - that.adjustScroll(that.selectedIndex - 1); - }, - - moveDown: function () { - var that = this; - - if (that.selectedIndex === (that.suggestions.length - 1)) { - return; - } - - that.adjustScroll(that.selectedIndex + 1); - }, - - adjustScroll: function (index) { - var that = this, - activeItem = that.activate(index); - - if (!activeItem) { - return; - } - - var offsetTop, - upperBound, - lowerBound, - heightDelta = $(activeItem).outerHeight(); - - offsetTop = activeItem.offsetTop; - upperBound = $(that.suggestionsContainer).scrollTop(); - lowerBound = upperBound + that.options.maxHeight - heightDelta; - - if (offsetTop < upperBound) { - $(that.suggestionsContainer).scrollTop(offsetTop); - } else if (offsetTop > lowerBound) { - $(that.suggestionsContainer).scrollTop(offsetTop - that.options.maxHeight + heightDelta); - } - - if (!that.options.preserveInput) { - // During onBlur event, browser will trigger "change" event, - // because value has changed, to avoid side effect ignore, - // that event, so that correct suggestion can be selected - // when clicking on suggestion with a mouse - that.ignoreValueChange = true; - that.el.val(that.getValue(that.suggestions[index].value)); - } - - that.signalHint(null); - }, - - onSelect: function (index) { - var that = this, - onSelectCallback = that.options.onSelect, - suggestion = that.suggestions[index]; - - that.currentValue = that.getValue(suggestion.value); - - if (that.currentValue !== that.el.val() && !that.options.preserveInput) { - that.el.val(that.currentValue); - } - - that.signalHint(null); - that.suggestions = []; - that.selection = suggestion; - - if ($.isFunction(onSelectCallback)) { - onSelectCallback.call(that.element, suggestion); - } - }, - - getValue: function (value) { - var that = this, - delimiter = that.options.delimiter, - currentValue, - parts; - - if (!delimiter) { - return value; - } - - currentValue = that.currentValue; - parts = currentValue.split(delimiter); - - if (parts.length === 1) { - return value; - } - - return currentValue.substr(0, currentValue.length - parts[parts.length - 1].length) + value; - }, - - dispose: function () { - var that = this; - that.el.off('.autocomplete').removeData('autocomplete'); - $(window).off('resize.autocomplete', that.fixPositionCapture); - $(that.suggestionsContainer).remove(); - } - }; - - // Create chainable jQuery plugin: - $.fn.devbridgeAutocomplete = function (options, args) { - var dataKey = 'autocomplete'; - // If function invoked without argument return - // instance of the first matched element: - if (!arguments.length) { - return this.first().data(dataKey); - } - - return this.each(function () { - var inputElement = $(this), - instance = inputElement.data(dataKey); - - if (typeof options === 'string') { - if (instance && typeof instance[options] === 'function') { - instance[options](args); - } - } else { - // If instance already exists, destroy it: - if (instance && instance.dispose) { - instance.dispose(); - } - instance = new Autocomplete(this, options); - inputElement.data(dataKey, instance); - } - }); - }; - - // Don't overwrite if it already exists - if (!$.fn.autocomplete) { - $.fn.autocomplete = $.fn.devbridgeAutocomplete; - } -})); diff --git a/client/lib/jquery.textcomplete.js b/client/lib/jquery.textcomplete.js deleted file mode 100644 index 2003101750..0000000000 --- a/client/lib/jquery.textcomplete.js +++ /dev/null @@ -1,1227 +0,0 @@ -(function (factory) { - if (typeof define === 'function' && define.amd) { - // AMD. Register as an anonymous module. - define(['jquery'], factory); - } else if (typeof module === "object" && module.exports) { - var $ = require('jquery'); - module.exports = factory($); - } else { - // Browser globals - factory(jQuery); - } -}(function (jQuery) { - -/*! - * jQuery.textcomplete - * - * Repository: https://github.com/yuku-t/jquery-textcomplete - * License: MIT (https://github.com/yuku-t/jquery-textcomplete/blob/master/LICENSE) - * Author: Yuku Takahashi - */ - -if (typeof jQuery === 'undefined') { - throw new Error('jQuery.textcomplete requires jQuery'); -} - -+function ($) { - 'use strict'; - - var warn = function (message) { - if (console.warn) { console.warn(message); } - }; - - var id = 1; - - $.fn.textcomplete = function (strategies, option) { - var args = Array.prototype.slice.call(arguments); - return this.each(function () { - var self = this; - var $this = $(this); - var completer = $this.data('textComplete'); - if (!completer) { - option || (option = {}); - option._oid = id++; // unique object id - completer = new $.fn.textcomplete.Completer(this, option); - $this.data('textComplete', completer); - } - if (typeof strategies === 'string') { - if (!completer) return; - args.shift() - completer[strategies].apply(completer, args); - if (strategies === 'destroy') { - $this.removeData('textComplete'); - } - } else { - // For backward compatibility. - // TODO: Remove at v0.4 - $.each(strategies, function (obj) { - $.each(['header', 'footer', 'placement', 'maxCount'], function (name) { - if (obj[name]) { - completer.option[name] = obj[name]; - warn(name + 'as a strategy param is deprecated. Use option.'); - delete obj[name]; - } - }); - }); - completer.register($.fn.textcomplete.Strategy.parse(strategies, { - el: self, - $el: $this - })); - } - }); - }; - -}(jQuery); - -+function ($) { - 'use strict'; - - // Exclusive execution control utility. - // - // func - The function to be locked. It is executed with a function named - // `free` as the first argument. Once it is called, additional - // execution are ignored until the free is invoked. Then the last - // ignored execution will be replayed immediately. - // - // Examples - // - // var lockedFunc = lock(function (free) { - // setTimeout(function { free(); }, 1000); // It will be free in 1 sec. - // console.log('Hello, world'); - // }); - // lockedFunc(); // => 'Hello, world' - // lockedFunc(); // none - // lockedFunc(); // none - // // 1 sec past then - // // => 'Hello, world' - // lockedFunc(); // => 'Hello, world' - // lockedFunc(); // none - // - // Returns a wrapped function. - var lock = function (func) { - var locked, queuedArgsToReplay; - - return function () { - // Convert arguments into a real array. - var args = Array.prototype.slice.call(arguments); - if (locked) { - // Keep a copy of this argument list to replay later. - // OK to overwrite a previous value because we only replay - // the last one. - queuedArgsToReplay = args; - return; - } - locked = true; - var self = this; - args.unshift(function replayOrFree() { - if (queuedArgsToReplay) { - // Other request(s) arrived while we were locked. - // Now that the lock is becoming available, replay - // the latest such request, then call back here to - // unlock (or replay another request that arrived - // while this one was in flight). - var replayArgs = queuedArgsToReplay; - queuedArgsToReplay = undefined; - replayArgs.unshift(replayOrFree); - func.apply(self, replayArgs); - } else { - locked = false; - } - }); - func.apply(this, args); - }; - }; - - var isString = function (obj) { - return Object.prototype.toString.call(obj) === '[object String]'; - }; - - var isFunction = function (obj) { - return Object.prototype.toString.call(obj) === '[object Function]'; - }; - - var uniqueId = 0; - - function Completer(element, option) { - this.$el = $(element); - this.id = 'textcomplete' + uniqueId++; - this.strategies = []; - this.views = []; - this.option = $.extend({}, Completer._getDefaults(), option); - - if (!this.$el.is('input[type=text]') && !this.$el.is('textarea') && !element.isContentEditable && element.contentEditable != 'true') { - throw new Error('textcomplete must be called on a Textarea or a ContentEditable.'); - } - - if (element === document.activeElement) { - // element has already been focused. Initialize view objects immediately. - this.initialize() - } else { - // Initialize view objects lazily. - var self = this; - this.$el.one('focus.' + this.id, function () { self.initialize(); }); - } - } - - Completer._getDefaults = function () { - if (!Completer.DEFAULTS) { - Completer.DEFAULTS = { - appendTo: $('body'), - zIndex: '100' - }; - } - - return Completer.DEFAULTS; - } - - $.extend(Completer.prototype, { - // Public properties - // ----------------- - - id: null, - option: null, - strategies: null, - adapter: null, - dropdown: null, - $el: null, - - // Public methods - // -------------- - - initialize: function () { - var element = this.$el.get(0); - // Initialize view objects. - this.dropdown = new $.fn.textcomplete.Dropdown(element, this, this.option); - var Adapter, viewName; - if (this.option.adapter) { - Adapter = this.option.adapter; - } else { - if (this.$el.is('textarea') || this.$el.is('input[type=text]')) { - viewName = typeof element.selectionEnd === 'number' ? 'Textarea' : 'IETextarea'; - } else { - viewName = 'ContentEditable'; - } - Adapter = $.fn.textcomplete[viewName]; - } - this.adapter = new Adapter(element, this, this.option); - }, - - destroy: function () { - this.$el.off('.' + this.id); - if (this.adapter) { - this.adapter.destroy(); - } - if (this.dropdown) { - this.dropdown.destroy(); - } - this.$el = this.adapter = this.dropdown = null; - }, - - // Invoke textcomplete. - trigger: function (text, skipUnchangedTerm) { - if (!this.dropdown) { this.initialize(); } - text != null || (text = this.adapter.getTextFromHeadToCaret()); - var searchQuery = this._extractSearchQuery(text); - if (searchQuery.length) { - var term = searchQuery[1]; - // Ignore shift-key, ctrl-key and so on. - if (skipUnchangedTerm && this._term === term) { return; } - this._term = term; - this._search.apply(this, searchQuery); - } else { - this._term = null; - this.dropdown.deactivate(); - } - }, - - fire: function (eventName) { - var args = Array.prototype.slice.call(arguments, 1); - this.$el.trigger(eventName, args); - return this; - }, - - register: function (strategies) { - Array.prototype.push.apply(this.strategies, strategies); - }, - - // Insert the value into adapter view. It is called when the dropdown is clicked - // or selected. - // - // value - The selected element of the array callbacked from search func. - // strategy - The Strategy object. - // e - Click or keydown event object. - select: function (value, strategy, e) { - this._term = null; - this.adapter.select(value, strategy, e); - this.fire('change').fire('textComplete:select', value, strategy); - this.adapter.focus(); - }, - - // Private properties - // ------------------ - - _clearAtNext: true, - _term: null, - - // Private methods - // --------------- - - // Parse the given text and extract the first matching strategy. - // - // Returns an array including the strategy, the query term and the match - // object if the text matches an strategy; otherwise returns an empty array. - _extractSearchQuery: function (text) { - for (var i = 0; i < this.strategies.length; i++) { - var strategy = this.strategies[i]; - var context = strategy.context(text); - if (context || context === '') { - var matchRegexp = isFunction(strategy.match) ? strategy.match(text) : strategy.match; - if (isString(context)) { text = context; } - var match = text.match(matchRegexp); - if (match) { return [strategy, match[strategy.index], match]; } - } - } - return [] - }, - - // Call the search method of selected strategy.. - _search: lock(function (free, strategy, term, match) { - var self = this; - strategy.search(term, function (data, stillSearching) { - if (!self.dropdown.shown) { - self.dropdown.activate(); - } - if (self._clearAtNext) { - // The first callback in the current lock. - self.dropdown.clear(); - self._clearAtNext = false; - } - self.dropdown.setPosition(self.adapter.getCaretPosition()); - self.dropdown.render(self._zip(data, strategy, term)); - if (!stillSearching) { - // The last callback in the current lock. - free(); - self._clearAtNext = true; // Call dropdown.clear at the next time. - } - }, match); - }), - - // Build a parameter for Dropdown#render. - // - // Examples - // - // this._zip(['a', 'b'], 's'); - // //=> [{ value: 'a', strategy: 's' }, { value: 'b', strategy: 's' }] - _zip: function (data, strategy, term) { - return $.map(data, function (value) { - return { value: value, strategy: strategy, term: term }; - }); - } - }); - - $.fn.textcomplete.Completer = Completer; -}(jQuery); - -+function ($) { - 'use strict'; - - var $window = $(window); - - var include = function (zippedData, datum) { - var i, elem; - var idProperty = datum.strategy.idProperty - for (i = 0; i < zippedData.length; i++) { - elem = zippedData[i]; - if (elem.strategy !== datum.strategy) continue; - if (idProperty) { - if (elem.value[idProperty] === datum.value[idProperty]) return true; - } else { - if (elem.value === datum.value) return true; - } - } - return false; - }; - - var dropdownViews = {}; - $(document).on('click', function (e) { - var id = e.originalEvent && e.originalEvent.keepTextCompleteDropdown; - $.each(dropdownViews, function (key, view) { - if (key !== id) { view.deactivate(); } - }); - }); - - var commands = { - SKIP_DEFAULT: 0, - KEY_UP: 1, - KEY_DOWN: 2, - KEY_ENTER: 3, - KEY_PAGEUP: 4, - KEY_PAGEDOWN: 5, - KEY_ESCAPE: 6 - }; - - // Dropdown view - // ============= - - // Construct Dropdown object. - // - // element - Textarea or contenteditable element. - function Dropdown(element, completer, option) { - this.$el = Dropdown.createElement(option); - this.completer = completer; - this.id = completer.id + 'dropdown'; - this._data = []; // zipped data. - this.$inputEl = $(element); - this.option = option; - - // Override setPosition method. - if (option.listPosition) { this.setPosition = option.listPosition; } - if (option.height) { this.$el.height(option.height); } - var self = this; - $.each(['maxCount', 'placement', 'footer', 'header', 'noResultsMessage', 'className'], function (_i, name) { - if (option[name] != null) { self[name] = option[name]; } - }); - this._bindEvents(element); - dropdownViews[this.id] = this; - } - - $.extend(Dropdown, { - // Class methods - // ------------- - - createElement: function (option) { - var $parent = option.appendTo; - if (!($parent instanceof $)) { $parent = $($parent); } - var $el = $('') - .addClass('dropdown-menu textcomplete-dropdown') - .attr('id', 'textcomplete-dropdown-' + option._oid) - .css({ - display: 'none', - left: 0, - position: 'absolute', - zIndex: option.zIndex - }) - .appendTo($parent); - return $el; - } - }); - - $.extend(Dropdown.prototype, { - // Public properties - // ----------------- - - $el: null, // jQuery object of ul.dropdown-menu element. - $inputEl: null, // jQuery object of target textarea. - completer: null, - footer: null, - header: null, - id: null, - maxCount: 10, - placement: '', - shown: false, - data: [], // Shown zipped data. - className: '', - - // Public methods - // -------------- - - destroy: function () { - // Don't remove $el because it may be shared by several textcompletes. - this.deactivate(); - - this.$el.off('.' + this.id); - this.$inputEl.off('.' + this.id); - this.clear(); - this.$el = this.$inputEl = this.completer = null; - delete dropdownViews[this.id] - }, - - render: function (zippedData) { - var contentsHtml = this._buildContents(zippedData); - var unzippedData = $.map(this.data, function (d) { return d.value; }); - if (this.data.length) { - this._renderHeader(unzippedData); - this._renderFooter(unzippedData); - if (contentsHtml) { - this._renderContents(contentsHtml); - this._fitToBottom(); - this._activateIndexedItem(); - } - this._setScroll(); - } else if (this.noResultsMessage) { - this._renderNoResultsMessage(unzippedData); - } else if (this.shown) { - this.deactivate(); - } - }, - - setPosition: function (pos) { - this.$el.css(this._applyPlacement(pos)); - - // Make the dropdown fixed if the input is also fixed - // This can't be done during init, as textcomplete may be used on multiple elements on the same page - // Because the same dropdown is reused behind the scenes, we need to recheck every time the dropdown is showed - var position = 'absolute'; - // Check if input or one of its parents has positioning we need to care about - this.$inputEl.add(this.$inputEl.parents()).each(function() { - if($(this).css('position') === 'absolute') // The element has absolute positioning, so it's all OK - return false; - if($(this).css('position') === 'fixed') { - position = 'fixed'; - return false; - } - }); - this.$el.css({ position: position }); // Update positioning - - return this; - }, - - clear: function () { - this.$el.html(''); - this.data = []; - this._index = 0; - this._$header = this._$footer = this._$noResultsMessage = null; - }, - - activate: function () { - if (!this.shown) { - this.clear(); - this.$el.show(); - if (this.className) { this.$el.addClass(this.className); } - this.completer.fire('textComplete:show'); - this.shown = true; - } - return this; - }, - - deactivate: function () { - if (this.shown) { - this.$el.hide(); - if (this.className) { this.$el.removeClass(this.className); } - this.completer.fire('textComplete:hide'); - this.shown = false; - } - return this; - }, - - isUp: function (e) { - return e.keyCode === 38 || (e.ctrlKey && e.keyCode === 80); // UP, Ctrl-P - }, - - isDown: function (e) { - return e.keyCode === 40 || (e.ctrlKey && e.keyCode === 78); // DOWN, Ctrl-N - }, - - isEnter: function (e) { - var modifiers = e.ctrlKey || e.altKey || e.metaKey || e.shiftKey; - return !modifiers && (e.keyCode === 13 || e.keyCode === 9 || (this.option.completeOnSpace === true && e.keyCode === 32)) // ENTER, TAB - }, - - isPageup: function (e) { - return e.keyCode === 33; // PAGEUP - }, - - isPagedown: function (e) { - return e.keyCode === 34; // PAGEDOWN - }, - - isEscape: function (e) { - return e.keyCode === 27; // ESCAPE - }, - - // Private properties - // ------------------ - - _data: null, // Currently shown zipped data. - _index: null, - _$header: null, - _$noResultsMessage: null, - _$footer: null, - - // Private methods - // --------------- - - _bindEvents: function () { - this.$el.on('mousedown.' + this.id, '.textcomplete-item', $.proxy(this._onClick, this)); - this.$el.on('touchstart.' + this.id, '.textcomplete-item', $.proxy(this._onClick, this)); - this.$el.on('mouseover.' + this.id, '.textcomplete-item', $.proxy(this._onMouseover, this)); - this.$inputEl.on('keydown.' + this.id, $.proxy(this._onKeydown, this)); - }, - - _onClick: function (e) { - var $el = $(e.target); - e.preventDefault(); - e.originalEvent.keepTextCompleteDropdown = this.id; - if (!$el.hasClass('textcomplete-item')) { - $el = $el.closest('.textcomplete-item'); - } - var datum = this.data[parseInt($el.data('index'), 10)]; - this.completer.select(datum.value, datum.strategy, e); - var self = this; - // Deactive at next tick to allow other event handlers to know whether - // the dropdown has been shown or not. - setTimeout(function () { - self.deactivate(); - if (e.type === 'touchstart') { - self.$inputEl.focus(); - } - }, 0); - }, - - // Activate hovered item. - _onMouseover: function (e) { - var $el = $(e.target); - e.preventDefault(); - if (!$el.hasClass('textcomplete-item')) { - $el = $el.closest('.textcomplete-item'); - } - this._index = parseInt($el.data('index'), 10); - this._activateIndexedItem(); - }, - - _onKeydown: function (e) { - if (!this.shown) { return; } - - var command; - - if ($.isFunction(this.option.onKeydown)) { - command = this.option.onKeydown(e, commands); - } - - if (command == null) { - command = this._defaultKeydown(e); - } - - switch (command) { - case commands.KEY_UP: - e.preventDefault(); - this._up(); - break; - case commands.KEY_DOWN: - e.preventDefault(); - this._down(); - break; - case commands.KEY_ENTER: - e.preventDefault(); - this._enter(e); - break; - case commands.KEY_PAGEUP: - e.preventDefault(); - this._pageup(); - break; - case commands.KEY_PAGEDOWN: - e.preventDefault(); - this._pagedown(); - break; - case commands.KEY_ESCAPE: - e.preventDefault(); - this.deactivate(); - break; - } - }, - - _defaultKeydown: function (e) { - if (this.isUp(e)) { - return commands.KEY_UP; - } else if (this.isDown(e)) { - return commands.KEY_DOWN; - } else if (this.isEnter(e)) { - return commands.KEY_ENTER; - } else if (this.isPageup(e)) { - return commands.KEY_PAGEUP; - } else if (this.isPagedown(e)) { - return commands.KEY_PAGEDOWN; - } else if (this.isEscape(e)) { - return commands.KEY_ESCAPE; - } - }, - - _up: function () { - if (this._index === 0) { - this._index = this.data.length - 1; - } else { - this._index -= 1; - } - this._activateIndexedItem(); - this._setScroll(); - }, - - _down: function () { - if (this._index === this.data.length - 1) { - this._index = 0; - } else { - this._index += 1; - } - this._activateIndexedItem(); - this._setScroll(); - }, - - _enter: function (e) { - var datum = this.data[parseInt(this._getActiveElement().data('index'), 10)]; - this.completer.select(datum.value, datum.strategy, e); - this.deactivate(); - }, - - _pageup: function () { - var target = 0; - var threshold = this._getActiveElement().position().top - this.$el.innerHeight(); - this.$el.children().each(function (i) { - if ($(this).position().top + $(this).outerHeight() > threshold) { - target = i; - return false; - } - }); - this._index = target; - this._activateIndexedItem(); - this._setScroll(); - }, - - _pagedown: function () { - var target = this.data.length - 1; - var threshold = this._getActiveElement().position().top + this.$el.innerHeight(); - this.$el.children().each(function (i) { - if ($(this).position().top > threshold) { - target = i; - return false - } - }); - this._index = target; - this._activateIndexedItem(); - this._setScroll(); - }, - - _activateIndexedItem: function () { - this.$el.find('.textcomplete-item.active').removeClass('active'); - this._getActiveElement().addClass('active'); - }, - - _getActiveElement: function () { - return this.$el.children('.textcomplete-item:nth(' + this._index + ')'); - }, - - _setScroll: function () { - var $activeEl = this._getActiveElement(); - var itemTop = $activeEl.position().top; - var itemHeight = $activeEl.outerHeight(); - var visibleHeight = this.$el.innerHeight(); - var visibleTop = this.$el.scrollTop(); - if (this._index === 0 || this._index == this.data.length - 1 || itemTop < 0) { - this.$el.scrollTop(itemTop + visibleTop); - } else if (itemTop + itemHeight > visibleHeight) { - this.$el.scrollTop(itemTop + itemHeight + visibleTop - visibleHeight); - } - }, - - _buildContents: function (zippedData) { - var datum, i, index; - var html = ''; - for (i = 0; i < zippedData.length; i++) { - if (this.data.length === this.maxCount) break; - datum = zippedData[i]; - if (include(this.data, datum)) { continue; } - index = this.data.length; - this.data.push(datum); - html += '
  • '; - html += datum.strategy.template(datum.value, datum.term); - html += '
    • '; - } - return html; - }, - - _renderHeader: function (unzippedData) { - if (this.header) { - if (!this._$header) { - this._$header = $('
  • ').prependTo(this.$el); - } - var html = $.isFunction(this.header) ? this.header(unzippedData) : this.header; - this._$header.html(html); - } - }, - - _renderFooter: function (unzippedData) { - if (this.footer) { - if (!this._$footer) { - this._$footer = $('
  • ').appendTo(this.$el); - } - var html = $.isFunction(this.footer) ? this.footer(unzippedData) : this.footer; - this._$footer.html(html); - } - }, - - _renderNoResultsMessage: function (unzippedData) { - if (this.noResultsMessage) { - if (!this._$noResultsMessage) { - this._$noResultsMessage = $('
  • ').appendTo(this.$el); - } - var html = $.isFunction(this.noResultsMessage) ? this.noResultsMessage(unzippedData) : this.noResultsMessage; - this._$noResultsMessage.html(html); - } - }, - - _renderContents: function (html) { - if (this._$footer) { - this._$footer.before(html); - } else { - this.$el.append(html); - } - }, - - _fitToBottom: function() { - var windowScrollBottom = $window.scrollTop() + $window.height(); - var height = this.$el.height(); - if ((this.$el.position().top + height) > windowScrollBottom) { - this.$el.offset({top: windowScrollBottom - height}); - } - }, - - _applyPlacement: function (position) { - // If the 'placement' option set to 'top', move the position above the element. - if (this.placement.indexOf('top') !== -1) { - // Overwrite the position object to set the 'bottom' property instead of the top. - position = { - top: 'auto', - bottom: this.$el.parent().height() - position.top + position.lineHeight, - left: position.left - }; - } else { - position.bottom = 'auto'; - delete position.lineHeight; - } - if (this.placement.indexOf('absleft') !== -1) { - position.left = 0; - } else if (this.placement.indexOf('absright') !== -1) { - position.right = 0; - position.left = 'auto'; - } - return position; - } - }); - - $.fn.textcomplete.Dropdown = Dropdown; - $.extend($.fn.textcomplete, commands); -}(jQuery); - -+function ($) { - 'use strict'; - - // Memoize a search function. - var memoize = function (func) { - var memo = {}; - return function (term, callback) { - if (memo[term]) { - callback(memo[term]); - } else { - func.call(this, term, function (data) { - memo[term] = (memo[term] || []).concat(data); - callback.apply(null, arguments); - }); - } - }; - }; - - function Strategy(options) { - $.extend(this, options); - if (this.cache) { this.search = memoize(this.search); } - } - - Strategy.parse = function (strategiesArray, params) { - return $.map(strategiesArray, function (strategy) { - var strategyObj = new Strategy(strategy); - strategyObj.el = params.el; - strategyObj.$el = params.$el; - return strategyObj; - }); - }; - - $.extend(Strategy.prototype, { - // Public properties - // ----------------- - - // Required - match: null, - replace: null, - search: null, - - // Optional - cache: false, - context: function () { return true; }, - index: 2, - template: function (obj) { return obj; }, - idProperty: null - }); - - $.fn.textcomplete.Strategy = Strategy; - -}(jQuery); - -+function ($) { - 'use strict'; - - var now = Date.now || function () { return new Date().getTime(); }; - - // Returns a function, that, as long as it continues to be invoked, will not - // be triggered. The function will be called after it stops being called for - // `wait` msec. - // - // This utility function was originally implemented at Underscore.js. - var debounce = function (func, wait) { - var timeout, args, context, timestamp, result; - var later = function () { - var last = now() - timestamp; - if (last < wait) { - timeout = setTimeout(later, wait - last); - } else { - timeout = null; - result = func.apply(context, args); - context = args = null; - } - }; - - return function () { - context = this; - args = arguments; - timestamp = now(); - if (!timeout) { - timeout = setTimeout(later, wait); - } - return result; - }; - }; - - function Adapter () {} - - $.extend(Adapter.prototype, { - // Public properties - // ----------------- - - id: null, // Identity. - completer: null, // Completer object which creates it. - el: null, // Textarea element. - $el: null, // jQuery object of the textarea. - option: null, - - // Public methods - // -------------- - - initialize: function (element, completer, option) { - this.el = element; - this.$el = $(element); - this.id = completer.id + this.constructor.name; - this.completer = completer; - this.option = option; - - if (this.option.debounce) { - this._onKeyup = debounce(this._onKeyup, this.option.debounce); - } - - this._bindEvents(); - }, - - destroy: function () { - this.$el.off('.' + this.id); // Remove all event handlers. - this.$el = this.el = this.completer = null; - }, - - // Update the element with the given value and strategy. - // - // value - The selected object. It is one of the item of the array - // which was callbacked from the search function. - // strategy - The Strategy associated with the selected value. - select: function (/* value, strategy */) { - throw new Error('Not implemented'); - }, - - // Returns the caret's relative coordinates from body's left top corner. - // - // FIXME: Calculate the left top corner of `this.option.appendTo` element. - getCaretPosition: function () { - var position = this._getCaretRelativePosition(); - var offset = this.$el.offset(); - position.top += offset.top; - position.left += offset.left; - return position; - }, - - // Focus on the element. - focus: function () { - this.$el.focus(); - }, - - // Private methods - // --------------- - - _bindEvents: function () { - this.$el.on('keyup.' + this.id, $.proxy(this._onKeyup, this)); - }, - - _onKeyup: function (e) { - if (this._skipSearch(e)) { return; } - this.completer.trigger(this.getTextFromHeadToCaret(), true); - }, - - // Suppress searching if it returns true. - _skipSearch: function (clickEvent) { - switch (clickEvent.keyCode) { - case 13: // ENTER - case 40: // DOWN - case 38: // UP - return true; - } - if (clickEvent.ctrlKey) switch (clickEvent.keyCode) { - case 78: // Ctrl-N - case 80: // Ctrl-P - return true; - } - } - }); - - $.fn.textcomplete.Adapter = Adapter; -}(jQuery); - -+function ($) { - 'use strict'; - - // Textarea adapter - // ================ - // - // Managing a textarea. It doesn't know a Dropdown. - function Textarea(element, completer, option) { - this.initialize(element, completer, option); - } - - Textarea.DIV_PROPERTIES = { - left: -9999, - position: 'absolute', - top: 0, - whiteSpace: 'pre-wrap' - } - - Textarea.COPY_PROPERTIES = [ - 'border-width', 'font-family', 'font-size', 'font-style', 'font-variant', - 'font-weight', 'height', 'letter-spacing', 'word-spacing', 'line-height', - 'text-decoration', 'text-align', 'width', 'padding-top', 'padding-right', - 'padding-bottom', 'padding-left', 'margin-top', 'margin-right', - 'margin-bottom', 'margin-left', 'border-style', 'box-sizing', 'tab-size' - ]; - - $.extend(Textarea.prototype, $.fn.textcomplete.Adapter.prototype, { - // Public methods - // -------------- - - // Update the textarea with the given value and strategy. - select: function (value, strategy, e) { - var pre = this.getTextFromHeadToCaret(); - var post = this.el.value.substring(this.el.selectionEnd); - var newSubstr = strategy.replace(value, e); - if (typeof newSubstr !== 'undefined') { - if ($.isArray(newSubstr)) { - post = newSubstr[1] + post; - newSubstr = newSubstr[0]; - } - pre = pre.replace(strategy.match, newSubstr); - this.$el.val(pre + post); - this.el.selectionStart = this.el.selectionEnd = pre.length; - } - }, - - // Private methods - // --------------- - - // Returns the caret's relative coordinates from textarea's left top corner. - // - // Browser native API does not provide the way to know the position of - // caret in pixels, so that here we use a kind of hack to accomplish - // the aim. First of all it puts a dummy div element and completely copies - // the textarea's style to the element, then it inserts the text and a - // span element into the textarea. - // Consequently, the span element's position is the thing what we want. - _getCaretRelativePosition: function () { - var dummyDiv = $('
    ').css(this._copyCss()) - .text(this.getTextFromHeadToCaret()); - var span = $('').text('.').appendTo(dummyDiv); - this.$el.before(dummyDiv); - var position = span.position(); - position.top += span.height() - this.$el.scrollTop(); - position.lineHeight = span.height(); - dummyDiv.remove(); - return position; - }, - - _copyCss: function () { - return $.extend({ - // Set 'scroll' if a scrollbar is being shown; otherwise 'auto'. - overflow: this.el.scrollHeight > this.el.offsetHeight ? 'scroll' : 'auto' - }, Textarea.DIV_PROPERTIES, this._getStyles()); - }, - - _getStyles: (function ($) { - var color = $('
    ').css(['color']).color; - if (typeof color !== 'undefined') { - return function () { - return this.$el.css(Textarea.COPY_PROPERTIES); - }; - } else { // jQuery < 1.8 - return function () { - var $el = this.$el; - var styles = {}; - $.each(Textarea.COPY_PROPERTIES, function (i, property) { - styles[property] = $el.css(property); - }); - return styles; - }; - } - })($), - - getTextFromHeadToCaret: function () { - return this.el.value.substring(0, this.el.selectionEnd); - } - }); - - $.fn.textcomplete.Textarea = Textarea; -}(jQuery); - -+function ($) { - 'use strict'; - - var sentinelChar = '吶'; - - function IETextarea(element, completer, option) { - this.initialize(element, completer, option); - $('' + sentinelChar + '').css({ - position: 'absolute', - top: -9999, - left: -9999 - }).insertBefore(element); - } - - $.extend(IETextarea.prototype, $.fn.textcomplete.Textarea.prototype, { - // Public methods - // -------------- - - select: function (value, strategy, e) { - var pre = this.getTextFromHeadToCaret(); - var post = this.el.value.substring(pre.length); - var newSubstr = strategy.replace(value, e); - if (typeof newSubstr !== 'undefined') { - if ($.isArray(newSubstr)) { - post = newSubstr[1] + post; - newSubstr = newSubstr[0]; - } - pre = pre.replace(strategy.match, newSubstr); - this.$el.val(pre + post); - this.el.focus(); - var range = this.el.createTextRange(); - range.collapse(true); - range.moveEnd('character', pre.length); - range.moveStart('character', pre.length); - range.select(); - } - }, - - getTextFromHeadToCaret: function () { - this.el.focus(); - var range = document.selection.createRange(); - range.moveStart('character', -this.el.value.length); - var arr = range.text.split(sentinelChar) - return arr.length === 1 ? arr[0] : arr[1]; - } - }); - - $.fn.textcomplete.IETextarea = IETextarea; -}(jQuery); - -// NOTE: TextComplete plugin has contenteditable support but it does not work -// fine especially on old IEs. -// Any pull requests are REALLY welcome. - -+function ($) { - 'use strict'; - - // ContentEditable adapter - // ======================= - // - // Adapter for contenteditable elements. - function ContentEditable (element, completer, option) { - this.initialize(element, completer, option); - } - - $.extend(ContentEditable.prototype, $.fn.textcomplete.Adapter.prototype, { - // Public methods - // -------------- - - // Update the content with the given value and strategy. - // When an dropdown item is selected, it is executed. - select: function (value, strategy, e) { - var pre = this.getTextFromHeadToCaret(); - var sel = window.getSelection() - var range = sel.getRangeAt(0); - var selection = range.cloneRange(); - selection.selectNodeContents(range.startContainer); - var content = selection.toString(); - var post = content.substring(range.startOffset); - var newSubstr = strategy.replace(value, e); - if (typeof newSubstr !== 'undefined') { - if ($.isArray(newSubstr)) { - post = newSubstr[1] + post; - newSubstr = newSubstr[0]; - } - pre = pre.replace(strategy.match, newSubstr); - range.selectNodeContents(range.startContainer); - range.deleteContents(); - var node = document.createTextNode(pre + post); - range.insertNode(node); - range.setStart(node, pre.length); - range.collapse(true); - sel.removeAllRanges(); - sel.addRange(range); - } - }, - - // Private methods - // --------------- - - // Returns the caret's relative position from the contenteditable's - // left top corner. - // - // Examples - // - // this._getCaretRelativePosition() - // //=> { top: 18, left: 200, lineHeight: 16 } - // - // Dropdown's position will be decided using the result. - _getCaretRelativePosition: function () { - var range = window.getSelection().getRangeAt(0).cloneRange(); - var node = document.createElement('span'); - range.insertNode(node); - range.selectNodeContents(node); - range.deleteContents(); - var $node = $(node); - var position = $node.offset(); - position.left -= this.$el.offset().left; - position.top += $node.height() - this.$el.offset().top; - position.lineHeight = $node.height(); - $node.remove(); - return position; - }, - - // Returns the string between the first character and the caret. - // Completer will be triggered with the result for start autocompleting. - // - // Example - // - // // Suppose the html is 'hello wor|ld' and | is the caret. - // this.getTextFromHeadToCaret() - // // => ' wor' // not 'hello wor' - getTextFromHeadToCaret: function () { - var range = window.getSelection().getRangeAt(0); - var selection = range.cloneRange(); - selection.selectNodeContents(range.startContainer); - return selection.toString().substring(0, range.startOffset); - } - }); - - $.fn.textcomplete.ContentEditable = ContentEditable; -}(jQuery); - -return jQuery; -})); diff --git a/package-lock.json b/package-lock.json index 820042d113..9e3816bd14 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4,6 +4,11 @@ "lockfileVersion": 1, "requires": true, "dependencies": { + "@types/jquery": { + "version": "2.0.56", + "resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-2.0.56.tgz", + "integrity": "sha512-tcNulMBr4fuMeBhwrRNQw3JaWg7vXP9bi64nKM5qYbaIN/oyo4n9O4TG5Thyn1BmhH159XvDxD4y3kqqpYS4sg==" + }, "abbrev": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz", @@ -708,6 +713,15 @@ "integrity": "sha1-8NZtA2cqglyxtzvbP+YjEMjlUrc=", "dev": true }, + "devbridge-autocomplete": { + "version": "1.4.9", + "resolved": "https://registry.npmjs.org/devbridge-autocomplete/-/devbridge-autocomplete-1.4.9.tgz", + "integrity": "sha512-3/5kzICNRnTiOxgIg2qjTU5MmqzW1CuOueuPFOlD8OhAPdHox28codHwGgedlnGKHPj3puZA85kaNrF2xGN1WA==", + "requires": { + "@types/jquery": "^2.0.32", + "jquery": ">=1.7" + } + }, "duplexer": { "version": "0.1.1", "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.1.tgz", @@ -1966,6 +1980,11 @@ "resolved": "https://registry.npmjs.org/jquery/-/jquery-2.2.4.tgz", "integrity": "sha1-LInWiJterFIqfuoywUUhVZxsvwI=" }, + "jquery-textcomplete": { + "version": "1.8.5", + "resolved": "https://registry.npmjs.org/jquery-textcomplete/-/jquery-textcomplete-1.8.5.tgz", + "integrity": "sha512-WctSUxFk7GF5Tx2gHeVKrpkQ9tsV7mibBJ0AYNwEx+Zx3ZoUQgU5grkBXY3SCqpq/owMAMEvksN96DBSWT4PSg==" + }, "js-yaml": { "version": "3.13.1", "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.13.1.tgz", diff --git a/package.json b/package.json index a3fec7d64d..12e6993fcf 100644 --- a/package.json +++ b/package.json @@ -32,9 +32,11 @@ "dependencies": { "backbone": "^1.3.3", "base-64": "^1.0.0", + "devbridge-autocomplete": "^1.4.9", "es6-promise": "^3.0.2", "handlebars": "^2.0.0", "jquery": "^2.1.4", + "jquery-textcomplete": "^1.8.5", "moment": "^2.24.0", "moment-timezone": "^0.5.33", "timepicker": "^1.11.15",