fix css when web components not defined

basher · Apr 21, 2024 · 112e174 · 112e174
1 parent 67e5049
commit 112e174
Show file tree

Hide file tree

Showing 23 changed files with 94 additions and 59 deletions.
diff --git a/ui/package.json b/ui/package.json
@@ -2,7 +2,7 @@
     "name": "web-ui-boilerplate",
     "description": "UI boilerplate for websites/webapps using vanilla HTML/CSS/JavaScript, powered by Storybook, bundled by Parcel.",
     "author": "basher",
-    "version": "3.1.2",
+    "version": "3.1.3",
     "license": "ISC",
     "repository": {
         "type": "git",

diff --git a/ui/src/javascript/web-components/webui-carousel.ts b/ui/src/javascript/web-components/webui-carousel.ts
@@ -312,7 +312,7 @@ export default class WebUICarousel extends HTMLElement {
     }
 
     // Handle constructor() event listeners.
-    handleEvent(e: MouseEvent) {
+    public handleEvent(e: MouseEvent) {
         //
     }
 }
diff --git a/ui/src/javascript/web-components/webui-disclosure.ts b/ui/src/javascript/web-components/webui-disclosure.ts
@@ -74,7 +74,7 @@ export default class WebUIDisclosure extends HTMLElement {
     }
 
     // Handle constructor() event listeners.
-    handleEvent(e: MouseEvent) {
+    public handleEvent(e: MouseEvent) {
         const target = e.currentTarget as HTMLElement;
         const isExpanded =
             target?.getAttribute('aria-expanded') === 'true' || false;
@@ -84,7 +84,7 @@ export default class WebUIDisclosure extends HTMLElement {
     }
 
     // Handle (global) event listeners which are not part of this web component.
-    connectedCallback() {
+    public connectedCallback() {
         document.addEventListener('keyup', (e: KeyboardEvent) =>
             this.handleGlobalKeyup(e),
         );
@@ -93,7 +93,7 @@ export default class WebUIDisclosure extends HTMLElement {
         );
     }
 
-    disconnectedCallback() {
+    public disconnectedCallback() {
         document.removeEventListener('keyup', this.handleGlobalKeyup);
         document.removeEventListener('click', this.handleGlobalClick);
     }

diff --git a/ui/src/javascript/web-components/webui-form-validate.ts b/ui/src/javascript/web-components/webui-form-validate.ts
@@ -107,7 +107,7 @@ export default class FormValidate extends HTMLElement {
     }
 
     // Handle constructor() event listeners.
-    handleEvent(e: MouseEvent) {
+    public handleEvent(e: MouseEvent) {
         if (e.type === 'submit') {
             this.handleSubmit(e);
         }

diff --git a/ui/src/javascript/web-components/webui-make-clickable.ts b/ui/src/javascript/web-components/webui-make-clickable.ts
@@ -8,7 +8,7 @@ export default class WebUIMakeClickable extends HTMLElement {
     }
 
     // Handle constructor() event listeners.
-    handleEvent(e: MouseEvent) {
+    public handleEvent(e: MouseEvent) {
         if (e.target !== this.link) {
             this.link?.click();
         }

diff --git a/ui/src/javascript/web-components/webui-modal.ts b/ui/src/javascript/web-components/webui-modal.ts
@@ -54,7 +54,7 @@ export default class WebUIModal extends HTMLElement {
     }
 
     // Handle constructor() event listeners.
-    handleEvent(e: MouseEvent) {
+    public handleEvent(e: MouseEvent) {
         const target = e.currentTarget as HTMLButtonElement;
 
         // Click 'open' button.
@@ -72,13 +72,13 @@ export default class WebUIModal extends HTMLElement {
     }
 
     // Handle (global) event listeners which are not part of this web component.
-    connectedCallback() {
+    public connectedCallback() {
         document.addEventListener('click', (e: MouseEvent) =>
             this.handleGlobalClick(e),
         );
     }
 
-    disconnectedCallback() {
+    public disconnectedCallback() {
         document.removeEventListener('click', this.handleGlobalClick);
     }
 }
diff --git a/ui/src/javascript/web-components/webui-notify.ts b/ui/src/javascript/web-components/webui-notify.ts
@@ -8,7 +8,7 @@ export default class WebUINotify extends HTMLElement {
     }
 
     // Handle constructor() event listeners.
-    handleEvent() {
+    public handleEvent() {
         this.setAttribute('hidden', '');
     }
 }
diff --git a/ui/src/javascript/web-components/webui-predictive-search.ts b/ui/src/javascript/web-components/webui-predictive-search.ts
@@ -91,7 +91,7 @@ export default class WebUIPredictiveSearch extends HTMLElement {
     };
 
     // Handle constructor() event listeners.
-    handleEvent(e: SubmitEvent) {
+    public handleEvent(e: SubmitEvent) {
         // Results are shown dynamically, so no need to submit.
         e.preventDefault();
     }

diff --git a/ui/src/javascript/web-components/webui-range-input.ts b/ui/src/javascript/web-components/webui-range-input.ts
@@ -24,7 +24,7 @@ export default class WebUIRangeInput extends HTMLElement {
     }
 
     // Handle constructor() event listeners.
-    handleEvent() {
+    public handleEvent() {
         this.rangeInput &&
             this.rangeOutput &&
             this.handleValidRanges(this.rangeInput, this.rangeOutput);

diff --git a/ui/src/javascript/web-components/webui-share.ts b/ui/src/javascript/web-components/webui-share.ts
@@ -54,7 +54,7 @@ export default class WebUIShare extends HTMLElement {
     }
 
     // Handle constructor() event listeners.
-    handleEvent(e: MouseEvent) {
+    public handleEvent(e: MouseEvent) {
         const target = e.currentTarget as HTMLButtonElement;
 
         // Click 'share' button.

diff --git a/ui/src/javascript/web-components/webui-toggle.ts b/ui/src/javascript/web-components/webui-toggle.ts
@@ -11,7 +11,7 @@ export default class WebUIToggle extends HTMLElement {
     }
 
     // Handle constructor() event listeners.
-    handleEvent() {
+    public handleEvent() {
         const isChecked = this.switch?.getAttribute('aria-checked') === 'true';
 
         this.switch?.setAttribute(

diff --git a/ui/src/javascript/web-components/webui-video-player.ts b/ui/src/javascript/web-components/webui-video-player.ts
@@ -75,7 +75,7 @@ export default class WebUIVideoPlayer extends HTMLElement {
     }
 
     // Handle constructor() event listeners.
-    handleEvent(e: MouseEvent) {
+    public handleEvent(e: MouseEvent) {
         this.handlePlay(e);
     }
 }
diff --git a/ui/src/stylesheets/web-components/_index.scss b/ui/src/stylesheets/web-components/_index.scss
@@ -1,6 +1,7 @@
 @use 'webui-ajax-loader';
 @use 'webui-carousel';
 @use 'webui-disclosure';
+@use 'webui-fetch-html';
 @use 'webui-image-gallery';
 @use 'webui-make-clickable';
 @use 'webui-modal';

diff --git a/ui/src/stylesheets/web-components/_webui-ajax-loader.scss b/ui/src/stylesheets/web-components/_webui-ajax-loader.scss
@@ -1,12 +1,5 @@
 /*
 ----------------------------------------------------------------------------
-Styles for the <webui-ajax-loader> custom element itself.
-
-Shadow root styles for the <svg> are located in the Web Component JavaScript class.
-----------------------------------------------------------------------------
-*/
-/*
-----------------------------------------------------------------------------
 Dependencies.
 ----------------------------------------------------------------------------
 */
@@ -20,6 +13,7 @@ webui-ajax-loader {
     inline-size: 3rem;
     margin: auto;
 
+    // Pseudo element reprents SVG in shadow DOM with matching part attribute.
     &::part(svg) {
         animation: 1.2s ease-in-out infinite both svg-animation;
         fill: transparent;

diff --git a/ui/src/stylesheets/web-components/_webui-fetch-html.scss b/ui/src/stylesheets/web-components/_webui-fetch-html.scss
@@ -0,0 +1,15 @@
+/*
+----------------------------------------------------------------------------
+Dependencies.
+----------------------------------------------------------------------------
+*/
+// @use '../base' as *;
+// @use '../mixins' as *;
+
+webui-fetch-html {
+    &:not(:defined) {
+        [data-fetch-target] {
+            display: none;
+        }
+    }
+}
diff --git a/ui/src/stylesheets/web-components/_webui-image-gallery.scss b/ui/src/stylesheets/web-components/_webui-image-gallery.scss
@@ -7,11 +7,18 @@ Dependencies.
 @use '../mixins' as *;
 
 webui-image-gallery {
-    .image-gallery__link {
+    [data-open] {
         @include focus;
         display: block;
     }
 
+    // Without JS, still show the modal open link so the target opens in the browser window rather than a modal.
+    &:not(:defined) {
+        webui-modal [data-open] {
+            display: block;
+        }
+    }
+
     .grid {
         @include responsive-grid-auto-columns($auto-layout: auto-fill);
 

diff --git a/ui/src/stylesheets/web-components/_webui-make-clickable.scss b/ui/src/stylesheets/web-components/_webui-make-clickable.scss
@@ -11,30 +11,32 @@ Dependencies.
 Give affordance of "clickability" to a component/content.
 ----------------------------------------------------------------------------
 */
-webui-make-clickable:defined {
-    display: inline-block;
+webui-make-clickable {
+    &:defined {
+        display: inline-block;
 
-    &:hover {
-        cursor: pointer;
+        &:hover {
+            cursor: pointer;
 
-        a {
-            text-decoration: none;
+            a {
+                text-decoration: none;
+            }
         }
-    }
 
-    &:focus-within {
-        box-shadow: 0 0 0 $border-width-l $color-focus;
-        outline: $border-width-l solid transparent; // So high contrast mode works.
+        &:focus-within {
+            box-shadow: 0 0 0 $border-width-l $color-focus;
+            outline: $border-width-l solid transparent; // So high contrast mode works.
 
-        // Remove focus styles on links inside.
-        :focus-visible {
-            box-shadow: none;
-            outline: none;
+            // Remove focus styles on links inside.
+            :focus-visible {
+                box-shadow: none;
+                outline: none;
+            }
         }
-    }
 
-    &:has(:focus:not(:focus-visible)) {
-        box-shadow: none;
-        outline: $border-width-l solid transparent;
+        &:has(:focus:not(:focus-visible)) {
+            box-shadow: none;
+            outline: $border-width-l solid transparent;
+        }
     }
 }
diff --git a/ui/src/stylesheets/web-components/_webui-predictive-search.scss b/ui/src/stylesheets/web-components/_webui-predictive-search.scss
@@ -7,8 +7,10 @@ Dependencies.
 @use '../mixins' as *;
 
 webui-predictive-search {
-    [type='submit'] {
-        display: none;
+    &:defined {
+        [type='submit'] {
+            display: none;
+        }
     }
 
     .search__results {

diff --git a/ui/src/stylesheets/web-components/_webui-toggle.scss b/ui/src/stylesheets/web-components/_webui-toggle.scss
@@ -7,6 +7,10 @@ Dependencies.
 // @use '../mixins' as *;
 
 webui-toggle {
+    &:not(:defined) {
+        display: none;
+    }
+
     [role='switch'] {
         align-items: center;
         border: $border-width-s solid;

diff --git a/ui/src/stylesheets/web-components/_webui-video-player.scss b/ui/src/stylesheets/web-components/_webui-video-player.scss
@@ -22,6 +22,17 @@ webui-video-player {
         }
     }
 
+    // Without JS, still show the modal open link so the target opens in the browser window rather than a modal.
+    &:not(:defined) {
+        webui-modal [data-open] {
+            display: inline-block;
+        }
+
+        .icon {
+            display: none;
+        }
+    }
+
     .modal__dialog {
         inline-size: 100%;
     }

diff --git a/ui/stories/6. Web Components Or Custom Elements/WebComponents.mdx b/ui/stories/6. Web Components Or Custom Elements/WebComponents.mdx
@@ -3,11 +3,14 @@ import { Meta } from '@storybook/blocks';
 <Meta title="Web Components Or Custom Elements/Using Web Components" />
 
 # HTML Web Components
-- The Web Components in this boilerplate are `custom elements` that wrap normal HTML markup, therefore providing a progressive enhancement layer via JavaScript.
-- They are **not** empty shells that only work with JavaScript. <sup>1</sup>
-- They also don't make use of the [shadow DOM](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM). <sup>2</sup>
+- The Web Components in this boilerplate are `custom elements` that wrap normal HTML markup, therefore providing a progressive enhancement layer via JavaScript. <sup>1</sup>
+- They are **not** empty shells that only work with JavaScript. <sup>2</sup>
+- They also don't make use of the [shadow DOM](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM). <sup>3</sup>
 
-> <sup>1</sup> <sup>2</sup>
+> <sup>1</sup>
+> Global CSS is inherited by the Web Components because they contain regular HTML markup. Additional CSS scoping & encapsulation is provided by the custom element names, enabling styles not to "leak" out into the global scope.
+
+> <sup>2</sup> <sup>3</sup>
 > The [`<webui-ajax-loader>`](/docs/web-components-or-custom-elements-webui-ajax-loader--docs) Web Component is entirely constructed via JavaScript, and uses the shadow DOM.
 
 ## Additional reading

diff --git a/ui/stories/6. Web Components Or Custom Elements/WebUI Image Gallery/WebUIImageGallery.js b/ui/stories/6. Web Components Or Custom Elements/WebUI Image Gallery/WebUIImageGallery.js
@@ -4,7 +4,6 @@ export const WebUIImageGalleryHtml = () => `
         <li>
             <webui-modal>
                 <a
-                    class="image-gallery__link"
                     href="https://dummyimage.com/1140x810&text=image+1"
                     data-open
                 >
@@ -73,7 +72,6 @@ export const WebUIImageGalleryHtml = () => `
         <li>
             <webui-modal>
                 <a
-                    class="image-gallery__link"
                     href="https://dummyimage.com/1140x810&text=image+2"
                     data-open
                 >
@@ -142,7 +140,6 @@ export const WebUIImageGalleryHtml = () => `
         <li>
             <webui-modal>
                 <a
-                    class="image-gallery__link"
                     href="https://dummyimage.com/1140x810&text=image+3"
                     data-open
                 >
@@ -211,7 +208,6 @@ export const WebUIImageGalleryHtml = () => `
         <li>
             <webui-modal>
                 <a
-                    class="image-gallery__link"
                     href="https://dummyimage.com/1140x810&text=image+4"
                     data-open
                 >
@@ -280,7 +276,6 @@ export const WebUIImageGalleryHtml = () => `
         <li>
             <webui-modal>
                 <a
-                    class="image-gallery__link"
                     href="https://dummyimage.com/1140x810&text=image+5"
                     data-open
                 >

diff --git a/ui/stories/6. Web Components Or Custom Elements/WebUI Range Input/WebUIRangeInput.js b/ui/stories/6. Web Components Or Custom Elements/WebUI Range Input/WebUIRangeInput.js
@@ -8,12 +8,13 @@ export const WebUIRangeInputHtml = () => `
             class="input"
             type="range"
             id="range-input"
-            value="1"
-            min="1"
-            max="10"
-            aria-valuenow="1"
-            aria-valuemin="1"
-            aria-valuemax="10"
+            value="10"
+            min="10"
+            max="100"
+            step="10"
+            aria-valuenow="10"
+            aria-valuemin="10"
+            aria-valuemax="100"
         />
         <output></output>
     </div>