128 lines
2.8 KiB
JavaScript
128 lines
2.8 KiB
JavaScript
/*
|
|
* HSToggleState Plugin
|
|
* @version: 3.0.1 (Sun, 01 Aug 2021)
|
|
* @author: HtmlStream
|
|
* @event-namespace: .HSToggleState
|
|
* @license: Htmlstream Libraries (https://htmlstream.com/)
|
|
* Copyright 2021 Htmlstream
|
|
*/
|
|
|
|
const dataAttributeName = 'data-hs-toggle-state-options'
|
|
const defaults = {
|
|
targetSelector: null,
|
|
slaveSelector: null,
|
|
|
|
classMap: {
|
|
toggle: 'toggled'
|
|
}
|
|
}
|
|
|
|
export default class HSToggleState {
|
|
|
|
constructor(el, options, id) {
|
|
this.collection = []
|
|
const that = this
|
|
let elems
|
|
|
|
if (el instanceof HTMLElement) {
|
|
elems = [el]
|
|
} else if (el instanceof Object) {
|
|
elems = el
|
|
} else {
|
|
elems = document.querySelectorAll(el)
|
|
}
|
|
|
|
for (let i = 0; i < elems.length; i += 1) {
|
|
that.addToCollection(elems[i], options, id || elems[i].id)
|
|
}
|
|
|
|
if (!that.collection.length) {
|
|
return false
|
|
}
|
|
|
|
// initialization calls
|
|
that._init()
|
|
|
|
return this
|
|
}
|
|
|
|
_init() {
|
|
const that = this;
|
|
|
|
for (let i = 0; i < that.collection.length; i += 1) {
|
|
let _$el
|
|
let _options
|
|
|
|
if (that.collection[i].hasOwnProperty('$initializedEl')) {
|
|
continue
|
|
}
|
|
|
|
_$el = that.collection[i].$el;
|
|
_options = that.collection[i].options
|
|
|
|
that.prepareObject(_$el, _options)
|
|
const $slaveSelector = document.querySelector(_options.slaveSelector)
|
|
|
|
_$el.addEventListener('click', () => {
|
|
_$el.classList.toggle(_options.classMap.toggle)
|
|
|
|
if (_options.slaveSelector) {
|
|
if (_$el.classList.contains(_options.classMap.toggle)) {
|
|
$slaveSelector.classList.add(_options.classMap.toggle)
|
|
} else {
|
|
$slaveSelector.classList.remove(_options.classMap.toggle)
|
|
}
|
|
}
|
|
|
|
that.checkState(_$el, _options)
|
|
});
|
|
|
|
if ($slaveSelector) {
|
|
$slaveSelector.addEventListener('click', () => {
|
|
document.querySelector(`[data-hs-toggle-state-slave="${_options.slaveSelector}"]`).classList.remove(_options.classMap.toggle)
|
|
})
|
|
}
|
|
|
|
that.collection[i].$initializedEl = _options
|
|
}
|
|
}
|
|
|
|
prepareObject($el, settings) {
|
|
$el.setAttribute('data-hs-toggle-state-slave', settings.slaveSelector)
|
|
}
|
|
|
|
checkState($el, settings) {
|
|
const $targetSelectors = Array.from(document.querySelectorAll(settings.targetSelector))
|
|
if ($el.classList.contains(settings.classMap.toggle)) {
|
|
$targetSelectors.forEach($target => $target.checked = true)
|
|
} else {
|
|
$targetSelectors.forEach($target => $target.checked = false)
|
|
}
|
|
}
|
|
|
|
addToCollection (item, options, id) {
|
|
this.collection.push({
|
|
$el: item,
|
|
id: id || null,
|
|
options: Object.assign(
|
|
{},
|
|
defaults,
|
|
item.hasAttribute(dataAttributeName)
|
|
? JSON.parse(item.getAttribute(dataAttributeName))
|
|
: {},
|
|
options,
|
|
),
|
|
})
|
|
}
|
|
|
|
getItem (item) {
|
|
if (typeof item === 'number') {
|
|
return this.collection[item].$initializedEl;
|
|
} else {
|
|
return this.collection.find(el => {
|
|
return el.id === item;
|
|
}).$initializedEl;
|
|
}
|
|
}
|
|
}
|