Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@easepick/time-plugin
Advanced tools
@easepick/time-plugin - npm Package Compare versions
Comparing version 1.0.1-beta.0 to 1.0.1-beta.1
@@ -1,579 +0,1 @@ | ||
| import { DateTime } from '@easepick/datetime'; | ||
| import { BasePlugin } from '@easepick/base-plugin'; | ||
| class TimePlugin extends BasePlugin { | ||
| options = { | ||
| native: false, | ||
| seconds: false, | ||
| stepHours: 1, | ||
| stepMinutes: 5, | ||
| stepSeconds: 5, | ||
| format12: false, | ||
| }; | ||
| rangePlugin; | ||
| timePicked = { | ||
| input: null, | ||
| start: null, | ||
| end: null, | ||
| }; | ||
| timePrePicked = { | ||
| input: null, | ||
| start: null, | ||
| end: null, | ||
| }; | ||
| binds = { | ||
| getDate: this.getDate.bind(this), | ||
| getStartDate: this.getStartDate.bind(this), | ||
| getEndDate: this.getEndDate.bind(this), | ||
| onView: this.onView.bind(this), | ||
| onInput: this.onInput.bind(this), | ||
| onChange: this.onChange.bind(this), | ||
| onClick: this.onClick.bind(this), | ||
| setTime: this.setTime.bind(this), | ||
| setStartTime: this.setStartTime.bind(this), | ||
| setEndTime: this.setEndTime.bind(this), | ||
| }; | ||
| /** | ||
| * Returns plugin name | ||
| * | ||
| * @returns String | ||
| */ | ||
| getName() { | ||
| return 'TimePlugin'; | ||
| } | ||
| /** | ||
| * - Called automatically via BasePlugin.attach() - | ||
| * The function execute on initialize the picker | ||
| */ | ||
| onAttach() { | ||
| this.binds['_getDate'] = this.picker.getDate; | ||
| this.binds['_getStartDate'] = this.picker.getStartDate; | ||
| this.binds['_getEndDate'] = this.picker.getEndDate; | ||
| Object.defineProperties(this.picker, { | ||
| getDate: { | ||
| configurable: true, | ||
| value: this.binds.getDate, | ||
| }, | ||
| getStartDate: { | ||
| configurable: true, | ||
| value: this.binds.getStartDate, | ||
| }, | ||
| getEndDate: { | ||
| configurable: true, | ||
| value: this.binds.getEndDate, | ||
| }, | ||
| setTime: { | ||
| configurable: true, | ||
| value: this.binds.setTime, | ||
| }, | ||
| setStartTime: { | ||
| configurable: true, | ||
| value: this.binds.setStartTime, | ||
| }, | ||
| setEndTime: { | ||
| configurable: true, | ||
| value: this.binds.setEndTime, | ||
| }, | ||
| }); | ||
| this.rangePlugin = this.picker.PluginManager.getInstance('RangePlugin'); | ||
| this.parseValues(); | ||
| this.picker.on('view', this.binds.onView); | ||
| this.picker.on('input', this.binds.onInput); | ||
| this.picker.on('change', this.binds.onChange); | ||
| this.picker.on('click', this.binds.onClick); | ||
| } | ||
| /** | ||
| * - Called automatically via BasePlugin.detach() - | ||
| */ | ||
| onDetach() { | ||
| delete this.picker.setTime; | ||
| delete this.picker.setStartDate; | ||
| delete this.picker.setEndDate; | ||
| Object.defineProperties(this.picker, { | ||
| getDate: { | ||
| configurable: true, | ||
| value: this.binds['_getDate'] | ||
| }, | ||
| getStartDate: { | ||
| configurable: true, | ||
| value: this.binds['_getStartDate'] | ||
| }, | ||
| getEndDate: { | ||
| configurable: true, | ||
| value: this.binds['_getEndDate'] | ||
| }, | ||
| }); | ||
| this.picker.off('view', this.binds.onView); | ||
| this.picker.off('input', this.binds.onInput); | ||
| this.picker.off('change', this.binds.onChange); | ||
| this.picker.off('click', this.binds.onClick); | ||
| } | ||
| /** | ||
| * Function `view` event | ||
| * Adds HTML layout of current plugin to the picker layout | ||
| * | ||
| * @param event | ||
| */ | ||
| onView(event) { | ||
| const { view, target } = event.detail; | ||
| if (view === 'Main') { | ||
| this.rangePlugin = this.picker.PluginManager.getInstance('RangePlugin'); | ||
| const container = document.createElement('div'); | ||
| container.className = 'time-plugin-container'; | ||
| if (this.rangePlugin) { | ||
| const startInput = this.getStartInput(); | ||
| container.appendChild(startInput); | ||
| this.picker.trigger('view', { view: 'TimePluginInput', target: startInput }); | ||
| const endInput = this.getEndInput(); | ||
| container.appendChild(endInput); | ||
| this.picker.trigger('view', { view: 'TimePluginInput', target: endInput }); | ||
| } | ||
| else { | ||
| const singleInput = this.getSingleInput(); | ||
| container.appendChild(singleInput); | ||
| this.picker.trigger('view', { view: 'TimePluginInput', target: singleInput }); | ||
| } | ||
| target.appendChild(container); | ||
| this.picker.trigger('view', { view: 'TimePluginContainer', target: container }); | ||
| } | ||
| } | ||
| /** | ||
| * | ||
| * @param event | ||
| */ | ||
| onInput(event) { | ||
| const target = event.target; | ||
| if (target instanceof HTMLInputElement && target.classList.contains('time-plugin-input')) { | ||
| const date = this.timePicked[target.name] || new DateTime(); | ||
| const [hours, minutes] = target.value.split(':'); | ||
| date.setHours(Number(hours) || 0, Number(minutes) || 0, 0, 0); | ||
| if (this.picker.options.autoApply) { | ||
| this.timePicked[target.name] = date; | ||
| this.picker.updateValues(); | ||
| } | ||
| else { | ||
| this.timePrePicked[target.name] = date; | ||
| } | ||
| } | ||
| } | ||
| /** | ||
| * Handle `change` event | ||
| * | ||
| * @param event | ||
| */ | ||
| onChange(event) { | ||
| const target = event.target; | ||
| if (target instanceof HTMLSelectElement && target.classList.contains('time-plugin-custom-input')) { | ||
| const r = /(\w+)\[(\w+)\]/; | ||
| const [, name, format] = target.name.match(r); | ||
| const value = Number(target.value); | ||
| let date = new DateTime(); | ||
| if (!this.picker.options.autoApply && this.timePrePicked[name] instanceof Date) { | ||
| date = this.timePrePicked[name].clone(); | ||
| } | ||
| else if (this.timePicked[name] instanceof Date) { | ||
| date = this.timePicked[name].clone(); | ||
| } | ||
| switch (format) { | ||
| case 'HH': | ||
| if (this.options.format12) { | ||
| const period = target.closest('.time-plugin-custom-block') | ||
| .querySelector(`select[name="${name}[period]"]`).value; | ||
| const d = this.handleFormat12(period, date, value); | ||
| date.setHours(d.getHours(), d.getMinutes(), d.getSeconds(), 0); | ||
| } | ||
| else { | ||
| date.setHours(value, date.getMinutes(), date.getSeconds(), 0); | ||
| } | ||
| break; | ||
| case 'mm': | ||
| date.setHours(date.getHours(), value, date.getSeconds(), 0); | ||
| break; | ||
| case 'ss': | ||
| date.setHours(date.getHours(), date.getMinutes(), value, 0); | ||
| break; | ||
| case 'period': | ||
| if (this.options.format12) { | ||
| const hours = target.closest('.time-plugin-custom-block') | ||
| .querySelector(`select[name="${name}[HH]"]`).value; | ||
| const d = this.handleFormat12(target.value, date, Number(hours)); | ||
| date.setHours(d.getHours(), d.getMinutes(), d.getSeconds(), 0); | ||
| } | ||
| break; | ||
| } | ||
| if (this.picker.options.autoApply) { | ||
| this.timePicked[name] = date; | ||
| this.picker.updateValues(); | ||
| } | ||
| else { | ||
| this.timePrePicked[name] = date; | ||
| } | ||
| } | ||
| } | ||
| onClick(event) { | ||
| const target = event.target; | ||
| if (target instanceof HTMLElement) { | ||
| const element = target.closest('.unit'); | ||
| if (!(element instanceof HTMLElement)) | ||
| return; | ||
| if (this.picker.isApplyButton(element)) { | ||
| this.timePicked = { ...this.timePrePicked }; | ||
| this.picker.updateValues(); | ||
| this.timePrePicked = { | ||
| input: null, | ||
| start: null, | ||
| end: null, | ||
| }; | ||
| } | ||
| if (this.picker.isCancelButton(element)) { | ||
| this.timePrePicked = { | ||
| input: null, | ||
| start: null, | ||
| end: null, | ||
| }; | ||
| this.picker.renderAll(); | ||
| } | ||
| } | ||
| } | ||
| /** | ||
| * Set time programmatically | ||
| * | ||
| * @param value | ||
| * @param keyName | ||
| */ | ||
| setTime(value) { | ||
| const d = this.handleTimeString(value); | ||
| this.timePicked.input = d.clone(); | ||
| this.picker.renderAll(); | ||
| this.picker.updateValues(); | ||
| } | ||
| /** | ||
| * Set start time programmatically | ||
| * | ||
| * @param value | ||
| * @param keyName | ||
| */ | ||
| setStartTime(value) { | ||
| const d = this.handleTimeString(value); | ||
| this.timePicked.start = d.clone(); | ||
| this.picker.renderAll(); | ||
| this.picker.updateValues(); | ||
| } | ||
| /** | ||
| * Set end time programmatically | ||
| * | ||
| * @param value | ||
| * @param keyName | ||
| */ | ||
| setEndTime(value) { | ||
| const d = this.handleTimeString(value); | ||
| this.timePicked.end = d.clone(); | ||
| this.picker.renderAll(); | ||
| this.picker.updateValues(); | ||
| } | ||
| handleTimeString(value) { | ||
| const d = new DateTime(); | ||
| const [h, m, s] = value.split(':').map(x => Number(x)); | ||
| const hours = h && !Number.isNaN(h) ? h : 0; | ||
| const minutes = m && !Number.isNaN(m) ? m : 0; | ||
| const seconds = s && !Number.isNaN(s) ? s : 0; | ||
| d.setHours(hours, minutes, seconds, 0); | ||
| return d; | ||
| } | ||
| /** | ||
| * Adds time to DateTime object | ||
| * Replaces the original `getDate` function | ||
| * | ||
| * @returns DateTime | ||
| */ | ||
| getDate() { | ||
| if (this.picker.options.date instanceof Date) { | ||
| const date = new DateTime(this.picker.options.date, this.picker.options.format); | ||
| if (this.timePicked.input instanceof Date) { | ||
| const t = this.timePicked.input; | ||
| date.setHours(t.getHours(), t.getMinutes(), t.getSeconds(), 0); | ||
| } | ||
| return date; | ||
| } | ||
| return null; | ||
| } | ||
| /** | ||
| * Adds time to DateTime object | ||
| * Replaces the original `getStartDate` function | ||
| * | ||
| * @returns DateTime | ||
| */ | ||
| getStartDate() { | ||
| if (this.rangePlugin.options.startDate instanceof Date) { | ||
| const date = new DateTime(this.rangePlugin.options.startDate, this.picker.options.format); | ||
| if (this.timePicked.start instanceof Date) { | ||
| const t = this.timePicked.start; | ||
| date.setHours(t.getHours(), t.getMinutes(), t.getSeconds(), 0); | ||
| } | ||
| return date; | ||
| } | ||
| return null; | ||
| } | ||
| /** | ||
| * Adds time to DateTime object | ||
| * Replaces the original `getEndDate` function | ||
| * | ||
| * @returns DateTime | ||
| */ | ||
| getEndDate() { | ||
| if (this.rangePlugin.options.endDate instanceof Date) { | ||
| const date = new DateTime(this.rangePlugin.options.endDate, this.picker.options.format); | ||
| if (this.timePicked.end instanceof Date) { | ||
| const t = this.timePicked.end; | ||
| date.setHours(t.getHours(), t.getMinutes(), t.getSeconds(), 0); | ||
| } | ||
| return date; | ||
| } | ||
| return null; | ||
| } | ||
| /** | ||
| * | ||
| * @returns HTMLElement | ||
| */ | ||
| getSingleInput() { | ||
| if (this.options.native) { | ||
| return this.getNativeInput('input'); | ||
| } | ||
| return this.getCustomInput('input'); | ||
| } | ||
| /** | ||
| * | ||
| * @returns HTMLElement | ||
| */ | ||
| getStartInput() { | ||
| if (this.options.native) { | ||
| return this.getNativeInput('start'); | ||
| } | ||
| return this.getCustomInput('start'); | ||
| } | ||
| /** | ||
| * | ||
| * @returns HTMLElement | ||
| */ | ||
| getEndInput() { | ||
| if (this.options.native) { | ||
| return this.getNativeInput('end'); | ||
| } | ||
| return this.getCustomInput('end'); | ||
| } | ||
| /** | ||
| * Returns `input[type="time"]` element | ||
| * | ||
| * @param name | ||
| * @returns HTMLElement | ||
| */ | ||
| getNativeInput(name) { | ||
| const element = document.createElement('input'); | ||
| element.type = 'time'; | ||
| element.name = name; | ||
| element.className = 'time-plugin-input unit'; | ||
| const t = this.timePicked[name]; | ||
| if (t) { | ||
| const HH = `0${t.getHours()}`.slice(-2); | ||
| const mm = `0${t.getMinutes()}`.slice(-2); | ||
| element.value = `${HH}:${mm}`; | ||
| } | ||
| return element; | ||
| } | ||
| /** | ||
| * Returns `select` element | ||
| * | ||
| * @param name | ||
| * @returns HTMLElement | ||
| */ | ||
| getCustomInput(name) { | ||
| const block = document.createElement('div'); | ||
| block.className = 'time-plugin-custom-block'; | ||
| const hSelect = document.createElement('select'); | ||
| hSelect.className = 'time-plugin-custom-input unit'; | ||
| hSelect.name = `${name}[HH]`; | ||
| const hStart = this.options.format12 ? 1 : 0; | ||
| const hLimit = this.options.format12 ? 13 : 24; | ||
| let date = null; | ||
| if (!this.picker.options.autoApply && this.timePrePicked[name] instanceof Date) { | ||
| date = this.timePrePicked[name].clone(); | ||
| } | ||
| else if (this.timePicked[name] instanceof Date) { | ||
| date = this.timePicked[name].clone(); | ||
| } | ||
| for (let i = hStart; i < hLimit; i += this.options.stepHours) { | ||
| const hOption = document.createElement('option'); | ||
| hOption.value = String(i); | ||
| hOption.text = String(i); | ||
| if (date) { | ||
| if (this.options.format12) { | ||
| const hours = date.getHours() % 12 ? date.getHours() % 12 : 12; | ||
| if (hours === i) { | ||
| hOption.selected = true; | ||
| } | ||
| } | ||
| else if (date.getHours() === i) { | ||
| hOption.selected = true; | ||
| } | ||
| } | ||
| hSelect.appendChild(hOption); | ||
| } | ||
| block.appendChild(hSelect); | ||
| const mSelect = document.createElement('select'); | ||
| mSelect.className = 'time-plugin-custom-input unit'; | ||
| mSelect.name = `${name}[mm]`; | ||
| const mLimit = 60; | ||
| for (let i = 0; i < mLimit; i += this.options.stepMinutes) { | ||
| const mOption = document.createElement('option'); | ||
| mOption.value = `0${String(i)}`.slice(-2); | ||
| mOption.text = `0${String(i)}`.slice(-2); | ||
| if (date && date.getMinutes() === i) { | ||
| mOption.selected = true; | ||
| } | ||
| mSelect.appendChild(mOption); | ||
| } | ||
| block.appendChild(mSelect); | ||
| if (this.options.seconds) { | ||
| const sSelect = document.createElement('select'); | ||
| sSelect.className = 'time-plugin-custom-input unit'; | ||
| sSelect.name = `${name}[ss]`; | ||
| const sLimit = 60; | ||
| for (let i = 0; i < sLimit; i += this.options.stepSeconds) { | ||
| const sOption = document.createElement('option'); | ||
| sOption.value = `0${String(i)}`.slice(-2); | ||
| sOption.text = `0${String(i)}`.slice(-2); | ||
| if (date && date.getSeconds() === i) { | ||
| sOption.selected = true; | ||
| } | ||
| sSelect.appendChild(sOption); | ||
| } | ||
| block.appendChild(sSelect); | ||
| } | ||
| if (this.options.format12) { | ||
| const pSelect = document.createElement('select'); | ||
| pSelect.className = 'time-plugin-custom-input unit'; | ||
| pSelect.name = `${name}[period]`; | ||
| ['AM', 'PM'].forEach(x => { | ||
| const pOption = document.createElement('option'); | ||
| pOption.value = x; | ||
| pOption.text = x; | ||
| if (date && x === 'PM' && date.getHours() >= 12) { | ||
| pOption.selected = true; | ||
| } | ||
| pSelect.appendChild(pOption); | ||
| }); | ||
| block.appendChild(pSelect); | ||
| } | ||
| return block; | ||
| } | ||
| /** | ||
| * Handle 12H time | ||
| * | ||
| * @param period | ||
| * @param date | ||
| * @param value | ||
| * @returns DateTime | ||
| */ | ||
| handleFormat12(period, date, value) { | ||
| const d = date.clone(); | ||
| switch (period) { | ||
| case 'AM': | ||
| if (value === 12) { | ||
| d.setHours(0, d.getMinutes(), d.getSeconds(), 0); | ||
| } | ||
| else { | ||
| d.setHours(value, d.getMinutes(), d.getSeconds(), 0); | ||
| } | ||
| break; | ||
| case 'PM': | ||
| if (value !== 12) { | ||
| d.setHours(value + 12, d.getMinutes(), d.getSeconds(), 0); | ||
| } | ||
| else { | ||
| d.setHours(value, d.getMinutes(), d.getSeconds(), 0); | ||
| } | ||
| break; | ||
| } | ||
| return d; | ||
| } | ||
| parseValues() { | ||
| if (this.rangePlugin) { | ||
| if (this.rangePlugin.options.strict) { | ||
| if (this.rangePlugin.options.startDate && this.rangePlugin.options.endDate) { | ||
| const d1 = new DateTime(this.rangePlugin.options.startDate, this.picker.options.format); | ||
| const d2 = new DateTime(this.rangePlugin.options.endDate, this.picker.options.format); | ||
| this.timePicked.start = d1.clone(); | ||
| this.timePicked.end = d2.clone(); | ||
| } | ||
| } | ||
| else { | ||
| if (this.rangePlugin.options.startDate) { | ||
| const d = new DateTime(this.rangePlugin.options.startDate, this.picker.options.format); | ||
| this.timePicked.start = d.clone(); | ||
| } | ||
| if (this.rangePlugin.options.endDate) { | ||
| const d = new DateTime(this.rangePlugin.options.endDate, this.picker.options.format); | ||
| this.timePicked.end = d.clone(); | ||
| } | ||
| } | ||
| if (this.rangePlugin.options.elementEnd) { | ||
| if (this.rangePlugin.options.strict) { | ||
| if (this.picker.options.element instanceof HTMLInputElement | ||
| && this.picker.options.element.value.length | ||
| && this.rangePlugin.options.elementEnd instanceof HTMLInputElement | ||
| && this.rangePlugin.options.elementEnd.value.length) { | ||
| const d1 = new DateTime(this.picker.options.element.value, this.picker.options.format); | ||
| const d2 = new DateTime(this.rangePlugin.options.elementEnd.value, this.picker.options.format); | ||
| this.timePicked.start = d1.clone(); | ||
| this.timePicked.end = d2.clone(); | ||
| } | ||
| } | ||
| else { | ||
| if (this.picker.options.element instanceof HTMLInputElement | ||
| && this.picker.options.element.value.length) { | ||
| const d = new DateTime(this.picker.options.element.value, this.picker.options.format); | ||
| this.timePicked.start = d.clone(); | ||
| } | ||
| if (this.rangePlugin.options.elementEnd instanceof HTMLInputElement | ||
| && this.rangePlugin.options.elementEnd.value.length) { | ||
| const d = new DateTime(this.rangePlugin.options.elementEnd.value, this.picker.options.format); | ||
| this.timePicked.start = d.clone(); | ||
| } | ||
| } | ||
| } | ||
| else if (this.picker.options.element instanceof HTMLInputElement && this.picker.options.element.value.length) { | ||
| const [_start, _end] = this.picker.options.element.value.split(this.rangePlugin.options.delimiter); | ||
| if (this.rangePlugin.options.strict) { | ||
| if (_start && _end) { | ||
| const d1 = new DateTime(_start, this.picker.options.format); | ||
| const d2 = new DateTime(_end, this.picker.options.format); | ||
| this.timePicked.start = d1.clone(); | ||
| this.timePicked.end = d2.clone(); | ||
| } | ||
| } | ||
| else { | ||
| if (_start) { | ||
| const d = new DateTime(_start, this.picker.options.format); | ||
| this.timePicked.start = d.clone(); | ||
| } | ||
| if (_end) { | ||
| const d = new DateTime(_end, this.picker.options.format); | ||
| this.timePicked.start = d.clone(); | ||
| } | ||
| } | ||
| } | ||
| } | ||
| else { | ||
| if (this.picker.options.date) { | ||
| const d = new DateTime(this.picker.options.date, this.picker.options.format); | ||
| this.timePicked.input = d.clone(); | ||
| } | ||
| if (this.picker.options.element instanceof HTMLInputElement && this.picker.options.element.value.length) { | ||
| const d = new DateTime(this.picker.options.element.value, this.picker.options.format); | ||
| this.timePicked.input = d.clone(); | ||
| } | ||
| } | ||
| } | ||
| } | ||
| export { TimePlugin }; | ||
| import{DateTime as t}from"@easepick/datetime";import{BasePlugin as e}from"@easepick/base-plugin";class i extends e{options={native:!1,seconds:!1,stepHours:1,stepMinutes:5,stepSeconds:5,format12:!1};rangePlugin;timePicked={input:null,start:null,end:null};timePrePicked={input:null,start:null,end:null};binds={getDate:this.getDate.bind(this),getStartDate:this.getStartDate.bind(this),getEndDate:this.getEndDate.bind(this),onView:this.onView.bind(this),onInput:this.onInput.bind(this),onChange:this.onChange.bind(this),onClick:this.onClick.bind(this),setTime:this.setTime.bind(this),setStartTime:this.setStartTime.bind(this),setEndTime:this.setEndTime.bind(this)};getName(){return"TimePlugin"}onAttach(){this.binds._getDate=this.picker.getDate,this.binds._getStartDate=this.picker.getStartDate,this.binds._getEndDate=this.picker.getEndDate,Object.defineProperties(this.picker,{getDate:{configurable:!0,value:this.binds.getDate},getStartDate:{configurable:!0,value:this.binds.getStartDate},getEndDate:{configurable:!0,value:this.binds.getEndDate},setTime:{configurable:!0,value:this.binds.setTime},setStartTime:{configurable:!0,value:this.binds.setStartTime},setEndTime:{configurable:!0,value:this.binds.setEndTime}}),this.rangePlugin=this.picker.PluginManager.getInstance("RangePlugin"),this.parseValues(),this.picker.on("view",this.binds.onView),this.picker.on("input",this.binds.onInput),this.picker.on("change",this.binds.onChange),this.picker.on("click",this.binds.onClick)}onDetach(){delete this.picker.setTime,delete this.picker.setStartTime,delete this.picker.setEndTime,Object.defineProperties(this.picker,{getDate:{configurable:!0,value:this.binds._getDate},getStartDate:{configurable:!0,value:this.binds._getStartDate},getEndDate:{configurable:!0,value:this.binds._getEndDate}}),this.picker.off("view",this.binds.onView),this.picker.off("input",this.binds.onInput),this.picker.off("change",this.binds.onChange),this.picker.off("click",this.binds.onClick)}onView(t){const{view:e,target:i}=t.detail;if("Main"===e){this.rangePlugin=this.picker.PluginManager.getInstance("RangePlugin");const t=document.createElement("div");if(t.className="time-plugin-container",this.rangePlugin){const e=this.getStartInput();t.appendChild(e),this.picker.trigger("view",{view:"TimePluginInput",target:e});const i=this.getEndInput();t.appendChild(i),this.picker.trigger("view",{view:"TimePluginInput",target:i})}else{const e=this.getSingleInput();t.appendChild(e),this.picker.trigger("view",{view:"TimePluginInput",target:e})}i.appendChild(t),this.picker.trigger("view",{view:"TimePluginContainer",target:t})}}onInput(e){const i=e.target;if(i instanceof HTMLInputElement&&i.classList.contains("time-plugin-input")){const e=this.timePicked[i.name]||new t,[n,s]=i.value.split(":");e.setHours(Number(n)||0,Number(s)||0,0,0),this.picker.options.autoApply?(this.timePicked[i.name]=e,this.picker.updateValues()):this.timePrePicked[i.name]=e}}onChange(e){const i=e.target;if(i instanceof HTMLSelectElement&&i.classList.contains("time-plugin-custom-input")){const e=/(\w+)\[(\w+)\]/,[,n,s]=i.name.match(e),o=Number(i.value);let a=new t;switch(!this.picker.options.autoApply&&this.timePrePicked[n]instanceof Date?a=this.timePrePicked[n].clone():this.timePicked[n]instanceof Date&&(a=this.timePicked[n].clone()),s){case"HH":if(this.options.format12){const t=i.closest(".time-plugin-custom-block").querySelector(`select[name="${n}[period]"]`).value,e=this.handleFormat12(t,a,o);a.setHours(e.getHours(),e.getMinutes(),e.getSeconds(),0)}else a.setHours(o,a.getMinutes(),a.getSeconds(),0);break;case"mm":a.setHours(a.getHours(),o,a.getSeconds(),0);break;case"ss":a.setHours(a.getHours(),a.getMinutes(),o,0);break;case"period":if(this.options.format12){const t=i.closest(".time-plugin-custom-block").querySelector(`select[name="${n}[HH]"]`).value,e=this.handleFormat12(i.value,a,Number(t));a.setHours(e.getHours(),e.getMinutes(),e.getSeconds(),0)}}this.picker.options.autoApply?(this.timePicked[n]=a,this.picker.updateValues()):this.timePrePicked[n]=a}}onClick(t){const e=t.target;if(e instanceof HTMLElement){const t=e.closest(".unit");if(!(t instanceof HTMLElement))return;this.picker.isApplyButton(t)&&(this.timePicked={...this.timePrePicked},this.picker.updateValues(),this.timePrePicked={input:null,start:null,end:null}),this.picker.isCancelButton(t)&&(this.timePrePicked={input:null,start:null,end:null},this.picker.renderAll())}}setTime(t){const e=this.handleTimeString(t);this.timePicked.input=e.clone(),this.picker.renderAll(),this.picker.updateValues()}setStartTime(t){const e=this.handleTimeString(t);this.timePicked.start=e.clone(),this.picker.renderAll(),this.picker.updateValues()}setEndTime(t){const e=this.handleTimeString(t);this.timePicked.end=e.clone(),this.picker.renderAll(),this.picker.updateValues()}handleTimeString(e){const i=new t,[n,s,o]=e.split(":").map((t=>Number(t))),a=n&&!Number.isNaN(n)?n:0,c=s&&!Number.isNaN(s)?s:0,r=o&&!Number.isNaN(o)?o:0;return i.setHours(a,c,r,0),i}getDate(){if(this.picker.options.date instanceof Date){const e=new t(this.picker.options.date,this.picker.options.format);if(this.timePicked.input instanceof Date){const t=this.timePicked.input;e.setHours(t.getHours(),t.getMinutes(),t.getSeconds(),0)}return e}return null}getStartDate(){if(this.rangePlugin.options.startDate instanceof Date){const e=new t(this.rangePlugin.options.startDate,this.picker.options.format);if(this.timePicked.start instanceof Date){const t=this.timePicked.start;e.setHours(t.getHours(),t.getMinutes(),t.getSeconds(),0)}return e}return null}getEndDate(){if(this.rangePlugin.options.endDate instanceof Date){const e=new t(this.rangePlugin.options.endDate,this.picker.options.format);if(this.timePicked.end instanceof Date){const t=this.timePicked.end;e.setHours(t.getHours(),t.getMinutes(),t.getSeconds(),0)}return e}return null}getSingleInput(){return this.options.native?this.getNativeInput("input"):this.getCustomInput("input")}getStartInput(){return this.options.native?this.getNativeInput("start"):this.getCustomInput("start")}getEndInput(){return this.options.native?this.getNativeInput("end"):this.getCustomInput("end")}getNativeInput(t){const e=document.createElement("input");e.type="time",e.name=t,e.className="time-plugin-input unit";const i=this.timePicked[t];if(i){const t=`0${i.getHours()}`.slice(-2),n=`0${i.getMinutes()}`.slice(-2);e.value=`${t}:${n}`}return e}getCustomInput(t){const e=document.createElement("div");e.className="time-plugin-custom-block";const i=document.createElement("select");i.className="time-plugin-custom-input unit",i.name=`${t}[HH]`;const n=this.options.format12?1:0,s=this.options.format12?13:24;let o=null;!this.picker.options.autoApply&&this.timePrePicked[t]instanceof Date?o=this.timePrePicked[t].clone():this.timePicked[t]instanceof Date&&(o=this.timePicked[t].clone());for(let t=n;t<s;t+=this.options.stepHours){const e=document.createElement("option");if(e.value=String(t),e.text=String(t),o)if(this.options.format12){(o.getHours()%12?o.getHours()%12:12)===t&&(e.selected=!0)}else o.getHours()===t&&(e.selected=!0);i.appendChild(e)}e.appendChild(i);const a=document.createElement("select");a.className="time-plugin-custom-input unit",a.name=`${t}[mm]`;for(let t=0;t<60;t+=this.options.stepMinutes){const e=document.createElement("option");e.value=`0${String(t)}`.slice(-2),e.text=`0${String(t)}`.slice(-2),o&&o.getMinutes()===t&&(e.selected=!0),a.appendChild(e)}if(e.appendChild(a),this.options.seconds){const i=document.createElement("select");i.className="time-plugin-custom-input unit",i.name=`${t}[ss]`;const n=60;for(let t=0;t<n;t+=this.options.stepSeconds){const e=document.createElement("option");e.value=`0${String(t)}`.slice(-2),e.text=`0${String(t)}`.slice(-2),o&&o.getSeconds()===t&&(e.selected=!0),i.appendChild(e)}e.appendChild(i)}if(this.options.format12){const i=document.createElement("select");i.className="time-plugin-custom-input unit",i.name=`${t}[period]`,["AM","PM"].forEach((t=>{const e=document.createElement("option");e.value=t,e.text=t,o&&"PM"===t&&o.getHours()>=12&&(e.selected=!0),i.appendChild(e)})),e.appendChild(i)}return e}handleFormat12(t,e,i){const n=e.clone();switch(t){case"AM":12===i?n.setHours(0,n.getMinutes(),n.getSeconds(),0):n.setHours(i,n.getMinutes(),n.getSeconds(),0);break;case"PM":12!==i?n.setHours(i+12,n.getMinutes(),n.getSeconds(),0):n.setHours(i,n.getMinutes(),n.getSeconds(),0)}return n}parseValues(){if(this.rangePlugin){if(this.rangePlugin.options.strict){if(this.rangePlugin.options.startDate&&this.rangePlugin.options.endDate){const e=new t(this.rangePlugin.options.startDate,this.picker.options.format),i=new t(this.rangePlugin.options.endDate,this.picker.options.format);this.timePicked.start=e.clone(),this.timePicked.end=i.clone()}}else{if(this.rangePlugin.options.startDate){const e=new t(this.rangePlugin.options.startDate,this.picker.options.format);this.timePicked.start=e.clone()}if(this.rangePlugin.options.endDate){const e=new t(this.rangePlugin.options.endDate,this.picker.options.format);this.timePicked.end=e.clone()}}if(this.rangePlugin.options.elementEnd)if(this.rangePlugin.options.strict){if(this.picker.options.element instanceof HTMLInputElement&&this.picker.options.element.value.length&&this.rangePlugin.options.elementEnd instanceof HTMLInputElement&&this.rangePlugin.options.elementEnd.value.length){const e=new t(this.picker.options.element.value,this.picker.options.format),i=new t(this.rangePlugin.options.elementEnd.value,this.picker.options.format);this.timePicked.start=e.clone(),this.timePicked.end=i.clone()}}else{if(this.picker.options.element instanceof HTMLInputElement&&this.picker.options.element.value.length){const e=new t(this.picker.options.element.value,this.picker.options.format);this.timePicked.start=e.clone()}if(this.rangePlugin.options.elementEnd instanceof HTMLInputElement&&this.rangePlugin.options.elementEnd.value.length){const e=new t(this.rangePlugin.options.elementEnd.value,this.picker.options.format);this.timePicked.start=e.clone()}}else if(this.picker.options.element instanceof HTMLInputElement&&this.picker.options.element.value.length){const[e,i]=this.picker.options.element.value.split(this.rangePlugin.options.delimiter);if(this.rangePlugin.options.strict){if(e&&i){const n=new t(e,this.picker.options.format),s=new t(i,this.picker.options.format);this.timePicked.start=n.clone(),this.timePicked.end=s.clone()}}else{if(e){const i=new t(e,this.picker.options.format);this.timePicked.start=i.clone()}if(i){const e=new t(i,this.picker.options.format);this.timePicked.start=e.clone()}}}}else{if(this.picker.options.date){const e=new t(this.picker.options.date,this.picker.options.format);this.timePicked.input=e.clone()}if(this.picker.options.element instanceof HTMLInputElement&&this.picker.options.element.value.length){const e=new t(this.picker.options.element.value,this.picker.options.format);this.timePicked.input=e.clone()}}}}export{i as TimePlugin}; |
| /** | ||
| * @license | ||
| * Package: @easepick/time-plugin | ||
| * Version: 1.0.0 | ||
| * Version: 1.0.1-beta.0 | ||
| * https://easepick.com/ | ||
@@ -10,587 +10,2 @@ * Copyright 2022 Rinat G. | ||
| */ | ||
| (function (global, factory) { | ||
| typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@easepick/datetime'), require('@easepick/base-plugin')) : | ||
| typeof define === 'function' && define.amd ? define(['exports', '@easepick/datetime', '@easepick/base-plugin'], factory) : | ||
| (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.easepick = global.easepick || {}, global.easepick, global.easepick)); | ||
| })(this, (function (exports, datetime, basePlugin) { 'use strict'; | ||
| class TimePlugin extends basePlugin.BasePlugin { | ||
| options = { | ||
| native: false, | ||
| seconds: false, | ||
| stepHours: 1, | ||
| stepMinutes: 5, | ||
| stepSeconds: 5, | ||
| format12: false, | ||
| }; | ||
| rangePlugin; | ||
| timePicked = { | ||
| input: null, | ||
| start: null, | ||
| end: null, | ||
| }; | ||
| timePrePicked = { | ||
| input: null, | ||
| start: null, | ||
| end: null, | ||
| }; | ||
| binds = { | ||
| getDate: this.getDate.bind(this), | ||
| getStartDate: this.getStartDate.bind(this), | ||
| getEndDate: this.getEndDate.bind(this), | ||
| onView: this.onView.bind(this), | ||
| onInput: this.onInput.bind(this), | ||
| onChange: this.onChange.bind(this), | ||
| onClick: this.onClick.bind(this), | ||
| setTime: this.setTime.bind(this), | ||
| setStartTime: this.setStartTime.bind(this), | ||
| setEndTime: this.setEndTime.bind(this), | ||
| }; | ||
| /** | ||
| * Returns plugin name | ||
| * | ||
| * @returns String | ||
| */ | ||
| getName() { | ||
| return 'TimePlugin'; | ||
| } | ||
| /** | ||
| * - Called automatically via BasePlugin.attach() - | ||
| * The function execute on initialize the picker | ||
| */ | ||
| onAttach() { | ||
| this.binds['_getDate'] = this.picker.getDate; | ||
| this.binds['_getStartDate'] = this.picker.getStartDate; | ||
| this.binds['_getEndDate'] = this.picker.getEndDate; | ||
| Object.defineProperties(this.picker, { | ||
| getDate: { | ||
| configurable: true, | ||
| value: this.binds.getDate, | ||
| }, | ||
| getStartDate: { | ||
| configurable: true, | ||
| value: this.binds.getStartDate, | ||
| }, | ||
| getEndDate: { | ||
| configurable: true, | ||
| value: this.binds.getEndDate, | ||
| }, | ||
| setTime: { | ||
| configurable: true, | ||
| value: this.binds.setTime, | ||
| }, | ||
| setStartTime: { | ||
| configurable: true, | ||
| value: this.binds.setStartTime, | ||
| }, | ||
| setEndTime: { | ||
| configurable: true, | ||
| value: this.binds.setEndTime, | ||
| }, | ||
| }); | ||
| this.rangePlugin = this.picker.PluginManager.getInstance('RangePlugin'); | ||
| this.parseValues(); | ||
| this.picker.on('view', this.binds.onView); | ||
| this.picker.on('input', this.binds.onInput); | ||
| this.picker.on('change', this.binds.onChange); | ||
| this.picker.on('click', this.binds.onClick); | ||
| } | ||
| /** | ||
| * - Called automatically via BasePlugin.detach() - | ||
| */ | ||
| onDetach() { | ||
| delete this.picker.setTime; | ||
| delete this.picker.setStartDate; | ||
| delete this.picker.setEndDate; | ||
| Object.defineProperties(this.picker, { | ||
| getDate: { | ||
| configurable: true, | ||
| value: this.binds['_getDate'] | ||
| }, | ||
| getStartDate: { | ||
| configurable: true, | ||
| value: this.binds['_getStartDate'] | ||
| }, | ||
| getEndDate: { | ||
| configurable: true, | ||
| value: this.binds['_getEndDate'] | ||
| }, | ||
| }); | ||
| this.picker.off('view', this.binds.onView); | ||
| this.picker.off('input', this.binds.onInput); | ||
| this.picker.off('change', this.binds.onChange); | ||
| this.picker.off('click', this.binds.onClick); | ||
| } | ||
| /** | ||
| * Function `view` event | ||
| * Adds HTML layout of current plugin to the picker layout | ||
| * | ||
| * @param event | ||
| */ | ||
| onView(event) { | ||
| const { view, target } = event.detail; | ||
| if (view === 'Main') { | ||
| this.rangePlugin = this.picker.PluginManager.getInstance('RangePlugin'); | ||
| const container = document.createElement('div'); | ||
| container.className = 'time-plugin-container'; | ||
| if (this.rangePlugin) { | ||
| const startInput = this.getStartInput(); | ||
| container.appendChild(startInput); | ||
| this.picker.trigger('view', { view: 'TimePluginInput', target: startInput }); | ||
| const endInput = this.getEndInput(); | ||
| container.appendChild(endInput); | ||
| this.picker.trigger('view', { view: 'TimePluginInput', target: endInput }); | ||
| } | ||
| else { | ||
| const singleInput = this.getSingleInput(); | ||
| container.appendChild(singleInput); | ||
| this.picker.trigger('view', { view: 'TimePluginInput', target: singleInput }); | ||
| } | ||
| target.appendChild(container); | ||
| this.picker.trigger('view', { view: 'TimePluginContainer', target: container }); | ||
| } | ||
| } | ||
| /** | ||
| * | ||
| * @param event | ||
| */ | ||
| onInput(event) { | ||
| const target = event.target; | ||
| if (target instanceof HTMLInputElement && target.classList.contains('time-plugin-input')) { | ||
| const date = this.timePicked[target.name] || new datetime.DateTime(); | ||
| const [hours, minutes] = target.value.split(':'); | ||
| date.setHours(Number(hours) || 0, Number(minutes) || 0, 0, 0); | ||
| if (this.picker.options.autoApply) { | ||
| this.timePicked[target.name] = date; | ||
| this.picker.updateValues(); | ||
| } | ||
| else { | ||
| this.timePrePicked[target.name] = date; | ||
| } | ||
| } | ||
| } | ||
| /** | ||
| * Handle `change` event | ||
| * | ||
| * @param event | ||
| */ | ||
| onChange(event) { | ||
| const target = event.target; | ||
| if (target instanceof HTMLSelectElement && target.classList.contains('time-plugin-custom-input')) { | ||
| const r = /(\w+)\[(\w+)\]/; | ||
| const [, name, format] = target.name.match(r); | ||
| const value = Number(target.value); | ||
| let date = new datetime.DateTime(); | ||
| if (!this.picker.options.autoApply && this.timePrePicked[name] instanceof Date) { | ||
| date = this.timePrePicked[name].clone(); | ||
| } | ||
| else if (this.timePicked[name] instanceof Date) { | ||
| date = this.timePicked[name].clone(); | ||
| } | ||
| switch (format) { | ||
| case 'HH': | ||
| if (this.options.format12) { | ||
| const period = target.closest('.time-plugin-custom-block') | ||
| .querySelector(`select[name="${name}[period]"]`).value; | ||
| const d = this.handleFormat12(period, date, value); | ||
| date.setHours(d.getHours(), d.getMinutes(), d.getSeconds(), 0); | ||
| } | ||
| else { | ||
| date.setHours(value, date.getMinutes(), date.getSeconds(), 0); | ||
| } | ||
| break; | ||
| case 'mm': | ||
| date.setHours(date.getHours(), value, date.getSeconds(), 0); | ||
| break; | ||
| case 'ss': | ||
| date.setHours(date.getHours(), date.getMinutes(), value, 0); | ||
| break; | ||
| case 'period': | ||
| if (this.options.format12) { | ||
| const hours = target.closest('.time-plugin-custom-block') | ||
| .querySelector(`select[name="${name}[HH]"]`).value; | ||
| const d = this.handleFormat12(target.value, date, Number(hours)); | ||
| date.setHours(d.getHours(), d.getMinutes(), d.getSeconds(), 0); | ||
| } | ||
| break; | ||
| } | ||
| if (this.picker.options.autoApply) { | ||
| this.timePicked[name] = date; | ||
| this.picker.updateValues(); | ||
| } | ||
| else { | ||
| this.timePrePicked[name] = date; | ||
| } | ||
| } | ||
| } | ||
| onClick(event) { | ||
| const target = event.target; | ||
| if (target instanceof HTMLElement) { | ||
| const element = target.closest('.unit'); | ||
| if (!(element instanceof HTMLElement)) | ||
| return; | ||
| if (this.picker.isApplyButton(element)) { | ||
| this.timePicked = { ...this.timePrePicked }; | ||
| this.picker.updateValues(); | ||
| this.timePrePicked = { | ||
| input: null, | ||
| start: null, | ||
| end: null, | ||
| }; | ||
| } | ||
| if (this.picker.isCancelButton(element)) { | ||
| this.timePrePicked = { | ||
| input: null, | ||
| start: null, | ||
| end: null, | ||
| }; | ||
| this.picker.renderAll(); | ||
| } | ||
| } | ||
| } | ||
| /** | ||
| * Set time programmatically | ||
| * | ||
| * @param value | ||
| * @param keyName | ||
| */ | ||
| setTime(value) { | ||
| const d = this.handleTimeString(value); | ||
| this.timePicked.input = d.clone(); | ||
| this.picker.renderAll(); | ||
| this.picker.updateValues(); | ||
| } | ||
| /** | ||
| * Set start time programmatically | ||
| * | ||
| * @param value | ||
| * @param keyName | ||
| */ | ||
| setStartTime(value) { | ||
| const d = this.handleTimeString(value); | ||
| this.timePicked.start = d.clone(); | ||
| this.picker.renderAll(); | ||
| this.picker.updateValues(); | ||
| } | ||
| /** | ||
| * Set end time programmatically | ||
| * | ||
| * @param value | ||
| * @param keyName | ||
| */ | ||
| setEndTime(value) { | ||
| const d = this.handleTimeString(value); | ||
| this.timePicked.end = d.clone(); | ||
| this.picker.renderAll(); | ||
| this.picker.updateValues(); | ||
| } | ||
| handleTimeString(value) { | ||
| const d = new datetime.DateTime(); | ||
| const [h, m, s] = value.split(':').map(x => Number(x)); | ||
| const hours = h && !Number.isNaN(h) ? h : 0; | ||
| const minutes = m && !Number.isNaN(m) ? m : 0; | ||
| const seconds = s && !Number.isNaN(s) ? s : 0; | ||
| d.setHours(hours, minutes, seconds, 0); | ||
| return d; | ||
| } | ||
| /** | ||
| * Adds time to DateTime object | ||
| * Replaces the original `getDate` function | ||
| * | ||
| * @returns DateTime | ||
| */ | ||
| getDate() { | ||
| if (this.picker.options.date instanceof Date) { | ||
| const date = new datetime.DateTime(this.picker.options.date, this.picker.options.format); | ||
| if (this.timePicked.input instanceof Date) { | ||
| const t = this.timePicked.input; | ||
| date.setHours(t.getHours(), t.getMinutes(), t.getSeconds(), 0); | ||
| } | ||
| return date; | ||
| } | ||
| return null; | ||
| } | ||
| /** | ||
| * Adds time to DateTime object | ||
| * Replaces the original `getStartDate` function | ||
| * | ||
| * @returns DateTime | ||
| */ | ||
| getStartDate() { | ||
| if (this.rangePlugin.options.startDate instanceof Date) { | ||
| const date = new datetime.DateTime(this.rangePlugin.options.startDate, this.picker.options.format); | ||
| if (this.timePicked.start instanceof Date) { | ||
| const t = this.timePicked.start; | ||
| date.setHours(t.getHours(), t.getMinutes(), t.getSeconds(), 0); | ||
| } | ||
| return date; | ||
| } | ||
| return null; | ||
| } | ||
| /** | ||
| * Adds time to DateTime object | ||
| * Replaces the original `getEndDate` function | ||
| * | ||
| * @returns DateTime | ||
| */ | ||
| getEndDate() { | ||
| if (this.rangePlugin.options.endDate instanceof Date) { | ||
| const date = new datetime.DateTime(this.rangePlugin.options.endDate, this.picker.options.format); | ||
| if (this.timePicked.end instanceof Date) { | ||
| const t = this.timePicked.end; | ||
| date.setHours(t.getHours(), t.getMinutes(), t.getSeconds(), 0); | ||
| } | ||
| return date; | ||
| } | ||
| return null; | ||
| } | ||
| /** | ||
| * | ||
| * @returns HTMLElement | ||
| */ | ||
| getSingleInput() { | ||
| if (this.options.native) { | ||
| return this.getNativeInput('input'); | ||
| } | ||
| return this.getCustomInput('input'); | ||
| } | ||
| /** | ||
| * | ||
| * @returns HTMLElement | ||
| */ | ||
| getStartInput() { | ||
| if (this.options.native) { | ||
| return this.getNativeInput('start'); | ||
| } | ||
| return this.getCustomInput('start'); | ||
| } | ||
| /** | ||
| * | ||
| * @returns HTMLElement | ||
| */ | ||
| getEndInput() { | ||
| if (this.options.native) { | ||
| return this.getNativeInput('end'); | ||
| } | ||
| return this.getCustomInput('end'); | ||
| } | ||
| /** | ||
| * Returns `input[type="time"]` element | ||
| * | ||
| * @param name | ||
| * @returns HTMLElement | ||
| */ | ||
| getNativeInput(name) { | ||
| const element = document.createElement('input'); | ||
| element.type = 'time'; | ||
| element.name = name; | ||
| element.className = 'time-plugin-input unit'; | ||
| const t = this.timePicked[name]; | ||
| if (t) { | ||
| const HH = `0${t.getHours()}`.slice(-2); | ||
| const mm = `0${t.getMinutes()}`.slice(-2); | ||
| element.value = `${HH}:${mm}`; | ||
| } | ||
| return element; | ||
| } | ||
| /** | ||
| * Returns `select` element | ||
| * | ||
| * @param name | ||
| * @returns HTMLElement | ||
| */ | ||
| getCustomInput(name) { | ||
| const block = document.createElement('div'); | ||
| block.className = 'time-plugin-custom-block'; | ||
| const hSelect = document.createElement('select'); | ||
| hSelect.className = 'time-plugin-custom-input unit'; | ||
| hSelect.name = `${name}[HH]`; | ||
| const hStart = this.options.format12 ? 1 : 0; | ||
| const hLimit = this.options.format12 ? 13 : 24; | ||
| let date = null; | ||
| if (!this.picker.options.autoApply && this.timePrePicked[name] instanceof Date) { | ||
| date = this.timePrePicked[name].clone(); | ||
| } | ||
| else if (this.timePicked[name] instanceof Date) { | ||
| date = this.timePicked[name].clone(); | ||
| } | ||
| for (let i = hStart; i < hLimit; i += this.options.stepHours) { | ||
| const hOption = document.createElement('option'); | ||
| hOption.value = String(i); | ||
| hOption.text = String(i); | ||
| if (date) { | ||
| if (this.options.format12) { | ||
| const hours = date.getHours() % 12 ? date.getHours() % 12 : 12; | ||
| if (hours === i) { | ||
| hOption.selected = true; | ||
| } | ||
| } | ||
| else if (date.getHours() === i) { | ||
| hOption.selected = true; | ||
| } | ||
| } | ||
| hSelect.appendChild(hOption); | ||
| } | ||
| block.appendChild(hSelect); | ||
| const mSelect = document.createElement('select'); | ||
| mSelect.className = 'time-plugin-custom-input unit'; | ||
| mSelect.name = `${name}[mm]`; | ||
| const mLimit = 60; | ||
| for (let i = 0; i < mLimit; i += this.options.stepMinutes) { | ||
| const mOption = document.createElement('option'); | ||
| mOption.value = `0${String(i)}`.slice(-2); | ||
| mOption.text = `0${String(i)}`.slice(-2); | ||
| if (date && date.getMinutes() === i) { | ||
| mOption.selected = true; | ||
| } | ||
| mSelect.appendChild(mOption); | ||
| } | ||
| block.appendChild(mSelect); | ||
| if (this.options.seconds) { | ||
| const sSelect = document.createElement('select'); | ||
| sSelect.className = 'time-plugin-custom-input unit'; | ||
| sSelect.name = `${name}[ss]`; | ||
| const sLimit = 60; | ||
| for (let i = 0; i < sLimit; i += this.options.stepSeconds) { | ||
| const sOption = document.createElement('option'); | ||
| sOption.value = `0${String(i)}`.slice(-2); | ||
| sOption.text = `0${String(i)}`.slice(-2); | ||
| if (date && date.getSeconds() === i) { | ||
| sOption.selected = true; | ||
| } | ||
| sSelect.appendChild(sOption); | ||
| } | ||
| block.appendChild(sSelect); | ||
| } | ||
| if (this.options.format12) { | ||
| const pSelect = document.createElement('select'); | ||
| pSelect.className = 'time-plugin-custom-input unit'; | ||
| pSelect.name = `${name}[period]`; | ||
| ['AM', 'PM'].forEach(x => { | ||
| const pOption = document.createElement('option'); | ||
| pOption.value = x; | ||
| pOption.text = x; | ||
| if (date && x === 'PM' && date.getHours() >= 12) { | ||
| pOption.selected = true; | ||
| } | ||
| pSelect.appendChild(pOption); | ||
| }); | ||
| block.appendChild(pSelect); | ||
| } | ||
| return block; | ||
| } | ||
| /** | ||
| * Handle 12H time | ||
| * | ||
| * @param period | ||
| * @param date | ||
| * @param value | ||
| * @returns DateTime | ||
| */ | ||
| handleFormat12(period, date, value) { | ||
| const d = date.clone(); | ||
| switch (period) { | ||
| case 'AM': | ||
| if (value === 12) { | ||
| d.setHours(0, d.getMinutes(), d.getSeconds(), 0); | ||
| } | ||
| else { | ||
| d.setHours(value, d.getMinutes(), d.getSeconds(), 0); | ||
| } | ||
| break; | ||
| case 'PM': | ||
| if (value !== 12) { | ||
| d.setHours(value + 12, d.getMinutes(), d.getSeconds(), 0); | ||
| } | ||
| else { | ||
| d.setHours(value, d.getMinutes(), d.getSeconds(), 0); | ||
| } | ||
| break; | ||
| } | ||
| return d; | ||
| } | ||
| parseValues() { | ||
| if (this.rangePlugin) { | ||
| if (this.rangePlugin.options.strict) { | ||
| if (this.rangePlugin.options.startDate && this.rangePlugin.options.endDate) { | ||
| const d1 = new datetime.DateTime(this.rangePlugin.options.startDate, this.picker.options.format); | ||
| const d2 = new datetime.DateTime(this.rangePlugin.options.endDate, this.picker.options.format); | ||
| this.timePicked.start = d1.clone(); | ||
| this.timePicked.end = d2.clone(); | ||
| } | ||
| } | ||
| else { | ||
| if (this.rangePlugin.options.startDate) { | ||
| const d = new datetime.DateTime(this.rangePlugin.options.startDate, this.picker.options.format); | ||
| this.timePicked.start = d.clone(); | ||
| } | ||
| if (this.rangePlugin.options.endDate) { | ||
| const d = new datetime.DateTime(this.rangePlugin.options.endDate, this.picker.options.format); | ||
| this.timePicked.end = d.clone(); | ||
| } | ||
| } | ||
| if (this.rangePlugin.options.elementEnd) { | ||
| if (this.rangePlugin.options.strict) { | ||
| if (this.picker.options.element instanceof HTMLInputElement | ||
| && this.picker.options.element.value.length | ||
| && this.rangePlugin.options.elementEnd instanceof HTMLInputElement | ||
| && this.rangePlugin.options.elementEnd.value.length) { | ||
| const d1 = new datetime.DateTime(this.picker.options.element.value, this.picker.options.format); | ||
| const d2 = new datetime.DateTime(this.rangePlugin.options.elementEnd.value, this.picker.options.format); | ||
| this.timePicked.start = d1.clone(); | ||
| this.timePicked.end = d2.clone(); | ||
| } | ||
| } | ||
| else { | ||
| if (this.picker.options.element instanceof HTMLInputElement | ||
| && this.picker.options.element.value.length) { | ||
| const d = new datetime.DateTime(this.picker.options.element.value, this.picker.options.format); | ||
| this.timePicked.start = d.clone(); | ||
| } | ||
| if (this.rangePlugin.options.elementEnd instanceof HTMLInputElement | ||
| && this.rangePlugin.options.elementEnd.value.length) { | ||
| const d = new datetime.DateTime(this.rangePlugin.options.elementEnd.value, this.picker.options.format); | ||
| this.timePicked.start = d.clone(); | ||
| } | ||
| } | ||
| } | ||
| else if (this.picker.options.element instanceof HTMLInputElement && this.picker.options.element.value.length) { | ||
| const [_start, _end] = this.picker.options.element.value.split(this.rangePlugin.options.delimiter); | ||
| if (this.rangePlugin.options.strict) { | ||
| if (_start && _end) { | ||
| const d1 = new datetime.DateTime(_start, this.picker.options.format); | ||
| const d2 = new datetime.DateTime(_end, this.picker.options.format); | ||
| this.timePicked.start = d1.clone(); | ||
| this.timePicked.end = d2.clone(); | ||
| } | ||
| } | ||
| else { | ||
| if (_start) { | ||
| const d = new datetime.DateTime(_start, this.picker.options.format); | ||
| this.timePicked.start = d.clone(); | ||
| } | ||
| if (_end) { | ||
| const d = new datetime.DateTime(_end, this.picker.options.format); | ||
| this.timePicked.start = d.clone(); | ||
| } | ||
| } | ||
| } | ||
| } | ||
| else { | ||
| if (this.picker.options.date) { | ||
| const d = new datetime.DateTime(this.picker.options.date, this.picker.options.format); | ||
| this.timePicked.input = d.clone(); | ||
| } | ||
| if (this.picker.options.element instanceof HTMLInputElement && this.picker.options.element.value.length) { | ||
| const d = new datetime.DateTime(this.picker.options.element.value, this.picker.options.format); | ||
| this.timePicked.input = d.clone(); | ||
| } | ||
| } | ||
| } | ||
| } | ||
| exports.TimePlugin = TimePlugin; | ||
| Object.defineProperty(exports, '__esModule', { value: true }); | ||
| })); | ||
| !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@easepick/datetime"),require("@easepick/base-plugin")):"function"==typeof define&&define.amd?define(["exports","@easepick/datetime","@easepick/base-plugin"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).easepick=e.easepick||{},e.easepick,e.easepick)}(this,(function(e,t,i){"use strict";class n extends i.BasePlugin{options={native:!1,seconds:!1,stepHours:1,stepMinutes:5,stepSeconds:5,format12:!1};rangePlugin;timePicked={input:null,start:null,end:null};timePrePicked={input:null,start:null,end:null};binds={getDate:this.getDate.bind(this),getStartDate:this.getStartDate.bind(this),getEndDate:this.getEndDate.bind(this),onView:this.onView.bind(this),onInput:this.onInput.bind(this),onChange:this.onChange.bind(this),onClick:this.onClick.bind(this),setTime:this.setTime.bind(this),setStartTime:this.setStartTime.bind(this),setEndTime:this.setEndTime.bind(this)};getName(){return"TimePlugin"}onAttach(){this.binds._getDate=this.picker.getDate,this.binds._getStartDate=this.picker.getStartDate,this.binds._getEndDate=this.picker.getEndDate,Object.defineProperties(this.picker,{getDate:{configurable:!0,value:this.binds.getDate},getStartDate:{configurable:!0,value:this.binds.getStartDate},getEndDate:{configurable:!0,value:this.binds.getEndDate},setTime:{configurable:!0,value:this.binds.setTime},setStartTime:{configurable:!0,value:this.binds.setStartTime},setEndTime:{configurable:!0,value:this.binds.setEndTime}}),this.rangePlugin=this.picker.PluginManager.getInstance("RangePlugin"),this.parseValues(),this.picker.on("view",this.binds.onView),this.picker.on("input",this.binds.onInput),this.picker.on("change",this.binds.onChange),this.picker.on("click",this.binds.onClick)}onDetach(){delete this.picker.setTime,delete this.picker.setStartTime,delete this.picker.setEndTime,Object.defineProperties(this.picker,{getDate:{configurable:!0,value:this.binds._getDate},getStartDate:{configurable:!0,value:this.binds._getStartDate},getEndDate:{configurable:!0,value:this.binds._getEndDate}}),this.picker.off("view",this.binds.onView),this.picker.off("input",this.binds.onInput),this.picker.off("change",this.binds.onChange),this.picker.off("click",this.binds.onClick)}onView(e){const{view:t,target:i}=e.detail;if("Main"===t){this.rangePlugin=this.picker.PluginManager.getInstance("RangePlugin");const e=document.createElement("div");if(e.className="time-plugin-container",this.rangePlugin){const t=this.getStartInput();e.appendChild(t),this.picker.trigger("view",{view:"TimePluginInput",target:t});const i=this.getEndInput();e.appendChild(i),this.picker.trigger("view",{view:"TimePluginInput",target:i})}else{const t=this.getSingleInput();e.appendChild(t),this.picker.trigger("view",{view:"TimePluginInput",target:t})}i.appendChild(e),this.picker.trigger("view",{view:"TimePluginContainer",target:e})}}onInput(e){const i=e.target;if(i instanceof HTMLInputElement&&i.classList.contains("time-plugin-input")){const e=this.timePicked[i.name]||new t.DateTime,[n,s]=i.value.split(":");e.setHours(Number(n)||0,Number(s)||0,0,0),this.picker.options.autoApply?(this.timePicked[i.name]=e,this.picker.updateValues()):this.timePrePicked[i.name]=e}}onChange(e){const i=e.target;if(i instanceof HTMLSelectElement&&i.classList.contains("time-plugin-custom-input")){const e=/(\w+)\[(\w+)\]/,[,n,s]=i.name.match(e),o=Number(i.value);let a=new t.DateTime;switch(!this.picker.options.autoApply&&this.timePrePicked[n]instanceof Date?a=this.timePrePicked[n].clone():this.timePicked[n]instanceof Date&&(a=this.timePicked[n].clone()),s){case"HH":if(this.options.format12){const e=i.closest(".time-plugin-custom-block").querySelector(`select[name="${n}[period]"]`).value,t=this.handleFormat12(e,a,o);a.setHours(t.getHours(),t.getMinutes(),t.getSeconds(),0)}else a.setHours(o,a.getMinutes(),a.getSeconds(),0);break;case"mm":a.setHours(a.getHours(),o,a.getSeconds(),0);break;case"ss":a.setHours(a.getHours(),a.getMinutes(),o,0);break;case"period":if(this.options.format12){const e=i.closest(".time-plugin-custom-block").querySelector(`select[name="${n}[HH]"]`).value,t=this.handleFormat12(i.value,a,Number(e));a.setHours(t.getHours(),t.getMinutes(),t.getSeconds(),0)}}this.picker.options.autoApply?(this.timePicked[n]=a,this.picker.updateValues()):this.timePrePicked[n]=a}}onClick(e){const t=e.target;if(t instanceof HTMLElement){const e=t.closest(".unit");if(!(e instanceof HTMLElement))return;this.picker.isApplyButton(e)&&(this.timePicked={...this.timePrePicked},this.picker.updateValues(),this.timePrePicked={input:null,start:null,end:null}),this.picker.isCancelButton(e)&&(this.timePrePicked={input:null,start:null,end:null},this.picker.renderAll())}}setTime(e){const t=this.handleTimeString(e);this.timePicked.input=t.clone(),this.picker.renderAll(),this.picker.updateValues()}setStartTime(e){const t=this.handleTimeString(e);this.timePicked.start=t.clone(),this.picker.renderAll(),this.picker.updateValues()}setEndTime(e){const t=this.handleTimeString(e);this.timePicked.end=t.clone(),this.picker.renderAll(),this.picker.updateValues()}handleTimeString(e){const i=new t.DateTime,[n,s,o]=e.split(":").map((e=>Number(e))),a=n&&!Number.isNaN(n)?n:0,c=s&&!Number.isNaN(s)?s:0,r=o&&!Number.isNaN(o)?o:0;return i.setHours(a,c,r,0),i}getDate(){if(this.picker.options.date instanceof Date){const e=new t.DateTime(this.picker.options.date,this.picker.options.format);if(this.timePicked.input instanceof Date){const t=this.timePicked.input;e.setHours(t.getHours(),t.getMinutes(),t.getSeconds(),0)}return e}return null}getStartDate(){if(this.rangePlugin.options.startDate instanceof Date){const e=new t.DateTime(this.rangePlugin.options.startDate,this.picker.options.format);if(this.timePicked.start instanceof Date){const t=this.timePicked.start;e.setHours(t.getHours(),t.getMinutes(),t.getSeconds(),0)}return e}return null}getEndDate(){if(this.rangePlugin.options.endDate instanceof Date){const e=new t.DateTime(this.rangePlugin.options.endDate,this.picker.options.format);if(this.timePicked.end instanceof Date){const t=this.timePicked.end;e.setHours(t.getHours(),t.getMinutes(),t.getSeconds(),0)}return e}return null}getSingleInput(){return this.options.native?this.getNativeInput("input"):this.getCustomInput("input")}getStartInput(){return this.options.native?this.getNativeInput("start"):this.getCustomInput("start")}getEndInput(){return this.options.native?this.getNativeInput("end"):this.getCustomInput("end")}getNativeInput(e){const t=document.createElement("input");t.type="time",t.name=e,t.className="time-plugin-input unit";const i=this.timePicked[e];if(i){const e=`0${i.getHours()}`.slice(-2),n=`0${i.getMinutes()}`.slice(-2);t.value=`${e}:${n}`}return t}getCustomInput(e){const t=document.createElement("div");t.className="time-plugin-custom-block";const i=document.createElement("select");i.className="time-plugin-custom-input unit",i.name=`${e}[HH]`;const n=this.options.format12?1:0,s=this.options.format12?13:24;let o=null;!this.picker.options.autoApply&&this.timePrePicked[e]instanceof Date?o=this.timePrePicked[e].clone():this.timePicked[e]instanceof Date&&(o=this.timePicked[e].clone());for(let e=n;e<s;e+=this.options.stepHours){const t=document.createElement("option");if(t.value=String(e),t.text=String(e),o)if(this.options.format12){(o.getHours()%12?o.getHours()%12:12)===e&&(t.selected=!0)}else o.getHours()===e&&(t.selected=!0);i.appendChild(t)}t.appendChild(i);const a=document.createElement("select");a.className="time-plugin-custom-input unit",a.name=`${e}[mm]`;for(let e=0;e<60;e+=this.options.stepMinutes){const t=document.createElement("option");t.value=`0${String(e)}`.slice(-2),t.text=`0${String(e)}`.slice(-2),o&&o.getMinutes()===e&&(t.selected=!0),a.appendChild(t)}if(t.appendChild(a),this.options.seconds){const i=document.createElement("select");i.className="time-plugin-custom-input unit",i.name=`${e}[ss]`;const n=60;for(let e=0;e<n;e+=this.options.stepSeconds){const t=document.createElement("option");t.value=`0${String(e)}`.slice(-2),t.text=`0${String(e)}`.slice(-2),o&&o.getSeconds()===e&&(t.selected=!0),i.appendChild(t)}t.appendChild(i)}if(this.options.format12){const i=document.createElement("select");i.className="time-plugin-custom-input unit",i.name=`${e}[period]`,["AM","PM"].forEach((e=>{const t=document.createElement("option");t.value=e,t.text=e,o&&"PM"===e&&o.getHours()>=12&&(t.selected=!0),i.appendChild(t)})),t.appendChild(i)}return t}handleFormat12(e,t,i){const n=t.clone();switch(e){case"AM":12===i?n.setHours(0,n.getMinutes(),n.getSeconds(),0):n.setHours(i,n.getMinutes(),n.getSeconds(),0);break;case"PM":12!==i?n.setHours(i+12,n.getMinutes(),n.getSeconds(),0):n.setHours(i,n.getMinutes(),n.getSeconds(),0)}return n}parseValues(){if(this.rangePlugin){if(this.rangePlugin.options.strict){if(this.rangePlugin.options.startDate&&this.rangePlugin.options.endDate){const e=new t.DateTime(this.rangePlugin.options.startDate,this.picker.options.format),i=new t.DateTime(this.rangePlugin.options.endDate,this.picker.options.format);this.timePicked.start=e.clone(),this.timePicked.end=i.clone()}}else{if(this.rangePlugin.options.startDate){const e=new t.DateTime(this.rangePlugin.options.startDate,this.picker.options.format);this.timePicked.start=e.clone()}if(this.rangePlugin.options.endDate){const e=new t.DateTime(this.rangePlugin.options.endDate,this.picker.options.format);this.timePicked.end=e.clone()}}if(this.rangePlugin.options.elementEnd)if(this.rangePlugin.options.strict){if(this.picker.options.element instanceof HTMLInputElement&&this.picker.options.element.value.length&&this.rangePlugin.options.elementEnd instanceof HTMLInputElement&&this.rangePlugin.options.elementEnd.value.length){const e=new t.DateTime(this.picker.options.element.value,this.picker.options.format),i=new t.DateTime(this.rangePlugin.options.elementEnd.value,this.picker.options.format);this.timePicked.start=e.clone(),this.timePicked.end=i.clone()}}else{if(this.picker.options.element instanceof HTMLInputElement&&this.picker.options.element.value.length){const e=new t.DateTime(this.picker.options.element.value,this.picker.options.format);this.timePicked.start=e.clone()}if(this.rangePlugin.options.elementEnd instanceof HTMLInputElement&&this.rangePlugin.options.elementEnd.value.length){const e=new t.DateTime(this.rangePlugin.options.elementEnd.value,this.picker.options.format);this.timePicked.start=e.clone()}}else if(this.picker.options.element instanceof HTMLInputElement&&this.picker.options.element.value.length){const[e,i]=this.picker.options.element.value.split(this.rangePlugin.options.delimiter);if(this.rangePlugin.options.strict){if(e&&i){const n=new t.DateTime(e,this.picker.options.format),s=new t.DateTime(i,this.picker.options.format);this.timePicked.start=n.clone(),this.timePicked.end=s.clone()}}else{if(e){const i=new t.DateTime(e,this.picker.options.format);this.timePicked.start=i.clone()}if(i){const e=new t.DateTime(i,this.picker.options.format);this.timePicked.start=e.clone()}}}}else{if(this.picker.options.date){const e=new t.DateTime(this.picker.options.date,this.picker.options.format);this.timePicked.input=e.clone()}if(this.picker.options.element instanceof HTMLInputElement&&this.picker.options.element.value.length){const e=new t.DateTime(this.picker.options.element.value,this.picker.options.format);this.timePicked.input=e.clone()}}}}e.TimePlugin=n,Object.defineProperty(e,"__esModule",{value:!0})})); |
@@ -16,3 +16,5 @@ import { DateTime } from '@easepick/datetime'; | ||
| getEndDate(): DateTime; | ||
| setTime(keyName: string, value: string): void; | ||
| setTime(value: string): void; | ||
| setStartTime(value: string): void; | ||
| setEndTime(value: string): void; | ||
| } | ||
@@ -19,0 +21,0 @@ } |
| { | ||
| "name": "@easepick/time-plugin", | ||
| "description": "Plugin for easepick.", | ||
| "version": "1.0.1-beta.0", | ||
| "version": "1.0.1-beta.1", | ||
| "main": "dist/index.umd.js", | ||
@@ -6,0 +6,0 @@ "module": "dist/index.esm.js", |
Sorry, the diff of this file is not supported yet
New alerts
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 1 instance in 1 package
Fixed alerts
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Worsened metrics
- Total package byte prevSize
- decreased by-45.2%
28549
- Lines of code
- decreased by-80.49%
268
- Number of low quality alerts
- increased by100%
2
No dependency changes