@stanko/ctrls 0.1.1 → 0.1.3

package/README.md

@@ -8,7 +8,7 @@ Minimal library for controlling parameters, designed specifically for algorithmi
 
 I built Ctrls for my [algorithmic art projects](https://muffinman.io/art/). By default, the state is saved in the URL, which lets you navigate history and share links easily. Along with standard components like checkboxes and ranges, it includes two especially useful for generative work: RNG seed and easing. These not only let you adjust parameters but also expose functions (rng and easing) you can call directly.
 
-Play with the live example above or check the older version in my [Space Invaders generator](https://muffinman.io/invaders/)..
+Play with the live example above or check the older version in my [Space Invaders generator](https://muffinman.io/invaders/).
 
 ## Features
 
@@ -103,14 +103,15 @@ type ControlsOptions = {
   showRandomizeButton?: boolean; // default: true
   storage?: "hash" | "none"; // default: "hash"
   theme?: "system" | "light" | "dark"; // default: "system"
+  parent?: Element; // element to append Ctrls' element to
+  title?: string; // it will be rendered as a button which toggles the controls visibility
 };
 ```
 
 Public API:
 
 ```ts
-// The main Ctrls element. You'll have to add it to the page yourself:
-// document.querySelector('.my-controls').appendChild(options.element);
+// The main Ctrls element
 .element: HTMLDivElement
 
 // Change handler called whenever any of the values is changed.
@@ -145,7 +146,7 @@ All controls share the following properties:
   label?: string;
   // Depends on the control type, the default value for the control
   defaultValue?: T;
-  // Should the value be randomized when randomize button is clicked
+  // Disabled the value randomization (via randomize method or button)
   isRandomizationDisabled?: boolean; // default: false
 }
 ```
@@ -372,14 +373,14 @@ Thank you for stopping by! If you end up using Ctrls, please let me know, I woul
 
 ## TODO
 
-* [ ] Demo - favicon and metadata
-* [ ] Readme - screenshots
-* [ ] Prefix input names' with `ctrl_${id}_${name}` to avoid collisions
 * [ ] Allow users to pass a custom PRNG lib
 * [ ] Hash storage - check if there is an instance using hash storage already
-* [ ] Demo - stop animation when not in viewport
-* [ ] Add title which collapses the controls
+* [x] Add title which collapses the controls
 * [ ] Storage - local storage
+* [x] Prefix input names' with `ctrl_${id}_${name}` to avoid collisions
+* [x] Demo - stop animation when not in viewport
+* [x] Demo - favicon and metadata
+* [x] Readme - screenshots
 * [x] Use web safe / system fonts by default
 * [x] Experiment with chroma for light and dark shades of the main color
 * [x] On input event / handler

package/dist/ctrls/ctrl-radio.d.ts

@@ -17,6 +17,7 @@ export declare class RadioCtrl implements Ctrl<string> {
     items: Option[];
     element: HTMLElement;
     columns: 1 | 2 | 3 | 4 | 5;
+    id: string;
     constructor(config: CtrlTypeRegistry["radio"]["config"], onChange: CtrlChangeHandler<string>, onInput: CtrlChangeHandler<string>);
     parse: (string: string) => string;
     getRandomValue: () => string;

package/dist/ctrls/ctrl-radio.js

@@ -1,4 +1,6 @@
 import random from "../utils/random";
+import { toKebabCase } from "../utils/string-utils";
+import { getRandomString } from "../utils/get-random-string";
 export class RadioCtrl {
     constructor(config, onChange, onInput) {
         this.type = "radio";
@@ -21,7 +23,7 @@ export class RadioCtrl {
             const inputs = items.map((item) => {
                 const input = document.createElement("input");
                 input.setAttribute("type", "radio");
-                input.setAttribute("name", this.name);
+                input.setAttribute("name", this.id);
                 input.setAttribute("value", item.value);
                 input.checked = item.value === value;
                 input.addEventListener("change", () => {
@@ -75,6 +77,7 @@ export class RadioCtrl {
         this.columns = config.columns || 3;
         this.name = config.name;
         this.label = config.label || config.name;
+        this.id = `ctrls-${getRandomString()}-${toKebabCase(this.name)}`;
         const defaultValue = this.items.find((item) => item.value === config.defaultValue);
         this.value = defaultValue?.value || this.getDefaultValue();
         this.isRandomizationDisabled = config.isRandomizationDisabled || false;

package/dist/ctrls/index.d.ts

@@ -94,6 +94,8 @@ type ControlsOptions = {
     showRandomizeButton?: boolean;
     storage?: "hash" | "none";
     theme?: "system" | "light" | "dark";
+    parent?: Element;
+    title?: string;
 };
 export declare class Ctrls<Configs extends readonly TypedControlConfig[]> {
     options: ControlsOptions;
@@ -104,6 +106,7 @@ export declare class Ctrls<Configs extends readonly TypedControlConfig[]> {
     onInput?: (updatedValues: Partial<ReturnType<typeof this.getValues>>) => void;
     constructor(controls: Configs, options?: ControlsOptions);
     buildUI: () => HTMLDivElement;
+    toggleVisibility: () => void;
     addHashListeners: () => void;
     getHash: () => string;
     setHash: () => void;

package/dist/ctrls/index.js

@@ -23,18 +23,31 @@ export class Ctrls {
             const element = document.createElement("div");
             element.classList.add("ctrls");
             element.classList.add(`ctrls--${this.options.theme}-theme`);
+            const controlsContainer = document.createElement("div");
+            controlsContainer.classList.add("ctrls__controls");
             this.controls.forEach((control) => {
-                element.appendChild(control.element);
+                controlsContainer.appendChild(control.element);
             });
             if (this.options.showRandomizeButton) {
                 const randomizeButton = document.createElement("button");
                 randomizeButton.classList.add("ctrls__randomize", "ctrls__btn", "ctrls__btn--lg");
                 randomizeButton.innerHTML = `Randomize ${diceIcon}`;
                 randomizeButton.addEventListener("click", this.randomize);
-                element.appendChild(randomizeButton);
+                controlsContainer.appendChild(randomizeButton);
             }
+            if (this.options.title) {
+                const titleButton = document.createElement("button");
+                titleButton.classList.add("ctrls__title");
+                titleButton.innerText = this.options.title;
+                titleButton.addEventListener("click", this.toggleVisibility);
+                element.appendChild(titleButton);
+            }
+            element.appendChild(controlsContainer);
             return element;
         };
+        this.toggleVisibility = () => {
+            this.element.classList.toggle("ctrls--hidden");
+        };
         this.addHashListeners = () => {
             window.addEventListener("hashchange", this.updateFromHash);
             // Update all inputs using initial values from the hash
@@ -141,6 +154,9 @@ export class Ctrls {
         if (this.options.storage === "hash") {
             this.addHashListeners();
         }
+        if (this.options.parent) {
+            this.options.parent.appendChild(this.element);
+        }
     }
     getValues() {
         const options = {};

package/dist/ctrls.css

@@ -277,15 +277,10 @@
   color: var(--ctrls-text);
   border-radius: min(var(--ctrls-radius) + 8px, 24px);
   border: 1px solid var(--ctrls-border);
-  padding: 0.5rem;
-  display: grid;
-  gap: 0.5rem;
   background-color: var(--ctrls-bg);
   backdrop-filter: blur(4px);
-  scrollbar-width: thin;
-  scrollbar-color: var(--ctrls-scrollbar-thumb-bg) transparent;
-  overflow: auto;
   max-width: var(--ctrls-width);
+  overflow: hidden;
 }
 .ctrls *,
 .ctrls *::before,
@@ -305,6 +300,38 @@
   overflow: visible;
 }
 
+.ctrls__title {
+  background: none;
+  border: none;
+  font-weight: bold;
+  letter-spacing: -0.025em;
+  width: 100%;
+  padding: 0.375rem 0.5rem;
+  cursor: pointer;
+  transition: color 300ms, background-color 300ms;
+}
+.ctrls__title:focus-visible, .ctrls__title:hover {
+  color: var(--ctrls-theme);
+  background: var(--ctrls-btn-hover-bg);
+}
+
+.ctrls__controls {
+  display: grid;
+  gap: 0.5rem;
+  padding: 0.5rem;
+  overflow: auto;
+  scrollbar-width: thin;
+  scrollbar-color: var(--ctrls-scrollbar-thumb-bg) transparent;
+}
+
+.ctrls__title + .ctrls__controls {
+  border-top: 1px solid var(--ctrls-border);
+}
+
+.ctrls--hidden .ctrls__controls {
+  display: none;
+}
+
 /* ----- Buttons ----- */
 .ctrls__btn {
   background: none;
@@ -315,17 +342,17 @@
   justify-content: center;
   gap: 0.25rem;
   border-radius: var(--ctrls-radius);
-  transition: color 500ms, background-color 500ms;
+  transition: color 300ms, background-color 300ms;
 }
 .ctrls__btn:focus-visible, .ctrls__btn:hover {
   color: var(--ctrls-btn-hover-text);
 }
 .ctrls__btn svg {
   width: 1rem;
-  transition: transform 500ms, color 500ms;
+  transition: transform 300ms, color 300ms;
 }
 .ctrls__btn path {
-  transition: opacity 500ms;
+  transition: opacity 300ms;
 }
 
 .ctrls__btn--lg {

package/dist/ctrls.css.map

@@ -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"}
+{"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"}

package/dist/utils/get-random-string.d.ts

@@ -0,0 +1 @@
+export declare const getRandomString: (slice?: number) => string;

package/dist/utils/get-random-string.js

@@ -0,0 +1,5 @@
+export const getRandomString = (slice = 4) => {
+    const random = Math.random().toString(36).substring(2).slice(0, slice);
+    const time = Date.now().toString(36).slice(0, slice);
+    return `${random}${time}`;
+};

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@stanko/ctrls",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "type": "module",
   "scripts": {
-    "start": "vite",
-    "build": "tsc && vite build",
+    "start": "npm run parse-markdown && vite",
+    "build": "npm run parse-markdown && tsc && rm -rf ./docs && vite build && touch ./docs/.nojekyll",
     "build-css": "sass ./src/scss/index.scss ./dist/ctrls.css",
     "build-lib": "rm -rf ./dist && tsc -p ./tsconfig-lib.json && npm run build-css",
+    "parse-markdown": "node ./parse-markdown.js",
     "preview": "vite preview",
     "prepare": "cp ./pre-commit ./.git/hooks/pre-commit && chmod +x ./.git/hooks/pre-commit"
   },