friendica
/
friendica
mirror of https://github.com/friendica/friendica
6
0
Fork 1
Code Issues Packages Projects Releases 1 Wiki Activity

rework autocomplete: update query-textcomplete

This commit is contained in:
rabuzarus 2016-01-30 16:42:46 +01:00 committed by Roland Haeder
parent 586b251539
commit 1a7ec34e71
No known key found for this signature in database
GPG Key ID: B72F8185C6C7BD78
1 changed files with 202 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

281
library/jquery-textcomplete/jquery.textcomplete.js
View File

@ -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 * jQuery.textcomplete
* *
@ -17,13 +30,18 @@ if (typeof jQuery === 'undefined') {
if (console.warn) { console.warn(message); } if (console.warn) { console.warn(message); }
}; };
var id = 1;
$.fn.textcomplete = function (strategies, option) { $.fn.textcomplete = function (strategies, option) {
var args = Array.prototype.slice.call(arguments); var args = Array.prototype.slice.call(arguments);
return this.each(function () { return this.each(function () {
var self = this;
var $this = $(this); var $this = $(this);
var completer = $this.data('textComplete'); var completer = $this.data('textComplete');
if (!completer) { 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); $this.data('textComplete', completer);
} }
if (typeof strategies === 'string') { 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]'; return Object.prototype.toString.call(obj) === '[object String]';
}; };
var isFunction = function (obj) {
return Object.prototype.toString.call(obj) === '[object Function]';
};
var uniqueId = 0; var uniqueId = 0;
function Completer(element, option) { function Completer(element, option) {
@ -224,8 +249,10 @@ if (typeof jQuery === 'undefined') {
// //
// value - The selected element of the array callbacked from search func. // value - The selected element of the array callbacked from search func.
// strategy - The Strategy object. // strategy - The Strategy object.
select: function (value, strategy) { // e - Click or keydown event object.
this.adapter.select(value, strategy); select: function (value, strategy, e) {
this._term = null;
this.adapter.select(value, strategy, e);
this.fire('change').fire('textComplete:select', value, strategy); this.fire('change').fire('textComplete:select', value, strategy);
this.adapter.focus(); this.adapter.focus();
}, },
@ -248,8 +275,9 @@ if (typeof jQuery === 'undefined') {
var strategy = this.strategies[i]; var strategy = this.strategies[i];
var context = strategy.context(text); var context = strategy.context(text);
if (context || context === '') { if (context || context === '') {
var matchRegexp = isFunction(strategy.match) ? strategy.match(text) : strategy.match;
if (isString(context)) { text = context; } if (isString(context)) { text = context; }
var match = text.match(strategy.match); var match = text.match(matchRegexp);
if (match) { return [strategy, match[strategy.index], match]; } if (match) { return [strategy, match[strategy.index], match]; }
} }
} }
@ -262,14 +290,14 @@ if (typeof jQuery === 'undefined') {
strategy.search(term, function (data, stillSearching) { strategy.search(term, function (data, stillSearching) {
if (!self.dropdown.shown) { if (!self.dropdown.shown) {
self.dropdown.activate(); self.dropdown.activate();
self.dropdown.setPosition(self.adapter.getCaretPosition());
} }
if (self._clearAtNext) { if (self._clearAtNext) {
// The first callback in the current lock. // The first callback in the current lock.
self.dropdown.clear(); self.dropdown.clear();
self._clearAtNext = false; 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) { if (!stillSearching) {
// The last callback in the current lock. // The last callback in the current lock.
free(); free();
@ -284,9 +312,9 @@ if (typeof jQuery === 'undefined') {
// //
// this._zip(['a', 'b'], 's'); // this._zip(['a', 'b'], 's');
// //=> [{ value: 'a', strategy: 's' }, { value: 'b', strategy: 's' }] // //=> [{ value: 'a', strategy: 's' }, { value: 'b', strategy: 's' }]
_zip: function (data, strategy) { _zip: function (data, strategy, term) {
return $.map(data, function (value) { return $.map(data, function (value) {
return { value: value, strategy: strategy }; return { value: value, strategy: strategy, term: term };
}); });
} }
}); });
@ -297,6 +325,8 @@ if (typeof jQuery === 'undefined') {
+function ($) { +function ($) {
'use strict'; 'use strict';
var $window = $(window);
var include = function (zippedData, datum) { var include = function (zippedData, datum) {
var i, elem; var i, elem;
var idProperty = datum.strategy.idProperty var idProperty = datum.strategy.idProperty
@ -320,6 +350,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 // Dropdown view
// ============= // =============
@ -327,7 +367,7 @@ if (typeof jQuery === 'undefined') {
// //
// element - Textarea or contenteditable element. // element - Textarea or contenteditable element.
function Dropdown(element, completer, option) { function Dropdown(element, completer, option) {
this.$el = Dropdown.findOrCreateElement(option); this.$el = Dropdown.createElement(option);
this.completer = completer; this.completer = completer;
this.id = completer.id + 'dropdown'; this.id = completer.id + 'dropdown';
this._data = []; // zipped data. this._data = []; // zipped data.
@ -338,7 +378,7 @@ if (typeof jQuery === 'undefined') {
if (option.listPosition) { this.setPosition = option.listPosition; } if (option.listPosition) { this.setPosition = option.listPosition; }
if (option.height) { this.$el.height(option.height); } if (option.height) { this.$el.height(option.height); }
var self = this; 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]; } if (option[name] != null) { self[name] = option[name]; }
}); });
this._bindEvents(element); this._bindEvents(element);
@ -349,18 +389,19 @@ if (typeof jQuery === 'undefined') {
// Class methods // Class methods
// ------------- // -------------
findOrCreateElement: function (option) { createElement: function (option) {
var $parent = option.appendTo; var $parent = option.appendTo;
if (!($parent instanceof $)) { $parent = $($parent); } if (!($parent instanceof $)) { $parent = $($parent); }
var $el = $parent.children('.dropdown-menu') var $el = $('<ul></ul>')
if (!$el.length) { .addClass('dropdown-menu textcomplete-dropdown')
$el = $('<ul class="dropdown-menu"></ul>').css({ .attr('id', 'textcomplete-dropdown-' + option._oid)
.css({
display: 'none', display: 'none',
left: 0, left: 0,
position: 'absolute', position: 'absolute',
zIndex: option.zIndex zIndex: option.zIndex
}).appendTo($parent); })
} .appendTo($parent);
return $el; return $el;
} }
}); });
@ -403,23 +444,26 @@ if (typeof jQuery === 'undefined') {
this._renderFooter(unzippedData); this._renderFooter(unzippedData);
if (contentsHtml) { if (contentsHtml) {
this._renderContents(contentsHtml); this._renderContents(contentsHtml);
this._fitToBottom();
this._activateIndexedItem(); this._activateIndexedItem();
} }
this._setScroll(); this._setScroll();
} else if (this.noResultsMessage) {
this._renderNoResultsMessage(unzippedData);
} else if (this.shown) { } else if (this.shown) {
this.deactivate(); this.deactivate();
} }
}, },
setPosition: function (position) { setPosition: function (pos) {
this.$el.css(this._applyPlacement(position)); this.$el.css(this._applyPlacement(pos));
// Make the dropdown fixed if the input is also fixed // 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 // 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 // Because the same dropdown is reused behind the scenes, we need to recheck every time the dropdown is showed
var position = 'absolute'; var position = 'absolute';
// Check if input or one of its parents has positioning we need to care about // 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 if($(this).css('position') === 'absolute') // The element has absolute positioning, so it's all OK
return false; return false;
if($(this).css('position') === 'fixed') { if($(this).css('position') === 'fixed') {
@ -436,7 +480,7 @@ if (typeof jQuery === 'undefined') {
this.$el.html(''); this.$el.html('');
this.data = []; this.data = [];
this._index = 0; this._index = 0;
this._$header = this._$footer = null; this._$header = this._$footer = this._$noResultsMessage = null;
}, },
activate: function () { activate: function () {
@ -481,19 +525,25 @@ if (typeof jQuery === 'undefined') {
return e.keyCode === 34; // PAGEDOWN return e.keyCode === 34; // PAGEDOWN
}, },
isEscape: function (e) {
return e.keyCode === 27; // ESCAPE
},
// Private properties // Private properties
// ------------------ // ------------------
_data: null, // Currently shown zipped data. _data: null, // Currently shown zipped data.
_index: null, _index: null,
_$header: null, _$header: null,
_$noResultsMessage: null,
_$footer: null, _$footer: null,
// Private methods // Private methods
// --------------- // ---------------
_bindEvents: function () { _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.$el.on('mouseover.' + this.id, '.textcomplete-item', $.proxy(this._onMouseover, this));
this.$inputEl.on('keydown.' + this.id, $.proxy(this._onKeydown, this)); this.$inputEl.on('keydown.' + this.id, $.proxy(this._onKeydown, this));
}, },
@ -506,11 +556,16 @@ if (typeof jQuery === 'undefined') {
$el = $el.closest('.textcomplete-item'); $el = $el.closest('.textcomplete-item');
} }
var datum = this.data[parseInt($el.data('index'), 10)]; 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; var self = this;
// Deactive at next tick to allow other event handlers to know whether // Deactive at next tick to allow other event handlers to know whether
// the dropdown has been shown or not. // 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. // Activate hovered item.
@ -526,21 +581,58 @@ if (typeof jQuery === 'undefined') {
_onKeydown: function (e) { _onKeydown: function (e) {
if (!this.shown) { return; } 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)) { if (this.isUp(e)) {
e.preventDefault(); return commands.KEY_UP;
this._up();
} else if (this.isDown(e)) { } else if (this.isDown(e)) {
e.preventDefault(); return commands.KEY_DOWN;
this._down();
} else if (this.isEnter(e)) { } else if (this.isEnter(e)) {
e.preventDefault(); return commands.KEY_ENTER;
this._enter();
} else if (this.isPageup(e)) { } else if (this.isPageup(e)) {
e.preventDefault(); return commands.KEY_PAGEUP;
this._pageup();
} else if (this.isPagedown(e)) { } else if (this.isPagedown(e)) {
e.preventDefault(); return commands.KEY_PAGEDOWN;
this._pagedown(); } else if (this.isEscape(e)) {
return commands.KEY_ESCAPE;
} }
}, },
@ -564,10 +656,10 @@ if (typeof jQuery === 'undefined') {
this._setScroll(); this._setScroll();
}, },
_enter: function () { _enter: function (e) {
var datum = this.data[parseInt(this._getActiveElement().data('index'), 10)]; var datum = this.data[parseInt(this._getActiveElement().data('index'), 10)];
this.completer.select(datum.value, datum.strategy); this.completer.select(datum.value, datum.strategy, e);
this._setScroll(); this.deactivate();
}, },
_pageup: function () { _pageup: function () {
@ -630,7 +722,7 @@ if (typeof jQuery === 'undefined') {
index = this.data.length; index = this.data.length;
this.data.push(datum); this.data.push(datum);
html += '<li class="textcomplete-item" data-index="' + index + '"><a>'; 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>'; html += '</a></li>';
} }
return html; return html;
@ -656,6 +748,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) { _renderContents: function (html) {
if (this._$footer) { if (this._$footer) {
this._$footer.before(html); this._$footer.before(html);
@ -664,7 +766,15 @@ 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});
}
},
_applyPlacement: function (position) {
// If the 'placement' option set to 'top', move the position above the element. // If the 'placement' option set to 'top', move the position above the element.
if (this.placement.indexOf('top') !== -1) { if (this.placement.indexOf('top') !== -1) {
// Overwrite the position object to set the 'bottom' property instead of the top. // Overwrite the position object to set the 'bottom' property instead of the top.
@ -688,6 +798,7 @@ if (typeof jQuery === 'undefined') {
}); });
$.fn.textcomplete.Dropdown = Dropdown; $.fn.textcomplete.Dropdown = Dropdown;
$.extend($.fn.textcomplete, commands);
}(jQuery); }(jQuery);
+function ($) { +function ($) {
@ -713,9 +824,12 @@ if (typeof jQuery === 'undefined') {
if (this.cache) { this.search = memoize(this.search); } if (this.cache) { this.search = memoize(this.search); }
} }
Strategy.parse = function (optionsArray) { Strategy.parse = function (strategiesArray, params) {
return $.map(optionsArray, function (options) { return $.map(strategiesArray, function (strategy) {
return new Strategy(options); var strategyObj = new Strategy(strategy);
strategyObj.el = params.el;
strategyObj.$el = params.$el;
return strategyObj;
}); });
}; };
@ -848,6 +962,7 @@ if (typeof jQuery === 'undefined') {
// Suppress searching if it returns true. // Suppress searching if it returns true.
_skipSearch: function (clickEvent) { _skipSearch: function (clickEvent) {
switch (clickEvent.keyCode) { switch (clickEvent.keyCode) {
case 13: // ENTER
case 40: // DOWN case 40: // DOWN
case 38: // UP case 38: // UP
return true; return true;
@ -894,17 +1009,19 @@ if (typeof jQuery === 'undefined') {
// -------------- // --------------
// Update the textarea with the given value and strategy. // Update the textarea with the given value and strategy.
select: function (value, strategy) { select: function (value, strategy, e) {
var pre = this.getTextFromHeadToCaret(); var pre = this.getTextFromHeadToCaret();
var post = this.el.value.substring(this.el.selectionEnd); var post = this.el.value.substring(this.el.selectionEnd);
var newSubstr = strategy.replace(value); var newSubstr = strategy.replace(value, e);
if ($.isArray(newSubstr)) { if (typeof newSubstr !== 'undefined') {
post = newSubstr[1] + post; if ($.isArray(newSubstr)) {
newSubstr = newSubstr[0]; 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 // Private methods
@ -981,22 +1098,24 @@ if (typeof jQuery === 'undefined') {
// Public methods // Public methods
// -------------- // --------------
select: function (value, strategy) { select: function (value, strategy, e) {
var pre = this.getTextFromHeadToCaret(); var pre = this.getTextFromHeadToCaret();
var post = this.el.value.substring(pre.length); var post = this.el.value.substring(pre.length);
var newSubstr = strategy.replace(value); var newSubstr = strategy.replace(value, e);
if ($.isArray(newSubstr)) { if (typeof newSubstr !== 'undefined') {
post = newSubstr[1] + post; if ($.isArray(newSubstr)) {
newSubstr = newSubstr[0]; 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 () { getTextFromHeadToCaret: function () {
@ -1032,7 +1151,7 @@ if (typeof jQuery === 'undefined') {
// Update the content with the given value and strategy. // Update the content with the given value and strategy.
// When an dropdown item is selected, it is executed. // When an dropdown item is selected, it is executed.
select: function (value, strategy) { select: function (value, strategy, e) {
var pre = this.getTextFromHeadToCaret(); var pre = this.getTextFromHeadToCaret();
var sel = window.getSelection() var sel = window.getSelection()
var range = sel.getRangeAt(0); var range = sel.getRangeAt(0);
@ -1040,20 +1159,22 @@ if (typeof jQuery === 'undefined') {
selection.selectNodeContents(range.startContainer); selection.selectNodeContents(range.startContainer);
var content = selection.toString(); var content = selection.toString();
var post = content.substring(range.startOffset); var post = content.substring(range.startOffset);
var newSubstr = strategy.replace(value); var newSubstr = strategy.replace(value, e);
if ($.isArray(newSubstr)) { if (typeof newSubstr !== 'undefined') {
post = newSubstr[1] + post; if ($.isArray(newSubstr)) {
newSubstr = newSubstr[0]; 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 // Private methods
@ -1079,8 +1200,7 @@ if (typeof jQuery === 'undefined') {
position.left -= this.$el.offset().left; position.left -= this.$el.offset().left;
position.top += $node.height() - this.$el.offset().top; position.top += $node.height() - this.$el.offset().top;
position.lineHeight = $node.height(); position.lineHeight = $node.height();
var dir = this.$el.attr('dir') || this.$el.css('direction'); $node.remove();
if (dir === 'rtl') { position.left -= this.listView.$el.width(); }
return position; return position;
}, },
@ -1102,3 +1222,6 @@ if (typeof jQuery === 'undefined') {
$.fn.textcomplete.ContentEditable = ContentEditable; $.fn.textcomplete.ContentEditable = ContentEditable;
}(jQuery); }(jQuery);
return jQuery;
}));