bootstrap-time 0.1.4-beta → 0.1.6-beta

package/README.md

@@ -33,8 +33,8 @@ Or load the published files from jsDelivr:
 ```html
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@6.0.0-alpha.1/dist/css/bootstrap.min.css">
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.2/font/bootstrap-icons.min.css">
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-time@0.1.4-beta/dist/css/bootstrap-time.min.css">
-<script src="https://cdn.jsdelivr.net/npm/bootstrap-time@0.1.4-beta/dist/js/bootstrap-time.min.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-time@0.1.6-beta/dist/css/bootstrap-time.min.css">
+<script src="https://cdn.jsdelivr.net/npm/bootstrap-time@0.1.6-beta/dist/js/bootstrap-time.min.js"></script>
 ```
 
 Local builds use the same paths under `dist/`:
@@ -44,10 +44,21 @@ Local builds use the same paths under `dist/`:
 <script src="dist/js/bootstrap-time.min.js"></script>
 ```
 
-The script initializes the clock when `.clock-picker`, `#clock`, `#time-input`, `#hour-arrow` and `#minute-arrow` are present. The widget overlays the form under the time input. See `examples/bootstrap-time.html`.
+The script initializes the clock when `.clock-picker`, `#clock`, `#time-input`, `#hour-arrow` and `#minute-arrow` are present. The widget overlays the form under the time input. Minute selection follows the input `step`, including when `step` changes: `60` allows every minute by clicking between the numbers, `900` enables only 00, 15, 30 and 45. See `examples/bootstrap-time.html`.
 
 ## Changelog
 
+### 0.1.6-beta
+
+- The example starts on the current time.
+- Minute selection follows the input `step`, including when it changes.
+- `step="60"` selects any minute by clicking between the numbers.
+- `step="900"` enables only 00, 15, 30 and 45.
+
+### 0.1.5-beta
+
+- Release title uses `<version>-beta`.
+
 ### 0.1.4-beta
 
 - Bootstrap 6 is a dependency.

package/dist/css/bootstrap-time.css

@@ -76,6 +76,8 @@
   width: 16rem;
   height: 16rem;
   border-radius: 50%;
