bootstrap-time 0.2.0 → 0.2.2-beta

package/README.md

@@ -18,7 +18,7 @@ dist/                        generated, do not edit
 examples/                    HTML that points at dist
 ```
 
-`npm run build` compiles `src` into `dist`. Bootstrap 6 is required. The time field uses [form adornments](https://getbootstrap.com/docs/6.0/forms/form-adorn/), which Bootstrap 5.3 does not have. Bootstrap 5.3 can only place an addon beside the input with `input-group`, not inside it. The clock icon comes from bootstrap-icons.
+`npm run build` compiles `src` into `dist`. Bootstrap 5.3.8 or later 5.3 is required. The browser supplies the time field icon. Focus opens the clock and blur closes it.
 
 ## Usage
 
@@ -31,10 +31,9 @@ npm install bootstrap-time
 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.2.0/dist/css/bootstrap-time.min.css">
-<script src="https://cdn.jsdelivr.net/npm/bootstrap-time@0.2.0/dist/js/bootstrap-time.min.js"></script>
+<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>
 ```
 
 Local builds use the same paths under `dist/`:
@@ -55,6 +54,15 @@ Minute selection follows the input `step`, including when `step` changes: `60` a
 
 ## Changelog
 
+### 0.2.2-beta
+
+- The clock overlays the form and no longer stretches a smaller field.
+
+### 0.2.1-beta
+
+- Requires Bootstrap 5.3.8 instead of Bootstrap 6.
+- Removed the adorn button. The browser time icon stays, and focus and blur still open and close the clock.
+
 ### 0.2.0
 
 - Stable release. Attach the clock to any field with class `bs-time`.

package/dist/css/bootstrap-time.css

@@ -1,40 +1,15 @@
 .clock-picker {
-  position: relative;
-}
-.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: transparent;
-  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);
+  display: contents;
 }
 
 .clock-widget {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  z-index: 5;
+  position: fixed;
+  z-index: 1080;
   width: 20rem;
-  margin-top: 0.25rem;
+  margin: 0;
   padding: 0.25rem 0.5rem 1rem;
-  background-color: var(--bs-secondary-bg-subtle);
-  color: var(--bs-secondary-fg);
+  background-color: var(--bs-secondary-bg);
+  color: var(--bs-body-color);
 }
 
 .clock-arrows {
@@ -62,7 +37,7 @@
   fill: currentColor;
 }
 .btn.clock-arrow:hover, .btn.clock-arrow:focus-visible {
-  background-color: var(--bs-bg-3);
+  background-color: var(--bs-tertiary-bg);
   color: var(--bs-body-color);
 }
 .btn.clock-arrow:disabled, .btn.clock-arrow:disabled:hover {

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

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

package/dist/js/bootstrap-time.js

@@ -27,39 +27,28 @@
       picker.append(host);
     }
 
-    var adorn = field.closest(".form-adorn");
-    if (!adorn && field.classList.contains("form-control")) {
-      adorn = document.createElement("div");
-      adorn.className = "form-control form-adorn form-adorn-end";
-      field.parentNode.insertBefore(adorn, field);
-      adorn.append(field);
-      field.classList.remove("form-control");
-      field.classList.add("form-ghost");
-    }
-
-    var toggle = picker.querySelector(".clock-toggle");
-    if (!toggle && adorn) {
-      toggle = document.createElement("button");
-      toggle.type = "button";
-      toggle.className = "form-adorn-icon clock-toggle";
-      toggle.setAttribute("aria-label", "Klok");
-      toggle.setAttribute("aria-pressed", "false");
-      toggle.innerHTML = '<i class="bi bi-clock" aria-hidden="true"></i>';
-      adorn.insertBefore(toggle, adorn.firstChild);
-    }
-
     var widget = picker.querySelector(".clock-widget");
     if (!widget) {
       widget = document.createElement("div");
-      widget.className = "clock-widget card theme-secondary theme-subtle";
+      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 theme-inverse theme-subtle" role="group" aria-label="Kies een uur"></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);
+    }
+
+    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.top = Math.round(rect.bottom + 4) + "px";
+      widget.style.left = Math.round(left) + "px";
     }
 
     var clock = widget.querySelector(".clock");
