input-num spin fix + improvements

package.json working, though clumsy, and no minification

Author: sidewayss

README.md

@@ -318,7 +318,7 @@ displays 100 as: **$100/kg**
 #### Miscellaneous JavaScript Properties and Methods:
 - `text` (read-only) is the formatted text value, including currency, units, etc.
 - `useLocale` (read-only) returns `true` if `locale` is set.
-- `validate` is a `Function` for custom validation or transformation.
+- `validate` is a `Function` for custom validation and/or transformation.
 - `resize(forceIt)` resizes the element. When `autoResize` is `true`, it runs automatically after setting any attribute that affects the element's width or alignment. When `autoResize` is `false`, you must set `forceIt` to `true` or the function won't run.  Call it after you change CSS font properties, for example.
 
 ### Events
@@ -334,10 +334,11 @@ When the user inputs via the spinner, the event object has two additional proper
 - `isSpinning` is set to `true`.
 - `isUp` is `true` when it's spinning up (incrementing) and `false` or `undefined` when spinning down (decrementing).
 
-The `validate` property allows you to insert your own validation (or transformation) function before the value is committed and the `change` event is fired. Because it runs before committing the value, it runs before the internal `!isNaN()` validation. The function takes two arguments: `value` and `isSpinning`. `value` is a string (keyboard input) or a number (spinning). The return value falls into three categories:
-- `false` for invalid values
-- `undefined` or `value` to accept the current value
-- a different number: for when you want to round to the nearest prime number, or perform whatever transformation or restriction that can't be defined solely by `max` and `min`.
+The `validate` property allows you to insert your own validation and/or transformation function before the value is committed and the `change` event is fired. Because it runs before committing the value, it runs before the internal `!isNaN()` validation. The function takes two arguments: `value` and `isSpinning`:
+- `value` is a string (keyboard input) or a number (spinning)
+- `isSpinning` is a boolean indicating whether the user is inputting via keyboard (`false`) or the spinner (`true`).
+
+To indicate an invalid value, return `false`. Otherwise return the value itself, transformed or not. Transforms are for those rare occasions when you want to round to the nearest prime number, or whatever transformation or restriction that can't be defined solely by `max` and `min`.
 
 ### Styling
 You can obviously style the element itself, but you can also style some of its parts via the `::part` pseudo-element. Remember that `::part` overrides the shadow DOM elements' style. You must use `!important` if you want to override `::part`.

apps/multi-state/index.js

@@ -130,8 +130,6 @@ function textLabel(elm) {
   return ` label="${elm.label}"`;
 }
 //==============================================================================
-// HTML displays using non-breaking hyphen U+2011, which is not a valid HTML
-// character, so it must be replaced with a regular hyphen.
 function copyToClipboard(evt) {
   const tar = evt.target;
   writeText(tar, fromHTML(elms.html[splitDash(tar.id)[0]].textContent));

custom-elements.json

@@ -1086,9 +1086,6 @@
                 {
                   "name": "hoverIn"
                 },
-                {
-                  "name": "setHref"
-                },
                 {
                   "name": "state"
                 },
@@ -1287,6 +1284,24 @@
                 }
               ]
             },
