From 04f8e8cf4146872bc5ff173fc2711038f362c3f8 Mon Sep 17 00:00:00 2001 From: Jack Date: Thu, 11 Jul 2024 03:06:44 +0900 Subject: [PATCH 1/4] hidePopover with button click not timeout --- source | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/source b/source index 90829546f9d..b6cf5b09eb3 100644 --- a/source +++ b/source @@ -84775,10 +84775,12 @@ dictionary DragEventInit : MouseEventInit { element.

<button id=submit>Submit</button>
+<button id="close">Close</button>
 <p><output><span popover=manual></span></output></p>
 
 <script>
  const sBtn = document.getElementById("submit");
+ const cBtn = document.getElementById("close");
  const outSpan = document.querySelector("output [popover=manual]");
  let successMessage;
  let errorMessage;
@@ -84787,7 +84789,7 @@ dictionary DragEventInit : MouseEventInit {
   and determining the appropriate success or error
   messages to use */
 
- sBtn.addEventListener("click", ()=> {
+ sBtn.addEventListener("click", () => {
   if ( success ) {
    outSpan.textContent = successMessage;
   }
@@ -84796,9 +84798,9 @@ dictionary DragEventInit : MouseEventInit {
   }
   outSpan.showPopover();
 
-  setTimeout(function () {
+  cBtn.addEventListener("click", () => {
    outSpan.hidePopover();
-  }, 10000);
+  });
  });
 </script>
From d69b76fb92ad1c507f76ccf72c5c87b8510c9ba5 Mon Sep 17 00:00:00 2001 From: Jack Date: Thu, 11 Jul 2024 14:01:55 +0900 Subject: [PATCH 2/4] use fetch result message and reload hides popover in popover example --- source | 49 +++++++++++++++++++++---------------------------- 1 file changed, 21 insertions(+), 28 deletions(-) diff --git a/source b/source index b6cf5b09eb3..1ec4b87ab81 100644 --- a/source +++ b/source @@ -84774,35 +84774,28 @@ dictionary DragEventInit : MouseEventInit { the user. The following demonstrates how one could reveal a popover in an output element.

- 
<button id=submit>Submit</button>
-<button id="close">Close</button>
-<p><output><span popover=manual></span></output></p>
-
-<script>
- const sBtn = document.getElementById("submit");
- const cBtn = document.getElementById("close");
- const outSpan = document.querySelector("output [popover=manual]");
- let successMessage;
- let errorMessage;
-
- /* define logic for determining success of action
-  and determining the appropriate success or error
-  messages to use */
-
- sBtn.addEventListener("click", () => {
-  if ( success ) {
-   outSpan.textContent = successMessage;
-  }
-  else {
-   outSpan.textContent = errorMessage;
-  }
-  outSpan.showPopover();
+   
<button id="load">load</button>
+    <div id="message" popover>
+      <output></output>
+      <button popovertarget="message" popovertargetaction="hide">x</button>
+    </div>
 
-  cBtn.addEventListener("click", () => {
-   outSpan.hidePopover();
-  });
- });
-</script>

+    <script>
+      const $load = document.querySelector("#load")
+      const $message = document.querySelector("#message")
+      const $output = $message.querySelector("output")
+
+      $load.addEventListener("click", async () => {
+        $message.hidePopover()
+        const res = await fetch(url)
+        if (res.ok) {
+          $output.innerHTML = "Fetch Succeed"
+        } else {
+          $output.innerHTML = "Fetch Failed"
+        }
+        $message.showPopover()
+      })
+    </script>

Inserting a popover element into an output element will generally From 0024232d50c66b07c94c3180293cbc6453aff1c3 Mon Sep 17 00:00:00 2001 From: Jack Date: Wed, 17 Jul 2024 18:25:00 +0900 Subject: [PATCH 3/4] replace with tooltip w/ delayed show/hide --- source | 27 ++++++++++++--------------- 1 file changed, 12 insertions(+), 15 deletions(-) diff --git a/source b/source index 1ec4b87ab81..13c6c51243b 100644 --- a/source +++ b/source @@ -84774,26 +84774,23 @@ dictionary DragEventInit : MouseEventInit { the user. The following demonstrates how one could reveal a popover in an output element.

- 
<button id="load">load</button>
-    <div id="message" popover>
+   
<img id="image" src="cat.js" alt="pretty kitten">
+    <div id="tooltip" popover>
       <output></output>
       <button popovertarget="message" popovertargetaction="hide">x</button>
     </div>
 
     <script>
-      const $load = document.querySelector("#load")
-      const $message = document.querySelector("#message")
-      const $output = $message.querySelector("output")
-
-      $load.addEventListener("click", async () => {
-        $message.hidePopover()
-        const res = await fetch(url)
-        if (res.ok) {
-          $output.innerHTML = "Fetch Succeed"
-        } else {
-          $output.innerHTML = "Fetch Failed"
-        }
-        $message.showPopover()
+      const $img = document.querySelector("#image")
+      const $tooltip = document.querySelector("#tooltip")
+      const $output = $tooltip.querySelector("output")
+
+      $img.addEventListener("pinterover", () => {
+        $output.textContent = $img.alt
+        $tooltip.showPopover()
+      })
+      $img.addEventListener("pinterleave", () => {
+        $tooltip.showPopover()
       })
     </script>

   

From 510d12ae9b4b95b86f164d016479879152f088aa Mon Sep 17 00:00:00 2001
From: Jack 
Date: Wed, 17 Jul 2024 20:08:16 +0900
Subject: [PATCH 4/4] typo

---
 source | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/source b/source
index 13c6c51243b..7ac638d5a85 100644
--- a/source
+++ b/source
@@ -84785,11 +84785,11 @@ dictionary DragEventInit : MouseEventInit {
       const $tooltip = document.querySelector("#tooltip")
       const $output = $tooltip.querySelector("output")
 
-      $img.addEventListener("pinterover", () => {
+      $img.addEventListener("pointerover", () => {
         $output.textContent = $img.alt
         $tooltip.showPopover()
       })
-      $img.addEventListener("pinterleave", () => {
+      $img.addEventListener("pointerleave", () => {
         $tooltip.showPopover()
       })
     </script>