Toggles a className for target elements when actions are performed on trigger elements (optionally only on a range of screen sizes)

classToggler.js

/*
classToggler.js
by Kodie Grantham - https://kodieg.com

Toggles a className for target elements when actions are performed on trigger elements (optionally only on a range of screen sizes)

Parameters:
  - triggerSelector [Default: '[data-class-toggle]'] - A selector string for the trigger element(s)
  - defaultTargetSelector [Default: '[data-class-toggle-target]'] - The selector string for the target element(s) if the triggered element does not have a data-class-toggle attribute set to a string
  - defaultClassName [Default: 'open'] - The class to toggle if the triggered element does not have a data-class-toggle-name attribute set to a string
  - defaultActions [Default: 'click,keypress'] - A comma-seperated list of actions that will trigger the className toggle if the triggerd element does not have a data-class-toggle-actions attribute set to a string
  - minWidth [Default: null] - The minimum size width the window must be to trigger the className toggle (null = no minimum)
  - maxWidth [Default: null] - The maximum size width the window must be to trigger the className toggle (null = no maximum)
 
Example HTML (with all default values, this works by simply including this file):
  <button data-class-toggle="#menu">Menu</button>
  <div id="menu">The Menu</div>
 
Example JS Usage:
  classToggler('.nav-icon-btn-account-menu', 'header .navigation', null, null, null, 1023)
*/

var classToggler = function (triggerSelector, defaultTargetSelector, defaultClassName, defaultActions, minWidth, maxWidth) {
  if (!triggerSelector) triggerSelector = '[data-class-toggle]'
  if (!defaultTargetSelector) defaultTargetSelector = '[data-class-toggle-target]'
  if (!defaultClassName) defaultClassName = 'open'
  if (!defaultActions) defaultActions = 'click,keypress'

  var triggerElements = document.querySelectorAll(triggerSelector)

  var triggerEvent = function (e) {
    if ((minWidth && window.innerWidth < minWidth) || (maxWidth && window.innerWidth > maxWidth)) {
      return
    }

    e.preventDefault()

    var triggerElement = e.currentTarget
    var className = triggerElement.getAttribute('data-class-toggle-name') || defaultClassName
    var targetSelector = triggerElement.getAttribute('data-class-toggle') || defaultTargetSelector
    var targetElements = document.querySelectorAll(targetSelector)

    triggerElement.classList.toggle(className)
  
    targetElements.forEach(function (targetElement) {
      targetElement.classList.toggle(className)
    })
  }

  triggerElements.forEach(function (triggerElement) {
    var actions = triggerElement.getAttribute('data-class-toggle-actions')

    actions = (actions ?? defaultActions).split(',')

    actions.forEach(function (action) {
      triggerElement.addEventListener(action, triggerEvent)
    })
  })
}

var initClassToggler = function () {
  classToggler()
}

window.addEventListener('load', initClassToggler);