bootstrap-time 0.4.0 → 0.4.1

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.4.0/dist/css/bootstrap-time.min.css">
-<script src="https://cdn.jsdelivr.net/npm/bootstrap-time@0.4.0/dist/js/bootstrap-time.min.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-time@0.4.1/dist/css/bootstrap-time.min.css">
+<script src="https://cdn.jsdelivr.net/npm/bootstrap-time@0.4.1/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.4.1
+
+- Also notifies jQuery with `triggerHandler('change')`, so delegated and direct jQuery listeners both run.
+
 ### 0.4.0
 
 - Changing the time dispatches `input` and `change`, so jQuery `.on('change')` fires.

package/dist/js/bootstrap-time.js

@@ -104,12 +104,23 @@
       minuteArrow.disabled = mode === "minute";
     }
 
-    function writeInput() {
-      var next = pad(hour) + ":" + pad(minute);
-      if (field.value === next) return;
-      field.value = next;
+    function notify(field) {
       field.dispatchEvent(new Event("input", { bubbles: true }));
       field.dispatchEvent(new Event("change", { bubbles: true }));
+      var jq = window.jQuery || window.$;
+      if (jq && jq.fn) {
+        jq(field).triggerHandler("input");
+        jq(field).triggerHandler("change");
+      }
+    }
+
+    function writeInput() {
+      var next = pad(hour) + ":" + pad(minute);
+      if (field.value.slice(0, 5) === next) return;
+      var setter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value");
+      if (setter && setter.set) setter.set.call(field, next);
+      else field.value = next;
+      notify(field);
     }
 
     function showMode(nextMode) {

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 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=E(Number(d[1])||0),v="hour",b=150,f=document.createElement("div"),m=document.createElement("span");f.className="clock-hand bg-primary",m.className="clock-knob bg-primary",m.setAttribute("aria-hidden","true"),f.append(m),o.append(f),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"===v)return E(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"===v?s=t:(l=t,v="minute"),L(),w(),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?v="minute":t!==l&&(v="hour"),l=t,s=n,w(),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"]}),w(),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 E(e){var t=g();return(Math.round(e/t)*t%60+60)%60}function k(){b+=((("hour"===v?l%12*30:6*s)-b)%360+540)%360-180,f.style.setProperty("--angle",b+"deg"),f.style.setProperty("--hand","hour"===v&&(0===l||l>12)?e:t)}function w(){a.disabled="hour"===v,u.disabled="minute"===v}function L(){var e=y(l)+":"+y(s);r.value!==e&&(r.value=e,r.dispatchEvent(new Event("input",{bubbles:!0})),r.dispatchEvent(new Event("change",{bubbles:!0})))}function M(e){v!==e&&(v=e,w(),S())}function S(){o.querySelectorAll(".clock-number").forEach(function(e){e.remove()}),o.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?l:s;k(),n.forEach(function(n,i){var a=document.createElement("button"),u="hour"===v&&i>=12,c=30*("hour"===v?i%12:i),d="minute"===v&&!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"===v?(l=n,v="minute"):s=n,L(),w(),S())}),o.append(a)})}function x(){i.hidden=!1,h()}function N(){i.hidden=!0}function D(){s=E(s),L(),S()}}function i(){document.querySelectorAll(".bs-time").forEach(r)}"loading"===document.readyState?document.addEventListener("DOMContentLoaded",i):i()}();
+!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=w(Number(d[1])||0),v="hour",b=150,f=document.createElement("div"),p=document.createElement("span");f.className="clock-hand bg-primary",p.className="clock-knob bg-primary",p.setAttribute("aria-hidden","true"),f.append(p),o.append(f),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"===v)return w(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"===v?s=t:(l=t,v="minute"),L(),k(),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",D),i.addEventListener("mousedown",function(e){e.preventDefault()}),document.addEventListener("mousedown",function(e){r===e.target||i.contains(e.target)||D()}),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?v="minute":t!==l&&(v="hour"),l=t,s=n,k(),S()}});var m=Object.getOwnPropertyDescriptor(HTMLInputElement.prototype,"step");m&&m.set&&Object.defineProperty(r,"step",{configurable:!0,get:function(){return m.get.call(r)},set:function(e){m.set.call(r,e),N()}}),new MutationObserver(N).observe(r,{attributes:!0,attributeFilter:["step"]}),k(),r.value||(r.value=y(l)+":"+y(s)),S(),D()}}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 w(e){var t=g();return(Math.round(e/t)*t%60+60)%60}function E(){b+=((("hour"===v?l%12*30:6*s)-b)%360+540)%360-180,f.style.setProperty("--angle",b+"deg"),f.style.setProperty("--hand","hour"===v&&(0===l||l>12)?e:t)}function k(){a.disabled="hour"===v,u.disabled="minute"===v}function L(){var e=y(l)+":"+y(s);if(r.value.slice(0,5)!==e){var t=Object.getOwnPropertyDescriptor(HTMLInputElement.prototype,"value");t&&t.set?t.set.call(r,e):r.value=e,function(e){e.dispatchEvent(new Event("input",{bubbles:!0})),e.dispatchEvent(new Event("change",{bubbles:!0}));var t=window.jQuery||window.$;t&&t.fn&&(t(e).triggerHandler("input"),t(e).triggerHandler("change"))}(r)}}function M(e){v!==e&&(v=e,k(),S())}function S(){o.querySelectorAll(".clock-number").forEach(function(e){e.remove()}),o.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?l:s;E(),n.forEach(function(n,i){var a=document.createElement("button"),u="hour"===v&&i>=12,c=30*("hour"===v?i%12:i),d="minute"===v&&!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"===v?(l=n,v="minute"):s=n,L(),k(),S())}),o.append(a)})}function x(){i.hidden=!1,h()}function D(){i.hidden=!0}function N(){s=w(s),L(),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.4.0",
+  "version": "0.4.1",
   "description": "Time picker based on Bootstrap.",
   "author": "M. de Ridder",
   "license": "MIT",

package/src/js/bootstrap-time.js

@@ -104,12 +104,23 @@
       minuteArrow.disabled = mode === "minute";
     }
 
-    function writeInput() {
-      var next = pad(hour) + ":" + pad(minute);
-      if (field.value === next) return;
-      field.value = next;
+    function notify(field) {
       field.dispatchEvent(new Event("input", { bubbles: true }));
       field.dispatchEvent(new Event("change", { bubbles: true }));
+      var jq = window.jQuery || window.$;
+      if (jq && jq.fn) {
+        jq(field).triggerHandler("input");
+        jq(field).triggerHandler("change");
+      }
+    }
+
+    function writeInput() {
+      var next = pad(hour) + ":" + pad(minute);
+      if (field.value.slice(0, 5) === next) return;
+      var setter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value");
+      if (setter && setter.set) setter.set.call(field, next);
+      else field.value = next;
+      notify(field);
     }
 
     function showMode(nextMode) {