interestfor 1.0.3 → 1.0.4

package/README.md

@@ -54,7 +54,7 @@ browsers:
 
 ## Implementation
 The polyfill adds event listeners to document.body that monitor for hover
-or keyboard events relevant fo the `interestfor` API. When interesting
+or keyboard events relevant for the `interestfor` API. When interesting
 events happen to elements with the `interestfor` attribute or elements that
 are the targets of those elements, it fires `interest` and `loseinterest`
 events on the target of the `interestfor` attribute. If the
@@ -69,10 +69,10 @@ native feature:
 
   ```css
   [interestfor] {
-    interest-show-delay: 400ms;
-    --interest-show-delay: 400ms;
-    interest-hide-delay: 200ms;
-    --interest-hide-delay: 200ms;
+    interest-delay-start: 400ms;
+    --interest-delay-start: 400ms;
+    interest-delay-end: 200ms;
+    --interest-delay-end: 200ms;
   }
   ```
 
@@ -80,19 +80,19 @@ native feature:
   implemented as regular class names, so again add both to your stylesheet:
 
   ```css
-  :is([interestfor]:has-interest),
-  [interestfor].has-interest {
+  :is([interestfor]:interest-source),
+  [interestfor].interest-source {
     /* invoker styles */
   }
-  :is([popover]:target-of-interest),
-  [popover].target-of-interest {
+  :is([popover]:interest-target),
+  [popover].interest-target {
     /* target popover styles */
   }
   ```
 
   Note the `:is()` wrapped around the "normal" selector for the real pseudo
   class names. This is to avoid the entire selector being invalidated if the
-  browser does not recognize the native pseudo class (e.g. `:has-interest`).
+  browser does not recognize the native pseudo class (e.g. `:interest-source`).
 
 
 ## Tests

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "interestfor",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "A polyfill for the `interestfor` API",
   "keywords": "interestfor, interesttarget, polyfill, hover-triggering",
   "homepage": "https://github.com/mfreed7/interestfor#readme",

package/src/interestfor.js

@@ -11,19 +11,19 @@
   const attributeName = "interestfor";
   const interestEventName = "interest";
   const loseInterestEventName = "loseinterest";
-  const showDelayProp = "--interest-show-delay";
-  const hideDelayProp = "--interest-hide-delay";
+  const showDelayProp = "--interest-delay-start";
+  const hideDelayProp = "--interest-delay-end";
   const dataField = "__interestForData";
   const targetDataField = "__interestForTargetData";
+  const invokersWithInterest = new Set();
 
   // Feature detection
   if (window.interestForPolyfillInstalled) {
     return;
   }
   window.interestForPolyfillInstalled = true;
-  const nativeSupported = HTMLButtonElement.prototype.hasOwnProperty(
-    "interestForElement"
-  );
+  const nativeSupported =
+    HTMLButtonElement.prototype.hasOwnProperty("interestForElement");
   if (nativeSupported && !window.interestForUsePolyfillAlways) {
     return;
   }
@@ -34,15 +34,18 @@
         e.preventDefault();
         e.stopImmediatePropagation();
       }
-    }
-    document.body.addEventListener(interestEventName,cancel,{capture:true});
-    document.body.addEventListener(loseInterestEventName,cancel,{capture:true});
+    };
+    document.body.addEventListener(interestEventName, cancel, {
+      capture: true,
+    });
+    document.body.addEventListener(loseInterestEventName, cancel, {
+      capture: true,
+    });
   }
 
   // Enum-like state and source
   const InterestState = {
     NoInterest: "none",
-    PartialInterest: "partial",
     FullInterest: "full",
   };
   const Source = {
@@ -78,7 +81,10 @@
             return false;
           }
           // re-check preconditions
-          if (!invoker.isConnected || GetInterestForTarget(invoker) !== target) {
+          if (
+            !invoker.isConnected ||
+            GetInterestForTarget(invoker) !== target
+          ) {
             return false;
           }
         }
