Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use data attributes instead of class names to identify html elements #846

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Use data attributes instead of class names to identify html elements #846

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1f03bc4
Use data attributes instead of class names to identify html elements
tobiasdiez Jun 18, 2021
d4c6c62
Fix small issue
tobiasdiez Jun 18, 2021
edc4291
Merge branch 'master' into classnames
tobiasdiez Jul 16, 2021
99eaf77
Merge branch 'master' into classnames
tobiasdiez Aug 3, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -298,7 +298,7 @@ var tagify = new Tagify(inputElement)
// bind "DragSort" to Tagify's main element and tell
// it that all the items with the below "selector" are "draggable"
var dragsort = new DragSort(tagify.DOM.scope, {
selector: '.'+tagify.settings.classNames.tag,
selector: tagify.settings.tagSelector,
callbacks: {
dragEnd: onDragEnd
}
Expand Down
4 changes: 2 additions & 2 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1585,7 +1585,7 @@ <h3>JAVASCRIPT</h3>
},
templates: {
dropdownItemNoMatch: function(data) {
return `<div class='${this.settings.classNames.dropdownItem}' tabindex="0" role="option">
return `<div class='${this.settings.classNames.dropdownItem}' data-tagify-control='dropdownItem' tabindex="0" role="option">
No suggestion found for: <strong>${data.value}</strong>
</div>`
}
Expand Down Expand Up @@ -2130,7 +2130,7 @@ <h3>JAVASCRIPT</h3>
// using 3-party script "dragsort"
// https://github.com/yairEO/dragsort
var dragsort = new DragSort(tagify.DOM.scope, {
selector:'.'+tagify.settings.classNames.tag,
selector: tagify.settings.tagSelector,
callbacks: {
dragEnd: onDragEnd
}
Expand Down
9 changes: 8 additions & 1 deletion src/parts/defaults.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,13 @@ export default {
empty : 'tagify--empty',
},

inputSelector: "[data-tagify-control='input']",
tagSelector: "[data-tagify-control='tag']",
tagTextSelector: "[data-tagify-control='tagText']",
tagRemoveBtn: "[data-tagify-control='tagRemoveBtn']",
dropdownWrapperSelector: "[data-tagify-control='dropdownWrapper']",
dropdownItemSelector: "[data-tagify-control='dropdownItem']",

dropdown: {
classname : '',
enabled : 2, // minimum input characters to be typed for the suggestions dropdown to show
Expand All @@ -82,4 +89,4 @@ export default {
beforePaste: () => Promise.resolve(),
suggestionClick: () => Promise.resolve()
}
}
}
6 changes: 3 additions & 3 deletions src/parts/dropdown.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ export function initDropdown(){
export default {
init(){
this.DOM.dropdown = this.parseTemplate('dropdown', [this.settings])
this.DOM.dropdown.content = this.DOM.dropdown.querySelector(this.settings.classNames.dropdownWrapperSelector)
this.DOM.dropdown.content = this.DOM.dropdown.querySelector(this.settings.dropdownWrapperSelector)
},

/**
Expand Down Expand Up @@ -391,7 +391,7 @@ export default {
},

onMouseOver(e){
var ddItem = e.target.closest(this.settings.classNames.dropdownItemSelector)
var ddItem = e.target.closest(this.settings.dropdownItemSelector)
// event delegation check
ddItem && this.dropdown.highlightOption(ddItem)
},
Expand All @@ -404,7 +404,7 @@ export default {
onClick(e){
if( e.button != 0 || e.target == this.DOM.dropdown || e.target == this.DOM.dropdown.content ) return; // allow only mouse left-clicks

var selectedElm = e.target.closest(this.settings.classNames.dropdownItemSelector),
var selectedElm = e.target.closest(this.settings.dropdownItemSelector),
selectedElmData = this.dropdown.getSuggestionDataByNode(selectedElm)

// temporary set the "actions" state to indicate to the main "blur" event it shouldn't run
Expand Down
18 changes: 9 additions & 9 deletions src/parts/events.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,7 +116,7 @@ export default {
eventData = {relatedTarget:e.relatedTarget},
isTargetSelectOption = this.state.actions.selectOption && (ddEnabled || !_s.dropdown.closeOnSelect),
isTargetAddNewBtn = this.state.actions.addNew && ddEnabled,
isRelatedTargetX = e.relatedTarget && e.relatedTarget.classList.contains(_s.classNames.tag) && this.DOM.scope.contains(e.relatedTarget),
isRelatedTargetX = e.relatedTarget && e.relatedTarget.dataset.tagifyControl === 'tag' && this.DOM.scope.contains(e.relatedTarget),
shouldAddTags;

if( type == 'blur' ){
Expand Down Expand Up @@ -188,7 +188,7 @@ export default {

onWindowKeyDown(e){
var focusedElm = document.activeElement,
isTag = focusedElm.classList.contains(this.settings.classNames.tag),
isTag = focusedElm.dataset.tagifyControl === 'tag',
isBelong = isTag && this.DOM.scope.contains(document.activeElement),
nextTag;

Expand Down Expand Up @@ -590,7 +590,7 @@ export default {

onClickScope(e){
var _s = this.settings,
tagElm = e.target.closest('.' + _s.classNames.tag),
tagElm = e.target.closest(_s.tagSelector),
timeDiffFocus = +new Date() - this.state.hasFocus;

if( e.target == this.DOM.scope ){
Expand All @@ -599,7 +599,7 @@ export default {
return
}

else if( e.target.classList.contains(_s.classNames.tagX) ){
else if( e.target.dataset.tagifyControl === 'tagRemoveBtn'){
this.removeTags( e.target.parentNode )
return
}
Expand Down Expand Up @@ -669,7 +669,7 @@ export default {
},

onEditTagInput( editableElm, e ){
var tagElm = editableElm.closest('.' + this.settings.classNames.tag),
var tagElm = editableElm.closest(this.settings.tagSelector),
tagElmIdx = this.getNodeIndex(tagElm),
tagData = this.tagData(tagElm),
value = this.input.normalize.call(this, editableElm),
Expand Down Expand Up @@ -721,7 +721,7 @@ export default {
if( !this.DOM.scope.contains(editableElm) ) return;

var _s = this.settings,
tagElm = editableElm.closest('.' + _s.classNames.tag),
tagElm = editableElm.closest(_s.tagSelector),
textValue = this.input.normalize.call(this, editableElm),
originalData = this.tagData(tagElm).__originalData, // pre-edit data
hasChanged = tagElm.innerHTML != tagElm.__tagifyTagData.__originalHTML,
Expand Down Expand Up @@ -802,14 +802,14 @@ export default {
},

onDoubleClickScope(e){
var tagElm = e.target.closest('.' + this.settings.classNames.tag),
var tagElm = e.target.closest(this.settings.tagSelector),
_s = this.settings,
isEditingTag,
isReadyOnlyTag;

if( !tagElm ) return

isEditingTag = tagElm.classList.contains(this.settings.classNames.tagEditing)
isEditingTag = tagElm.dataset.tagifyTagStatus === 'editing'
isReadyOnlyTag = tagElm.hasAttribute('readonly')

if( _s.mode != 'select' && !_s.readonly && !isEditingTag && !isReadyOnlyTag && this.settings.editTags )
Expand All @@ -819,4 +819,4 @@ export default {
this.trigger('dblclick', { tag:tagElm, index:this.getNodeIndex(tagElm), data:this.tagData(tagElm) })
}
}
}
}
9 changes: 6 additions & 3 deletions src/parts/templates.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ export default {
tabIndex="-1">
<span ${!_s.readonly || _s.mode != 'mix' ? 'contenteditable' : ''} data-placeholder="${_s.placeholder || '&#8203;'}" aria-placeholder="${_s.placeholder || ''}"
class="${_s.classNames.input}"
data-tagify-control='input'
role="textbox"
aria-autocomplete="both"
aria-multiline="${_s.mode=='mix'?true:false}"></span>
Expand All @@ -25,10 +26,11 @@ export default {
spellcheck='false'
tabIndex="${_s.a11y.focusableTags ? 0 : -1}"
class="${_s.classNames.tag} ${tagData.class || ""}"
data-tagify-control='tag'
${this.getAttributes(tagData)}>
<x title='' class="${_s.classNames.tagX}" role='button' aria-label='remove tag'></x>
<div>
<span class="${_s.classNames.tagText}">${tagData[_s.tagTextProp] || tagData.value}</span>
<span class="${_s.classNames.tagText}" data-tagify-control='tagText'>${tagData[_s.tagTextProp] || tagData.value}</span>
</div>
</tag>`
},
Expand All @@ -39,16 +41,17 @@ export default {
className = `${settings.classNames.dropdown}`;

return `<div class="${isManual ? "" : className} ${_sd.classname}" role="listbox" aria-labelledby="dropdown">
<div class="${settings.classNames.dropdownWrapper}"></div>
<div class="${settings.classNames.dropdownWrapper}" data-tagify-control='dropdownWrapper'></div>
</div>`
},

dropdownItem( item, tagify ){
return `<div ${this.getAttributes(item)}
class='${this.settings.classNames.dropdownItem} ${item.class ? item.class : ""}'
data-tagify-control='dropdownItem'
tabindex="0"
role="option">${item.value}</div>`
},

dropdownItemNoMatch: null
}
}
32 changes: 17 additions & 15 deletions src/tagify.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,11 +95,6 @@ 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(" ")[0] }
})

