{"version":3,"file":"toggling-TU7UqC1o.js","sources":["../../../app/frontend/javascript/components/toggling.js"],"sourcesContent":["import Loader from \"@/javascript/components/loader\"\nimport { slideTransition } from \"@/javascript/components/animations/slide\"\nimport resized from \"@/javascript/components/events/resized\"\n\n// Provides toggling functionality\n//\n// Place data-toggle='target' on a link (e.g. `a data-toggle='.show-this' Click Me`)\n//\n// The toggler will toggle (add/remove) the class `open` on the link and the target\n// It is up to the user to implement the CSS styles to do the any appropriate hiding,\n// showing or any other desired transition. A common pattern is:\n//\n// data-toggle-within : Scopo the element to be toggled within a parent element\n//\n// .target {\n//   .opened {\n//     display: none;\n//   }\n//\n//   .closed {\n//     display: block;\n//   }\n//\n//   &.open {\n//     .opened {\n//       display: block;\n//     }\n//\n//     .closed {\n//       display: none;\n//     }\n//   }\n// }\n//\n// a data-toggle='.target'\n//\n// .target\n//   .opened I'm open\n//   .closed I'm closed\n\nexport class Toggler {\n  constructor (elem, container, onChange, opts = {}) {\n    this.elem = elem\n    this.container = container\n    this.always = opts.always\n    this.opts = Object.assign({}, this._defaultOptions(), opts)\n    this.onChange = onChange || function () {}\n    this._bind()\n  }\n\n  set (visible) {\n    if(visible === this.isOpen) {\n      return\n    }\n    if(this.opts.pureCss != 'true'){\n      const animation = slideTransition(this.container, this._animationMilliseconds(), () => {\n        this.toggleClasses(visible)\n      })\n      animation.then(() => {\n        this.onToggleComplete()\n      })\n      this.onChange(visible, animation, this.elem, this.container)\n    }else{\n      this.toggleClasses(visible)\n      if (!this.container.togglerTransitionEndBound) {\n        this.container.addEventListener('transitionend', (event) => {\n          if(event.target !== this.container) {\n            return\n          }\n          this.onPureCssToggleComplete()\n        })\n        this.container.togglerTransitionEndBound = true\n      }\n\n      if (!this.container.togglerAnimationEndBound) {\n        this.container.addEventListener('animationend', (event) => {\n          if(event.target !== this.container) {\n            return\n          }\n          this.onPureCssToggleComplete()\n        })\n        this.container.togglerAnimationEndBound = true\n      }\n\n      let animationDuration = window.getComputedStyle(this.container,null).getPropertyValue('animation-duration')\n      let transitionDuration = window.getComputedStyle(this.container,null).getPropertyValue('transition-duration')\n\n      if(parseFloat(animationDuration) <= 0 && parseFloat(transitionDuration) <= 0) {\n        this.onPureCssToggleComplete()\n      }\n\n      this.onChange(visible, null, this.elem, this.container)\n    }\n  }\n\n  onPureCssToggleComplete () {\n    resized(this.container)\n    this.onToggleComplete()\n  }\n\n  toggleClasses (visible) {\n    this.isOpen = visible\n    if(this.isOpen) {\n      this.container.classList.add('open')\n      this.elem.classList.add('open')\n    } else {\n      this.elem.classList.remove('open')\n      this.container.classList.remove('open')\n    }\n  }\n\n  onToggleComplete () {\n    const scrollTarget = document.querySelector(this.opts.scrollTarget)\n    if(scrollTarget) {\n      scrollTarget.scrollIntoView({behavior: \"smooth\", block: \"start\", inline: \"nearest\"})\n    }\n    this.elem.dispatchEvent(new Event('elementToggled', {bubbles: true, cancelable: false, element: this.elem }));\n  }\n\n  toggle () {\n    if(this.always === 'close') {\n      this.isOpen=true\n    }\n    if(this.always ==='open') {\n      this.isOpen=false\n    }\n    if(!this.always) {\n      this.isOpen = this.container.classList.contains('open')\n    }\n    this.set(!this.isOpen)\n  }\n\n  _bind () {\n    this.elem.addEventListener('click', (e) => {\n      e.preventDefault()\n      e.stopPropagation()\n      this.toggle()\n    })\n  }\n\n  _defaultOptions () {\n    return {\n      animation: 200\n    }\n  }\n\n  _animationMilliseconds () {\n    let milliseconds\n\n    if(this.opts.animation === 'false') {\n      milliseconds = 0\n    } else {\n      milliseconds = this.opts.animation || 200\n    }\n\n    return milliseconds\n  }\n}\n\nclass RadioToggler extends Toggler {\n  _bind () {\n    document.querySelectorAll(`input[type='radio'][name='${this.elem.name}']`)\n      .forEach((radio) => {\n        const toggler = this\n        radio.addEventListener('change', function (e) {\n          toggler.set(this.value === toggler.elem.value)\n        })\n      })\n  }\n}\n\nclass CheckboxToggler extends Toggler {\n  _bind () {\n    this.elem.addEventListener('change', (e) => this.set(this.elem.checked))\n  }\n}\n\n// Toggles content when selected value is included in `values` passed in `opts`\nexport class SelectizeToggler extends Toggler {\n  _bind () {\n    this.elem.selectize.on('change', (newValue) => this.set(this.opts.values.includes(newValue)))\n  }\n}\n\nLoader.functional((content, resolve) => {\n  content.querySelectorAll('[data-toggle]').forEach((elem) => {\n    if(!elem.toggleEnabled && elem.dataset.toggle.length > 0) {\n      elem.toggleEnabled = true\n      let toggledContent = content.querySelector(elem.dataset.toggle)\n      const options = {}\n      options.animation = elem.dataset.toggleAnimation\n      options.scrollTarget = elem.dataset.scrollTarget\n      options.pureCss = elem.dataset.togglePureCss\n\n      if(elem.dataset.toggleWithin) {\n        toggledContent = elem.closest(elem.dataset.toggleWithin).querySelector(elem.dataset.toggle)\n      }\n\n      if(elem.nodeName === 'INPUT' && elem.type === 'radio') {\n        elem.toggler = new RadioToggler(elem, toggledContent, null, options)\n      } else if(elem.nodeName === 'INPUT' && elem.type === 'checkbox') {\n        elem.toggler = new CheckboxToggler(elem, toggledContent, null, options)\n      } else {\n        elem.toggler = new Toggler(elem, toggledContent, null, options)\n      }\n    }\n  })\n\n  resolve()\n})\n"],"names":["Toggler","elem","container","onChange","opts","visible","animation","slideTransition","event","animationDuration","transitionDuration","resized","scrollTarget","milliseconds","RadioToggler","radio","toggler","e","CheckboxToggler","SelectizeToggler","newValue","Loader","content","resolve","toggledContent","options"],"mappings":"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"}