From 70c64c5739300ab10b6d94e2f11a42a4ffdbf72f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ryanv=C3=A9?= Date: Thu, 29 Jul 2021 00:00:13 -0400 Subject: [PATCH] staging via meta for the win (#8) * 79 lines elmo flow help meta reset staff stage state via seed seeded * 77 later darling stage staff * hyperlink staging #8 --- README.md | 44 +++++++++++++++++++++++++++++++++++--------- index.html | 3 +++ varam.js | 40 +++++++++++++++++++++++++++++++--------- 3 files changed, 69 insertions(+), 18 deletions(-) diff --git a/README.md b/README.md index 67af1f3..8c29bb1 100644 --- a/README.md +++ b/README.md @@ -58,22 +58,48 @@ writing-mode: var(--mode, horizontal-tb); ``` -- URL params are read -- CSS var are updated -- async optional +- URL params are read and only read +- CSS var are updated where matching +- async or defer to your desire -### performant updating +### updating -```js -varam(location.search) -``` +- performant updating +- we minimize reflow +- [just load the script](#automagic) to go with the flow with real URL +- [updaters](#updaters) return [boolean](#boolean) whether reflow expected +- update if you change dom (otherwise no need) + +### updaters + +- `varam.flow()` automagic does `varam(location.search)` with real URL +- `varam.reset()` to reset state like `varam("")` but leave URL alone +- `varam.fresh(...)` is how varam performantly interacts with style -### varam returns boolean +### boolean - `true` when update was made - `false` when update needless -### [seed carefully](../../pull/2) +### help + +`varam.help()` for help in your console + +### diagnostic + +- `varam.meta` content interpreted +- `varam.state` latest state +- `varam.via` paramethod `"flow"` or `"meta"` + +### [staging](../../pull/8) + +- default checks `location.search` **not meta** +- staging meta simulates alternate search +- **skip this** unless you're staging + +```html + +``` ## technology diff --git a/index.html b/index.html index f636c12..8347b64 100644 --- a/index.html +++ b/index.html @@ -10,6 +10,9 @@ + + + diff --git a/varam.js b/varam.js index 2d40d3b..5c94f2b 100644 --- a/varam.js +++ b/varam.js @@ -1,15 +1,18 @@ -!function(web) { +//ryanve.dev/varam +!function(web, dom) { + var empty = "" var dash = "--" var word = /\S+/g var what = "data-varam" var where = "[data-varam]" - var all = "querySelectorAll" + var first = dom.querySelector || no var par = web.URLSearchParams + var api = par ? varam : no function varam(search) { var did = false var url = new par(search) - var stack = document[all](where) + var stack = dom.querySelectorAll(where) each(stack, function(scope) { var keys = scope.getAttribute(what) keys = keys && keys.match(word) @@ -20,6 +23,7 @@ did = fresh(style, relay, value) || did }) }) + api.state = url.toString() return did } @@ -27,6 +31,19 @@ return false } + function flow() { + return api(location.search) + } + + function reset() { + return api(empty) + } + + function help() { + console.dir(api) + return api.state + } + function fresh(style, relay, value) { var prev = style.getPropertyValue(relay) var next = value @@ -40,16 +57,21 @@ while(i--) f(stack[i]) } - var api = par ? varam : no - var seed = web.varam + var like = "meta[name=varam][content]" + var elmo = first.call(dom, like) + var seed = elmo && elmo.content var seeded = typeof seed == "string" seed = seeded && seed - api.seed = seed - api.seeded = seeded + api.flow = par ? flow : no api.fresh = fresh + api.help = help + api.reset = par ? reset : no + api.state = empty + par && api(seeded ? seed : location.search) + api.meta = seeded ? api.state : false + api.via = seeded ? "meta" : "flow" web.varam = api - api(seeded ? seed : location.search) var common = typeof module != "undefined" if (common && module.exports) module.exports = api -}(window) +}(window, document)