update jquery.textcomplete to version 1.3.4 and add minified version
This commit is contained in:
Mario Vavti
parent
7e30c1dd82
commit
1e27038b73
@ -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;
|
||||
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()
|
||||
};
|
||||
},
|
||||
|
||||
_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 = $('<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;
|
||||
}));
|
||||
|
||||
3
library/jquery-textcomplete/jquery.textcomplete.min.js
vendored
Normal file
3
library/jquery-textcomplete/jquery.textcomplete.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@ -21,7 +21,7 @@ head_add_js('spin.js');
|
||||
head_add_js('jquery.spin.js');
|
||||
head_add_js('jquery.textinputs.js');
|
||||
head_add_js('autocomplete.js');
|
||||
head_add_js('library/jquery-textcomplete/jquery.textcomplete.js');
|
||||
head_add_js('library/jquery-textcomplete/jquery.textcomplete.min.js');
|
||||
//head_add_js('library/colorbox/jquery.colorbox.js');
|
||||
head_add_js('library/jquery.timeago.js');
|
||||
head_add_js('library/readmore.js/readmore.js');
|
||||
|
||||
Reference in New Issue
Block a user