Knah-Tsaeb/MyShaarli
Knah-Tsaeb/MyShaarli
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Upgrade awesomplete + fix multiple autocompletion fields

Browse source
This commit is contained in:
ArthurHoaro 2017-01-14 16:13:32 +01:00
parent 246d72e143
commit 430ff07102
3 changed files with 135 additions and 70 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
inc/awesomplete-multiple-tags.js
View file

@ -1,5 +1,7 @@
var awp = Awesomplete.$; var awp = Awesomplete.$;
awesomplete = new Awesomplete(awp('input[data-multiple]'), { var autocompleteFields = document.querySelectorAll('input[data-multiple]');
[].forEach.call(autocompleteFields, function(autocompleteField) {
awesomplete = new Awesomplete(awp(autocompleteField), {
filter: function (text, input) { filter: function (text, input) {
return Awesomplete.FILTER_CONTAINS(text, input.match(/[^ ]*$/)[0]); return Awesomplete.FILTER_CONTAINS(text, input.match(/[^ ]*$/)[0]);
}, },
@ -8,6 +10,7 @@ awesomplete = new Awesomplete(awp('input[data-multiple]'), {
this.input.value = before + text + " "; this.input.value = before + text + " ";
}, },
minChars: 1 minChars: 1
})
}); });
/** /**

180
inc/awesomplete.js
View file

@ -12,26 +12,23 @@
// Setup // Setup
this.isOpened = false;
this.input = $(input); this.input = $(input);
this.input.setAttribute("autocomplete", "off");
this.input.setAttribute("aria-autocomplete", "list"); this.input.setAttribute("aria-autocomplete", "list");
o = o || {}; o = o || {};
configure.call(this, { configure(this, {
minChars: 2, minChars: 2,
maxItems: 10, maxItems: 10,
autoFirst: false, autoFirst: false,
data: _.DATA,
filter: _.FILTER_CONTAINS, filter: _.FILTER_CONTAINS,
sort: _.SORT_BYLENGTH, sort: _.SORT_BYLENGTH,
item: function (text, input) { item: _.ITEM,
return $.create("li", { replace: _.REPLACE
innerHTML: text.replace(RegExp($.regExpEscape(input.trim()), "gi"), "<mark>$&</mark>"),
"aria-selected": "false"
});
},
replace: function (text) {
this.input.value = text;
}
}, o); }, o);
this.index = -1; this.index = -1;
@ -44,7 +41,7 @@
}); });
this.ul = $.create("ul", { this.ul = $.create("ul", {
hidden: "", hidden: "hidden",
inside: this.container inside: this.container
}); });
@ -60,7 +57,7 @@
$.bind(this.input, { $.bind(this.input, {
"input": this.evaluate.bind(this), "input": this.evaluate.bind(this),
"blur": this.close.bind(this), "blur": this.close.bind(this, { reason: "blur" }),
"keydown": function(evt) { "keydown": function(evt) {
var c = evt.keyCode; var c = evt.keyCode;
@ -72,7 +69,7 @@
me.select(); me.select();
} }
else if (c === 27) { // Esc else if (c === 27) { // Esc
me.close(); me.close({ reason: "esc" });
} }
else if (c === 38 || c === 40) { // Down/Up arrow else if (c === 38 || c === 40) { // Down/Up arrow
evt.preventDefault(); evt.preventDefault();
@ -82,7 +79,7 @@
} }
}); });
$.bind(this.input.form, {"submit": this.close.bind(this)}); $.bind(this.input.form, {"submit": this.close.bind(this, { reason: "submit" })});
$.bind(this.ul, {"mousedown": function(evt) { $.bind(this.ul, {"mousedown": function(evt) {
var li = evt.target; var li = evt.target;
@ -93,15 +90,16 @@
li = li.parentNode; li = li.parentNode;
} }
if (li) { if (li && evt.button === 0) { // Only select on left click
me.select(li); evt.preventDefault();
me.select(li, evt.target);
} }
} }
}}); }});
if (this.input.hasAttribute("list")) { if (this.input.hasAttribute("list")) {
this.list = "#" + input.getAttribute("list"); this.list = "#" + this.input.getAttribute("list");
input.removeAttribute("list"); this.input.removeAttribute("list");
} }
else { else {
this.list = this.input.getAttribute("data-list") || o.list || []; this.list = this.input.getAttribute("data-list") || o.list || [];
@ -122,9 +120,18 @@
list = $(list); list = $(list);
if (list && list.children) { if (list && list.children) {
this._list = slice.apply(list.children).map(function (el) { var items = [];
return el.innerHTML.trim(); slice.apply(list.children).forEach(function (el) {
if (!el.disabled) {
var text = el.textContent.trim();
var value = el.value || text;
var label = el.label || text;
if (value !== "") {
items.push({ label: label, value: value });
}
}
}); });
this._list = items;
} }
} }
@ -138,18 +145,24 @@
}, },
get opened() { get opened() {
return this.ul && this.ul.getAttribute("hidden") == null; return this.isOpened;
}, },
close: function () { close: function (o) {
if (!this.opened) {
return;
}
this.ul.setAttribute("hidden", ""); this.ul.setAttribute("hidden", "");
this.isOpened = false;
this.index = -1; this.index = -1;
$.fire(this.input, "awesomplete-close"); $.fire(this.input, "awesomplete-close", o || {});
}, },
open: function () { open: function () {
this.ul.removeAttribute("hidden"); this.ul.removeAttribute("hidden");
this.isOpened = true;
if (this.autoFirst && this.index === -1) { if (this.autoFirst && this.index === -1) {
this.goto(0); this.goto(0);
@ -160,14 +173,14 @@
next: function () { next: function () {
var count = this.ul.children.length; var count = this.ul.children.length;
this.goto(this.index < count - 1 ? this.index + 1 : (count ? 0 : -1) );
this.goto(this.index < count - 1? this.index + 1 : -1);
}, },
previous: function () { previous: function () {
var count = this.ul.children.length; var count = this.ul.children.length;
var pos = this.index - 1;
this.goto(this.selected? this.index - 1 : count - 1); this.goto(this.selected && pos !== -1 ? pos : count - 1);
}, },
// Should not be used, highlights specific item without any checks! // Should not be used, highlights specific item without any checks!
@ -183,28 +196,37 @@
if (i > -1 && lis.length > 0) { if (i > -1 && lis.length > 0) {
lis[i].setAttribute("aria-selected", "true"); lis[i].setAttribute("aria-selected", "true");
this.status.textContent = lis[i].textContent; this.status.textContent = lis[i].textContent;
}
$.fire(this.input, "awesomplete-highlight"); // scroll to highlighted element in case parent's height is fixed
this.ul.scrollTop = lis[i].offsetTop - this.ul.clientHeight + lis[i].clientHeight;
$.fire(this.input, "awesomplete-highlight", {
text: this.suggestions[this.index]
});
}
}, },
select: function (selected) { select: function (selected, origin) {
selected = selected || this.ul.children[this.index]; if (selected) {
this.index = $.siblingIndex(selected);
} else {
selected = this.ul.children[this.index];
}
if (selected) { if (selected) {
var prevented; var suggestion = this.suggestions[this.index];
$.fire(this.input, "awesomplete-select", { var allowed = $.fire(this.input, "awesomplete-select", {
text: selected.textContent, text: suggestion,
preventDefault: function () { origin: origin || selected
prevented = true;
}
}); });
if (!prevented) { if (allowed) {
this.replace(selected.textContent); this.replace(suggestion);
this.close(); this.close({ reason: "select" });
$.fire(this.input, "awesomplete-selectcomplete"); $.fire(this.input, "awesomplete-selectcomplete", {
text: suggestion
});
} }
} }
}, },
@ -218,25 +240,28 @@
// Populate list with options that match // Populate list with options that match
this.ul.innerHTML = ""; this.ul.innerHTML = "";
this._list this.suggestions = this._list
.map(function(item) {
return new Suggestion(me.data(item, value));
})
.filter(function(item) { .filter(function(item) {
return me.filter(item, value); return me.filter(item, value);
}) })
.sort(this.sort) .sort(this.sort)
.every(function(text, i) { .slice(0, this.maxItems);
me.ul.appendChild(me.item(text, value));
return i < me.maxItems - 1; this.suggestions.forEach(function(text) {
me.ul.appendChild(me.item(text, value));
}); });
if (this.ul.children.length === 0) { if (this.ul.children.length === 0) {
this.close(); this.close({ reason: "nomatches" });
} else { } else {
this.open(); this.open();
} }
} }
else { else {
this.close(); this.close({ reason: "nomatches" });
} }
} }
}; };
@ -261,27 +286,58 @@
return a < b? -1 : 1; return a < b? -1 : 1;
}; };
_.ITEM = function (text, input) {
var html = input.trim() === '' ? text : text.replace(RegExp($.regExpEscape(input.trim()), "gi"), "<mark>$&</mark>");
return $.create("li", {
innerHTML: html,
"aria-selected": "false"
});
};
_.REPLACE = function (text) {
this.input.value = text.value;
};
_.DATA = function (item/*, input*/) { return item; };
// Private functions // Private functions
function configure(properties, o) { function Suggestion(data) {
var o = Array.isArray(data)
? { label: data[0], value: data[1] }
: typeof data === "object" && "label" in data && "value" in data ? data : { label: data, value: data };
this.label = o.label || o.value;
this.value = o.value;
}
Object.defineProperty(Suggestion.prototype = Object.create(String.prototype), "length", {
get: function() { return this.label.length; }
});
Suggestion.prototype.toString = Suggestion.prototype.valueOf = function () {
return "" + this.label;
};
function configure(instance, properties, o) {
for (var i in properties) { for (var i in properties) {
var initial = properties[i], var initial = properties[i],
attrValue = this.input.getAttribute("data-" + i.toLowerCase()); attrValue = instance.input.getAttribute("data-" + i.toLowerCase());
if (typeof initial === "number") { if (typeof initial === "number") {
this[i] = +attrValue; instance[i] = parseInt(attrValue);
} }
else if (initial === false) { // Boolean options must be false by default anyway else if (initial === false) { // Boolean options must be false by default anyway
this[i] = attrValue !== null; instance[i] = attrValue !== null;
} }
else if (initial instanceof Function) { else if (initial instanceof Function) {
this[i] = null; instance[i] = null;
} }
else { else {
this[i] = attrValue; instance[i] = attrValue;
} }
this[i] = this[i] || o[i] || initial; if (!instance[i] && instance[i] !== 0) {
instance[i] = (i in o)? o[i] : initial;
}
} }
} }
@ -343,23 +399,29 @@
evt[j] = properties[j]; evt[j] = properties[j];
} }
target.dispatchEvent(evt); return target.dispatchEvent(evt);
}; };
$.regExpEscape = function (s) { $.regExpEscape = function (s) {
return s.replace(/[-\\^$*+?.()|[\]{}]/g, "\\$&"); return s.replace(/[-\\^$*+?.()|[\]{}]/g, "\\$&");
} };
$.siblingIndex = function (el) {
/* eslint-disable no-cond-assign */
for (var i = 0; el = el.previousElementSibling; i++);
return i;
};
// Initialization // Initialization
function init() { function init() {
$$("input.awesomplete").forEach(function (input) { $$("input.awesomplete").forEach(function (input) {
new Awesomplete(input); new _(input);
}); });
} }
// Are we in a browser? Check for Document constructor // Are we in a browser? Check for Document constructor
if (typeof Document !== 'undefined') { if (typeof Document !== "undefined") {
// DOM already loaded? // DOM already loaded?
if (document.readyState !== "loading") { if (document.readyState !== "loading") {
init(); init();
@ -374,12 +436,12 @@
_.$$ = $$; _.$$ = $$;
// Make sure to export Awesomplete on self when in a browser // Make sure to export Awesomplete on self when in a browser
if (typeof self !== 'undefined') { if (typeof self !== "undefined") {
self.Awesomplete = _; self.Awesomplete = _;
} }
// Expose Awesomplete as a CJS module // Expose Awesomplete as a CJS module
if (typeof exports === 'object') { if (typeof module === "object" && module.exports) {
module.exports = _; module.exports = _;
} }

BIN
inc/awesomplete.min.js vendored
View file

Binary file not shown.