@rhavenside/baseline 2.0.0

package/dist/js/swipe.js

@@ -0,0 +1,143 @@
+/**
+ * Base-Line Swipe Utility
+ * Baseline 2.0 compatible swipe with Base-Line naming
+ */
+
+import { on, off } from './util.js'
+
+const NAME = 'swipe'
+const EVENT_KEY = `.c.${NAME}`
+const EVENT_TOUCHSTART = `touchstart${EVENT_KEY}`
+const EVENT_TOUCHMOVE = `touchmove${EVENT_KEY}`
+const EVENT_TOUCHEND = `touchend${EVENT_KEY}`
+const EVENT_POINTERDOWN = `pointerdown${EVENT_KEY}`
+const EVENT_POINTERUP = `pointerup${EVENT_KEY}`
+const POINTER_TYPE_TOUCH = 'touch'
+const POINTER_TYPE_PEN = 'pen'
+const CLASS_NAME_POINTER_EVENT = 'pointer-event'
+const SWIPE_THRESHOLD = 40
+
+const Default = {
+  endCallback: null,
+  leftCallback: null,
+  rightCallback: null
+}
+
+class Swipe {
+  constructor(element, config = {}) {
+    this._element = element
+    this._config = { ...Default, ...config }
+
+    if (!element || !Swipe.isSupported()) {
+      return
+    }
+
+    this._deltaX = 0
+    this._supportPointerEvents = Boolean(window.PointerEvent)
+    this._initEvents()
+  }
+
+  static get Default() {
+    return Default
+  }
+
+  static get NAME() {
+    return NAME
+  }
+
+  static isSupported() {
+    return 'ontouchstart' in document.documentElement || navigator.maxTouchPoints > 0
+  }
+
+  dispose() {
+    if (this._boundStart) {
+      if (this._supportPointerEvents) {
+        off(this._element, EVENT_POINTERDOWN, this._boundStart)
+        off(this._element, EVENT_POINTERUP, this._boundEnd)
+      } else {
+        off(this._element, EVENT_TOUCHSTART, this._boundStart)
+        off(this._element, EVENT_TOUCHMOVE, this._boundMove)
+        off(this._element, EVENT_TOUCHEND, this._boundEnd)
+      }
+    }
+    if (this._element && this._element.classList) {
+      this._element.classList.remove(CLASS_NAME_POINTER_EVENT)
+    }
+  }
+
+  _start(event) {
+    if (!this._supportPointerEvents) {
+      this._deltaX = event.touches[0].clientX
+      return
+    }
+
+    if (this._eventIsPointerPenTouch(event)) {
+      this._deltaX = event.clientX
+    }
+  }
+
+  _end(event) {
+    if (this._eventIsPointerPenTouch(event)) {
+      this._deltaX = event.clientX - this._deltaX
+    }
+
+    this._handleSwipe()
+    if (this._config.endCallback) {
+      this._config.endCallback()
+    }
+  }
+
+  _move(event) {
+    this._deltaX = event.touches && event.touches.length > 1 ?
+      0 :
+      event.touches[0].clientX - this._deltaX
+  }
+
+  _handleSwipe() {
+    const absDeltaX = Math.abs(this._deltaX)
+
+    if (absDeltaX <= SWIPE_THRESHOLD) {
+      return
+    }
+
+    const direction = absDeltaX / this._deltaX
+
+    this._deltaX = 0
+
+    if (!direction) {
+      return
+    }
+
+    if (direction > 0 && this._config.rightCallback) {
+      this._config.rightCallback()
+    } else if (direction < 0 && this._config.leftCallback) {
+      this._config.leftCallback()
+    }
+  }
+
+  _initEvents() {
+    this._boundStart = (event) => this._start(event)
+    this._boundMove = (event) => this._move(event)
+    this._boundEnd = (event) => this._end(event)
+
+    if (this._supportPointerEvents) {
+      on(this._element, EVENT_POINTERDOWN, this._boundStart)
+      on(this._element, EVENT_POINTERUP, this._boundEnd)
+
+      if (this._element.classList) {
+        this._element.classList.add(CLASS_NAME_POINTER_EVENT)
+      }
+    } else {
+      on(this._element, EVENT_TOUCHSTART, this._boundStart)
+      on(this._element, EVENT_TOUCHMOVE, this._boundMove)
+      on(this._element, EVENT_TOUCHEND, this._boundEnd)
+    }
+  }
+
+  _eventIsPointerPenTouch(event) {
+    return this._supportPointerEvents && (event.pointerType === POINTER_TYPE_PEN || event.pointerType === POINTER_TYPE_TOUCH)
+  }
+}
+
+export default Swipe
+

