bootstrap-input-spinner 3.3.3 → 4.0.0

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 (14) hide show
  1. package/LICENSE +1 -1
  2. package/README.md +8 -7
  3. package/{index-es6-beta.html → es5-deprecated/index.html} +31 -57
  4. package/es5-deprecated/src/custom-editors.js +51 -0
  5. package/{test → es5-deprecated/test}/index.html +2 -2
  6. package/favicon.ico +0 -0
  7. package/index.html +53 -29
  8. package/package.json +3 -4
  9. /package/{src → es5-deprecated/src}/bootstrap-input-spinner.js +0 -0
  10. /package/{test → es5-deprecated/test}/Test.js +0 -0
  11. /package/{test → es5-deprecated/test}/test-pages/native-number-input.html +0 -0
  12. /package/{test → es5-deprecated/test}/test-pages/test-bug-98.html +0 -0
  13. /package/{test → es5-deprecated/test}/test-pages/test.css +0 -0
  14. /package/src/{es6-beta/InputSpinner.js → InputSpinner.js} +0 -0
package/LICENSE CHANGED
@@ -1,6 +1,6 @@
1
1
  MIT License
2
2
 
3
- Copyright (c) 2019 Stefan Haack - http://shaack.com
3
+ Copyright (c) 2024 Stefan Haack - http://shaack.com
4
4
 
5
5
  Permission is hereby granted, free of charge, to any person obtaining a copy
6
6
  of this software and associated documentation files (the "Software"), to deal
package/README.md CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  A Bootstrap / jQuery plugin to create input spinner elements for number input.
4
4
 
5
- > Note: With version 3.3 I added an ES6 module beta version under `src/es6-beta`. It is not yet documented, but there is a test page as `index-es6-beta.html`. With future versions I will move to ES6 modules and remove the jQuery dependency.
5
+ > Note: bootstrap-input-spinner is now a ES6 module. You find the old ES5 version under es5-deprecated. The ES5 version is not maintained anymore and will be removed in the future.
6
6
 
