From fe4c1f3427b8fe53bfc2bcf2b73dca59efd3e366 Mon Sep 17 00:00:00 2001 From: nadchif Date: Sun, 14 Nov 2021 23:33:20 +0800 Subject: [PATCH] includes updated links to landing page --- dist/html-duration-picker.min.js | 4 ++-- index.html | 28 ++++++++++++++++++++-------- 2 files changed, 22 insertions(+), 10 deletions(-) diff --git a/dist/html-duration-picker.min.js b/dist/html-duration-picker.min.js index b46688e..de1b9fe 100644 --- a/dist/html-duration-picker.min.js +++ b/dist/html-duration-picker.min.js @@ -4,8 +4,8 @@ * html-duration-picker.js * * @description Turn an html input box to a duration picker, without jQuery - * @version 2.3.0 + * @version 2.3.1 * @author Chif * @license Apache-2.0 * - */e.default=function(){window.NodeList&&!window.NodeList.prototype.forEach&&(NodeList.prototype.forEach=Array.prototype.forEach);var t=".html-duration-picker-input-controls-wrapper .html-duration-picker { text-align: right; padding-right: 20px; box-sizing: border-box; width: 100%; margin: 0; cursor: text;}.html-duration-picker-input-controls-wrapper .scroll-btn { text-align: center; width: 16px; padding: 0 4px; border: none; cursor: default; position: absolute;}.html-duration-picker-input-controls-wrapper .caret { width: 0; height: 0; border-style: solid;}.html-duration-picker-input-controls-wrapper .caret.caret-up { border-width: 0 4px 5px 4px; border-color: transparent transparent #000 transparent;}.html-duration-picker-input-controls-wrapper .caret.caret-down { border-width: 5px 4px 0 4px; border-color: #000 transparent transparent transparent;}.html-duration-picker-input-controls-wrapper .controls { display: inline-block; position: absolute; top: 1px; padding: 2px 0;}.html-duration-picker-input-controls-wrapper { display: inline-block; position: relative; background: transparent; padding: 0; box-sizing: border-box;}",e=function(t,e){var r,n=t.target,a=n.selectionStart,o=n.value,i=o.indexOf(":"),u=o.lastIndexOf(":");return a<=i?r="hours":e||a<=u?r="minutes":!e&&a>u&&(r="seconds"),{cursorSelection:r,hideSeconds:e,hourMarker:i,minuteMarker:u}},r=function(t,e){t.setAttribute("data-adjustment-factor",e)},n=function(t){var n=t.target,o=a(n),i=e(t,o),u=i.cursorSelection,c=i.hourMarker,s=i.minuteMarker;if(u){var d=o?3:0;switch(u){case"hours":return r(n,3600),void t.target.setSelectionRange(0,c);case"minutes":return r(n,60),void t.target.setSelectionRange(c+1,s+d);case"seconds":default:return r(n,1),void t.target.setSelectionRange(s+1,s+3)}}},a=function(t){return void 0!==t.dataset.hideSeconds&&"false"!==t.dataset.hideSeconds},o=function(t,e){var r=Math.floor(e/3600);e%=3600;var n=Math.floor(e/60),o=e%60,i=String(r).padStart(2,"0"),u=String(n).padStart(2,"0"),c=String(o).padStart(2,"0"),s="".concat(i,":").concat(u);t.value=a(t)?s:"".concat(s,":").concat(c),t.dispatchEvent(function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{bubbles:!1,cancelable:!1};if("function"==typeof Event)return new Event(t);var r=document.createEvent("Event");return r.initEvent(t,e.bubbles,e.cancelable),r}("input"))},i=function(t,e){var r=!(arguments.length>2&&void 0!==arguments[2])||arguments[2],n=t.value.indexOf(":"),o=t.value.lastIndexOf(":"),i=a(t);r&&(t.focus(),t.select()),e>=3600?(t.selectionStart=0,t.selectionEnd=n):!i&&e<60?(t.selectionStart=o+1,t.selectionEnd=o+3):(t.selectionStart=n+1,t.selectionEnd=n+3,e=60),e>=1&&e<=3600&&t.setAttribute("data-adjustment-factor",e)},u=function(t){var e=1;return Number(t.getAttribute("data-adjustment-factor"))>0&&(e=Number(t.getAttribute("data-adjustment-factor"))),e},c=function(t,e){t.setAttribute("value",e)},s=function(t,e){var r=u(t),n=f(t.value);switch(e){case"up":n+=r;break;case"down":(n-=r)<0&&(n=0)}var a=p(t,n);o(t,a)},d=function(t,e){var r=u(t);switch(e){case"left":i(t,60*r);break;case"right":i(t,r/60)}},l=function(t,e){return RegExp(e?"^[0-9]{2,3}:[0-5][0-9]$":"^[0-9]{2,3}:[0-5][0-9]:[0-5][0-9]$").test(t)},p=function(t,e){var r=m(t),n=r.maxDuration,a=r.minDuration;return Math.min(Math.max(e,a),n)},f=function(t){if(!l(t))return console.warn("value '".concat(t," is not a valid duration value")),0;var e=t.split(":");return e.length<2?0:Number(e[2]||0)+Number(60*e[1])+Number(60*e[0]*60)},v=function(t){var r=t.target,n=a(r),o=e(t,n).cursorSelection,s=r.value.split(":");if(r.dataset.duration&&l(r.dataset.duration,n)&&(n&&2!==s.length||!n&&3!==s.length))c(r,r.dataset.duration);else if(n||3===s.length)if(n&&2!==s.length)c(r,"00:00");else{isNaN(s[0])&&(s[0]="00"),(isNaN(s[1])||s[1]<0)&&(s[1]="00"),(s[1]>59||s[1].length>2)&&(s[1]="59"),n||2!==s[1].length||s[1].slice(-1)!==t.key||"minutes"!==o||d(r,"right"),n||((isNaN(s[2])||s[2]<0)&&(s[2]="00"),(s[2]>59||s[2].length>2)&&(s[2]="59")),c(r,s.join(":"));var p=u(r);i(r,p)}else c(r,"00:00:00")},b=function(t){var e=t.target,r=e.value||e.dataset.duration,n=f(r);o(e,p(e,n))},h=function(t){if(["ArrowDown","ArrowUp","ArrowLeft","ArrowRight","Enter"].includes(t.key)){switch(t.key){case"ArrowDown":s(t.target,"down");break;case"ArrowUp":s(t.target,"up");break;case"ArrowLeft":d(t.target,"left");break;case"ArrowRight":d(t.target,"right");break;case"Enter":b(t),t.target.blur()}t.preventDefault()}if("Tab"===t.key){var e=u(t.target),r=a(t.target)?3600:60,n=t.shiftKey?"left":"right";d(t.target,n),("left"===n&&e<3600||"right"===n&&e>=r)&&t.preventDefault()}if(isNaN(t.key)&&!["Backspace","ArrowDown","ArrowUp","Tab"].includes(t.key))return t.preventDefault(),!1},g=function(t,e,r){var n=t.dataset[e];return l(n,a(t))?f(n):r},m=function(t){return{minDuration:g(t,"durationMin",0),maxDuration:g(t,"durationMax",1/0)}},y=function(e){if(e){var r=document.head||document.getElementsByTagName("head")[0],c=document.createElement("style");r.appendChild(c),c.styleSheet?c.styleSheet.cssText=t:c.appendChild(document.createTextNode(t))}return document.querySelectorAll("input.html-duration-picker").forEach((function(t){if("true"!=t.getAttribute("data-upgraded")){var e,r=t.currentStyle||window.getComputedStyle(t),c=r.marginRight,d=r.marginLeft,m=parseFloat(r.borderRight),y=parseFloat(r.borderLeft),w=parseFloat(r.paddingRight),x=parseFloat(r.paddingLeft),k=parseFloat(r.width);e="content-box"===r.boxSizing?k+m+y+w+x:k,t.setAttribute("data-upgraded",!0),t.value&&l(t.value,a(t))||o(t,function(t){var e=g(t,"duration",0),r=f(e);return p(t,r)}(t)),t.setAttribute("aria-label","Duration Picker"),t.addEventListener("keydown",h),t.addEventListener("focus",n),t.addEventListener("mouseup",n),t.addEventListener("change",v),t.addEventListener("blur",b),t.addEventListener("keyup",v),t.addEventListener("drop",(function(t){return t.preventDefault()}));var E=document.createElement("button"),A=document.createElement("button"),S=[E,A];E.setAttribute("class","scroll-btn"),A.setAttribute("class","scroll-btn"),E.setAttribute("type","button"),A.setAttribute("type","button"),E.setAttribute("aria-label","Increase duration"),A.setAttribute("aria-label","Decrease duration"),E.setAttribute("style","height:".concat(t.offsetHeight/2-1,"px !important; top: 1px;")),A.setAttribute("style","height:".concat(t.offsetHeight/2-1,"px !important; top: ").concat(t.offsetHeight/2-1,"px;"));var L=document.createElement("div"),D=document.createElement("div");L.setAttribute("class","caret caret-up"),D.setAttribute("class","caret caret-down "),A.appendChild(D),E.appendChild(L),S.forEach((function(e){var r;e.addEventListener("mousedown",(function(n){n.target.style.transform="translateY(1px)",n.preventDefault(),e==E?(s(t,"up"),r=setInterval(s,200,t,"up")):(s(t,"down"),r=setInterval(s,200,t,"down"))})),e.addEventListener("keypress",(function(r){r.target.style.transform="translateY(1px)","Enter"==r.key&&(r.preventDefault(),s(t,e==E?"up":"down"))})),e===E&&e.addEventListener("keydown",(function(e){"Tab"===e.key&&e.shiftKey&&(i(t,1),e.preventDefault())})),e.addEventListener("keyup",(function(e){if("Enter"==e.key){var r=u(t);i(t,r)}})),e.addEventListener("mouseup",(function(e){e.target.style.transform="translateY(0)";var n=u(t);i(t,n),clearInterval(r)})),e.addEventListener("mouseleave",(function(e){if(e.target.style.transform="translateY(0)",r){clearInterval(r);var n=u(t);i(t,n)}}))}));var N=document.createElement("div");N.setAttribute("class","controls"),N.setAttribute("style","left: ".concat(e-20,"px; height:").concat(t.offsetHeight,"px;")),N.appendChild(E),N.appendChild(A);var j=document.createElement("div");j.setAttribute("class","html-duration-picker-input-controls-wrapper"),j.setAttribute("style","width: ".concat(e,"px; margin-left: ").concat(d,"; margin-right: ").concat(c,";")),t.parentNode.insertBefore(j,t),j.appendChild(t),j.appendChild(N)}})),!0};return window.addEventListener("DOMContentLoaded",(function(){return y(!0)})),{init:function(){return y(!0)},refresh:function(){return y(!1)}}}()}]).default})); \ No newline at end of file + */e.default=function(){window.NodeList&&!window.NodeList.prototype.forEach&&(NodeList.prototype.forEach=Array.prototype.forEach);var t=".html-duration-picker-input-controls-wrapper .html-duration-picker { text-align: right; padding-right: 20px; box-sizing: border-box; width: 100%; margin: 0; cursor: text;}.html-duration-picker-input-controls-wrapper .scroll-btn { text-align: center; width: 16px; padding: 0 4px; border: none; cursor: default; position: absolute;}.html-duration-picker-input-controls-wrapper .caret { width: 0; height: 0; border-style: solid;}.html-duration-picker-input-controls-wrapper .caret.caret-up { border-width: 0 4px 5px 4px; border-color: transparent transparent #000 transparent;}.html-duration-picker-input-controls-wrapper .caret.caret-down { border-width: 5px 4px 0 4px; border-color: #000 transparent transparent transparent;}.html-duration-picker-input-controls-wrapper .controls { display: inline-block; position: absolute; top: 1px; padding: 2px 0;}.html-duration-picker-input-controls-wrapper { display: inline-block; position: relative; background: transparent; padding: 0; box-sizing: border-box;}",e=function(t,e){var r,n=t.target,a=n.selectionStart,o=n.value,i=o.indexOf(":"),u=o.lastIndexOf(":");return a<=i?r="hours":e||a<=u?r="minutes":!e&&a>u&&(r="seconds"),{cursorSelection:r,hideSeconds:e,hourMarker:i,minuteMarker:u}},r=function(t,e){t.setAttribute("data-adjustment-factor",e)},n=function(t){var n=t.target,o=a(n),i=e(t,o),u=i.cursorSelection,c=i.hourMarker,s=i.minuteMarker;if(u){var d=o?3:0;switch(u){case"hours":return r(n,3600),void t.target.setSelectionRange(0,c);case"minutes":return r(n,60),void t.target.setSelectionRange(c+1,s+d);case"seconds":default:return r(n,1),void t.target.setSelectionRange(s+1,s+3)}}},a=function(t){return void 0!==t.dataset.hideSeconds&&"false"!==t.dataset.hideSeconds},o=function(t,e){var r=Math.floor(e/3600);e%=3600;var n=Math.floor(e/60),o=e%60,i=String(r).padStart(2,"0"),u=String(n).padStart(2,"0"),c=String(o).padStart(2,"0"),s="".concat(i,":").concat(u);t.value=a(t)?s:"".concat(s,":").concat(c),t.dispatchEvent(function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{bubbles:!1,cancelable:!1};if("function"==typeof Event)return new Event(t);var r=document.createEvent("Event");return r.initEvent(t,e.bubbles,e.cancelable),r}("input"))},i=function(t,e){var r=!(arguments.length>2&&void 0!==arguments[2])||arguments[2],n=t.value.indexOf(":"),o=t.value.lastIndexOf(":"),i=a(t);r&&(t.focus(),t.select()),e>=3600?(t.selectionStart=0,t.selectionEnd=n):!i&&e<60?(t.selectionStart=o+1,t.selectionEnd=o+3):(t.selectionStart=n+1,t.selectionEnd=n+3,e=60),e>=1&&e<=3600&&t.setAttribute("data-adjustment-factor",e)},u=function(t){var e=1;return Number(t.getAttribute("data-adjustment-factor"))>0&&(e=Number(t.getAttribute("data-adjustment-factor"))),e},c=function(t,e){t.setAttribute("value",e)},s=function(t,e){var r=u(t),n=f(t.value);switch(e){case"up":n+=r;break;case"down":(n-=r)<0&&(n=0)}var a=p(t,n);o(t,a)},d=function(t,e){var r=u(t);switch(e){case"left":i(t,60*r);break;case"right":i(t,r/60)}},l=function(t,e){return RegExp(e?"^[0-9]{2,3}:[0-5][0-9]$":"^[0-9]{2,3}:[0-5][0-9]:[0-5][0-9]$").test(t)},p=function(t,e){var r=m(t),n=r.maxDuration,a=r.minDuration;return Math.min(Math.max(e,a),n)},f=function(t){if(!l(t))return 0;var e=t.split(":");return e.length<2?0:Number(e[2]||0)+Number(60*e[1])+Number(60*e[0]*60)},b=function(t){var r=t.target,n=a(r),o=e(t,n).cursorSelection,s=r.value.split(":");if(r.dataset.duration&&l(r.dataset.duration,n)&&(n&&2!==s.length||!n&&3!==s.length))c(r,r.dataset.duration);else if(n||3===s.length)if(n&&2!==s.length)c(r,"00:00");else{isNaN(s[0])&&(s[0]="00"),(isNaN(s[1])||s[1]<0)&&(s[1]="00"),(s[1]>59||s[1].length>2)&&(s[1]="59"),n||2!==s[1].length||s[1].slice(-1)!==t.key||"minutes"!==o||d(r,"right"),n||((isNaN(s[2])||s[2]<0)&&(s[2]="00"),(s[2]>59||s[2].length>2)&&(s[2]="59")),c(r,s.join(":"));var p=u(r);i(r,p)}else c(r,"00:00:00")},v=function(t){var e=t.target,r=e.value||e.dataset.duration,n=f(r);o(e,p(e,n))},h=function(t){if(["ArrowDown","ArrowUp","ArrowLeft","ArrowRight","Enter"].includes(t.key)){switch(t.key){case"ArrowDown":s(t.target,"down");break;case"ArrowUp":s(t.target,"up");break;case"ArrowLeft":d(t.target,"left");break;case"ArrowRight":d(t.target,"right");break;case"Enter":v(t),t.target.blur()}t.preventDefault()}if("Tab"===t.key){var e=u(t.target),r=a(t.target)?3600:60,n=t.shiftKey?"left":"right";d(t.target,n),("left"===n&&e<3600||"right"===n&&e>=r)&&t.preventDefault()}if(isNaN(t.key)&&!["Backspace","ArrowDown","ArrowUp","Tab"].includes(t.key))return t.preventDefault(),!1},g=function(t,e,r){var n=t.dataset[e];return l(n,a(t))?f(n):r},m=function(t){return{minDuration:g(t,"durationMin",0),maxDuration:g(t,"durationMax",1/0)}},y=function(e){if(e){var r=document.head||document.getElementsByTagName("head")[0],c=document.createElement("style");r.appendChild(c),c.styleSheet?c.styleSheet.cssText=t:c.appendChild(document.createTextNode(t))}return document.querySelectorAll("input.html-duration-picker").forEach((function(t){if("true"!=t.getAttribute("data-upgraded")){var e,r=t.currentStyle||window.getComputedStyle(t),c=r.marginRight,d=r.marginLeft,m=parseFloat(r.borderRight),y=parseFloat(r.borderLeft),w=parseFloat(r.paddingRight),x=parseFloat(r.paddingLeft),k=parseFloat(r.width);e="content-box"===r.boxSizing?k+m+y+w+x:k,t.setAttribute("data-upgraded",!0),t.value&&l(t.value,a(t))||o(t,function(t){var e=g(t,"duration",0),r=f(e);return p(t,r)}(t)),t.setAttribute("aria-label","Duration Picker"),t.addEventListener("keydown",h),t.addEventListener("focus",n),t.addEventListener("mouseup",n),t.addEventListener("change",b),t.addEventListener("blur",v),t.addEventListener("keyup",b),t.addEventListener("drop",(function(t){return t.preventDefault()}));var E=document.createElement("button"),A=document.createElement("button"),S=[E,A];E.setAttribute("class","scroll-btn"),A.setAttribute("class","scroll-btn"),E.setAttribute("type","button"),A.setAttribute("type","button"),E.setAttribute("aria-label","Increase duration"),A.setAttribute("aria-label","Decrease duration"),E.setAttribute("style","height:".concat(t.offsetHeight/2-1,"px !important; top: 1px;")),A.setAttribute("style","height:".concat(t.offsetHeight/2-1,"px !important; top: ").concat(t.offsetHeight/2-1,"px;"));var L=document.createElement("div"),D=document.createElement("div");L.setAttribute("class","caret caret-up"),D.setAttribute("class","caret caret-down "),A.appendChild(D),E.appendChild(L),S.forEach((function(e){var r;e.addEventListener("mousedown",(function(n){n.target.style.transform="translateY(1px)",n.preventDefault(),e==E?(s(t,"up"),r=setInterval(s,200,t,"up")):(s(t,"down"),r=setInterval(s,200,t,"down"))})),e.addEventListener("keypress",(function(r){r.target.style.transform="translateY(1px)","Enter"==r.key&&(r.preventDefault(),s(t,e==E?"up":"down"))})),e===E&&e.addEventListener("keydown",(function(e){"Tab"===e.key&&e.shiftKey&&(i(t,1),e.preventDefault())})),e.addEventListener("keyup",(function(e){if("Enter"==e.key){var r=u(t);i(t,r)}})),e.addEventListener("mouseup",(function(e){e.target.style.transform="translateY(0)";var n=u(t);i(t,n),clearInterval(r)})),e.addEventListener("mouseleave",(function(e){if(e.target.style.transform="translateY(0)",r){clearInterval(r);var n=u(t);i(t,n)}}))}));var N=document.createElement("div");N.setAttribute("class","controls"),N.setAttribute("style","left: ".concat(e-20,"px; height:").concat(t.offsetHeight,"px;")),N.appendChild(E),N.appendChild(A);var j=document.createElement("div");j.setAttribute("class","html-duration-picker-input-controls-wrapper"),j.setAttribute("style","width: ".concat(e,"px; margin-left: ").concat(d,"; margin-right: ").concat(c,";")),t.parentNode.insertBefore(j,t),j.appendChild(t),j.appendChild(N)}})),!0};return window.addEventListener("DOMContentLoaded",(function(){return y(!0)})),{init:function(){return y(!0)},refresh:function(){return y(!1)}}}()}]).default})); \ No newline at end of file diff --git a/index.html b/index.html index ee4a35d..9d96494 100644 --- a/index.html +++ b/index.html @@ -4,21 +4,30 @@

