@shortfuse/materialdesignweb 0.8.0 → 0.9.1

package/mixins/TooltipTriggerMixin.js

@@ -1,385 +1,331 @@
 import '../components/Tooltip.js';
+import { FIREFOX_VERSION } from '../core/dom.js';
 import { canAnchorPopup } from '../utils/popup.js';
 
+/** @typedef {import('../components/Tooltip.js').default} Tooltip */
+
 /**
+ * Adds tooltip scheduling, positioning, and show/hide behavior for host elements.
  * @param {ReturnType<import('./StateMixin.js').default>} Base
  */
 export default function TooltipTriggerMixin(Base) {
-  class TooltipTrigger extends Base {
-    static {
-      this.on({
-        composed({ template, html }) {
-          template.append(html`
-            <mdw-tooltip role=tooltip id=tooltip>
-              <slot id=tooltip-slot on-slotchange={onTooltipTriggerSlotChange} name=tooltip>{tooltip}</slot>
-            </mdw-tooltip>
-          `);
-        },
-      });
-      // eslint-disable-next-line no-unused-expressions
-      this.css`
-        #tooltip {
-          position:absolute;
-        
-          overflow: hidden;
-        
-          box-sizing: content-box;
-        
-          block-size: 0;
-          inline-size: 0;
-          margin: 0;
-          padding: 0;
-        
-          transform: none;
+  return Base
+    .set({
+      /** Idle delay before showing tooltip for mouse (ms) */
+      TOOLTIP_MOUSE_IDLE_MS: 500,
+      /** Idle delay before showing tooltip for touch (ms) */
+      TOOLTIP_TOUCH_IDLE_MS: 1500,
+      /** Timer id used for tooltip show/hide debouncing */
+      /** @type {any} */
+      _idleDebounce: null,
+      /** Parents being observed for layout changes */
+      /** @type {HTMLElement[]} */
+      _watchedParents: null,
+      /** ResizeObserver used to track tooltip/anchor size changes */
+      /** @type {ResizeObserver} */
+      _resizeObserver: null,
+      /** IntersectionObserver used to detect occlusion */
+      /** @type {IntersectionObserver} */
+      _intersectObserver: null,
+      /** Bound scroll listener attached to parent elements */
+      _parentScrollListener: null,
+      /** Slot id to use when cloning tooltip content */
+      tooltipSlotId: 'slot',
+    })
+    .observe({
+      /** Text or content id used as tooltip content */
+      tooltip: 'string',
+      /** When true, show tooltip automatically on hover/focus */
+      autoTooltip: 'boolean',
+    })
+    .html`<mdw-tooltip id=tooltip></mdw-tooltip>`
+    .css`
+      #tooltip {
+        display:none;
+      }
+    `
+    .methods({
+      cancelShowTooltip() {
+        // console.log('cancel tooltiptimer');
+        clearTimeout(this._idleDebounce);
+      },
+      /** @param {'mouse'|'touch'|'keyboard'} type */
+      scheduleHideTooltip(type) {
+        this.cancelShowTooltip();
+        const tooltip = /** @type {InstanceType<Tooltip>} */ (this.refs.tooltip);
+        if (!tooltip.open) {
+        // console.log('abort schedule (shown)');
+          return;
         }
-        
-        #tooltip[open] {
-          display: block;
-        
-          block-size: auto;
-          inline-size: auto;
-        
-          cursor: default;
-          pointer-events:auto;
-        
-          opacity: 0;
-          transform: none;
+        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) {
+        const tooltip = /** @type {InstanceType<Tooltip>} */ (this.refs.tooltip);
+        if (tooltip.open) return;
+        let timeout = 0;
+        switch (type) {
+          case 'mouse':
+            timeout = this.TOOLTIP_MOUSE_IDLE_MS;
+            break;
+          case 'touch':
+            timeout = this.TOOLTIP_TOUCH_IDLE_MS;
+            break;
+          default:
         }
-      `;
-    }
-
-    static TOOLTIP_MOUSE_IDLE_MS = 500;
-
-    static TOOLTIP_TOUCH_IDLE_MS = 1500;
 
-    /** @type {InstanceType<Tooltip>} */
-    #tooltip;
+        clearTimeout(this._idleDebounce);
+        if (timeout) {
+          this._idleDebounce = setTimeout(this.showTooltip.bind(this), timeout);
+        } else {
+          this.showTooltip();
+        }
+      },
 
