apps fixes/input-num, docs

<input-num> working better in Easings app. disablePlay() and its minions improved.

README.md

@@ -5,7 +5,7 @@ The name **rAF** is a common abbreviation for the core JavaScript animation func
 It is a solo open source project about to be released in its first public version 1.0. Hopefully others will contribute in the future.
 
 ## Getting started
-If you want to skip the formalities and jump right in, the best place to start are the <a href="https://sidewayss.github.io/rAF/apps/">3 Apps</a> (latest code on GitHub Pages) that test & demonstrate the library and generate starting-point JavaScript code. They are also available in a more stable form on my <a href="https://sidewayss.com/raf/apps/">homepage</a>.
+If you want to skip the formalities and jump right in, the best place to start are the <a href="https://sidewayss.github.io/rAF/apps/">3 Apps</a> (latest code on GitHub Pages) that test & demonstrate the library and generate starting-point JavaScript code. They are also available in a more sta(b)le form on my <a href="https://sidewayss.com/raf/apps/">homepage</a>.
 
 There are also animation examples in these collections on CodePen:
 
@@ -14,7 +14,7 @@ There are also animation examples in these collections on CodePen:
 <a href="https://sidewayss.github.io/rAF/docs/raf-by-class.html">Properties and Methods by Class</a> catalogs classes and constants you might want to use. The current state of documentation is skeletal. Hopefully the examples, apps, and app instructions will help to fill to fill things in.
 
 ## Setup
-**rAF** is modular. There are currently no packages or minified file. Should be coming your way soon after v1.0. For most users, `raf.js` provides all the exports you need. Here is a typical import statement:
+**rAF** is modular. There are currently no packages and no transpiled or minified file. Coming your way soon as part of v1.0. For most users, `raf.js` provides all the exports you need. Here is a typical import statement:
 ```
 import {E, Ez, F, P, Easy, Easies, AFrame, rAFInit} from "https://sidewayss.com/raf/src/raf.js";
 ```
@@ -28,13 +28,13 @@ It initializes constants that are used internally, many of which you will use to
 **rAF** provides a flexible, structured, and compact way to create and execute CSS or SVG animations of two types:
 - Gradual value changes controlled by timing patterns
 - Cue-based animations, where timing cues trigger animation events that can span elements and properties
-It also provides an alternate paradigm for setting properties/attributes where the property sets the value on the element, not the other way around. There are advantages.
+- An alternate paradigm for setting properties/attributes, where the property sets the value on the element, not the other way around. There are advantages.
 
 Features CSS doesn't have:
-- Multiple timing patterns for a single property, within and across functions
+- Multiple timing patterns for a single property, by argument, within and across functions
 - Eased steps, for timing and values separately
 - Max and min limits by argument by element
-- Animate the same property differently across elements in a single animation
+- Animate the same property differently across elements in a single animation, sharing the timing function or not
 - <a href="https://github.com/color-js/color.js">Color.js</a> integration
 - For two-legged easings:
     - Not just `inOut`, there are `outIn`, `inIn`, and `outOut` settings
@@ -48,7 +48,7 @@ Goals, Assumptions, and Approach:
 - Allow for the animation of every property/attribute and function in full detail
 - Create a minimal syntax that is both flexible and forgiving
 - Make it fully object-oriented within the confines of JavaScript
-- Assume a “modern browser” that supports ES6*
+- Assume a “modern browser” that supports ES6*, but transpile back to wherever is plausible
 - Build in callbacks for flexibility and the ability to meet as-yet-unknown requirements
 - Create a way to test user GPU power and develop methods for handling low-end vs high-end GPUs
 

apps/color/_load.js

