bootstrap-time 0.2.2-beta → 0.2.3-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.2-beta/dist/css/bootstrap-time.min.css">
-<script src="https://cdn.jsdelivr.net/npm/bootstrap-time@0.2.2-beta/dist/js/bootstrap-time.min.js"></script>
+<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>
 ```
 
 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.3-beta
+
+- The native time picker no longer opens. The browser icon stays.
+
 ### 0.2.2-beta
 
 - The clock overlays the form and no longer stretches a smaller field.

package/dist/css/bootstrap-time.css

@@ -2,6 +2,10 @@
   display: contents;
 }
 
+.bs-time::-webkit-calendar-picker-indicator {
+  pointer-events: none;
+}
+
 .clock-widget {
   position: fixed;
   z-index: 1080;

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

@@ -1 +1 @@
-.clock-picker{display:contents}.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}
+.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}

package/dist/js/bootstrap-time.js

@@ -208,6 +208,20 @@
     minuteArrow.addEventListener("click", function () {
       showMode("minute");
     });
+    field.addEventListener("mousedown", function (event) {
+      event.preventDefault();
+      field.focus();
+    });
+    field.addEventListener("click", function (event) {
+      event.preventDefault();
+      showWidget();
+    });
+    field.addEventListener("keydown", function (event) {
+      if (event.key === " " || event.key === "Enter" || (event.altKey && event.key === "ArrowDown")) {
+        event.preventDefault();
+        showWidget();
+      }
+    });
     field.addEventListener("focus", showWidget);
     field.addEventListener("blur", hideWidget);
     widget.addEventListener("mousedown", function (event) {

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()],m=Number(s[0])||0,b=E(Number(s[1])||0),p="hour",v=150,f=document.createElement("div"),h=document.createElement("span");f.className="clock-hand bg-primary",h.className="clock-knob bg-primary",h.setAttribute("aria-hidden","true"),f.append(h),u.append(f),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"===p)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"===p?b=t:(m=t,p="minute"),N(),L(),x()}}),c.addEventListener("click",function(){S("hour")}),d.addEventListener("click",function(){S("minute")}),r.addEventListener("focus",function(){i.hidden=!1,g()}),r.addEventListener("blur",P),i.addEventListener("mousedown",function(e){e.preventDefault()}),document.addEventListener("mousedown",function(e){r===e.target||i.contains(e.target)||P()}),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!==b?p="minute":t!==m&&(p="hour"),m=t,b=n,L(),x()}});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),q()}}),new MutationObserver(q).observe(r,{attributes:!0,attributeFilter:["step"]}),L(),r.value||(r.value=k(m)+":"+k(b)),x(),P()}}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 M(){v+=((("hour"===p?m%12*30:6*b)-v)%360+540)%360-180,f.style.setProperty("--angle",v+"deg"),f.style.setProperty("--hand","hour"===p&&(0===m||m>12)?e:t)}function L(){c.disabled="hour"===p,d.disabled="minute"===p}function N(){r.value=k(m)+":"+k(b)}function S(e){p!==e&&(p=e,L(),x())}function x(){u.querySelectorAll(".clock-number").forEach(function(e){e.remove()}),u.setAttribute("aria-label","hour"===p?"Kies een uur":"Kies de minuten");var n="hour"===p?[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"===p?m:b;M(),n.forEach(function(n,o){var a=document.createElement("button"),i="hour"===p&&o>=12,c=30*("hour"===p?o%12:o),d="minute"===p&&!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"===p?(m=n,p="minute"):b=n,N(),L(),x())}),u.append(a)})}function P(){i.hidden=!0}function q(){b=E(b),r.value=k(m)+":"+k(b),x()}}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 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()}();

package/package.json

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

package/src/js/bootstrap-time.js

@@ -208,6 +208,20 @@
     minuteArrow.addEventListener("click", function () {
       showMode("minute");
     });
+    field.addEventListener("mousedown", function (event) {
+      event.preventDefault();
+      field.focus();
+    });
+    field.addEventListener("click", function (event) {
+      event.preventDefault();
+      showWidget();
+    });
+    field.addEventListener("keydown", function (event) {
+      if (event.key === " " || event.key === "Enter" || (event.altKey && event.key === "ArrowDown")) {
+        event.preventDefault();
+        showWidget();
+      }
+    });
     field.addEventListener("focus", showWidget);
     field.addEventListener("blur", hideWidget);
     widget.addEventListener("mousedown", function (event) {

package/src/scss/bootstrap-time.scss

@@ -6,6 +6,10 @@
   display: contents;
 }
 
+.bs-time::-webkit-calendar-picker-indicator {
+  pointer-events: none;
+}
+
 .clock-widget {
   position: fixed;
   z-index: 1080;