@@ -181,17 +170,11 @@
 
     function showWidget() {
       widget.hidden = false;
-      if (toggle) toggle.setAttribute("aria-pressed", "true");
+      placeWidget();
     }
 
     function hideWidget() {
       widget.hidden = true;
-      if (toggle) toggle.setAttribute("aria-pressed", "false");
-    }
-
-    function toggleWidget() {
-      if (widget.hidden) showWidget();
-      else hideWidget();
     }
 
     function valueFromPoint(event) {
@@ -225,8 +208,17 @@
     minuteArrow.addEventListener("click", function () {
       showMode("minute");
     });
-    if (toggle) toggle.addEventListener("click", toggleWidget);
     field.addEventListener("focus", showWidget);
+    field.addEventListener("blur", hideWidget);
+    widget.addEventListener("mousedown", function (event) {
+      event.preventDefault();
+    });
+    document.addEventListener("mousedown", function (event) {
+      if (field === event.target || widget.contains(event.target)) return;
+      hideWidget();
+    });
+    window.addEventListener("resize", placeWidget);
+    window.addEventListener("scroll", placeWidget, true);
     field.addEventListener("input", function () {
       if (!field.value) return;
       var parts = field.value.split(":");
@@ -239,15 +231,6 @@
       updateArrows();
       renderClock();
     });
-    picker.addEventListener("mousedown", function (event) {
-      if (event.target === field) return;
-      if (toggle && toggle.contains(event.target)) return;
-      event.preventDefault();
-    });
-    document.addEventListener("mousedown", function (event) {
-      if (picker.contains(event.target)) return;
-      hideWidget();
-    });
 
     function applyStep() {
       minute = snapMinute(minute);

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=r.closest(".form-adorn");!i&&r.classList.contains("form-control")&&((i=document.createElement("div")).className="form-control form-adorn form-adorn-end",r.parentNode.insertBefore(i,r),i.append(r),r.classList.remove("form-control"),r.classList.add("form-ghost"));var c=a.querySelector(".clock-toggle");!c&&i&&((c=document.createElement("button")).type="button",c.className="form-adorn-icon clock-toggle",c.setAttribute("aria-label","Klok"),c.setAttribute("aria-pressed","false"),c.innerHTML='<i class="bi bi-clock" aria-hidden="true"></i>',i.insertBefore(c,i.firstChild));var u=a.querySelector(".clock-widget");u||((u=document.createElement("div")).className="clock-widget card theme-secondary theme-subtle",u.hidden=!0,u.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 theme-inverse theme-subtle" role="group" aria-label="Kies een uur"></div>',a.append(u));var s=u.querySelector(".clock"),l=u.querySelector(".clock-hour"),d=u.querySelector(".clock-minute");if(s&&l&&d){var m=new Date,f=r.value?r.value.split(":"):[m.getHours(),m.getMinutes()],b=Number(f[0])||0,p=M(Number(f[1])||0),v="hour",h=150,g=document.createElement("div"),k=document.createElement("span");g.className="clock-hand bg-primary",k.className="clock-knob bg-primary",k.setAttribute("aria-hidden","true"),g.append(k),s.append(g),s.addEventListener("click",function(e){if(!e.target.closest(".clock-number")){var t=function(e){var t=s.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"===v)return M(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"===v?p=t:(b=t,v="minute"),S(),w(),q()}}),l.addEventListener("click",function(){A("hour")}),d.addEventListener("click",function(){A("minute")}),c&&c.addEventListener("click",function(){u.hidden?P():B()}),r.addEventListener("focus",P),r.addEventListener("input",function(){if(r.value){var e=r.value.split(":"),t=Number(e[0]),n=Number(e[1]);n!==p?v="minute":t!==b&&(v="hour"),b=t,p=n,w(),q()}}),a.addEventListener("mousedown",function(e){e.target!==r&&(c&&c.contains(e.target)||e.preventDefault())}),document.addEventListener("mousedown",function(e){a.contains(e.target)||B()});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),O()}}),new MutationObserver(O).observe(r,{attributes:!0,attributeFilter:["step"]}),w(),r.value||(r.value=E(b)+":"+E(p)),q(),B()}}function E(e){return String(e).padStart(2,"0")}function L(){var e=Number(r.getAttribute("step")||r.step);return(!e||e<60)&&(e=60),Math.max(1,Math.round(e/60))}function M(e){var t=L();return(Math.round(e/t)*t%60+60)%60}function N(){h+=((("hour"===v?b%12*30:6*p)-h)%360+540)%360-180,g.style.setProperty("--angle",h+"deg"),g.style.setProperty("--hand","hour"===v&&(0===b||b>12)?e:t)}function w(){l.disabled="hour"===v,d.disabled="minute"===v}function S(){r.value=E(b)+":"+E(p)}function A(e){v!==e&&(v=e,w(),q())}function q(){s.querySelectorAll(".clock-number").forEach(function(e){e.remove()}),s.setAttribute("aria-label","hour"===v?"Kies een uur":"Kies de minuten");var n="hour"===v?[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"===v?b:p;N(),n.forEach(function(n,o){var a=document.createElement("button"),i="hour"===v&&o>=12,c=30*("hour"===v?o%12:o),u="minute"===v&&!function(e){return e%L()===0}(n);a.type="button",a.className="clock-number",a.textContent=0===n?"00":String(n),a.dataset.value=String(n),a.disabled=u,a.setAttribute("aria-pressed",u||n!==r?"false":"true"),a.style.setProperty("--angle",c+"deg"),a.style.setProperty("--radius",i?e:t),a.addEventListener("click",function(){a.disabled||("hour"===v?(b=n,v="minute"):p=n,S(),w(),q())}),s.append(a)})}function P(){u.hidden=!1,c&&c.setAttribute("aria-pressed","true")}function B(){u.hidden=!0,c&&c.setAttribute("aria-pressed","false")}function O(){p=M(p),r.value=E(b)+":"+E(p),q()}}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()],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()}();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bootstrap-time",
-  "version": "0.2.0",
+  "version": "0.2.2-beta",
   "description": "Time picker based on Bootstrap.",
   "author": "M. de Ridder",
   "license": "MIT",
