@rhavenside/baseline 2.0.0

package/dist/js/util/backdrop.js

@@ -0,0 +1,133 @@
+/**
+ * Base-Line Backdrop Utility
+ * Baseline 2.0 compatible backdrop with Base-Line naming
+ */
+
+import { on, off, executeAfterTransition, reflow, getElement } from '../util.js'
+
+/**
+ * Constants
+ */
+
+const CLASS_NAME_FADE = 'c-fade'
+const CLASS_NAME_SHOW = 'is-show'
+const EVENT_MOUSEDOWN = `mousedown.c.backdrop`
+
+const Default = {
+  className: 'c-modal-backdrop',
+  clickCallback: null,
+  isAnimated: false,
+  isVisible: true,
+  rootElement: 'body'
+}
+
+/**
+ * Class definition
+ */
+
+class Backdrop {
+  constructor(config) {
+    this._config = { ...Default, ...config }
+    this._isAppended = false
+    this._element = null
+    
+    // Convert rootElement string to element
+    if (typeof this._config.rootElement === 'string') {
+      this._config.rootElement = getElement(this._config.rootElement) || document.body
+    }
+  }
+
+  static get Default() {
+    return Default
+  }
+
+  static get NAME() {
+    return 'backdrop'
+  }
+
+  // Public
+  show(callback) {
+    if (!this._config.isVisible) {
+      if (callback) callback()
+      return
+    }
+
+    this._append()
+
+    const element = this._getElement()
+    if (this._config.isAnimated) {
+      reflow(element)
+    }
+
+    element.classList.add(CLASS_NAME_SHOW)
+
+    this._emulateAnimation(() => {
+      if (callback) callback()
+    })
+  }
+
+  hide(callback) {
+    if (!this._config.isVisible) {
+      if (callback) callback()
+      return
+    }
+
+    this._getElement().classList.remove(CLASS_NAME_SHOW)
+
+    this._emulateAnimation(() => {
+      this.dispose()
+      if (callback) callback()
+    })
+  }
+
+  dispose() {
+    if (!this._isAppended) {
+      return
+    }
+
+    off(this._element, EVENT_MOUSEDOWN)
+
+    this._element.remove()
+    this._isAppended = false
+    this._element = null
+  }
+
+  // Private
+  _getElement() {
+    if (!this._element) {
+      const backdrop = document.createElement('div')
+      backdrop.className = this._config.className
+      if (this._config.isAnimated) {
+        backdrop.classList.add(CLASS_NAME_FADE)
+      }
+
+      this._element = backdrop
+    }
+
+    return this._element
+  }
+
+  _append() {
+    if (this._isAppended) {
+      return
+    }
+
+    const element = this._getElement()
+    this._config.rootElement.append(element)
+
+    on(element, EVENT_MOUSEDOWN, () => {
+      if (this._config.clickCallback) {
+        this._config.clickCallback()
+      }
+    })
+
+    this._isAppended = true
+  }
+
+  _emulateAnimation(callback) {
+    executeAfterTransition(callback, this._getElement(), this._config.isAnimated)
+  }
+}
+
+export default Backdrop
+

package/dist/js/util/component-functions.js

