interestfor 1.0.3

package/CODEOWNERS

@@ -0,0 +1 @@
+* @mfreed7 @keithamus

package/LICENSE

@@ -0,0 +1,28 @@
+BSD 3-Clause License
+
+Copyright (c) 2025, Mason Freed
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+1. Redistributions of source code must retain the above copyright notice, this
+   list of conditions and the following disclaimer.
+
+2. Redistributions in binary form must reproduce the above copyright notice,
+   this list of conditions and the following disclaimer in the documentation
+   and/or other materials provided with the distribution.
+
+3. Neither the name of the copyright holder nor the names of its
+   contributors may be used to endorse or promote products derived from
+   this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

package/README.md

@@ -0,0 +1,118 @@
+# `interestfor` Polyfill
+
+A polyfill for the `interestfor` attribute. This is an emerging standard for
+an API that hopes to be implemented in browsers. See the explainer for all of
+the details for the "real" feature:
+
+  https://open-ui.org/components/interest-invokers.explainer/
+
+## Usage
+To use this polyfill, simply load it:
+
+```html
+<script src="interestfor.min.js" async></script>
+
+<a interestfor=foo href=bar>Link</a>
+<div popover id=foo>Popover</div>
+```
+
+## Behavior Summary
+
+Adding the `interestfor` attribute to a button or link (the "interest
+invoker"), and giving it a value that is the IDREF of another element (the
+"target" element), will cause the target to get "interest" and "loseinterest"
+events when the user "shows interest" in the interest invoker. Showing interest
+can be done by hovering the element with the mouse, or focusing it with the
+keyboard. If the target is a popover, it will automatically be shown and hidden
+upon receiving and losing interest.
+
+Again, this is a quick summary. For the complete details, please [read the
+explainer](https://open-ui.org/components/interest-invokers.explainer).
+
+## Touchscreen not supported
+
+This polyfill will not provide touchscreen users with any way to show interest
+in the invoker, because on touchscreen, long-press is the user-understood way to
+"show interest" in an element. On today's browsers, long-pressing a link element
+brings up a useful context menu that contains items like "Share" and "Open in
+new tab". In order for the polyfill to support interest on mobile, that context
+menu would need to be surpressed completely. There is currently no way to
+provide access to the long-press context menu and *also* provide a way to show
+interest. Since the context menu contains items that users often use,
+eliminating access to the context menu is not what most developers want. So
+this polyfill does nothing on mobile touchscreen.
+
+This is one of the primary motivations for Chromium championing this as a
+native API in all browsers: to support all users, including those using
+touchscreens. If you'd like to weigh in on the need for this native API,
+please feel free to comment on the standards positions for the non-supporting
+browsers:
+
+- WebKit: https://github.com/WebKit/standards-positions/issues/464
+- Mozilla: https://github.com/mozilla/standards-positions/issues/1181
+
+
+## Implementation
+The polyfill adds event listeners to document.body that monitor for hover
+or keyboard events relevant fo 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
+target is a popover, it also handles showing or hiding the popover.
+
+Because this is a polyfill, a few things are slightly different than the
+native feature:
+
+- The CSS properties for controlling delays are implemented as custom
+  properties, so you'll want to add both the regular property and the custom
+  property, prefixed with `--`, to your stylesheet:
+
+  ```css
+  [interestfor] {
+    interest-show-delay: 400ms;
+    --interest-show-delay: 400ms;
+    interest-hide-delay: 200ms;
+    --interest-hide-delay: 200ms;
+  }
+  ```
+
+- The CSS pseudo classes for detecting invoker and target interest states are
+  implemented as regular class names, so again add both to your stylesheet:
+
+  ```css
+  :is([interestfor]:has-interest),
+  [interestfor].has-interest {
+    /* invoker styles */
+  }
+  :is([popover]:target-of-interest),
+  [popover].target-of-interest {
+    /* 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`).
+
+
+## Tests
+
+The `test/test.html` file exercises the various parts of this feature and tests
+for correctness. This is a manual test, since hovering, keyboard-focusing, etc.
+cannot be done programmatically. The test is capable of testing either the
+polyfill (optionally minified) or the native feature. You can run tests directly
+from this repo,
+[here](https://mfreed7.github.io/interestfor/test/test.html).
+
+## Things that don't (yet?) work
+
+These things are currently not handled correctly by this polyfill:
+
+- There is no support for the `--interest-delay` shorthand.
+- There is no touchscreen support, as mentioned above.
+
+## Improvements / Bugs
+
+If you find issues with the polyfill, feel free to file them [here](https://github.com/mfreed7/interestfor/issues).
+Even better, if you would like to contribute to this polyfill, I'm happy to review [pull requests](https://github.com/mfreed7/interestfor/pulls).
+Thanks in advance!

package/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "interestfor",
+  "version": "1.0.3",
+  "description": "A polyfill for the `interestfor` API",
+  "keywords": "interestfor, interesttarget, polyfill, hover-triggering",
+  "homepage": "https://github.com/mfreed7/interestfor#readme",
+  "bugs": "https://github.com/mfreed7/interestfor/issues",
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/mfreed7/interestfor.git"
+  },
+  "author": "Mason Freed <mfreed@mfreed.com>",
+  "license": "BSD-3-Clause",
+  "main": "src/interestfor.min.js",
+  "dependencies": {}
+}
+

