diff options
| author | ivarlovlie <git@ivarlovlie.no> | 2022-06-01 21:13:43 +0200 |
|---|---|---|
| committer | ivarlovlie <git@ivarlovlie.no> | 2022-06-01 21:13:43 +0200 |
| commit | 9383a2fb09ffb60cfe63683106945bd688affa59 (patch) | |
| tree | 65b3f4b48841583e355887db5de5a16e7005fc87 /src/wwwroot/scripts/components.js | |
| download | vinjesvingenhandel.no-9383a2fb09ffb60cfe63683106945bd688affa59.tar.xz vinjesvingenhandel.no-9383a2fb09ffb60cfe63683106945bd688affa59.zip | |
feat: Initial commit after clean slate
Diffstat (limited to 'src/wwwroot/scripts/components.js')
| -rw-r--r-- | src/wwwroot/scripts/components.js | 48 |
1 files changed, 48 insertions, 0 deletions
diff --git a/src/wwwroot/scripts/components.js b/src/wwwroot/scripts/components.js new file mode 100644 index 0000000..28d25f0 --- /dev/null +++ b/src/wwwroot/scripts/components.js @@ -0,0 +1,48 @@ +import {configuration} from "./configuration"; +import {doc} from "./base"; + +export function getCounterControl(options = configuration.defaultParameters.counterControlOptions) { + const wrapper = doc.createElement("div"); + wrapper.className = "number-input"; + + const count = doc.createElement("input"); + count.inputMode = "numeric"; + count.type = "number"; + if (options.min !== undefined) { + count.min = options.min; + } + if (options.max !== undefined) { + count.max = options.max; + } + if (options.initialCount !== undefined) { + count.value = options.initialCount; + } + if (options.onChange !== undefined && typeof options.onChange === "function") { + count.addEventListener("change", (e) => { + options.onChange(e); + }); + } + + const minus = doc.createElement("button"); + minus.innerHTML = "-"; + minus.onclick = (e) => { + count.stepDown(); + count.dispatchEvent(new Event("change")); + }; + + const plus = doc.createElement("button"); + plus.innerHTML = "+"; + plus.onclick = (e) => { + count.stepUp(); + count.dispatchEvent(new Event("change")); + }; + + wrapper.appendChild(minus); + wrapper.appendChild(count); + wrapper.appendChild(plus); + return wrapper; +} + +export function getSpinner() { + return `<div class="spinner-border text-primary" role="status"><span class="visually-hidden">Laster...</span></div>`; +} |
