npm - bootstrap-input-spinner - Versions diffs - 3.1.3 → 3.1.8 - Mend

bootstrap-input-spinner 3.1.3 → 3.1.8

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 (5) hide show

package/README.md +11 -7
package/index.html +36 -29
package/package.json +1 -1
package/src/bootstrap-input-spinner.js +10 -2
package/test/index.html +2 -2

package/README.md CHANGED Viewed

@@ -7,7 +7,7 @@ A Bootstrap / jQuery plugin to create input spinner elements for number input.
 ![bootstrap-input-spinner](https://shaack.com/projekte/assets/img/bootstrap-input-spinner-floatingpoint-and-i18n.png)
 *Examples with floating-point and german localization*
-> This version is compatible with Bootstrap 5, but we remain a Bootstrap 4 compatible version with the branch
+> This version is compatible with **Bootstrap 5**, but we remain a Bootstrap 4 compatible version with the branch
 > <a href="https://github.com/shaack/bootstrap-input-spinner/tree/bootstrap4-compatible">bootstrap4-compatible</a>.
 > npm package versions 3.x are Bootstrap 5 compatible, versions 2.x Bootstrap 4 compatible.
@@ -288,10 +288,14 @@ For older browsers (IE 9 or so), that doesn't support `Intl`, when you get an er
 **"Intl is not defined"** (See [issue #34](https://github.com/shaack/bootstrap-input-spinner/issues/34)), just use a
 shim or polyfill like [Intl.js](https://github.com/andyearnshaw/Intl.js), and it works.
-# Our further Bootstrap and HTML extensions
+# You may want to check out my further Bootstrap and HTML extensions
+- [bootstrap-input-spinner](https://shaack.com/projekte/bootstrap-input-spinner/) – Input numbers
+- [bootstrap-show-modal](https://shaack.com/projekte/bootstrap-show-modal/) – Show dialogs, dynamically
+- [bootstrap-show-notification](https://shaack.com/projekte/bootstrap-show-notification/) – Show notifications, dynamically
+- [bootstrap-detect-breakpoint](https://www.npmjs.com/package/bootstrap-detect-breakpoint) – Read the curr. BS BP from JS
+- [auto-resize-textarea](https://shaack.com/projekte/auto-resize-textarea/) – Auto resize textareas by its content
+- [external-links-blank](https://www.npmjs.com/package/external-links-blank) – Open all external links `_blank`
-If you like this component, you may want to check out our other Bootstrap and HTML extensions
-[**bootstrap-show-modal**](https://shaack.com/en/open-source-components),
-[**bootstrap-detect-breakpoint**](https://shaack.com/en/open-source-components),
-[**auto-resize-textarea**](https://shaack.com/en/open-source-components) and
-[**external-links-blank**](https://shaack.com/en/open-source-components).

package/index.html CHANGED Viewed

@@ -1,4 +1,5 @@
 <!DOCTYPE html>
+<!--suppress HtmlFormInputWithoutLabel -->
 <html lang="en">
 <head>
     <meta charset="UTF-8">
@@ -13,7 +14,7 @@
             border-bottom: 1px solid rgba(0, 0, 0, 0.5);
         }
-        h3 {
+        h3, h4 {
             margin-top: 2rem;
         }
@@ -109,8 +110,9 @@
         read the value from JavaScript
         with <code>val()</code></h3>
     <p>
-        Type in a number to see the difference between <code>change</code> and
-        <code>input</code> events.
+        Type in a number to see the difference between <code>change</code> and <code>input</code> events.
+    </p>
+    <p>
         <input type="number" id="changedInput" value="2500" min="0" max="5000000" data-decimals="2"/>
     </p>
     <p>
@@ -122,11 +124,13 @@
         var $valueOnInput = $("#valueOnInput")
         var $valueOnChange = $("#valueOnChange")
         $changedInput.on("input", function (event) {
+            console.log("on input", event)
             $valueOnInput.html($(event.target).val())
             // or $valueOnInput.html(event.target.value) // in vanilla js
             // or $valueOnInput.html($changedInput.val())
         })
         $changedInput.on("change", function (event) {
+            console.log("on change", event)
             $valueOnChange.html($(event.target).val())
         })
     </script>
@@ -143,31 +147,31 @@ $changedInput.on("change", function (event) {
 })</code></pre>
     <h3>Programmatic changing the value with <code>val()</code></h3>
     <p>
-        Net
+        <label for="inputNet">Net</label>
         <input type="number" id="inputNet" value="100" min="0" max="10000" step="0.01" data-decimals="2"/>
     </p>
     <p>
-        Gross (+19%)
+        <label for="inputGross">Gross (+19%)</label>
         <input type="number" id="inputGross" value="100" min="0" max="11900" step="0.01" data-decimals="2"/>
     </p>
     <script>
         var $inputNet = $("#inputNet")
         var $inputGross = $("#inputGross")
-        $inputNet.on("change", function (event) {
+        $inputNet.on("input", function (event) {
             $inputGross.val($(event.target).val() * 1.19)
         })
-        $inputGross.on("change", function (event) {
+        $inputGross.on("input", function (event) {
             $inputNet.val($(event.target).val() / 1.19)
         })
         $inputGross.val($inputNet.val() * 1.19)
     </script>
-    <pre><code class="language-javascript">$inputNet.on("change", function (event) {
+    <pre><code class="language-javascript">$inputNet.on("input", function (event) {
     $inputGross.val($(event.target).val() * 1.19)
     // or $inputGross[0].setValue(event.target.value * 1.19) // in vanilla js
     // or $inputGross.val($inputNet.val() * 1.19)
     // do all the same
 })
-$inputGross.on("change", function (event) {
+$inputGross.on("input", function (event) {
     $inputNet.val($(event.target).val() / 1.19)
 })</code></pre>
     <h3>Attributes <code>placeholder</code> and <code>required</code></h3>
@@ -211,7 +215,7 @@ $inputGross.on("change", function (event) {
 &lt;/script></code></pre>
     </form>
-    <h3><code>buttonsOnly</code> mode (New!)</h3>
+    <h3><code>buttonsOnly</code> mode and disabled <code>autoInterval</code></h3>
     <p>
         In <code>buttonsOnly</code> mode no direct text input is allowed, the text-input
         gets the attribute <code>readonly</code>. But the plus and minus buttons still allow to change the value.
@@ -254,13 +258,13 @@ $inputGross.on("change", function (event) {
         <code>form-control-lg</code>, and
         the resulting group gets the class <code>input-group-sm</code> or <code>input-group-lg</code>.</p>
     <p>
-        Small
-        <input class="form-control-sm" type="number" value="0.0" data-decimals="4" min="-1" max="1" step="0.0001"/>
+        <label for="inputSmall">Small</label>
+        <input id="inputSmall" class="form-control-sm" type="number" value="0.0" data-decimals="4" min="-1" max="1" step="0.0001"/>
     </p>
     <pre><code class="language-html">&lt;input class="form-control-sm" type="number" value="0.0" data-decimals="4" min="-1" max="1" step="0.0001"/></code></pre>
     <p>
-        Large
-        <input class="form-control-lg" type="number" value="1000000" data-decimals="0" min="0" max="2000000" step="1"/>
+        <label for="inputLarge">Large</label>
+        <input id="inputLarge" class="form-control-lg" type="number" value="1000000" data-decimals="0" min="0" max="2000000" step="1"/>
     </p>
     <pre><code class="language-html">&lt;input class="form-control-lg" type="number" value="1000000" data-decimals="0" min="0" max="2000000" step="1"/></code></pre>
@@ -304,15 +308,19 @@ $inputGross.on("change", function (event) {
         var $dataDecimalsInput = $("#dataDecimalsInput")
         var $minMaxTester = $("#minMaxTester")
         $minInput.on("change", function (event) {
+            console.log("on change", event)
             $minMaxTester.attr("min", $minInput.val())
         })
         $maxInput.on("change", function (event) {
+            console.log("on change", event)
             $minMaxTester.attr("max", $maxInput.val())
         })
         $stepInput.on("change", function (event) {
+            console.log("on change", event)
             $minMaxTester.attr("step", $stepInput.val())
         })
         $dataDecimalsInput.on("change", function (event) {
+            console.log("on change", event)
             $minMaxTester.attr("data-decimals", $dataDecimalsInput.val())
         })
     </script>
@@ -337,13 +345,13 @@ $dataDecimalsInput.on("change", function (event) {
     <h3>Prefix and Suffix</h3>
     <p>
-        Prefix
-        <input data-prefix="$" value="100.0" data-decimals="2" min="0" max="1000" step="0.1" type="number"/>
+        <label for="inputPrefix">Prefix</label>
+        <input id="inputPrefix" data-prefix="$" value="100.0" data-decimals="2" min="0" max="1000" step="0.1" type="number"/>
     </p>
     <pre><code class="language-html">&lt;input data-prefix="$" value="100.0" data-decimals="2" min="0" max="1000" step="0.1" type="number" /></code></pre>
     <p>
-        Suffix
-        <input data-suffix="°C" value="50" min="0" max="100" type="number"/>
+        <label for="inputSuffix">Suffix</label>
+        <input id="inputSuffix" data-suffix="°C" value="50" min="0" max="100" type="number"/>
     </p>
     <pre><code
             class="language-html">&lt;input data-suffix="°C" value="50" min="0" max="100" type="number" /></code></pre>
@@ -356,7 +364,7 @@ $dataDecimalsInput.on("change", function (event) {
     </p>
     <script>
         var $inputLoop = $("#inputLoop")
-        $inputLoop.on("change", function (event) {
+        $inputLoop.on("input", function(ignored) {
             var value = $inputLoop.val()
             value = (value < 0) ? 360 + parseInt(value, 10) : value % 360
             $inputLoop.val(value)
@@ -365,13 +373,13 @@ $dataDecimalsInput.on("change", function (event) {
     <pre><code class="language-html">&lt;input step="10" type="number" id="inputLoop" value="0" data-decimals="0" min="-10" max="360"/&gt;</code></pre>
     <p>"Loop" the value between 0 and 360 with the <code>change</code> event in JavaScript.</p>
     <pre><code class="language-javascript">var $inputLoop = $("#inputLoop")
-$inputLoop.on("change", function (event) {
+$inputLoop.on("input", function(event) {
     var value = $inputLoop.val()
     value = (value < 0) ? 360 + parseInt(value, 10) : value % 360
     $inputLoop.val(value)
 })</code></pre>
-    <h3>Custom Editors (<i>new!</i>)</h3>
+    <h3>Custom Editors</h3>
     <p>An Editor defines, how the input is parsed and rendered. The inputSpinner is shipped with some custom Editors in
         <code>/src/custom-editors.js</code>.</p>
@@ -393,15 +401,14 @@ $inputLoop.on("change", function (event) {
     <h4>TimeEditor</h4>
     <p>The <code>TimeEditor</code> renders the number as time in hours and minutes, separated by a colon.</p>
-    <p>
-        <input id="timeEditor" value="60" step="5"/>
-    <div>value: <span id="timeValue"></span></div>
-    </p>
+    <input id="timeEditor" value="60" step="5"/>
+    <div class="mt-1">value: <span id="timeValue"></span></div>
     <script>
         var $timeEditorInput = $("#timeEditor")
         $timeEditorInput.inputSpinner({editor: customEditors.TimeEditor})
         $("#timeValue").text($timeEditorInput.val())
-        $timeEditorInput.on("change", function (event) {
+        $timeEditorInput.on("input", function() {
             $("#timeValue").text($timeEditorInput.val())
         })
     </script>
@@ -470,9 +477,9 @@ $inputLoop.on("change", function (event) {
     </script>
     <div class="card my-5 border-info">
-        <a href="https://shaack.com/en/open-source-components">
+        <a href="https://shaack.com/works">
             <div class="card-body">
-                <h4 class="mb-2">More Bootstrap components (from shaack.com)</h4>
+                <h4 class="mb-2 mt-0">More Bootstrap components (from shaack.com)</h4>
                 You may want to check out our further Bootstrap extensions,
                 <b>bootstrap-show-modal</b> and
                 <b>bootstrap-detect-breakpoint</b>.
@@ -489,4 +496,4 @@ $inputLoop.on("change", function (event) {
     $(".buttons-only").inputSpinner({buttonsOnly: true, autoInterval: undefined })
 </script>
 </body>
-</html>
+</html>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "bootstrap-input-spinner",
-  "version": "3.1.3",
+  "version": "3.1.8",
   "description": "A Bootstrap 5 / jQuery plugin to create input spinner elements for number input.",
   "browser": "./src/bootstrap-input-spinner.js",
   "scripts": {

package/src/bootstrap-input-spinner.js CHANGED Viewed

@@ -124,6 +124,7 @@
                 updateAttributes()
                 var value = parseFloat($original[0].value)
+                var pointerState = false
                 var prefix = $original.attr("data-prefix") || ""
                 var suffix = $original.attr("data-suffix") || ""
@@ -182,19 +183,26 @@
                     }
                 })
+                // decrement button
                 onPointerDown($buttonDecrement[0], function () {
                     if (!$buttonDecrement.prop("disabled")) {
+                        pointerState = true
                         stepHandling(-step)
                     }
                 })
+                // increment button
                 onPointerDown($buttonIncrement[0], function () {
                     if (!$buttonIncrement.prop("disabled")) {
+                        pointerState = true
                         stepHandling(step)
                     }
                 })
                 onPointerUp(document.body, function () {
-                    resetTimer()
-                    dispatchEvent($original, "change")
+                    if(pointerState === true) {
+                        resetTimer()
+                        dispatchEvent($original, "change")
+                        pointerState = false
+                    }
                 })
             }

package/test/index.html CHANGED Viewed

@@ -7,8 +7,8 @@
 </head>
 <body>
 <div id="testContainer"></div>
-<script src="../node_modules/jquery/dist/jquery.min.js"></script>
-<script src="../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
+<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
 <script src="../src/bootstrap-input-spinner.js"></script>
 <script type="module">
     import {teevi} from "../node_modules/teevi/src/teevi.js"