<multi-toggler data-target=".toggle-target" data-toggle-modifier="toggled">Modi-Toggler</multi-toggler>
<multi-toggler data-target=".toggle-target" data-toggle-modifier="toggled">Modi-Toggler</multi-toggler>
/* No context defined for this component. */
  • Content:
    /**
     * todo:
     *    - separate selectable elements and classNames
     */
    export default class ModiToggler extends HTMLElement {
      connectedCallback () {
        this.toggleModifier = this.getAttribute('data-toggle-modifier')
        this.toggleTargets = this.makeToggleTargets(this.getAttribute('data-target'), this.toggleModifier)
        this.onclick = this.toggle.bind(this)
        this.classList.add('enhanced')
      }
    
      toggle () {
        this.targets.forEach(target => target.element.classList.toggle(target.toggleClass))
        this.toggleSelf()
      }
    
      toggleSelf () {
        if (this.getAttribute('toggled') !== null) {
          this.removeAttribute('toggled')
        } else {
          this.setAttribute('toggled')
        }
      }
    
      makeToggleTargets (targetString, toggleModifier) {
        return targetString.split(',')
          .map(s => s.trim())
          .reduce((acc, selector) => {
            if (/-?[_a-zA-Z]+[_a-zA-Z0-9-]*/.test(selector)) { // test if valid single class
              acc.push({
                element: document.querySelector(selector),
                toggleClass: selector + '--' + toggleModifier
              })
            }
          }, [])
      }
    }
    
  • URL: /components/raw/modi-toggler/modi-toggler.js
  • Filesystem Path: components/01-atoms/togglers/modi-toggler/modi-toggler.js
  • Size: 1.1 KB
  • Handle: @modi-toggler
  • Preview:
  • Filesystem Path: components/01-atoms/togglers/modi-toggler/modi-toggler.html

Toggles a modifier on a BEM className of selected elements.