bootstrap-input-spinner 3.1.0 → 3.1.5
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.
- package/README.md +1 -1
- package/index.html +24 -18
- package/package.json +1 -6
- package/src/bootstrap-input-spinner.js +10 -5
- package/test/index.html +2 -2
package/README.md
CHANGED
package/index.html
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
<!DOCTYPE html>
|
|
2
|
+
<!--suppress HtmlFormInputWithoutLabel -->
|
|
2
3
|
<html lang="en">
|
|
3
4
|
<head>
|
|
4
5
|
<meta charset="UTF-8">
|
|
5
6
|
<title>bootstrap-input-spinner</title>
|
|
6
|
-
<link rel="stylesheet" href="
|
|
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
8
|
<link rel="stylesheet" href="./node_modules/prismjs/themes/prism-tomorrow.css"/>
|
|
8
9
|
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
|
9
10
|
<style type="text/css">
|
|
@@ -13,7 +14,7 @@
|
|
|
13
14
|
border-bottom: 1px solid rgba(0, 0, 0, 0.5);
|
|
14
15
|
}
|
|
15
16
|
|
|
16
|
-
h3 {
|
|
17
|
+
h3, h4 {
|
|
17
18
|
margin-top: 2rem;
|
|
18
19
|
}
|
|
19
20
|
|
|
@@ -21,8 +22,8 @@
|
|
|
21
22
|
max-width: 250px;
|
|
22
23
|
}
|
|
23
24
|
</style>
|
|
24
|
-
<script src="
|
|
25
|
-
<script src="
|
|
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>
|
|
26
27
|
<script src="src/bootstrap-input-spinner.js"></script>
|
|
27
28
|
<script src="src/custom-editors.js"></script>
|
|
28
29
|
<script src="./node_modules/prismjs/prism.js"></script>
|
|
@@ -122,11 +123,13 @@
|
|
|
122
123
|
var $valueOnInput = $("#valueOnInput")
|
|
123
124
|
var $valueOnChange = $("#valueOnChange")
|
|
124
125
|
$changedInput.on("input", function (event) {
|
|
126
|
+
console.log("on input", event)
|
|
125
127
|
$valueOnInput.html($(event.target).val())
|
|
126
128
|
// or $valueOnInput.html(event.target.value) // in vanilla js
|
|
127
129
|
// or $valueOnInput.html($changedInput.val())
|
|
128
130
|
})
|
|
129
131
|
$changedInput.on("change", function (event) {
|
|
132
|
+
console.log("on change", event)
|
|
130
133
|
$valueOnChange.html($(event.target).val())
|
|
131
134
|
})
|
|
132
135
|
</script>
|
|
@@ -153,21 +156,21 @@ $changedInput.on("change", function (event) {
|
|
|
153
156
|
<script>
|
|
154
157
|
var $inputNet = $("#inputNet")
|
|
155
158
|
var $inputGross = $("#inputGross")
|
|
156
|
-
$inputNet.on("
|
|
159
|
+
$inputNet.on("input", function (event) {
|
|
157
160
|
$inputGross.val($(event.target).val() * 1.19)
|
|
158
161
|
})
|
|
159
|
-
$inputGross.on("
|
|
162
|
+
$inputGross.on("input", function (event) {
|
|
160
163
|
$inputNet.val($(event.target).val() / 1.19)
|
|
161
164
|
})
|
|
162
165
|
$inputGross.val($inputNet.val() * 1.19)
|
|
163
166
|
</script>
|
|
164
|
-
<pre><code class="language-javascript">$inputNet.on("
|
|
167
|
+
<pre><code class="language-javascript">$inputNet.on("input", function (event) {
|
|
165
168
|
$inputGross.val($(event.target).val() * 1.19)
|
|
166
169
|
// or $inputGross[0].setValue(event.target.value * 1.19) // in vanilla js
|
|
167
170
|
// or $inputGross.val($inputNet.val() * 1.19)
|
|
168
171
|
// do all the same
|
|
169
172
|
})
|
|
170
|
-
$inputGross.on("
|
|
173
|
+
$inputGross.on("input", function (event) {
|
|
171
174
|
$inputNet.val($(event.target).val() / 1.19)
|
|
172
175
|
})</code></pre>
|
|
173
176
|
<h3>Attributes <code>placeholder</code> and <code>required</code></h3>
|
|
@@ -211,7 +214,7 @@ $inputGross.on("change", function (event) {
|
|
|
211
214
|
</script></code></pre>
|
|
212
215
|
</form>
|
|
213
216
|
|
|
214
|
-
<h3><code>buttonsOnly</code> mode
|
|
217
|
+
<h3><code>buttonsOnly</code> mode and disabled <code>autoInterval</code></h3>
|
|
215
218
|
<p>
|
|
216
219
|
In <code>buttonsOnly</code> mode no direct text input is allowed, the text-input
|
|
217
220
|
gets the attribute <code>readonly</code>. But the plus and minus buttons still allow to change the value.
|
|
@@ -304,15 +307,19 @@ $inputGross.on("change", function (event) {
|
|
|
304
307
|
var $dataDecimalsInput = $("#dataDecimalsInput")
|
|
305
308
|
var $minMaxTester = $("#minMaxTester")
|
|
306
309
|
$minInput.on("change", function (event) {
|
|
310
|
+
console.log("on change", event)
|
|
307
311
|
$minMaxTester.attr("min", $minInput.val())
|
|
308
312
|
})
|
|
309
313
|
$maxInput.on("change", function (event) {
|
|
314
|
+
console.log("on change", event)
|
|
310
315
|
$minMaxTester.attr("max", $maxInput.val())
|
|
311
316
|
})
|
|
312
317
|
$stepInput.on("change", function (event) {
|
|
318
|
+
console.log("on change", event)
|
|
313
319
|
$minMaxTester.attr("step", $stepInput.val())
|
|
314
320
|
})
|
|
315
321
|
$dataDecimalsInput.on("change", function (event) {
|
|
322
|
+
console.log("on change", event)
|
|
316
323
|
$minMaxTester.attr("data-decimals", $dataDecimalsInput.val())
|
|
317
324
|
})
|
|
318
325
|
</script>
|
|
@@ -356,7 +363,7 @@ $dataDecimalsInput.on("change", function (event) {
|
|
|
356
363
|
</p>
|
|
357
364
|
<script>
|
|
358
365
|
var $inputLoop = $("#inputLoop")
|
|
359
|
-
$inputLoop.on("
|
|
366
|
+
$inputLoop.on("input", function(ignored) {
|
|
360
367
|
var value = $inputLoop.val()
|
|
361
368
|
value = (value < 0) ? 360 + parseInt(value, 10) : value % 360
|
|
362
369
|
$inputLoop.val(value)
|
|
@@ -365,13 +372,13 @@ $dataDecimalsInput.on("change", function (event) {
|
|
|
365
372
|
<pre><code class="language-html"><input step="10" type="number" id="inputLoop" value="0" data-decimals="0" min="-10" max="360"/></code></pre>
|
|
366
373
|
<p>"Loop" the value between 0 and 360 with the <code>change</code> event in JavaScript.</p>
|
|
367
374
|
<pre><code class="language-javascript">var $inputLoop = $("#inputLoop")
|
|
368
|
-
$inputLoop.on("
|
|
375
|
+
$inputLoop.on("input", function(event) {
|
|
369
376
|
var value = $inputLoop.val()
|
|
370
377
|
value = (value < 0) ? 360 + parseInt(value, 10) : value % 360
|
|
371
378
|
$inputLoop.val(value)
|
|
372
379
|
})</code></pre>
|
|
373
380
|
|
|
374
|
-
<h3>Custom Editors
|
|
381
|
+
<h3>Custom Editors</h3>
|
|
375
382
|
|
|
376
383
|
<p>An Editor defines, how the input is parsed and rendered. The inputSpinner is shipped with some custom Editors in
|
|
377
384
|
<code>/src/custom-editors.js</code>.</p>
|
|
@@ -393,15 +400,14 @@ $inputLoop.on("change", function (event) {
|
|
|
393
400
|
<h4>TimeEditor</h4>
|
|
394
401
|
|
|
395
402
|
<p>The <code>TimeEditor</code> renders the number as time in hours and minutes, separated by a colon.</p>
|
|
396
|
-
<
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
</p>
|
|
403
|
+
<input id="timeEditor" value="60" step="5"/>
|
|
404
|
+
<div class="mt-1">value: <span id="timeValue"></span></div>
|
|
405
|
+
|
|
400
406
|
<script>
|
|
401
407
|
var $timeEditorInput = $("#timeEditor")
|
|
402
408
|
$timeEditorInput.inputSpinner({editor: customEditors.TimeEditor})
|
|
403
409
|
$("#timeValue").text($timeEditorInput.val())
|
|
404
|
-
$timeEditorInput.on("
|
|
410
|
+
$timeEditorInput.on("input", function() {
|
|
405
411
|
$("#timeValue").text($timeEditorInput.val())
|
|
406
412
|
})
|
|
407
413
|
</script>
|
|
@@ -472,7 +478,7 @@ $inputLoop.on("change", function (event) {
|
|
|
472
478
|
<div class="card my-5 border-info">
|
|
473
479
|
<a href="https://shaack.com/en/open-source-components">
|
|
474
480
|
<div class="card-body">
|
|
475
|
-
<h4 class="mb-2">More Bootstrap components (from shaack.com)</h4>
|
|
481
|
+
<h4 class="mb-2 mt-0">More Bootstrap components (from shaack.com)</h4>
|
|
476
482
|
You may want to check out our further Bootstrap extensions,
|
|
477
483
|
<b>bootstrap-show-modal</b> and
|
|
478
484
|
<b>bootstrap-detect-breakpoint</b>.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "bootstrap-input-spinner",
|
|
3
|
-
"version": "3.1.
|
|
3
|
+
"version": "3.1.5",
|
|
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": {
|
|
@@ -25,11 +25,6 @@
|
|
|
25
25
|
"url": "https://github.com/shaack/bootstrap-input-spinner/issues"
|
|
26
26
|
},
|
|
27
27
|
"homepage": "https://shaack.com/en/open-source-components",
|
|
28
|
-
"dependencies": {
|
|
29
|
-
"bootstrap": "^5.1.1",
|
|
30
|
-
"jquery": "^3.6.0",
|
|
31
|
-
"popper.js": "^1.16.1"
|
|
32
|
-
},
|
|
33
28
|
"devDependencies": {
|
|
34
29
|
"prismjs": "^1.25.0",
|
|
35
30
|
"teevi": "^2.1.10"
|
|
@@ -124,6 +124,7 @@
|
|
|
124
124
|
updateAttributes()
|
|
125
125
|
|
|
126
126
|
var value = parseFloat($original[0].value)
|
|
127
|
+
var pointerState = false
|
|
127
128
|
|
|
128
129
|
var prefix = $original.attr("data-prefix") || ""
|
|
129
130
|
var suffix = $original.attr("data-suffix") || ""
|
|
@@ -182,19 +183,26 @@
|
|
|
182
183
|
}
|
|
183
184
|
})
|
|
184
185
|
|
|
186
|
+
// decrement button
|
|
185
187
|
onPointerDown($buttonDecrement[0], function () {
|
|
186
188
|
if (!$buttonDecrement.prop("disabled")) {
|
|
189
|
+
pointerState = true
|
|
187
190
|
stepHandling(-step)
|
|
188
191
|
}
|
|
189
192
|
})
|
|
193
|
+
// increment button
|
|
190
194
|
onPointerDown($buttonIncrement[0], function () {
|
|
191
195
|
if (!$buttonIncrement.prop("disabled")) {
|
|
196
|
+
pointerState = true
|
|
192
197
|
stepHandling(step)
|
|
193
198
|
}
|
|
194
199
|
})
|
|
195
200
|
onPointerUp(document.body, function () {
|
|
196
|
-
|
|
197
|
-
|
|
201
|
+
if(pointerState === true) {
|
|
202
|
+
resetTimer()
|
|
203
|
+
dispatchEvent($original, "change")
|
|
204
|
+
pointerState = false
|
|
205
|
+
}
|
|
198
206
|
})
|
|
199
207
|
}
|
|
200
208
|
|
|
@@ -211,10 +219,8 @@
|
|
|
211
219
|
} else {
|
|
212
220
|
newValue = parseFloat(newValue)
|
|
213
221
|
newValue = Math.min(Math.max(newValue, min), max)
|
|
214
|
-
// newValue = Math.round(newValue * Math.pow(10, decimals)) / Math.pow(10, decimals)
|
|
215
222
|
$original[0].value = newValue
|
|
216
223
|
if (updateInput) {
|
|
217
|
-
// $input[0].value = numberFormat.format(newValue)
|
|
218
224
|
$input[0].value = $original[0].inputSpinnerEditor.render(newValue)
|
|
219
225
|
}
|
|
220
226
|
value = newValue
|
|
@@ -267,7 +273,6 @@
|
|
|
267
273
|
}
|
|
268
274
|
setValue(Math.round(value / step) * step + step)
|
|
269
275
|
dispatchEvent($original, "input")
|
|
270
|
-
// dispatchEvent($original, "change")
|
|
271
276
|
}
|
|
272
277
|
|
|
273
278
|
function resetTimer() {
|
package/test/index.html
CHANGED
|
@@ -7,8 +7,8 @@
|
|
|
7
7
|
</head>
|
|
8
8
|
<body>
|
|
9
9
|
<div id="testContainer"></div>
|
|
10
|
-
<script src="
|
|
11
|
-
<script src="
|
|
10
|
+
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
|
|
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
14
|
import {teevi} from "../node_modules/teevi/src/teevi.js"
|