@@ -60,7 +60,6 @@
     "terser": "^5.44.0"
   },
   "dependencies": {
-    "bootstrap": ">=6.0.0-alpha.1 <7",
-    "bootstrap-icons": "^1.13.2"
+    "bootstrap": ">=5.3.8 <6"
   }
 }

package/src/js/bootstrap-time.js

@@ -27,39 +27,28 @@
       picker.append(host);
     }
 
-    var adorn = field.closest(".form-adorn");
-    if (!adorn && field.classList.contains("form-control")) {
-      adorn = document.createElement("div");
-      adorn.className = "form-control form-adorn form-adorn-end";
-      field.parentNode.insertBefore(adorn, field);
-      adorn.append(field);
-      field.classList.remove("form-control");
-      field.classList.add("form-ghost");
-    }
-
-    var toggle = picker.querySelector(".clock-toggle");
-    if (!toggle && adorn) {
-      toggle = document.createElement("button");
-      toggle.type = "button";
-      toggle.className = "form-adorn-icon clock-toggle";
-      toggle.setAttribute("aria-label", "Klok");
-      toggle.setAttribute("aria-pressed", "false");
-      toggle.innerHTML = '<i class="bi bi-clock" aria-hidden="true"></i>';
-      adorn.insertBefore(toggle, adorn.firstChild);
-    }
-
     var widget = picker.querySelector(".clock-widget");
     if (!widget) {
       widget = document.createElement("div");
-      widget.className = "clock-widget card theme-secondary theme-subtle";
+      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 theme-inverse theme-subtle" role="group" aria-label="Kies een uur"></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);
+    }
+
+    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.top = Math.round(rect.bottom + 4) + "px";
+      widget.style.left = Math.round(left) + "px";
     }
 
     var clock = widget.querySelector(".clock");
@@ -181,17 +170,11 @@
 
     function showWidget() {
       widget.hidden = false;
-      if (toggle) toggle.setAttribute("aria-pressed", "true");
+      placeWidget();
     }
 
     function hideWidget() {
       widget.hidden = true;
-      if (toggle) toggle.setAttribute("aria-pressed", "false");
-    }
-
-    function toggleWidget() {
-      if (widget.hidden) showWidget();
-      else hideWidget();
     }
 
     function valueFromPoint(event) {
@@ -225,8 +208,17 @@
     minuteArrow.addEventListener("click", function () {
       showMode("minute");
     });
-    if (toggle) toggle.addEventListener("click", toggleWidget);
     field.addEventListener("focus", showWidget);
+    field.addEventListener("blur", hideWidget);
+    widget.addEventListener("mousedown", function (event) {
+      event.preventDefault();
+    });
+    document.addEventListener("mousedown", function (event) {
+      if (field === event.target || widget.contains(event.target)) return;
+      hideWidget();
+    });
+    window.addEventListener("resize", placeWidget);
+    window.addEventListener("scroll", placeWidget, true);
     field.addEventListener("input", function () {
       if (!field.value) return;
       var parts = field.value.split(":");
@@ -239,15 +231,6 @@
       updateArrows();
       renderClock();
     });
-    picker.addEventListener("mousedown", function (event) {
-      if (event.target === field) return;
-      if (toggle && toggle.contains(event.target)) return;
-      event.preventDefault();
-    });
-    document.addEventListener("mousedown", function (event) {
-      if (picker.contains(event.target)) return;
-      hideWidget();
-    });
 
     function applyStep() {
       minute = snapMinute(minute);

package/src/scss/bootstrap-time.scss

@@ -3,46 +3,17 @@
 // and dist/css/bootstrap-time.min.css.
 
 .clock-picker {
-  position: relative;
-
-  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: transparent;
-  color: var(--bs-form-adorn-icon-color, var(--bs-secondary-color));
-
-  .bi {
-    font-size: 1rem;
-    line-height: 1;
-  }
-
-  &:hover,
-  &:focus-visible {
-    background-color: var(--bs-bg-3);
-    color: var(--bs-body-color);
-  }
+  display: contents;
 }
 
 .clock-widget {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  z-index: 5;
+  position: fixed;
+  z-index: 1080;
   width: 20rem;
-  margin-top: 0.25rem;
+  margin: 0;
   padding: 0.25rem 0.5rem 1rem;
-  background-color: var(--bs-secondary-bg-subtle);
-  color: var(--bs-secondary-fg);
+  background-color: var(--bs-secondary-bg);
+  color: var(--bs-body-color);
 }
 
 .clock-arrows {
@@ -72,7 +43,7 @@
 
   &:hover,
   &:focus-visible {
-    background-color: var(--bs-bg-3);
+    background-color: var(--bs-tertiary-bg);
     color: var(--bs-body-color);
   }