Skip to content

Commit

Permalink
support for multiple class names in settings.classNames properties
Browse files Browse the repository at this point in the history
  • Loading branch information
@yairEO
yairEO committed Feb 13, 2021
1 parent 4525cc5 commit 4ed6b41
Show file tree
Hide file tree
Showing 3 changed files with 40 additions and 22 deletions.
35 changes: 24 additions & 11 deletions dist/tagify.min.js
View file
Expand Up @@ -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);
},

/**
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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);
},
Expand All @@ -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 () {
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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);
}

Expand Down Expand Up @@ -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(),
Expand All @@ -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;
}

Expand Down Expand Up @@ -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));
});
Expand Down Expand Up @@ -2272,15 +2285,15 @@
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
},

/**
* 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];
},

Expand Down Expand Up @@ -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),
Expand Down
8 changes: 4 additions & 4 deletions src/parts/dropdown.js
View file
Expand Up @@ -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)
},

/**
Expand Down Expand Up @@ -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 ){
Expand Down Expand Up @@ -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)
},
Expand All @@ -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;
Expand Down
19 changes: 12 additions & 7 deletions src/tagify.js
View file
Expand Up @@ -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

Expand Down Expand Up @@ -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)
}

Expand Down Expand Up @@ -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(),
Expand All @@ -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;
}

Expand Down Expand Up @@ -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) )
})

Expand Down Expand Up @@ -697,15 +702,15 @@ 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
},

/**
* 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];
},

Expand Down Expand Up @@ -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 => {
Expand Down

0 comments on commit 4ed6b41

Please sign in to comment.