time-selector-plugin/dist/time-selector-plugin.umd.js

A lightweight and customizable time selector plugin with multi-language support and intuitive drag-and-drop functionality.

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).TimeSelector=t()}(this,function(){"use strict";function e(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=Array(t);n<t;n++)r[n]=e[n];return r}function t(e,t,n){return t&&function(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,a(r.key),r)}}(e.prototype,t),Object.defineProperty(e,"prototype",{writable:!1}),e}function n(e,t,n){return(t=a(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function r(t){return function(t){if(Array.isArray(t))return e(t)}(t)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(t)||function(t,n){if(t){if("string"==typeof t)return e(t,n);var r={}.toString.call(t).slice(8,-1);return"Object"===r&&t.constructor&&(r=t.constructor.name),"Map"===r||"Set"===r?Array.from(t):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?e(t,n):void 0}}(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function a(e){var t=function(e,t){if("object"!=typeof e||!e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var r=n.call(e,t);if("object"!=typeof r)return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e,"string");return"symbol"==typeof t?t:t+""}var l=function(){return t(function e(t){var r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),n(this,"innerContainer",null),n(this,"eventHandlers",{select:[],clear:[]}),this.languages={"zh-CN":{weekAndTime:"星期/时间",halfDay1:"00:00 - 12:00",halfDay2:"12:00 - 24:00",days:["星期一","星期二","星期三","星期四","星期五","星期六","星期日"]},"en-US":{weekAndTime:"Week/Time",halfDay1:"00:00 - 12:00",halfDay2:"12:00 - 24:00",days:["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"]}},this.container=t,this.isSelecting=!1,this.startCell=null,this.endCell=null,this.selectedTimeSlots=[],this.options=r,this.currentLanguage=r.language||"zh-CN",this.language=this.languages[this.currentLanguage],this.init()},[{key:"init",value:function(){var e=document.createElement("style");e.textContent=".time-selector-container {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  user-select: none;\n  overflow: hidden;\n}\n.time-selector-container .time-selector-header,\n.time-selector-container .row {\n  display: flex;\n  flex: 1;\n}\n.time-selector-second-header {\n    display: flex;\n    flex-direction: column;\n    flex: 1;\n    cursor: pointer;\n}\n.time-selector-container .cell {\n  box-sizing: border-box;\n  text-align: center;\n  padding: 5px 0;\n  font-size: 12px;\n  position: relative;\n}\n.time-selector-container .cell.empty {\n  width: 80px;\n}\n.time-selector-container .cell.time-header {\n  width: calc((100% - 80px) / 48);\n  font-size: 10px;\n  white-space: nowrap;\n  cursor: pointer;\n}\n.time-selector-container .cell.day-header {\n  width: 80px;\n  background-color: #f8f8f8;\n  font-weight: bold;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin: 1px;\n  cursor: pointer;\n}\n.time-selector-container .cell-box {\n    display: flex;\n    flex: 1;\n    padding: 0 1px 1px 0;\n    cursor: cell;\n}\n.time-selector-container .cell.time-cell {\n  flex: 1;\n  cursor: cell;\n  background-color: #f0f0f0;\n  border-radius: 2px;\n  overflow: hidden;\n  transition: background-color 0.1s;\n}\n.time-selector-container .cell.time-cell:hover {\n  background-color: #b2b0b0;\n}\n.time-selector-container .cell.time-cell.selected {\n  background-color: #007bff;\n  color: white;\n}\n.time-selector-container .cell.time-cell.temporary {\n  background-color: #007bff91;\n}\n.time-selector-header-row {\n  width: 100%;\n  display: flex;\n  flex: 1;\n  margin-bottom: 1px;\n}\n.time-selector-container .header-cell {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex: 1;\n  background-color: #f0f0f0;\n}\n.time-selector-container .header-cell:first-child {\n  margin-right: 1px;\n}\n.time-selector-container .hour-header {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex: 1;\n  background-color: #f9f9f9;\n  margin-left: 1px;\n}\n.time-selector-container .day-header {\n  background-color: #d9f7be;\n}",document.head.appendChild(e),this.createInnerContainer(),this.createHeader(),this.createGrid(),this.bindEvents()}},{key:"createInnerContainer",value:function(){var e=document.createElement("div");e.classList.add("time-selector-container"),this.innerContainer=e,this.container.appendChild(e)}},{key:"createHeader",value:function(){var e=this,t=document.createElement("div");t.classList.add("time-selector-header");var n=document.createElement("div");n.classList.add("time-selector-header-row");var r=document.createElement("div");r.classList.add("cell","day-header"),r.textContent=this.language.weekAndTime,r.addEventListener("click",function(){return e.selectAll()}),t.appendChild(r);for(var a=function(t){var r=document.createElement("div");r.classList.add("cell","header-cell"),r.setAttribute("colspan",24),r.textContent=0===t?e.language.halfDay1:e.language.halfDay2,r.addEventListener("click",function(){return e.selectHalfDay(1===t)}),n.appendChild(r)},l=0;l<2;l++)a(l);var i=document.createElement("div");i.appendChild(n);var s=document.createElement("div");s.classList.add("time-selector-header-row");for(var c=function(t){var n=document.createElement("div");n.classList.add("cell","hour-header"),n.textContent=t,n.addEventListener("click",function(){return e.selectCol(t)}),s.appendChild(n)},o=0;o<24;o++)c(o);i.appendChild(s),t.appendChild(i),i.classList.add("time-selector-second-header"),this.innerContainer.appendChild(t)}},{key:"createGrid",value:function(){var e=this;this.language.days.forEach(function(t,n){var r=document.createElement("div");r.classList.add("row");var a=document.createElement("div");a.classList.add("cell","day-header"),a.textContent=t,a.dataset.row=n,a.addEventListener("click",function(){return e.selectRow(n)}),r.appendChild(a);for(var l=0;l<24;l++)for(var i=0;i<2;i++){var s=document.createElement("div"),c=document.createElement("div");s.classList.add("cell","time-cell"),c.classList.add("cell-box"),s.dataset.row=n,s.dataset.col=2*l+i,s.dataset.selected="false",c.appendChild(s),r.appendChild(c)}e.innerContainer.appendChild(r)})}},{key:"bindEvents",value:function(){var e=this;["mousedown","auxclick","touchstart"].forEach(function(t){e.innerContainer.addEventListener(t,function(t){!e.isSelecting&&t.target.classList.contains("time-cell")&&(e.isSelecting=!0,e.startCell=t.target,e.updateSelection(t.target))})}),this.innerContainer.addEventListener("mousemove",function(t){e.isSelecting&&t.target.classList.contains("time-cell")&&e.updateSelection(t.target)}),["touchend","mouseup"].forEach(function(t){window.addEventListener(t,function(){e.isSelecting&&(e.isSelecting=!1,e.finalizeSelection(),e.emit("select",e.selectedTimeSlots.slice()),e.selectedTimeSlots.length=0)})})}},{key:"updateSelection",value:function(e){if(this.startCell&&e){this.endCell=e;var t=parseInt(this.startCell.dataset.row),n=parseInt(this.startCell.dataset.col),r=parseInt(this.endCell.dataset.row),a=parseInt(this.endCell.dataset.col),l=Math.min(t,r),i=Math.max(t,r),s=Math.min(n,a),c=Math.max(n,a);this.innerContainer.querySelectorAll(".time-cell.temporary").forEach(function(e){e.classList.remove("temporary")});for(var o=l;o<=i;o++)for(var d=s;d<=c;d++){var u=this.innerContainer.querySelector('.time-cell[data-row="'.concat(o,'"][data-col="').concat(d,'"]'));u&&u.classList.add("temporary")}}}},{key:"finalizeSelection",value:function(){var e=this;this.innerContainer.querySelectorAll(".time-cell.temporary").forEach(function(t){var n=!("false"===t.dataset.selected);t.dataset.selected=n?"false":"true",t.classList.toggle("selected",!n),t.classList.remove("temporary"),n||e.selectedTimeSlots.push({day:parseInt(t.dataset.row),time:parseInt(t.dataset.col)})})}},{key:"selectRow",value:function(e){var t=this,n=this.innerContainer.querySelectorAll('.time-cell[data-row="'.concat(e,'"]')),r=Array.from(n).every(function(e){return"true"===e.dataset.selected});r&&(this.selectedTimeSlots.length=0),n.forEach(function(n){n.dataset.selected=r?"false":"true",n.classList.toggle("selected",!r),r||t.selectedTimeSlots.push({day:e,time:parseInt(n.dataset.col)})}),this.emit("select",this.selectedTimeSlots.slice())}},{key:"selectCol",value:function(e){var t,n=this,a=this.container.querySelectorAll('.time-cell[data-col="'.concat(2*e,'"]')),l=this.container.querySelectorAll('.time-cell[data-col="'.concat(2*e+1,'"]')),i=(t=Array.from(a)).concat.apply(t,r(l)),s=i.every(function(e){return"true"===e.dataset.selected});s&&(this.selectedTimeSlots.length=0),i.forEach(function(e){e.dataset.selected=s?"false":"true",e.classList.toggle("selected",!s),s||n.selectedTimeSlots.push({day:parseInt(e.dataset.row),time:parseInt(e.dataset.col)})}),this.emit("select",this.selectedTimeSlots.slice())}},{key:"selectHalfDay",value:function(){for(var e=arguments.length>0&&void 0!==arguments[0]&&arguments[0],t=e?24:12,n=e?12:0;n<t;n++)this.selectCol(n)}},{key:"selectAll",value:function(){var e=this,t=this.container.querySelectorAll(".time-cell"),n=Array.from(t),r=n.every(function(e){return"true"===e.dataset.selected});r&&(this.selectedTimeSlots.length=0),n.forEach(function(t){t.dataset.selected=r?"false":"true",t.classList.toggle("selected",!r),r||e.selectedTimeSlots.push({day:parseInt(t.dataset.row),time:parseInt(t.dataset.col)})}),this.emit("select",this.selectedTimeSlots.slice())}},{key:"reverseSelection",value:function(){var e=this,t=this.container.querySelectorAll(".time-cell"),n=Array.from(t);this.selectedTimeSlots.length=0,n.forEach(function(t){var n="true"===t.dataset.selected;t.dataset.selected=n?"false":"true",t.classList.toggle("selected",!n),n||e.selectedTimeSlots.push({day:parseInt(t.dataset.row),time:parseInt(t.dataset.col)})}),this.emit("select",this.selectedTimeSlots.slice())}},{key:"getAllSelectedSlots",value:function(){var e=this.innerContainer.querySelectorAll('.time-cell[data-selected="true"]'),t=[];return e.forEach(function(e){t.push({day:parseInt(e.dataset.row),time:parseInt(e.dataset.col)})}),t}},{key:"clearAllSelectedSlots",value:function(){this.innerContainer.querySelectorAll('.time-cell[data-selected="true"]').forEach(function(e){e.dataset.selected="false",e.classList.toggle("selected",!1)}),this.selectedTimeSlots.length=0,this.emit("clear",this.selectedTimeSlots.slice())}},{key:"on",value:function(e,t){if(!this.eventHandlers[e])throw Error("Unsupported events.");this.eventHandlers[e].push(t)}},{key:"off",value:function(){this.eventHandlers.select.length=0,this.eventHandlers.clear.length=0}},{key:"emit",value:function(e){for(var t=arguments.length,n=new Array(t>1?t-1:0),r=1;r<t;r++)n[r-1]=arguments[r];this.eventHandlers[e]&&this.eventHandlers[e].forEach(function(e){return e.apply(void 0,n)})}}])}();return l});