extend webui-make-clickable functionality

basher · Apr 30, 2024 · 0339748 · 0339748
1 parent 4fdad06
commit 0339748
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 5 deletions.
diff --git a/ui/npm-shrinkwrap.json b/ui/npm-shrinkwrap.json
diff --git a/ui/src/javascript/web-components/webui-make-clickable.ts b/ui/src/javascript/web-components/webui-make-clickable.ts
@@ -14,6 +14,12 @@ export default class WebUIMakeClickable extends HTMLElement {
             return;
         }
 
+        // Allow nested buttons to do their thing.
+        const target = e.target as HTMLElement;
+        if (target?.nodeName === 'BUTTON') {
+            return;
+        }
+
         if (e.target !== this.link) {
             this.link?.click();
         }

diff --git a/ui/src/stylesheets/web-components/_webui-share.scss b/ui/src/stylesheets/web-components/_webui-share.scss
@@ -7,6 +7,8 @@ Dependencies.
 // @use '../mixins' as *;
 
 webui-share {
+    display: inline-block;
+
     &:not(:defined) {
         display: none;
     }

diff --git a/ui/stories/6. Web Components Or Custom Elements/WebUI Make Clickable/WebUIMakeClickable.js b/ui/stories/6. Web Components Or Custom Elements/WebUI Make Clickable/WebUIMakeClickable.js
@@ -26,9 +26,40 @@ export const WebUIMakeClickableHtml = () => `
                     Title is the primary link
                 </a>
             </h3>
-            <p>This whole component is clickable.</p>
-            <p>This is a <a href="https://www.google.com">secondary link</a>.</p>
-            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat, totam molestiae. Soluta voluptatem deleniti excepturi laudantium. Officia at repudiandae quo nulla reiciendis optio modi nemo.</p>
+            <p>This whole component is clickable, and goes to the primary link URL.</p>
+            <p>This is a <a href="https://www.google.com">secondary link</a> that goes to a different URL.</p>
+            <p>This is a <code>&lt;webui-share&gt;</code> web component to test (nested) button events.</p>
+
+            <webui-share>
+                <webui-disclosure>
+                    <button
+                        type="button"
+                        class="button button--text"
+                        data-trigger
+                        hidden
+                    >
+                        Share
+                    </button>
+
+                    <div data-content>
+                        <label for="share-input" class="label">Share page</label>
+                        <input
+                            type="text"
+                            id="share-input"
+                            class="input"
+                            value=""
+                            data-input
+                        />
+                        <button
+                            type="button"
+                            class="button button--text button--secondary"
+                            data-copy
+                        >
+                            Copy
+                        </button>
+                    </div>
+                </webui-disclosure>
+            </webui-share>
         </div>
     </article>
 </webui-make-clickable>