bootstrap-time 0.2.3-beta → 0.2.4-beta

package/README.md

@@ -32,8 +32,8 @@ Or load the published files from jsDelivr:
 
 ```html
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css">
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-time@0.2.3-beta/dist/css/bootstrap-time.min.css">
-<script src="https://cdn.jsdelivr.net/npm/bootstrap-time@0.2.3-beta/dist/js/bootstrap-time.min.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-time@0.2.4-beta/dist/css/bootstrap-time.min.css">
+<script src="https://cdn.jsdelivr.net/npm/bootstrap-time@0.2.4-beta/dist/js/bootstrap-time.min.js"></script>
 ```
 
 Local builds use the same paths under `dist/`:
@@ -54,6 +54,10 @@ Minute selection follows the input `step`, including when `step` changes: `60` a
 
 ## Changelog
 
+### 0.2.4-beta
+
+- The field stays untouched. The clock is a fixed overlay.
+
 ### 0.2.3-beta
 
 - The native time picker no longer opens. The browser icon stays.

package/dist/css/bootstrap-time.css

@@ -1,7 +1,3 @@
-.clock-picker {
-  display: contents;
-}
-
 .bs-time::-webkit-calendar-picker-indicator {
   pointer-events: none;
 }
@@ -14,6 +10,7 @@
   padding: 0.25rem 0.5rem 1rem;
   background-color: var(--bs-secondary-bg);
   color: var(--bs-body-color);
+  pointer-events: auto;
 }
 
 .clock-arrows {

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

@@ -1 +1 @@
-.clock-picker{display:contents}.bs-time::-webkit-calendar-picker-indicator{pointer-events:none}.clock-widget{position:fixed;z-index:1080;width:20rem;margin:0;padding:.25rem .5rem 1rem;background-color:var(--bs-secondary-bg);color:var(--bs-body-color)}.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-tertiary-bg);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}
+.bs-time::-webkit-calendar-picker-indicator{pointer-events:none}.clock-widget{position:fixed;z-index:1080;width:20rem;margin:0;padding:.25rem .5rem 1rem;background-color:var(--bs-secondary-bg);color:var(--bs-body-color);pointer-events:auto}.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-tertiary-bg);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,35 +18,24 @@
     if (field.dataset.bsTime === "ready") return;
     field.dataset.bsTime = "ready";
 
-    var host = field.closest(".form-control") || field;
-    var picker = host.closest(".clock-picker");
-    if (!picker) {
-      picker = document.createElement("div");
-      picker.className = "clock-picker";
-      host.parentNode.insertBefore(picker, host);
-      picker.append(host);
-    }
-
-    var widget = picker.querySelector(".clock-widget");
-    if (!widget) {
-      widget = document.createElement("div");
-      widget.className = "clock-widget card bg-body-secondary";
-      widget.hidden = true;
-      widget.innerHTML =
-        '<div class="clock-arrows">' +
-          '<button class="btn btn-link clock-arrow clock-hour" type="button" aria-label="Uren">' + svg(LEFT) + "</button>" +
-          '<button class="btn btn-link clock-arrow clock-minute" type="button" aria-label="Minuten">' + svg(RIGHT) + "</button>" +
-        "</div>" +
-        '<div class="clock position-relative mx-auto bg-body-tertiary" role="group" aria-label="Kies een uur"></div>';
-      picker.append(widget);
-      document.body.append(widget);
-    }
+    var widget = document.createElement("div");
+    widget.className = "clock-widget card bg-body-secondary";
+    widget.hidden = true;
+    widget.innerHTML =
+      '<div class="clock-arrows">' +
+        '<button class="btn btn-link clock-arrow clock-hour" type="button" aria-label="Uren">' + svg(LEFT) + "</button>" +
+        '<button class="btn btn-link clock-arrow clock-minute" type="button" aria-label="Minuten">' + svg(RIGHT) + "</button>" +
+      "</div>" +
+      '<div class="clock position-relative mx-auto bg-body-tertiary" role="group" aria-label="Kies een uur"></div>';
+    document.body.append(widget);
 
     function placeWidget() {
       var rect = field.getBoundingClientRect();
       var width = widget.offsetWidth || 320;
       var left = rect.left;
       if (left + width > window.innerWidth - 8) left = Math.max(8, window.innerWidth - width - 8);
+      widget.style.position = "fixed";
+      widget.style.zIndex = "1080";
       widget.style.top = Math.round(rect.bottom + 4) + "px";
       widget.style.left = Math.round(left) + "px";
     }

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

