223 lines
5.9 KiB
JavaScript
223 lines
5.9 KiB
JavaScript
/**
|
|
* Tom Select v2.4.2
|
|
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
*/
|
|
|
|
(function (global, factory) {
|
|
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
|
|
typeof define === 'function' && define.amd ? define(factory) :
|
|
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.dropdown_input = factory());
|
|
})(this, (function () { 'use strict';
|
|
|
|
const KEY_ESC = 27;
|
|
const KEY_TAB = 9;
|
|
// ctrl key or apple key for ma
|
|
|
|
/**
|
|
* Converts a scalar to its best string representation
|
|
* for hash keys and HTML attribute values.
|
|
*
|
|
* Transformations:
|
|
* 'str' -> 'str'
|
|
* null -> ''
|
|
* undefined -> ''
|
|
* true -> '1'
|
|
* false -> '0'
|
|
* 0 -> '0'
|
|
* 1 -> '1'
|
|
*
|
|
*/
|
|
|
|
/**
|
|
* Prevent default
|
|
*
|
|
*/
|
|
const preventDefault = (evt, stop = false) => {
|
|
if (evt) {
|
|
evt.preventDefault();
|
|
if (stop) {
|
|
evt.stopPropagation();
|
|
}
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Add event helper
|
|
*
|
|
*/
|
|
const addEvent = (target, type, callback, options) => {
|
|
target.addEventListener(type, callback, options);
|
|
};
|
|
|
|
/**
|
|
* Iterates over arrays and hashes.
|
|
*
|
|
* ```
|
|
* iterate(this.items, function(item, id) {
|
|
* // invoked for each item
|
|
* });
|
|
* ```
|
|
*
|
|
*/
|
|
const iterate = (object, callback) => {
|
|
if (Array.isArray(object)) {
|
|
object.forEach(callback);
|
|
} else {
|
|
for (var key in object) {
|
|
if (object.hasOwnProperty(key)) {
|
|
callback(object[key], key);
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Return a dom element from either a dom query string, jQuery object, a dom element or html string
|
|
* https://stackoverflow.com/questions/494143/creating-a-new-dom-element-from-an-html-string-using-built-in-dom-methods-or-pro/35385518#35385518
|
|
*
|
|
* param query should be {}
|
|
*/
|
|
const getDom = query => {
|
|
if (query.jquery) {
|
|
return query[0];
|
|
}
|
|
if (query instanceof HTMLElement) {
|
|
return query;
|
|
}
|
|
if (isHtmlString(query)) {
|
|
var tpl = document.createElement('template');
|
|
tpl.innerHTML = query.trim(); // Never return a text node of whitespace as the result
|
|
return tpl.content.firstChild;
|
|
}
|
|
return document.querySelector(query);
|
|
};
|
|
const isHtmlString = arg => {
|
|
if (typeof arg === 'string' && arg.indexOf('<') > -1) {
|
|
return true;
|
|
}
|
|
return false;
|
|
};
|
|
|
|
/**
|
|
* Add css classes
|
|
*
|
|
*/
|
|
const addClasses = (elmts, ...classes) => {
|
|
var norm_classes = classesArray(classes);
|
|
elmts = castAsArray(elmts);
|
|
elmts.map(el => {
|
|
norm_classes.map(cls => {
|
|
el.classList.add(cls);
|
|
});
|
|
});
|
|
};
|
|
|
|
/**
|
|
* Return arguments
|
|
*
|
|
*/
|
|
const classesArray = args => {
|
|
var classes = [];
|
|
iterate(args, _classes => {
|
|
if (typeof _classes === 'string') {
|
|
_classes = _classes.trim().split(/[\t\n\f\r\s]/);
|
|
}
|
|
if (Array.isArray(_classes)) {
|
|
classes = classes.concat(_classes);
|
|
}
|
|
});
|
|
return classes.filter(Boolean);
|
|
};
|
|
|
|
/**
|
|
* Create an array from arg if it's not already an array
|
|
*
|
|
*/
|
|
const castAsArray = arg => {
|
|
if (!Array.isArray(arg)) {
|
|
arg = [arg];
|
|
}
|
|
return arg;
|
|
};
|
|
|
|
/**
|
|
* Plugin: "dropdown_input" (Tom Select)
|
|
* Copyright (c) contributors
|
|
*
|
|
* Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
|
|
* file except in compliance with the License. You may obtain a copy of the License at:
|
|
* http://www.apache.org/licenses/LICENSE-2.0
|
|
*
|
|
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF
|
|
* ANY KIND, either express or implied. See the License for the specific language
|
|
* governing permissions and limitations under the License.
|
|
*
|
|
*/
|
|
|
|
function plugin () {
|
|
const self = this;
|
|
self.settings.shouldOpen = true; // make sure the input is shown even if there are no options to display in the dropdown
|
|
|
|
self.hook('before', 'setup', () => {
|
|
self.focus_node = self.control;
|
|
addClasses(self.control_input, 'dropdown-input');
|
|
const div = getDom('<div class="dropdown-input-wrap">');
|
|
div.append(self.control_input);
|
|
self.dropdown.insertBefore(div, self.dropdown.firstChild);
|
|
|
|
// set a placeholder in the select control
|
|
const placeholder = getDom('<input class="items-placeholder" tabindex="-1" />');
|
|
placeholder.placeholder = self.settings.placeholder || '';
|
|
self.control.append(placeholder);
|
|
});
|
|
self.on('initialize', () => {
|
|
// set tabIndex on control to -1, otherwise [shift+tab] will put focus right back on control_input
|
|
self.control_input.addEventListener('keydown', evt => {
|
|
//addEvent(self.control_input,'keydown' as const,(evt:KeyboardEvent) =>{
|
|
switch (evt.keyCode) {
|
|
case KEY_ESC:
|
|
if (self.isOpen) {
|
|
preventDefault(evt, true);
|
|
self.close();
|
|
}
|
|
self.clearActiveItems();
|
|
return;
|
|
case KEY_TAB:
|
|
self.focus_node.tabIndex = -1;
|
|
break;
|
|
}
|
|
return self.onKeyDown.call(self, evt);
|
|
});
|
|
self.on('blur', () => {
|
|
self.focus_node.tabIndex = self.isDisabled ? -1 : self.tabIndex;
|
|
});
|
|
|
|
// give the control_input focus when the dropdown is open
|
|
self.on('dropdown_open', () => {
|
|
self.control_input.focus();
|
|
});
|
|
|
|
// prevent onBlur from closing when focus is on the control_input
|
|
const orig_onBlur = self.onBlur;
|
|
self.hook('instead', 'onBlur', evt => {
|
|
if (evt && evt.relatedTarget == self.control_input) return;
|
|
return orig_onBlur.call(self);
|
|
});
|
|
addEvent(self.control_input, 'blur', () => self.onBlur());
|
|
|
|
// return focus to control to allow further keyboard input
|
|
self.hook('before', 'close', () => {
|
|
if (!self.isOpen) return;
|
|
self.focus_node.focus({
|
|
preventScroll: true
|
|
});
|
|
});
|
|
});
|
|
}
|
|
|
|
return plugin;
|
|
|
|
}));
|
|
//# sourceMappingURL=dropdown_input.js.map
|