-    /** @type {any} */
-    #idleDebounce;
+      showTooltip() {
+        const tooltip = /** @type {InstanceType<Tooltip>} */ (this.refs.tooltip);
+        if (tooltip.open) return;
+        document.body.append(this.refs.tooltip);
+        this.recloneTooltip();
+        this.updateTooltipPosition();
+        this._resizeObserver.observe(this, { box: 'border-box' });
+        this._resizeObserver.observe(tooltip, { box: 'border-box' });
+        this._intersectObserver.observe(this);
+        this._intersectObserver.observe(tooltip);
+        /** @type {HTMLElement} */
+        // eslint-disable-next-line unicorn/no-this-assignment, @typescript-eslint/no-this-alias
+        let offsetParent = this;
+        while ((offsetParent = /** @type {?HTMLElement} */ (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._parentScrollListener);
+        }
+        window.addEventListener('scroll', this._parentScrollListener);
 
-    #pendingHide = false;
+        // console.log('offsetparent', this.offsetParent);
 
-    /** @type {HTMLElement[]} */
-    #watchedParents = [];
+        tooltip.open = true;
+      },
 
-    #resizeObserver;
+      hideTooltip(cancelSchedule = false) {
+        if (cancelSchedule) {
+          this.cancelShowTooltip();
+        }
+        this._resizeObserver.disconnect();
+        this._intersectObserver.disconnect();
+        let parent;
+        while ((parent = this._watchedParents.pop())) {
+          parent.removeEventListener('scroll', this._parentScrollListener);
+        }
+        window.removeEventListener('scroll', this._parentScrollListener);
+        const tooltip = /** @type {InstanceType<Tooltip>} */ (this.refs.tooltip);
+        tooltip.open = false;
+        // TODO: Self-remove on close (hide animation)
+        tooltip.remove();
+      },
+      /**
+       * TODO: Throttle multiple calls
+       * @param {DOMRect} [domRect]
+       * @return {void}
+       */
+      updateTooltipPosition(domRect) {
+        const offset = 8;
+        const tooltip = /** @type {InstanceType<Tooltip>} */ (this.refs.tooltip);
+        // const margin = 8;
+        /** @type {import('../utils/popup.js').CanAnchorPopUpOptions} */
+
+        Object.assign(tooltip.style, {
+          top: '0',
+          left: '0',
+          right: 'auto',
+          bottom: 'auto',
+          position: 'fixed',
+          maxWidth: null,
+          maxHeight: null,
+        });
 
-    #intersectObserver;
+        const anchorOptions = {
+          anchor: domRect ?? this.getBoundingClientRect(),
+          width: tooltip.clientWidth,
+          height: 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) {
+          const result = canAnchorPopup({
+            ...anchorOptions,
+            ...preference,
+          });
+          if (!anchorResult || anchorResult.visibility < result.visibility) {
+            anchorResult = result;
+          }
+          if (result.visibility === 1) break;
+        }
 
-    onParentScroll = (event) => {
-      this.updateTooltipPosition();
-    };
+        Object.assign(tooltip.style, {
+          position: 'fixed',
+          ...anchorResult.styles,
+        });
+      },
+      recloneTooltip() {
+        let args;
+        const tooltip = this.tooltip;
+        if (tooltip) {
+          args = [tooltip];
+        } else {
+          args = /** @type {HTMLSlotElement} */ (this.refs[this.tooltipSlotId])
+            .assignedNodes()
+            .map((child) => child.cloneNode(true));
+        }
 
-    /** @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.refs.tooltip.replaceChildren(...args);
+      },
+      closeIfNotHovered() {
+        // eslint-disable-next-line unicorn/consistent-function-scoping
+        const check = () => {
+          if (this.hoveredState) return;
+          if (this.refs.tooltip.matches(':hover')) return;
+          this.hideTooltip(true);
+        };
+        if (FIREFOX_VERSION) {
+          // Firefox stalls one tick
+          requestAnimationFrame(check);
+        } else {
+          check();
+        }
+      },
+    })
+    .childEvents({
+      slot: {
+        slotchange: 'recloneTooltip',
+      },
+      tooltip: {
+        pointerleave: 'closeIfNotHovered',
+      },
+    })
+    .events({
+      '~pointermove'(event) {
+        if (event.pointerType === 'touch') return;
+        if (this.autoTooltip && !this.disabledState) {
+          this.scheduleShowTooltip('mouse');
+        }
+      },
+      '~keydown'({ ctrlKey }) {
+        if (ctrlKey) {
+          this.hideTooltip(true);
+        }
+      },
+      '~click'() {
+        this.hideTooltip(true);
+      },
+
+    })
+    .on({
+      constructed() {
+        this._watchedParents = [];
+        this._parentScrollListener = this.updateTooltipPosition.bind(this, null);
+        this._resizeObserver = new ResizeObserver(() => {
+          const tooltip = /** @type {InstanceType<Tooltip>} */ (this.refs.tooltip);
+          if (tooltip.open) {
             this.updateTooltipPosition();
-            return;
           }
-          if (entry.target === this) {
-            if (entry.intersectionRatio <= 0.5) {
-              console.debug('Hiding tooltip because target is occluded');
+        });
+        const threshold = [0, 0.49, 0.5, 0.51, 1];
+        this._intersectObserver = new IntersectionObserver((entries) => {
+          const tooltip = /** @type {InstanceType<Tooltip>} */ (this.refs.tooltip);
+          // console.log('IO', entries);
+          if (!tooltip.open) return;
+          for (const entry of entries) {
+            if (entry.intersectionRatio <= 0) {
+              // console.debug('Hide tooltip due to tooltip occlusion');
               this.hideTooltip();
-            } else {
-              console.debug('Using InsectionObserver rect to update tooltip');
-              this.updateTooltipPosition(entry.boundingClientRect);
+              return;
+            }
+            if (entry.target === 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;
             }
-            return;
           }
+          // console.debug('Updating tooltip position because offsetParent change.');
+          this.updateTooltipPosition();
+        }, { threshold });
+        // this.#tooltip.remove();
+      },
+      _focusedChanged(previous, current) {
+        if (current) {
+          if (!this._pointerPressed && !this._focusedSynthetic && this.autoTooltip) {
+            this.showTooltip();
+          }
+        } else {
+          this.closeIfNotHovered();
         }
-        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':
+      },
+      _hoveredChanged(previous, current) {
+        if (current) {
+          if (this.autoTooltip && !this.disabledState) {
+            this.scheduleShowTooltip('mouse');
+          }
+        } else {
+          this.closeIfNotHovered();
+        }
+      },
+      _pointerPressedChanged(previous, current) {
+        if (this._lastInteraction !== 'touch') return;
+        if (current) {
+          if (this.autoTooltip && !this.disabledState) {
+            this.scheduleShowTooltip('touch');
+          }
+        } else {
           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) {
-        const result = canAnchorPopup({
-          ...anchorOptions,
-          ...preference,
-        });
-        if (!anchorResult || anchorResult.visibility < result.visibility) {
-          anchorResult = result;
         }
-        if (result.visibility === 1) break;
-      }
-
-      this.#tooltip.style.setProperty('top', `${anchorResult.top}px`);
-      this.#tooltip.style.setProperty('left', `${anchorResult.left}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;
+      },
+      disconnected() {
+        this.hideTooltip(true);
+      },
+      tooltipChanged() {
+        this.recloneTooltip();
+      },
+    });
 }