package/src/interestfor.js

@@ -0,0 +1,378 @@
+// Copyright (c) 2025, Mason Freed
+// All rights reserved.
+//
+// This source code is licensed under the BSD-style license found in the
+// LICENSE file in the root directory of this source tree.
+
+// This is a polyfill of the `interestfor` attribute, as described here:
+//   https://open-ui.org/components/interest-invokers.explainer/
+
+(function () {
+  const attributeName = "interestfor";
+  const interestEventName = "interest";
+  const loseInterestEventName = "loseinterest";
+  const showDelayProp = "--interest-show-delay";
+  const hideDelayProp = "--interest-hide-delay";
+  const dataField = "__interestForData";
+  const targetDataField = "__interestForTargetData";
+
+  // Feature detection
+  if (window.interestForPolyfillInstalled) {
+    return;
+  }
+  window.interestForPolyfillInstalled = true;
+  const nativeSupported = HTMLButtonElement.prototype.hasOwnProperty(
+    "interestForElement"
+  );
+  if (nativeSupported && !window.interestForUsePolyfillAlways) {
+    return;
+  }
+  if (nativeSupported) {
+    // "Break" the existing feature, so the polyfill can take effect.
+    const cancel = (e) => {
+      if (e.isTrusted) {
+        e.preventDefault();
+        e.stopImmediatePropagation();
+      }
+    }
+    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 = {
+    Hover: "hover",
+    DeHover: "dehover",
+    Focus: "focus",
+    Blur: "blur",
+  };
+
+  // Gain or lose interest
+  function GainOrLoseInterest(invoker, target, newState) {
+    if (!invoker || !target) {
+      return false;
+    }
+    if (
+      !invoker.isConnected ||
+      GetInterestForTarget(invoker) !== target ||
+      (newState === InterestState.NoInterest &&
+        GetInterestInvoker(target) !== invoker)
+    ) {
+      return false;
+    }
+
+    // If gaining, handle existing invoker
+    if (newState !== InterestState.NoInterest) {
+      const existing = GetInterestInvoker(target);
+      if (existing) {
+        if (existing === invoker) {
+          existing[dataField].clearLostTask();
+          return false;
+        } else {
+          if (!GainOrLoseInterest(existing, target, InterestState.NoInterest)) {
+            return false;
+          }
+          // re-check preconditions
+          if (!invoker.isConnected || GetInterestForTarget(invoker) !== target) {
+            return false;
+          }
+        }
+      }
+      // finally apply interest
+      return applyState(invoker, newState);
+    }
+
+    // losing interest
+    clearState(invoker);
+    return true;
+  }
+
+  // Schedule tasks
+  function ScheduleInterestGainedTask(invoker, newState) {
+    const delay = getDelaySeconds(invoker, showDelayProp) * 1000;
+    if (!isFinite(delay) || delay < 0) {
+      return;
+    }
+    invoker[dataField].clearGainedTask();
+    invoker[dataField].gainedTimer = setTimeout(() => {
+      GainOrLoseInterest(invoker, GetInterestForTarget(invoker), newState);
+    }, delay);
+  }
+
+  function ScheduleInterestLostTask(invoker) {
+    const delay = getDelaySeconds(invoker, hideDelayProp) * 1000;
+    if (!isFinite(delay) || delay < 0) {
+      return;
+    }
+    invoker[dataField].clearLostTask();
+    invoker[dataField].lostTimer = setTimeout(() => {
+      GainOrLoseInterest(
+        invoker,
+        GetInterestForTarget(invoker),
+        InterestState.NoInterest
+      );
+    }, delay);
+  }
+
+  // Helpers
+  function GetInterestInvoker(target) {
+    const inv = target[targetDataField]?.invoker || null;
+    return inv && inv[dataField]?.state !== InterestState.NoInterest
+      ? inv
+      : null;
+  }
+  function GetInterestForTarget(el) {
+    const id = el.getAttribute(attributeName);
+    return document.getElementById(id);
+  }
+
+  function getDelaySeconds(el, prop) {
+    const raw = getComputedStyle(el).getPropertyValue(prop).trim();
+    const m = raw.match(/^([\d.]+)s$/);
+    if (m) {
+      return parseFloat(m[1]);
+    }
+    return parseFloat(raw) || 0;
+  }
+
+  // Actual state transitions
+  function applyState(invoker, newState) {
+    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 {}
+        }
+        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");
+        restoreFocusable(target);
+        break;
+    }
+    return true;
+  }
+
+  function clearState(invoker) {
+    const data = invoker[dataField];
+    clearTimeout(data.gainedTimer);
+    clearTimeout(data.lostTimer);
+    if (data.state !== InterestState.NoInterest) {
+      const target = GetInterestForTarget(invoker);
+      if (!target.dispatchEvent(new Event(loseInterestEventName))) {
+        return;
+      }
+      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"
+      );
+      restoreFocusable(target);
+      data.state = InterestState.NoInterest;
+    }
+  }
+
+  // Focusability utilities
+  const focusableSelector = [
+    "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 disableFocusable(root) {
+    root.querySelectorAll(focusableSelector).forEach((el) => {
+      if (el.hasAttribute("data-original-tabindex")) {
+        return;
+      }
+      const orig = el.getAttribute("tabindex");
+      el.setAttribute("data-original-tabindex", orig === null ? "none" : orig);
+      el.setAttribute("tabindex", "-1");
+    });
+  }
+  function restoreFocusable(root) {
+    root.querySelectorAll("[data-original-tabindex]").forEach((el) => {
+      const orig = el.getAttribute("data-original-tabindex");
+      if (orig === "none") {
+        el.removeAttribute("tabindex");
+      } else {
+        el.setAttribute("tabindex", orig);
+      }
+      el.removeAttribute("data-original-tabindex");
+    });
+  }
+
+  function HandleInterestHoverOrFocus(el, source) {
+    if (!el.isConnected) {
+      return;
+    }
+    const target = GetInterestForTarget(el);
+    if (!target) {
+      return;
+    }
+    let data = el[dataField];
+    if (!data) {
+      el[dataField] = {
+        state: InterestState.NoInterest,
+        gainedTimer: null,
+        lostTimer: null,
+        clearGainedTask() {
+          clearTimeout(this.gainedTimer);
+        },
+        clearLostTask() {
+          clearTimeout(this.lostTimer);
+        },
+      };
+      data = el[dataField];
+    }
+    const upstreamInvoker = GetInterestInvoker(el);
+
+    // Hover or focus
+    if (source === Source.Hover || source === Source.Focus) {
+      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
+      );
+    } else {
+      // Dehover or blur
+      data.clearGainedTask && data.clearGainedTask();
+      if (data.state !== InterestState.NoInterest) {
+        ScheduleInterestLostTask(el);
+      }
+      if (upstreamInvoker) {
+        upstreamInvoker[dataField].clearGainedTask();
+        if (source === Source.Blur || !el.matches(":hover")) {
+          ScheduleInterestLostTask(upstreamInvoker);
+        }
+      }
+    }
+  }
+
+  // Attach listeners
+  function addEventHandlers() {
+    document.body.addEventListener("mouseover", (e) =>
+      HandleInterestHoverOrFocus(e.target, Source.Hover)
+    );
+    document.body.addEventListener("mouseout", (e) =>
+      HandleInterestHoverOrFocus(e.target, Source.DeHover)
+    );
+    document.body.addEventListener("focusin", (e) =>
+      HandleInterestHoverOrFocus(e.target, Source.Focus)
+    );
+    document.body.addEventListener("focusout", (e) =>
+      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);
+      }
+    });
+  }
+
+  // CSS registration
+  function registerCustomProperties() {
+    const style = document.createElement("style");
+    style.textContent = `@property ${showDelayProp} {syntax: "<time>"; inherits: false; initial-value: 0.5s;}
+      @property ${hideDelayProp} {syntax: "<time>"; inherits: false; initial-value: 0.5s;}`;
+    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}).`
+    );
+  }
+  if (document.readyState === "complete") {
+    init();
+  } else {
+    window.addEventListener("load", init);
+  }
+})();

package/src/interestfor.min.js

@@ -0,0 +1,2 @@
+!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)}();

package/test/basic_test.html

@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+
+<script src="interestfor.min.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

@@ -0,0 +1,303 @@
+<!DOCTYPE html>
+
+<h3>Interestfor Polyfill Test</h3>
+<ul>
+  <li><p><label>
+    <select id="polyfill_select">
+      <option id="option_use_polyfill">Test using the polyfill</option>
+      <option id="option_use_min_polyfill">Test using the minified polyfill</option>
+      <option id="option_use_native">Test the native feature</option>
+    </select>
+  <li><p>Interestfor is <u id="native_support"></u> in this browser.</p>
+  <li><p>This test will test the <u id="what_to_test"></u>.</p>
+  <li><p>To cleanly re-test different cases (removing all polyfill traces), reload the page.</p></li>
+  <li><p><h3 style="display:inline">Note!</h3> This is a *manual* test - you must follow the instructions carefully while testing.</p></li>
+</ul>
+<button id="go">Run the test</button>
+
+<button class="test_content">Focusable thing before test stuff</button>
+<div class="test_content" id="targets">
+  <a href=foo id=unrelated class="hide test-element">Unrelated</a>
+  <a interestfor=already_present_target href=foo id=already_present class="hide test-element">Link</a></div>
+  <div popover id="already_present_target" class="hide">
+    Popover - ignore me
+  </div>
+</div>
+<button class="test_content">Focusable thing after test stuff</button>
+<div popover="manual" class="test_content" id="focus_warning"><h1>Get ready to use <span id="type_str">SOMETHING</span>...</h1></div>
+
+<div id=results class="hide">
+  <h3>Results:</h3>
+  <h3 id="summary"></h3>
+  <table id=log></table>
+</div>
+
+<style>
+  .pass {
+    background-color: lightgreen;
+  }
+  .fail {
+    background-color: red;
+  }
+  html,body {
+    width: 100%;
+  }
+  .test-element {
+    width:300px;
+    height:100px;
+    margin: 10px 0;
+    border: 1px solid red;
+  }
+  .test-element:not([popover]) {
+    display:block;
+  }
+  .hide {
+    visibility: hidden;
+  }
+  body.testing :not(.test_content,.test_content *) {
+    display:none;
+  }
+  :focus-visible {
+    outline: 3px solid red;
+  }
+  #focus_warning {
+    inset:auto;
+    top:50px;
+    left:50px;
+    width: 600px;
+    height: 400px;
+    border: 2px solid red;
+  }
+</style>
+
+<script>
+const nativelySupported = HTMLButtonElement.prototype.hasOwnProperty("interestForElement");
+const polyfillSelect = document.querySelector('#polyfill_select');
+const goButton = document.querySelector('#go');
+const whatToTest = document.querySelector('#what_to_test');
+if (!nativelySupported) {
+  const useNativeOption = document.querySelector('#option_use_native');
+  useNativeOption.textContent = 'Test the native feature (Unavailable)';
+  useNativeOption.disabled = true;
+}
+document.querySelector('#native_support').textContent = nativelySupported ? 'Supported' : 'NOT supported';
+polyfillSelect.onchange = () => updateWhatToTest();
+updateWhatToTest();
+function updateWhatToTest() {
+  if (document.querySelector('#option_use_native').selected) {
+    whatToTest.textContent = 'NATIVE IMPLEMENTATION';
+  } else if (document.querySelector('#option_use_polyfill').selected) {
+    whatToTest.textContent = 'POLYFILL';
+  } else if (document.querySelector('#option_use_min_polyfill').selected) {
+    whatToTest.textContent = 'POLYFILL (minified)';
+  }
+}
+goButton.onclick = async () => {
+  goButton.disabled = true;
+  polyfillSelect.disabled = true;
+  const normalPolyfill = document.querySelector('#option_use_polyfill').selected;
+  const minPolyfill = document.querySelector('#option_use_min_polyfill').selected;
+  if (normalPolyfill || minPolyfill) {
+    // This will tell the polyfill to load even if natively supported:
+    window.interestForUsePolyfillAlways = true;
+    const polyfill = document.createElement('script');
+    polyfill.src = "../src/interestfor." + (minPolyfill ? "min.js" : "js")
+    const loaded = new Promise(resolve => polyfill.onload = resolve);
+    document.body.appendChild(polyfill);
+    await loaded;
+  }
+  document.querySelector('#results').classList.remove('hide');
+  // Run the tests
+  testHarness();
+};
+
+function addResult(success,msg) {
+  const newRow = document.createElement('tr');
+  newRow.innerHTML = `<td class=${success ? 'pass' : 'fail'}>${success ? 'PASS' : 'FAIL'}</td><td>${msg}</td>`;
+  document.getElementById('log').appendChild(newRow);
+}
+window.onerror = function(message, source, lineno, colno, error) {
+  addResult(false,`Uncaught exception: ${message} at line ${lineno} in file ${source}`);
+};
+
+let any_failures = false;
+function assert_true(val,msg,logSuccess) {
+  if (!val) {
+    console.log('=====> FAIL! ',msg);
+    any_failures = true;
+    addResult(false,msg);
+    return false;
+  } else if (logSuccess) {
+    addResult(true,msg);
+    return true;
+  }
+}
+function assert_false(val,msg,logSuccess) {
+  return assert_true(!val,msg,logSuccess);
+}
+function notreached(msg) {
+  return assert_true(false,msg,/*logSuccess*/true);
+}
+
+function assert_array_equals(actual, expected, description, logSuccess) {
+  if (!(typeof actual === "object" && actual !== null && "length" in actual)) {
+    assert_true(false, `${description}, value is ${actual}, expected array`);
+    return false;
+  }
+  if (actual.length !== expected.length) {
+    assert_true(false,`${description}, lengths differ, expected array ${expected} length ${expected.length}, got ${actual} length ${actual.length}`);
+    return false;
+  }
+  let val = true;
+  for (var i = 0; i < actual.length; i++) {
+    if (actual.hasOwnProperty(i) !== expected.hasOwnProperty(i)) {
+      val = assert_true(false,`${description}, expected property ${i} to be ${expected[i]} but was ${actual[i]} (expected array ${expected} got ${actual})`)
+        && val;
+    }
+    if (expected[i] !== actual[i]) {
+      val = assert_true(false,`${description}, expected property ${i} to be ${expected[i]} but got ${actual[i]} (expected array ${expected} got ${actual})`)
+        && val;
+    }
+  }
+  if (val) {
+    assert_true(true,description,logSuccess);
+  }
+}
+
+const hoverTimeMilliseconds = 500;
+async function waitForHoverOrFocus(type,element,target,timeMilliseconds) {
+  let events = [];
+  const controller = new AbortController();
+  const signal = controller.signal;
+  target.addEventListener('interest',() => events.push('interest'),{signal});
+  target.addEventListener('loseinterest',() => events.push('loseinterest'),{signal});
+
+  let done = false;
+  do {
+    events = [];
+    let goBackText = "";
+    switch (type) {
+      case 'hover':
+        goBackText = 'HOVER ME WITH THE MOUSE'
+        element.innerText = goBackText;
+        await new Promise(resolve => element.addEventListener('mouseenter',resolve, {once:true}));
+        element.innerText = 'STAY HOVERING ON THIS';
+        break;
+      case 'focus':
+        goBackText = 'FOCUS ME WITH THE KEYBOARD'
+        element.innerText = goBackText;
+        await new Promise(resolve => element.addEventListener('focus',resolve, {once:true}));
+        element.innerText = 'STAY FOCUSED ON THIS';
+        break;
+      default:
+        notreached('invalid type');
+    }
+    await new Promise(resolve => setTimeout(resolve,0));
+    midEvents = [...events];
+    midTargetOpen = target.matches(':popover-open');
+    let gotTimeout = false;
+    const timeout = new Promise(resolve => setTimeout(() => {
+      gotTimeout=true;
+      resolve();
+    },timeMilliseconds));
+    switch (type) {
+      case 'hover':
+        const mouseLeft = new Promise(resolve => element.addEventListener('mouseleave',resolve, {once:true}));
+        await Promise.race([timeout,mouseLeft]);
+        break;
+      case 'focus':
+        const focusLeft = new Promise(resolve => element.addEventListener('blur',resolve, {once:true}));
+        await Promise.race([timeout,focusLeft]);
+        break;
+      default:
+        notreached('invalid type');
+    }
+    done = gotTimeout;
+    if (!done) {
+      element.innerText = goBackText;
+      await timeout;
+    }
+  } while (!done);
+  controller.abort();
+  await new Promise(resolve => setTimeout(resolve,0));
+  return {midEvents, midTargetOpen, endEvents: [...events], endTargetOpen: target.matches(':popover-open')};
+}
+
+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.classList.remove('hide');
+
+  // Show interest in the invoker
+  let {midEvents, midTargetOpen, endEvents, endTargetOpen} = await waitForHoverOrFocus(type,invoker,target,hoverTimeMilliseconds);
+  const startString = type=='hover' ? 'hovering' : 'focusing';
+  assert_false(midTargetOpen,`popover should *not* be immediately invoked by ${startString}`,true);
+  assert_array_equals(midEvents,[],`No events should be immediately fired by ${startString}`,true);
+  assert_true(endTargetOpen,`popover should invoked after delay after ${startString}`,true);
+  assert_array_equals(endEvents,['interest'],`The interest event should be fired after ${startString}`,true);
+  invoker.classList.add('hide');
+  unrelated.classList.remove('hide');
+
+  // Lose interest in the invoker
+  ({midEvents, midTargetOpen, endEvents, endTargetOpen} = await waitForHoverOrFocus(type,unrelated,target,hoverTimeMilliseconds));
+  const endString = type=='hover' ? 'de-hovering' : 'blurring';
+  assert_true(midTargetOpen,`popover should *not* be immediately hidden by ${endString}`,true);
+  assert_array_equals(midEvents,[],`No events should be immediately fired by ${endString}`,true);
+  assert_false(endTargetOpen,`popover should hidden after delay after ${endString}`,true);
+  assert_array_equals(endEvents,['loseinterest'],`The loseinterest event should be fired after ${endString}`,true);
+  invoker.classList.add('hide');
+  unrelated.classList.add('hide');
+}
+
+async function showFocusWarning(type) {
+  const popover = document.getElementById('focus_warning');
+  const typeStr = document.getElementById('type_str');
+  switch (type) {
+    case 'hover':
+      typeStr.innerText = "THE MOUSE to activate elements";
+      break;
+    case 'focus':
+      typeStr.innerText = "THE KEYBOARD to activate elements (and move the mouse away)";
+      break;
+    default:
+      notreached('invalid type');
+  }
+  popover.showPopover();
+  await new Promise(resolve => setTimeout(resolve,3000));
+  popover.hidePopover();
+}
+
+async function testHarness() {
+  document.body.classList.add('testing');
+
+  for(type of ['hover','focus']) {
+    await showFocusWarning(type);
+    await testOne(already_present,already_present_target,type,'Pre-existing elements');
+
+    // Dynamically add elements:
+    const targets = document.getElementById('targets');
+    const dynamic_invoker = document.createElement('a');
+    dynamic_invoker.href = 'foo';
+    dynamic_invoker.setAttribute('interestfor','dynamic_target');
+    dynamic_invoker.classList='hide test-element';
+    const dynamic_target = document.createElement('div');
+    dynamic_target.popover = 'auto';
+    dynamic_target.id = 'dynamic_target';
+    dynamic_target.classList = 'hide';
+    targets.append(dynamic_invoker,dynamic_target);
+    await testOne(dynamic_invoker,dynamic_target,type,'Dynamically-added elements');
+    dynamic_invoker.remove();
+    dynamic_target.remove();
+  }
+
+  // Test complete
+  targets.style.display = 'none';
+  const summary = document.getElementById('summary');
+  summary.innerText = any_failures ? 'FAILURE' : 'PASS';
+  summary.classList = any_failures ? 'fail' : 'pass';
+  document.body.classList.remove('testing');
+}
+
+</script>