@stanko/ctrls 0.1.3 → 0.1.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/README.md +1 -1
  2. package/dist/ctrls/ctrl-dual-range.d.ts +2 -0
  3. package/dist/ctrls/ctrl-dual-range.js +9 -3
  4. package/dist/ctrls/ctrl-range.d.ts +2 -0
  5. package/dist/ctrls/ctrl-range.js +8 -3
  6. package/dist/ctrls.css +11 -4
  7. package/dist/ctrls.css.map +1 -1
  8. package/package.json +1 -1
package/README.md CHANGED
@@ -375,8 +375,8 @@ Thank you for stopping by! If you end up using Ctrls, please let me know, I woul
375
375
 
376
376
  * [ ] Allow users to pass a custom PRNG lib
377
377
  * [ ] Hash storage - check if there is an instance using hash storage already
378
- * [x] Add title which collapses the controls
379
378
  * [ ] Storage - local storage
379
+ * [x] Add title which collapses the controls
380
380
  * [x] Prefix input names' with `ctrl_${id}_${name}` to avoid collisions
381
381
  * [x] Demo - stop animation when not in viewport
382
382
  * [x] Demo - favicon and metadata
package/dist/ctrls/ctrl-dual-range.d.ts CHANGED
@@ -24,6 +24,7 @@ export declare class DualRangeCtrl implements Ctrl<DualRangeValue> {
24
24
  minInput: HTMLInputElement;
25
25
  maxInput: HTMLInputElement;
26
26
  dualRange: DualRangeInput;
27
+ valueSpan: HTMLSpanElement;
27
28
  constructor(config: CtrlTypeRegistry["dual-range"]["config"], onChange: CtrlChangeHandler<DualRangeValue>, onInput: CtrlChangeHandler<DualRangeValue>);
28
29
  parse: (string: string) => {
29
30
  min: number;
@@ -40,6 +41,7 @@ export declare class DualRangeCtrl implements Ctrl<DualRangeValue> {
40
41
  valueToString: (value?: DualRangeValue) => string;
41
42
  buildUI: () => {
42
43
  element: HTMLDivElement;
44
+ valueSpan: HTMLSpanElement;
43
45
  minInput: HTMLInputElement;
44
46
  maxInput: HTMLInputElement;
45
47
  };
package/dist/ctrls/ctrl-dual-range.js CHANGED
@@ -1,8 +1,6 @@
1
1
  import random from "../utils/random";
2
2
  import DualRangeInput from "@stanko/dual-range-input";
3
3
  import { roundToStep } from "../utils/round-to-step";
4
- // TODO
5
- // Add a span with the current value
6
4
  export class DualRangeCtrl {
7
5
  constructor(config, onChange, onInput) {
8
6
  this.type = "dual-range";
@@ -48,6 +46,7 @@ export class DualRangeCtrl {
48
46
  min: parseFloat(minInput.value),
49
47
  max: parseFloat(maxInput.value),
50
48
  };
49
+ this.update(this.value);
51
50
  this.onChange(this.name, this.value);
52
51
  });
53
52
  const maxInput = document.createElement("input");
@@ -61,6 +60,7 @@ export class DualRangeCtrl {
61
60
  min: parseFloat(minInput.value),
62
61
  max: parseFloat(maxInput.value),
63
62
  };
63
+ this.update(this.value);
64
64
  this.onChange(this.name, this.value);
65
65
  });
66
66
  const inputWrapper = document.createElement("div");
@@ -73,12 +73,16 @@ export class DualRangeCtrl {
73
73
  const label = document.createElement("span");
74
74
  label.textContent = this.label;
75
75
  label.classList.add("ctrls__control-label");
76
+ const valueSpan = document.createElement("span");
77
+ valueSpan.classList.add("ctrls__control-value");
78
+ label.appendChild(valueSpan);
76
79
  const element = document.createElement("div");
77
80
  element.classList.add("ctrls__control", "ctrls__control--dual-range");
78
81
  element.appendChild(label);
79
82
  element.appendChild(right);
80
83
  return {
81
84
  element,
85
+ valueSpan,
82
86
  minInput,
83
87
  maxInput,
84
88
  };
@@ -88,6 +92,7 @@ export class DualRangeCtrl {
88
92
  this.value = value;
89
93
  this.minInput.setAttribute("max", max.toString());
90
94
  this.maxInput.setAttribute("min", min.toString());
95
+ this.valueSpan.textContent = ` (${min}, ${max})`;
91
96
  this.minInput.value = value.min.toString();
92
97
  this.maxInput.value = value.max.toString();
93
98
  this.dualRange.update();
@@ -104,10 +109,11 @@ export class DualRangeCtrl {
104
109
  this.isRandomizationDisabled = config.isRandomizationDisabled || false;
105
110
  this.onChange = onChange;
106
111
  this.onInput = onInput;
107
- const { minInput, maxInput, element } = this.buildUI();
112
+ const { minInput, maxInput, element, valueSpan } = this.buildUI();
108
113
  this.minInput = minInput;
109
114
  this.maxInput = maxInput;
110
115
  this.element = element;
116
+ this.valueSpan = valueSpan;
111
117
  this.dualRange = new DualRangeInput(this.minInput, this.maxInput);
112
118
  }
113
119
  }
package/dist/ctrls/ctrl-range.d.ts CHANGED
@@ -12,6 +12,7 @@ export declare class RangeCtrl implements Ctrl<number> {
12
12
  step: number;
13
13
  element: HTMLElement;
14
14
  input: HTMLInputElement;
15
+ valueSpan: HTMLSpanElement;
15
16
  constructor(config: CtrlTypeRegistry["range"]["config"], onChange: CtrlChangeHandler<number>, onInput: CtrlChangeHandler<number>);
16
17
  parse: (string: string) => number;
17
18
  getRandomValue: () => number;
@@ -20,6 +21,7 @@ export declare class RangeCtrl implements Ctrl<number> {
20
21
  buildUI: () => {
21
22
  element: HTMLLabelElement;
22
23
  input: HTMLInputElement;
24
+ valueSpan: HTMLSpanElement;
23
25
  };
24
26
  update: (value: number) => void;
25
27
  }
package/dist/ctrls/ctrl-range.js CHANGED
@@ -1,7 +1,5 @@
1
1
  import random from "../utils/random";
2
2
  import { roundToStep } from "../utils/round-to-step";
3
- // TODO
4
- // Add a span with the current value
5
3
  export class RangeCtrl {
6
4
  constructor(config, onChange, onInput) {
7
5
  this.type = "range";
@@ -34,6 +32,7 @@ export class RangeCtrl {
34
32
  });
35
33
  input.addEventListener("change", () => {
36
34
  this.value = this.parse(input.value);
35
+ this.update(this.value);
37
36
  this.onChange(this.name, this.value);
38
37
  });
39
38
  input.addEventListener("input", () => {
@@ -47,6 +46,9 @@ export class RangeCtrl {
47
46
  const label = document.createElement("span");
48
47
  label.textContent = this.label;
49
48
  label.classList.add("ctrls__control-label");
49
+ const valueSpan = document.createElement("span");
50
+ valueSpan.classList.add("ctrls__control-value");
51
+ label.appendChild(valueSpan);
50
52
  const element = document.createElement("label");
51
53
  element.classList.add("ctrls__control", "ctrls__control--range");
52
54
  element.appendChild(label);
@@ -54,12 +56,14 @@ export class RangeCtrl {
54
56
  return {
55
57
  element,
56
58
  input,
59
+ valueSpan,
57
60
  };
58
61
  };
59
62
  this.update = (value) => {
60
63
  const { min, max } = this;
61
64
  this.value = value;
62
65
  this.input.value = value.toString();
66
+ this.valueSpan.textContent = ` (${value})`;
63
67
  const percentage = ((this.value - min) / (max - min)) * 100;
64
68
  this.element.style.setProperty("--gradient-position", `${percentage.toFixed(2)}%`);
65
69
  };
@@ -75,8 +79,9 @@ export class RangeCtrl {
75
79
  config.defaultValue === undefined
76
80
  ? this.getDefaultValue()
77
81
  : config.defaultValue;
78
- const { input, element } = this.buildUI();
82
+ const { input, element, valueSpan } = this.buildUI();
79
83
  this.input = input;
84
+ this.valueSpan = valueSpan;
80
85
  this.element = element;
81
86
  this.update(this.value);
82
87
  }
package/dist/ctrls.css CHANGED
@@ -173,6 +173,7 @@
173
173
  --ctrls-label-width: 5rem;
174
174
  --ctrls-width: 22rem;
175
175
  --ctrls-font-size: 0.75rem;
176
+ --ctrls-value-font-size: 0.6875rem;
176
177
  --ctrls-c: 0.25;
177
178
  --ctrls-h: 245;
178
179
  --ctrls-theme: oklch(0.65 var(--ctrls-c) var(--ctrls-h));
@@ -349,6 +350,7 @@
349
350
  }
350
351
  .ctrls__btn svg {
351
352
  width: 1rem;
353
+ height: 1rem;
352
354
  transition: transform 300ms, color 300ms;
353
355
  }
354
356
  .ctrls__btn path {
@@ -367,12 +369,12 @@
367
369
  background: var(--ctrls-btn-hover-bg);
368
370
  }
369
371
 
370
- .ctrls__btn--lg:focus-visible svg, .ctrls__btn--lg:hover svg {
372
+ .ctrls__randomize:focus-visible svg, .ctrls__randomize:hover svg {
371
373
  transform: rotate(0.5turn);
372
374
  }
373
- .ctrls__btn--lg:focus-visible path:nth-child(2),
374
- .ctrls__btn--lg:focus-visible path:nth-child(4), .ctrls__btn--lg:hover path:nth-child(2),
375
- .ctrls__btn--lg:hover path:nth-child(4) {
375
+ .ctrls__randomize:focus-visible path:nth-child(2),
376
+ .ctrls__randomize:focus-visible path:nth-child(4), .ctrls__randomize:hover path:nth-child(2),
377
+ .ctrls__randomize:hover path:nth-child(4) {
376
378
  opacity: 0;
377
379
  }
378
380
 
@@ -391,6 +393,11 @@
391
393
  padding-right: 0.25rem;
392
394
  }
393
395
 
396
+ .ctrls__control-value {
397
+ font-weight: 400;
398
+ font-size: var(--ctrls-value-font-size);
399
+ }
400
+
394
401
  .ctrls__control-right {
395
402
  flex: auto 1 1;
396
403
  }
package/dist/ctrls.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../node_modules/@stanko/dual-range-input/dist/index.css","../src/scss/_ctrls.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;;AC3IF;EACE;AAAA;AAAA;EAGA;EACA;EACA;EACA;EAGA;EACA;EAEA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EAGA;EAGA;EACA;EACA;EAGA;EACA;EAGA;EAGA;EAEA;EACA;EAEA;EACA;EAGA;EAGA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EAGA;EACA;EAEA;EAEA;EACA;EAEA;EAGA;EAEA;EACA;;;AA+CF;EACE;IA3CA;IAEA;IACA;IAGA;IACA;IACA;IACA;IACA;IACA;IAGA;IAGA;IACA;IACA;IAGA;IACA;IAGA;IAGA;IAEA;IAGA;IAGA;AAAA;AAAA;;;AAWF;EAhDE;EAEA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EAGA;EAGA;EACA;EACA;EAGA;EACA;EAGA;EAGA;EAEA;EAGA;EAGA;AAAA;AAAA;;;AAiBF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;EAGE;EACA;EACA;;AAGF;AAAA;EAEE;EACA;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;;AAGF;EAEE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;;AAGF;EAEE;;AAGF;EACE;EACA,YACE;;AAIJ;EACE;;;AAKJ;EACE;EACA;EACA;EACA;EACA;;AAEA;EAEE;EACA;;;AAOA;EACE;;AAGF;AAAA;AAAA;EAEE;;;AAKN;AAEA;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAKA;AAAA;EACE;EACA;EACA;;;AAIJ;AAEA;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAKJ;EACE;EACA;EACA;;;AAIF;EACE;;;AAIF;EACE;;;AAIF;EACE;EACA;;;AAGF;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AAmCJ;EA5BE;EACA;EACA;EACA;EACA;EAEA;;;AA0BF;EAhCE;EACA;EACA;EACA;EACA;EAEA;;;AA8BF;EAtBE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAkBA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAKF;EAvDE;EACA;EACA;EACA;EACA;EAEA;;;AAqDF;EA7CE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAwCA;EACA;;;AAGF;EACE;EACA;;;AAGF;AAEA;EAGE;;AAEA;EACE;;AANJ;EASE;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;;;AAIJ;AAEA;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;EAEF;EACA;EACA;;AAEA;EAEE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;AAEA;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;;AAIE;EACE;;;AAKN;AAEA;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;AAEA;AAAA;EAEE;EACA;EACA;;;AAIJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;;AAGF;EAEE;EACA;;;AAIJ;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EAEE;;AAEA;EACE;EACA","file":"ctrls.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../node_modules/@stanko/dual-range-input/dist/index.css","../src/scss/_ctrls.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;;AC3IF;EACE;AAAA;AAAA;EAGA;EACA;EACA;EACA;EACA;EAGA;EACA;EAEA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EAGA;EAGA;EACA;EACA;EAGA;EACA;EAGA;EAGA;EAEA;EACA;EAEA;EACA;EAGA;EAGA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EAGA;EACA;EAEA;EAEA;EACA;EAEA;EAGA;EAEA;EACA;;;AA+CF;EACE;IA3CA;IAEA;IACA;IAGA;IACA;IACA;IACA;IACA;IACA;IAGA;IAGA;IACA;IACA;IAGA;IACA;IAGA;IAGA;IAEA;IAGA;IAGA;AAAA;AAAA;;;AAWF;EAhDE;EAEA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EAGA;EAGA;EACA;EACA;EAGA;EACA;EAGA;EAGA;EAEA;EAGA;EAGA;AAAA;AAAA;;;AAiBF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;EAGE;EACA;EACA;;AAGF;AAAA;EAEE;EACA;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;;AAGF;EAEE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;;AAGF;EAEE;;AAGF;EACE;EACA;EACA,YACE;;AAIJ;EACE;;;AAKJ;EACE;EACA;EACA;EACA;EACA;;AAEA;EAEE;EACA;;;AAOA;EACE;;AAGF;AAAA;AAAA;EAEE;;;AAKN;AAEA;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAKA;AAAA;EACE;EACA;EACA;;;AAIJ;AAEA;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAKJ;EACE;EACA;EACA;;;AAIF;EACE;;;AAIF;EACE;;;AAIF;EACE;EACA;;;AAGF;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AAmCJ;EA5BE;EACA;EACA;EACA;EACA;EAEA;;;AA0BF;EAhCE;EACA;EACA;EACA;EACA;EAEA;;;AA8BF;EAtBE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAkBA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAKF;EAvDE;EACA;EACA;EACA;EACA;EAEA;;;AAqDF;EA7CE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAwCA;EACA;;;AAGF;EACE;EACA;;;AAGF;AAEA;EAGE;;AAEA;EACE;;AANJ;EASE;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;;;AAIJ;AAEA;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;EAEF;EACA;EACA;;AAEA;EAEE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;AAEA;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;;AAIE;EACE;;;AAKN;AAEA;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;AAEA;AAAA;EAEE;EACA;EACA;;;AAIJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;;AAGF;EAEE;EACA;;;AAIJ;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EAEE;;AAEA;EACE;EACA","file":"ctrls.css"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@stanko/ctrls",
3
- "version": "0.1.3",
3
+ "version": "0.1.5",
4
4
  "type": "module",
5
5
  "scripts": {
6
6
  "start": "npm run parse-markdown && vite",