+  touch-action: none;
+  cursor: pointer;
 }
 
 .clock-hand {
@@ -118,3 +120,7 @@
 .clock-number[aria-pressed=true] {
   color: var(--bs-white, #fff);
 }
+.clock-number:disabled {
+  opacity: 0.35;
+  cursor: default;
+}

package/dist/css/bootstrap-time.min.css

@@ -1 +1 @@
-.clock-picker{position:relative;width:20rem}.clock-picker input[type=time]::-webkit-calendar-picker-indicator{display:none;appearance:none}.clock-toggle{pointer-events:auto;width:2.25rem;height:2.25rem;margin:-0.25rem;border:0;border-radius:50%;background:rgba(0,0,0,0);color:var(--bs-form-adorn-icon-color, var(--bs-secondary-color))}.clock-toggle .bi{font-size:1rem;line-height:1}.clock-toggle:hover,.clock-toggle:focus-visible{background-color:var(--bs-bg-3);color:var(--bs-body-color)}.clock-widget{position:absolute;top:100%;left:0;z-index:5;width:20rem;margin-top:.25rem;padding:.25rem .5rem 1rem;background-color:var(--bs-secondary-bg-subtle);color:var(--bs-secondary-fg)}.clock-arrows{display:flex;justify-content:flex-end;gap:.25rem}.btn.clock-arrow{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;min-height:0;padding:0;border-radius:50%;background-color:rgba(0,0,0,0);color:var(--bs-body-color);text-decoration:none}.btn.clock-arrow svg{width:1.5rem;height:1.5rem;fill:currentColor}.btn.clock-arrow:hover,.btn.clock-arrow:focus-visible{background-color:var(--bs-bg-3);color:var(--bs-body-color)}.btn.clock-arrow:disabled,.btn.clock-arrow:disabled:hover{background-color:rgba(0,0,0,0);color:var(--bs-secondary-color);opacity:.45}.clock{width:16rem;height:16rem;border-radius:50%}.clock-hand{position:absolute;left:50%;bottom:50%;width:2px;height:var(--hand);transform-origin:center bottom;transform:translateX(-50%) rotate(var(--angle));transition:transform .3s ease,height .3s ease;border-radius:1px;pointer-events:none}.clock-knob{position:absolute;left:50%;top:0;width:2.25rem;height:2.25rem;border-radius:50%;transform:translate(-50%, -50%)}.clock-number{position:absolute;left:50%;top:50%;z-index:1;width:2.25rem;height:2.25rem;margin:-1.125rem;border:0;border-radius:50%;background:rgba(0,0,0,0);color:inherit;transform:rotate(var(--angle)) translateY(calc(var(--radius) * -1)) rotate(calc(var(--angle) * -1))}.clock-number[aria-pressed=true]{color:var(--bs-white, #fff)}
+.clock-picker{position:relative;width:20rem}.clock-picker input[type=time]::-webkit-calendar-picker-indicator{display:none;appearance:none}.clock-toggle{pointer-events:auto;width:2.25rem;height:2.25rem;margin:-0.25rem;border:0;border-radius:50%;background:rgba(0,0,0,0);color:var(--bs-form-adorn-icon-color, var(--bs-secondary-color))}.clock-toggle .bi{font-size:1rem;line-height:1}.clock-toggle:hover,.clock-toggle:focus-visible{background-color:var(--bs-bg-3);color:var(--bs-body-color)}.clock-widget{position:absolute;top:100%;left:0;z-index:5;width:20rem;margin-top:.25rem;padding:.25rem .5rem 1rem;background-color:var(--bs-secondary-bg-subtle);color:var(--bs-secondary-fg)}.clock-arrows{display:flex;justify-content:flex-end;gap:.25rem}.btn.clock-arrow{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;min-height:0;padding:0;border-radius:50%;background-color:rgba(0,0,0,0);color:var(--bs-body-color);text-decoration:none}.btn.clock-arrow svg{width:1.5rem;height:1.5rem;fill:currentColor}.btn.clock-arrow:hover,.btn.clock-arrow:focus-visible{background-color:var(--bs-bg-3);color:var(--bs-body-color)}.btn.clock-arrow:disabled,.btn.clock-arrow:disabled:hover{background-color:rgba(0,0,0,0);color:var(--bs-secondary-color);opacity:.45}.clock{width:16rem;height:16rem;border-radius:50%;touch-action:none;cursor:pointer}.clock-hand{position:absolute;left:50%;bottom:50%;width:2px;height:var(--hand);transform-origin:center bottom;transform:translateX(-50%) rotate(var(--angle));transition:transform .3s ease,height .3s ease;border-radius:1px;pointer-events:none}.clock-knob{position:absolute;left:50%;top:0;width:2.25rem;height:2.25rem;border-radius:50%;transform:translate(-50%, -50%)}.clock-number{position:absolute;left:50%;top:50%;z-index:1;width:2.25rem;height:2.25rem;margin:-1.125rem;border:0;border-radius:50%;background:rgba(0,0,0,0);color:inherit;transform:rotate(var(--angle)) translateY(calc(var(--radius) * -1)) rotate(calc(var(--angle) * -1))}.clock-number[aria-pressed=true]{color:var(--bs-white, #fff)}.clock-number:disabled{opacity:.35;cursor:default}

package/dist/js/bootstrap-time.js

@@ -18,9 +18,12 @@
     var clockToggle = document.querySelector("#clock-toggle");
     if (!clock || !timeInput || !hourArrow || !minuteArrow) return;
 
-    var initial = (timeInput.value || "17:00").split(":");
+    var now = new Date();
+    var initial = timeInput.value
+      ? timeInput.value.split(":")
+      : [now.getHours(), now.getMinutes()];
     var hour = Number(initial[0]) || 0;
-    var minute = Number(initial[1]) || 0;
+    var minute = snapMinute(Number(initial[1]) || 0);
     var mode = "hour";
     var handAngle = 150;
     var hand = document.createElement("div");
@@ -36,6 +39,22 @@
       return String(value).padStart(2, "0");
     }
 
+    function minuteStep() {
+      var step = Number(timeInput.getAttribute("step") || timeInput.step);
+      if (!step || step < 60) step = 60;
+      return Math.max(1, Math.round(step / 60));
+    }
+
+    function snapMinute(value) {
+      var step = minuteStep();
+      var snapped = Math.round(value / step) * step;
+      return ((snapped % 60) + 60) % 60;
+    }
+
+    function allowedMinute(value) {
+      return value % minuteStep() === 0;
+    }
+
     function targetAngle() {
       return mode === "hour" ? (hour % 12) * 30 : minute * 6;
     }
@@ -85,14 +104,18 @@
         var button = document.createElement("button");
         var inner = mode === "hour" && index >= 12;
         var angle = (mode === "hour" ? index % 12 : index) * 30;
+        var disabled = mode === "minute" && !allowedMinute(value);
 
         button.type = "button";
         button.className = "clock-number";
-        button.textContent = mode === "hour" && value === 0 ? "00" : String(value);
-        button.setAttribute("aria-pressed", value === selected ? "true" : "false");
+        button.textContent = value === 0 ? "00" : String(value);
+        button.dataset.value = String(value);
+        button.disabled = disabled;
+        button.setAttribute("aria-pressed", !disabled && value === selected ? "true" : "false");
         button.style.setProperty("--angle", angle + "deg");
         button.style.setProperty("--radius", inner ? INNER_RADIUS : OUTER_RADIUS);
         button.addEventListener("click", function () {
+          if (button.disabled) return;
           if (mode === "hour") {
             hour = value;
             mode = "minute";
@@ -124,6 +147,31 @@
       else hideWidget();
     }
 
+    function valueFromPoint(event) {
+      var rect = clock.getBoundingClientRect();
+      var dx = event.clientX - (rect.left + rect.width / 2);
+      var dy = event.clientY - (rect.top + rect.height / 2);
+      var angle = (Math.atan2(dx, -dy) * 180 / Math.PI + 360) % 360;
+      if (mode === "minute") return snapMinute(Math.round(angle / 6) % 60);
+      var hour12 = Math.round(angle / 30) % 12;
+      var inner = Math.hypot(dx, dy) < rect.width * 0.32;
+      if (inner) return hour12 === 0 ? 0 : hour12 + 12;
+      return hour12 === 0 ? 12 : hour12;
+    }
+
+    clock.addEventListener("click", function (event) {
+      if (event.target.closest(".clock-number")) return;
+      var value = valueFromPoint(event);
+      if (mode === "minute") minute = value;
+      else {
+        hour = value;
+        mode = "minute";
+      }
+      writeInput();
+      updateArrows();
+      renderClock();
+    });
+
     hourArrow.addEventListener("click", function () {
       showMode("hour");
     });
@@ -158,6 +206,30 @@
       hideWidget();
     });
 
+    function applyStep() {
+      minute = snapMinute(minute);
+      writeInput();
+      renderClock();
+    }
+
+    var stepDescriptor = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "step");
+    if (stepDescriptor && stepDescriptor.set) {
+      Object.defineProperty(timeInput, "step", {
+        configurable: true,
+        get: function () {
+          return stepDescriptor.get.call(timeInput);
+        },
+        set: function (value) {
+          stepDescriptor.set.call(timeInput, value);
+          applyStep();
+        }
+      });
+    }
+    new MutationObserver(applyStep).observe(timeInput, {
+      attributes: true,
+      attributeFilter: ["step"]
+    });
+
     updateArrows();
     writeInput();
     renderClock();

package/dist/js/bootstrap-time.min.js

@@ -1 +1 @@
-!function(){"use strict";var e="4.6rem",t="6.4rem";function n(){var n=document.querySelector(".clock-picker"),r=document.querySelector("#clock"),u=document.querySelector("#clock-widget"),o=document.querySelector("#time-input"),c=document.querySelector("#hour-arrow"),i=document.querySelector("#minute-arrow"),a=document.querySelector("#clock-toggle");if(r&&o&&c&&i){var d=(o.value||"17:00").split(":"),s=Number(d[0])||0,l=Number(d[1])||0,m="hour",f=150,p=document.createElement("div"),h=document.createElement("span");p.className="clock-hand bg-primary",h.className="clock-knob bg-primary",h.setAttribute("aria-hidden","true"),p.append(h),r.append(p),c.addEventListener("click",function(){k("hour")}),i.addEventListener("click",function(){k("minute")}),a&&a.addEventListener("click",function(){u&&u.hidden?S():L()}),o.addEventListener("focus",S),o.addEventListener("input",function(){if(o.value){var e=o.value.split(":"),t=Number(e[0]),n=Number(e[1]);n!==l?m="minute":t!==s&&(m="hour"),s=t,l=n,b(),E()}}),n&&n.addEventListener("mousedown",function(e){e.target!==o&&(a&&a.contains(e.target)||e.preventDefault())}),document.addEventListener("mousedown",function(e){n&&!n.contains(e.target)&&L()}),b(),g(),E(),L()}function v(e){return String(e).padStart(2,"0")}function y(){f+=((("hour"===m?s%12*30:6*l)-f)%360+540)%360-180,p.style.setProperty("--angle",f+"deg"),p.style.setProperty("--hand","hour"===m&&(0===s||s>12)?e:t)}function b(){c.disabled="hour"===m,i.disabled="minute"===m}function g(){o.value=v(s)+":"+v(l)}function k(e){m!==e&&(m=e,b(),E())}function E(){r.querySelectorAll(".clock-number").forEach(function(e){e.remove()}),r.setAttribute("aria-label","hour"===m?"Kies een uur":"Kies de minuten");var n="hour"===m?[12,1,2,3,4,5,6,7,8,9,10,11,0,13,14,15,16,17,18,19,20,21,22,23]:[0,5,10,15,20,25,30,35,40,45,50,55],u="hour"===m?s:l;y(),n.forEach(function(n,o){var c=document.createElement("button"),i="hour"===m&&o>=12,a=30*("hour"===m?o%12:o);c.type="button",c.className="clock-number",c.textContent="hour"===m&&0===n?"00":String(n),c.setAttribute("aria-pressed",n===u?"true":"false"),c.style.setProperty("--angle",a+"deg"),c.style.setProperty("--radius",i?e:t),c.addEventListener("click",function(){"hour"===m?(s=n,m="minute"):l=n,g(),b(),E()}),r.append(c)})}function S(){u&&(u.hidden=!1,a&&a.setAttribute("aria-pressed","true"))}function L(){u&&(u.hidden=!0,a&&a.setAttribute("aria-pressed","false"))}}"loading"===document.readyState?document.addEventListener("DOMContentLoaded",n):n()}();
+!function(){"use strict";var e="4.6rem",t="6.4rem";function n(){var n=document.querySelector(".clock-picker"),r=document.querySelector("#clock"),u=document.querySelector("#clock-widget"),o=document.querySelector("#time-input"),i=document.querySelector("#hour-arrow"),a=document.querySelector("#minute-arrow"),c=document.querySelector("#clock-toggle");if(r&&o&&i&&a){var d=new Date,s=o.value?o.value.split(":"):[d.getHours(),d.getMinutes()],l=Number(s[0])||0,m=k(Number(s[1])||0),f="hour",p=150,h=document.createElement("div"),v=document.createElement("span");h.className="clock-hand bg-primary",v.className="clock-knob bg-primary",v.setAttribute("aria-hidden","true"),h.append(v),r.append(h),r.addEventListener("click",function(e){if(!e.target.closest(".clock-number")){var t=function(e){var t=r.getBoundingClientRect(),n=e.clientX-(t.left+t.width/2),u=e.clientY-(t.top+t.height/2),o=(180*Math.atan2(n,-u)/Math.PI+360)%360;if("minute"===f)return k(Math.round(o/6)%60);var i=Math.round(o/30)%12;return Math.hypot(n,u)<.32*t.width?0===i?0:i+12:0===i?12:i}(e);"minute"===f?m=t:(l=t,f="minute"),L(),S(),w()}}),i.addEventListener("click",function(){M("hour")}),a.addEventListener("click",function(){M("minute")}),c&&c.addEventListener("click",function(){u&&u.hidden?q():N()}),o.addEventListener("focus",q),o.addEventListener("input",function(){if(o.value){var e=o.value.split(":"),t=Number(e[0]),n=Number(e[1]);n!==m?f="minute":t!==l&&(f="hour"),l=t,m=n,S(),w()}}),n&&n.addEventListener("mousedown",function(e){e.target!==o&&(c&&c.contains(e.target)||e.preventDefault())}),document.addEventListener("mousedown",function(e){n&&!n.contains(e.target)&&N()});var b=Object.getOwnPropertyDescriptor(HTMLInputElement.prototype,"step");b&&b.set&&Object.defineProperty(o,"step",{configurable:!0,get:function(){return b.get.call(o)},set:function(e){b.set.call(o,e),A()}}),new MutationObserver(A).observe(o,{attributes:!0,attributeFilter:["step"]}),S(),L(),w(),N()}function g(e){return String(e).padStart(2,"0")}function y(){var e=Number(o.getAttribute("step")||o.step);return(!e||e<60)&&(e=60),Math.max(1,Math.round(e/60))}function k(e){var t=y();return(Math.round(e/t)*t%60+60)%60}function E(){p+=((("hour"===f?l%12*30:6*m)-p)%360+540)%360-180,h.style.setProperty("--angle",p+"deg"),h.style.setProperty("--hand","hour"===f&&(0===l||l>12)?e:t)}function S(){i.disabled="hour"===f,a.disabled="minute"===f}function L(){o.value=g(l)+":"+g(m)}function M(e){f!==e&&(f=e,S(),w())}function w(){r.querySelectorAll(".clock-number").forEach(function(e){e.remove()}),r.setAttribute("aria-label","hour"===f?"Kies een uur":"Kies de minuten");var n="hour"===f?[12,1,2,3,4,5,6,7,8,9,10,11,0,13,14,15,16,17,18,19,20,21,22,23]:[0,5,10,15,20,25,30,35,40,45,50,55],u="hour"===f?l:m;E(),n.forEach(function(n,o){var i=document.createElement("button"),a="hour"===f&&o>=12,c=30*("hour"===f?o%12:o),d="minute"===f&&!function(e){return e%y()===0}(n);i.type="button",i.className="clock-number",i.textContent=0===n?"00":String(n),i.dataset.value=String(n),i.disabled=d,i.setAttribute("aria-pressed",d||n!==u?"false":"true"),i.style.setProperty("--angle",c+"deg"),i.style.setProperty("--radius",a?e:t),i.addEventListener("click",function(){i.disabled||("hour"===f?(l=n,f="minute"):m=n,L(),S(),w())}),r.append(i)})}function q(){u&&(u.hidden=!1,c&&c.setAttribute("aria-pressed","true"))}function N(){u&&(u.hidden=!0,c&&c.setAttribute("aria-pressed","false"))}function A(){m=k(m),L(),w()}}"loading"===document.readyState?document.addEventListener("DOMContentLoaded",n):n()}();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bootstrap-time",
-  "version": "0.1.4-beta",
+  "version": "0.1.6-beta",
   "description": "Time picker based on Bootstrap.",
   "author": "M. de Ridder",
   "license": "MIT",

package/src/js/bootstrap-time.js

@@ -18,9 +18,12 @@
     var clockToggle = document.querySelector("#clock-toggle");
     if (!clock || !timeInput || !hourArrow || !minuteArrow) return;
 
-    var initial = (timeInput.value || "17:00").split(":");
+    var now = new Date();
+    var initial = timeInput.value
+      ? timeInput.value.split(":")
+      : [now.getHours(), now.getMinutes()];
     var hour = Number(initial[0]) || 0;
-    var minute = Number(initial[1]) || 0;
+    var minute = snapMinute(Number(initial[1]) || 0);
     var mode = "hour";
     var handAngle = 150;
     var hand = document.createElement("div");
@@ -36,6 +39,22 @@
       return String(value).padStart(2, "0");
     }
 
+    function minuteStep() {
+      var step = Number(timeInput.getAttribute("step") || timeInput.step);
+      if (!step || step < 60) step = 60;
+      return Math.max(1, Math.round(step / 60));
+    }
+
+    function snapMinute(value) {
+      var step = minuteStep();
+      var snapped = Math.round(value / step) * step;
+      return ((snapped % 60) + 60) % 60;
+    }
+
+    function allowedMinute(value) {
+      return value % minuteStep() === 0;
+    }
+
     function targetAngle() {
       return mode === "hour" ? (hour % 12) * 30 : minute * 6;
     }
@@ -85,14 +104,18 @@
         var button = document.createElement("button");
         var inner = mode === "hour" && index >= 12;
         var angle = (mode === "hour" ? index % 12 : index) * 30;
+        var disabled = mode === "minute" && !allowedMinute(value);
 
         button.type = "button";
         button.className = "clock-number";
-        button.textContent = mode === "hour" && value === 0 ? "00" : String(value);
-        button.setAttribute("aria-pressed", value === selected ? "true" : "false");
+        button.textContent = value === 0 ? "00" : String(value);
+        button.dataset.value = String(value);
+        button.disabled = disabled;
+        button.setAttribute("aria-pressed", !disabled && value === selected ? "true" : "false");
         button.style.setProperty("--angle", angle + "deg");
         button.style.setProperty("--radius", inner ? INNER_RADIUS : OUTER_RADIUS);
         button.addEventListener("click", function () {
+          if (button.disabled) return;
           if (mode === "hour") {
             hour = value;
             mode = "minute";
@@ -124,6 +147,31 @@
       else hideWidget();
     }
 
+    function valueFromPoint(event) {
+      var rect = clock.getBoundingClientRect();
+      var dx = event.clientX - (rect.left + rect.width / 2);
+      var dy = event.clientY - (rect.top + rect.height / 2);
+      var angle = (Math.atan2(dx, -dy) * 180 / Math.PI + 360) % 360;
+      if (mode === "minute") return snapMinute(Math.round(angle / 6) % 60);
+      var hour12 = Math.round(angle / 30) % 12;
+      var inner = Math.hypot(dx, dy) < rect.width * 0.32;
+      if (inner) return hour12 === 0 ? 0 : hour12 + 12;
+      return hour12 === 0 ? 12 : hour12;
+    }
+
+    clock.addEventListener("click", function (event) {
+      if (event.target.closest(".clock-number")) return;
+      var value = valueFromPoint(event);
+      if (mode === "minute") minute = value;
+      else {
+        hour = value;
+        mode = "minute";
+      }
+      writeInput();
+      updateArrows();
+      renderClock();
+    });
+
     hourArrow.addEventListener("click", function () {
       showMode("hour");
     });
@@ -158,6 +206,30 @@
       hideWidget();
     });
 
+    function applyStep() {
+      minute = snapMinute(minute);
+      writeInput();
+      renderClock();
+    }
+
+    var stepDescriptor = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "step");
+    if (stepDescriptor && stepDescriptor.set) {
+      Object.defineProperty(timeInput, "step", {
+        configurable: true,
+        get: function () {
+          return stepDescriptor.get.call(timeInput);
+        },
+        set: function (value) {
+          stepDescriptor.set.call(timeInput, value);
+          applyStep();
+        }
+      });
+    }
+    new MutationObserver(applyStep).observe(timeInput, {
+      attributes: true,
+      attributeFilter: ["step"]
+    });
+
     updateArrows();
     writeInput();
     renderClock();

package/src/scss/bootstrap-time.scss

@@ -89,6 +89,8 @@
   width: 16rem;
   height: 16rem;
   border-radius: 50%;
+  touch-action: none;
+  cursor: pointer;
 }
 
 .clock-hand {
@@ -131,4 +133,9 @@
   &[aria-pressed="true"] {
     color: var(--bs-white, #fff);
   }
+
+  &:disabled {
+    opacity: 0.35;
+    cursor: default;
+  }
 }