(function () {
'use strict';
function _defineProperties(target, props) {
for (var i = 0; i < props.length; i++) {
var descriptor = props[i];
descriptor.enumerable = descriptor.enumerable || false;
descriptor.configurable = true;
if ("value" in descriptor) descriptor.writable = true;
Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor);
}
}
function _createClass(Constructor, protoProps, staticProps) {
if (protoProps) _defineProperties(Constructor.prototype, protoProps);
if (staticProps) _defineProperties(Constructor, staticProps);
Object.defineProperty(Constructor, "prototype", {
writable: false
});
return Constructor;
}
function _inheritsLoose(subClass, superClass) {
subClass.prototype = Object.create(superClass.prototype);
subClass.prototype.constructor = subClass;
_setPrototypeOf(subClass, superClass);
}
function _getPrototypeOf(o) {
_getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) {
return o.__proto__ || Object.getPrototypeOf(o);
};
return _getPrototypeOf(o);
}
function _setPrototypeOf(o, p) {
_setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
o.__proto__ = p;
return o;
};
return _setPrototypeOf(o, p);
}
function _isNativeReflectConstruct() {
if (typeof Reflect === "undefined" || !Reflect.construct) return false;
if (Reflect.construct.sham) return false;
if (typeof Proxy === "function") return true;
try {
Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
return true;
} catch (e) {
return false;
}
}
function _construct(Parent, args, Class) {
if (_isNativeReflectConstruct()) {
_construct = Reflect.construct.bind();
} else {
_construct = function _construct(Parent, args, Class) {
var a = [null];
a.push.apply(a, args);
var Constructor = Function.bind.apply(Parent, a);
var instance = new Constructor();
if (Class) _setPrototypeOf(instance, Class.prototype);
return instance;
};
}
return _construct.apply(null, arguments);
}
function _isNativeFunction(fn) {
return Function.toString.call(fn).indexOf("[native code]") !== -1;
}
function _wrapNativeSuper(Class) {
var _cache = typeof Map === "function" ? new Map() : undefined;
_wrapNativeSuper = function _wrapNativeSuper(Class) {
if (Class === null || !_isNativeFunction(Class)) return Class;
if (typeof Class !== "function") {
throw new TypeError("Super expression must either be null or a function");
}
if (typeof _cache !== "undefined") {
if (_cache.has(Class)) return _cache.get(Class);
_cache.set(Class, Wrapper);
}
function Wrapper() {
return _construct(Class, arguments, _getPrototypeOf(this).constructor);
}
Wrapper.prototype = Object.create(Class.prototype, {
constructor: {
value: Wrapper,
enumerable: false,
writable: true,
configurable: true
}
});
return _setPrototypeOf(Wrapper, Class);
};
return _wrapNativeSuper(Class);
}
function _toPrimitive(input, hint) {
if (typeof input !== "object" || input === null) return input;
var prim = input[Symbol.toPrimitive];
if (prim !== undefined) {
var res = prim.call(input, hint || "default");
if (typeof res !== "object") return res;
throw new TypeError("@@toPrimitive must return a primitive value.");
}
return (hint === "string" ? String : Number)(input);
}
function _toPropertyKey(arg) {
var key = _toPrimitive(arg, "string");
return typeof key === "symbol" ? key : String(key);
}
/**
* @copyright (C) 2018 Open Source Matters, Inc. <https://www.joomla.org>
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/
/**
* Fancy select field, which use Choices.js
*
* Example:
* <joomla-field-fancy-select ...attributes>
* <select>...</select>
* </joomla-field-fancy-select>
*
* Possible attributes:
*
* allow-custom Whether allow User to dynamically add a new value.
* new-item-prefix="" Prefix for a dynamically added value.
*
* remote-search Enable remote search.
* url="" Url for remote search.
* term-key="term" Variable key name for searched term, will be appended to Url.
*
* min-term-length="1" The minimum length a search value should be before choices are searched.
* placeholder="" The value of the inputs placeholder.
* search-placeholder="" The value of the search inputs placeholder.
*
* data-max-results="30" The maximum amount of search results to be displayed.
* data-max-render="30" The maximum amount of items to be rendered, critical for large lists.
*/
window.customElements.define('joomla-field-fancy-select', /*#__PURE__*/function (_HTMLElement) {
_inheritsLoose(_class, _HTMLElement);
/**
* Lifecycle
*/
function _class() {
var _this;
_this = _HTMLElement.call(this) || this;
// Keycodes
_this.keyCode = {
ENTER: 13
};
if (!Joomla) {
throw new Error('Joomla API is not properly initiated');
}
if (!window.Choices) {
throw new Error('JoomlaFieldFancySelect requires Choices.js to work');
}
_this.choicesCache = {};
_this.activeXHR = null;
_this.choicesInstance = null;
_this.isDisconnected = false;
return _this;
}
/**
* Lifecycle
*/
var _proto = _class.prototype;
_proto.connectedCallback = function connectedCallback() {
var _this2 = this;
// Make sure Choices are loaded
if (window.Choices || document.readyState === 'complete') {
this.doConnect();
} else {
var callback = function callback() {
_this2.doConnect();
window.removeEventListener('load', callback);
};
window.addEventListener('load', callback);
}
};
_proto.doConnect = function doConnect() {
var _this3 = this;
// Get a <select> element
this.select = this.querySelector('select');
if (!this.select) {
throw new Error('JoomlaFieldFancySelect requires <select> element to work');
}
// The element was already initialised previously and perhaps was detached from DOM
if (this.choicesInstance) {
if (this.isDisconnected) {
// Re init previous instance
this.choicesInstance.init();
this.choicesInstance.setChoiceByValue(this.disconnectValues);
this.isDisconnected = false;
}
return;
}
this.isDisconnected = false;
// Add placeholder option for multiple mode,
// Because it not supported as parameter by Choices for <select> https://github.com/jshjohnson/Choices#placeholder
if (this.select.multiple && this.placeholder) {
var option = document.createElement('option');
option.setAttribute('placeholder', '');
option.textContent = this.placeholder;
this.select.appendChild(option);
}
// Init Choices
// eslint-disable-next-line no-undef
this.choicesInstance = new Choices(this.select, {
placeholderValue: this.placeholder,
searchPlaceholderValue: this.searchPlaceholder,
removeItemButton: true,
searchFloor: this.minTermLength,
searchResultLimit: parseInt(this.select.dataset.maxResults, 10) || 10,
renderChoiceLimit: parseInt(this.select.dataset.maxRender, 10) || -1,
shouldSort: false,
fuseOptions: {
threshold: 0.3 // Strict search
},
noResultsText: Joomla.Text._('JGLOBAL_SELECT_NO_RESULTS_MATCH', 'No results found'),
noChoicesText: Joomla.Text._('JGLOBAL_SELECT_NO_RESULTS_MATCH', 'No results found'),
itemSelectText: Joomla.Text._('JGLOBAL_SELECT_PRESS_TO_SELECT', 'Press to select'),
// Redefine some classes
classNames: {
button: 'choices__button_joomla' // It is need because an original styling use unavailable Icon.svg file
}
});
// Handle typing of custom Term
if (this.allowCustom) {
// START Work around for issue https://github.com/joomla/joomla-cms/issues/29459
// The choices.js always auto-highlights the first element
// in the dropdown that not allow to add a custom Term.
//
// This workaround can be removed when choices.js
// will have an option that allow to disable it.
// eslint-disable-next-line no-underscore-dangle, prefer-destructuring
var _highlightChoice = this.choicesInstance._highlightChoice;
// eslint-disable-next-line no-underscore-dangle
this.choicesInstance._highlightChoice = function (el) {
// Prevent auto-highlight of first element, if nothing actually highlighted
if (!el) return;
// Call original highlighter
_highlightChoice.call(_this3.choicesInstance, el);
};
// Unhighlight any highlighted items, when mouse leave the dropdown
this.addEventListener('mouseleave', function () {
if (!_this3.choicesInstance.dropdown.isActive) {
return;
}
var highlighted = Array.from(_this3.choicesInstance.dropdown.element.querySelectorAll("." + _this3.choicesInstance.config.classNames.highlightedState));
highlighted.forEach(function (choice) {
choice.classList.remove(_this3.choicesInstance.config.classNames.highlightedState);
choice.setAttribute('aria-selected', 'false');
});
// eslint-disable-next-line no-underscore-dangle
_this3.choicesInstance._highlightPosition = 0;
});
// END workaround for issue #29459
// Add custom term on ENTER keydown
this.addEventListener('keydown', function (event) {
if (event.keyCode !== _this3.keyCode.ENTER || event.target !== _this3.choicesInstance.input.element) {
return;
}
event.preventDefault();
// eslint-disable-next-line no-underscore-dangle
if (_this3.choicesInstance._highlightPosition || !event.target.value) {
return;
}
// Make sure nothing is highlighted
var highlighted = _this3.choicesInstance.dropdown.element.querySelector("." + _this3.choicesInstance.config.classNames.highlightedState);
if (highlighted) {
return;
}
// Check if value already exist
var lowerValue = event.target.value.toLowerCase();
var valueInCache = false;
// Check if value in existing choices
_this3.choicesInstance.config.choices.some(function (choiceItem) {
if (choiceItem.value.toLowerCase() === lowerValue || choiceItem.label.toLowerCase() === lowerValue) {
valueInCache = choiceItem.value;
return true;
}
return false;
});
if (valueInCache === false) {
// Check if value in cache
Object.keys(_this3.choicesCache).some(function (key) {
if (key.toLowerCase() === lowerValue || _this3.choicesCache[key].toLowerCase() === lowerValue) {
valueInCache = key;
return true;
}
return false;
});
}
// Make choice based on existing value
if (valueInCache !== false) {
_this3.choicesInstance.setChoiceByValue(valueInCache);
event.target.value = null;
_this3.choicesInstance.hideDropdown();
return;
}
// Create and add new
_this3.choicesInstance.setChoices([{
value: _this3.newItemPrefix + event.target.value,
label: event.target.value,
selected: true,
customProperties: {
value: event.target.value // Store real value, just in case
}
}], 'value', 'label', false);
_this3.choicesCache[event.target.value] = event.target.value;
event.target.value = null;
_this3.choicesInstance.hideDropdown();
});
}
// Handle remote search
if (this.remoteSearch && this.url) {
// Cache existing
this.choicesInstance.config.choices.forEach(function (choiceItem) {
_this3.choicesCache[choiceItem.value] = choiceItem.label;
});
var lookupDelay = 300;
var lookupTimeout = null;
this.select.addEventListener('search', function () {
clearTimeout(lookupTimeout);
lookupTimeout = setTimeout(_this3.requestLookup.bind(_this3), lookupDelay);
});
}
}
/**
* Lifecycle
*/;
_proto.disconnectedCallback = function disconnectedCallback() {
// Destroy Choices instance, to unbind event listeners
if (this.choicesInstance) {
// Keep selected values, because choices will reset them on re-init
this.disconnectValues = this.choicesInstance.getValue(true);
this.choicesInstance.destroy();
this.isDisconnected = true;
}
if (this.activeXHR) {
this.activeXHR.abort();
this.activeXHR = null;
}
};
_proto.requestLookup = function requestLookup() {
var _this4 = this;
var url = this.url;
url += url.indexOf('?') === -1 ? '?' : '&';
url += encodeURIComponent(this.termKey) + "=" + encodeURIComponent(this.choicesInstance.input.value);
// Stop previous request if any
if (this.activeXHR) {
this.activeXHR.abort();
}
this.activeXHR = Joomla.request({
url: url,
onSuccess: function onSuccess(response) {
_this4.activeXHR = null;
var items = response ? JSON.parse(response) : [];
if (!items.length) {
return;
}
// Remove duplications
var item;
// eslint-disable-next-line no-plusplus
for (var i = items.length - 1; i >= 0; i--) {
// The loop must be form the end !!!
item = items[i];
// eslint-disable-next-line prefer-template
item.value = '' + item.value; // Make sure the value is a string, choices.js expect a string.
if (_this4.choicesCache[item.value]) {
items.splice(i, 1);
} else {
_this4.choicesCache[item.value] = item.text;
}
}
// Add new options to field, assume that each item is object, eg {value: "foo", text: "bar"}
if (items.length) {
_this4.choicesInstance.setChoices(items, 'value', 'text', false);
}
},
onError: function onError() {
_this4.activeXHR = null;
}
});
};
_proto.disableAllOptions = function disableAllOptions() {
// Choices.js does not offer a public API for accessing the choices
// So we have to access the private store => don't eslint
// eslint-disable-next-line no-underscore-dangle
var choices = this.choicesInstance._store.choices;
choices.forEach(function (elem, index) {
choices[index].disabled = true;
choices[index].selected = false;
});
this.choicesInstance.clearStore();
this.choicesInstance.setChoices(choices, 'value', 'label', true);
};
_proto.enableAllOptions = function enableAllOptions() {
// Choices.js does not offer a public API for accessing the choices
// So we have to access the private store => don't eslint
// eslint-disable-next-line no-underscore-dangle
var choices = this.choicesInstance._store.choices;
var values = this.choicesInstance.getValue(true);
choices.forEach(function (elem, index) {
choices[index].disabled = false;
});
this.choicesInstance.clearStore();
this.choicesInstance.setChoices(choices, 'value', 'label', true);
this.value = values;
};
_proto.disableByValue = function disableByValue($val) {
// Choices.js does not offer a public API for accessing the choices
// So we have to access the private store => don't eslint
// eslint-disable-next-line no-underscore-dangle
var choices = this.choicesInstance._store.choices;
var values = this.choicesInstance.getValue(true);
choices.forEach(function (elem, index) {
if (elem.value === $val) {
choices[index].disabled = true;
choices[index].selected = false;
}
});
var index = values.indexOf($val);
if (index > -1) {
values.slice(index, 1);
}
this.choicesInstance.clearStore();
this.choicesInstance.setChoices(choices, 'value', 'label', true);
this.value = values;
};
_proto.enableByValue = function enableByValue($val) {
// Choices.js does not offer a public API for accessing the choices
// So we have to access the private store => don't eslint
// eslint-disable-next-line no-underscore-dangle
var choices = this.choicesInstance._store.choices;
var values = this.choicesInstance.getValue(true);
choices.forEach(function (elem, index) {
if (elem.value === $val) {
choices[index].disabled = false;
}
});
this.choicesInstance.clearStore();
this.choicesInstance.setChoices(choices, 'value', 'label', true);
this.value = values;
};
_createClass(_class, [{
key: "allowCustom",
get:
// Attributes to monitor
function get() {
return this.hasAttribute('allow-custom');
}
}, {
key: "remoteSearch",
get: function get() {
return this.hasAttribute('remote-search');
}
}, {
key: "url",
get: function get() {
return this.getAttribute('url');
}
}, {
key: "termKey",
get: function get() {
return this.getAttribute('term-key') || 'term';
}
}, {
key: "minTermLength",
get: function get() {
return parseInt(this.getAttribute('min-term-length'), 10) || 1;
}
}, {
key: "newItemPrefix",
get: function get() {
return this.getAttribute('new-item-prefix') || '';
}
}, {
key: "placeholder",
get: function get() {
return this.getAttribute('placeholder');
}
}, {
key: "searchPlaceholder",
get: function get() {
return this.getAttribute('search-placeholder');
}
}, {
key: "value",
get: function get() {
return this.choicesInstance.getValue(true);
},
set: function set($val) {
this.choicesInstance.setChoiceByValue($val);
}
}]);
return _class;
}( /*#__PURE__*/_wrapNativeSuper(HTMLElement)));
})();