@rhavenside/baseline 2.0.0

package/dist/js/carousel.js

@@ -0,0 +1,427 @@
+/**
+ * Base-Line Carousel Component
+ * Baseline 2.0 compatible carousel with Base-Line naming
+ */
+
+import { BaseComponent } from './base.js'
+import { getElement, getElements, on, off, one, executeAfterTransition, reflow, triggerTransitionEnd, onDOMContentLoaded, isVisible, getNextActiveElement, getElementFromSelector } from './util.js'
+import { addClass, removeClass, hasClass } from './component.js'
+import Swipe from './swipe.js'
+
+const NAME = 'carousel'
+const DATA_KEY = `c.${NAME}`
+const EVENT_KEY = `.${DATA_KEY}`
+const DATA_API_KEY = '.data-api'
+
+const ARROW_LEFT_KEY = 'ArrowLeft'
+const ARROW_RIGHT_KEY = 'ArrowRight'
+const TOUCHEVENT_COMPAT_WAIT = 500
+
+const ORDER_NEXT = 'next'
+const ORDER_PREV = 'prev'
+const DIRECTION_LEFT = 'left'
+const DIRECTION_RIGHT = 'right'
+
+const EVENT_SLIDE = `slide${EVENT_KEY}`
+const EVENT_SLID = `slid${EVENT_KEY}`
+const EVENT_KEYDOWN = `keydown${EVENT_KEY}`
+const EVENT_MOUSEENTER = `mouseenter${EVENT_KEY}`
+const EVENT_MOUSELEAVE = `mouseleave${EVENT_KEY}`
+const EVENT_DRAG_START = `dragstart${EVENT_KEY}`
+const EVENT_LOAD_DATA_API = `load${EVENT_KEY}${DATA_API_KEY}`
+const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`
+
+const CLASS_NAME_CAROUSEL = 'c-carousel'
+const CLASS_NAME_ACTIVE = 'is-active'
+const CLASS_NAME_SLIDE = 'c-slide'
+const CLASS_NAME_END = 'c-carousel-item-end'
+const CLASS_NAME_START = 'c-carousel-item-start'
+const CLASS_NAME_NEXT = 'c-carousel-item-next'
+const CLASS_NAME_PREV = 'c-carousel-item-prev'
+
+const SELECTOR_ACTIVE = '.is-active'
+const SELECTOR_ITEM = '.c-carousel__item'
+const SELECTOR_ACTIVE_ITEM = SELECTOR_ACTIVE + SELECTOR_ITEM
+const SELECTOR_ITEM_IMG = '.c-carousel__item img'
+const SELECTOR_INDICATORS = '.c-carousel-indicators'
+const SELECTOR_DATA_SLIDE = '[data-c-slide], [data-c-slide-to]'
+const SELECTOR_DATA_RIDE = '[data-c-ride="carousel"]'
+
+const KEY_TO_DIRECTION = {
+  [ARROW_LEFT_KEY]: DIRECTION_RIGHT,
+  [ARROW_RIGHT_KEY]: DIRECTION_LEFT
+}
+
+const Default = {
+  interval: 5000,
+  keyboard: true,
+  pause: 'hover',
+  ride: false,
+  touch: true,
+  wrap: true
+}
+
+class Carousel extends BaseComponent {
+  constructor(element, config) {
+    super(element, config)
+
+    this._interval = null
+    this._activeElement = null
+    this._isSliding = false
+    this.touchTimeout = null
+    this._swipeHelper = null
+
+    // Read data attributes and merge into config
+    const rideAttr = this._element.getAttribute('data-c-ride')
+    if (rideAttr && !this._config.ride) {
+      this._config.ride = rideAttr === 'carousel' ? CLASS_NAME_CAROUSEL : rideAttr
+    }
+
+    // Read interval from data attribute
+    const intervalAttr = this._element.getAttribute('data-c-interval')
+    if (intervalAttr) {
+      this._config.interval = parseInt(intervalAttr, 10)
+      this._config.defaultInterval = this._config.interval
+    }
+
+    this._indicatorsElement = getElement(SELECTOR_INDICATORS, this._element)
+    this._addEventListeners()
+
+    if (this._config.ride === CLASS_NAME_CAROUSEL) {
+      this.cycle()
+    }
+  }
+
+  static get NAME() {
+    return NAME
+  }
+
+  static get Default() {
+    return Default
+  }
+
+  _configAfterMerge(config) {
+    config.defaultInterval = config.interval
+    return config
+  }
+
+  // Public
+  next() {
+    this._slide(ORDER_NEXT)
+  }
+
+  nextWhenVisible() {
+    if (!document.hidden && isVisible(this._element)) {
+      this.next()
+    }
+  }
+
+  prev() {
+    this._slide(ORDER_PREV)
+  }
+
+  pause() {
+    if (this._isSliding) {
+      triggerTransitionEnd(this._element)
+    }
+
+    this._clearInterval()
+  }
+
+  cycle() {
+    this._clearInterval()
+    this._updateInterval()
+
+    this._interval = setInterval(() => this.nextWhenVisible(), this._config.interval)
+  }
+
+  _maybeEnableCycle() {
+    if (!this._config.ride) {
+      return
+    }
+
+    if (this._isSliding) {
+      one(this._element, EVENT_SLID, () => this.cycle())
+      return
+    }
+
+    this.cycle()
+  }
+
+  to(index) {
+    const items = this._getItems()
+    if (index > items.length - 1 || index < 0) {
+      return
+    }
+
+    if (this._isSliding) {
+      one(this._element, EVENT_SLID, () => this.to(index))
+      return
+    }
+
+    const activeIndex = this._getItemIndex(this._getActive())
+    if (activeIndex === index) {
+      return
+    }
+
+    const order = index > activeIndex ? ORDER_NEXT : ORDER_PREV
+
+    this._slide(order, items[index])
+  }
+
+  dispose() {
+    if (this._swipeHelper) {
+      this._swipeHelper.dispose()
+    }
+
+    super.dispose()
+  }
+
+  // Private
+  _addEventListeners() {
+    if (this._config.keyboard) {
+      on(this._element, EVENT_KEYDOWN, (event) => this._keydown(event))
+    }
+
+    if (this._config.pause === 'hover') {
+      on(this._element, EVENT_MOUSEENTER, () => this.pause())
+      on(this._element, EVENT_MOUSELEAVE, () => this._maybeEnableCycle())
+    }
+
+    if (this._config.touch && Swipe.isSupported()) {
+      this._addTouchEventListeners()
+    }
+  }
+
+  _addTouchEventListeners() {
+    for (const img of getElements(SELECTOR_ITEM_IMG, this._element)) {
+      on(img, EVENT_DRAG_START, (event) => event.preventDefault())
+    }
+
+    const endCallBack = () => {
+      if (this._config.pause !== 'hover') {
+        return
+      }
+
+      this.pause()
+      if (this.touchTimeout) {
+        clearTimeout(this.touchTimeout)
+      }
+
+      this.touchTimeout = setTimeout(() => this._maybeEnableCycle(), TOUCHEVENT_COMPAT_WAIT + this._config.interval)
+    }
+
+    const swipeConfig = {
+      leftCallback: () => this._slide(this._directionToOrder(DIRECTION_LEFT)),
+      rightCallback: () => this._slide(this._directionToOrder(DIRECTION_RIGHT)),
+      endCallback: endCallBack
+    }
+
+    this._swipeHelper = new Swipe(this._element, swipeConfig)
+  }
+
+  _keydown(event) {
+    if (/input|textarea/i.test(event.target.tagName)) {
+      return
+    }
+
+    const direction = KEY_TO_DIRECTION[event.key]
+    if (direction) {
+      event.preventDefault()
+      this._slide(this._directionToOrder(direction))
+    }
+  }
+
+  _getItemIndex(element) {
+    return this._getItems().indexOf(element)
+  }
+
+  _setActiveIndicatorElement(index) {
+    if (!this._indicatorsElement) {
+      return
+    }
+
+    const activeIndicator = getElement(SELECTOR_ACTIVE, this._indicatorsElement)
+
+    if (activeIndicator) {
+      removeClass(activeIndicator, CLASS_NAME_ACTIVE)
+      activeIndicator.removeAttribute('aria-current')
+    }
+
+    const newActiveIndicator = getElement(`[data-c-slide-to="${index}"]`, this._indicatorsElement)
+
+    if (newActiveIndicator) {
+      addClass(newActiveIndicator, CLASS_NAME_ACTIVE)
+      newActiveIndicator.setAttribute('aria-current', 'true')
+    }
+  }
+
+  _updateInterval() {
+    const element = this._activeElement || this._getActive()
+
+    if (!element) {
+      return
+    }
+
+    const elementInterval = Number.parseInt(element.getAttribute('data-c-interval'), 10)
+
+    this._config.interval = elementInterval || this._config.defaultInterval
+  }
+
+  _slide(order, element = null) {
+    if (this._isSliding) {
+      return
+    }
+
+    const activeElement = this._getActive()
+    const isNext = order === ORDER_NEXT
+    const nextElement = element || getNextActiveElement(this._getItems(), activeElement, isNext, this._config.wrap)
+
+    if (nextElement === activeElement) {
+      return
+    }
+
+    const nextElementIndex = this._getItemIndex(nextElement)
+
+    const triggerEvent = (eventName) => {
+      const event = new CustomEvent(eventName, {
+        bubbles: true,
+        cancelable: true,
+        detail: {
+          relatedTarget: nextElement,
+          direction: this._orderToDirection(order),
+          from: this._getItemIndex(activeElement),
+          to: nextElementIndex
+        }
+      })
+      this._element.dispatchEvent(event)
+      return event
+    }
+
+    const slideEvent = triggerEvent(EVENT_SLIDE)
+
+    if (slideEvent.defaultPrevented) {
+      return
+    }
+
+    if (!activeElement || !nextElement) {
+      return
+    }
+
+    const isCycling = Boolean(this._interval)
+    this.pause()
+
+    this._isSliding = true
+
+    this._setActiveIndicatorElement(nextElementIndex)
+    this._activeElement = nextElement
+
+    const directionalClassName = isNext ? CLASS_NAME_START : CLASS_NAME_END
+    const orderClassName = isNext ? CLASS_NAME_NEXT : CLASS_NAME_PREV
+
+    addClass(nextElement, orderClassName)
+
+    reflow(nextElement)
+
+    addClass(activeElement, directionalClassName)
+    addClass(nextElement, directionalClassName)
+
+    const completeCallBack = () => {
+      removeClass(nextElement, directionalClassName)
+      removeClass(nextElement, orderClassName)
+      addClass(nextElement, CLASS_NAME_ACTIVE)
+
+      removeClass(activeElement, CLASS_NAME_ACTIVE)
+      removeClass(activeElement, orderClassName)
+      removeClass(activeElement, directionalClassName)
+
+      this._isSliding = false
+
+      triggerEvent(EVENT_SLID)
+    }
+
+    this._queueCallback(completeCallBack, activeElement, this._isAnimated())
+
+    if (isCycling) {
+      this.cycle()
+    }
+  }
+
+  _isAnimated() {
+    return hasClass(this._element, CLASS_NAME_SLIDE)
+  }
+
+  _getActive() {
+    return getElement(SELECTOR_ACTIVE_ITEM, this._element)
+  }
+
+  _getItems() {
+    return getElements(SELECTOR_ITEM, this._element)
+  }
+
+  _clearInterval() {
+    if (this._interval) {
+      clearInterval(this._interval)
+      this._interval = null
+    }
+  }
+
+  _directionToOrder(direction) {
+    // RTL support would go here, but for now assume LTR
+    return direction === DIRECTION_LEFT ? ORDER_NEXT : ORDER_PREV
+  }
+
+  _orderToDirection(order) {
+    // RTL support would go here, but for now assume LTR
+    return order === ORDER_PREV ? DIRECTION_RIGHT : DIRECTION_LEFT
+  }
+
+  static getOrCreateInstance(element, config = {}) {
+    return element._baseLineComponent || new Carousel(element, config)
+  }
+}
+
+// Data API implementation
+on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_SLIDE, function (event) {
+  const target = getElementFromSelector(this)
+
+  if (!target || !hasClass(target, CLASS_NAME_CAROUSEL)) {
+    return
+  }
+
+  event.preventDefault()
+
+  const carousel = Carousel.getOrCreateInstance(target)
+  const slideIndex = this.getAttribute('data-c-slide-to')
+
+  if (slideIndex) {
+    carousel.to(parseInt(slideIndex, 10))
+    carousel._maybeEnableCycle()
+    return
+  }
+
+  if (this.getAttribute('data-c-slide') === 'next') {
+    carousel.next()
+    carousel._maybeEnableCycle()
+    return
+  }
+
+  carousel.prev()
+  carousel._maybeEnableCycle()
+})
+
+// Initialize carousels with data-c-ride on page load
+const initCarousels = () => {
+  const carousels = getElements(SELECTOR_DATA_RIDE)
+
+  for (const carousel of carousels) {
+    Carousel.getOrCreateInstance(carousel)
+  }
+}
+
+on(window, EVENT_LOAD_DATA_API, initCarousels)
+
+// Also initialize on DOMContentLoaded if page is already loaded
+onDOMContentLoaded(initCarousels)
+
+export default Carousel

package/dist/js/collapse.js

@@ -0,0 +1,233 @@
+/**
+ * Base-Line Collapse Component
+ * Baseline 2.0 compatible collapse with Base-Line naming
+ */
+
+import { BaseComponent } from './base.js'
+import { getElement, getElements, on, off, executeAfterTransition, reflow } from './util.js'
+import { addClass, removeClass, hasClass } from './component.js'
+
+const NAME = 'collapse'
+const DATA_KEY = `c.${NAME}`
+const EVENT_KEY = `.${DATA_KEY}`
+const DATA_API_KEY = `[data-c-${NAME}]`
+
+const EVENT_SHOW = `show${EVENT_KEY}`
+const EVENT_SHOWN = `shown${EVENT_KEY}`
+const EVENT_HIDE = `hide${EVENT_KEY}`
+const EVENT_HIDDEN = `hidden${EVENT_KEY}`
+const EVENT_CLICK = `click${EVENT_KEY}`
+const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`
+
+const CLASS_NAME_COLLAPSE = 'c-collapse'
+const CLASS_NAME_COLLAPSING = 'c-collapsing'
+const CLASS_NAME_COLLAPSED = 'c-collapsed'
+const CLASS_NAME_SHOW = 'is-show'
+
+const WIDTH = 'width'
+const HEIGHT = 'height'
+
+const SELECTOR_ACTIVES = '.c-collapse.is-show'
+const SELECTOR_DATA_TOGGLE = '[data-c-toggle="collapse"]'
+
+class Collapse extends BaseComponent {
+  constructor(element, config) {
+    super(element, config)
+    this._isTransitioning = false
+    this._triggerArray = []
+    this._init()
+  }
+
+  static get NAME() {
+    return NAME
+  }
+
+  static get Default() {
+    return {
+      toggle: true,
+      parent: null
+    }
+  }
+
+  _init() {
+    this._isShown = hasClass(this._element, CLASS_NAME_SHOW)
+    
+    // Get parent from config, data attribute on element, or data attribute on trigger
+    if (!this._config.parent) {
+      const parentSelector = this._element.getAttribute('data-c-parent')
+      if (parentSelector) {
+        this._config.parent = getElement(parentSelector)
+      } else {
+        // Try to find parent from trigger buttons
+        const triggers = getElements(SELECTOR_DATA_TOGGLE)
+        for (const trigger of triggers) {
+          const selector = trigger.getAttribute('data-c-target') || trigger.getAttribute('href')
+          const target = getElement(selector)
+          if (target === this._element) {
+            const parentSelectorFromTrigger = trigger.getAttribute('data-c-parent')
+            if (parentSelectorFromTrigger) {
+              this._config.parent = getElement(parentSelectorFromTrigger)
+              break
+            }
+          }
+        }
+      }
+    } else if (typeof this._config.parent === 'string') {
+      this._config.parent = getElement(this._config.parent)
+    }
+    
+    if (this._config.toggle) {
+      this.toggle()
+    }
+
+    this._bindEvents()
+  }
+
+  _bindEvents() {
+    const triggers = getElements(SELECTOR_DATA_TOGGLE)
+    triggers.forEach(trigger => {
+      const selector = trigger.getAttribute('data-c-target') || trigger.getAttribute('href')
+      const target = getElement(selector)
+      
+      if (target === this._element) {
+        this._triggerArray.push(trigger)
+        on(trigger, 'click', (e) => {
+          e.preventDefault()
+          this.toggle()
+        })
+      }
+    })
+  }
+
+  _getParent() {
+    return this._config.parent || null
+  }
+
+  _getSiblings() {
+    const parent = this._getParent()
+    if (!parent) {
+      return []
+    }
+    
+    return getElements(SELECTOR_ACTIVES, parent).filter(
+      element => element !== this._element && hasClass(element, CLASS_NAME_SHOW)
+    )
+  }
+
+  show() {
+    if (this._isTransitioning || hasClass(this._element, CLASS_NAME_SHOW)) {
+      return
+    }
+
+    const showEvent = new CustomEvent(EVENT_SHOW, {
+      bubbles: true,
+      cancelable: true
+    })
+
+    this._element.dispatchEvent(showEvent)
+
+    if (showEvent.defaultPrevented) {
+      return
+    }
+
+    // Close siblings if parent is set
+    const siblings = this._getSiblings()
+    siblings.forEach(sibling => {
+      const siblingInstance = Collapse.getOrCreateInstance(sibling, { toggle: false })
+      siblingInstance.hide()
+    })
+
+    this._isTransitioning = true
+    this._element.style.height = '0'
+    addClass(this._element, CLASS_NAME_COLLAPSING)
+    removeClass(this._element, CLASS_NAME_COLLAPSE)
+    reflow(this._element)
+
+    const height = this._element.scrollHeight
+    this._element.style.height = `${height}px`
+
+    executeAfterTransition(() => {
+      removeClass(this._element, CLASS_NAME_COLLAPSING)
+      addClass(this._element, CLASS_NAME_COLLAPSE)
+      addClass(this._element, CLASS_NAME_SHOW)
+      this._element.style.height = ''
+      this._isTransitioning = false
+
+      this._triggerArray.forEach(trigger => {
+        removeClass(trigger, CLASS_NAME_COLLAPSED)
+      })
+
+      const shownEvent = new CustomEvent(EVENT_SHOWN, { bubbles: true })
+      this._element.dispatchEvent(shownEvent)
+    }, this._element)
+  }
+
+  hide() {
+    if (this._isTransitioning || !hasClass(this._element, CLASS_NAME_SHOW)) {
+      return
+    }
+
+    const hideEvent = new CustomEvent(EVENT_HIDE, {
+      bubbles: true,
+      cancelable: true
+    })
+
+    this._element.dispatchEvent(hideEvent)
+
+    if (hideEvent.defaultPrevented) {
+      return
+    }
+
+    this._isTransitioning = true
+    const height = this._element.getBoundingClientRect().height
+    this._element.style.height = `${height}px`
+    reflow(this._element)
+
+    removeClass(this._element, CLASS_NAME_COLLAPSE)
+    addClass(this._element, CLASS_NAME_COLLAPSING)
+    this._element.style.height = ''
+
+    executeAfterTransition(() => {
+      removeClass(this._element, CLASS_NAME_COLLAPSING)
+      addClass(this._element, CLASS_NAME_COLLAPSE)
+      removeClass(this._element, CLASS_NAME_SHOW)
+      this._isTransitioning = false
+
+      this._triggerArray.forEach(trigger => {
+        addClass(trigger, CLASS_NAME_COLLAPSED)
+      })
+
+      const hiddenEvent = new CustomEvent(EVENT_HIDDEN, { bubbles: true })
+      this._element.dispatchEvent(hiddenEvent)
+    }, this._element)
+  }
+
+  toggle() {
+    if (hasClass(this._element, CLASS_NAME_SHOW)) {
+      this.hide()
+    } else {
+      this.show()
+    }
+  }
+
+  static getOrCreateInstance(element, config = {}) {
+    return element._baseLineComponent || new Collapse(element, config)
+  }
+}
+
+// Data API
+on(document, 'click', SELECTOR_DATA_TOGGLE, function (event) {
+  event.preventDefault()
+  const selector = this.getAttribute('data-c-target') || this.getAttribute('href')
+  const target = getElement(selector)
+  if (target) {
+    // Get parent from trigger button if available
+    const parentSelector = this.getAttribute('data-c-parent')
+    const config = parentSelector ? { parent: parentSelector } : {}
+    const collapse = Collapse.getOrCreateInstance(target, config)
+    collapse.toggle()
+  }
+})
+
+export default Collapse
+