+            {
+              "kind": "method",
+              "name": "#clearSpin",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "#isOoB",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "val"
+                },
+                {
+                  "name": "isUp"
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "resize",

input-num.js

@@ -369,7 +369,8 @@ static observedAttributes = [
         let args;
         const id = evt.target.id;
         if (this.#isSpinning) {          // if spinning, spin the other way
-            this.#spin(undefined, null); // cancel w/o href or #spinId = null
+            if (this.#spinId >= 0)
+                this.#clearSpin();       // clearInterval()
             args = [false, id == TOP];   // restart at full speed
         }
         this.#overOut(id, `${this.#getState(id)}`, args);
@@ -472,7 +473,7 @@ static observedAttributes = [
                 this.classList.add(BEEP);
         }
         else {
-            this.#spin(true);
+            this.#spin(true);                 // start spinning
             if (this.#outFocus)               // Chrome: prevent next element's
                 evt.preventDefault();         // text selection on double-click,
         }                                     // but allow focus to happen first
@@ -544,22 +545,28 @@ static observedAttributes = [
                 return;
             case code.down:
             case code.up:
-            // Keyboard repeat rate is an OS setting that has it's own delay
-            // then interval, thus #spin(null). Separate href for delayed image
-            // because quick keydown/up sequences flicker, and a delay can look
-            // just as flickery, depending on the timing. If it's only a slight
-            // difference from #spinner-idle, it looks good.
-                const topBot = key[evt.code];
-                if (this.#isSpinning)
-                    this._setHref(`${SPINNER}${SPIN}${topBot}`);
+            // Keyboard repeat rate is an OS setting that has its own delay then
+            // interval, thus #spin(null), which doesn't set href or #spinId.
+            // Separate href for delayed image because fast keydown/up sequences
+            // flicker, and a delay can look just as flickery, depending on the
+            // timing. It looks better if the initial, pre-delay image is only
+            // slightly different from #spinner-idle.
+                const
+                topBot   = key[evt.code],
+                isSpin   = this.#isSpinning, // next line might change it
+                inBounds = this.#spin(null, topBot == TOP);
+                if (isSpin) {
+                    if (inBounds)
+                        this._setHref(`${SPINNER}${SPIN}${topBot}`);
+                }
                 else {
                     this._setHref(`${SPINNER}key-${topBot}`);
-                    this.#spinId = -1;
-                } // #spin(null) doesn't set href or #spinId
-                this.#spin(null, topBot == TOP);
+                    this.#spinId = -1;       // so that #isSpinning = true
+                }
             default:
             }
     }
+    //--------------------------------------------------------------------------
     #keyUp(evt) {                            // Esc key never makes it this far
         if (this.#inFocus) {                 // any character accepted...
             if (evt.code == code.enter)
@@ -647,51 +654,67 @@ static observedAttributes = [
 
 //  #spin() controls the spinning process
     #spin(state, isUp = (this.#hoverIn == TOP)) {
-        if (state === undefined) {           // cancel:
+        if (state === undefined) {          // cancel:
             if (this.#isSpinning) {
-                clearInterval(this.#spinId); // interchangeable w/clearTimeout()
-                clearTimeout (this.#erId);
-                if (isUp !== null) {         // for mouseover while spinning
+                this.#clearSpin();
+                if (isUp !== null) {        // for mouseover while spinning
                     const state = this.#hoverIn ? `${HOVER}${this.#hoverIn}`
                                                 : IDLE;
                     this._setHref(`${SPINNER}${state}`);
                     this.#spinId = null;
                 }
-                this.#erId = null;
             }
         }
-        else {                               // spin:
-            let val = this.#attrs[VALUE];    // if already clamped, skip it
-            if ((isUp && val != this.max) || (!isUp && val != this.min)) {
-                const n = val + (this.#attrs[STEP] * (isUp ? 1 : -1));
-                val = this.#validate?.(n, true) ?? n; // true for isSpinning
-                if (val !== false) {         // clamp it between min and max:
-                    this.setAttribute(VALUE, Math.max(this.min, Math.min(this.max, val)));
-                    this.#input.value = this.#getText(false); // false because #input w/focus does not spin
+        else {                              // spin:
+            let
+            val = this.#attrs[VALUE],
+            oob = this.#isOoB(val, isUp);
+            if (!oob) {
+                val += this.#attrs[STEP] * (isUp ? 1 : -1);
+                val  = this.#validate?.(val, true) ?? val; // true for isSpinning
+                if (val !== false) {
+                    oob = this.#isOoB(val, isUp);
+                    if (oob) {
+                        this.#clearSpin();  // stop spinning and clamp the value
+                        val = Math.max(this.min, Math.min(this.max, val));
+                    }
+                    this.setAttribute(VALUE, val); // false: #input w/focus doesn't spin
+                    this.#input.value = this.#getText(false);
                     const evt = new Event("change");
                     evt.isUp  = isUp;
                     evt.isSpinning = true;
                     this.dispatchEvent(evt);
                 }
-                if (state) {                 // start spin with initial step
-                    const
-                    topBot = isUp ? TOP : BOT,
-                    now    = `${SPINNER}${ACTIVE}${topBot}`,
-                    later  = `${SPINNER}${SPIN}${topBot}`;
+            }
+            if (oob)
+                this.#spinId = -1;          // not null, same as keyboard spin
 
-                    this._setHref(now);
-                    this.#erId = setTimeout(this._setHref.bind(this), this.delay, later);
+            if (state) {                    // start spin with initial step
+                const
+                topBot = isUp ? TOP : BOT,
+                now    = `${SPINNER}${ACTIVE}${topBot}`,
+                later  = `${SPINNER}${SPIN}${topBot}`;
 
-                    this.#spinId = setTimeout (this.#spin.bind(this), this.delay, false, isUp);
+                this._setHref(now);
+                if (!oob) {
+                    this.#erId   = setTimeout(this._setHref.bind(this), this.delay, later);
+                    this.#spinId = setTimeout(this.#spin.bind(this), this.delay, false, isUp);
                 }
-                else if (state === false)    // start spinning full speed
-                    this.#spinId = setInterval(this.#spin.bind(this), this.interval, null, isUp);
-                // else  state === null >>>> continue spinning full speed
             }
-            else // I prefer this to an expired id for a non-null value
-                this.#spinId = -1; // for keyboard spin, clamped values
+            else if (state === false)       // start spinning full speed
+                this.#spinId = setInterval(this.#spin.bind(this), this.interval, null, isUp);
+            // else  state === null >>>> continue spinning full speed
+            return !oob;
         }
     }
+    #clearSpin() {
+        clearInterval(this.#spinId); // interchangeable w/clearTimeout()
+        clearTimeout (this.#erId);
+        this.#erId = null;
+    }
+    #isOoB(val, isUp) { // really out of and including bounds...
+        return isUp ? val >= this.max : val <= this.min;
+    }
 // =============================================================================
 //  resize() calculates the correct width and applies it to this.#input
     resize(forceIt) {