# Modi Toggler

Ready

- HTML
- View
- Context
- Assets
- Info
- Notes

`

    <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. */

`
File:

- 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,
                })
              }
              return acc
            }, [])
        }
      }

  `
- URL: /components/raw/modi-toggler/modi-toggler.js
- Filesystem Path: components/05-atoms/togglers/modi-toggler/modi-toggler.js
- Size: 1.1 KB

- Handle: @modi-toggler
- Preview:
  - With layout
  - Component only
- Filesystem Path: components/05-atoms/togglers/modi-toggler/modi-toggler.html

Toggles a modifier on a BEM className of selected elements.