@@ -145,47 +151,32 @@
     const data = invoker[dataField];
     const target = GetInterestForTarget(invoker);
     switch (newState) {
-      case InterestState.PartialInterest:
-        if (data.state === InterestState.NoInterest) {
-          if (!target.dispatchEvent(new Event(interestEventName))) {
-            return;
-          }
-          try {
-            target.showPopover();
-          } catch {}
-        }
-        data.state = InterestState.PartialInterest;
-        if (!target[targetDataField]) {
-          target[targetDataField] = {};
-        }
-        target[targetDataField].invoker = invoker;
-        invoker.classList.add("has-partial-interest", "has-interest");
-        target.classList.add(
-          "target-of-partial-interest",
-          "target-of-interest"
-        );
-        disableFocusable(target);
-        break;
       case InterestState.FullInterest:
-        if (data.state !== InterestState.PartialInterest) {
-          if (!target.dispatchEvent(new Event(interestEventName))) {
-            return;
-          }
-          try {
-            target.showPopover();
-          } catch {}
+        if (data.state !== InterestState.NoInterest) {
+          throw new Error("Invalid state");
         }
+        target.dispatchEvent(new Event(interestEventName));
+        try {
+          target.showPopover({ source: invoker });
+        } catch {}
         data.state = InterestState.FullInterest;
         if (!target[targetDataField]) {
           target[targetDataField] = {};
         }
         target[targetDataField].invoker = invoker;
-        invoker.classList.remove("has-partial-interest");
-        invoker.classList.add("has-interest");
-        target.classList.remove("target-of-partial-interest");
-        target.classList.add("target-of-interest");
+        invokersWithInterest.add(invoker);
+        invoker.classList.add("interest-source");
+        target.classList.add("interest-target");
+        const anchorName = `--interest-anchor-${Math.random()
+          .toString(36)
+          .substring(2)}`;
+        invoker.style.anchorName = anchorName;
+        target.style.positionAnchor = anchorName;
+        data.anchorName = anchorName;
         restoreFocusable(target);
         break;
+      default:
+        throw new Error("Invalid state");
     }
     return true;
   }
@@ -196,18 +187,19 @@
     clearTimeout(data.lostTimer);
     if (data.state !== InterestState.NoInterest) {
       const target = GetInterestForTarget(invoker);
-      if (!target.dispatchEvent(new Event(loseInterestEventName))) {
-        return;
-      }
+      target.dispatchEvent(new Event(loseInterestEventName));
       try {
         target.hidePopover();
       } catch {}
       target[targetDataField] = null;
-      invoker.classList.remove("has-partial-interest", "has-interest");
-      target.classList.remove(
-        "target-of-partial-interest",
-        "target-of-interest"
-      );
+      invokersWithInterest.delete(invoker);
+      invoker.classList.remove("interest-source");
+      target.classList.remove("interest-target");
+      if (data.anchorName) {
+        invoker.style.anchorName = "";
+        target.style.positionAnchor = "";
+        data.anchorName = null;
+      }
       restoreFocusable(target);
       data.state = InterestState.NoInterest;
     }
@@ -255,6 +247,19 @@
     }
     const target = GetInterestForTarget(el);
     if (!target) {
+      const containingTarget = el.closest(".interest-target");
+      if (containingTarget) {
+        const upstreamInvoker = GetInterestInvoker(containingTarget);
+        if (upstreamInvoker) {
+          if (source === Source.Hover || source === Source.Focus) {
+            upstreamInvoker[dataField].clearLostTask();
+          } else {
+            if (source === Source.Blur || !el.matches(":hover")) {
+              ScheduleInterestLostTask(upstreamInvoker);
+            }
+          }
+        }
+      }
       return;
     }
     let data = el[dataField];
