@shortfuse/materialdesignweb 0.4.0 → 0.7.0

package/mixins/TooltipTriggerMixin.js

@@ -0,0 +1,366 @@
+import Tooltip from '../components/Tooltip.js';
+import { canAnchorPopup } from '../utils/popup.js';
+
+import styles from './TooltipTriggerMixin.css' assert { type: 'css' };
+
+/**
+ * @param {ReturnType<import('./StateMixin.js').default>} Base
+ */
+export default function TooltipTriggerMixin(Base) {
+  class TooltipTrigger extends Base {
+    static {
+      this.css(styles);
+
+      this.on({
+        composed({ template, html }) {
+          template.append(html`
+            <${Tooltip.elementName} role=tooltip id=tooltip
+            ><slot id=tooltip-slot
+              on-slotchange={onTooltipTriggerSlotChange} name=tooltip
+              >{tooltip}</slot></${Tooltip.elementName}>
+          `);
+        },
+      });
+    }
+
+    static TOOLTIP_MOUSE_IDLE_MS = 500;
+
+    static TOOLTIP_TOUCH_IDLE_MS = 1500;
+
+    /** @type {InstanceType<Tooltip>} */
+    #tooltip;
+
+    /** @type {any} */
+    #idleDebounce;
+
+    #pendingHide = false;
+
+    /** @type {HTMLElement[]} */
+    #watchedParents = [];
+
+    #resizeObserver;
+
+    #intersectObserver;
+
+    onParentScroll = (event) => {
+      this.updateTooltipPosition();
+    };
+
+    /** @param {any[]} args */
+    constructor(...args) {
+      super(...args);
+      this.#tooltip = /** @type {InstanceType<Tooltip>} */ (this.refs.tooltip.cloneNode(true));
+      this.#tooltip.removeAttribute('id');
+      this.#tooltip.style.setProperty('position', 'fixed');
+      this.#tooltip.setAttribute('aria-hidden', 'true');
+      this.#resizeObserver = new ResizeObserver((entries) => {
+        // console.log('RO', entries);
+        if (!this.#tooltip.open) return;
+        this.updateTooltipPosition();
+      });
+      const threshold = [0, 0.49, 0.5, 0.51, 1];
+      this.#intersectObserver = new IntersectionObserver((entries) => {
+        // console.log('IO', entries);
+        if (!this.#tooltip.open) return;
+        for (const entry of entries) {
+          if (entry.intersectionRatio <= 0) {
+            console.debug('Hide tooltip due to tooltip occlusion');
+            this.hideTooltip();
+            return;
+          }
+          if (entry.target === this.#tooltip) {
+            console.debug('Reposition tooltip due to possible tooltip occlusion');
+            this.updateTooltipPosition();
+            return;
+          }
+          if (entry.target === this) {
+            if (entry.intersectionRatio <= 0.5) {
+              console.debug('Hiding tooltip because target is occluded');
+              this.hideTooltip();
+            } else {
+              console.debug('Using InsectionObserver rect to update tooltip');
+              this.updateTooltipPosition(entry.boundingClientRect);
+            }
+            return;
+          }
+        }
+        console.debug('Updating tooltip position because offsetParent change.');
+        this.updateTooltipPosition();
+      }, { threshold });
+      // this.#tooltip.remove();
+    }
+
+    /**
+     * @param {Event & {currentTarget: HTMLSlotElement}} event
+     * @return {void}
+     */
+    onTooltipTriggerSlotChange(event) {
+      const tooltip = this.tooltipClone;
+      tooltip.replaceChildren(
+        ...event.currentTarget.assignedNodes()
+          .map((child) => child.cloneNode(true)),
+      );
+    }
+
+    /**
+     * @this {TooltipTrigger} this
+     * @param {FocusEvent} event
+     * @return {void}
+     */
+    onTooltipTriggerFocus(event) {
+      // console.log('getting focus', event);
+      if (this.disabledState) return;
+      if (this.matches(':active')) {
+        // console.log('abort from active');
+        return;
+      }
+      this.showTooltip();
+    }
+
+    /**
+     * @this {TooltipTrigger} this
+     * @param {KeyboardEvent} event
+     * @return {void}
+     */
+    onTooltipTriggerKeydown(event) {
+      if (event.ctrlKey) this.hideTooltip();
+    }
+
+    /**
+     * @this {TooltipTrigger} this
+     * @return {void}
+     */
+    onTooltipTriggerBlur() {
+      this.hideTooltip();
+    }
+
+    /**
+     * @param {MouseEvent|TouchEvent} event
+     * @this {TooltipTrigger} this
+     * @return {void}
+     */
+    onTooltipTriggerPointer(event) {
+      if (this.disabledState) return;
+      // console.log('tooltip event', event.type);
+      switch (event.type) {
+        case 'touchstart':
+          this.scheduleShowTooltip('touch');
+          break;
+        case 'touchend':
+        case 'touchcancel':
+          this.scheduleHideTooltip('touch');
+          break;
+        case 'click':
+        case 'mouseout':
+          this.cancelShowTooltip();
+          this.hideTooltip();
+          break;
+        case 'mousemove':
+        case 'mouseover':
+          this.scheduleShowTooltip('mouse');
+          break;
+        default:
+      }
+    }
+
+    get tooltipClone() {
+      return this.#tooltip;
+    }
+
+    get clonedTooltip() {
+      return this.#tooltip;
+    }
+
+    cancelShowTooltip() {
+      // console.log('cancel tooltiptimer');
+      clearTimeout(this.#idleDebounce);
+    }
+
+    /** @param {'mouse'|'touch'|'keyboard'} type */
+    scheduleHideTooltip(type) {
+      clearTimeout(this.#idleDebounce);
+      if (!this.#tooltip.open) {
+        // console.log('abort schedule (shown)');
+        return;
+      }
+      let timeout = 0;
+      switch (type) {
+        case 'mouse':
+          timeout = 0;
+          break;
+        case 'touch':
+          timeout = 1500;
+          break;
+        default:
+      }
+      // console.log('schedule tooltiptimer');
+      this.#idleDebounce = setTimeout(() => {
+        // console.log('hide timeout');
+        this.hideTooltip();
+      }, timeout);
+    }
+
+    /** @param {'mouse'|'touch'|'keyboard'} type */
+    scheduleShowTooltip(type) {
+      if (this.#tooltip.open) {
+        // console.log('abort schedule (shown)');
+        return;
+      }
+      let timeout = 0;
+      switch (type) {
+        case 'mouse':
+          timeout = this.constructor.TOOLTIP_MOUSE_IDLE_MS;
+          break;
+        case 'touch':
+          timeout = this.constructor.TOOLTIP_TOUCH_IDLE_MS;
+          break;
+        default:
+      }
+      // console.log('schedule tooltiptimer');
+      clearTimeout(this.#idleDebounce);
+      this.#idleDebounce = setTimeout(() => {
+        // console.log('idle');
+        this.showTooltip(type === 'touch');
+      }, timeout);
+    }
+
+    showTooltip(touch = false) {
+      if (this.#tooltip.open) return;
+      this.refs.tooltip.open = true;
+      this.refs.tooltip.touch = touch;
+      this.#tooltip.touch = touch;
+      document.body.append(this.#tooltip);
+      this.updateTooltipPosition();
+      this.#resizeObserver.observe(this, { box: 'border-box' });
+      this.#intersectObserver.observe(this);
+      this.#intersectObserver.observe(this.#tooltip);
+      /** @type {HTMLElement} */
+      let offsetParent = this;
+      while ((offsetParent = offsetParent.offsetParent)) {
+        this.#resizeObserver.observe(offsetParent, { box: 'border-box' });
+        // console.log('observing', offsetParent);
+        this.#watchedParents.push(offsetParent);
+        this.#intersectObserver.observe(offsetParent);
+        offsetParent.addEventListener('scroll', this.onParentScroll);
+      }
+      window.addEventListener('scroll', this.onParentScroll);
+
+      // console.log('offsetparent', this.offsetParent);
+
+      this.#tooltip.open = true;
+    }
+
+    hideTooltip() {
+      this.#resizeObserver.disconnect();
+      this.#intersectObserver.disconnect();
+      let parent;
+      while ((parent = this.#watchedParents.pop())) {
+        parent.removeEventListener('scroll', this.onParentScroll);
+      }
+      window.removeEventListener('scroll', this.onParentScroll);
+      this.#tooltip.open = false;
+      this.#tooltip.remove();
+      this.refs.tooltip.open = false;
+      const hoverStyle = this.refs.tooltip.style;
+      hoverStyle.removeProperty('width');
+      hoverStyle.removeProperty('height');
+    }
+
+    /**
+     * @param {DOMRect} [domRect]
+     * @return {void}
+     */
+    updateTooltipPosition(domRect) {
+      const offset = 8;
+      // const margin = 8;
+      /** @type {import('../utils/popup.js').CanAnchorPopUpOptions} */
+      const anchorOptions = {
+        anchor: domRect ?? this.getBoundingClientRect(),
+        width: this.#tooltip.clientWidth,
+        height: this.#tooltip.clientHeight,
+        // margin,
+      };
+
+      const isPageRTL = (getComputedStyle(this).direction === 'rtl');
+      const xStart = isPageRTL ? 'right' : 'left';
+      const xEnd = isPageRTL ? 'left' : 'right';
+      /** @type {import('../utils/popup.js').CanAnchorPopUpOptions[]} */
+      const preferences = [
+        { clientY: 'bottom', clientX: 'center', offsetY: offset },
+        { clientY: 'bottom', clientX: xStart, offsetY: offset },
+        { clientY: 'bottom', clientX: xEnd, offsetY: offset },
+        { clientY: 'top', clientX: 'center', offsetY: -offset },
+        { clientY: 'top', clientX: xStart, offsetY: -offset },
+        { clientY: 'top', clientX: xEnd, offsetY: -offset },
+      ];
+
+      let anchorResult;
+      for (const preference of preferences) {
+        anchorResult = canAnchorPopup({
+          ...anchorOptions,
+          ...preference,
+        });
+        if (anchorResult) break;
+      }
+
+      // console.log({ anchorResult });
+      if (!anchorResult) {
+        anchorResult = canAnchorPopup({
+          ...anchorOptions,
+          ...preferences[0],
+          force: true,
+        });
+      }
+
+      this.#tooltip.style.setProperty('top', `${anchorResult.pageY}px`);
+      this.#tooltip.style.setProperty('left', `${anchorResult.pageX}px`);
+      this.#tooltip.style.setProperty('margin', '0');
+      this.#tooltip.style.setProperty('transform-origin', `${anchorResult.transformOriginY} ${anchorResult.transformOriginX}`);
+
+      const hoverStyle = this.refs.tooltip.style;
+      hoverStyle.setProperty('width', `${anchorResult.width + (anchorResult.offsetX * 2)}px`);
+      hoverStyle.setProperty('height', `${anchorResult.height + (anchorResult.offsetY)}px`);
+      if (anchorResult.clientY === 'bottom') {
+        hoverStyle.setProperty('top', '100%');
+        hoverStyle.removeProperty('bottom');
+      } else {
+        hoverStyle.removeProperty('top');
+        hoverStyle.setProperty('height', `${anchorResult.height + (anchorResult.offsetY)}px`);
+        hoverStyle.setProperty('bottom', '100%');
+      }
+      switch (anchorResult.clientX) {
+        case 'left':
+          hoverStyle.setProperty('left', '0');
+          hoverStyle.removeProperty('right');
+          break;
+        default:
+        case 'center':
+          hoverStyle.removeProperty('left');
+          hoverStyle.removeProperty('right');
+          break;
+        case 'right':
+          hoverStyle.removeProperty('left');
+          hoverStyle.setProperty('right', '0');
+      }
+    }
+
+    connectedCallback() {
+      super.connectedCallback();
+      for (const type of ['click', 'mousedown', 'mousemove', 'mouseout',
+        'touchmove', 'touchstart', 'touchend', 'touchleave', 'touchcancel']) {
+        this.addEventListener(type, this.onTooltipTriggerPointer, { passive: true });
+      }
+      this.addEventListener('focus', this.onTooltipTriggerFocus);
+      this.addEventListener('blur', this.onTooltipTriggerBlur);
+      this.addEventListener('keydown', this.onTooltipTriggerKeydown, { passive: true });
+    }
+
+    disconnectedCallback() {
+      // console.log('disconnected');
+      this.hideTooltip();
+      super.disconnectedCallback();
+    }
+  }
+  TooltipTrigger.prototype.tooltip = TooltipTrigger.prop('tooltip');
+  return TooltipTrigger;
+}

package/mixins/TouchTargetMixin.css

@@ -0,0 +1,26 @@
+.touch-target {
+  position: absolute;
+  inset: 50%;
+  /* --mdw-device-pixel-ratio: 1; */
+
+  block-size: 100%;
+  min-block-size: 48px;
+  /* min-block-size: 10mm; */
+  /* min-block-size: calc(0.393701in / var(--mdw-device-pixel-ratio, 1)); */
+  inline-size:100%;
+  min-inline-size: 48px;
+  /* min-inline-size: 10mm; */
+  /* min-inline-size: calc(0.393701in / var(--mdw-device-pixel-ratio, 1)); */
+
+  cursor: inherit;
+
+  /* box-sizing: border-box; */
+  /* border: solid 1px magenta; */
+  pointer-events: auto;
+
+  transform: translateX(-50%) translateY(-50%);
+  visibility: visible;
+  z-index: 1;
+
+  border-radius: inherit;
+}

package/mixins/TouchTargetMixin.js

@@ -0,0 +1,9 @@
+import styles from './TouchTargetMixin.css' assert { type: 'css' };
+
+/** @param {typeof import('../core/CustomElement.js').default} Base */
+export default function TouchTargetMixin(Base) {
+  return Base
+    .extend()
+    .css(styles)
+    .html/* html */`<div id=touch-target class=touch-target></div>`;
+}

package/package.json

@@ -1,18 +1,16 @@
 {
   "name": "@shortfuse/materialdesignweb",
-  "version": "0.4.0",
+  "version": "0.7.0",
   "description": "Material Design for Web",
-  "main": "index.js",
   "type": "module",
   "scripts": {
-    "analyze:docs": "webpack-bundle-analyzer stats.json",
-    "build:docs": "webpack --config webpack.config.cjs --env target=docs",
-    "deploy:docs": "scripts/deploy-docs.sh",
-    "dist": "webpack",
-    "pretest": "eslint --ignore-path .gitignore .",
-    "start:docs": "webpack serve --config webpack.config.cjs --env target=docs --host 0.0.0.0",
-    "stats:docs": "webpack --config webpack.config.cjs --env target=docs --profile --json > stats.json",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "prebuild": "node bin/generate-css.js --custom=yellow,orange:orange,green:0f0,alias:aqua | npx esbuild --minify --loader=css > docs/theme.css",
+    "prebuild-alt": "node bin/generate-css.js --color=a46750 --custom=yellow,orange:orange,green:0f0,alias:aqua | npx esbuild --minify --loader=css > docs/alt-theme.css",
+    "build": "node build/esbuild.js --minify --metafile",
+    "watch": "node build/esbuild.js --watch --metafile",
+    "serve": "node build/esbuild.js --watch --metafile --serve --live",
+    "pretest": "eslint --ignore-path .gitignore",
+    "test": "c8 tap --no-coverage"
   },
   "repository": {
     "type": "git",
@@ -21,46 +19,64 @@
   "keywords": [
     "material",
     "design",
-    "web"
+    "web",
+    "materialyou",
+    "md3",
+    "web-components"
+  ],
+  "files": [
+    "/bin",
+    "/components",
+    "/core",
+    "/theming",
+    "/mixins",
+    "/utils"
   ],
   "exports": {
-    "./": "./"
+    "/components": "./components",
+    "/core": "./core",
+    "/theming": "./theming",
+    "/mixins": "./mixins",
+    "/utils": "./utils"
   },
   "author": "Carlos Lopez Jr. <clshortfuse@gmail.com> (https://shortfuse.org/)",
   "license": "ISC",
-  "sideEffects": false,
+  "sideEffects": [
+    "./polyfills.js",
+    "./components/*.js",
+    "./utils/metadata.js",
+    "./theming/loader.js",
+    "./docs/demo/*.js"
+  ],
   "bugs": {
     "url": "https://github.com/clshortfuse/materialdesignweb/issues"
   },
   "homepage": "https://github.com/clshortfuse/materialdesignweb#readme",
   "devDependencies": {
-    "@babel/preset-env": "^7.12.1",
-    "@typescript-eslint/eslint-plugin": "5.7.0",
-    "@typescript-eslint/parser": "5.7.0",
-    "babel-loader": "^8.2.3",
-    "clean-css": "^5.2.2",
-    "css-loader": "^6.5.1",
-    "cssnano": "^5.0.14",
-    "eslint-config-airbnb-base": "^14.2.0",
-    "eslint-plugin-eta": "github:clshortfuse/eslint-plugin-eta",
-    "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-jsdoc": "^37.2.0",
-    "eta": "^1.12.0",
-    "extract-loader": "^5.1.0",
-    "fibers": "^5.0.0",
-    "file-loader": "^6.2.0",
-    "html-loader": "^1.3.2",
-    "postcss-loader": "^6.2.1",
-    "sass": "^1.27.0",
-    "sass-loader": "^12.4.0",
-    "stylelint": "^13.7.2",
-    "stylelint-config-recommended-scss": "^4.2.0",
-    "stylelint-config-sass-guidelines": "^7.1.0",
-    "stylelint-scss": "^3.18.0",
-    "typescript": "^4.5.4",
-    "webpack": "^5.4.0",
-    "webpack-bundle-analyzer": "^4.1.0",
-    "webpack-cli": "^4.2.0",
-    "webpack-dev-server": "^4.7.0"
+    "@types/tap": "^15.0.7",
+    "@typescript-eslint/eslint-plugin": "^5.30.7",
+    "@typescript-eslint/parser": "^5.30.7",
+    "browserslist-to-esbuild": "^1.1.1",
+    "c8": "^7.12.0",
+    "element-internals-polyfill": "^1.1.11",
+    "esbuild": "^0.17.12",
+    "eslint": "^8.24.0",
+    "eslint-config-airbnb-base": "^15.0.0",
+    "eslint-plugin-compat": "^4.0.2",
+    "eslint-plugin-github": "^4.3.5",
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-jsdoc": "^40.0.3",
+    "eslint-plugin-sort-class-members": "^1.15.2",
+    "eslint-plugin-unicorn": "^46.0.0",
+    "http-server": "^14.1.1",
+    "postcss-styled": "^0.34.0",
+    "postcss-styled-syntax": "^0.4.0",
+    "stylelint": "^15.2.0",
+    "stylelint-no-unsupported-browser-features": "github:clshortfuse/stylelint-no-unsupported-browser-features#0a51157",
+    "stylelint-order": "^6.0.2",
+    "stylelint-use-logical-spec": "^5.0.0",
+    "tap": "^16.3.0",
+    "typescript": "^5.0.2",
+    "webdriverio": "^7.23.0"
   }
 }