@@ -0,0 +1,111 @@
+/**
+ * Base-Line Component Functions Utility
+ * Baseline 2.0 compatible component functions with Base-Line naming
+ */
+
+import { SelectorEngine } from '../util.js'
+import { isDisabled } from '../util.js'
+
+/**
+ * Enable dismiss trigger for components
+ * @param {Function} component - Component class
+ * @param {string} method - Method name to call (default: 'hide')
+ */
+export const enableDismissTrigger = (component, method = 'hide') => {
+  const clickEvent = `click.dismiss${component.EVENT_KEY}`
+  const name = component.NAME
+  const selector = `[data-c-dismiss="${name}"]`
+
+  // Use direct event listener with capture phase to catch events before React
+  // This matches Bootstrap's approach but uses capture phase for React compatibility
+  document.addEventListener('click', function (event) {
+    // Traverse up the DOM tree to find the dismiss button (similar to Bootstrap's approach)
+    let target = event.target
+    let dismissButton = null
+
+    while (target && target !== document) {
+      if (target.matches && target.matches(selector)) {
+        dismissButton = target
+        break
+      }
+      target = target.parentElement
+    }
+
+    if (!dismissButton) {
+      return
+    }
+
+    if (['A', 'AREA'].includes(dismissButton.tagName)) {
+      event.preventDefault()
+    }
+
+    // Stop propagation to prevent React from interfering
+    event.stopPropagation()
+
+    if (isDisabled(dismissButton)) {
+      return
+    }
+
+    // First try to find the component element using closest (for dismiss buttons inside the component)
+    // This is the most reliable method
+    let componentElement = dismissButton.closest(`.c-${name}`)
+    
+    // If closest didn't work, try getElementFromSelector (for buttons with data-c-target pointing to the component)
+    if (!componentElement) {
+      componentElement = SelectorEngine.getElementFromSelector(dismissButton)
+    }
+    
+    // If still not found, search for all components of this type and check if they contain the dismiss button
+    // This handles cases where the dismiss button is not a direct child of the component
+    if (!componentElement) {
+      const allComponents = document.querySelectorAll(`.c-${name}`)
+      
+      for (const comp of allComponents) {
+        // Check if component contains the dismiss button
+        if (comp.contains(dismissButton)) {
+          componentElement = comp
+          break
+        }
+        // Also check if component has a dismiss button that matches
+        const dismissBtnInComp = comp.querySelector(`[data-c-dismiss="${name}"]`)
+        if (dismissBtnInComp === dismissButton) {
+          componentElement = comp
+          break
+        }
+      }
+    }
+    
+    // Last resort: find the first visible component of this type that has the 'show' class
+    // Only use this if we really can't find the component any other way
+    if (!componentElement) {
+      const visibleComponents = Array.from(document.querySelectorAll(`.c-${name}`)).filter(comp => 
+        comp.classList.contains('show')
+      )
+      
+      if (visibleComponents.length === 1) {
+        // Only use this if there's exactly one visible component
+        componentElement = visibleComponents[0]
+      } else if (visibleComponents.length > 1) {
+        // If multiple visible, try to find the one that contains the dismiss button
+        for (const comp of visibleComponents) {
+          if (comp.contains(dismissButton)) {
+            componentElement = comp
+            break
+          }
+        }
+      }
+    }
+    
+    if (!componentElement) {
+      return
+    }
+
+    const instance = component.getOrCreateInstance(componentElement)
+
+    // Method argument is left, for Alert and only, as it doesn't implement the 'hide' method
+    if (instance && typeof instance[method] === 'function') {
+      instance[method]()
+    }
+  }, true) // Use capture phase to catch events before React
+}
+

package/dist/js/util/focustrap.js

@@ -0,0 +1,101 @@
+/**
+ * Base-Line FocusTrap Utility
+ * Baseline 2.0 compatible focus trap with Base-Line naming
+ */
+
+import { on, off } from '../util.js'
+import { SelectorEngine } from '../util.js'
+
+/**
+ * Constants
+ */
+
+const DATA_KEY = 'c.focustrap'
+const EVENT_KEY = `.${DATA_KEY}`
+const EVENT_FOCUSIN = `focusin${EVENT_KEY}`
+const EVENT_KEYDOWN_TAB = `keydown.tab${EVENT_KEY}`
+
+const TAB_KEY = 'Tab'
+const TAB_NAV_FORWARD = 'forward'
+const TAB_NAV_BACKWARD = 'backward'
+
+const Default = {
+  autofocus: true,
+  trapElement: null
+}
+
+/**
+ * Class definition
+ */
+
+class FocusTrap {
+  constructor(config) {
+    this._config = { ...Default, ...config }
+    this._isActive = false
+    this._lastTabNavDirection = null
+  }
+
+  static get Default() {
+    return Default
+  }
+
+  static get NAME() {
+    return 'focustrap'
+  }
+
+  // Public
+  activate() {
+    if (this._isActive) {
+      return
+    }
+
+    if (this._config.autofocus) {
+      this._config.trapElement.focus()
+    }
+
+    off(document, EVENT_KEY) // guard against infinite focus loop
+    on(document, EVENT_FOCUSIN, (event) => this._handleFocusin(event))
+    on(document, EVENT_KEYDOWN_TAB, (event) => this._handleKeydown(event))
+
+    this._isActive = true
+  }
+
+  deactivate() {
+    if (!this._isActive) {
+      return
+    }
+
+    this._isActive = false
+    off(document, EVENT_KEY)
+  }
+
+  // Private
+  _handleFocusin(event) {
+    const { trapElement } = this._config
+
+    if (event.target === document || event.target === trapElement || trapElement.contains(event.target)) {
+      return
+    }
+
+    const elements = SelectorEngine.focusableChildren(trapElement)
+
+    if (elements.length === 0) {
+      trapElement.focus()
+    } else if (this._lastTabNavDirection === TAB_NAV_BACKWARD) {
+      elements[elements.length - 1].focus()
+    } else {
+      elements[0].focus()
+    }
+  }
+
+  _handleKeydown(event) {
+    if (event.key !== TAB_KEY) {
+      return
+    }
+
+    this._lastTabNavDirection = event.shiftKey ? TAB_NAV_BACKWARD : TAB_NAV_FORWARD
+  }
+}
+
+export default FocusTrap
+