@@ -279,21 +284,8 @@
       data.clearLostTask && data.clearLostTask();
       if (upstreamInvoker) {
         upstreamInvoker[dataField].clearLostTask();
-        if (
-          upstreamInvoker[dataField].state === InterestState.PartialInterest
-        ) {
-          applyState(upstreamInvoker, InterestState.FullInterest);
-        }
       }
-      const needsPartialInterest =
-        source === Source.Focus &&
-        target.matches(":has(" + focusableSelector + ")");
-      ScheduleInterestGainedTask(
-        el,
-        needsPartialInterest
-          ? InterestState.PartialInterest
-          : InterestState.FullInterest
-      );
+      ScheduleInterestGainedTask(el, InterestState.FullInterest);
     } else {
       // Dehover or blur
       data.clearGainedTask && data.clearGainedTask();
@@ -324,24 +316,11 @@
       HandleInterestHoverOrFocus(e.target, Source.Blur)
     );
     document.body.addEventListener("keydown", (e) => {
-      let data = e.target[dataField];
-      if (!data) {
-        return;
-      }
-      if (data.state !== InterestState.PartialInterest) {
-        return;
-      }
-      if (
-        e.key === "ArrowUp" &&
-        e.altKey &&
-        data.state === InterestState.PartialInterest
-      ) {
-        e.preventDefault();
-        applyState(e.target, InterestState.FullInterest);
-      }
-      if (e.key === "Escape" && data.state !== InterestState.NoInterest) {
-        e.preventDefault();
-        clearState(e.target);
+      if (e.key === "Escape") {
+        invokersWithInterest.forEach((invoker) => {
+          e.preventDefault();
+          clearState(invoker);
+        });
       }
     });
   }
@@ -354,21 +333,12 @@
     document.head.appendChild(style);
     document[dataField] = { globalPropsStyle: style };
   }