package/dist/js/tab.js

@@ -0,0 +1,285 @@
+/**
+ * Base-Line Tab Component
+ * Baseline 2.0 compatible tabs with Base-Line naming
+ */
+
+import { BaseComponent } from './base.js'
+import { on, getElementFromSelector, getNextActiveElement, isDisabled, SelectorEngine } from './util.js'
+
+const NAME = 'tab'
+const DATA_KEY = `c.${NAME}`
+const EVENT_KEY = `.${DATA_KEY}`
+
+const EVENT_HIDE = `hide${EVENT_KEY}`
+const EVENT_HIDDEN = `hidden${EVENT_KEY}`
+const EVENT_SHOW = `show${EVENT_KEY}`
+const EVENT_SHOWN = `shown${EVENT_KEY}`
+const EVENT_CLICK_DATA_API = `click${EVENT_KEY}`
+const EVENT_KEYDOWN = `keydown${EVENT_KEY}`
+const EVENT_LOAD_DATA_API = `load${EVENT_KEY}`
+
+const ARROW_LEFT_KEY = 'ArrowLeft'
+const ARROW_RIGHT_KEY = 'ArrowRight'
+const ARROW_UP_KEY = 'ArrowUp'
+const ARROW_DOWN_KEY = 'ArrowDown'
+const HOME_KEY = 'Home'
+const END_KEY = 'End'
+
+const CLASS_NAME_ACTIVE = 'is-active'
+const CLASS_NAME_FADE = 'c-fade'
+const CLASS_NAME_SHOW = 'is-show'
+const CLASS_DROPDOWN = 'c-dropdown'
+
+const SELECTOR_DROPDOWN_TOGGLE = '.c-dropdown-toggle'
+const SELECTOR_DROPDOWN_MENU = '.c-dropdown-menu'
+const NOT_SELECTOR_DROPDOWN_TOGGLE = `:not(${SELECTOR_DROPDOWN_TOGGLE})`
+
+const SELECTOR_TAB_PANEL = '.c-list-group, .c-nav, [role="tablist"]'
+const SELECTOR_OUTER = '.c-nav-item, .c-list-group-item'
+const SELECTOR_INNER = `.c-nav-link${NOT_SELECTOR_DROPDOWN_TOGGLE}, .c-list-group-item${NOT_SELECTOR_DROPDOWN_TOGGLE}, [role="tab"]${NOT_SELECTOR_DROPDOWN_TOGGLE}`
+const SELECTOR_DATA_TOGGLE = '[data-c-toggle="tab"], [data-c-toggle="pill"], [data-bl-toggle="tab"], [data-bl-toggle="pill"], [data-bl-toggle="list"]'
+const SELECTOR_INNER_ELEM = `${SELECTOR_INNER}, ${SELECTOR_DATA_TOGGLE}`
+
+const SELECTOR_DATA_TOGGLE_ACTIVE = `.${CLASS_NAME_ACTIVE}[data-c-toggle="tab"], .${CLASS_NAME_ACTIVE}[data-c-toggle="pill"], .${CLASS_NAME_ACTIVE}[data-bl-toggle="tab"], .${CLASS_NAME_ACTIVE}[data-bl-toggle="pill"], .${CLASS_NAME_ACTIVE}[data-bl-toggle="list"]`
+
+class Tab extends BaseComponent {
+  constructor(element) {
+    super(element)
+    this._parent = this._element.closest(SELECTOR_TAB_PANEL)
+
+    if (!this._parent) {
+      return
+    }
+
+    // Set up initial aria attributes
+    this._setInitialAttributes(this._parent, this._getChildren())
+
+    on(this._element, EVENT_KEYDOWN, (event) => this._keydown(event))
+  }
+
+  static get NAME() {
+    return NAME
+  }
+
+  // Public
+  show() {
+    const innerElem = this._element
+    if (this._elemIsActive(innerElem)) {
+      return
+    }
+
+    // Search for active tab on same parent to deactivate it
+    const active = this._getActiveElem()
+
+    const hideEvent = active ?
+      this._triggerEvent(active, EVENT_HIDE, { relatedTarget: innerElem }) :
+      null
+
+    const showEvent = this._triggerEvent(innerElem, EVENT_SHOW, { relatedTarget: active })
+
+    if (showEvent.defaultPrevented || (hideEvent && hideEvent.defaultPrevented)) {
+      return
+    }
+
+    this._deactivate(active, innerElem)
+    this._activate(innerElem, active)
+  }
+
+  // Private
+  _activate(element, relatedElem) {
+    if (!element) {
+      return
+    }
+
+    element.classList.add(CLASS_NAME_ACTIVE)
+
+    this._activate(SelectorEngine.getElementFromSelector(element)) // Search and activate/show the proper section
+
+    const complete = () => {
+      if (element.getAttribute('role') !== 'tab') {
+        element.classList.add(CLASS_NAME_SHOW)
+        return
+      }
+
+      element.removeAttribute('tabindex')
+      element.setAttribute('aria-selected', true)
+      this._toggleDropDown(element, true)
+      this._triggerEvent(element, EVENT_SHOWN, {
+        relatedTarget: relatedElem
+      })
+    }
+
+    this._queueCallback(complete, element, element.classList.contains(CLASS_NAME_FADE))
+  }
+
+  _deactivate(element, relatedElem) {
+    if (!element) {
+      return
+    }
+
+    element.classList.remove(CLASS_NAME_ACTIVE)
+    element.blur()
+
+    this._deactivate(SelectorEngine.getElementFromSelector(element)) // Search and deactivate the shown section too
+
+    const complete = () => {
+      if (element.getAttribute('role') !== 'tab') {
+        element.classList.remove(CLASS_NAME_SHOW)
+        return
+      }
+
+      element.setAttribute('aria-selected', false)
+      element.setAttribute('tabindex', '-1')
+      this._toggleDropDown(element, false)
+      this._triggerEvent(element, EVENT_HIDDEN, { relatedTarget: relatedElem })
+    }
+
+    this._queueCallback(complete, element, element.classList.contains(CLASS_NAME_FADE))
+  }
+
+  _keydown(event) {
+    if (!([ARROW_LEFT_KEY, ARROW_RIGHT_KEY, ARROW_UP_KEY, ARROW_DOWN_KEY, HOME_KEY, END_KEY].includes(event.key))) {
+      return
+    }
+
+    event.stopPropagation()
+    event.preventDefault()
+
+    const children = this._getChildren().filter(element => !isDisabled(element))
+    let nextActiveElement
+
+    if ([HOME_KEY, END_KEY].includes(event.key)) {
+      nextActiveElement = children[event.key === HOME_KEY ? 0 : children.length - 1]
+    } else {
+      const isNext = [ARROW_RIGHT_KEY, ARROW_DOWN_KEY].includes(event.key)
+      nextActiveElement = getNextActiveElement(children, event.target, isNext, true)
+    }
+
+    if (nextActiveElement) {
+      nextActiveElement.focus({ preventScroll: true })
+      Tab.getOrCreateInstance(nextActiveElement).show()
+    }
+  }
+
+  _getChildren() {
+    return SelectorEngine.find(SELECTOR_INNER_ELEM, this._parent)
+  }
+
+  _getActiveElem() {
+    return this._getChildren().find(child => this._elemIsActive(child)) || null
+  }
+
+  _setInitialAttributes(parent, children) {
+    this._setAttributeIfNotExists(parent, 'role', 'tablist')
+
+    for (const child of children) {
+      this._setInitialAttributesOnChild(child)
+    }
+  }
+
+  _setInitialAttributesOnChild(child) {
+    child = this._getInnerElement(child)
+    const isActive = this._elemIsActive(child)
+    const outerElem = this._getOuterElement(child)
+    child.setAttribute('aria-selected', isActive)
+
+    if (outerElem !== child) {
+      this._setAttributeIfNotExists(outerElem, 'role', 'presentation')
+    }
+
+    if (!isActive) {
+      child.setAttribute('tabindex', '-1')
+    }
+
+    this._setAttributeIfNotExists(child, 'role', 'tab')
+
+    // set attributes to the related panel too
+    this._setInitialAttributesOnTargetPanel(child)
+  }
+
+  _setInitialAttributesOnTargetPanel(child) {
+    const target = SelectorEngine.getElementFromSelector(child)
+
+    if (!target) {
+      return
+    }
+
+    this._setAttributeIfNotExists(target, 'role', 'tabpanel')
+
+    if (child.id) {
+      this._setAttributeIfNotExists(target, 'aria-labelledby', `${child.id}`)
+    }
+  }
+
+  _toggleDropDown(element, open) {
+    const outerElem = this._getOuterElement(element)
+    if (!outerElem.classList.contains(CLASS_DROPDOWN)) {
+      return
+    }
+
+    const toggle = (selector, className) => {
+      const elem = SelectorEngine.findOne(selector, outerElem)
+      if (elem) {
+        elem.classList.toggle(className, open)
+      }
+    }
+
+    toggle(SELECTOR_DROPDOWN_TOGGLE, CLASS_NAME_ACTIVE)
+    toggle(SELECTOR_DROPDOWN_MENU, CLASS_NAME_SHOW)
+    outerElem.setAttribute('aria-expanded', open)
+  }
+
+  _setAttributeIfNotExists(element, attribute, value) {
+    if (!element.hasAttribute(attribute)) {
+      element.setAttribute(attribute, value)
+    }
+  }
+
+  _elemIsActive(elem) {
+    return elem.classList.contains(CLASS_NAME_ACTIVE)
+  }
+
+  _getInnerElement(elem) {
+    return elem.matches(SELECTOR_INNER_ELEM) ? elem : SelectorEngine.findOne(SELECTOR_INNER_ELEM, elem)
+  }
+
+  _getOuterElement(elem) {
+    return elem.closest(SELECTOR_OUTER) || elem
+  }
+
+  _triggerEvent(element, eventName, detail = {}) {
+    const event = new CustomEvent(eventName, {
+      bubbles: true,
+      cancelable: true,
+      detail
+    })
+    element.dispatchEvent(event)
+    return event
+  }
+
+  static getOrCreateInstance(element) {
+    return element._baseLineComponent || new Tab(element)
+  }
+}
+
+// Data API implementation
+on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) {
+  if (['A', 'AREA'].includes(this.tagName)) {
+    event.preventDefault()
+  }
+
+  if (isDisabled(this)) {
+    return
+  }
+
+  Tab.getOrCreateInstance(this).show()
+})
+
+// Initialize on focus
+on(window, EVENT_LOAD_DATA_API, () => {
+  for (const element of SelectorEngine.find(SELECTOR_DATA_TOGGLE_ACTIVE)) {
+    Tab.getOrCreateInstance(element)
+  }
+})
+
+export default Tab

