feat: Added option for sticky display of variants panel with a single…

… click (#2554) * add popover option * Update api.md * restore clear timer * change api name * update example * Update index.html * Update index.html
arnog · Nov 29, 2024 · 5622a8e · 5622a8e
1 parent 4f3c0c1
commit 5622a8e
Show file tree

Hide file tree

Showing 5 changed files with 178 additions and 29 deletions.
diff --git a/examples/sticky-variant-panel/index.html b/examples/sticky-variant-panel/index.html
@@ -0,0 +1,115 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8" />
+    <title>MathLive Sticky Variants Panel Example</title>
+    <style>
+      body {
+        color: #444;
+        background-color: #f9f9f9;
+      }
+
+      main {
+        max-width: 820px;
+        margin: auto;
+      }
+
+      math-field {
+        width: 100%;
+        border: 1px solid #ddd;
+        padding: 5px;
+        margin: 10px 0 10px 0;
+        border-radius: 5px;
+        background-color: #fff;
+      }
+
+      #value,
+      #result {
+        padding: 5px;
+        border-radius: 5px;
+        border: 1px solid #000;
+
+        color: rgb(241, 188, 91);
+        background: #35434e;
+
+        font-family: monospace;
+        margin-bottom: 1em;
+      }
+    </style>
+  </head>
+
+  <body>
+    <main>
+      <h2>MathLive Sticky Variants Panel Example</h2>
+      <math-field id="mf" virtual-keyboard-mode="manual"></math-field>
+      <div id="value"></div>
+    </main>
+
+    <script type="module">
+      import "/dist/mathlive.mjs";
+
+      mathVirtualKeyboard.layouts = [
+        {
+          label: "Basic",
+          rows: [
+            [
+              "[7]",
+              "[8]",
+              "[9]",
+              "[+]",
+              "[separator-5]",
+              {
+                latex: "abc",
+                variants: ["a", "b", "c"],
+                stickyVariantPanel: true,
+              },
+              {
+                latex: "xyz",
+                variants: ["x", "y", "z"],
+                stickyVariantPanel: true,
+              },
+            ],
+            [
+              "[4]",
+              "[5]",
+              "[6]",
+              "[-]",
+              "[separator-5]",
+              {
+                latex: "cm",
+                variants: ["cm", "m", "km"],
+                stickyVariantPanel: true,
+              },
+              {
+                latex: "cm^2",
+                variants: ["cm^2", "m^2", "km^2"],
+                stickyVariantPanel: true,
+              },
+            ],
+            [
+              "[1]",
+              "[2]",
+              "[3]",
+              "\\times",
+              "[separator-5]",
+              { label: "[backspace]", width: 2 },
+            ],
+            [
+              "[.]",
+              "[0]",
+              "[=]",
+              "\\div",
+              "[separator-5]",
+              { label: "[return]", width: 2 },
+            ],
+          ],
+        },
+      ];
+
+      document.getElementById("mf").addEventListener("input", (ev) => {
+        const mf = ev.target;
+        document.getElementById("value").innerHTML = mf.getValue();
+      });
+    </script>
+  </body>
+</html>
diff --git a/src/api.md b/src/api.md
@@ -4529,6 +4529,20 @@ Variant of the keycap when the shift key is pressed
 
 </MemberCard>
 
+<a id="stickyvariantpanel" name="stickyvariantpanel"></a>
+
+<MemberCard>
+
+##### VirtualKeyboardKeycap.stickyVariantPanel
+
+```ts
+stickyVariantPanel: boolean;
+```
+
+Open variants panel without long press and does not close automatically
+
+</MemberCard>
+
 <a id="tooltip" name="tooltip"></a>
 
 <MemberCard>

diff --git a/src/public/virtual-keyboard.ts b/src/public/virtual-keyboard.ts
@@ -98,6 +98,9 @@ export interface VirtualKeyboardKeycap {
 
   /** Name of the layer to shift to when the key is pressed */
   layer: string;
+
+  /** Open variants panel without long press and does not close automatically */
+  stickyVariantPanel: boolean;
 }
 /**
  * @category Virtual Keyboard

diff --git a/src/virtual-keyboard/utils.ts b/src/virtual-keyboard/utils.ts
@@ -1136,18 +1136,21 @@ function handlePointerDown(ev: PointerEvent) {
 
   if (keycap.variants) {
     if (pressAndHoldTimer) clearTimeout(pressAndHoldTimer);
-    pressAndHoldTimer = setTimeout(() => {
-      if (target!.classList.contains('is-pressed')) {
-        target!.classList.remove('is-pressed');
-        target!.classList.add('is-active');
-        if (ev.target && 'releasePointerCapture' in ev.target)
-          (ev.target as HTMLElement).releasePointerCapture(ev.pointerId);
-        showVariantsPanel(target!, () => {
-          controller.abort();
-          target?.classList.remove('is-active');
-        });
-      }
-    }, 300);
+    pressAndHoldTimer = setTimeout(
+      () => {
+        if (target!.classList.contains('is-pressed')) {
+          target!.classList.remove('is-pressed');
+          target!.classList.add('is-active');
+          if (ev.target && 'releasePointerCapture' in ev.target)
+            (ev.target as HTMLElement).releasePointerCapture(ev.pointerId);
+          showVariantsPanel(target!, () => {
+            controller.abort();
+            target?.classList.remove('is-active');
+          });
+        }
+      },
+      keycap.stickyVariantPanel ? 0 : 300
+    );
   }
 
   ev.preventDefault();

diff --git a/src/virtual-keyboard/variants.ts b/src/virtual-keyboard/variants.ts
@@ -292,23 +292,37 @@ export function showVariantsPanel(
         { capture: true, signal }
       );
 
-      window.addEventListener(
-        'pointercancel',
-        () => {
-          hideVariantsPanel();
-          onClose?.();
-        },
-        { signal }
-      );
-
-      window.addEventListener(
-        'pointerup',
-        () => {
-          hideVariantsPanel();
-          onClose?.();
-        },
-        { signal }
-      );
+      if (keyboard.getKeycap(keycap?.id)?.stickyVariantPanel) {
+        window.addEventListener(
+          'pointerdown',
+          (ev) => {
+            if (!(ev.target instanceof Node)) return;
+            const isInside = variantPanel.contains(ev.target);
+            if (ev.target === variantPanel || isInside) return;
+            hideVariantsPanel();
+            onClose?.();
+          },
+          { signal }
+        );
+      } else {
+        window.addEventListener(
+          'pointercancel',
+          () => {
+            hideVariantsPanel();
+            onClose?.();
+          },
+          { signal }
+        );
+
+        window.addEventListener(
+          'pointerup',
+          () => {
+            hideVariantsPanel();
+            onClose?.();
+          },
+          { signal }
+        );
+      }
     });
   }