-  function injectStyles() {
-    const style = document.createElement("style");
-    style.textContent = `.target-of-partial-interest::after { content: "{Press Alt+UpArrow to activate}"; display: block; color: darkgrey; font-size: 0.8em;}`;
-    document.head.appendChild(style);
-    document[dataField].globalHintStyle = style;
-  }
 
   // Initialize
   function init() {
     registerCustomProperties();
-    injectStyles();
     addEventHandlers();
-    console.log(
-      `interestfor polyfill installed (native: ${nativeSupported}).`
-    );
+    console.log(`interestfor polyfill installed (native: ${nativeSupported}).`);
   }
   if (document.readyState === "complete") {
     init();

package/src/interestfor.min.js

@@ -1,2 +1 @@
-!function(){let t="interest",e="loseinterest",r="--interest-show-delay",a="--interest-hide-delay",n="__interestForData",i="__interestForTargetData";if(window.interestForPolyfillInstalled)return;window.interestForPolyfillInstalled=!0;let s=HTMLButtonElement.prototype.hasOwnProperty("interestForElement");if(s&&!window.interestForUsePolyfillAlways)return;if(s){let l=t=>{t.isTrusted&&(t.preventDefault(),t.stopImmediatePropagation())};document.body.addEventListener(t,l,{capture:!0}),document.body.addEventListener(e,l,{capture:!0})}let o={NoInterest:"none",PartialInterest:"partial",FullInterest:"full"},d={Hover:"hover",DeHover:"dehover",Focus:"focus",Blur:"blur"};function u(t,e,r){if(!t||!e||!t.isConnected||p(t)!==e||r===o.NoInterest&&f(e)!==t)return!1;if(r!==o.NoInterest){let a=f(e);if(a){if(a===t)return a[n].clearLostTask(),!1;if(!u(a,e,o.NoInterest)||!t.isConnected||p(t)!==e)return!1}return h(t,r)}return v(t),!0}function c(t){let e=1e3*b(t,a);isFinite(e)&&!(e<0)&&(t[n].clearLostTask(),t[n].lostTimer=setTimeout(()=>{u(t,p(t),o.NoInterest)},e))}function f(t){let e=t[i]?.invoker||null;return e&&e[n]?.state!==o.NoInterest?e:null}function p(t){let e=t.getAttribute("interestfor");return document.getElementById(e)}function b(t,e){let r=getComputedStyle(t).getPropertyValue(e).trim(),a=r.match(/^([\d.]+)s$/);return a?parseFloat(a[1]):parseFloat(r)||0}function h(e,r){let a=e[n],s=p(e);switch(r){case o.PartialInterest:if(a.state===o.NoInterest){if(!s.dispatchEvent(new Event(t)))return;try{s.showPopover()}catch{}}a.state=o.PartialInterest,s[i]||(s[i]={}),s[i].invoker=e,e.classList.add("has-partial-interest","has-interest"),s.classList.add("target-of-partial-interest","target-of-interest"),function t(e){e.querySelectorAll(y).forEach(t=>{if(t.hasAttribute("data-original-tabindex"))return;let e=t.getAttribute("tabindex");t.setAttribute("data-original-tabindex",null===e?"none":e),t.setAttribute("tabindex","-1")})}(s);break;case o.FullInterest:if(a.state!==o.PartialInterest){if(!s.dispatchEvent(new Event(t)))return;try{s.showPopover()}catch{}}a.state=o.FullInterest,s[i]||(s[i]={}),s[i].invoker=e,e.classList.remove("has-partial-interest"),e.classList.add("has-interest"),s.classList.remove("target-of-partial-interest"),s.classList.add("target-of-interest"),g(s)}return!0}function v(t){let r=t[n];if(clearTimeout(r.gainedTimer),clearTimeout(r.lostTimer),r.state!==o.NoInterest){let a=p(t);if(!a.dispatchEvent(new Event(e)))return;try{a.hidePopover()}catch{}a[i]=null,t.classList.remove("has-partial-interest","has-interest"),a.classList.remove("target-of-partial-interest","target-of-interest"),g(a),r.state=o.NoInterest}}let y='a[href],area[href],input:not([disabled]),select:not([disabled]),textarea:not([disabled]),button:not([disabled]),iframe,object,embed,[contenteditable],[tabindex]:not([tabindex="-1"])';function g(t){t.querySelectorAll("[data-original-tabindex]").forEach(t=>{let e=t.getAttribute("data-original-tabindex");"none"===e?t.removeAttribute("tabindex"):t.setAttribute("tabindex",e),t.removeAttribute("data-original-tabindex")})}function m(t,e){if(!t.isConnected)return;let a=p(t);if(!a)return;let i=t[n];i||(t[n]={state:o.NoInterest,gainedTimer:null,lostTimer:null,clearGainedTask(){clearTimeout(this.gainedTimer)},clearLostTask(){clearTimeout(this.lostTimer)}},i=t[n]);let s=f(t);if(e===d.Hover||e===d.Focus){i.clearLostTask&&i.clearLostTask(),s&&(s[n].clearLostTask(),s[n].state===o.PartialInterest&&h(s,o.FullInterest));let l=e===d.Focus&&a.matches(":has("+y+")");!function t(e,a){let i=1e3*b(e,r);isFinite(i)&&!(i<0)&&(e[n].clearGainedTask(),e[n].gainedTimer=setTimeout(()=>{u(e,p(e),a)},i))}(t,l?o.PartialInterest:o.FullInterest)}else i.clearGainedTask&&i.clearGainedTask(),i.state!==o.NoInterest&&c(t),s&&(s[n].clearGainedTask(),e!==d.Blur&&t.matches(":hover")||c(s))}function I(){!function t(){let e=document.createElement("style");e.textContent=`@property ${r} {syntax: "<time>"; inherits: false; initial-value: 0.5s;}
-      @property ${a} {syntax: "<time>"; inherits: false; initial-value: 0.5s;}`,document.head.appendChild(e),document[n]={globalPropsStyle:e}}(),function t(){let e=document.createElement("style");e.textContent='.target-of-partial-interest::after { content: "{Press Alt+UpArrow to activate}"; display: block; color: darkgrey; font-size: 0.8em;}',document.head.appendChild(e),document[n].globalHintStyle=e}(),document.body.addEventListener("mouseover",t=>m(t.target,d.Hover)),document.body.addEventListener("mouseout",t=>m(t.target,d.DeHover)),document.body.addEventListener("focusin",t=>m(t.target,d.Focus)),document.body.addEventListener("focusout",t=>m(t.target,d.Blur)),document.body.addEventListener("keydown",t=>{let e=t.target[n];e&&e.state===o.PartialInterest&&("ArrowUp"===t.key&&t.altKey&&e.state===o.PartialInterest&&(t.preventDefault(),h(t.target,o.FullInterest)),"Escape"===t.key&&e.state!==o.NoInterest&&(t.preventDefault(),v(t.target)))}),console.log(`interestfor polyfill installed (native: ${s}).`)}"complete"===document.readyState?I():window.addEventListener("load",I)}();
+!function(){const e="interestfor",t="interest",n="loseinterest",r="--interest-delay-start",o="--interest-delay-end",s="__interestForData",i="__interestForTargetData",a=new Set;if(window.interestForPolyfillInstalled)return;window.interestForPolyfillInstalled=!0;const l=HTMLButtonElement.prototype.hasOwnProperty("interestForElement");if(l&&!window.interestForUsePolyfillAlways)return;if(l){const e=e=>{e.isTrusted&&(e.preventDefault(),e.stopImmediatePropagation())};document.body.addEventListener(t,e,{capture:!0}),document.body.addEventListener(n,e,{capture:!0})}const d={NoInterest:"none",FullInterest:"full"},c={Hover:"hover",DeHover:"dehover",Focus:"focus",Blur:"blur"};function u(e,n,r){if(!e||!n)return!1;if(!e.isConnected||v(e)!==n||r===d.NoInterest&&m(n)!==e)return!1;if(r!==d.NoInterest){const o=m(n);if(o){if(o===e)return o[s].clearLostTask(),!1;if(!u(o,n,d.NoInterest))return!1;if(!e.isConnected||v(e)!==n)return!1}return function(e,n){const r=e[s],o=v(e);if(n!==d.FullInterest)throw new Error("Invalid state");if(r.state!==d.NoInterest)throw new Error("Invalid state");o.dispatchEvent(new Event(t));try{o.showPopover({source:e})}catch{}r.state=d.FullInterest,o[i]||(o[i]={}),o[i].invoker=e,a.add(e),e.classList.add("interest-source"),o.classList.add("interest-target"),p(o);return!0}(e,r)}return b(e),!0}function f(e){const t=1e3*y(e,o);!isFinite(t)||t<0||(e[s].clearLostTask(),e[s].lostTimer=setTimeout((()=>{u(e,v(e),d.NoInterest)}),t))}function m(e){const t=e[i]?.invoker||null;return t&&t[s]?.state!==d.NoInterest?t:null}function v(t){const n=t.getAttribute(e);return document.getElementById(n)}function y(e,t){const n=getComputedStyle(e).getPropertyValue(t).trim(),r=n.match(/^([\d.]+)s$/);return r?parseFloat(r[1]):parseFloat(n)||0}function b(e){const t=e[s];if(clearTimeout(t.gainedTimer),clearTimeout(t.lostTimer),t.state!==d.NoInterest){const r=v(e);r.dispatchEvent(new Event(n));try{r.hidePopover()}catch{}r[i]=null,a.delete(e),e.classList.remove("interest-source"),r.classList.remove("interest-target"),p(r),t.state=d.NoInterest}}["a[href]","area[href]","input:not([disabled])","select:not([disabled])","textarea:not([disabled])","button:not([disabled])","iframe","object","embed","[contenteditable]",'[tabindex]:not([tabindex="-1"])'].join(",");function p(e){e.querySelectorAll("[data-original-tabindex]").forEach((e=>{const t=e.getAttribute("data-original-tabindex");"none"===t?e.removeAttribute("tabindex"):e.setAttribute("tabindex",t),e.removeAttribute("data-original-tabindex")}))}function T(e,t){if(!e.isConnected)return;if(!v(e))return;let n=e[s];n||(e[s]={state:d.NoInterest,gainedTimer:null,lostTimer:null,clearGainedTask(){clearTimeout(this.gainedTimer)},clearLostTask(){clearTimeout(this.lostTimer)}},n=e[s]);const o=m(e);t===c.Hover||t===c.Focus?(n.clearLostTask&&n.clearLostTask(),o&&o[s].clearLostTask(),function(e,t){const n=1e3*y(e,r);!isFinite(n)||n<0||(e[s].clearGainedTask(),e[s].gainedTimer=setTimeout((()=>{u(e,v(e),t)}),n))}(e,d.FullInterest)):(n.clearGainedTask&&n.clearGainedTask(),n.state!==d.NoInterest&&f(e),o&&(o[s].clearGainedTask(),t!==c.Blur&&e.matches(":hover")||f(o)))}function h(){!function(){const e=document.createElement("style");e.textContent=`@property ${r} {syntax: "<time>"; inherits: false; initial-value: 0.5s;}\n      @property ${o} {syntax: "<time>"; inherits: false; initial-value: 0.5s;}`,document.head.appendChild(e),document[s]={globalPropsStyle:e}}(),document.body.addEventListener("mouseover",(e=>T(e.target,c.Hover))),document.body.addEventListener("mouseout",(e=>T(e.target,c.DeHover))),document.body.addEventListener("focusin",(e=>T(e.target,c.Focus))),document.body.addEventListener("focusout",(e=>T(e.target,c.Blur))),document.body.addEventListener("keydown",(e=>{"Escape"===e.key&&a.forEach((t=>{e.preventDefault(),b(t)}))})),console.log(`interestfor polyfill installed (native: ${l}).`)}"complete"===document.readyState?h():window.addEventListener("load",h)}();

package/test/basic_test.html

@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 
-<script src="interestfor.min.js" async></script>
+<script src="../src/interestfor.js" async></script>
 
 <a interestfor=foo href=bar>Link - hover me, don't click me</a>
 <div popover id=foo>Popover</div>

package/test/test.html

@@ -199,7 +199,8 @@ async function waitForHoverOrFocus(type,element,target,timeMilliseconds) {
     const timeout = new Promise(resolve => setTimeout(() => {
       gotTimeout=true;
       resolve();
-    },timeMilliseconds));
+    },timeMilliseconds*1.5));
+    // Make sure the user doesn't leave too early:
     switch (type) {
       case 'hover':
         const mouseLeft = new Promise(resolve => element.addEventListener('mouseleave',resolve, {once:true}));
@@ -226,8 +227,10 @@ async function waitForHoverOrFocus(type,element,target,timeMilliseconds) {
 async function testOne(invoker, target, type, description) {
   assert_true(true,'---' + description,true);
   assert_false(target.matches(':popover-open'),'popover should start closed',true);
-  invoker.style.setProperty('--interest-show-delay',hoverTimeMilliseconds + 'ms');
-  invoker.style.setProperty('--interest-hide-delay',hoverTimeMilliseconds + 'ms');
+  invoker.style.setProperty('--interest-delay-start',hoverTimeMilliseconds + 'ms');
+  invoker.style.setProperty('interest-delay-start',hoverTimeMilliseconds + 'ms');
+  invoker.style.setProperty('--interest-delay-end',hoverTimeMilliseconds + 'ms');
+  invoker.style.setProperty('interest-delay-end',hoverTimeMilliseconds + 'ms');
   invoker.classList.remove('hide');
 
   // Show interest in the invoker