spina 2.18.0 → 2.20.0

data/app/assets/javascripts/spina/libraries/stimulus-reveal@1.2.4.js

@@ -1,388 +0,0 @@
-import { Controller } from '@hotwired/stimulus'
-
-/**
- * Stimulus controller to toggle element visibility
- * @extends Controller
- */
-export default class RevealController extends Controller {
-  static get values() {
-    return {
-      open: Boolean,
-      transitioning: Boolean,
-      targetSelector: String,
-      toggleKeys: String,
-      showKeys: String,
-      hideKeys: String,
-      away: Boolean,
-      debug: Boolean,
-    }
-  }
-
-  connect() {
-    this._initCloseKeypressListener()
-    this._initToggleKeypressListener()
-    this._initShowKeypressListener()
-  }
-
-  /**
-   * Shows elements connected to the controller.
-   * @param {Event} event - an event with a currentTarget DOMElement
-   */
-  show(event) {
-    if (this.openValue || this.transitioningValue) return
-
-    this._init(event, true)
-  }
-
-  /**
-   * Hides elements connected to the controller.
-   * @param {Event} event - an event with a currentTarget DOMElement
-   */
-  hide(event) {
-    if (!this.openValue || this.transitioningValue) return
-
-    this._init(event, false)
-  }
-
-  /**
-   * Toggles elements connected to the controller.
-   * @param {Event} event - an event with a currentTarget DOMElement
-   */
-  toggle(event) {
-    if (this.transitioningValue) return
-
-    this._init(event, !this.openValue)
-  }
-
-  // Private methods
-
-  /**
-   * @private
-   * @param {Event} event
-   * @param {Event} shouldOpen
-   */
-  async _init(event, shouldOpen) {
-    if (event && event.currentTarget && event.currentTarget.dataset) {
-      if ('revealPreventDefault' in event.currentTarget.dataset) { event.preventDefault() }
-      if ('revealStopPropagation' in event.currentTarget.dataset) { event.stopPropagation() }
-    }
-    // start stuff
-    const startSelector = `${this.selector}[data-${shouldOpen ? 'enter' : 'leave'
-      }-start]`
-    const startPromises = this._didInitWithPromise(startSelector, shouldOpen)
-    await Promise.all(startPromises)
-
-    const defaultSelector = `${this.selector}:not([data-${shouldOpen ? 'enter' : 'leave'
-      }-start]):not([data-${shouldOpen ? 'enter' : 'leave'}-end])`
-    const defaultPromises = this._didInitWithPromise(
-      defaultSelector,
-      shouldOpen
-    )
-    await Promise.all(defaultPromises)
-
-    // end stuff
-    const endSelector = `${this.selector}[data-${shouldOpen ? 'enter' : 'leave'
-      }-end]`
-    const endPromises = this._didInitWithPromise(endSelector, shouldOpen)
-    await Promise.all(endPromises)
-  }
-
-  _didInitWithPromise(selector, shouldOpen) {
-    this._debug('selecting', selector, this.element.querySelectorAll(selector))
-    return Array.from(this.element.querySelectorAll(selector)).map(
-      (element) => {
-        return this._doInitTransition(element, shouldOpen)
-      }
-    )
-  }
-
-  /**
-   * @private
-   */
-  _initCloseKeypressListener() {
-    if (this.hasHideKeysValue) {
-      document.addEventListener('keydown', (event) => {
-        if (!this.openValue) return
-        if (!this.hideKeysValue.split(',').includes(event.key.toLowerCase())) {
-          return
-        }
-
-        event.stopPropagation()
-        this.toggle(event)
-      })
-    }
-  }
-
-  /**
-   * @private
-   */
-  _initToggleKeypressListener() {
-    if (this.hasToggleKeysValue) {
-      document.addEventListener('keydown', (event) => {
-        if (
-          !this.toggleKeysValue.split(',').includes(event.key.toLowerCase())
-        ) {
-          return
-        }
-
-        event.stopPropagation()
-
-        this.toggle(event)
-      })
-    }
-  }
-
-  /**
-   * @private
-   */
-  _initShowKeypressListener() {
-    if (this.hasShowKeysValue) {
-      document.addEventListener('keydown', (event) => {
-        if (this.openValue) return
-        if (!this.showKeysValue.split(',').includes(event.key.toLowerCase())) {
-          return
-        }
-
-        event.stopPropagation()
-
-        this.toggle(event)
-      })
-    }
-  }
-
-  /**
-   * @private
-   */
-  _awayHandler(event) {
-    if (!this.element.contains(event.target)) {
-      this.hide(event)
-    }
-    return true
-  }
-
-  /**
-   * @private
-   * @param {DOMElement} target
-   * @param {boolean} openState
-   */
-  _doInitTransition(target, openState) {
-    this._debug('init transition', `${openState ? 'open' : 'closed'}`, target)
-    this._debug('dispatching event', `reveal:${openState ? 'show' : 'hide'}`, target)
-    target.dispatchEvent(
-      new Event(`reveal:${openState ? 'show' : 'hide'}`, {
-        bubbles: true,
-        cancelable: false,
-      })
-    )
-
-    return new Promise((resolve, reject) => {
-      if (
-        'transition' in target.dataset &&
-        this.element.offsetParent !== null
-      ) {
-        requestAnimationFrame(() => {
-          this._transitionSetup(target, openState)
-          const _didEndTransition = this._didEndTransition.bind(this)
-
-          target.addEventListener(
-            'transitionend',
-            function _didEndTransitionHandler() {
-              _didEndTransition(target, openState)
-              target.removeEventListener(
-                'transitionend',
-                _didEndTransitionHandler
-              )
-              resolve()
-            }
-          )
-
-          requestAnimationFrame(() => {
-            this._doStartTransition(target, openState)
-          })
-        })
-      } else {
-        if (openState) {
-          this._debug(
-            'force hidden - init',
-            `${openState ? 'open' : 'closed'}`,
-            target
-          )
-          target.hidden = !target.hidden
-        }
-        this._doCompleteTransition(target, openState)
-        resolve()
-      }
-    })
-  }
-
-  /**
-   * @private
-   * @param {DOMElement} target
-   */
-  _doStartTransition(target, openState) {
-    this._debug('start transition', `${openState ? 'open' : 'closed'}`, target)
-    this.transitioningValue = true
-    if (target.dataset.useTransitionClasses === 'true') {
-      const transitionClasses = this._transitionClasses(
-        target,
-        this.transitionType
-      )
-      target.classList.add(...transitionClasses.end.split(' '))
-      target.classList.remove(...transitionClasses.start.split(' '))
-    } else {
-      const transitions = this._transitionDefaults(openState)
-      target.style.transformOrigin = transitions.origin
-      target.style.transitionProperty = 'opacity transform'
-      target.style.transitionDuration = `${transitions.duration / 1000}s`
-      target.style.transitionTimingFunction = 'cubic-bezier(0.4, 0.0, 0.2, 1)'
-
-      target.style.opacity = transitions.to.opacity
-      target.style.transform = `scale(${transitions.to.scale / 100})`
-    }
-  }
-
-  /**
-   * @private
-   * @param {DOMElement} target
-   * @param {boolean} openState
-   */
-  _didEndTransition(target, openState) {
-    this._debug('end transition', `${openState ? 'open' : 'closed'}`, target)
-    if (target.dataset.useTransitionClasses === 'true') {
-      const transitionClasses = this._transitionClasses(
-        target,
-        this.transitionType
-      )
-      target.classList.remove(...transitionClasses.before.split(' '))
-    } else {
-      target.style.opacity = target.dataset.opacityCache
-      target.style.transform = target.dataset.transformCache
-      target.style.transformOrigin = target.dataset.transformOriginCache
-    }
-    this._doCompleteTransition(target, openState)
-  }
-
-  /**
-   * @private
-   * @param {DOMElement} target
-   * @param {boolean} openState
-   */
-  _doCompleteTransition(target, openState) {
-    this._debug(
-      'complete transition',
-      `${openState ? 'open' : 'closed'}`,
-      target
-    )
-    this.transitioningValue = false
-
-    if (!openState) {
-      this._debug(
-        'force hidden - complete',
-        `${openState ? 'open' : 'closed'}`,
-        target
-      )
-      target.hidden = !target.hidden
-    }
-    this.openValue = openState
-
-    this._debug('dispatching event', `reveal:${openState ? 'shown' : 'hidden'}`, target)
-    target.dispatchEvent(
-      new Event(`reveal:${openState ? 'shown' : 'hidden'}`, {
-        bubbles: true,
-        cancelable: false,
-      })
-    )
-
-    if (this.hasAwayValue) {
-      if (openState) {
-        this.awayHandler = this._awayHandler.bind(this)
-        document.addEventListener('click', this.awayHandler)
-      } else {
-        document.removeEventListener('click', this.awayHandler)
-      }
-    }
-
-    this._debug('dispatching event', 'reveal:complete', target)
-    target.dispatchEvent(
-      new Event('reveal:complete', { bubbles: true, cancelable: false })
-    )
-  }
-
-  /**
-   * @private
-   * @param {DOMElement} target
-   * @param {boolean} openState
-   */
-  _transitionSetup(target, openState) {
-    this.transitionType = openState ? 'transitionEnter' : 'transitionLeave'
-
-    if (this.transitionType in target.dataset) {
-      target.dataset.useTransitionClasses = true
-      const transitionClasses = this._transitionClasses(
-        target,
-        this.transitionType
-      )
-      target.classList.add(...transitionClasses.before.split(' '))
-      target.classList.add(...transitionClasses.start.split(' '))
-    } else {
-      target.dataset.useTransitionClasses = false
-      const transitions = this._transitionDefaults(openState)
-      target.dataset.opacityCache = target.style.opacity
-      target.dataset.transformCache = target.style.transform
-      target.dataset.transformOriginCache = target.style.transformOrigin
-
-      target.style.opacity = transitions.from.opacity
-      target.style.transform = `scale(${transitions.from.scale / 100})`
-    }
-    if (openState) {
-      this._debug('opening with transition', target)
-      target.hidden = !target.hidden
-    }
-  }
-
-  /**
-   * @private
-   * @param {boolean} openState
-   */
-  _transitionDefaults(openState) {
-    return {
-      duration: openState ? 200 : 150,
-      origin: 'center',
-      from: {
-        opacity: openState ? 0 : 1,
-        scale: openState ? 95 : 100,
-      },
-      to: {
-        opacity: openState ? 1 : 0,
-        scale: openState ? 100 : 95,
-      },
-    }
-  }
-
-  /**
-   * @private
-   * @param {DOMElement} target
-   * @param {string} transitionType
-   */
-  _transitionClasses(target, transitionType) {
-    return {
-      before: target.dataset[transitionType],
-      start: target.dataset[`${transitionType}Start`],
-      end: target.dataset[`${transitionType}End`],
-    }
-  }
-
-  _debug(...args) {
-    if (this.debugValue) console.log(...args)
-  }
-
-  get selector() {
-    return this.hasTargetSelectorValue
-      ? this.targetSelectorValue
-      : '[data-reveal]'
-  }
-}
-
-export {
-  RevealController
-}