@shortfuse/materialdesignweb 0.4.0 → 0.7.0

package/core/dom.js

@@ -1,271 +1,82 @@
-/** @type {?boolean} */
-let passiveEventListenerSupported = null;
-
-/** @return {void} */
-function testPassiveEventListenerOptionSupport() {
-  try {
-    passiveEventListenerSupported = false;
-    const options = {
-      get passive() {
-        passiveEventListenerSupported = true;
-        return true;
-      },
-    };
-    // @ts-ignore: Custom test event
-    window.addEventListener('test', options, options);
-    // @ts-ignore: Custom test event
-    window.removeEventListener('test', options, options);
-  } catch (err) {
-    passiveEventListenerSupported = false;
-  }
-}
-
-/** @return {Object|boolean} */
-export function getPassiveEventListenerOption() {
-  if (passiveEventListenerSupported == null) {
-    testPassiveEventListenerOptionSupport();
-  }
-  if (passiveEventListenerSupported) {
-    return { passive: true };
-  }
-  return false;
-}
-
-export const nextTick = window.requestAnimationFrame || ((cb) => window.setTimeout(cb, 17));
-
-export const cancelTick = window.cancelAnimationFrame || window.clearTimeout;
+/* eslint-disable no-bitwise */
 
 /**
- * @param {Element} element
- * @param {string} className
- * @return {Element}
+ * @param {any} value
+ * @return {?string}
  */
