@rhavenside/baseline 2.0.0

package/dist/js/offcanvas.js

@@ -0,0 +1,356 @@
+/**
+ * Base-Line Offcanvas Component
+ * Baseline 2.0 compatible offcanvas with Base-Line naming
+ */
+
+import { BaseComponent } from './base.js'
+import { getElement, getElements, on, off, one, executeAfterTransition, reflow, getElementFromSelector, isDisabled, isVisible } from './util.js'
+import { addClass, removeClass, hasClass } from './component.js'
+import { enableDismissTrigger } from './util/component-functions.js'
+
+const NAME = 'offcanvas'
+const DATA_KEY = `c.${NAME}`
+const EVENT_KEY = `.${DATA_KEY}`
+const DATA_API_KEY = '.data-api'
+
+const EVENT_SHOW = `show${EVENT_KEY}`
+const EVENT_SHOWN = `shown${EVENT_KEY}`
+const EVENT_HIDE = `hide${EVENT_KEY}`
+const EVENT_HIDE_PREVENTED = `hidePrevented${EVENT_KEY}`
+const EVENT_HIDDEN = `hidden${EVENT_KEY}`
+const EVENT_RESIZE = `resize${EVENT_KEY}`
+const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`
+const EVENT_KEYDOWN_DISMISS = `keydown.dismiss${EVENT_KEY}`
+const EVENT_LOAD_DATA_API = `load${EVENT_KEY}${DATA_API_KEY}`
+
+const ESCAPE_KEY = 'Escape'
+
+const CLASS_NAME_SHOW = 'show'
+const CLASS_NAME_SHOWING = 'showing'
+const CLASS_NAME_HIDING = 'hiding'
+const CLASS_NAME_BACKDROP = 'c-offcanvas-backdrop'
+const OPEN_SELECTOR = '.c-offcanvas.show'
+
+const SELECTOR_DATA_TOGGLE = '[data-c-toggle="offcanvas"]'
+const SELECTOR_DATA_DISMISS = '[data-c-dismiss="offcanvas"]'
+
+const Default = {
+  backdrop: true,
+  keyboard: true,
+  scroll: false
+}
+
+class Offcanvas extends BaseComponent {
+  constructor(element, config) {
+    super(element, config)
+    // Sync initial state with DOM - check if element already has 'show' class
+    const hasShowClass = element.classList.contains(CLASS_NAME_SHOW)
+    this._isShown = hasShowClass
+    
+    // If element already has 'show' class, check if there's an existing backdrop in the DOM
+    if (hasShowClass) {
+      const existingBackdrop = element.parentElement?.querySelector(`.${CLASS_NAME_BACKDROP}`)
+      if (existingBackdrop) {
+        // Create backdrop instance but reuse the existing DOM element
+        this._backdrop = this._initializeBackDrop()
+        // Manually set the backdrop element to the existing one
+        this._backdrop._element = existingBackdrop
+      } else {
+        this._backdrop = this._initializeBackDrop()
+      }
+    } else {
+      this._backdrop = this._initializeBackDrop()
+    }
+    
+    this._addEventListeners()
+  }
+
+  _configAfterMerge(config) {
+    // Read data attributes
+    const scroll = this._element.getAttribute('data-c-scroll')
+    const backdrop = this._element.getAttribute('data-c-backdrop')
+    
+    if (scroll !== null) {
+      config.scroll = scroll === 'true'
+    }
+    
+    if (backdrop !== null) {
+      config.backdrop = backdrop === 'true' ? true : backdrop === 'false' ? false : backdrop
+    }
+    
+    return config
+  }
+
+  static get NAME() {
+    return NAME
+  }
+
+  static get Default() {
+    return Default
+  }
+
+  // Public
+  toggle(relatedTarget) {
+    return this._isShown ? this.hide() : this.show(relatedTarget)
+  }
+
+  show(relatedTarget) {
+    if (this._isShown) {
+      return
+    }
+
+    const showEvent = new CustomEvent(EVENT_SHOW, {
+      bubbles: true,
+      cancelable: true,
+      detail: { relatedTarget }
+    })
+
+    this._element.dispatchEvent(showEvent)
+
+    if (showEvent.defaultPrevented) {
+      return
+    }
+
+    this._isShown = true
+    this._backdrop.show()
+
+    if (!this._config.scroll) {
+      document.body.style.overflow = 'hidden'
+    }
+
+    this._element.setAttribute('aria-modal', 'true')
+    this._element.setAttribute('role', 'dialog')
+    addClass(this._element, CLASS_NAME_SHOWING)
+
+    const completeCallback = () => {
+      addClass(this._element, CLASS_NAME_SHOW)
+      removeClass(this._element, CLASS_NAME_SHOWING)
+      const shownEvent = new CustomEvent(EVENT_SHOWN, {
+        bubbles: true,
+        detail: { relatedTarget }
+      })
+      this._element.dispatchEvent(shownEvent)
+    }
+
+    this._queueCallback(completeCallback, this._element, true)
+  }
+
+  hide() {
+    // Check if element has 'show' class even if _isShown is false (state might be out of sync)
+    const hasShowClass = this._element.classList.contains(CLASS_NAME_SHOW)
+    
+    if (!this._isShown && !hasShowClass) {
+      return
+    }
+
+    // If element has show class but _isShown is false, sync the state
+    if (!this._isShown && hasShowClass) {
+      this._isShown = true
+    }
+
+    const hideEvent = new CustomEvent(EVENT_HIDE, {
+      bubbles: true,
+      cancelable: true
+    })
+
+    this._element.dispatchEvent(hideEvent)
+
+    if (hideEvent.defaultPrevented) {
+      return
+    }
+
+    this._element.blur()
+    this._isShown = false
+    addClass(this._element, CLASS_NAME_HIDING)
+    if (this._backdrop && typeof this._backdrop.hide === 'function') {
+      this._backdrop.hide()
+    }
+
+    const completeCallback = () => {
+      removeClass(this._element, CLASS_NAME_SHOW)
+      removeClass(this._element, CLASS_NAME_HIDING)
+      this._element.removeAttribute('aria-modal')
+      this._element.removeAttribute('role')
+
+      if (!this._config.scroll) {
+        document.body.style.overflow = ''
+      }
+
+      const hiddenEvent = new CustomEvent(EVENT_HIDDEN, {
+        bubbles: true
+      })
+      this._element.dispatchEvent(hiddenEvent)
+    }
+
+    this._queueCallback(completeCallback, this._element, true)
+  }
+
+  dispose() {
+    this._backdrop.dispose()
+    super.dispose()
+  }
+
+  // Private
+  _initializeBackDrop() {
+    const clickCallback = () => {
+      if (this._config.backdrop === 'static') {
+        const hidePreventedEvent = new CustomEvent(EVENT_HIDE_PREVENTED, {
+          bubbles: true
+        })
+        this._element.dispatchEvent(hidePreventedEvent)
+        return
+      }
+
+      this.hide()
+    }
+
+    const isVisible = Boolean(this._config.backdrop)
+
+    return new Backdrop({
+      className: CLASS_NAME_BACKDROP,
+      isVisible,
+      isAnimated: true,
+      rootElement: this._element.parentNode,
+      clickCallback: isVisible ? clickCallback : null
+    })
+  }
+
+  _addEventListeners() {
+    on(this._element, EVENT_KEYDOWN_DISMISS, (event) => {
+      if (event.key !== ESCAPE_KEY) {
+        return
+      }
+
+      if (this._config.keyboard) {
+        this.hide()
+        return
+      }
+
+      const hidePreventedEvent = new CustomEvent(EVENT_HIDE_PREVENTED, {
+        bubbles: true
+      })
+      this._element.dispatchEvent(hidePreventedEvent)
+    })
+  }
+
+  static getOrCreateInstance(element, config = {}) {
+    if (element._baseLineComponent) {
+      // Sync state with DOM if instance already exists
+      const hasShowClass = element.classList.contains(CLASS_NAME_SHOW)
+      if (hasShowClass && !element._baseLineComponent._isShown) {
+        element._baseLineComponent._isShown = true
+      } else if (!hasShowClass && element._baseLineComponent._isShown) {
+        element._baseLineComponent._isShown = false
+      }
+      return element._baseLineComponent
+    }
+    return new Offcanvas(element, config)
+  }
+}
+
+// Backdrop helper class
+class Backdrop {
+  constructor(config) {
+    this._config = config
+    this._element = null
+  }
+
+  show() {
+    if (!this._config.isVisible) {
+      return
+    }
+
+    if (!this._element) {
+      this._element = document.createElement('div')
+      this._element.className = `${this._config.className} c-fade`
+      if (this._config.rootElement) {
+        this._config.rootElement.appendChild(this._element)
+      } else {
+        document.body.appendChild(this._element)
+      }
+    }
+
+    reflow(this._element)
+
+    if (this._config.clickCallback) {
+      on(this._element, 'click', this._config.clickCallback)
+    }
+
+    addClass(this._element, 'show')
+  }
+
+  hide() {
+    if (!this._element) {
+      return
+    }
+
+    removeClass(this._element, 'show')
+
+    if (this._config.isAnimated) {
+      executeAfterTransition(() => {
+        this.dispose()
+      }, this._element)
+    } else {
+      this.dispose()
+    }
+  }
+
+  dispose() {
+    if (this._element) {
+      this._element.remove()
+      this._element = null
+    }
+  }
+}
+
+// Data API implementation
+on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) {
+  const target = getElementFromSelector(this)
+
+  if (['A', 'AREA'].includes(this.tagName)) {
+    event.preventDefault()
+  }
+
+  if (isDisabled(this)) {
+    return
+  }
+
+  one(target, EVENT_HIDDEN, () => {
+    // focus on trigger when it is closed
+    if (isVisible(this)) {
+      this.focus()
+    }
+  })
+
+  // avoid conflict when clicking a toggler of an offcanvas, while another is open
+  const alreadyOpen = getElement(OPEN_SELECTOR)
+  if (alreadyOpen && alreadyOpen !== target) {
+    Offcanvas.getOrCreateInstance(alreadyOpen).hide()
+  }
+
+  const data = Offcanvas.getOrCreateInstance(target)
+  data.toggle(this)
+})
+
+// Initialize on load
+on(window, EVENT_LOAD_DATA_API, () => {
+  const elements = getElements(OPEN_SELECTOR)
+  for (const element of elements) {
+    Offcanvas.getOrCreateInstance(element).show()
+  }
+})
+
+// Handle resize
+on(window, EVENT_RESIZE, () => {
+  const elements = getElements('[aria-modal][class*=show][class*=c-offcanvas-]')
+  for (const element of elements) {
+    if (window.getComputedStyle(element).position !== 'fixed') {
+      Offcanvas.getOrCreateInstance(element).hide()
+    }
+  }
+})
+
+// Enable dismiss trigger
+enableDismissTrigger(Offcanvas)
+
+export default Offcanvas

package/dist/js/popover.js

@@ -0,0 +1,241 @@
+/**
+ * Base-Line Popover Component
+ * Baseline 2.0 compatible popover with Base-Line naming
+ * Based on Baseline-main architecture
+ */
+
+import Tooltip from './tooltip.js'
+
+const NAME = 'popover'
+const DATA_KEY = `c.${NAME}`
+const EVENT_KEY = `.${DATA_KEY}`
+
+const SELECTOR_TITLE = '.c-popover-header'
+const SELECTOR_CONTENT = '.c-popover-body'
+
+class Popover extends Tooltip {
+  constructor(element, config) {
+    super(element, {
+      ...config,
+      template: '<div class="c-popover" role="tooltip"><div class="c-popover-arrow"></div><h3 class="c-popover-header"></h3><div class="c-popover-body"></div></div>'
+    })
+  }
+
+  static get NAME() {
+    return NAME
+  }
+
+  // Overrides
+  _isWithContent() {
+    return Boolean(this._getTitle() || this._getContent())
+  }
+
+  _getContentForTemplate() {
+    return {
+      [SELECTOR_TITLE]: this._getTitle(),
+      [SELECTOR_CONTENT]: this._getContent()
+    }
+  }
+
+  _copyCustomStyles(tip) {
+    // Copy CSS variables from trigger element to popover
+    // This allows custom styling via CSS variables on the trigger element
+    const elementStyle = this._element.style
+    const computedStyle = window.getComputedStyle(this._element)
+    const popoverStyles = tip.style
+    const header = tip.querySelector(SELECTOR_TITLE)
+    const body = tip.querySelector(SELECTOR_CONTENT)
+    
+    // Get all CSS variables that start with --bl-popover-
+    // First check inline styles (for React style props)
+    const cssVariables = new Set()
+    
+    // Check inline styles
+    for (let i = 0; i < elementStyle.length; i++) {
+      const property = elementStyle[i]
+      if (property.startsWith('--bl-popover-')) {
+        cssVariables.add(property)
+      }
+    }
+    
+    // Also check computed styles (for CSS classes)
+    for (let i = 0; i < computedStyle.length; i++) {
+      const property = computedStyle[i]
+      if (property.startsWith('--bl-popover-')) {
+        cssVariables.add(property)
+      }
+    }
+    
+    // Copy each CSS variable to the popover element
+    // Inline styles have higher specificity than CSS classes, so they will override dark mode
+    cssVariables.forEach(variable => {
+      // Prefer inline style value, fallback to computed style
+      const value = elementStyle.getPropertyValue(variable) || computedStyle.getPropertyValue(variable)
+      if (value) {
+        // Set on popover element - CSS variables will be inherited by header and body
+        popoverStyles.setProperty(variable, value)
+        
+        // Also set directly on header/body if they are header/body specific variables
+        // This ensures they override dark mode styles even if inheritance doesn't work
+        if (variable.includes('header') && header) {
+          header.style.setProperty(variable, value)
+        } else if (variable.includes('body') && body) {
+          body.style.setProperty(variable, value)
+        }
+      }
+    })
+  }
+
+  _createTipElement(content) {
+    const tip = super._createTipElement(content)
+
+    // Copy custom CSS variables from trigger element
+    this._copyCustomStyles(tip)
+
+    // Set content for popover header and body
+    if (content && typeof content === 'object') {
+      const header = tip.querySelector(SELECTOR_TITLE)
+      const body = tip.querySelector(SELECTOR_CONTENT)
+
+      if (header) {
+        const titleContent = content[SELECTOR_TITLE] || ''
+        if (titleContent) {
+          if (this._config.html) {
+            header.innerHTML = titleContent
+          } else {
+            header.textContent = titleContent
+          }
+          header.style.display = ''
+        } else {
+          header.style.display = 'none'
+        }
+      }
+
+      if (body) {
+        const bodyContent = content[SELECTOR_CONTENT] || ''
+        if (this._config.html) {
+          body.innerHTML = bodyContent
+        } else {
+          body.textContent = bodyContent
+        }
+      }
+    }
+
+    return tip
+  }
+
+  _getTitle() {
+    return this._resolvePossibleFunction(this._config.title) ||
+           this._element.getAttribute('data-c-title') ||
+           this._element.getAttribute('data-bl-title') ||
+           super._getTitle() ||
+           ''
+  }
+
+  _getContent() {
+    return this._resolvePossibleFunction(this._config.content) ||
+           this._element.getAttribute('data-c-content') ||
+           this._element.getAttribute('data-bl-content') ||
+           this._element.getAttribute('data-c-body') ||
+           ''
+  }
+
+  show() {
+    super.show()
+    
+    // Ensure custom CSS variables are applied after showing
+    // This ensures they override dark mode styles
+    // Use requestAnimationFrame to ensure DOM is ready
+    if (this.tip) {
+      requestAnimationFrame(() => {
+        this._copyCustomStyles(this.tip)
+      })
+    }
+  }
+
+  setContent(content) {
+    this._newContent = typeof content === 'object' ? content : {
+      [SELECTOR_TITLE]: this._getTitle(),
+      [SELECTOR_CONTENT]: content
+    }
+    if (this._isShown()) {
+      this._disposePopper()
+      this.show()
+    }
+  }
+
+  static get Default() {
+    return {
+      ...Tooltip.Default,
+      content: '',
+      offset: [0, 8],
+      placement: 'right',
+      template: '<div class="c-popover" role="tooltip"><div class="c-popover-arrow"></div><h3 class="c-popover-header"></h3><div class="c-popover-body"></div></div>',
+      trigger: 'click'
+    }
+  }
+
+  static get DefaultType() {
+    return {
+      ...Tooltip.DefaultType,
+      content: '(null|string|element|function)'
+    }
+  }
+
+  static getOrCreateInstance(element, config = {}) {
+    if (!element._baseLineComponent) {
+      element._baseLineComponent = new Popover(element, config)
+    }
+    return element._baseLineComponent
+  }
+}
+
+/**
+ * Data API implementation
+ */
+
+// Support both data-c-toggle="popover" and data-bl-toggle="popover"
+const SELECTOR_DATA_TOGGLE = '[data-c-toggle="popover"]'
+const SELECTOR_DATA_TOGGLE_BS = '[data-bl-toggle="popover"]'
+
+// Initialize popovers on DOM ready
+import { onDOMContentLoaded } from './util.js'
+
+onDOMContentLoaded(() => {
+  const popoverElements = document.querySelectorAll(`${SELECTOR_DATA_TOGGLE}, ${SELECTOR_DATA_TOGGLE_BS}`)
+  popoverElements.forEach(element => {
+    if (!element._baseLineComponent) {
+      const title = element.getAttribute('data-c-title') || 
+                   element.getAttribute('data-bl-title') || 
+                   element.getAttribute('title')
+      const content = element.getAttribute('data-c-content') || 
+                     element.getAttribute('data-bl-content')
+      const placement = element.getAttribute('data-c-placement') || 
+                       element.getAttribute('data-bl-placement') || 
+                       'right'
+      const container = element.getAttribute('data-c-container') ||
+                       element.getAttribute('data-bl-container') ||
+                       false
+      const html = element.getAttribute('data-c-html') === 'true' ||
+                   element.getAttribute('data-bl-html') === 'true' ||
+                   false
+      const trigger = element.getAttribute('data-c-trigger') ||
+                     element.getAttribute('data-bl-trigger') ||
+                     'click'
+      
+      if (title || content) {
+        Popover.getOrCreateInstance(element, {
+          title: title,
+          content: content,
+          placement: placement,
+          container: container,
+          html: html,
+          trigger: trigger
+        })
+      }
+    }
+  })
+})
+
+export default Popover
+