@@ -1 +1 @@
-!function(){"use strict";var e="4.6rem",t="6.4rem";function n(e){return'<svg viewBox="0 0 24 24" aria-hidden="true"><path d="'+e+'"></path></svg>'}function r(r){if("ready"!==r.dataset.bsTime){r.dataset.bsTime="ready";var o=r.closest(".form-control")||r,a=o.closest(".clock-picker");a||((a=document.createElement("div")).className="clock-picker",o.parentNode.insertBefore(a,o),a.append(o));var i=a.querySelector(".clock-widget");i||((i=document.createElement("div")).className="clock-widget card bg-body-secondary",i.hidden=!0,i.innerHTML='<div class="clock-arrows"><button class="btn btn-link clock-arrow clock-hour" type="button" aria-label="Uren">'+n("M15.41 16.59 10.83 12l4.58-4.59L14 6l-6 6 6 6z")+'</button><button class="btn btn-link clock-arrow clock-minute" type="button" aria-label="Minuten">'+n("M8.59 16.59 13.17 12 8.59 7.41 10 6l6 6-6 6z")+'</button></div><div class="clock position-relative mx-auto bg-body-tertiary" role="group" aria-label="Kies een uur"></div>',a.append(i),document.body.append(i));var u=i.querySelector(".clock"),c=i.querySelector(".clock-hour"),d=i.querySelector(".clock-minute");if(u&&c&&d){var l=new Date,s=r.value?r.value.split(":"):[l.getHours(),l.getMinutes()],v=Number(s[0])||0,f=E(Number(s[1])||0),m="hour",p=150,b=document.createElement("div"),h=document.createElement("span");b.className="clock-hand bg-primary",h.className="clock-knob bg-primary",h.setAttribute("aria-hidden","true"),b.append(h),u.append(b),u.addEventListener("click",function(e){if(!e.target.closest(".clock-number")){var t=function(e){var t=u.getBoundingClientRect(),n=e.clientX-(t.left+t.width/2),r=e.clientY-(t.top+t.height/2),o=(180*Math.atan2(n,-r)/Math.PI+360)%360;if("minute"===m)return E(Math.round(o/6)%60);var a=Math.round(o/30)%12;return Math.hypot(n,r)<.32*t.width?0===a?0:a+12:0===a?12:a}(e);"minute"===m?f=t:(v=t,m="minute"),N(),M(),D()}}),c.addEventListener("click",function(){S("hour")}),d.addEventListener("click",function(){S("minute")}),r.addEventListener("mousedown",function(e){e.preventDefault(),r.focus()}),r.addEventListener("click",function(e){e.preventDefault(),x()}),r.addEventListener("keydown",function(e){(" "===e.key||"Enter"===e.key||e.altKey&&"ArrowDown"===e.key)&&(e.preventDefault(),x())}),r.addEventListener("focus",x),r.addEventListener("blur",A),i.addEventListener("mousedown",function(e){e.preventDefault()}),document.addEventListener("mousedown",function(e){r===e.target||i.contains(e.target)||A()}),window.addEventListener("resize",g),window.addEventListener("scroll",g,!0),r.addEventListener("input",function(){if(r.value){var e=r.value.split(":"),t=Number(e[0]),n=Number(e[1]);n!==f?m="minute":t!==v&&(m="hour"),v=t,f=n,M(),D()}});var y=Object.getOwnPropertyDescriptor(HTMLInputElement.prototype,"step");y&&y.set&&Object.defineProperty(r,"step",{configurable:!0,get:function(){return y.get.call(r)},set:function(e){y.set.call(r,e),P()}}),new MutationObserver(P).observe(r,{attributes:!0,attributeFilter:["step"]}),M(),r.value||(r.value=k(v)+":"+k(f)),D(),A()}}function g(){var e=r.getBoundingClientRect(),t=i.offsetWidth||320,n=e.left;n+t>window.innerWidth-8&&(n=Math.max(8,window.innerWidth-t-8)),i.style.top=Math.round(e.bottom+4)+"px",i.style.left=Math.round(n)+"px"}function k(e){return String(e).padStart(2,"0")}function w(){var e=Number(r.getAttribute("step")||r.step);return(!e||e<60)&&(e=60),Math.max(1,Math.round(e/60))}function E(e){var t=w();return(Math.round(e/t)*t%60+60)%60}function L(){p+=((("hour"===m?v%12*30:6*f)-p)%360+540)%360-180,b.style.setProperty("--angle",p+"deg"),b.style.setProperty("--hand","hour"===m&&(0===v||v>12)?e:t)}function M(){c.disabled="hour"===m,d.disabled="minute"===m}function N(){r.value=k(v)+":"+k(f)}function S(e){m!==e&&(m=e,M(),D())}function D(){u.querySelectorAll(".clock-number").forEach(function(e){e.remove()}),u.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],r="hour"===m?v:f;L(),n.forEach(function(n,o){var a=document.createElement("button"),i="hour"===m&&o>=12,c=30*("hour"===m?o%12:o),d="minute"===m&&!function(e){return e%w()===0}(n);a.type="button",a.className="clock-number",a.textContent=0===n?"00":String(n),a.dataset.value=String(n),a.disabled=d,a.setAttribute("aria-pressed",d||n!==r?"false":"true"),a.style.setProperty("--angle",c+"deg"),a.style.setProperty("--radius",i?e:t),a.addEventListener("click",function(){a.disabled||("hour"===m?(v=n,m="minute"):f=n,N(),M(),D())}),u.append(a)})}function x(){i.hidden=!1,g()}function A(){i.hidden=!0}function P(){f=E(f),r.value=k(v)+":"+k(f),D()}}function o(){document.querySelectorAll(".bs-time").forEach(r)}"loading"===document.readyState?document.addEventListener("DOMContentLoaded",o):o()}();
+!function(){"use strict";var e="4.6rem",t="6.4rem";function n(e){return'<svg viewBox="0 0 24 24" aria-hidden="true"><path d="'+e+'"></path></svg>'}function r(r){if("ready"!==r.dataset.bsTime){r.dataset.bsTime="ready";var i=document.createElement("div");i.className="clock-widget card bg-body-secondary",i.hidden=!0,i.innerHTML='<div class="clock-arrows"><button class="btn btn-link clock-arrow clock-hour" type="button" aria-label="Uren">'+n("M15.41 16.59 10.83 12l4.58-4.59L14 6l-6 6 6 6z")+'</button><button class="btn btn-link clock-arrow clock-minute" type="button" aria-label="Minuten">'+n("M8.59 16.59 13.17 12 8.59 7.41 10 6l6 6-6 6z")+'</button></div><div class="clock position-relative mx-auto bg-body-tertiary" role="group" aria-label="Kies een uur"></div>',document.body.append(i);var o=i.querySelector(".clock"),a=i.querySelector(".clock-hour"),u=i.querySelector(".clock-minute");if(o&&a&&u){var c=new Date,d=r.value?r.value.split(":"):[c.getHours(),c.getMinutes()],l=Number(d[0])||0,s=k(Number(d[1])||0),f="hour",v=150,b=document.createElement("div"),m=document.createElement("span");b.className="clock-hand bg-primary",m.className="clock-knob bg-primary",m.setAttribute("aria-hidden","true"),b.append(m),o.append(b),o.addEventListener("click",function(e){if(!e.target.closest(".clock-number")){var t=function(e){var t=o.getBoundingClientRect(),n=e.clientX-(t.left+t.width/2),r=e.clientY-(t.top+t.height/2),i=(180*Math.atan2(n,-r)/Math.PI+360)%360;if("minute"===f)return k(Math.round(i/6)%60);var a=Math.round(i/30)%12;return Math.hypot(n,r)<.32*t.width?0===a?0:a+12:0===a?12:a}(e);"minute"===f?s=t:(l=t,f="minute"),L(),E(),S()}}),a.addEventListener("click",function(){M("hour")}),u.addEventListener("click",function(){M("minute")}),r.addEventListener("mousedown",function(e){e.preventDefault(),r.focus()}),r.addEventListener("click",function(e){e.preventDefault(),x()}),r.addEventListener("keydown",function(e){(" "===e.key||"Enter"===e.key||e.altKey&&"ArrowDown"===e.key)&&(e.preventDefault(),x())}),r.addEventListener("focus",x),r.addEventListener("blur",N),i.addEventListener("mousedown",function(e){e.preventDefault()}),document.addEventListener("mousedown",function(e){r===e.target||i.contains(e.target)||N()}),window.addEventListener("resize",h),window.addEventListener("scroll",h,!0),r.addEventListener("input",function(){if(r.value){var e=r.value.split(":"),t=Number(e[0]),n=Number(e[1]);n!==s?f="minute":t!==l&&(f="hour"),l=t,s=n,E(),S()}});var p=Object.getOwnPropertyDescriptor(HTMLInputElement.prototype,"step");p&&p.set&&Object.defineProperty(r,"step",{configurable:!0,get:function(){return p.get.call(r)},set:function(e){p.set.call(r,e),D()}}),new MutationObserver(D).observe(r,{attributes:!0,attributeFilter:["step"]}),E(),r.value||(r.value=y(l)+":"+y(s)),S(),N()}}function h(){var e=r.getBoundingClientRect(),t=i.offsetWidth||320,n=e.left;n+t>window.innerWidth-8&&(n=Math.max(8,window.innerWidth-t-8)),i.style.position="fixed",i.style.zIndex="1080",i.style.top=Math.round(e.bottom+4)+"px",i.style.left=Math.round(n)+"px"}function y(e){return String(e).padStart(2,"0")}function g(){var e=Number(r.getAttribute("step")||r.step);return(!e||e<60)&&(e=60),Math.max(1,Math.round(e/60))}function k(e){var t=g();return(Math.round(e/t)*t%60+60)%60}function w(){v+=((("hour"===f?l%12*30:6*s)-v)%360+540)%360-180,b.style.setProperty("--angle",v+"deg"),b.style.setProperty("--hand","hour"===f&&(0===l||l>12)?e:t)}function E(){a.disabled="hour"===f,u.disabled="minute"===f}function L(){r.value=y(l)+":"+y(s)}function M(e){f!==e&&(f=e,E(),S())}function S(){o.querySelectorAll(".clock-number").forEach(function(e){e.remove()}),o.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],r="hour"===f?l:s;w(),n.forEach(function(n,i){var a=document.createElement("button"),u="hour"===f&&i>=12,c=30*("hour"===f?i%12:i),d="minute"===f&&!function(e){return e%g()===0}(n);a.type="button",a.className="clock-number",a.textContent=0===n?"00":String(n),a.dataset.value=String(n),a.disabled=d,a.setAttribute("aria-pressed",d||n!==r?"false":"true"),a.style.setProperty("--angle",c+"deg"),a.style.setProperty("--radius",u?e:t),a.addEventListener("click",function(){a.disabled||("hour"===f?(l=n,f="minute"):s=n,L(),E(),S())}),o.append(a)})}function x(){i.hidden=!1,h()}function N(){i.hidden=!0}function D(){s=k(s),r.value=y(l)+":"+y(s),S()}}function i(){document.querySelectorAll(".bs-time").forEach(r)}"loading"===document.readyState?document.addEventListener("DOMContentLoaded",i):i()}();