@@ -110,7 +110,6 @@ function load(_, hasVisited) {
     clone.id = sib.id       // dummy element contains id and keeps the grid
     elms[sib.id] = clone;   // from reflowing via replaceWith().
     clone.style.marginLeft = sib.style.marginLeft;
-    g.disables.splice(g.disables.indexOf(sib), 1, clone);
     sib.replaceWith(clone);
                             // initialize elms:
     [EASY_, MEASER_].forEach((v, i) => elms.type.options[i].value = v);

apps/common.css

@@ -91,8 +91,8 @@ select, input[type=number] {
   background-color:var(--sidebar-white);
   border:var(--border-gray);
 }
-input[type=text] {
-  caret-color:black;
+input[type=text], input-num {
+  caret-color:auto;
 }
 input.invalid {
   background-color:rgb(139 0 0 / 0.1); /* background-opacity does not exist */
@@ -184,8 +184,7 @@ check-box, check-tri {
 }
 check-box[disabled], check-box[disabled][checked],
 check-tri[disabled], check-tri[disabled][checked],
-label[disabled],
-select:disabled {
+label[disabled], select:disabled {
   stroke:var(--medium-gray);
   color: var(--medium-gray);
 }

apps/easings/_load.js

@@ -124,7 +124,7 @@ function getEasies(_, json) {
     ease = Ease.ease[0][id],               // default CSS "ease" as bezier array
     size = ease.length;
 
-    for (i = 1; i < size; i++)             // clone sub-<div>
+    for (i = 1; i < size; i++)             // clone bezier sub-<div>
         divs.push(div.appendChild(elm.cloneNode(true)));
 
     const titles = json.titles;

apps/easings/index.css

@@ -63,13 +63,6 @@ p.hi { font-weight:500; }
   padding-top:var(--8th);
 }
 
-/* Numeric inputs are messy */
-input[type=number] {
-  text-align:right;
-  padding-left: 0;
-  padding-right:0;
-  caret-color:black;
-}
 #v0, #v1, #v2 {
   width:calc(3ch + 1.75rem);
 }
@@ -291,24 +284,8 @@ circle {
   .w5ch { width:5.35ch; } /* .35 for #mid alignment at font-size:100% */
   .w6ch { width:6.5ch; }
   .w7ch { width:7.5ch; }
-  input[type=number].secs {
-    text-align:left;
-    padding-left:0.3125rem;
-  }
-  input[type=number].secs:not(:hover, :focus) {
-    -moz-appearance:textfield;
-  }
 }
 @supports (hanging-punctuation:first) and (font:-apple-system-body)
                                       and (-webkit-appearance:none) {
-  input[type=number].secs {
-    text-align:left;
-    padding-left:0.3125rem;
-  }
-  input[type=number].secs:not(:hover, :focus)::-webkit-outer-spin-button,
-  input[type=number].secs:not(:hover, :focus)::-webkit-inner-spin-button {
-      -webkit-appearance: none;
-      margin: 0;
-  }
   .clear { font-weight:normal; }
 }

apps/easings/msg.js

@@ -6,6 +6,7 @@ export const MSG = ["mid","split","gap"];
 import {Ez, P} from "../../src/raf.js";
 
 import {msecs, secs} from "../update.js";
+import {abled}       from "../named.js";
 import {MILLI, BUTTON, DIV, CLICK, CHANGE, elms, addEventToElms,
         addEventsByElm, addEventByClass, boolToString}
                      from "../common.js";
@@ -152,8 +153,7 @@ function setSplitGap(time = msecs,
 // disableClear() helps changeMSG() and clickClear(), also called by
 //               easingFromObj(), returns a factor/divisor.
 function disableClear(elm, n, isDefN) {
-    elm.clear.disabled = !isDefN || n == elm.default();
-    elm.clear.dataset.enabled = boolToString(!elm.clear.disabled);
+    abled(elm.clear, !isDefN || n == elm.default())
 }
 // isUnlocked() helps clickLock() and setSplitGap();
 function isUnlocked(elm) {  // not exported

apps/easings/tio-pow.js

@@ -31,7 +31,6 @@ function loadTIOPow() {
 
     elms[sel.id] = sel;
     elms.divType2.appendChild(sel);
-    g.disables.push(sel);
 
     for ([id, evt] of [[TYPE, INPUT], [POW, CHANGE]]) {
         two = [elms[id], elms[id + TWO]];

apps/load.js

@@ -45,7 +45,7 @@ function loadCommon() {
 
     arr = byTag[2].splice(-3, 3);     // break out <dialog> sub-elements by id
     if (byTag[0].at(-1).id == "name")
-        arr.push(...byTag[0].splice(-1, 1)); // Save Named <input>
+        arr.push(...byTag[0].splice(-1, 1)); // <input id="name" type="text">
     else             // id == "spaces"
         arr.push(...byTag[1].splice(-1, 1)); // Color Picker <select>
 
@@ -151,6 +151,14 @@ function loadJSON(response, is, dir, ns, name, hasVisited, byTag, msg) {
 // loadFinally() executes on Promise.all().then(), could be inlined & indented:)
 function loadFinally(is, name, hasVisited, id) {
     let obj;
+    const               // there are new clones since loadCommon() { byTag = }
+    tags  = [INPUT, SELECT, BUTTON, LABEL,"input-num","check-box"],
+    byTag = tags.map(tag => [...document.body.getElementsByTagName(tag)]);
+
+    byTag[0].splice(byTag[0].indexOf(elms.x), 1); // elms.x disables abnormally
+    Ez.readOnly(g, "abled",    byTag.flat());     // en|dis for disablePlay()
+    Ez.readOnly(g, "disabled", new Set);          // stay disabled post-play
+
     if (elms.save)
         Ez.readOnly(g, "restore", `${preDoc}restore`);
 

apps/named.js

@@ -1,4 +1,4 @@
-export {loadNamed, setPrefix, disableSave, disablePreset, disableDelete};
+export {loadNamed, setPrefix, disableSave, disablePreset, disableDelete, abled};
 export let   LINEAR, ns, preClass, presets; // ns exported for storeCurrent()
 export const
 DEFAULT_NAME = "",             // default value for elms.named[0]
@@ -8,8 +8,8 @@ import {E} from "../src/raf.js";
 
 import {loadCopy}                             from "./copy.js";
 import {getNamedBoth, setNamed, storeCurrent} from "./local-storage.js";
-import {CHANGE, CLICK, EASY_, MEASER_, dlg, elms, g, addEventsByElm,
-        boolToString, messageBox}             from "./common.js";
+import {CHANGE, CLICK, EASY_, MEASER_, dlg, elms, g, addEventsByElm, messageBox}
+                                              from "./common.js";
 /*
 import(_named.js): formFromObj, updateNamed; ok() for easings only.
 import(_load.js) : updateAll via loadNamed(..., _load)
@@ -120,31 +120,26 @@ function openNamed() {  // not exported
 //               b is true when the selected named object is modified.
 function disableSave(b) {
     if (elms.save) {
-        elms.save  .disabled = b;
-        elms.revert.disabled = b;
-        const str = boolToString(!b);
-        elms.save  .dataset.enabled = str; // see disablePlay()
-        elms.revert.dataset.enabled = str; // "italic" = "modified"
         elms.named.style.fontStyle = b ? "" : "italic";
+        for (const elm of [elms.save, elms.revert])
+            abled(elm, b);
     }
 }
 // disablePreset() called by openNamed(), clickOk(), loadFinally(), presets can
 //                 be modified and saved, elms.preset reverts to preset values.
 function disablePreset(name, item) {
-    if (elms.preset) {
-        elms.preset.disabled = !name || !item
-                            || !presets[name]
-                            || JSON.stringify(presets[name]) == item;
-
-        elms.preset.dataset.enabled = boolToString(!elms.preset.disabled);
-    }
+    if (elms.preset)
+        abled(elms.preset, !name || !item || !presets[name]
+                                 || JSON.stringify(presets[name]) == item);
 }
 // disableDelete() called by openNamed(), clickOk(), loadFinally()
 function disableDelete(name) { // can't delete presets, including default
-    const elm = elms.delete;
-    if (elm) {
-        const dis    = Boolean(presets[name]);
-        elm.disabled = dis;
-        elm.dataset.enabled = boolToString(!dis);
-    }
+    if (elms.delete)
+        abled(elms.delete, Boolean(presets[name]));
+}
+// abled() helps other functions enable or disable an element
+function abled(elm, b) {
+    elm.disabled = b;
+    g.disabled[b ? "add" : "delete"](elm);
+
 }

apps/play.js

@@ -102,9 +102,10 @@ function formatPlay(isPlaying) { // isPlaying is true or false, never undefined
 }
 // disablePlay() helps changePlay(), changeStop() via resetPlay()
 function disablePlay(isPlaying, isPausing) {
-    let elm
-    for (elm of [...g.disables,
-                 ...g.buttons.filter(btn => btn.dataset.enabled)])
+    let elm;
+    const targets = isPlaying ? g.abled
+                              : g.abled.filter(e => !g.disabled.has(e));
+    for (elm of targets)
         elm.toggleAttribute("disabled", isPlaying);
 
     elm = elms.x
@@ -116,9 +117,4 @@ function disablePlay(isPlaying, isPausing) {
         P.enable(elm, true);
         P.accentColor.cut(elm);
     }
-}
-// setAttrBool() helps with disabled, checked, and other boolean attributes
-function setAttrBool(elm, attr, b) { // only used by disablePlay()
-    b ? elm.setAttribute(attr, "")
-      : elm.removeAttribute(attr);
 }