if( this.isIE )
_s.autoComplete = false; // IE goes crazy if this isn't false

Expand Down Expand Up @@ -262,7 +257,7 @@ Tagify.prototype = {
else {
DOM.originalInput = input
DOM.scope = this.parseTemplate('wrapper', [input, this.settings])
DOM.input = DOM.scope.querySelector(this.settings.classNames.inputSelector)
DOM.input = DOM.scope.querySelector(this.settings.inputSelector)
input.parentNode.insertBefore(DOM.scope, input)
}
},
Expand Down Expand Up @@ -416,7 +411,7 @@ Tagify.prototype = {
var _s = this.settings;

function getEditableElm(){
return tagElm.querySelector(_s.classNames.tagTextSelector)
return tagElm.querySelector(_s.tagTextSelector)
}

var editableElm = getEditableElm(),
Expand All @@ -430,7 +425,7 @@ Tagify.prototype = {
}

if( !editableElm ){
console.warn('Cannot find element in Tag template: .', _s.classNames.tagTextSelector);
console.warn('Cannot find element in Tag template: .', _s.tagTextSelector);
return;
}

Expand All @@ -439,6 +434,7 @@ Tagify.prototype = {

editableElm.setAttribute('contenteditable', true)
tagElm.classList.add( _s.classNames.tagEditing )
tagElm.dataset.tagifyTagStatus = 'editing'

// cache the original data, on the DOM node, before any modification ocurs, for possible revert
this.tagData(tagElm, {
Expand Down Expand Up @@ -490,6 +486,8 @@ Tagify.prototype = {
//this.validateTag(tagData);

tagElm.classList.toggle(this.settings.classNames.tagNotAllowed, !isValid)
if(!isValid)
tagElm.dataset.tagifyTagStatus = 'notAllowed'
return tagData.__isValid
},

Expand Down Expand Up @@ -558,7 +556,7 @@ Tagify.prototype = {
this.value.length = 0;

[].forEach.call(this.getTagElms(), node => {
if( node.classList.contains(this.settings.classNames.tagNotAllowed.split(' ')[0]) ) return
if( node.dataset.tagifyTagStatus === 'notAllowed' ) return
this.value.push( this.tagData(node) )
})

Expand Down Expand Up @@ -740,15 +738,18 @@ Tagify.prototype = {
},

getTagElms( ...classess ){
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
var selector = ''
if (classess.length > 0)
selector = '.' + classess.join('.')
selector += this.settings.tagSelector
return [].slice.call(this.DOM.scope.querySelectorAll(selector)) // convert nodeList to Array - https://stackoverflow.com/a/3199627/104380
},

/**
* gets the last non-readonly, not-in-the-proccess-of-removal tag
* gets the last non-readonly, not-in-the-process-of-removal tag
*/
getLastTag(){
var lastTag = this.DOM.scope.querySelectorAll(`${this.settings.classNames.tagSelector}:not(.${this.settings.classNames.tagHide}):not([readonly])`);
var lastTag = this.DOM.scope.querySelectorAll(`${this.settings.tagSelector}:not([data-tagify-tag-status='hide']):not([readonly])`);
return lastTag[lastTag.length - 1];
},

Expand Down Expand Up @@ -1432,7 +1433,7 @@ Tagify.prototype = {

// if only a single tag is to be removed
if( tagsToRemove.length == 1 ){
if( tagsToRemove[0].node.classList.contains(this.settings.classNames.tagNotAllowed) )
if( tagsToRemove[0].node.dataset.tagifyTagStatus === 'notAllowed' )
silent = true
}

Expand Down Expand Up @@ -1465,6 +1466,7 @@ Tagify.prototype = {
tag.node.style.width = parseFloat(window.getComputedStyle(tag.node).width) + 'px'
document.body.clientTop // force repaint for the width to take affect before the "hide" class below
tag.node.classList.add(this.settings.classNames.tagHide)
tag.node.dataset.tagifyTagStatus = 'hide'

// manual timeout (hack, since transitionend cannot be used because of hover)
setTimeout(removeNode.bind(this), tranDuration, tag)
Expand Down Expand Up @@ -1584,7 +1586,7 @@ Tagify.prototype = {
if( node.nodeType == 1 ){
const tagData = that.tagData(node);

if( node.classList.contains(that.settings.classNames.tag) && tagData ){
if( node.dataset.tagifyControl === 'tag' && tagData ){
if( tagData.__removed )
return;
else
Expand Down