package/package.json

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

package/src/js/bootstrap-time.js

@@ -18,35 +18,24 @@
     if (field.dataset.bsTime === "ready") return;
     field.dataset.bsTime = "ready";
 
-    var host = field.closest(".form-control") || field;
-    var picker = host.closest(".clock-picker");
-    if (!picker) {
-      picker = document.createElement("div");
-      picker.className = "clock-picker";
-      host.parentNode.insertBefore(picker, host);
-      picker.append(host);
-    }
-
-    var widget = picker.querySelector(".clock-widget");
-    if (!widget) {
-      widget = document.createElement("div");
-      widget.className = "clock-widget card bg-body-secondary";
-      widget.hidden = true;
-      widget.innerHTML =
-        '<div class="clock-arrows">' +
-          '<button class="btn btn-link clock-arrow clock-hour" type="button" aria-label="Uren">' + svg(LEFT) + "</button>" +
-          '<button class="btn btn-link clock-arrow clock-minute" type="button" aria-label="Minuten">' + svg(RIGHT) + "</button>" +
-        "</div>" +
-        '<div class="clock position-relative mx-auto bg-body-tertiary" role="group" aria-label="Kies een uur"></div>';
-      picker.append(widget);
-      document.body.append(widget);
-    }
+    var widget = document.createElement("div");
+    widget.className = "clock-widget card bg-body-secondary";
+    widget.hidden = true;
+    widget.innerHTML =
+      '<div class="clock-arrows">' +
+        '<button class="btn btn-link clock-arrow clock-hour" type="button" aria-label="Uren">' + svg(LEFT) + "</button>" +
+        '<button class="btn btn-link clock-arrow clock-minute" type="button" aria-label="Minuten">' + svg(RIGHT) + "</button>" +
+      "</div>" +
+      '<div class="clock position-relative mx-auto bg-body-tertiary" role="group" aria-label="Kies een uur"></div>';
+    document.body.append(widget);
 
     function placeWidget() {
       var rect = field.getBoundingClientRect();
       var width = widget.offsetWidth || 320;
       var left = rect.left;
       if (left + width > window.innerWidth - 8) left = Math.max(8, window.innerWidth - width - 8);
+      widget.style.position = "fixed";
+      widget.style.zIndex = "1080";
       widget.style.top = Math.round(rect.bottom + 4) + "px";
       widget.style.left = Math.round(left) + "px";
     }

package/src/scss/bootstrap-time.scss

@@ -2,10 +2,6 @@
 // Source entrypoint. `npm run build` writes dist/css/bootstrap-time.css
 // and dist/css/bootstrap-time.min.css.
 
-.clock-picker {
-  display: contents;
-}
-
 .bs-time::-webkit-calendar-picker-indicator {
   pointer-events: none;
 }
@@ -18,6 +14,7 @@
   padding: 0.25rem 0.5rem 1rem;
   background-color: var(--bs-secondary-bg);
   color: var(--bs-body-color);
+  pointer-events: auto;
 }
 
 .clock-arrows {