+(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
*
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') {
}
});
});
- completer.register($.fn.textcomplete.Strategy.parse(strategies));
+ completer.register($.fn.textcomplete.Strategy.parse(strategies, {
+ el: self,
+ $el: $this
+ }));
}
});
};
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) {
//
// 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();
},
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]; }
}
}
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();
//
// 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 };
});
}
});
+function ($) {
'use strict';
+ var $window = $(window);
+
var include = function (zippedData, datum) {
var i, elem;
var idProperty = datum.strategy.idProperty
});
});
+ 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
// =============
//
// 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.
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);
// 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;
}
});
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 (position) {
- this.$el.css(this._applyPlacement(position));
+ 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() {
+ 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') {
this.$el.html('');
this.data = [];
this._index = 0;
- this._$header = this._$footer = null;
+ this._$header = this._$footer = this._$noResultsMessage = null;
},
activate: function () {
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));
},
$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.
_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;
}
},
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 () {
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;
}
},
+ _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);
}
},
- _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});
+ }
+ },
+
+ _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.
});
$.fn.textcomplete.Dropdown = Dropdown;
+ $.extend($.fn.textcomplete, commands);
}(jQuery);
+function ($) {
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;
});
};
// Suppress searching if it returns true.
_skipSearch: function (clickEvent) {
switch (clickEvent.keyCode) {
+ case 13: // ENTER
case 40: // DOWN
case 38: // UP
return true;
// --------------
// 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;
},
// Private methods
// 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 () {
// 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);
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();
+ var node = document.createTextNode(pre + post);
+ range.insertNode(node);
+ range.setStart(node, pre.length);
+ 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
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;
},
$.fn.textcomplete.ContentEditable = ContentEditable;
}(jQuery);
+
+return jQuery;
+}));
projects / friendica.git / commitdiff