aboutsummaryrefslogtreecommitdiff
path: root/input/example.ts
diff options
context:
space:
mode:
Diffstat (limited to 'input/example.ts')
-rw-r--r--input/example.ts132
1 files changed, 66 insertions, 66 deletions
diff --git a/input/example.ts b/input/example.ts
index 660ea20..2fbd5ad 100644
--- a/input/example.ts
+++ b/input/example.ts
@@ -7,13 +7,13 @@ import { WuiInputSelect, WuiInputSelectOpts } from "./select.js";
import { WuiInputCheckboxes, WuiInputCheckboxesOpts } from "./checkboxes.js";
function exampleInputString() {
- let el_example = document.createElement("div");
+ const elExample = document.createElement("div");
- let el_title = document.createElement("h3");
- el_title.innerText = "Input string";
- el_example.appendChild(el_title);
+ const elTitle = document.createElement("h3");
+ elTitle.innerText = "Input string";
+ elExample.appendChild(elTitle);
- let el_out = document.createElement("span");
+ const elOut = document.createElement("span");
let opts: WuiInputStringOpts = {
id: "my_input_string",
@@ -21,11 +21,11 @@ function exampleInputString() {
value: "Hello, input string",
hint: "The input ID is 'my_input_string'",
onChangeHandler: (v: string) => {
- el_out.innerText = v;
+ elOut.innerText = v;
},
};
- let el_input_string = new WuiInputString(opts);
- el_example.appendChild(el_input_string.el);
+ let elInputString = new WuiInputString(opts);
+ elExample.appendChild(elInputString.el);
opts = {
label: "Input string disabled",
@@ -34,48 +34,48 @@ function exampleInputString() {
hint: "The input string is disabled",
is_hint_toggled: true,
onChangeHandler: (v: string) => {
- el_out.innerText = v;
+ elOut.innerText = v;
},
};
- el_input_string = new WuiInputString(opts);
- el_example.appendChild(el_input_string.el);
+ elInputString = new WuiInputString(opts);
+ elExample.appendChild(elInputString.el);
opts = {
label: "Input string without hint",
value: "Hello, input string without hint",
onChangeHandler: (v: string) => {
- el_out.innerText = v;
+ elOut.innerText = v;
},
};
- el_input_string = new WuiInputString(opts);
- el_example.appendChild(el_input_string.el);
+ elInputString = new WuiInputString(opts);
+ elExample.appendChild(elInputString.el);
- let el_out_label = document.createElement("div");
- el_out_label.innerText = "Input string changes to ";
- el_out_label.appendChild(el_out);
- el_example.appendChild(el_out_label);
+ const elOutLabel = document.createElement("div");
+ elOutLabel.innerText = "Input string changes to ";
+ elOutLabel.appendChild(elOut);
+ elExample.appendChild(elOutLabel);
- document.body.appendChild(el_example);
+ document.body.appendChild(elExample);
}
function exampleInputNumber() {
- let el_example = document.createElement("div");
+ const elExample = document.createElement("div");
- let el_title = document.createElement("h3");
- el_title.innerText = "Input number";
- el_example.appendChild(el_title);
+ const elTitle = document.createElement("h3");
+ elTitle.innerText = "Input number";
+ elExample.appendChild(elTitle);
- let el_out = document.createElement("span");
+ const elOut = document.createElement("span");
let opts: WuiInputNumberOpts = {
label: "Input number",
value: 1,
onChangeHandler: (val: number) => {
- el_out.innerText = "" + val;
+ elOut.innerText = "" + val;
},
};
- let input_num = new WuiInputNumber(opts);
- el_example.appendChild(input_num.el);
+ let inputNum = new WuiInputNumber(opts);
+ elExample.appendChild(inputNum.el);
opts = {
id: "my_input_number",
@@ -83,11 +83,11 @@ function exampleInputNumber() {
value: 10,
hint: "The ID for this input is 'my_input_number'",
onChangeHandler: (val: number) => {
- el_out.innerText = "" + val;
+ elOut.innerText = "" + val;
},
};
- input_num = new WuiInputNumber(opts);
- el_example.appendChild(input_num.el);
+ inputNum = new WuiInputNumber(opts);
+ elExample.appendChild(inputNum.el);
opts = {
label: "Input number disabled",
@@ -96,22 +96,22 @@ function exampleInputNumber() {
is_disabled: true,
is_hint_toggled: true,
onChangeHandler: (val: number) => {
- el_out.innerText = "" + val;
+ elOut.innerText = "" + val;
},
};
- input_num = new WuiInputNumber(opts);
- el_example.appendChild(input_num.el);
+ inputNum = new WuiInputNumber(opts);
+ elExample.appendChild(inputNum.el);
opts = {
label: "Input number with hint",
value: 10000,
hint: "This is the <b>hint</b>",
onChangeHandler: (val: number) => {
- el_out.innerText = "" + val;
+ elOut.innerText = "" + val;
},
};
- input_num = new WuiInputNumber(opts);
- el_example.appendChild(input_num.el);
+ inputNum = new WuiInputNumber(opts);
+ elExample.appendChild(inputNum.el);
opts = {
label: "Input number with max and min",
@@ -119,31 +119,31 @@ function exampleInputNumber() {
max: 12,
min: -20,
onChangeHandler: (val: number) => {
- el_out.innerText = "" + val;
+ elOut.innerText = "" + val;
},
};
- input_num = new WuiInputNumber(opts);
- el_example.appendChild(input_num.el);
+ inputNum = new WuiInputNumber(opts);
+ elExample.appendChild(inputNum.el);
- let el_out_label = document.createElement("div");
- el_out_label.innerText = "Input number changes to ";
- el_out_label.appendChild(el_out);
- el_example.appendChild(el_out_label);
+ const elOutLabel = document.createElement("div");
+ elOutLabel.innerText = "Input number changes to ";
+ elOutLabel.appendChild(elOut);
+ elExample.appendChild(elOutLabel);
- document.body.appendChild(el_example);
+ document.body.appendChild(elExample);
}
function exampleInputSelect() {
- let el_example = document.createElement("div");
- document.body.appendChild(el_example);
+ const elExample = document.createElement("div");
+ document.body.appendChild(elExample);
- let el_title = document.createElement("h3");
- el_title.innerText = "Input select";
- el_example.appendChild(el_title);
+ const elTitle = document.createElement("h3");
+ elTitle.innerText = "Input select";
+ elExample.appendChild(elTitle);
- let el_log = document.createElement("div");
+ const elLog = document.createElement("div");
- let opts: WuiInputSelectOpts = {
+ const opts: WuiInputSelectOpts = {
name: "my_fruit_price",
label: "Input select",
options: {
@@ -163,23 +163,23 @@ function exampleInputSelect() {
hint: "Select one of the option to see the price.",
is_hint_toggled: true,
onChangeHandler: (key: string, value: string) => {
- el_log.innerText = `The select input changes to '${key}' with price '${value}'`;
+ elLog.innerText = `The select input changes to '${key}' with price '${value}'`;
},
};
- let input = new WuiInputSelect(opts);
- el_example.appendChild(input.el);
- el_example.appendChild(el_log);
+ const input = new WuiInputSelect(opts);
+ elExample.appendChild(input.el);
+ elExample.appendChild(elLog);
}
function exampleInputCheckboxes() {
- let el_example = document.createElement("div");
- document.body.appendChild(el_example);
+ const elExample = document.createElement("div");
+ document.body.appendChild(elExample);
- let el_title = document.createElement("h3");
- el_title.innerText = "Input checkboxes";
- el_example.appendChild(el_title);
+ const elTitle = document.createElement("h3");
+ elTitle.innerText = "Input checkboxes";
+ elExample.appendChild(elTitle);
- let el_log = document.createElement("div");
+ const elLog = document.createElement("div");
let opts: WuiInputCheckboxesOpts = {
name: "my_fruits",
@@ -200,11 +200,11 @@ function exampleInputCheckboxes() {
},
hint: "Select fruits.",
onChangeHandler: (values: string[]) => {
- el_log.innerText = `You are selecting ${values}`;
+ elLog.innerText = `You are selecting ${values}`;
},
};
let input = new WuiInputCheckboxes(opts);
- el_example.appendChild(input.el);
+ elExample.appendChild(input.el);
opts = {
name: "my_fruits",
@@ -227,13 +227,13 @@ function exampleInputCheckboxes() {
is_disabled: true,
is_hint_toggled: true,
onChangeHandler: (values: string[]) => {
- el_log.innerText = `You are selecting ${values}`;
+ elLog.innerText = `You are selecting ${values}`;
},
};
input = new WuiInputCheckboxes(opts);
- el_example.appendChild(input.el);
+ elExample.appendChild(input.el);
- el_example.appendChild(el_log);
+ elExample.appendChild(elLog);
}
exampleInputString();
generated by cgit v1.3 (git 2.53.0) at 2026-04-15 03:06:12 +0000