7
7
  **[Demo page with examples](http://shaack.com/projekte/bootstrap-input-spinner/)**
8
8
 
@@ -56,17 +56,18 @@ Create the element in HTML. The attributes are compatible to the native `input[t
56
56
 
57
57
  ### Script
58
58
 
59
- It is a jQuery plugin. So, enable the InputSpinner for all inputs with `type='number'` with the following script.
60
-
61
59
  ```html
60
+ <script type="module">
61
+ import {InputSpinner} from "./src/InputSpinner.js"
62
62
 
63
- <script src="src/bootstrap-input-spinner.js"></script>
64
- <script>
65
- $("input[type='number']").inputSpinner();
63
+ const inputSpinnerElements = document.querySelectorAll("input[type='number']")
64
+ for (const inputSpinnerElement of inputSpinnerElements) {
65
+ new InputSpinner(inputSpinnerElement)
66
+ }
66
67
  </script>
67
68
  ```
68
69
 
69
- That's it. **No extra css needed**, just Bootstrap 5 and jQuery.
70
+ That's it. **No extra css needed**, just Bootstrap 5 and jQuery. (Note: jQuery will be removed in the future)
70
71
 
71
72
  ## API Reference
72
73
 
package/{index-es6-beta.html → es5-deprecated/index.html} RENAMED
@@ -4,9 +4,8 @@
4
4
  <head>
5
5
  <meta charset="UTF-8">
6
6
  <title>bootstrap-input-spinner</title>
7
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css"
8
- integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
9
- <link rel="stylesheet" href="./node_modules/prismjs/themes/prism-tomorrow.css"/>
7
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
8
+ <link rel="stylesheet" href="../node_modules/prismjs/themes/prism-tomorrow.css"/>
10
9
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
11
10
  <style type="text/css">
12
11
  h2 {
@@ -23,13 +22,11 @@
23
22
  max-width: 250px;
24
23
  }
25
24
  </style>
26
- <script src="https://code.jquery.com/jquery-3.6.0.min.js"
27
- integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
28
- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"
29
- integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ"
30
- crossorigin="anonymous"></script>
31
- <script src="src/custom-editors.js"></script>
32
- <script src="./node_modules/prismjs/prism.js"></script>
25
+ <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
26
+ <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>
27
+ <script src="src/bootstrap-input-spinner.js"></script>
28
+ <script src="./src/custom-editors.js"></script>
29
+ <script src="../node_modules/prismjs/prism.js"></script>
33
30
  </head>
34
31
  <body>
35
32
  <section class="container py-5">
@@ -39,8 +36,7 @@
39
36
  <a href="https://shaack.com/en">shaack.com</a> engineering. For now it needs jQuery, but I am working on it.
40
37
  </p>
41
38
  <p>This version is compatible with Bootstrap 5, but we remain a Bootstrap 4 compatible version with the branch
42
- <a href="https://github.com/shaack/bootstrap-input-spinner/tree/bootstrap4-compatible">bootstrap4-compatible</a>.
43
- npm versions 3.x are Bootstrap 5 compatible, versions 2.x Bootstrap 4 compatible.</p>
39
+ <a href="https://github.com/shaack/bootstrap-input-spinner/tree/bootstrap4-compatible">bootstrap4-compatible</a>. npm versions 3.x are Bootstrap 5 compatible, versions 2.x Bootstrap 4 compatible.</p>
44
40
  <p>
45
41
  License: <a href="https://github.com/shaack/bootstrap-input-spinner/blob/master/LICENSE">MIT</a>
46
42
  </p>
@@ -79,7 +75,7 @@
79
75
  This script enables the InputSpinner for all inputs with <code>type='number'</code>.
80
76
  <b>No extra css needed</b>, just Bootstrap 5.
81
77
  </p>
82
- <pre><code class="language-html">&lt;script src="./src/InputSpinner.js">&lt;/script>
78
+ <pre><code class="language-html">&lt;script src="./src/bootstrap-input-spinner.js">&lt;/script>
83
79
  &lt;script>
84
80
  $("input[type='number']").inputSpinner()
85
81
  &lt;/script></code></pre>
@@ -223,18 +219,11 @@ $inputGross.on("input", function (event) {
223
219
  <p>
224
220
  In <code>buttonsOnly</code> mode no direct text input is allowed, the text-input
225
221
  gets the attribute <code>readonly</code>. But the plus and minus buttons still allow to change the value.
226
- <br/><code>autoInterval: undefined</code> additionally disables the auto increase/decrease, when you hold the
227
- button.
222
+ <br/><code>autoInterval: undefined</code> additionally disables the auto increase/decrease, when you hold the button.
228
223
  </p>
229
224
  <p>
230
- <input id="buttons-only" value="5" min="1" max="10"/>
225
+ <input class="buttons-only" value="5" min="1" max="10"/>
231
226
  </p>
232
- <script type="module">
233
- import {InputSpinner} from "./src/es6-beta/InputSpinner.js"
234
- const element = document.getElementById("buttons-only")
235
- new InputSpinner(element,
236
- {buttonsOnly: true, autoInterval: undefined})
237
- </script>
238
227
  <pre><code class="language-js">$(".buttons-only").inputSpinner({buttonsOnly: true, autoInterval: undefined})</code></pre>
239
228
 
240
229
  <h3>Dynamically handling of the <code>class</code> attribute</h3>
@@ -270,14 +259,12 @@ $inputGross.on("input", function (event) {
270
259
  the resulting group gets the class <code>input-group-sm</code> or <code>input-group-lg</code>.</p>
271
260
  <p>
272
261
  <label for="inputSmall">Small</label>
273
- <input id="inputSmall" class="form-control-sm" type="number" value="0.0" data-decimals="4" min="-1" max="1"
274
- step="0.0001"/>
262
+ <input id="inputSmall" class="form-control-sm" type="number" value="0.0" data-decimals="4" min="-1" max="1" step="0.0001"/>
275
263
  </p>
276
264
  <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>
277
265
  <p>
278
266
  <label for="inputLarge">Large</label>
279
- <input id="inputLarge" class="form-control-lg" type="number" value="1000000" data-decimals="0" min="0"
280
- max="2000000" step="1"/>
267
+ <input id="inputLarge" class="form-control-lg" type="number" value="1000000" data-decimals="0" min="0" max="2000000" step="1"/>
281
268
  </p>
282
269
  <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>
283
270
 
@@ -359,8 +346,7 @@ $dataDecimalsInput.on("change", function (event) {
359
346
  <h3>Prefix and Suffix</h3>
360
347
  <p>
361
348
  <label for="inputPrefix">Prefix</label>
362
- <input id="inputPrefix" data-prefix="$" value="100.0" data-decimals="2" min="0" max="1000" step="0.1"
363
- type="number"/>
349
+ <input id="inputPrefix" data-prefix="$" value="100.0" data-decimals="2" min="0" max="1000" step="0.1" type="number"/>
364
350
  </p>
365
351
  <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>
366
352
  <p>
@@ -378,7 +364,7 @@ $dataDecimalsInput.on("change", function (event) {
378
364
  </p>
379
365
  <script>
380
366
  var $inputLoop = $("#inputLoop")
381
- $inputLoop.on("input", function (ignored) {
367
+ $inputLoop.on("input", function(ignored) {
382
368
  var value = $inputLoop.val()
383
369
  value = (value < 0) ? 360 + parseInt(value, 10) : value % 360
384
370
  $inputLoop.val(value)
@@ -406,11 +392,8 @@ $inputLoop.on("input", function(event) {
406
392
  <p>
407
393
  <input id="rawEditor" value="1000"/>
408
394
  </p>
409
- <script type="module">
410
- import {InputSpinner} from "./src/es6-beta/InputSpinner.js"
411
-
412
- new InputSpinner(document.getElementById("rawEditor"),
413
- {editor: customEditors.RawEditor})
395
+ <script>
396
+ $("#rawEditor").inputSpinner({editor: customEditors.RawEditor})
414
397
  </script>
415
398
  <pre><code
416
399
  class="language-js">$("#rawEditor").inputSpinner({editor: customEditors.RawEditor})</code></pre>
@@ -420,15 +403,14 @@ $inputLoop.on("input", function(event) {
420
403
  <p>The <code>TimeEditor</code> renders the number as time in hours and minutes, separated by a colon.</p>
421
404
  <input id="timeEditor" value="60" step="5"/>
422
405
  <div class="mt-1">value: <span id="timeValue"></span></div>
423
- <script type="module">
424
- import {InputSpinner} from "./src/es6-beta/InputSpinner.js"
425
406
 
426
- const element = document.getElementById("timeEditor")
427
- new InputSpinner(element, {editor: customEditors.TimeEditor})
428
- element.addEventListener("input", () => {
429
- document.getElementById("timeValue").textContent = element.value
407
+ <script>
408
+ var $timeEditorInput = $("#timeEditor")
409
+ $timeEditorInput.inputSpinner({editor: customEditors.TimeEditor})
410
+ $("#timeValue").text($timeEditorInput.val())
411
+ $timeEditorInput.on("input", function() {
412
+ $("#timeValue").text($timeEditorInput.val())
430
413
  })
431
- document.getElementById("timeValue").textContent = element.value
432
414
  </script>
433
415
  <pre><code
434
416
  class="language-js">$("#rawEditor").inputSpinner({editor: customEditors.TimeEditor})</code></pre>
@@ -442,11 +424,8 @@ $inputLoop.on("input", function(event) {
442
424
  <p>
443
425
  This is the template for "buttons right":
444
426
  </p>
445
- <script type="module">
446
- import {InputSpinner} from "./src/es6-beta/InputSpinner.js"
447
-
448
- const element = document.getElementById("templateButtonsRight")
449
- new InputSpinner(element, {
427
+ <script>
428
+ $("#templateButtonsRight").inputSpinner({
450
429
  template:
451
430
  '<div class="input-group ${groupClass}">' +
452
431
  '<input type="text" inputmode="decimal" style="text-align: ${textAlign}" class="form-control"/>' +
@@ -481,18 +460,17 @@ $inputLoop.on("input", function(event) {
481
460
  </div>
482
461
  <button id="buttonDestroy" class="btn btn-primary">destroy</button>
483
462
  <button id="buttonCreate" disabled="disabled" class="btn btn-primary">re-create</button>
484
- <script type="module">
485
- import {InputSpinner} from "./src/es6-beta/InputSpinner.js"
463
+ <script>
486
464
  var $buttonDestroy = $("#buttonDestroy")
487
465
  var $buttonCreate = $("#buttonCreate")
488
466
  var $inputDestroyCreate = $("#inputDestroyCreate")
489
467
  $buttonDestroy.click(function () {
490
- $inputDestroyCreate[0].destroyInputSpinner()
468
+ $inputDestroyCreate.inputSpinner("destroy")
491
469
  $buttonDestroy.attr("disabled", true)
492
470
  $buttonCreate.attr("disabled", false)
493
471
  })
494
472
  $buttonCreate.click(function () {
495
- new InputSpinner($inputDestroyCreate[0])
473
+ $inputDestroyCreate.inputSpinner()
496
474
  $buttonDestroy.attr("disabled", false)
497
475
  $buttonCreate.attr("disabled", true)
498
476
  })
@@ -513,13 +491,9 @@ $inputLoop.on("input", function(event) {
513
491
  <br/><br/>
514
492
  </section>
515
493
  <!-- bootstrap needs jQuery -->
516
- <script type="module">
517
- import {InputSpinner} from "./src/es6-beta/InputSpinner.js"
518
-
519
- const inputSpinnerElements = document.querySelectorAll("input[type='number']")
520
- for (const inputSpinnerElement of inputSpinnerElements) {
521
- new InputSpinner(inputSpinnerElement)
522
- }
494
+ <script>
495
+ $("input[type='number']").inputSpinner()
496
+ $(".buttons-only").inputSpinner({buttonsOnly: true, autoInterval: undefined })
523
497
  </script>
524
498
  </body>
525
499
  </html>
package/es5-deprecated/src/custom-editors.js ADDED
@@ -0,0 +1,51 @@
1
+ /**
2
+ * Author and copyright: Stefan Haack (https://shaack.com)
3
+ * Repository: https://github.com/shaack/bootstrap-input-spinner
4
+ * License: MIT, see file 'LICENSE'
5
+ */
6
+ const customEditors = {
7
+ RawEditor: function (props, element) {
8
+ this.parse = function (customFormat) {
9
+ // parse nothing
10
+ return customFormat
11
+ }
12
+ this.render = function (number) {
13
+ // render raw
14
+ return number
15
+ }
16
+ },
17
+ TimeEditor: function (props, element) {
18
+ // could be implemented more elegant maybe, but works
19
+ this.parse = function (customFormat) {
20
+ let trimmed = customFormat.trim()
21
+ let sign = 1
22
+ if (trimmed.charAt(0) === "-") {
23
+ sign = -1
24
+ trimmed = trimmed.replace("-", "")
25
+ }
26
+ const parts = trimmed.split(":")
27
+ let hours = 0, minutes
28
+ if (parts[1]) {
29
+ hours = parseInt(parts[0], 10)
30
+ minutes = parseInt(parts[1], 10)
31
+ } else {
32
+ minutes = parseInt(parts[0], 10)
33
+ }
34
+ return (hours * 60 + minutes) * sign
35
+ }
36
+ this.render = function (number) {
37
+ let minutes = Math.abs(number % 60)
38
+ if (minutes < 10) {
39
+ minutes = "0" + minutes
40
+ }
41
+ let hours
42
+ if (number >= 0) {
43
+ hours = Math.floor(number / 60)
44
+ return hours + ":" + minutes
45
+ } else {
46
+ hours = Math.ceil(number / 60)
47
+ return "-" + Math.abs(hours) + ":" + minutes
48
+ }
49
+ }
50
+ }
51
+ }
package/{test → es5-deprecated/test}/index.html RENAMED
@@ -11,9 +11,9 @@
11
11
  <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>
12
12
  <script src="../src/bootstrap-input-spinner.js"></script>
13
13
  <script type="module">
14
- import {teevi} from "../node_modules/teevi/src/teevi.js"
14
+ import {teevi} from "../../node_modules/teevi/src/teevi.js"
15
15
  import "./Test.js"
16
16
  teevi.run()
17
17
  </script>
18
18
  </body>
19
- </html>
19
+ </html>
package/favicon.ico CHANGED
Binary file
package/index.html CHANGED
@@ -4,10 +4,10 @@
4
4
  <head>
5
5
  <meta charset="UTF-8">
6
6
  <title>bootstrap-input-spinner</title>
7
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
7
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
8
8
  <link rel="stylesheet" href="./node_modules/prismjs/themes/prism-tomorrow.css"/>
9
9
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
10
- <style type="text/css">
10
+ <style>
11
11
  h2 {
12
12
  margin-top: 3rem;
13
13
  margin-bottom: 1rem;
@@ -22,9 +22,10 @@
22
22
  max-width: 250px;
23
23
  }
24
24
  </style>
25
- <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
26
- <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>
27
- <script src="src/bootstrap-input-spinner.js"></script>
25
+ <!-- TODO remove jQuery -->
26
+ <script src="https://code.jquery.com/jquery-3.6.0.min.js"
27
+ integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
28
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
28
29
  <script src="src/custom-editors.js"></script>
29
30
  <script src="./node_modules/prismjs/prism.js"></script>
30
31
  </head>
@@ -36,7 +37,8 @@
36
37
  <a href="https://shaack.com/en">shaack.com</a> engineering. For now it needs jQuery, but I am working on it.
37
38
  </p>
38
39
  <p>This version is compatible with Bootstrap 5, but we remain a Bootstrap 4 compatible version with the branch
39
- <a href="https://github.com/shaack/bootstrap-input-spinner/tree/bootstrap4-compatible">bootstrap4-compatible</a>. npm versions 3.x are Bootstrap 5 compatible, versions 2.x Bootstrap 4 compatible.</p>
40
+ <a href="https://github.com/shaack/bootstrap-input-spinner/tree/bootstrap4-compatible">bootstrap4-compatible</a>.
41
+ npm versions 3.x are Bootstrap 5 compatible, versions 2.x Bootstrap 4 compatible.</p>
40
42
  <p>
41
43
  License: <a href="https://github.com/shaack/bootstrap-input-spinner/blob/master/LICENSE">MIT</a>
42
44
  </p>
@@ -75,7 +77,7 @@
75
77
  This script enables the InputSpinner for all inputs with <code>type='number'</code>.
76
78
  <b>No extra css needed</b>, just Bootstrap 5.
77
79
  </p>
78
- <pre><code class="language-html">&lt;script src="./src/bootstrap-input-spinner.js">&lt;/script>
80
+ <pre><code class="language-html">&lt;script src="./src/InputSpinner.js">&lt;/script>
79
81
  &lt;script>
80
82
  $("input[type='number']").inputSpinner()
81
83
  &lt;/script></code></pre>
@@ -219,11 +221,18 @@ $inputGross.on("input", function (event) {
219
221
  <p>
220
222
  In <code>buttonsOnly</code> mode no direct text input is allowed, the text-input
221
223
  gets the attribute <code>readonly</code>. But the plus and minus buttons still allow to change the value.
222
- <br/><code>autoInterval: undefined</code> additionally disables the auto increase/decrease, when you hold the button.
224
+ <br/><code>autoInterval: undefined</code> additionally disables the auto increase/decrease, when you hold the
225
+ button.
223
226
  </p>
224
227
  <p>
225
- <input class="buttons-only" value="5" min="1" max="10"/>
228
+ <input id="buttons-only" value="5" min="1" max="10"/>
226
229
  </p>
230
+ <script type="module">
231
+ import {InputSpinner} from "./src/InputSpinner.js"
232
+ const element = document.getElementById("buttons-only")
233
+ new InputSpinner(element,
234
+ {buttonsOnly: true, autoInterval: undefined})
235
+ </script>
227
236
  <pre><code class="language-js">$(".buttons-only").inputSpinner({buttonsOnly: true, autoInterval: undefined})</code></pre>
228
237
 
229
238
  <h3>Dynamically handling of the <code>class</code> attribute</h3>
@@ -259,12 +268,14 @@ $inputGross.on("input", function (event) {
259
268
  the resulting group gets the class <code>input-group-sm</code> or <code>input-group-lg</code>.</p>
260
269
  <p>
261
270
  <label for="inputSmall">Small</label>
262
- <input id="inputSmall" class="form-control-sm" type="number" value="0.0" data-decimals="4" min="-1" max="1" step="0.0001"/>
271
+ <input id="inputSmall" class="form-control-sm" type="number" value="0.0" data-decimals="4" min="-1" max="1"
272
+ step="0.0001"/>
263
273
  </p>
264
274
  <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>
265
275
  <p>
266
276
  <label for="inputLarge">Large</label>
267
- <input id="inputLarge" class="form-control-lg" type="number" value="1000000" data-decimals="0" min="0" max="2000000" step="1"/>
277
+ <input id="inputLarge" class="form-control-lg" type="number" value="1000000" data-decimals="0" min="0"
278
+ max="2000000" step="1"/>
268
279
  </p>
269
280
  <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>
270
281
 
@@ -346,7 +357,8 @@ $dataDecimalsInput.on("change", function (event) {
346
357
  <h3>Prefix and Suffix</h3>
347
358
  <p>
348
359
  <label for="inputPrefix">Prefix</label>
349
- <input id="inputPrefix" data-prefix="$" value="100.0" data-decimals="2" min="0" max="1000" step="0.1" type="number"/>
360
+ <input id="inputPrefix" data-prefix="$" value="100.0" data-decimals="2" min="0" max="1000" step="0.1"
361
+ type="number"/>
350
362
  </p>
351
363
  <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>
352
364
  <p>
@@ -364,7 +376,7 @@ $dataDecimalsInput.on("change", function (event) {
364
376
  </p>
365
377
  <script>
366
378
  var $inputLoop = $("#inputLoop")
367
- $inputLoop.on("input", function(ignored) {
379
+ $inputLoop.on("input", function (ignored) {
368
380
  var value = $inputLoop.val()
369
381
  value = (value < 0) ? 360 + parseInt(value, 10) : value % 360
370
382
  $inputLoop.val(value)
@@ -392,8 +404,11 @@ $inputLoop.on("input", function(event) {
392
404
  <p>
393
405
  <input id="rawEditor" value="1000"/>
394
406
  </p>
395
- <script>
396
- $("#rawEditor").inputSpinner({editor: customEditors.RawEditor})
407
+ <script type="module">
408
+ import {InputSpinner} from "./src/InputSpinner.js"
409
+
410
+ new InputSpinner(document.getElementById("rawEditor"),
411
+ {editor: customEditors.RawEditor})
397
412
  </script>
398
413
  <pre><code
399
414
  class="language-js">$("#rawEditor").inputSpinner({editor: customEditors.RawEditor})</code></pre>
@@ -403,14 +418,15 @@ $inputLoop.on("input", function(event) {
403
418
  <p>The <code>TimeEditor</code> renders the number as time in hours and minutes, separated by a colon.</p>
404
419
  <input id="timeEditor" value="60" step="5"/>
405
420
  <div class="mt-1">value: <span id="timeValue"></span></div>
421
+ <script type="module">
422
+ import {InputSpinner} from "./src/InputSpinner.js"
406
423
 
407
- <script>
408
- var $timeEditorInput = $("#timeEditor")
409
- $timeEditorInput.inputSpinner({editor: customEditors.TimeEditor})
410
- $("#timeValue").text($timeEditorInput.val())
411
- $timeEditorInput.on("input", function() {
412
- $("#timeValue").text($timeEditorInput.val())
424
+ const element = document.getElementById("timeEditor")
425
+ new InputSpinner(element, {editor: customEditors.TimeEditor})
426
+ element.addEventListener("input", () => {
427
+ document.getElementById("timeValue").textContent = element.value
413
428
  })
429
+ document.getElementById("timeValue").textContent = element.value
414
430
  </script>
415
431
  <pre><code
416
432
  class="language-js">$("#rawEditor").inputSpinner({editor: customEditors.TimeEditor})</code></pre>
@@ -424,8 +440,11 @@ $inputLoop.on("input", function(event) {
424
440
  <p>
425
441
  This is the template for "buttons right":
426
442
  </p>
427
- <script>
428
- $("#templateButtonsRight").inputSpinner({
443
+ <script type="module">
444
+ import {InputSpinner} from "./src/InputSpinner.js"
445
+
446
+ const element = document.getElementById("templateButtonsRight")
447
+ new InputSpinner(element, {
429
448
  template:
430
449
  '<div class="input-group ${groupClass}">' +
431
450
  '<input type="text" inputmode="decimal" style="text-align: ${textAlign}" class="form-control"/>' +
@@ -460,17 +479,18 @@ $inputLoop.on("input", function(event) {
460
479
  </div>
461
480
  <button id="buttonDestroy" class="btn btn-primary">destroy</button>
462
481
  <button id="buttonCreate" disabled="disabled" class="btn btn-primary">re-create</button>
463
- <script>
482
+ <script type="module">
483
+ import {InputSpinner} from "./src/InputSpinner.js"
464
484
  var $buttonDestroy = $("#buttonDestroy")
465
485
  var $buttonCreate = $("#buttonCreate")
466
486
  var $inputDestroyCreate = $("#inputDestroyCreate")
467
487
  $buttonDestroy.click(function () {
468
- $inputDestroyCreate.inputSpinner("destroy")
488
+ $inputDestroyCreate[0].destroyInputSpinner()
469
489
  $buttonDestroy.attr("disabled", true)
470
490
  $buttonCreate.attr("disabled", false)
471
491
  })
472
492
  $buttonCreate.click(function () {
473
- $inputDestroyCreate.inputSpinner()
493
+ new InputSpinner($inputDestroyCreate[0])
474
494
  $buttonDestroy.attr("disabled", false)
475
495
  $buttonCreate.attr("disabled", true)
476
496
  })
@@ -491,9 +511,13 @@ $inputLoop.on("input", function(event) {
491
511
  <br/><br/>
492
512
  </section>
493
513
  <!-- bootstrap needs jQuery -->
494
- <script>
495
- $("input[type='number']").inputSpinner()
496
- $(".buttons-only").inputSpinner({buttonsOnly: true, autoInterval: undefined })
514
+ <script type="module">
515
+ import {InputSpinner} from "./src/InputSpinner.js"
516
+
517
+ const inputSpinnerElements = document.querySelectorAll("input[type='number']")
518
+ for (const inputSpinnerElement of inputSpinnerElements) {
519
+ new InputSpinner(inputSpinnerElement)
520
+ }
497
521
  </script>
498
522
  </body>
499
523
  </html>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "bootstrap-input-spinner",
3
- "version": "3.3.3",
3
+ "version": "4.0.0",
4
4
  "description": "A Bootstrap 5 / jQuery plugin to create input spinner elements for number input.",
5
5
  "browser": "./src/bootstrap-input-spinner.js",
6
6
  "scripts": {
@@ -13,7 +13,6 @@
13
13
  "keywords": [
14
14
  "Bootstrap 5",
15
15
  "Bootstrap",
16
- "jQuery",
17
16
  "Widget",
18
17
  "Html",
19
18
  "Input",
@@ -26,7 +25,7 @@
26
25
  },
27
26
  "homepage": "https://shaack.com/en/open-source-components",
28
27
  "devDependencies": {
29
- "prismjs": "^1.27.0",
30
- "teevi": "^2.1.10"
28
+ "prismjs": "^1.29.0",
29
+ "teevi": "^2.2.4"
31
30
  }
32
31
  }
/package/{test → es5-deprecated/test}/Test.js RENAMED
File without changes