package/dist/js/toast.js

@@ -0,0 +1,228 @@
+/**
+ * Base-Line Toast Component
+ * Baseline 2.0 compatible toast with Base-Line naming
+ * Based on Baseline-main architecture
+ */
+
+import { BaseComponent } from './base.js'
+import { EventHandler } from './util.js'
+import { enableDismissTrigger } from './util/component-functions.js'
+import { defineJQueryPlugin, reflow } from './util.js'
+
+const NAME = 'toast'
+const DATA_KEY = `c.${NAME}`
+const EVENT_KEY = `.${DATA_KEY}`
+
+const EVENT_MOUSEOVER = `mouseover${EVENT_KEY}`
+const EVENT_MOUSEOUT = `mouseout${EVENT_KEY}`
+const EVENT_FOCUSIN = `focusin${EVENT_KEY}`
+const EVENT_FOCUSOUT = `focusout${EVENT_KEY}`
+const EVENT_HIDE = `hide${EVENT_KEY}`
+const EVENT_HIDDEN = `hidden${EVENT_KEY}`
+const EVENT_SHOW = `show${EVENT_KEY}`
+const EVENT_SHOWN = `shown${EVENT_KEY}`
+
+const CLASS_NAME_FADE = 'c-fade'
+const CLASS_NAME_HIDE = 'c-hide' // @deprecated - kept here only for backwards compatibility
+const CLASS_NAME_SHOW = 'is-show'
+const CLASS_NAME_SHOWING = 'is-showing'
+
+const DefaultType = {
+  animation: 'boolean',
+  autohide: 'boolean',
+  delay: 'number'
+}
+
+const Default = {
+  animation: true,
+  autohide: true,
+  delay: 5000
+}
+
+/**
+ * Class definition
+ */
+
+class Toast extends BaseComponent {
+  constructor(element, config) {
+    super(element, config)
+
+    this._timeout = null
+    this._hasMouseInteraction = false
+    this._hasKeyboardInteraction = false
+    this._setListeners()
+  }
+
+  // Getters
+  static get Default() {
+    return Default
+  }
+
+  static get DefaultType() {
+    return DefaultType
+  }
+
+  static get NAME() {
+    return NAME
+  }
+
+  // Public
+  show() {
+    const showEvent = EventHandler.trigger(this._element, EVENT_SHOW)
+
+    if (showEvent.defaultPrevented) {
+      return
+    }
+
+    this._clearTimeout()
+
+    if (this._config.animation) {
+      this._element.classList.add(CLASS_NAME_FADE)
+    }
+
+    const complete = () => {
+      this._element.classList.remove(CLASS_NAME_SHOWING)
+      EventHandler.trigger(this._element, EVENT_SHOWN)
+
+      this._maybeScheduleHide()
+    }
+
+    this._element.classList.remove(CLASS_NAME_HIDE) // @deprecated
+    reflow(this._element)
+    this._element.classList.add(CLASS_NAME_SHOW, CLASS_NAME_SHOWING)
+
+    this._queueCallback(complete, this._element, this._config.animation)
+  }
+
+  hide() {
+    if (!this.isShown()) {
+      return
+    }
+
+    const hideEvent = EventHandler.trigger(this._element, EVENT_HIDE)
+
+    if (hideEvent.defaultPrevented) {
+      return
+    }
+
+    const complete = () => {
+      this._element.classList.add(CLASS_NAME_HIDE) // @deprecated
+      this._element.classList.remove(CLASS_NAME_SHOWING, CLASS_NAME_SHOW)
+      EventHandler.trigger(this._element, EVENT_HIDDEN)
+    }
+
+    this._element.classList.add(CLASS_NAME_SHOWING)
+    this._queueCallback(complete, this._element, this._config.animation)
+  }
+
+  dispose() {
+    this._clearTimeout()
+
+    if (this.isShown()) {
+      this._element.classList.remove(CLASS_NAME_SHOW)
+    }
+
+    super.dispose()
+  }
+
+  isShown() {
+    return this._element.classList.contains(CLASS_NAME_SHOW)
+  }
+
+  // Private
+  _maybeScheduleHide() {
+    if (!this._config.autohide) {
+      return
+    }
+
+    if (this._hasMouseInteraction || this._hasKeyboardInteraction) {
+      return
+    }
+
+    this._timeout = setTimeout(() => {
+      this.hide()
+    }, this._config.delay)
+  }
+
+  _onInteraction(event, isInteracting) {
+    switch (event.type) {
+      case 'mouseover':
+      case 'mouseout': {
+        this._hasMouseInteraction = isInteracting
+        break
+      }
+
+      case 'focusin':
+      case 'focusout': {
+        this._hasKeyboardInteraction = isInteracting
+        break
+      }
+
+      default: {
+        break
+      }
+    }
+
+    if (isInteracting) {
+      this._clearTimeout()
+      return
+    }
+
+    const nextElement = event.relatedTarget
+    if (this._element === nextElement || this._element.contains(nextElement)) {
+      return
+    }
+
+    this._maybeScheduleHide()
+  }
+
+  _setListeners() {
+    EventHandler.on(this._element, EVENT_MOUSEOVER, event => this._onInteraction(event, true))
+    EventHandler.on(this._element, EVENT_MOUSEOUT, event => this._onInteraction(event, false))
+    EventHandler.on(this._element, EVENT_FOCUSIN, event => this._onInteraction(event, true))
+    EventHandler.on(this._element, EVENT_FOCUSOUT, event => this._onInteraction(event, false))
+  }
+
+  _clearTimeout() {
+    clearTimeout(this._timeout)
+    this._timeout = null
+  }
+
+  // Static
+  static getOrCreateInstance(element, config = {}) {
+    return element._baseLineComponent || new Toast(element, config)
+  }
+
+  static getInstance(element) {
+    return element._baseLineComponent || null
+  }
+
+  static jQueryInterface(config) {
+    return this.each(function () {
+      const data = Toast.getOrCreateInstance(this, config)
+
+      if (typeof config === 'string') {
+        if (typeof data[config] === 'undefined') {
+          throw new TypeError(`No method named "${config}"`)
+        }
+
+        data[config]()
+      }
+    })
+  }
+}
+
+/**
+ * Data API implementation
+ */
+
+enableDismissTrigger(Toast)
+
+/**
+ * jQuery
+ */
+
+defineJQueryPlugin(Toast)
+
+export default Toast
+