package/dist/js/util/scrollbar.js

@@ -0,0 +1,111 @@
+/**
+ * Base-Line ScrollBarHelper Utility
+ * Baseline 2.0 compatible scrollbar helper with Base-Line naming
+ */
+
+import { SelectorEngine, isElement } from '../util.js'
+
+/**
+ * Constants
+ */
+
+const SELECTOR_FIXED_CONTENT = '.fixed-top, .fixed-bottom, .is-fixed, .sticky-top'
+const SELECTOR_STICKY_CONTENT = '.sticky-top'
+const PROPERTY_PADDING = 'padding-right'
+const PROPERTY_MARGIN = 'margin-right'
+
+/**
+ * Class definition
+ */
+
+class ScrollBarHelper {
+  constructor() {
+    this._element = document.body
+  }
+
+  // Public
+  getWidth() {
+    // https://developer.mozilla.org/en-US/docs/Web/API/Window/innerWidth#usage_notes
+    const documentWidth = document.documentElement.clientWidth
+    return Math.abs(window.innerWidth - documentWidth)
+  }
+
+  hide() {
+    const width = this.getWidth()
+    this._disableOverFlow()
+    // give padding to element to balance the hidden scrollbar width
+    this._setElementAttributes(this._element, PROPERTY_PADDING, calculatedValue => calculatedValue + width)
+    // trick: We adjust positive paddingRight and negative marginRight to sticky-top elements to keep showing fullwidth
+    this._setElementAttributes(SELECTOR_FIXED_CONTENT, PROPERTY_PADDING, calculatedValue => calculatedValue + width)
+    this._setElementAttributes(SELECTOR_STICKY_CONTENT, PROPERTY_MARGIN, calculatedValue => calculatedValue - width)
+  }
+
+  reset() {
+    this._resetElementAttributes(this._element, 'overflow')
+    this._resetElementAttributes(this._element, PROPERTY_PADDING)
+    this._resetElementAttributes(SELECTOR_FIXED_CONTENT, PROPERTY_PADDING)
+    this._resetElementAttributes(SELECTOR_STICKY_CONTENT, PROPERTY_MARGIN)
+  }
+
+  isOverflowing() {
+    return this.getWidth() > 0
+  }
+
+  // Private
+  _disableOverFlow() {
+    this._saveInitialAttribute(this._element, 'overflow')
+    this._element.style.overflow = 'hidden'
+  }
+
+  _setElementAttributes(selector, styleProperty, callback) {
+    const scrollbarWidth = this.getWidth()
+    const manipulationCallBack = element => {
+      if (element !== this._element && window.innerWidth > element.clientWidth + scrollbarWidth) {
+        return
+      }
+
+      this._saveInitialAttribute(element, styleProperty)
+      const calculatedValue = window.getComputedStyle(element).getPropertyValue(styleProperty)
+      element.style.setProperty(styleProperty, `${callback(Number.parseFloat(calculatedValue) || 0)}px`)
+    }
+
+    this._applyManipulationCallback(selector, manipulationCallBack)
+  }
+
+  _saveInitialAttribute(element, styleProperty) {
+    const actualValue = element.style.getPropertyValue(styleProperty)
+    if (actualValue) {
+      element.setAttribute(`data-c-${styleProperty}`, actualValue)
+    }
+  }
+
+  _resetElementAttributes(selector, styleProperty) {
+    const manipulationCallBack = element => {
+      const value = element.getAttribute(`data-c-${styleProperty}`)
+      // We only want to remove the property if the value is `null`; the value can also be zero
+      if (value === null) {
+        element.style.removeProperty(styleProperty)
+        return
+      }
+
+      element.removeAttribute(`data-c-${styleProperty}`)
+      element.style.setProperty(styleProperty, value)
+    }
+
+    this._applyManipulationCallback(selector, manipulationCallBack)
+  }
+
+  _applyManipulationCallback(selector, callBack) {
+    if (isElement(selector)) {
+      callBack(selector)
+      return
+    }
+
+    for (const sel of SelectorEngine.find(selector, this._element)) {
+      callBack(sel)
+    }
+  }
+}
+
+export default ScrollBarHelper
+