From b9210aa289ebadb28595f87032c343ad40ce0d51 Mon Sep 17 00:00:00 2001 From: basher Date: Thu, 4 Apr 2024 16:06:44 +0100 Subject: [PATCH] add webui-range-input --- ui/src/javascript/modules/range-slider.ts | 47 ------------------- ui/src/javascript/ui-init.ts | 5 +- .../web-components/webui-range-input.ts | 32 +++++++++++++ .../javascript/web-components/webui-toggle.ts | 2 +- ui/src/stylesheets/form/_index.scss | 1 - ui/src/stylesheets/web-components/_index.scss | 1 + .../_webui-range-input-slider.scss} | 4 +- .../RangeInputSlider/RangeInputSlider.js | 19 -------- .../RangeInputSlider/RangeInputSlider.mdx | 12 ----- .../RangeInputSlider.stories.js | 15 ------ .../WebUI Range Input/WebUIRangeInput.js | 21 +++++++++ .../WebUI Range Input/WebUIRangeInput.mdx | 12 +++++ .../WebUIRangeInput.stories.js | 15 ++++++ 13 files changed, 87 insertions(+), 99 deletions(-) delete mode 100644 ui/src/javascript/modules/range-slider.ts create mode 100644 ui/src/javascript/web-components/webui-range-input.ts rename ui/src/stylesheets/{form/_range.scss => web-components/_webui-range-input-slider.scss} (96%) delete mode 100644 ui/stories/4. Forms/RangeInputSlider/RangeInputSlider.js delete mode 100644 ui/stories/4. Forms/RangeInputSlider/RangeInputSlider.mdx delete mode 100644 ui/stories/4. Forms/RangeInputSlider/RangeInputSlider.stories.js create mode 100644 ui/stories/6. Web Components Or Custom Elements/WebUI Range Input/WebUIRangeInput.js create mode 100644 ui/stories/6. Web Components Or Custom Elements/WebUI Range Input/WebUIRangeInput.mdx create mode 100644 ui/stories/6. Web Components Or Custom Elements/WebUI Range Input/WebUIRangeInput.stories.js diff --git a/ui/src/javascript/modules/range-slider.ts b/ui/src/javascript/modules/range-slider.ts deleted file mode 100644 index 0d1c2ea..0000000 --- a/ui/src/javascript/modules/range-slider.ts +++ /dev/null @@ -1,47 +0,0 @@ -export default class RangeSlider { - private rangeSlider: Element; - - constructor(rangeSlider: Element) { - this.rangeSlider = rangeSlider; - - this.init(); - } - - public static start(): void { - const rangeSliders = document.querySelectorAll( - '[data-module="range-slider"]', - ); - - rangeSliders.forEach((rangeSlider) => { - const instance = new RangeSlider(rangeSlider); - return instance; - }); - } - - private init(): void { - this.initrangeSlider(); - } - - private initrangeSlider(): void { - const range = this.rangeSlider.querySelector( - '[type=range]', - ) as HTMLInputElement; - const bubble = this.rangeSlider.querySelector( - '.range__bubble', - ) as HTMLOutputElement; - - bubble.innerHTML = range.value; - range.addEventListener('input', () => { - this.handleValidRanges(range, bubble); - }); - } - - private handleValidRanges( - range: HTMLInputElement, - bubble: HTMLOutputElement, - ): void { - range.setAttribute('value', range.value); - range.setAttribute('aria-valuenow', range.value); - bubble.innerHTML = range.value; - } -} diff --git a/ui/src/javascript/ui-init.ts b/ui/src/javascript/ui-init.ts index 83427b3..e726c30 100644 --- a/ui/src/javascript/ui-init.ts +++ b/ui/src/javascript/ui-init.ts @@ -1,7 +1,6 @@ // Dependencies. // 1. Modules. import FormValidate from './modules/form-validate'; -import RangeSlider from './modules/range-slider'; import Search from './modules/search'; import Slider from './modules/slider'; @@ -14,6 +13,7 @@ import WebUIMakeClickable from './web-components/webui-make-clickable'; import WebUIModal from './web-components/webui-modal'; import WebUINotify from './web-components/webui-notify'; import WebUIProse from './web-components/webui-prose'; +import WebUIRangeInput from './web-components/webui-range-input'; import WebUIShare from './web-components/webui-share'; import WebUIToggle from './web-components/webui-toggle'; import WebUITabs from './web-components/webui-tabs'; @@ -21,7 +21,6 @@ import WebUIVideoPlayer from './web-components/webui-video-player'; export const uiInit = (): void => { FormValidate.start(); - RangeSlider.start(); Search.start(); Slider.start(); @@ -39,6 +38,8 @@ export const uiInit = (): void => { customElements.define('webui-notify', WebUINotify); !customElements.get('webui-prose') && customElements.define('webui-prose', WebUIProse); + !customElements.get('webui-range-input') && + customElements.define('webui-range-input', WebUIRangeInput); !customElements.get('webui-share') && customElements.define('webui-share', WebUIShare); !customElements.get('webui-tabs') && diff --git a/ui/src/javascript/web-components/webui-range-input.ts b/ui/src/javascript/web-components/webui-range-input.ts new file mode 100644 index 0000000..34a9475 --- /dev/null +++ b/ui/src/javascript/web-components/webui-range-input.ts @@ -0,0 +1,32 @@ +export default class WebUIRangeInput extends HTMLElement { + private rangeInput: HTMLInputElement | null; + private rangeOutput: HTMLOutputElement | null; + + constructor() { + super(); + + this.rangeInput = this.querySelector('[type="range"]'); + this.rangeOutput = this.querySelector('output'); + + if (!this.rangeInput || !this.rangeOutput) return; + + this.rangeOutput.innerHTML = this.rangeInput.value; + this.rangeInput.addEventListener('input', this); + } + + private handleValidRanges( + range: HTMLInputElement, + bubble: HTMLOutputElement, + ): void { + range.setAttribute('value', range.value); + range.setAttribute('aria-valuenow', range.value); + bubble.innerHTML = range.value; + } + + // Handle constructor() event listeners. + handleEvent() { + this.rangeInput && + this.rangeOutput && + this.handleValidRanges(this.rangeInput, this.rangeOutput); + } +} diff --git a/ui/src/javascript/web-components/webui-toggle.ts b/ui/src/javascript/web-components/webui-toggle.ts index 96f1744..364a4f7 100644 --- a/ui/src/javascript/web-components/webui-toggle.ts +++ b/ui/src/javascript/web-components/webui-toggle.ts @@ -3,7 +3,7 @@ export default class WebUIToggle extends HTMLElement { constructor() { super(); - this.switch = this.querySelector('[role="switch"]'); + this.switch = this.querySelector('[role=switch]'); if (!this.switch) return; diff --git a/ui/src/stylesheets/form/_index.scss b/ui/src/stylesheets/form/_index.scss index 8db95e2..5aff523 100644 --- a/ui/src/stylesheets/form/_index.scss +++ b/ui/src/stylesheets/form/_index.scss @@ -4,6 +4,5 @@ @use 'input'; @use 'label'; @use 'radio'; -@use 'range'; @use 'select'; @use 'textarea'; diff --git a/ui/src/stylesheets/web-components/_index.scss b/ui/src/stylesheets/web-components/_index.scss index 7007c64..d9f55f5 100644 --- a/ui/src/stylesheets/web-components/_index.scss +++ b/ui/src/stylesheets/web-components/_index.scss @@ -3,6 +3,7 @@ @use 'webui-modal'; @use 'webui-notify'; @use 'webui-prose'; +@use 'webui-range-input-slider'; @use 'webui-share'; @use 'webui-tabs'; @use 'webui-toggle'; diff --git a/ui/src/stylesheets/form/_range.scss b/ui/src/stylesheets/web-components/_webui-range-input-slider.scss similarity index 96% rename from ui/src/stylesheets/form/_range.scss rename to ui/src/stylesheets/web-components/_webui-range-input-slider.scss index da9ebce..c03687a 100644 --- a/ui/src/stylesheets/form/_range.scss +++ b/ui/src/stylesheets/web-components/_webui-range-input-slider.scss @@ -23,8 +23,8 @@ Dependencies. block-size: var(--slider-height); } -.range { - &__bubble { +webui-range-input-slider { + output { margin-inline: auto; } } diff --git a/ui/stories/4. Forms/RangeInputSlider/RangeInputSlider.js b/ui/stories/4. Forms/RangeInputSlider/RangeInputSlider.js deleted file mode 100644 index 4ede1b3..0000000 --- a/ui/stories/4. Forms/RangeInputSlider/RangeInputSlider.js +++ /dev/null @@ -1,19 +0,0 @@ -export const RangeInputSliderHtml = () => ` -
- - - -
-`; diff --git a/ui/stories/4. Forms/RangeInputSlider/RangeInputSlider.mdx b/ui/stories/4. Forms/RangeInputSlider/RangeInputSlider.mdx deleted file mode 100644 index 970e754..0000000 --- a/ui/stories/4. Forms/RangeInputSlider/RangeInputSlider.mdx +++ /dev/null @@ -1,12 +0,0 @@ -import { Meta, Canvas } from '@storybook/blocks'; -import * as RangeInputSlider from './RangeInputSlider.stories'; - - - -# Range input slider -- JavaScript is required to display the numeric range value. - -## Accessibility considerations -- See the [ARIA APG slider pattern](https://www.w3.org/WAI/ARIA/apg/patterns/slider/). - - diff --git a/ui/stories/4. Forms/RangeInputSlider/RangeInputSlider.stories.js b/ui/stories/4. Forms/RangeInputSlider/RangeInputSlider.stories.js deleted file mode 100644 index 91ae236..0000000 --- a/ui/stories/4. Forms/RangeInputSlider/RangeInputSlider.stories.js +++ /dev/null @@ -1,15 +0,0 @@ -import { RangeInputSliderHtml } from './RangeInputSlider'; - -export default { - title: 'Forms/Range Input Slider', - parameters: { - status: { - type: 'stable', - }, - }, -}; - -export const RangeInputSlider = { - render: (args) => RangeInputSliderHtml(args), -}; -RangeInputSlider.storyName = 'Range Input Slider'; 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 new file mode 100644 index 0000000..2685078 --- /dev/null +++ b/ui/stories/6. Web Components Or Custom Elements/WebUI Range Input/WebUIRangeInput.js @@ -0,0 +1,21 @@ +export const WebUIRangeInputHtml = () => ` + +
+ + + +
+ +`; diff --git a/ui/stories/6. Web Components Or Custom Elements/WebUI Range Input/WebUIRangeInput.mdx b/ui/stories/6. Web Components Or Custom Elements/WebUI Range Input/WebUIRangeInput.mdx new file mode 100644 index 0000000..9d2f49b --- /dev/null +++ b/ui/stories/6. Web Components Or Custom Elements/WebUI Range Input/WebUIRangeInput.mdx @@ -0,0 +1,12 @@ +import { Meta, Canvas } from '@storybook/blocks'; +import * as WebUIRangeInput from './WebUIRangeInput.stories'; + + + +# `` +- JavaScript is required to display the numeric range value inside the `` element. + +## Accessibility considerations +- See the [ARIA APG slider pattern](https://www.w3.org/WAI/ARIA/apg/patterns/slider/). + + diff --git a/ui/stories/6. Web Components Or Custom Elements/WebUI Range Input/WebUIRangeInput.stories.js b/ui/stories/6. Web Components Or Custom Elements/WebUI Range Input/WebUIRangeInput.stories.js new file mode 100644 index 0000000..334cd26 --- /dev/null +++ b/ui/stories/6. Web Components Or Custom Elements/WebUI Range Input/WebUIRangeInput.stories.js @@ -0,0 +1,15 @@ +import { WebUIRangeInputHtml } from './WebUIRangeInput'; + +export default { + title: 'Web Components Or Custom Elements/', + parameters: { + status: { + type: 'stable', + }, + }, +}; + +export const WebUIRangeInput = { + render: (args) => WebUIRangeInputHtml(args), +}; +WebUIRangeInput.storyName = '';