From 04f8e8cf4146872bc5ff173fc2711038f362c3f8 Mon Sep 17 00:00:00 2001 From: Jack Date: Thu, 11 Jul 2024 03:06:44 +0900 Subject: [PATCH 1/7] 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/7] 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/7] 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/7] 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>
From d2e635d6a8d307af7d7e4048287262795441b450 Mon Sep 17 00:00:00 2001 From: Jack Date: Mon, 14 Oct 2024 05:22:14 +0900 Subject: [PATCH 5/7] apply review --- source | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/source b/source index 7ac638d5a85..b5c9d8807f0 100644 --- a/source +++ b/source @@ -84776,21 +84776,21 @@ dictionary DragEventInit : MouseEventInit { 
<img id="image" src="cat.js" alt="pretty kitten">
     <div id="tooltip" popover>
-      <output></output>
+      <p></p>
       <button popovertarget="message" popovertargetaction="hide">x</button>
     </div>
 
     <script>
-      const $img = document.querySelector("#image")
-      const $tooltip = document.querySelector("#tooltip")
-      const $output = $tooltip.querySelector("output")
+      const img = document.querySelector("#image")
+      const tooltip = document.querySelector("#tooltip")
+      const p = tooltip.querySelector("p")
 
       $img.addEventListener("pointerover", () => {
-        $output.textContent = $img.alt
+        $p.textContent = $img.alt
         $tooltip.showPopover()
       })
       $img.addEventListener("pointerleave", () => {
-        $tooltip.showPopover()
+        $tooltip.hidePopover()
       })
     </script>
From 82b29dcd544ec62f22e6fe0cf91d236c0e60f7e2 Mon Sep 17 00:00:00 2001 From: Jack Date: Wed, 16 Oct 2024 09:21:49 +0900 Subject: [PATCH 6/7] dedent --- source | 34 +++++++++++++++++----------------- 1 file changed, 17 insertions(+), 17 deletions(-) diff --git a/source b/source index b5c9d8807f0..4165ba4f0cd 100644 --- a/source +++ b/source @@ -84775,24 +84775,24 @@ dictionary DragEventInit : MouseEventInit { element.

<img id="image" src="cat.js" alt="pretty kitten">
-    <div id="tooltip" popover>
-      <p></p>
-      <button popovertarget="message" popovertargetaction="hide">x</button>
-    </div>
+<div id="tooltip" popover>
+  <p></p>
+  <button popovertarget="message" popovertargetaction="hide">x</button>
+</div>
+
+<script>
+  const img = document.querySelector("#image")
+  const tooltip = document.querySelector("#tooltip")
+  const p = tooltip.querySelector("p")
 
-    <script>
-      const img = document.querySelector("#image")
-      const tooltip = document.querySelector("#tooltip")
-      const p = tooltip.querySelector("p")
-
-      $img.addEventListener("pointerover", () => {
-        $p.textContent = $img.alt
-        $tooltip.showPopover()
-      })
-      $img.addEventListener("pointerleave", () => {
-        $tooltip.hidePopover()
-      })
-    </script>
+ $img.addEventListener("pointerover", () => { + $p.textContent = $img.alt + $tooltip.showPopover() + }) + $img.addEventListener("pointerleave", () => { + $tooltip.hidePopover() + }) +</script>

Inserting a popover element into an output element will generally From b1c72189ff3179fcbdfded9db0cba51c2d780b80 Mon Sep 17 00:00:00 2001 From: Jack Date: Sat, 9 Nov 2024 01:12:13 +0900 Subject: [PATCH 7/7] fixup for review --- source | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/source b/source index 4165ba4f0cd..e9975ab7d61 100644 --- a/source +++ b/source @@ -84776,21 +84776,21 @@ dictionary DragEventInit : MouseEventInit { 

<img id="image" src="cat.js" alt="pretty kitten">
 <div id="tooltip" popover>
-  <p></p>
+  <output></output>
   <button popovertarget="message" popovertargetaction="hide">x</button>
 </div>
 
 <script>
   const img = document.querySelector("#image")
   const tooltip = document.querySelector("#tooltip")
-  const p = tooltip.querySelector("p")
+  const output = tooltip.querySelector("output")
 
-  $img.addEventListener("pointerover", () => {
-    $p.textContent = $img.alt
-    $tooltip.showPopover()
+  img.addEventListener("pointerover", () => {
+    output.textContent = img.alt
+    tooltip.showPopover()
   })
-  $img.addEventListener("pointerleave", () => {
-    $tooltip.hidePopover()
+  img.addEventListener("pointerleave", () => {
+    tooltip.hidePopover()
   })
 </script>