bootstrap-time 0.1.0 → 0.1.2-beta

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 (8) hide show
  1. package/LICENSE +21 -21
  2. package/README.md +47 -47
  3. package/dist/css/bootstrap-time.css +120 -120
  4. package/dist/css/bootstrap-time.min.css +1 -1
  5. package/dist/js/bootstrap-time.js +172 -172
  6. package/package.json +68 -68
  7. package/src/js/bootstrap-time.js +172 -172
  8. package/src/scss/bootstrap-time.scss +134 -134
package/dist/js/bootstrap-time.js CHANGED
@@ -1,172 +1,172 @@
1
- // Analog clock based on Bootstrap.
2
- // Source entrypoint. `npm run build` writes dist/js/bootstrap-time.js
3
- // and dist/js/bootstrap-time.min.js.
4
-
5
- (function () {
6
- "use strict";
7
-
8
- var INNER_RADIUS = "4.6rem";
9
- var OUTER_RADIUS = "6.4rem";
10
-
11
- function init() {
12
- var picker = document.querySelector(".clock-picker");
13
- var clock = document.querySelector("#clock");
14
- var widget = document.querySelector("#clock-widget");
15
- var timeInput = document.querySelector("#time-input");
16
- var hourArrow = document.querySelector("#hour-arrow");
17
- var minuteArrow = document.querySelector("#minute-arrow");
18
- var clockToggle = document.querySelector("#clock-toggle");
19
- if (!clock || !timeInput || !hourArrow || !minuteArrow) return;
20
-
21
- var initial = (timeInput.value || "17:00").split(":");
22
- var hour = Number(initial[0]) || 0;
23
- var minute = Number(initial[1]) || 0;
24
- var mode = "hour";
25
- var handAngle = 150;
26
- var hand = document.createElement("div");
27
- var knob = document.createElement("span");
28
-
29
- hand.className = "clock-hand bg-primary";
30
- knob.className = "clock-knob bg-primary";
31
- knob.setAttribute("aria-hidden", "true");
32
- hand.append(knob);
33
- clock.append(hand);
34
-
35
- function pad(value) {
36
- return String(value).padStart(2, "0");
37
- }
38
-
39
- function targetAngle() {
40
- return mode === "hour" ? (hour % 12) * 30 : minute * 6;
41
- }
42
-
43
- function handLength() {
44
- var innerHour = hour === 0 || hour > 12;
45
- return mode === "hour" && innerHour ? INNER_RADIUS : OUTER_RADIUS;
46
- }
47
-
48
- function moveHand() {
49
- var target = targetAngle();
50
- var delta = ((target - handAngle) % 360 + 540) % 360 - 180;
51
- handAngle += delta;
52
- hand.style.setProperty("--angle", handAngle + "deg");
53
- hand.style.setProperty("--hand", handLength());
54
- }
55
-
56
- function updateArrows() {
57
- hourArrow.disabled = mode === "hour";
58
- minuteArrow.disabled = mode === "minute";
59
- }
60
-
61
- function writeInput() {
62
- timeInput.value = pad(hour) + ":" + pad(minute);
63
- }
64
-
65
- function showMode(nextMode) {
66
- if (mode === nextMode) return;
67
- mode = nextMode;
68
- updateArrows();
69
- renderClock();
70
- }
71
-
72
- function renderClock() {
73
- clock.querySelectorAll(".clock-number").forEach(function (node) {
74
- node.remove();
75
- });
76
- clock.setAttribute("aria-label", mode === "hour" ? "Kies een uur" : "Kies de minuten");
77
-
78
- var numbers = mode === "hour"
79
- ? [12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 0, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23]
80
- : [0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55];
81
- var selected = mode === "hour" ? hour : minute;
82
- moveHand();
83
-
84
- numbers.forEach(function (value, index) {
85
- var button = document.createElement("button");
86
- var inner = mode === "hour" && index >= 12;
87
- var angle = (mode === "hour" ? index % 12 : index) * 30;
88
-
89
- button.type = "button";
90
- button.className = "clock-number";
91
- button.textContent = mode === "hour" && value === 0 ? "00" : String(value);
92
- button.setAttribute("aria-pressed", value === selected ? "true" : "false");
93
- button.style.setProperty("--angle", angle + "deg");
94
- button.style.setProperty("--radius", inner ? INNER_RADIUS : OUTER_RADIUS);
95
- button.addEventListener("click", function () {
96
- if (mode === "hour") {
97
- hour = value;
98
- mode = "minute";
99
- } else {
100
- minute = value;
101
- }
102
- writeInput();
103
- updateArrows();
104
- renderClock();
105
- });
106
- clock.append(button);
107
- });
108
- }
109
-
110
- function showWidget() {
111
- if (!widget) return;
112
- widget.hidden = false;
113
- if (clockToggle) clockToggle.setAttribute("aria-pressed", "true");
114
- }
115
-
116
- function hideWidget() {
117
- if (!widget) return;
118
- widget.hidden = true;
119
- if (clockToggle) clockToggle.setAttribute("aria-pressed", "false");
120
- }
121
-
122
- function toggleWidget() {
123
- if (widget && widget.hidden) showWidget();
124
- else hideWidget();
125
- }
126
-
127
- hourArrow.addEventListener("click", function () {
128
- showMode("hour");
129
- });
130
- minuteArrow.addEventListener("click", function () {
131
- showMode("minute");
132
- });
133
- if (clockToggle) {
134
- clockToggle.addEventListener("click", toggleWidget);
135
- }
136
- timeInput.addEventListener("focus", showWidget);
137
- timeInput.addEventListener("input", function () {
138
- if (!timeInput.value) return;
139
- var parts = timeInput.value.split(":");
140
- var nextHour = Number(parts[0]);
141
- var nextMinute = Number(parts[1]);
142
- if (nextMinute !== minute) mode = "minute";
143
- else if (nextHour !== hour) mode = "hour";
144
- hour = nextHour;
145
- minute = nextMinute;
146
- updateArrows();
147
- renderClock();
148
- });
149
- if (picker) {
150
- picker.addEventListener("mousedown", function (event) {
151
- if (event.target === timeInput) return;
152
- if (clockToggle && clockToggle.contains(event.target)) return;
153
- event.preventDefault();
154
- });
155
- }
156
- document.addEventListener("mousedown", function (event) {
157
- if (!picker || picker.contains(event.target)) return;
158
- hideWidget();
159
- });
160
-
161
- updateArrows();
162
- writeInput();
163
- renderClock();
164
- hideWidget();
165
- }
166
-
167
- if (document.readyState === "loading") {
168
- document.addEventListener("DOMContentLoaded", init);
169
- } else {
170
- init();
171
- }
172
- })();
1
+ // Analog clock based on Bootstrap.
2
+ // Source entrypoint. `npm run build` writes dist/js/bootstrap-time.js
3
+ // and dist/js/bootstrap-time.min.js.
4
+
5
+ (function () {
6
+ "use strict";
7
+
8
+ var INNER_RADIUS = "4.6rem";
9
+ var OUTER_RADIUS = "6.4rem";
10
+
11
+ function init() {
12
+ var picker = document.querySelector(".clock-picker");
13
+ var clock = document.querySelector("#clock");
14
+ var widget = document.querySelector("#clock-widget");
15
+ var timeInput = document.querySelector("#time-input");
16
+ var hourArrow = document.querySelector("#hour-arrow");
17
+ var minuteArrow = document.querySelector("#minute-arrow");
18
+ var clockToggle = document.querySelector("#clock-toggle");
19
+ if (!clock || !timeInput || !hourArrow || !minuteArrow) return;
20
+
21
+ var initial = (timeInput.value || "17:00").split(":");
22
+ var hour = Number(initial[0]) || 0;
23
+ var minute = Number(initial[1]) || 0;
24
+ var mode = "hour";
25
+ var handAngle = 150;
26
+ var hand = document.createElement("div");
27
+ var knob = document.createElement("span");
28
+
29
+ hand.className = "clock-hand bg-primary";
30
+ knob.className = "clock-knob bg-primary";
31
+ knob.setAttribute("aria-hidden", "true");
32
+ hand.append(knob);
33
+ clock.append(hand);
34
+
35
+ function pad(value) {
36
+ return String(value).padStart(2, "0");
37
+ }
38
+
39
+ function targetAngle() {
40
+ return mode === "hour" ? (hour % 12) * 30 : minute * 6;
41
+ }
42
+
43
+ function handLength() {
44
+ var innerHour = hour === 0 || hour > 12;
45
+ return mode === "hour" && innerHour ? INNER_RADIUS : OUTER_RADIUS;
46
+ }
47
+
48
+ function moveHand() {
49
+ var target = targetAngle();
50
+ var delta = ((target - handAngle) % 360 + 540) % 360 - 180;
51
+ handAngle += delta;
52
+ hand.style.setProperty("--angle", handAngle + "deg");
53
+ hand.style.setProperty("--hand", handLength());
54
+ }
55
+
56
+ function updateArrows() {
57
+ hourArrow.disabled = mode === "hour";
58
+ minuteArrow.disabled = mode === "minute";
59
+ }
60
+
61
+ function writeInput() {
62
+ timeInput.value = pad(hour) + ":" + pad(minute);
63
+ }
64
+
65
+ function showMode(nextMode) {
66
+ if (mode === nextMode) return;
67
+ mode = nextMode;
68
+ updateArrows();
69
+ renderClock();
70
+ }
71
+
72
+ function renderClock() {
73
+ clock.querySelectorAll(".clock-number").forEach(function (node) {
74
+ node.remove();
75
+ });
76
+ clock.setAttribute("aria-label", mode === "hour" ? "Kies een uur" : "Kies de minuten");
77
+
78
+ var numbers = mode === "hour"
79
+ ? [12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 0, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23]
80
+ : [0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55];
81
+ var selected = mode === "hour" ? hour : minute;
82
+ moveHand();
83
+
84
+ numbers.forEach(function (value, index) {
85
+ var button = document.createElement("button");
86
+ var inner = mode === "hour" && index >= 12;
87
+ var angle = (mode === "hour" ? index % 12 : index) * 30;
88
+
89
+ button.type = "button";
90
+ button.className = "clock-number";
91
+ button.textContent = mode === "hour" && value === 0 ? "00" : String(value);
92
+ button.setAttribute("aria-pressed", value === selected ? "true" : "false");
93
+ button.style.setProperty("--angle", angle + "deg");
94
+ button.style.setProperty("--radius", inner ? INNER_RADIUS : OUTER_RADIUS);
95
+ button.addEventListener("click", function () {
96
+ if (mode === "hour") {
97
+ hour = value;
98
+ mode = "minute";
99
+ } else {
100
+ minute = value;
101
+ }
102
+ writeInput();
103
+ updateArrows();
104
+ renderClock();
105
+ });
106
+ clock.append(button);
107
+ });
108
+ }
109
+
110
+ function showWidget() {
111
+ if (!widget) return;
112
+ widget.hidden = false;
113
+ if (clockToggle) clockToggle.setAttribute("aria-pressed", "true");
114
+ }
115
+
116
+ function hideWidget() {
117
+ if (!widget) return;
118
+ widget.hidden = true;
119
+ if (clockToggle) clockToggle.setAttribute("aria-pressed", "false");
120
+ }
121
+
122
+ function toggleWidget() {
123
+ if (widget && widget.hidden) showWidget();
124
+ else hideWidget();
125
+ }
126
+
127
+ hourArrow.addEventListener("click", function () {
128
+ showMode("hour");
129
+ });
130
+ minuteArrow.addEventListener("click", function () {
131
+ showMode("minute");
132
+ });
133
+ if (clockToggle) {
134
+ clockToggle.addEventListener("click", toggleWidget);
135
+ }
136
+ timeInput.addEventListener("focus", showWidget);
137
+ timeInput.addEventListener("input", function () {
138
+ if (!timeInput.value) return;
139
+ var parts = timeInput.value.split(":");
140
+ var nextHour = Number(parts[0]);
141
+ var nextMinute = Number(parts[1]);
142
+ if (nextMinute !== minute) mode = "minute";
143
+ else if (nextHour !== hour) mode = "hour";
144
+ hour = nextHour;
145
+ minute = nextMinute;
146
+ updateArrows();
147
+ renderClock();
148
+ });
149
+ if (picker) {
150
+ picker.addEventListener("mousedown", function (event) {
151
+ if (event.target === timeInput) return;
152
+ if (clockToggle && clockToggle.contains(event.target)) return;
153
+ event.preventDefault();
154
+ });
155
+ }
156
+ document.addEventListener("mousedown", function (event) {
157
+ if (!picker || picker.contains(event.target)) return;
158
+ hideWidget();
159
+ });
160
+
161
+ updateArrows();
162
+ writeInput();
163
+ renderClock();
164
+ hideWidget();
165
+ }
166
+
167
+ if (document.readyState === "loading") {
168
+ document.addEventListener("DOMContentLoaded", init);
169
+ } else {
170
+ init();
171
+ }
172
+ })();
package/package.json CHANGED
@@ -1,68 +1,68 @@
1
- {
2
- "name": "bootstrap-time",
3
- "version": "0.1.0",
4
- "description": "Time picker based on Bootstrap.",
5
- "author": "M. de Ridder",
6
- "license": "MIT",
7
- "repository": {
8
- "type": "git",
9
- "url": "git+https://github.com/matthijsderidder/bootstrap-time.git"
10
- },
11
- "bugs": {
12
- "url": "https://github.com/matthijsderidder/bootstrap-time/issues"
13
- },
14
- "homepage": "https://github.com/matthijsderidder/bootstrap-time#readme",
15
- "keywords": [
16
- "bootstrap",
17
- "clock",
18
- "time",
19
- "timepicker",
20
- "css",
21
- "scss"
22
- ],
23
- "files": [
24
- "dist",
25
- "src"
26
- ],
27
- "main": "./dist/js/bootstrap-time.js",
28
- "module": "./dist/js/bootstrap-time.js",
29
- "style": "./dist/css/bootstrap-time.css",
30
- "sass": "./src/scss/bootstrap-time.scss",
31
- "sideEffects": [
32
- "**/*.css"
33
- ],
34
- "exports": {
35
- ".": {
36
- "style": "./dist/css/bootstrap-time.css",
37
- "sass": "./src/scss/bootstrap-time.scss",
38
- "import": "./dist/js/bootstrap-time.js",
39
- "default": "./dist/js/bootstrap-time.js"
40
- },
41
- "./css": "./dist/css/bootstrap-time.css",
42
- "./css/min": "./dist/css/bootstrap-time.min.css",
43
- "./js": "./dist/js/bootstrap-time.js",
44
- "./js/min": "./dist/js/bootstrap-time.min.js",
45
- "./scss": "./src/scss/bootstrap-time.scss",
46
- "./dist/*": "./dist/*",
47
- "./src/*": "./src/*",
48
- "./package.json": "./package.json"
49
- },
50
- "jsdelivr": "dist/js/bootstrap-time.min.js",
51
- "unpkg": "dist/js/bootstrap-time.min.js",
52
- "scripts": {
53
- "build:css": "sass src/scss/bootstrap-time.scss dist/css/bootstrap-time.css --style=expanded --no-source-map && sass src/scss/bootstrap-time.scss dist/css/bootstrap-time.min.css --style=compressed --no-source-map",
54
- "build:js": "mkdir -p dist/js && cp src/js/bootstrap-time.js dist/js/bootstrap-time.js && terser src/js/bootstrap-time.js --compress --mangle --output dist/js/bootstrap-time.min.js",
55
- "build": "npm run build:css && npm run build:js",
56
- "clean": "rm -rf dist"
57
- },
58
- "devDependencies": {
59
- "sass": "^1.93.2",
60
- "terser": "^5.44.0"
61
- },
62
- "peerDependencies": {
63
- "bootstrap": ">=6.0.0-alpha.1"
64
- },
65
- "dependencies": {
66
- "bootstrap-icons": "^1.13.2"
67
- }
68
- }
1
+ {
2
+ "name": "bootstrap-time",
3
+ "version": "0.1.2-beta",
4
+ "description": "Time picker based on Bootstrap.",
5
+ "author": "M. de Ridder",
6
+ "license": "MIT",
7
+ "repository": {
8
+ "type": "git",
9
+ "url": "git+https://github.com/matthijsderidder/bootstrap-time.git"
10
+ },
11
+ "bugs": {
12
+ "url": "https://github.com/matthijsderidder/bootstrap-time/issues"
13
+ },
14
+ "homepage": "https://github.com/matthijsderidder/bootstrap-time#readme",
15
+ "keywords": [
16
+ "bootstrap",
17
+ "clock",
18
+ "time",
19
+ "timepicker",
20
+ "css",
21
+ "scss"
22
+ ],
23
+ "files": [
24
+ "dist",
25
+ "src"
26
+ ],
27
+ "main": "./dist/js/bootstrap-time.js",
28
+ "module": "./dist/js/bootstrap-time.js",
29
+ "style": "./dist/css/bootstrap-time.css",
30
+ "sass": "./src/scss/bootstrap-time.scss",
31
+ "sideEffects": [
32
+ "**/*.css"
33
+ ],
34
+ "exports": {
35
+ ".": {
36
+ "style": "./dist/css/bootstrap-time.css",
37
+ "sass": "./src/scss/bootstrap-time.scss",
38
+ "import": "./dist/js/bootstrap-time.js",
39
+ "default": "./dist/js/bootstrap-time.js"
40
+ },
41
+ "./css": "./dist/css/bootstrap-time.css",
42
+ "./css/min": "./dist/css/bootstrap-time.min.css",
43
+ "./js": "./dist/js/bootstrap-time.js",
44
+ "./js/min": "./dist/js/bootstrap-time.min.js",
45
+ "./scss": "./src/scss/bootstrap-time.scss",
46
+ "./dist/*": "./dist/*",
47
+ "./src/*": "./src/*",
48
+ "./package.json": "./package.json"
49
+ },
50
+ "jsdelivr": "dist/js/bootstrap-time.min.js",
51
+ "unpkg": "dist/js/bootstrap-time.min.js",
52
+ "scripts": {
53
+ "build:css": "sass src/scss/bootstrap-time.scss dist/css/bootstrap-time.css --style=expanded --no-source-map && sass src/scss/bootstrap-time.scss dist/css/bootstrap-time.min.css --style=compressed --no-source-map",
54
+ "build:js": "mkdir -p dist/js && cp src/js/bootstrap-time.js dist/js/bootstrap-time.js && terser src/js/bootstrap-time.js --compress --mangle --output dist/js/bootstrap-time.min.js",
55
+ "build": "npm run build:css && npm run build:js",
56
+ "clean": "rm -rf dist"
57
+ },
58
+ "devDependencies": {
59
+ "sass": "^1.93.2",
60
+ "terser": "^5.44.0"
61
+ },
62
+ "peerDependencies": {
63
+ "bootstrap": ">=6.0.0-alpha.1"
64
+ },
65
+ "dependencies": {
66
+ "bootstrap-icons": "^1.13.2"
67
+ }
68
+ }