Skip to content

Commit

Permalink
[4.0] Fixing JS in com_finder (#20888)
Browse files Browse the repository at this point in the history 
* Fixing JS in com_finder

* Cleanup

* Replacing compiled files with compiled versions from the Joomla build script
  • Loading branch information
@Hackwar @wilsonge
Hackwar authored and wilsonge committed Jul 1, 2018
1 parent d3ac7aa commit d0f1aeb
Show file tree
Hide file tree
Showing 6 changed files with 87 additions and 38 deletions.
20 changes: 10 additions & 10 deletions media/com_finder/js/finder.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,20 +12,17 @@ Joomla = window.Joomla || {};
var forms, searchword = document.querySelectorAll('.js-finder-search-query');

for (var i = 0; i < searchword.length; i++) {
// If the current value equals the default value, clear it.
searchword[i].addEventListener('focus', function (event) {
if (event.target.value === Joomla.JText._('MOD_FINDER_SEARCH_VALUE')) {
event.target.value = '';
}
});

// Handle the auto suggestion
if (Joomla.getOptions('finder-search')) {

searchword[i].awesomplete = new Awesomplete(searchword[i]);

// If the current value is empty, set the previous value.
searchword[i].addEventListener('keypress', function (event) {
searchword[i].addEventListener('keyup', function (event) {
if (event.target.value.length > 1) {

event.target.awesomplete.list = [];

Joomla.request(
{
url: Joomla.getOptions('finder-search').url+ '&q=' + event.target.value,
Expand All @@ -37,12 +34,15 @@ Joomla = window.Joomla || {};
{
response = JSON.parse(response);
if (Object.prototype.toString.call(response.suggestions) === '[object Array]') {
new Awesomplete(event.target, { list: response.suggestions });
event.target.awesomplete.list = response.suggestions;
}
},
onError: function(xhr)
{
Joomla.renderMessages(Joomla.ajaxErrorsMessages(xhr));
if (xhr.status > 0)
{
Joomla.renderMessages(Joomla.ajaxErrorsMessages(xhr));
}
}
}
);
Expand Down
2 changes: 1 addition & 1 deletion media/com_finder/js/finder.min.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

97 changes: 73 additions & 24 deletions media/vendor/awesomplete/js/awesomplete.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,15 +10,22 @@
var _ = function (input, o) {
var me = this;

// Keep track of number of instances for unique IDs
_.count = (_.count || 0) + 1;
this.count = _.count;

// Setup

this.isOpened = false;

this.input = $(input);
this.input.setAttribute("autocomplete", "off");
this.input.setAttribute("aria-autocomplete", "list");
this.input.setAttribute("aria-owns", "awesomplete_list_" + this.count);
this.input.setAttribute("role", "combobox");

o = o || {};
// store constructor options in case we need to distinguish
// between default and customized behavior later on
this.options = o = o || {};

configure(this, {
minChars: 2,
Expand All @@ -27,30 +34,32 @@ var _ = function (input, o) {
data: _.DATA,
filter: _.FILTER_CONTAINS,
sort: o.sort === false ? false : _.SORT_BYLENGTH,
container: _.CONTAINER,
item: _.ITEM,
replace: _.REPLACE
replace: _.REPLACE,
tabSelect: false
}, o);

this.index = -1;

// Create necessary elements

this.container = $.create("div", {
className: "awesomplete",
around: input
});
this.container = this.container(input);

this.ul = $.create("ul", {
hidden: "hidden",
role: "listbox",
id: "awesomplete_list_" + this.count,
inside: this.container
});

this.status = $.create("span", {
className: "visually-hidden",
role: "status",
"aria-live": "assertive",
"aria-relevant": "additions",
inside: this.container
"aria-atomic": true,
inside: this.container,
textContent: this.minChars != 0 ? ("Type " + this.minChars + " or more characters for results.") : "Begin typing for results."
});

// Bind events
Expand All @@ -69,6 +78,9 @@ var _ = function (input, o) {
evt.preventDefault();
me.select();
}
else if (c === 9 && me.selected && me.tabSelect) {
me.select();
}
else if (c === 27) { // Esc
me.close({ reason: "esc" });
}
Expand All @@ -83,7 +95,14 @@ var _ = function (input, o) {
"submit": this.close.bind(this, { reason: "submit" })
},
ul: {
// Prevent the default mousedowm, which ensures the input is not blurred.
// The actual selection will happen on click. This also ensures dragging the
// cursor away from the list item will cancel the selection
"mousedown": function(evt) {
evt.preventDefault();
},
// The click event is fired even if the corresponding mousedown event has called preventDefault
"click": function(evt) {
var li = evt.target;

if (li !== this) {
Expand Down Expand Up @@ -165,13 +184,17 @@ _.prototype = {
this.isOpened = false;
this.index = -1;

this.status.setAttribute("hidden", "");

$.fire(this.input, "awesomplete-close", o || {});
},

open: function () {
this.ul.removeAttribute("hidden");
this.isOpened = true;

this.status.removeAttribute("hidden");

if (this.autoFirst && this.index === -1) {
this.goto(0);
}
Expand All @@ -184,11 +207,14 @@ _.prototype = {
$.unbind(this.input, this._events.input);
$.unbind(this.input.form, this._events.form);

//move the input out of the awesomplete container and remove the container and its children
var parentNode = this.container.parentNode;
// cleanup container if it was created by Awesomplete but leave it alone otherwise
if (!this.options.container) {
//move the input out of the awesomplete container and remove the container and its children
var parentNode = this.container.parentNode;

parentNode.insertBefore(this.input, this.container);
parentNode.removeChild(this.container);
parentNode.insertBefore(this.input, this.container);
parentNode.removeChild(this.container);
}

//remove autocomplete and aria-autocomplete attributes
this.input.removeAttribute("autocomplete");
Expand Down Expand Up @@ -226,7 +252,10 @@ _.prototype = {

if (i > -1 && lis.length > 0) {
lis[i].setAttribute("aria-selected", "true");
this.status.textContent = lis[i].textContent;

this.status.textContent = lis[i].textContent + ", list item " + (i + 1) + " of " + lis.length;

this.input.setAttribute("aria-activedescendant", this.ul.id + "_item_" + this.index);

// scroll to highlighted element in case parent's height is fixed
this.ul.scrollTop = lis[i].offsetTop - this.ul.clientHeight + lis[i].clientHeight;
Expand Down Expand Up @@ -266,7 +295,7 @@ _.prototype = {
var me = this;
var value = this.input.value;

if (value.length >= this.minChars && this._list.length > 0) {
if (value.length >= this.minChars && this._list && this._list.length > 0) {
this.index = -1;
// Populate list with options that match
this.ul.innerHTML = "";
Expand All @@ -285,18 +314,26 @@ _.prototype = {

this.suggestions = this.suggestions.slice(0, this.maxItems);

this.suggestions.forEach(function(text) {
me.ul.appendChild(me.item(text, value));
this.suggestions.forEach(function(text, index) {
me.ul.appendChild(me.item(text, value, index));
});

if (this.ul.children.length === 0) {

this.status.textContent = "No results found";

this.close({ reason: "nomatches" });

} else {
this.open();

this.status.textContent = this.ul.children.length + " results found";
}
}
else {
this.close({ reason: "nomatches" });

this.status.textContent = "No results found";
}
}
};
Expand All @@ -321,11 +358,19 @@ _.SORT_BYLENGTH = function (a, b) {
return a < b? -1 : 1;
};

_.ITEM = function (text, input) {
_.CONTAINER = function (input) {
return $.create("div", {
className: "awesomplete",
around: input
});
}

_.ITEM = function (text, input, item_id) {
var html = input.trim() === "" ? text : text.replace(RegExp($.regExpEscape(input.trim()), "gi"), "<mark>$&</mark>");
return $.create("li", {
innerHTML: html,
"aria-selected": "false"
"aria-selected": "false",
"id": "awesomplete_list_" + this.count + "_item_" + item_id
});
};

Expand Down Expand Up @@ -401,6 +446,10 @@ $.create = function(tag, o) {
var ref = $(val);
ref.parentNode.insertBefore(element, ref);
element.appendChild(ref);

if (ref.getAttribute("autofocus") != null) {
ref.focus();
}
}
else if (i in element) {
element[i] = val;
Expand Down Expand Up @@ -467,6 +516,11 @@ function init() {
});
}

// Make sure to export Awesomplete on self when in a browser
if (typeof self !== "undefined") {
self.Awesomplete = _;
}

// Are we in a browser? Check for Document constructor
if (typeof Document !== "undefined") {
// DOM already loaded?
Expand All @@ -482,11 +536,6 @@ if (typeof Document !== "undefined") {
_.$ = $;
_.$$ = $$;

// Make sure to export Awesomplete on self when in a browser
if (typeof self !== "undefined") {
self.Awesomplete = _;
}

// Expose Awesomplete as a CJS module
if (typeof module === "object" && module.exports) {
module.exports = _;
Expand Down

0 comments on commit d0f1aeb

Please sign in to comment.