-export function getChildElementByClass(element, className) {
-  const child = element.getElementsByClassName(className)[0];
-  if (child && child.parentElement !== element) {
-    return null;
+export function attrValueFromDataValue(value) {
+  switch (value) {
+    case undefined:
+    case null:
+    case false:
+      return null;
+    case true:
+      return '';
+    default:
+      return `${value}`;
   }
-  return child;
 }
 
 /**
- * @param {Element} element
- * @param {string} className
- * @param {boolean} [includeSelf=true]
- * @return {HTMLElement}
+ * Converts property name to attribute name
+ * (Similar to DOMStringMap)
+ * @param {string} name
+ * @return {string}
  */
-export function findElementParentByClassName(element, className, includeSelf) {
-  let el;
-  if (includeSelf === false) {
-    el = element.parentElement;
-  } else {
-    /** @type {HTMLElement} */
-    el = (element);
-  }
-  while (el != null && !el.classList.contains(className)) {
-    el = el.parentElement;
-  }
-  return el;
-}
-
-/** @return {boolean} */
-export function isRtl() {
-  return document.documentElement.dir === 'rtl';
-}
-
-/**
- * @param {EventTarget} eventTarget
- * @param {string} type
- * @param {Object} [detail]
- * @return {boolean}
- */
-export function dispatchDomEvent(eventTarget, type, detail) {
-  let event;
-  if (typeof CustomEvent === 'function') {
-    event = new CustomEvent(type, {
-      bubbles: true,
-      cancelable: true,
-      detail,
-    });
-  } else if (detail == null) {
-    if (typeof Event === 'function') {
-      event = new Event(type, {
-        bubbles: true,
-        cancelable: true,
-      });
-    } else {
-      event = document.createEvent('Event');
-      event.initEvent(type, true, true);
+export function attrNameFromPropName(name) {
+  const attrNameWords = name.split(/([A-Z])/);
+  if (attrNameWords.length === 1) return name;
+  return attrNameWords.reduce((prev, curr) => {
+    if (prev == null) return curr;
+    if (curr.length === 1 && curr.toUpperCase() === curr) {
+      return `${prev}-${curr.toLowerCase()}`;
     }
-  } else {
-    event = document.createEvent('CustomEvent');
-    event.initCustomEvent(type, true, true, detail);
-  }
-  return eventTarget.dispatchEvent(event);
+    return prev + curr;
+  });
 }
 
-/**
- * @param {ArrayLike<T>} arrayLike
- * @param {function(T, number, ArrayLike<T>):any} fn
- * @return {void}
- * @template {any} T
- */
-export function iterateArrayLike(arrayLike, fn) {
-  Array.prototype.forEach.call(arrayLike, fn);
-}
+const IS_FIREFOX = globalThis?.navigator?.userAgent.includes('Firefox');
 
 /**
- * @param {ArrayLike<T>} arrayLike
- * @param {function(T, number, ArrayLike<T>):boolean|void} fn
+ * @param {Element} element
  * @return {boolean}
- * @template {any} T
  */
-export function iterateSomeOfArrayLike(arrayLike, fn) {
-  return Array.prototype.some.call(arrayLike, fn);
+export function isFocused(element) {
+  if (!element) return false;
+  if (IS_FIREFOX && element.constructor.formAssociated && element.hasAttribute('disabled')) {
+    // https://bugzilla.mozilla.org/show_bug.cgi?id=1818287
+    console.warn('Firefox bug 1818287: Disabled form associated custom element cannot receive focus.');
+    return false;
+  }
+  if (document.activeElement === element) return true;
+  if (!element.isConnected) return false;
+  if (element?.getRootNode() === document) return false; // isInLightDOM
+  // console.debug('checking shadowdom', element, element.matches(':focus'));
+  return element.matches(':focus');
 }
 
 /**
- * @param {Element} element
- * @param {function(Element, number):boolean|void} fn
- * @return {boolean}
+ * @param {HTMLElement|Element} element
+ * @param {Parameters<HTMLElement['focus']>} [options]
+ * @return {boolean} Focus was successful
  */
-export function iterateElementSiblings(element, fn) {
-  let distance = -1;
-  let sibling = element.previousElementSibling;
-  while (sibling) {
-    fn(sibling, distance);
-    sibling = sibling.previousElementSibling;
-    distance -= 1;
-  }
-  sibling = element.nextElementSibling;
-  distance = 1;
-  while (sibling) {
-    fn(sibling, distance);
-    sibling = sibling.nextElementSibling;
-    distance += 1;
-  }
-  return false;
+export function attemptFocus(element, ...options) {
+  if (!element) return false;
+  try {
+    // @ts-expect-error Use catch if not HTMLElement
+    element.focus(...options);
+  } catch (e) {
+    console.error(e);
+    return false;
+    // Ignore error.
+  }
+  return isFocused(element);
 }
 
 /**
  * @param {Element} element
- * @param {function(Element, number):boolean|void} fn
  * @return {boolean}
  */
-export function iterateSomeOfElementSiblings(element, fn) {
-  let distance = -1;
-  let sibling = element.previousElementSibling;
-  while (sibling) {
-    if (fn(sibling, distance)) {
-      return true;
-    }
-    sibling = sibling.previousElementSibling;
-    distance -= 1;
-  }
-  sibling = element.nextElementSibling;
-  distance = 1;
-  while (sibling) {
-    if (fn(sibling, distance)) {
-      return true;
-    }
-    sibling = sibling.previousElementSibling;
-    distance += 1;
-  }
-  return false;
-}
-
-/**
- * @param {Node} node
- * @param {boolean} [create]
- * @return {Text}
- */
-export function getTextNode(node, create) {
-  let textNode;
-  iterateSomeOfArrayLike(node.childNodes, (childNode) => {
-    if (childNode.nodeType !== Node.TEXT_NODE) {
-      return false;
-    }
-    textNode = childNode;
-    return true;
-  });
-  if (create && !textNode) {
-    textNode = document.createTextNode('');
-    node.appendChild(textNode);
-  }
-  return textNode;
-}
-
-/**
- * @param {Node} node
- * @param {string} value
- * @return {Node}
- */
-export function setTextNode(node, value) {
-  /** @type {ChildNode} */
-  let textNode;
-  iterateSomeOfArrayLike(node.childNodes, (childNode) => {
-    if (childNode.nodeType !== Node.TEXT_NODE) {
-      return false;
-    }
-    textNode = childNode;
-    return true;
-  });
-  if (value) {
-    if (!textNode) {
-      textNode = document.createTextNode(value);
-      node.appendChild(textNode);
-    } else {
-      textNode.nodeValue = value;
-    }
-  } else if (textNode) {
-    node.removeChild(textNode);
-  }
-  return textNode;
-}
-
-/**
- * @param {HTMLElement} element
- * @param {boolean} [smooth=false]
- * @param {boolean} [rtl=false]
- * @return {void}
- */
-export function scrollToElement(element, smooth, rtl) {
-  if (!element) {
-    return;
-  }
-  const parent = element.parentElement;
-  if (!parent) {
-    return;
-  }
-
-  let targetScrollLeft = rtl
-    ? parent.scrollWidth + element.offsetLeft - element.offsetWidth
-    : element.offsetLeft;
-
-  const elementRect = element.getBoundingClientRect();
-  const parentRect = parent.getBoundingClientRect();
-  let subPixelScrollPosition = elementRect.left - parentRect.left;
-  if (subPixelScrollPosition < 0) {
-    subPixelScrollPosition = 0;
-  }
-  if (Math.abs(subPixelScrollPosition - targetScrollLeft) < 2) {
-    targetScrollLeft = subPixelScrollPosition;
-  }
-  if (parent.scrollLeft === targetScrollLeft) {
-    return;
-  }
-
-  if (parent.scrollTo) {
-    parent.scrollTo({
-      top: 0,
-      left: targetScrollLeft,
-      behavior: smooth ? 'smooth' : 'auto',
-    });
-    return;
-  }
-  parent.style.setProperty('scroll-behavior', 'auto');
-  parent.scrollLeft = targetScrollLeft;
-  nextTick(() => {
-    parent.style.removeProperty('scroll-behavior');
-  });
+export function isRtl(element) {
+  return getComputedStyle(element).direction === 'rtl';
 }

package/core/identify.js

@@ -0,0 +1,40 @@
+const PREFIX = '_mdw-';
+
+/** @type {Set<string>} */
+const generatedUIDs = new Set();
+
+/** @return {string} */
+export function generateUID() {
+  const id = Math.random().toString(36).slice(2, 10);
+  if (generatedUIDs.has(id)) {
+    return generateUID();
+  }
+  generatedUIDs.add(id);
+  return id;
+}
+
+/**
+ * @param {Element} element
+ * @param {boolean} [mutate=false]
+ * @return {string}
+ */
+export function identifierFromElement(element, mutate) {
+  if (element.id) {
+    return element.id;
+  }
+  if (!mutate) {
+    return null;
+  }
+  const id = PREFIX + generateUID();
+  element.id = id;
+  return id;
+}
+
+/**
+ * @param {string} identifier
+ * @param {Element} element
+ * @return {boolean}
+ */
+export function identifierMatchesElement(identifier, element) {
+  return element.id === identifier;
+}