bootstrap-input-spinner 3.1.12 → 3.1.14
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 +2 -5
- package/package.json +1 -1
- package/src/bootstrap-input-spinner.js +31 -28
- package/src/custom-editors.js +8 -9
- package/test/test-pages/test-bug-98.html +4 -4
package/README.md
CHANGED
|
@@ -12,7 +12,7 @@ A Bootstrap / jQuery plugin to create input spinner elements for number input.
|
|
|
12
12
|
> npm package versions 3.x are Bootstrap 5 compatible, versions 2.x Bootstrap 4 compatible.
|
|
13
13
|
|
|
14
14
|
- **[Current, Bootstrap 5 compatible npm package](https://www.npmjs.com/package/bootstrap-input-spinner)**
|
|
15
|
-
- **[
|
|
15
|
+
- **[Bootstrap 4 compatible npm package](https://www.npmjs.com/package/bootstrap-input-spinner/v/2.1.2)**
|
|
16
16
|
|
|
17
17
|
## Features
|
|
18
18
|
|
|
@@ -282,7 +282,7 @@ Violà! :)
|
|
|
282
282
|
|
|
283
283
|
## Browser support
|
|
284
284
|
|
|
285
|
-
The spinner works in all modern browsers and
|
|
285
|
+
The spinner works in all modern browsers and Internet Explorer. Not tested with IE < 11.
|
|
286
286
|
|
|
287
287
|
For older browsers (IE 9 or so), that doesn't support `Intl`, when you get an error message like
|
|
288
288
|
**"Intl is not defined"** (See [issue #34](https://github.com/shaack/bootstrap-input-spinner/issues/34)), just use a
|
|
@@ -296,6 +296,3 @@ shim or polyfill like [Intl.js](https://github.com/andyearnshaw/Intl.js), and it
|
|
|
296
296
|
- [bootstrap-detect-breakpoint](https://www.npmjs.com/package/bootstrap-detect-breakpoint) – Read the curr. BS BP from JS
|
|
297
297
|
- [auto-resize-textarea](https://shaack.com/projekte/auto-resize-textarea/) – Auto resize textareas by its content
|
|
298
298
|
- [external-links-blank](https://www.npmjs.com/package/external-links-blank) – Open all external links `_blank`
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
package/package.json
CHANGED
|
@@ -8,13 +8,13 @@
|
|
|
8
8
|
"use strict"
|
|
9
9
|
|
|
10
10
|
// the default editor for parsing and rendering
|
|
11
|
-
|
|
12
|
-
|
|
11
|
+
const I18nEditor = function (props, element) {
|
|
12
|
+
const locale = props.locale || "en-US"
|
|
13
13
|
|
|
14
14
|
this.parse = function (customFormat) {
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
15
|
+
const numberFormat = new Intl.NumberFormat(locale)
|
|
16
|
+
const thousandSeparator = numberFormat.format(11111).replace(/1/g, '') || '.'
|
|
17
|
+
const decimalSeparator = numberFormat.format(1.1).replace(/1/g, '')
|
|
18
18
|
return parseFloat(customFormat
|
|
19
19
|
.replace(new RegExp(' ', 'g'), '')
|
|
20
20
|
.replace(new RegExp('\\' + thousandSeparator, 'g'), '')
|
|
@@ -23,9 +23,9 @@
|
|
|
23
23
|
}
|
|
24
24
|
|
|
25
25
|
this.render = function (number) {
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
26
|
+
const decimals = parseInt(element.getAttribute("data-decimals")) || 0
|
|
27
|
+
const digitGrouping = !(element.getAttribute("data-digit-grouping") === "false")
|
|
28
|
+
const numberFormat = new Intl.NumberFormat(locale, {
|
|
29
29
|
minimumFractionDigits: decimals,
|
|
30
30
|
maximumFractionDigits: decimals,
|
|
31
31
|
useGrouping: digitGrouping
|
|
@@ -34,13 +34,16 @@
|
|
|
34
34
|
}
|
|
35
35
|
}
|
|
36
36
|
|
|
37
|
-
|
|
38
|
-
|
|
37
|
+
let triggerKeyPressed = false
|
|
38
|
+
const originalVal = $.fn.val
|
|
39
39
|
$.fn.val = function (value) {
|
|
40
40
|
if (arguments.length >= 1) {
|
|
41
|
-
for (
|
|
41
|
+
for (let i = 0; i < this.length; i++) {
|
|
42
42
|
if (this[i]["bootstrap-input-spinner"] && this[i].setValue) {
|
|
43
|
-
this[i]
|
|
43
|
+
const element = this[i]
|
|
44
|
+
setTimeout(function () {
|
|
45
|
+
element.setValue(value)
|
|
46
|
+
})
|
|
44
47
|
}
|
|
45
48
|
}
|
|
46
49
|
}
|
|
@@ -60,7 +63,7 @@
|
|
|
60
63
|
return this
|
|
61
64
|
}
|
|
62
65
|
|
|
63
|
-
|
|
66
|
+
const props = {
|
|
64
67
|
decrementButton: "<strong>−</strong>", // button text
|
|
65
68
|
incrementButton: "<strong>+</strong>", // ..
|
|
66
69
|
groupClass: "", // css class of the resulting input-group
|
|
@@ -81,12 +84,12 @@
|
|
|
81
84
|
'</div>'
|
|
82
85
|
}
|
|
83
86
|
|
|
84
|
-
for (
|
|
87
|
+
for (let option in methodOrProps) {
|
|
85
88
|
// noinspection JSUnfilteredForInLoop
|
|
86
89
|
props[option] = methodOrProps[option]
|
|
87
90
|
}
|
|
88
91
|
|
|
89
|
-
|
|
92
|
+
const html = props.template
|
|
90
93
|
.replace(/\${groupClass}/g, props.groupClass)
|
|
91
94
|
.replace(/\${buttonsWidth}/g, props.buttonsWidth)
|
|
92
95
|
.replace(/\${buttonsClass}/g, props.buttonsClass)
|
|
@@ -124,17 +127,17 @@
|
|
|
124
127
|
updateAttributes()
|
|
125
128
|
|
|
126
129
|
var value = parseFloat($original[0].value)
|
|
127
|
-
|
|
130
|
+
let pointerState = false
|
|
128
131
|
|
|
129
|
-
|
|
130
|
-
|
|
132
|
+
const prefix = $original.attr("data-prefix") || ""
|
|
133
|
+
const suffix = $original.attr("data-suffix") || ""
|
|
131
134
|
|
|
132
135
|
if (prefix) {
|
|
133
|
-
|
|
136
|
+
const prefixElement = $('<span class="input-group-text">' + prefix + '</span>')
|
|
134
137
|
$inputGroup.find("input").before(prefixElement)
|
|
135
138
|
}
|
|
136
139
|
if (suffix) {
|
|
137
|
-
|
|
140
|
+
const suffixElement = $('<span class="input-group-text">' + suffix + '</span>')
|
|
138
141
|
$inputGroup.find("input").after(suffixElement)
|
|
139
142
|
}
|
|
140
143
|
|
|
@@ -156,8 +159,8 @@
|
|
|
156
159
|
setValue(value)
|
|
157
160
|
|
|
158
161
|
$input.on("paste input change focusout", function (event) {
|
|
159
|
-
|
|
160
|
-
|
|
162
|
+
let newValue = $input[0].value
|
|
163
|
+
const focusOut = event.type === "focusout"
|
|
161
164
|
newValue = $original[0].inputSpinnerEditor.parse(newValue)
|
|
162
165
|
setValue(newValue, focusOut)
|
|
163
166
|
dispatchEvent($original, event.type)
|
|
@@ -246,7 +249,7 @@
|
|
|
246
249
|
function dispatchEvent($element, type) {
|
|
247
250
|
if (type) {
|
|
248
251
|
setTimeout(function () {
|
|
249
|
-
|
|
252
|
+
let event
|
|
250
253
|
if (typeof (Event) === 'function') {
|
|
251
254
|
event = new Event(type, {bubbles: true})
|
|
252
255
|
} else { // IE
|
|
@@ -291,8 +294,8 @@
|
|
|
291
294
|
}
|
|
292
295
|
$input.prop("placeholder", $original.prop("placeholder"))
|
|
293
296
|
$input.attr("inputmode", $original.attr("inputmode") || "decimal")
|
|
294
|
-
|
|
295
|
-
|
|
297
|
+
const disabled = $original.prop("disabled")
|
|
298
|
+
const readonly = $original.prop("readonly")
|
|
296
299
|
$input.prop("disabled", disabled)
|
|
297
300
|
$input.prop("readonly", readonly || props.buttonsOnly)
|
|
298
301
|
$buttonIncrement.prop("disabled", disabled || readonly)
|
|
@@ -300,15 +303,15 @@
|
|
|
300
303
|
if (disabled || readonly) {
|
|
301
304
|
resetTimer()
|
|
302
305
|
}
|
|
303
|
-
|
|
304
|
-
|
|
306
|
+
const originalClass = $original.prop("class")
|
|
307
|
+
let groupClass = ""
|
|
305
308
|
// sizing
|
|
306
309
|
if (/form-control-sm/g.test(originalClass)) {
|
|
307
310
|
groupClass = "input-group-sm"
|
|
308
311
|
} else if (/form-control-lg/g.test(originalClass)) {
|
|
309
312
|
groupClass = "input-group-lg"
|
|
310
313
|
}
|
|
311
|
-
|
|
314
|
+
const inputClass = originalClass.replace(/form-control(-(sm|lg))?/g, "")
|
|
312
315
|
$inputGroup.prop("class", "input-group " + groupClass + " " + props.groupClass)
|
|
313
316
|
$input.prop("class", "form-control " + inputClass)
|
|
314
317
|
|
package/src/custom-editors.js
CHANGED
|
@@ -3,8 +3,7 @@
|
|
|
3
3
|
* Repository: https://github.com/shaack/bootstrap-input-spinner
|
|
4
4
|
* License: MIT, see file 'LICENSE'
|
|
5
5
|
*/
|
|
6
|
-
|
|
7
|
-
var customEditors = {
|
|
6
|
+
const customEditors = {
|
|
8
7
|
RawEditor: function (props, element) {
|
|
9
8
|
this.parse = function (customFormat) {
|
|
10
9
|
// parse nothing
|
|
@@ -18,14 +17,14 @@ var customEditors = {
|
|
|
18
17
|
TimeEditor: function (props, element) {
|
|
19
18
|
// could be implemented more elegant maybe, but works
|
|
20
19
|
this.parse = function (customFormat) {
|
|
21
|
-
|
|
22
|
-
|
|
20
|
+
let trimmed = customFormat.trim()
|
|
21
|
+
let sign = 1
|
|
23
22
|
if (trimmed.charAt(0) === "-") {
|
|
24
23
|
sign = -1
|
|
25
24
|
trimmed = trimmed.replace("-", "")
|
|
26
25
|
}
|
|
27
|
-
|
|
28
|
-
|
|
26
|
+
const parts = trimmed.split(":")
|
|
27
|
+
let hours = 0, minutes
|
|
29
28
|
if (parts[1]) {
|
|
30
29
|
hours = parseInt(parts[0], 10)
|
|
31
30
|
minutes = parseInt(parts[1], 10)
|
|
@@ -35,11 +34,11 @@ var customEditors = {
|
|
|
35
34
|
return (hours * 60 + minutes) * sign
|
|
36
35
|
}
|
|
37
36
|
this.render = function (number) {
|
|
38
|
-
|
|
37
|
+
let minutes = Math.abs(number % 60)
|
|
39
38
|
if (minutes < 10) {
|
|
40
39
|
minutes = "0" + minutes
|
|
41
40
|
}
|
|
42
|
-
|
|
41
|
+
let hours
|
|
43
42
|
if (number >= 0) {
|
|
44
43
|
hours = Math.floor(number / 60)
|
|
45
44
|
return hours + ":" + minutes
|
|
@@ -49,4 +48,4 @@ var customEditors = {
|
|
|
49
48
|
}
|
|
50
49
|
}
|
|
51
50
|
}
|
|
52
|
-
}
|
|
51
|
+
}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
<html lang="en">
|
|
3
3
|
<head>
|
|
4
4
|
<title>Test bug #98</title>
|
|
5
|
-
<link rel="stylesheet" href="
|
|
5
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
|
|
6
6
|
<link rel="stylesheet" href="test.css"/>
|
|
7
7
|
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
|
8
8
|
</head>
|
|
@@ -30,8 +30,8 @@
|
|
|
30
30
|
</div>
|
|
31
31
|
</div>
|
|
32
32
|
</div>
|
|
33
|
-
<script src="
|
|
34
|
-
<script src="
|
|
33
|
+
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
|
|
34
|
+
<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>
|
|
35
35
|
<script src="../../src/bootstrap-input-spinner.js"></script>
|
|
36
36
|
<script>
|
|
37
37
|
$('input').inputSpinner()
|
|
@@ -40,4 +40,4 @@
|
|
|
40
40
|
})
|
|
41
41
|
</script>
|
|
42
42
|
</body>
|
|
43
|
-
</html>
|
|
43
|
+
</html>
|