@rhavenside/baseline 2.0.0

package/dist/js/util.js

@@ -0,0 +1,564 @@
+/**
+ * Base-Line JavaScript Utilities
+ * Baseline 2.0 compatible utilities with Base-Line naming
+ */
+
+/**
+ * Properly escape IDs selectors to handle weird IDs
+ * @param {string} selector
+ * @returns {string}
+ */
+export function parseSelector(selector) {
+  if (selector && window.CSS && window.CSS.escape) {
+    // document.querySelector needs escaping to handle IDs (html5+) containing for instance /
+    selector = selector.replace(/#([^\s"#']+)/g, (match, id) => `#${CSS.escape(id)}`)
+  }
+
+  return selector
+}
+
+/**
+ * Get element by selector or return element if already an element
+ * Baseline-compatible: accepts both selectors and elements
+ */
+export function getElement(object, parent = document) {
+  // it's a jQuery object or a node element
+  if (isElement(object)) {
+    return object.jquery ? object[0] : object
+  }
+
+  if (typeof object === 'string' && object.length > 0) {
+    return parent.querySelector(parseSelector(object))
+  }
+
+  return null
+}
+
+/**
+ * Get elements by selector
+ */
+export function getElements(selector, parent = document) {
+  return Array.from(parent.querySelectorAll(selector))
+}
+
+/**
+ * Get element from jQuery-like object or element
+ */
+export function getElementFromElement(element) {
+  if (element && element.jquery) {
+    return element[0]
+  }
+  return element
+}
+
+/**
+ * Type check functions
+ */
+export function isElement(element) {
+  return element && element.nodeType === Node.ELEMENT_NODE
+}
+
+export function isVisible(element) {
+  if (!isElement(element)) {
+    return false
+  }
+  const style = window.getComputedStyle(element)
+  return style.display !== 'none' && style.visibility !== 'hidden' && style.opacity !== '0'
+}
+
+export function isDisabled(element) {
+  if (!element || element.nodeType !== Node.ELEMENT_NODE) {
+    return true
+  }
+
+  if (element.classList && element.classList.contains('is-disabled')) {
+    return true
+  }
+
+  if (typeof element.disabled !== 'undefined') {
+    return element.disabled
+  }
+
+  return element.hasAttribute('disabled') && element.getAttribute('disabled') !== 'false'
+}
+
+/**
+ * Get transition duration from element
+ */
+export function getTransitionDurationFromElement(element) {
+  if (!isElement(element)) {
+    return 0
+  }
+
+  const transitionDuration = window.getComputedStyle(element).transitionDuration
+  const floatTransitionDuration = parseFloat(transitionDuration)
+
+  if (!floatTransitionDuration) {
+    return 0
+  }
+
+  return transitionDuration.includes('ms') ? floatTransitionDuration : floatTransitionDuration * 1000
+}
+
+/**
+ * Trigger transition end event
+ */
+export function triggerTransitionEnd(element) {
+  const event = new Event('transitionend', { bubbles: true, cancelable: true })
+  element.dispatchEvent(event)
+}
+
+/**
+ * Reflow - force reflow
+ */
+export function reflow(element) {
+  element.offsetHeight
+}
+
+/**
+ * Get jQuery element collection
+ */
+export function getjQuery() {
+  if (window.jQuery && !document.body.hasAttribute('data-bl-no-jquery')) {
+    return window.jQuery
+  }
+  return null
+}
+
+/**
+ * DOMContentLoaded helper
+ */
+export function onDOMContentLoaded(callback) {
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', callback)
+  } else {
+    callback()
+  }
+}
+
+/**
+ * Define property helper
+ */
+export function defineJQueryPlugin(plugin) {
+  const $ = getjQuery()
+  if ($) {
+    const name = plugin.NAME
+    const JQUERY_NO_CONFLICT = $.fn[name]
+    $.fn[name] = plugin.jQueryInterface
+    $.fn[name].Constructor = plugin
+    $.fn[name].noConflict = () => {
+      $.fn[name] = JQUERY_NO_CONFLICT
+      return plugin.jQueryInterface
+    }
+  }
+}
+
+/**
+ * Execute callback after transition
+ */
+export function executeAfterTransition(callback, transitionElement, waitForTransition = true) {
+  if (!waitForTransition) {
+    callback()
+    return
+  }
+
+  const duration = getTransitionDurationFromElement(transitionElement)
+  const emulatedDuration = duration + 5
+
+  let called = false
+
+  const handler = ({ target }) => {
+    if (target !== transitionElement) {
+      return
+    }
+
+    called = true
+    transitionElement.removeEventListener('transitionend', handler)
+    callback()
+  }
+
+  transitionElement.addEventListener('transitionend', handler)
+  setTimeout(() => {
+    if (!called) {
+      triggerTransitionEnd(transitionElement)
+    }
+  }, emulatedDuration)
+}
+
+/**
+ * Get next active element
+ */
+export function getNextActiveElement(list, activeElement, shouldGetNext, isCycleAllowed) {
+  const listLength = list.length
+  let index = list.indexOf(activeElement)
+
+  if (index === -1) {
+    return !shouldGetNext && isCycleAllowed ? list[listLength - 1] : list[0]
+  }
+
+  index += shouldGetNext ? 1 : -1
+
+  if (isCycleAllowed) {
+    index = (index + listLength) % listLength
+  }
+
+  return list[Math.max(0, Math.min(index, listLength - 1))]
+}
+
+/**
+ * Get event type from namespaced event name
+ * Example: 'click.bs.button' -> 'click'
+ */
+function getTypeEvent(event) {
+  // Remove everything after the first dot (namespace)
+  return event.replace(/\..*/, '')
+}
+
+/**
+ * Event handler helpers
+ */
+export function on(element, event, selectorOrHandler, handler) {
+  if (!element) {
+    return
+  }
+
+  // Extract event type from namespaced event name (e.g., 'click.bs.button' -> 'click')
+  const typeEvent = getTypeEvent(event)
+
+  if (typeof selectorOrHandler === 'string') {
+    // Delegated event: on(document, 'click', '.selector', handler)
+    // Baseline-compatible delegation handler using closest()
+    const selector = selectorOrHandler
+    const delegationHandler = function(e) {
+      // Check if target is an Element (not TextNode, etc.)
+      if (!e.target || !e.target.closest) {
+        return
+      }
+
+      const target = e.target.closest(selector)
+      if (target && element.contains(target)) {
+        // Set delegateTarget for Baseline-compatibility
+        if (!e.delegateTarget) {
+          Object.defineProperty(e, 'delegateTarget', {
+            value: target,
+            writable: false,
+            configurable: true
+          })
+        }
+        // Call handler with target as this context
+        return handler.call(target, e)
+      }
+    }
+
+    element.addEventListener(typeEvent, delegationHandler)
+  } else {
+    // Direct event: on(element, 'click', handler)
+    element.addEventListener(typeEvent, selectorOrHandler)
+  }
+}
+
+export function off(element, event, handler) {
+  if (!element) {
+    return
+  }
+  element.removeEventListener(event, handler)
+}
+
+export function one(element, event, handler) {
+  const onceHandler = (e) => {
+    handler(e)
+    off(element, event, onceHandler)
+  }
+  on(element, event, onceHandler)
+}
+
+/**
+ * Get selector from element (data-c-target or href)
+ * @param {Element} element
+ * @returns {string|null}
+ */
+function getSelector(element) {
+  let selector = element.getAttribute('data-c-target')
+
+  if (!selector || selector === '#') {
+    let hrefAttribute = element.getAttribute('href')
+
+    // The only valid content that could double as a selector are IDs or classes,
+    // so everything starting with `#` or `.`. If a "real" URL is used as the selector,
+    // `document.querySelector` will rightfully complain it is invalid.
+    // See https://github.com//Baseline/issues/32273
+    if (!hrefAttribute || (!hrefAttribute.includes('#') && !hrefAttribute.startsWith('.'))) {
+      return null
+    }
+
+    // Just in case some CMS puts out a full URL with the anchor appended
+    if (hrefAttribute.includes('#') && !hrefAttribute.startsWith('#')) {
+      hrefAttribute = `#${hrefAttribute.split('#')[1]}`
+    }
+
+    selector = hrefAttribute && hrefAttribute !== '#' ? hrefAttribute.trim() : null
+  }
+
+  return selector ? selector.split(',').map(sel => parseSelector(sel)).join(',') : null
+}
+
+/**
+ * Get element from selector (Baseline-compatible)
+ * Uses data-c-target or href attribute to find target element
+ * @param {Element} element
+ * @returns {Element|null}
+ */
+export function getElementFromSelector(element) {
+  const selector = getSelector(element)
+
+  return selector ? getElement(selector) : null
+}
+
+/**
+ * Check if document is in RTL mode
+ * @returns {boolean}
+ */
+export function isRTL() {
+  return document.documentElement.dir === 'rtl'
+}
+
+/**
+ * SelectorEngine helpers for finding elements
+ */
+export const SelectorEngine = {
+  /**
+   * Find all elements matching selector
+   * @param {string} selector
+   * @param {Element} element
+   * @returns {Array<Element>}
+   */
+  find(selector, element = document.documentElement) {
+    return Array.from(element.querySelectorAll(selector))
+  },
+
+  /**
+   * Find first element matching selector
+   * @param {string} selector
+   * @param {Element} element
+   * @returns {Element|null}
+   */
+  findOne(selector, element = document.documentElement) {
+    return element.querySelector(selector)
+  },
+
+  /**
+   * Find next sibling element matching selector
+   * @param {Element} element
+   * @param {string} selector
+   * @returns {Array<Element>}
+   */
+  next(element, selector) {
+    let next = element.nextElementSibling
+    while (next) {
+      if (next.matches(selector)) {
+        return [next]
+      }
+      next = next.nextElementSibling
+    }
+    return []
+  },
+
+  /**
+   * Find previous sibling element matching selector
+   * @param {Element} element
+   * @param {string} selector
+   * @returns {Array<Element>}
+   */
+  prev(element, selector) {
+    let previous = element.previousElementSibling
+    while (previous) {
+      if (previous.matches(selector)) {
+        return [previous]
+      }
+      previous = previous.previousElementSibling
+    }
+    return []
+  },
+
+  /**
+   * Find parent elements matching selector
+   * @param {Element} element
+   * @param {string} selector
+   * @returns {Array<Element>}
+   */
+  parents(element, selector) {
+    const parents = []
+    let ancestor = element.parentNode?.closest?.(selector)
+
+    while (ancestor) {
+      parents.push(ancestor)
+      ancestor = ancestor.parentNode?.closest?.(selector)
+    }
+
+    return parents
+  },
+
+  /**
+   * Get focusable children of an element
+   * @param {Element} element
+   * @returns {Array<Element>}
+   */
+  focusableChildren(element) {
+    const focusables = [
+      'a',
+      'button',
+      'input',
+      'textarea',
+      'select',
+      'details',
+      '[tabindex]',
+      '[contenteditable="true"]'
+    ].map(selector => `${selector}:not([tabindex^="-"])`).join(',')
+
+    return this.find(focusables, element).filter(el => !isDisabled(el) && isVisible(el))
+  },
+
+  /**
+   * Get element from selector (from data-c-target or href)
+   * @param {Element} element
+   * @returns {Element|null}
+   */
+  getElementFromSelector(element) {
+    return getElementFromSelector(element)
+  }
+}
+
+/**
+ * EventHandler - Baseline-compatible event handling
+ * Wrapper around on/off/one functions for compatibility
+ */
+export const EventHandler = {
+  on(element, event, handler, delegationFunction) {
+    if (typeof handler === 'string' && delegationFunction) {
+      // Delegated event: EventHandler.on(element, event, selector, handler)
+      on(element, event, handler, delegationFunction)
+    } else if (typeof handler === 'function') {
+      // Direct event: EventHandler.on(element, event, handler)
+      on(element, event, handler)
+    } else if (delegationFunction) {
+      // Direct event with delegationFunction as handler
+      on(element, event, delegationFunction)
+    }
+  },
+
+  off(element, event, handler, delegationFunction) {
+    // Simplified - in full implementation would track handlers
+    if (handler) {
+      off(element, event, handler)
+    } else if (delegationFunction) {
+      off(element, event, delegationFunction)
+    }
+    // Note: Full implementation would need to track all handlers for complete removal
+  },
+
+  one(element, event, handler, delegationFunction) {
+    if (typeof handler === 'string' && delegationFunction) {
+      // Delegated event - use one-time handler
+      const onceHandler = (e) => {
+        delegationFunction.call(e.target, e)
+        EventHandler.off(element, event, handler, onceHandler)
+      }
+      on(element, event, handler, onceHandler)
+    } else {
+      one(element, event, handler || delegationFunction)
+    }
+  },
+
+  trigger(element, event, args = {}) {
+    if (!element) {
+      return null
+    }
+
+    const evt = new CustomEvent(event, {
+      bubbles: true,
+      cancelable: true,
+      detail: args
+    })
+
+    // Add properties from args to event object
+    if (args && typeof args === 'object') {
+      Object.keys(args).forEach(key => {
+        try {
+          evt[key] = args[key]
+        } catch {
+          // Ignore read-only properties
+        }
+      })
+    }
+
+    element.dispatchEvent(evt)
+    return evt
+  }
+}
+
+/**
+ * Normalize data attribute value
+ * Converts string values to appropriate types (boolean, number, null, JSON)
+ */
+function normalizeData(value) {
+  if (value === 'true') {
+    return true
+  }
+
+  if (value === 'false') {
+    return false
+  }
+
+  if (value === Number(value).toString()) {
+    return Number(value)
+  }
+
+  if (value === '' || value === 'null') {
+    return null
+  }
+
+  if (typeof value !== 'string') {
+    return value
+  }
+
+  try {
+    return JSON.parse(decodeURIComponent(value))
+  } catch {
+    return value
+  }
+}
+
+/**
+ * Get data attributes from element
+ * Reads both data-c-* and data-bl-* attributes and converts them to camelCase
+ * @param {Element} element - The element to read attributes from
+ * @returns {Object} Object with camelCase keys and normalized values
+ */
+export function getDataAttributes(element) {
+  if (!element || !isElement(element)) {
+    return {}
+  }
+
+  const attributes = {}
+  
+  // Get all dataset keys that start with 'c' or 'bs' (but not 'bsConfig')
+  const dataKeys = Object.keys(element.dataset).filter(key => 
+    (key.startsWith('c') || key.startsWith('bs')) && !key.startsWith('bsConfig')
+  )
+
+  for (const key of dataKeys) {
+    // Remove prefix (c or bs) and convert to camelCase
+    let pureKey = key.replace(/^(c|bs)/, '')
+    // Convert first character to lowercase if it exists
+    if (pureKey.length > 0) {
+      pureKey = pureKey.charAt(0).toLowerCase() + pureKey.slice(1)
+    }
+    
+    // Normalize the value (convert strings to booleans, numbers, null, etc.)
+    attributes[pureKey] = normalizeData(element.dataset[key])
+  }
+
+  return attributes
+}
+
+

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@rhavenside/baseline",
+  "version": "2.0.0",
+  "description": "Ein striktes, schichtbasiertes Design-System mit semantischen Tokens",
+  "main": "dist/base-line.css",
+  "module": "dist/js/index.js",
+  "exports": {
+    ".": {
+      "import": "./dist/js/index.js",
+      "require": "./dist/js/index.js",
+      "default": "./dist/base-line.css"
+    },
+    "./css": "./dist/base-line.css",
+    "./js": "./dist/js/index.js",
+    "./fonts/*": "./dist/fonts/*"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "npm run build:css && npm run build:js && npm run copy:fonts",
+    "build:css": "sass src/base.scss dist/base-line.css --style=expanded && npm run fix:font-paths",
+    "build:css:compressed": "sass src/base.scss dist/base-line.css --style=compressed && npm run fix:font-paths",
+    "build:js": "mkdir -p dist/js && cp -r src/js/* dist/js/",
+    "copy:fonts": "mkdir -p dist/fonts && cp -f src/fonts/*.ttf dist/fonts/ 2>/dev/null || true && (test -f dist/fonts/baseline-icons.woff || (test -f demo/dist/fonts/baseline-icons.woff && cp demo/dist/fonts/baseline-icons.woff* dist/fonts/)) || true",
+    "fix:font-paths": "node scripts/fix-font-paths.js",
+    "rename:fonts": "node scripts/rename-fonts.js",
+    "rename:icons": "node scripts/rename-baseline-icons.js",
+    "watch": "sass --watch src/base.scss dist/base-line.css --style=expanded",
+    "prepublishOnly": "npm run build:css:compressed && npm run build:js && npm run copy:fonts"
+  },
+  "keywords": [
+    "design-system",
+    "css",
+    "scss",
+    "tokens",
+    "components",
+    "baseline",
+    "baseline"
+  ],
+  "author": "",
+  "license": "MIT",
+  "devDependencies": {
+    "@popperjs/core": "^2.11.8",
+    "sass": "^1.77.0"
+  }
+}