From 4ed6b4134b46a92760203de433ee0b8afc590858 Mon Sep 17 00:00:00 2001 From: vsync Date: Sat, 13 Feb 2021 19:04:53 +0200 Subject: [PATCH] support for multiple class names in settings.classNames properties --- dist/tagify.min.js | 35 ++++++++++++++++++++++++----------- src/parts/dropdown.js | 8 ++++---- src/tagify.js | 19 ++++++++++++------- 3 files changed, 40 insertions(+), 22 deletions(-) diff --git a/dist/tagify.min.js b/dist/tagify.min.js index 3b01afb0..d8d343ef 100644 --- a/dist/tagify.min.js +++ b/dist/tagify.min.js @@ -211,7 +211,7 @@ var dropdownMethods = { init: function init() { this.DOM.dropdown = this.parseTemplate('dropdown', [this.settings]); - this.DOM.dropdown.content = this.DOM.dropdown.querySelector('.' + this.settings.classNames.dropdownWrapper); + this.DOM.dropdown.content = this.DOM.dropdown.querySelector(this.settings.classNames.dropdownWrapperSelector); }, /** @@ -483,7 +483,7 @@ callbacks: { onKeyDown: function onKeyDown(e) { // get the "active" element, and if there was none (yet) active, use first child - var activeListElm = this.DOM.dropdown.querySelector("." + this.settings.classNames.dropdownItemActive), + var activeListElm = this.DOM.dropdown.querySelector(this.settings.classNames.dropdownItemActiveSelector), selectedElm = activeListElm; switch (e.key) { @@ -550,7 +550,7 @@ } }, onMouseOver: function onMouseOver(e) { - var ddItem = e.target.closest('.' + this.settings.classNames.dropdownItem); // event delegation check + var ddItem = e.target.closest(this.settings.classNames.dropdownItemSelector); // event delegation check ddItem && this.dropdown.highlightOption.call(this, ddItem); }, @@ -563,7 +563,7 @@ if (e.button != 0 || e.target == this.DOM.dropdown) return; // allow only mouse left-clicks - var listItemElm = e.target.closest('.' + this.settings.classNames.dropdownItem); // temporary set the "actions" state to indicate to the main "blur" event it shouldn't run + var listItemElm = e.target.closest(this.settings.classNames.dropdownItemSelector); // temporary set the "actions" state to indicate to the main "blur" event it shouldn't run this.state.actions.selectOption = true; setTimeout(function () { @@ -1709,6 +1709,19 @@ _s.placeholder = input.getAttribute('placeholder') || _s.placeholder || ""; _s.required = input.hasAttribute('required'); + + var _loop = function _loop(name) { + Object.defineProperty(_s.classNames, name + "Selector", { + get: function get() { + return "." + this[name].split(" ").join("."); + } + }); + }; + + for (var name in _s.classNames) { + _loop(name); + } + if (this.isIE) _s.autoComplete = false; // IE goes crazy if this isn't false ["whitelist", "blacklist"].forEach(function (name) { @@ -1866,7 +1879,7 @@ } else { DOM.originalInput = input; DOM.scope = this.parseTemplate('wrapper', [input, this.settings]); - DOM.input = DOM.scope.querySelector('.' + this.settings.classNames.input); + DOM.input = DOM.scope.querySelector(this.settings.classNames.inputSelector); input.parentNode.insertBefore(DOM.scope, input); } @@ -1995,7 +2008,7 @@ var _s = this.settings; function getEditableElm() { - return tagElm.querySelector('.' + _s.classNames.tagText); + return tagElm.querySelector(_s.classNames.tagTextSelector); } var editableElm = getEditableElm(), @@ -2011,7 +2024,7 @@ }; if (!editableElm) { - console.warn('Cannot find element in Tag template: .', _s.classNames.tagText); + console.warn('Cannot find element in Tag template: .', _s.classNames.tagTextSelector); return; } @@ -2103,7 +2116,7 @@ this.value.length = 0; [].forEach.call(this.getTagElms(), function (node) { - if (node.classList.contains(_this2.settings.classNames.tagNotAllowed)) return; + if (node.classList.contains(_this2.settings.classNames.tagNotAllowed.split(' ')[0])) return; _this2.value.push(_this2.tagData(node)); }); @@ -2272,7 +2285,7 @@ classess[_key] = arguments[_key]; } - var classname = ['.' + this.settings.classNames.tag].concat(classess).join('.'); + var classname = '.' + [].concat(_toConsumableArray(this.settings.classNames.tag.split(' ')), classess).join('.'); return [].slice.call(this.DOM.scope.querySelectorAll(classname)); // convert nodeList to Array - https://stackoverflow.com/a/3199627/104380 }, @@ -2280,7 +2293,7 @@ * gets the last non-readonly, not-in-the-proccess-of-removal tag */ getLastTag: function getLastTag() { - var lastTag = this.DOM.scope.querySelectorAll(".".concat(this.settings.classNames.tag, ":not(.").concat(this.settings.classNames.tagHide, "):not([readonly])")); + var lastTag = this.DOM.scope.querySelectorAll("".concat(this.settings.classNames.tagSelector, ":not(.").concat(this.settings.classNames.tagHide, "):not([readonly])")); return lastTag[lastTag.length - 1]; }, @@ -2871,7 +2884,7 @@ var _this11 = this; var _s = this.settings, - selector = ".".concat(_s.classNames.tag, ".").concat(_s.classNames.tagNotAllowed), + selector = "".concat(_s.classNames.tagSelector).concat(_s.classNames.tagNotAllowedSelector), tagElms = this.DOM.scope.querySelectorAll(selector); [].forEach.call(tagElms, function (node) { var tagData = _this11.tagData(node), diff --git a/src/parts/dropdown.js b/src/parts/dropdown.js index 9a6b31f2..33f7d284 100644 --- a/src/parts/dropdown.js +++ b/src/parts/dropdown.js @@ -3,7 +3,7 @@ import { sameStr, isObject, minify, escapeHTML, extend, unaccent, getNodeHeight export default { init(){ this.DOM.dropdown = this.parseTemplate('dropdown', [this.settings]) - this.DOM.dropdown.content = this.DOM.dropdown.querySelector('.' + this.settings.classNames.dropdownWrapper) + this.DOM.dropdown.content = this.DOM.dropdown.querySelector(this.settings.classNames.dropdownWrapperSelector) }, /** @@ -301,7 +301,7 @@ export default { callbacks : { onKeyDown(e){ // get the "active" element, and if there was none (yet) active, use first child - var activeListElm = this.DOM.dropdown.querySelector("." + this.settings.classNames.dropdownItemActive), + var activeListElm = this.DOM.dropdown.querySelector(this.settings.classNames.dropdownItemActiveSelector), selectedElm = activeListElm; switch( e.key ){ @@ -365,7 +365,7 @@ export default { }, onMouseOver(e){ - var ddItem = e.target.closest('.' + this.settings.classNames.dropdownItem) + var ddItem = e.target.closest(this.settings.classNames.dropdownItemSelector) // event delegation check ddItem && this.dropdown.highlightOption.call(this, ddItem) }, @@ -378,7 +378,7 @@ export default { onClick(e){ if( e.button != 0 || e.target == this.DOM.dropdown ) return; // allow only mouse left-clicks - var listItemElm = e.target.closest('.' + this.settings.classNames.dropdownItem) + var listItemElm = e.target.closest(this.settings.classNames.dropdownItemSelector) // temporary set the "actions" state to indicate to the main "blur" event it shouldn't run this.state.actions.selectOption = true; diff --git a/src/tagify.js b/src/tagify.js index cd6bae4e..cd3ec433 100644 --- a/src/tagify.js +++ b/src/tagify.js @@ -88,6 +88,11 @@ Tagify.prototype = { _s.placeholder = input.getAttribute('placeholder') || _s.placeholder || "" _s.required = input.hasAttribute('required') + for( let name in _s.classNames ) + Object.defineProperty(_s.classNames, name + "Selector" , { + get(){ return "."+this[name].split(" ").join(".") } + }) + if( this.isIE ) _s.autoComplete = false; // IE goes crazy if this isn't false @@ -238,7 +243,7 @@ Tagify.prototype = { else { DOM.originalInput = input DOM.scope = this.parseTemplate('wrapper', [input, this.settings]) - DOM.input = DOM.scope.querySelector('.' + this.settings.classNames.input) + DOM.input = DOM.scope.querySelector(this.settings.classNames.inputSelector) input.parentNode.insertBefore(DOM.scope, input) } @@ -395,7 +400,7 @@ Tagify.prototype = { var _s = this.settings; function getEditableElm(){ - return tagElm.querySelector('.' + _s.classNames.tagText) + return tagElm.querySelector(_s.classNames.tagTextSelector) } var editableElm = getEditableElm(), @@ -409,7 +414,7 @@ Tagify.prototype = { } if( !editableElm ){ - console.warn('Cannot find element in Tag template: .', _s.classNames.tagText); + console.warn('Cannot find element in Tag template: .', _s.classNames.tagTextSelector); return; } @@ -515,7 +520,7 @@ Tagify.prototype = { this.value.length = 0; [].forEach.call(this.getTagElms(), node => { - if( node.classList.contains(this.settings.classNames.tagNotAllowed) ) return + if( node.classList.contains(this.settings.classNames.tagNotAllowed.split(' ')[0]) ) return this.value.push( this.tagData(node) ) }) @@ -697,7 +702,7 @@ Tagify.prototype = { }, getTagElms( ...classess ){ - var classname = ['.' + this.settings.classNames.tag, ...classess].join('.') + var classname = '.' + [...this.settings.classNames.tag.split(' '), ...classess].join('.') return [].slice.call(this.DOM.scope.querySelectorAll(classname)) // convert nodeList to Array - https://stackoverflow.com/a/3199627/104380 }, @@ -705,7 +710,7 @@ Tagify.prototype = { * gets the last non-readonly, not-in-the-proccess-of-removal tag */ getLastTag(){ - var lastTag = this.DOM.scope.querySelectorAll(`.${this.settings.classNames.tag}:not(.${this.settings.classNames.tagHide}):not([readonly])`); + var lastTag = this.DOM.scope.querySelectorAll(`${this.settings.classNames.tagSelector}:not(.${this.settings.classNames.tagHide}):not([readonly])`); return lastTag[lastTag.length - 1]; }, @@ -1305,7 +1310,7 @@ Tagify.prototype = { */ reCheckInvalidTags(){ var _s = this.settings, - selector = `.${_s.classNames.tag}.${_s.classNames.tagNotAllowed}`, + selector = `${_s.classNames.tagSelector}${_s.classNames.tagNotAllowedSelector}`, tagElms = this.DOM.scope.querySelectorAll(selector); [].forEach.call(tagElms, node => {