@stanko/ctrls 0.1.2 → 0.1.4

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 (6) hide show
  1. package/README.md +3 -2
  2. package/dist/ctrls/index.d.ts +2 -0
  3. package/dist/ctrls/index.js +15 -2
  4. package/dist/ctrls.css +41 -13
  5. package/dist/ctrls.css.map +1 -1
  6. package/package.json +1 -1
package/README.md CHANGED
@@ -103,7 +103,8 @@ type ControlsOptions = {
103
103
  showRandomizeButton?: boolean; // default: true
104
104
  storage?: "hash" | "none"; // default: "hash"
105
105
  theme?: "system" | "light" | "dark"; // default: "system"
106
- parent?: Element; // if passed, the Ctrls element will be appended to this HTML element
106
+ parent?: Element; // element to append Ctrls' element to
107
+ title?: string; // it will be rendered as a button which toggles the controls visibility
107
108
  };
108
109
  ```
109
110
 
@@ -374,7 +375,7 @@ Thank you for stopping by! If you end up using Ctrls, please let me know, I woul
374
375
 
375
376
  * [ ] Allow users to pass a custom PRNG lib
376
377
  * [ ] Hash storage - check if there is an instance using hash storage already
377
- * [ ] Add title which collapses the controls
378
+ * [x] Add title which collapses the controls
378
379
  * [ ] Storage - local storage
379
380
  * [x] Prefix input names' with `ctrl_${id}_${name}` to avoid collisions
380
381
  * [x] Demo - stop animation when not in viewport
package/dist/ctrls/index.d.ts CHANGED
@@ -95,6 +95,7 @@ type ControlsOptions = {
95
95
  storage?: "hash" | "none";
96
96
  theme?: "system" | "light" | "dark";
97
97
  parent?: Element;
98
+ title?: string;
98
99
  };
99
100
  export declare class Ctrls<Configs extends readonly TypedControlConfig[]> {
100
101
  options: ControlsOptions;
@@ -105,6 +106,7 @@ export declare class Ctrls<Configs extends readonly TypedControlConfig[]> {
105
106
  onInput?: (updatedValues: Partial<ReturnType<typeof this.getValues>>) => void;
106
107
  constructor(controls: Configs, options?: ControlsOptions);
107
108
  buildUI: () => HTMLDivElement;
109
+ toggleVisibility: () => void;
108
110
  addHashListeners: () => void;
109
111
  getHash: () => string;
110
112
  setHash: () => void;
package/dist/ctrls/index.js CHANGED
@@ -23,18 +23,31 @@ export class Ctrls {
23
23
  const element = document.createElement("div");
24
24
  element.classList.add("ctrls");
25
25
  element.classList.add(`ctrls--${this.options.theme}-theme`);
26
+ const controlsContainer = document.createElement("div");
27
+ controlsContainer.classList.add("ctrls__controls");
26
28
  this.controls.forEach((control) => {
27
- element.appendChild(control.element);
29
+ controlsContainer.appendChild(control.element);
28
30
  });
29
31
  if (this.options.showRandomizeButton) {
30
32
  const randomizeButton = document.createElement("button");
31
33
  randomizeButton.classList.add("ctrls__randomize", "ctrls__btn", "ctrls__btn--lg");
32
34
  randomizeButton.innerHTML = `Randomize ${diceIcon}`;
33
35
  randomizeButton.addEventListener("click", this.randomize);
34
- element.appendChild(randomizeButton);
36
+ controlsContainer.appendChild(randomizeButton);
35
37
  }
38
+ if (this.options.title) {
39
+ const titleButton = document.createElement("button");
40
+ titleButton.classList.add("ctrls__title");
41
+ titleButton.innerText = this.options.title;
42
+ titleButton.addEventListener("click", this.toggleVisibility);
43
+ element.appendChild(titleButton);
44
+ }
45
+ element.appendChild(controlsContainer);
36
46
  return element;
37
47
  };
48
+ this.toggleVisibility = () => {
49
+ this.element.classList.toggle("ctrls--hidden");
50
+ };
38
51
  this.addHashListeners = () => {
39
52
  window.addEventListener("hashchange", this.updateFromHash);
40
53
  // Update all inputs using initial values from the hash
package/dist/ctrls.css CHANGED
@@ -277,15 +277,10 @@
277
277
  color: var(--ctrls-text);
278
278
  border-radius: min(var(--ctrls-radius) + 8px, 24px);
279
279
  border: 1px solid var(--ctrls-border);
280
- padding: 0.5rem;
281
- display: grid;
282
- gap: 0.5rem;
283
280
  background-color: var(--ctrls-bg);
284
281
  backdrop-filter: blur(4px);
285
- scrollbar-width: thin;
286
- scrollbar-color: var(--ctrls-scrollbar-thumb-bg) transparent;
287
- overflow: auto;
288
282
  max-width: var(--ctrls-width);
283
+ overflow: hidden;
289
284
  }
290
285
  .ctrls *,
291
286
  .ctrls *::before,
@@ -305,6 +300,38 @@
305
300
  overflow: visible;
306
301
  }
307
302
 
303
+ .ctrls__title {
304
+ background: none;
305
+ border: none;
306
+ font-weight: bold;
307
+ letter-spacing: -0.025em;
308
+ width: 100%;
309
+ padding: 0.375rem 0.5rem;
310
+ cursor: pointer;
311
+ transition: color 300ms, background-color 300ms;
312
+ }
313
+ .ctrls__title:focus-visible, .ctrls__title:hover {
314
+ color: var(--ctrls-theme);
315
+ background: var(--ctrls-btn-hover-bg);
316
+ }
317
+
318
+ .ctrls__controls {
319
+ display: grid;
320
+ gap: 0.5rem;
321
+ padding: 0.5rem;
322
+ overflow: auto;
323
+ scrollbar-width: thin;
324
+ scrollbar-color: var(--ctrls-scrollbar-thumb-bg) transparent;
325
+ }
326
+
327
+ .ctrls__title + .ctrls__controls {
328
+ border-top: 1px solid var(--ctrls-border);
329
+ }
330
+
331
+ .ctrls--hidden .ctrls__controls {
332
+ display: none;
333
+ }
334
+
308
335
  /* ----- Buttons ----- */
309
336
  .ctrls__btn {
310
337
  background: none;
@@ -315,17 +342,18 @@
315
342
  justify-content: center;
316
343
  gap: 0.25rem;
317
344
  border-radius: var(--ctrls-radius);
318
- transition: color 500ms, background-color 500ms;
345
+ transition: color 300ms, background-color 300ms;
319
346
  }
320
347
  .ctrls__btn:focus-visible, .ctrls__btn:hover {
321
348
  color: var(--ctrls-btn-hover-text);
322
349
  }
323
350
  .ctrls__btn svg {
324
351
  width: 1rem;
325
- transition: transform 500ms, color 500ms;
352
+ height: 1rem;
353
+ transition: transform 300ms, color 300ms;
326
354
  }
327
355
  .ctrls__btn path {
328
- transition: opacity 500ms;
356
+ transition: opacity 300ms;
329
357
  }
330
358
 
331
359
  .ctrls__btn--lg {
@@ -340,12 +368,12 @@
340
368
  background: var(--ctrls-btn-hover-bg);
341
369
  }
342
370
 
343
- .ctrls__btn--lg:focus-visible svg, .ctrls__btn--lg:hover svg {
371
+ .ctrls__randomize:focus-visible svg, .ctrls__randomize:hover svg {
344
372
  transform: rotate(0.5turn);
345
373
  }
346
- .ctrls__btn--lg:focus-visible path:nth-child(2),
347
- .ctrls__btn--lg:focus-visible path:nth-child(4), .ctrls__btn--lg:hover path:nth-child(2),
348
- .ctrls__btn--lg:hover path:nth-child(4) {
374
+ .ctrls__randomize:focus-visible path:nth-child(2),
375
+ .ctrls__randomize:focus-visible path:nth-child(4), .ctrls__randomize:hover path:nth-child(2),
376
+ .ctrls__randomize:hover path:nth-child(4) {
349
377
  opacity: 0;
350
378
  }
351
379
 
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;EAEA;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;EAGE;EACA;EACA;;AAGF;AAAA;EAEE;EACA;EACA;;AAGF;EACE;EACA;;;AAIJ;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;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;;;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.2",
3
+ "version": "0.1.4",
4
4
  "type": "module",
5
5
  "scripts": {
6
6
  "start": "npm run parse-markdown && vite",