Example Usage

+

Download

- Include html-duration-picker.min.js in your HTML file, just before the </body> tag. like + Include download html-duration-picker.min.js + in your HTML file, just before the </body> tag. like this:

-
+
         
         <script src="html-duration-picker.min.js"></script>
         </body>
         
     
- +

CDN

+
+    
+    <script src="https://cdn.jsdelivr.net/npm/html-duration-picker@latest/dist/html-duration-picker.min.js"></script>
+    </body>
+    
+

add a html-duration-picker class on any <input>box. like this:

-
+
         
             <input class="html-duration-picker">
         
@@ -38,11 +47,14 @@ 

Result:

Features:

-Set default value to 15 minutes <input type="text" class="html-duration-picker" data-duration="00:15:00" >
+Set default value to 15 minutes +<input type="text" class="html-duration-picker" data-duration="00:15:00" >

-Set maximum value to 35 minutes <input type="text" class="html-duration-picker" data-duration-max="00:35:00" >
+Set maximum value to 35 minutes +<input type="text" class="html-duration-picker" data-duration-max="00:35:00" >

-Set minimum value to 5 minutes <input type="text" class="html-duration-picker" data-duration-min="00:05:00" >
+Set minimum value to 5 minutes +<input type="text" class="html-duration-picker" data-duration-min="00:05:00" >

- + \ No newline at end of file