diff options
Diffstat (limited to 'library/jquery-textcomplete/jquery.textcomplete.js')
| -rw-r--r-- | library/jquery-textcomplete/jquery.textcomplete.js | 583 |
1 files changed, 440 insertions, 143 deletions
diff --git a/library/jquery-textcomplete/jquery.textcomplete.js b/library/jquery-textcomplete/jquery.textcomplete.js index 3df84f3b4..95e75149c 100644 --- a/library/jquery-textcomplete/jquery.textcomplete.js +++ b/library/jquery-textcomplete/jquery.textcomplete.js @@ -1,3 +1,16 @@ +(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 * @@ -17,13 +30,18 @@ if (typeof jQuery === 'undefined') { 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) { - completer = new $.fn.textcomplete.Completer(this, option || {}); + option || (option = {}); + option._oid = id++; // unique object id + completer = new $.fn.textcomplete.Completer(this, option); $this.data('textComplete', completer); } if (typeof strategies === 'string') { @@ -45,7 +63,10 @@ if (typeof jQuery === 'undefined') { } }); }); - completer.register($.fn.textcomplete.Strategy.parse(strategies)); + completer.register($.fn.textcomplete.Strategy.parse(strategies, { + el: self, + $el: $this + })); } }); }; @@ -115,6 +136,10 @@ if (typeof jQuery === 'undefined') { 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) { @@ -124,7 +149,7 @@ if (typeof jQuery === 'undefined') { this.views = []; this.option = $.extend({}, Completer._getDefaults(), option); - if (!this.$el.is('input[type=text]') && !this.$el.is('textarea') && !element.isContentEditable && element.contentEditable != 'true') { + if (!this.$el.is('input[type=text]') && !this.$el.is('input[type=search]') && !this.$el.is('textarea') && !element.isContentEditable && element.contentEditable != 'true') { throw new Error('textcomplete must be called on a Textarea or a ContentEditable.'); } @@ -171,7 +196,7 @@ if (typeof jQuery === 'undefined') { if (this.option.adapter) { Adapter = this.option.adapter; } else { - if (this.$el.is('textarea') || this.$el.is('input[type=text]')) { + if (this.$el.is('textarea') || this.$el.is('input[type=text]') || this.$el.is('input[type=search]')) { viewName = typeof element.selectionEnd === 'number' ? 'Textarea' : 'IETextarea'; } else { viewName = 'ContentEditable'; @@ -192,6 +217,12 @@ if (typeof jQuery === 'undefined') { this.$el = this.adapter = this.dropdown = null; }, + deactivate: function () { + if (this.dropdown) { + this.dropdown.deactivate(); + } + }, + // Invoke textcomplete. trigger: function (text, skipUnchangedTerm) { if (!this.dropdown) { this.initialize(); } @@ -200,7 +231,7 @@ if (typeof jQuery === 'undefined') { if (searchQuery.length) { var term = searchQuery[1]; // Ignore shift-key, ctrl-key and so on. - if (skipUnchangedTerm && this._term === term) { return; } + if (skipUnchangedTerm && this._term === term && term !== "") { return; } this._term = term; this._search.apply(this, searchQuery); } else { @@ -224,8 +255,10 @@ if (typeof jQuery === 'undefined') { // // value - The selected element of the array callbacked from search func. // strategy - The Strategy object. - select: function (value, strategy) { - this.adapter.select(value, strategy); + // 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(); }, @@ -248,8 +281,9 @@ if (typeof jQuery === 'undefined') { 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(strategy.match); + var match = text.match(matchRegexp); if (match) { return [strategy, match[strategy.index], match]; } } } @@ -262,14 +296,14 @@ if (typeof jQuery === 'undefined') { strategy.search(term, function (data, stillSearching) { if (!self.dropdown.shown) { self.dropdown.activate(); - self.dropdown.setPosition(self.adapter.getCaretPosition()); } if (self._clearAtNext) { // The first callback in the current lock. self.dropdown.clear(); self._clearAtNext = false; } - self.dropdown.render(self._zip(data, strategy)); + self.dropdown.setPosition(self.adapter.getCaretPosition()); + self.dropdown.render(self._zip(data, strategy, term)); if (!stillSearching) { // The last callback in the current lock. free(); @@ -284,9 +318,9 @@ if (typeof jQuery === 'undefined') { // // this._zip(['a', 'b'], 's'); // //=> [{ value: 'a', strategy: 's' }, { value: 'b', strategy: 's' }] - _zip: function (data, strategy) { + _zip: function (data, strategy, term) { return $.map(data, function (value) { - return { value: value, strategy: strategy }; + return { value: value, strategy: strategy, term: term }; }); } }); @@ -297,6 +331,8 @@ if (typeof jQuery === 'undefined') { +function ($) { 'use strict'; + var $window = $(window); + var include = function (zippedData, datum) { var i, elem; var idProperty = datum.strategy.idProperty @@ -320,6 +356,16 @@ if (typeof jQuery === 'undefined') { }); }); + 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 // ============= @@ -327,7 +373,7 @@ if (typeof jQuery === 'undefined') { // // element - Textarea or contenteditable element. function Dropdown(element, completer, option) { - this.$el = Dropdown.findOrCreateElement(option); + this.$el = Dropdown.createElement(option); this.completer = completer; this.id = completer.id + 'dropdown'; this._data = []; // zipped data. @@ -338,7 +384,7 @@ if (typeof jQuery === 'undefined') { if (option.listPosition) { this.setPosition = option.listPosition; } if (option.height) { this.$el.height(option.height); } var self = this; - $.each(['maxCount', 'placement', 'footer', 'header', 'className'], function (_i, name) { + $.each(['maxCount', 'placement', 'footer', 'header', 'noResultsMessage', 'className'], function (_i, name) { if (option[name] != null) { self[name] = option[name]; } }); this._bindEvents(element); @@ -349,18 +395,19 @@ if (typeof jQuery === 'undefined') { // Class methods // ------------- - findOrCreateElement: function (option) { + createElement: function (option) { var $parent = option.appendTo; if (!($parent instanceof $)) { $parent = $($parent); } - var $el = $parent.children('.dropdown-menu') - if (!$el.length) { - $el = $('<ul class="dropdown-menu"></ul>').css({ + var $el = $('<ul></ul>') + .addClass('dropdown-menu textcomplete-dropdown') + .attr('id', 'textcomplete-dropdown-' + option._oid) + .css({ display: 'none', left: 0, position: 'absolute', zIndex: option.zIndex - }).appendTo($parent); - } + }) + .appendTo($parent); return $el; } }); @@ -391,6 +438,7 @@ if (typeof jQuery === 'undefined') { this.$el.off('.' + this.id); this.$inputEl.off('.' + this.id); this.clear(); + this.$el.remove(); this.$el = this.$inputEl = this.completer = null; delete dropdownViews[this.id] }, @@ -399,34 +447,45 @@ if (typeof jQuery === 'undefined') { var contentsHtml = this._buildContents(zippedData); var unzippedData = $.map(this.data, function (d) { return d.value; }); if (this.data.length) { + var strategy = zippedData[0].strategy; + if (strategy.id) { + this.$el.attr('data-strategy', strategy.id); + } else { + this.$el.removeAttr('data-strategy'); + } this._renderHeader(unzippedData); this._renderFooter(unzippedData); if (contentsHtml) { this._renderContents(contentsHtml); + this._fitToBottom(); + this._fitToRight(); this._activateIndexedItem(); } this._setScroll(); + } else if (this.noResultsMessage) { + this._renderNoResultsMessage(unzippedData); } else if (this.shown) { this.deactivate(); } }, - setPosition: function (position) { - this.$el.css(this._applyPlacement(position)); - + setPosition: function (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() { + 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') { + pos.top -= $window.scrollTop(); + pos.left -= $window.scrollLeft(); position = 'fixed'; return false; } }); + this.$el.css(this._applyPlacement(pos)); this.$el.css({ position: position }); // Update positioning return this; @@ -436,7 +495,7 @@ if (typeof jQuery === 'undefined') { this.$el.html(''); this.data = []; this._index = 0; - this._$header = this._$footer = null; + this._$header = this._$footer = this._$noResultsMessage = null; }, activate: function () { @@ -481,19 +540,25 @@ if (typeof jQuery === 'undefined') { 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('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)); }, @@ -506,11 +571,16 @@ if (typeof jQuery === 'undefined') { $el = $el.closest('.textcomplete-item'); } var datum = this.data[parseInt($el.data('index'), 10)]; - this.completer.select(datum.value, datum.strategy); + 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(); }, 0); + setTimeout(function () { + self.deactivate(); + if (e.type === 'touchstart') { + self.$inputEl.focus(); + } + }, 0); }, // Activate hovered item. @@ -526,21 +596,58 @@ if (typeof jQuery === 'undefined') { _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)) { - e.preventDefault(); - this._up(); + return commands.KEY_UP; } else if (this.isDown(e)) { - e.preventDefault(); - this._down(); + return commands.KEY_DOWN; } else if (this.isEnter(e)) { - e.preventDefault(); - this._enter(); + return commands.KEY_ENTER; } else if (this.isPageup(e)) { - e.preventDefault(); - this._pageup(); + return commands.KEY_PAGEUP; } else if (this.isPagedown(e)) { - e.preventDefault(); - this._pagedown(); + return commands.KEY_PAGEDOWN; + } else if (this.isEscape(e)) { + return commands.KEY_ESCAPE; } }, @@ -564,10 +671,10 @@ if (typeof jQuery === 'undefined') { this._setScroll(); }, - _enter: function () { + _enter: function (e) { var datum = this.data[parseInt(this._getActiveElement().data('index'), 10)]; - this.completer.select(datum.value, datum.strategy); - this._setScroll(); + this.completer.select(datum.value, datum.strategy, e); + this.deactivate(); }, _pageup: function () { @@ -630,7 +737,7 @@ if (typeof jQuery === 'undefined') { index = this.data.length; this.data.push(datum); html += '<li class="textcomplete-item" data-index="' + index + '"><a>'; - html += datum.strategy.template(datum.value); + html += datum.strategy.template(datum.value, datum.term); html += '</a></li>'; } return html; @@ -656,6 +763,16 @@ if (typeof jQuery === 'undefined') { } }, + _renderNoResultsMessage: function (unzippedData) { + if (this.noResultsMessage) { + if (!this._$noResultsMessage) { + this._$noResultsMessage = $('<li class="textcomplete-no-results-message"></li>').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); @@ -664,7 +781,32 @@ if (typeof jQuery === 'undefined') { } }, - _applyPlacement: function (position) { + _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}); + } + }, + + _fitToRight: function() { + // We don't know how wide our content is until the browser positions us, and at that point it clips us + // to the document width so we don't know if we would have overrun it. As a heuristic to avoid that clipping + // (which makes our elements wrap onto the next line and corrupt the next item), if we're close to the right + // edge, move left. We don't know how far to move left, so just keep nudging a bit. + var tolerance = 30; // pixels. Make wider than vertical scrollbar because we might not be able to use that space. + var lastOffset = this.$el.offset().left, offset; + var width = this.$el.width(); + var maxLeft = $window.width() - tolerance; + while (lastOffset + width > maxLeft) { + this.$el.offset({left: lastOffset - tolerance}); + offset = this.$el.offset().left; + if (offset >= lastOffset) { break; } + lastOffset = offset; + } + }, + + _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. @@ -688,6 +830,7 @@ if (typeof jQuery === 'undefined') { }); $.fn.textcomplete.Dropdown = Dropdown; + $.extend($.fn.textcomplete, commands); }(jQuery); +function ($) { @@ -713,9 +856,12 @@ if (typeof jQuery === 'undefined') { if (this.cache) { this.search = memoize(this.search); } } - Strategy.parse = function (optionsArray) { - return $.map(optionsArray, function (options) { - return new Strategy(options); + 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; }); }; @@ -729,6 +875,7 @@ if (typeof jQuery === 'undefined') { search: null, // Optional + id: null, cache: false, context: function () { return true; }, index: 2, @@ -818,11 +965,19 @@ if (typeof jQuery === 'undefined') { }, // 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(); + + // Calculate the left top corner of `this.option.appendTo` element. + var $parent = this.option.appendTo; + if ($parent) { + if (!($parent instanceof $)) { $parent = $($parent); } + var parentOffset = $parent.offsetParent().offset(); + offset.top -= parentOffset.top; + offset.left -= parentOffset.left; + } + position.top += offset.top; position.left += offset.left; return position; @@ -848,6 +1003,8 @@ if (typeof jQuery === 'undefined') { // Suppress searching if it returns true. _skipSearch: function (clickEvent) { switch (clickEvent.keyCode) { + case 9: // TAB + case 13: // ENTER case 40: // DOWN case 38: // UP return true; @@ -874,89 +1031,58 @@ if (typeof jQuery === 'undefined') { 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) { + select: function (value, strategy, e) { var pre = this.getTextFromHeadToCaret(); var post = this.el.value.substring(this.el.selectionEnd); - var newSubstr = strategy.replace(value); - if ($.isArray(newSubstr)) { - post = newSubstr[1] + post; - newSubstr = newSubstr[0]; + 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; } - pre = pre.replace(strategy.match, newSubstr); - this.$el.val(pre + post); - this.el.selectionStart = this.el.selectionEnd = pre.length; + }, + + getTextFromHeadToCaret: function () { + return this.el.value.substring(0, this.el.selectionEnd); }, // 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 = $('<div></div>').css(this._copyCss()) - .text(this.getTextFromHeadToCaret()); - var span = $('<span></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()); + var p = $.fn.textcomplete.getCaretCoordinates(this.el, this.el.selectionStart); + return { + top: p.top + this._calculateLineHeight() - this.$el.scrollTop(), + left: p.left - this.$el.scrollLeft() + }; }, - _getStyles: (function ($) { - var color = $('<div></div>').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; - }; + _calculateLineHeight: function () { + var lineHeight = parseInt(this.$el.css('line-height'), 10); + if (isNaN(lineHeight)) { + // http://stackoverflow.com/a/4515470/1297336 + var parentNode = this.el.parentNode; + var temp = document.createElement(this.el.nodeName); + var style = this.el.style; + temp.setAttribute( + 'style', + 'margin:0px;padding:0px;font-family:' + style.fontFamily + ';font-size:' + style.fontSize + ); + temp.innerHTML = 'test'; + parentNode.appendChild(temp); + lineHeight = temp.clientHeight; + parentNode.removeChild(temp); } - })($), - - getTextFromHeadToCaret: function () { - return this.el.value.substring(0, this.el.selectionEnd); + return lineHeight; } }); @@ -981,22 +1107,24 @@ if (typeof jQuery === 'undefined') { // Public methods // -------------- - select: function (value, strategy) { + select: function (value, strategy, e) { var pre = this.getTextFromHeadToCaret(); var post = this.el.value.substring(pre.length); - var newSubstr = strategy.replace(value); - if ($.isArray(newSubstr)) { - post = newSubstr[1] + post; - newSubstr = newSubstr[0]; + 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(); } - 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 () { @@ -1032,7 +1160,7 @@ if (typeof jQuery === 'undefined') { // Update the content with the given value and strategy. // When an dropdown item is selected, it is executed. - select: function (value, strategy) { + select: function (value, strategy, e) { var pre = this.getTextFromHeadToCaret(); var sel = window.getSelection() var range = sel.getRangeAt(0); @@ -1040,20 +1168,41 @@ if (typeof jQuery === 'undefined') { selection.selectNodeContents(range.startContainer); var content = selection.toString(); var post = content.substring(range.startOffset); - var newSubstr = strategy.replace(value); - if ($.isArray(newSubstr)) { - post = newSubstr[1] + post; - newSubstr = newSubstr[0]; + 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(); + + // create temporary elements + var preWrapper = document.createElement("div"); + preWrapper.innerHTML = pre; + var postWrapper = document.createElement("div"); + postWrapper.innerHTML = post; + + // create the fragment thats inserted + var fragment = document.createDocumentFragment(); + var childNode; + var lastOfPre; + while (childNode = preWrapper.firstChild) { + lastOfPre = fragment.appendChild(childNode); + } + while (childNode = postWrapper.firstChild) { + fragment.appendChild(childNode); + } + + // insert the fragment & jump behind the last node in "pre" + range.insertNode(fragment); + range.setStartAfter(lastOfPre); + + range.collapse(true); + sel.removeAllRanges(); + sel.addRange(range); } - 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 @@ -1079,8 +1228,7 @@ if (typeof jQuery === 'undefined') { position.left -= this.$el.offset().left; position.top += $node.height() - this.$el.offset().top; position.lineHeight = $node.height(); - var dir = this.$el.attr('dir') || this.$el.css('direction'); - if (dir === 'rtl') { position.left -= this.listView.$el.width(); } + $node.remove(); return position; }, @@ -1102,3 +1250,152 @@ if (typeof jQuery === 'undefined') { $.fn.textcomplete.ContentEditable = ContentEditable; }(jQuery); + +// The MIT License (MIT) +// +// Copyright (c) 2015 Jonathan Ong me@jongleberry.com +// +// Permission is hereby granted, free of charge, to any person obtaining a copy of this software and +// associated documentation files (the "Software"), to deal in the Software without restriction, +// including without limitation the rights to use, copy, modify, merge, publish, distribute, +// sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is +// furnished to do so, subject to the following conditions: +// +// The above copyright notice and this permission notice shall be included in all copies or +// substantial portions of the Software. +// +// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT +// NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND +// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, +// DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. +// +// https://github.com/component/textarea-caret-position + +(function ($) { + +// The properties that we copy into a mirrored div. +// Note that some browsers, such as Firefox, +// do not concatenate properties, i.e. padding-top, bottom etc. -> padding, +// so we have to do every single property specifically. +var properties = [ + 'direction', // RTL support + 'boxSizing', + 'width', // on Chrome and IE, exclude the scrollbar, so the mirror div wraps exactly as the textarea does + 'height', + 'overflowX', + 'overflowY', // copy the scrollbar for IE + + 'borderTopWidth', + 'borderRightWidth', + 'borderBottomWidth', + 'borderLeftWidth', + 'borderStyle', + + 'paddingTop', + 'paddingRight', + 'paddingBottom', + 'paddingLeft', + + // https://developer.mozilla.org/en-US/docs/Web/CSS/font + 'fontStyle', + 'fontVariant', + 'fontWeight', + 'fontStretch', + 'fontSize', + 'fontSizeAdjust', + 'lineHeight', + 'fontFamily', + + 'textAlign', + 'textTransform', + 'textIndent', + 'textDecoration', // might not make a difference, but better be safe + + 'letterSpacing', + 'wordSpacing', + + 'tabSize', + 'MozTabSize' + +]; + +var isBrowser = (typeof window !== 'undefined'); +var isFirefox = (isBrowser && window.mozInnerScreenX != null); + +function getCaretCoordinates(element, position, options) { + if(!isBrowser) { + throw new Error('textarea-caret-position#getCaretCoordinates should only be called in a browser'); + } + + var debug = options && options.debug || false; + if (debug) { + var el = document.querySelector('#input-textarea-caret-position-mirror-div'); + if ( el ) { el.parentNode.removeChild(el); } + } + + // mirrored div + var div = document.createElement('div'); + div.id = 'input-textarea-caret-position-mirror-div'; + document.body.appendChild(div); + + var style = div.style; + var computed = window.getComputedStyle? getComputedStyle(element) : element.currentStyle; // currentStyle for IE < 9 + + // default textarea styles + style.whiteSpace = 'pre-wrap'; + if (element.nodeName !== 'INPUT') + style.wordWrap = 'break-word'; // only for textarea-s + + // position off-screen + style.position = 'absolute'; // required to return coordinates properly + if (!debug) + style.visibility = 'hidden'; // not 'display: none' because we want rendering + + // transfer the element's properties to the div + properties.forEach(function (prop) { + style[prop] = computed[prop]; + }); + + if (isFirefox) { + // Firefox lies about the overflow property for textareas: https://bugzilla.mozilla.org/show_bug.cgi?id=984275 + if (element.scrollHeight > parseInt(computed.height)) + style.overflowY = 'scroll'; + } else { + style.overflow = 'hidden'; // for Chrome to not render a scrollbar; IE keeps overflowY = 'scroll' + } + + div.textContent = element.value.substring(0, position); + // the second special handling for input type="text" vs textarea: spaces need to be replaced with non-breaking spaces - http://stackoverflow.com/a/13402035/1269037 + if (element.nodeName === 'INPUT') + div.textContent = div.textContent.replace(/\s/g, '\u00a0'); + + var span = document.createElement('span'); + // Wrapping must be replicated *exactly*, including when a long word gets + // onto the next line, with whitespace at the end of the line before (#7). + // The *only* reliable way to do that is to copy the *entire* rest of the + // textarea's content into the <span> created at the caret position. + // for inputs, just '.' would be enough, but why bother? + span.textContent = element.value.substring(position) || '.'; // || because a completely empty faux span doesn't render at all + div.appendChild(span); + + var coordinates = { + top: span.offsetTop + parseInt(computed['borderTopWidth']), + left: span.offsetLeft + parseInt(computed['borderLeftWidth']) + }; + + if (debug) { + span.style.backgroundColor = '#aaa'; + } else { + document.body.removeChild(div); + } + + return coordinates; +} + +$.fn.textcomplete.getCaretCoordinates = getCaretCoordinates; + +}(jQuery)); + +return jQuery; +})); |