From b80a3f633bfd9de1a6476b59c5bcc9e10ebd4b93 Mon Sep 17 00:00:00 2001 From: Yury Uvarov Date: Sun, 3 Dec 2023 18:38:13 +0300 Subject: [PATCH] add "self" to actions --- demo/pages/input/main.ts | 20 ++--- demo/pages/multiple/main.ts | 1 + package/index.d.ts | 18 ++--- package/src/scripts/default.ts | 2 +- .../src/scripts/handles/handleClickArrow.ts | 2 +- package/src/scripts/handles/handleClickDay.ts | 8 +- .../scripts/handles/handleClickMonthOrYear.ts | 4 +- .../scripts/handles/handleClickWeekNumber.ts | 2 +- package/src/scripts/helpers/actionsInput.ts | 7 +- package/src/scripts/methods/changeTime.ts | 24 +----- package/src/scripts/methods/createDays.ts | 2 +- package/src/vanilla-calendar.ts | 2 +- package/types.ts | 79 ++++++++++++++----- 13 files changed, 96 insertions(+), 75 deletions(-) diff --git a/demo/pages/input/main.ts b/demo/pages/input/main.ts index edd8cfff..ebdabb15 100644 --- a/demo/pages/input/main.ts +++ b/demo/pages/input/main.ts @@ -15,12 +15,12 @@ import '@src/styles/themes/dark.css'; const configInput: IOptions = { input: true, actions: { - changeToInput(e, calendar, dates) { - if (!dates) return; - if (dates[0]) { - calendar.HTMLInputElement.value = dates[0]; + changeToInput(e, calendar, self) { + if (!self.selectedDates || !self.HTMLInputElement) return; + if (self.selectedDates[0]) { + self.HTMLInputElement.value = self.selectedDates[0]; } else { - calendar.HTMLInputElement.value = ''; + self.HTMLInputElement.value = ''; } calendar.hide(); }, @@ -30,12 +30,12 @@ const configInput: IOptions = { const configDiv: IOptions = { input: true, actions: { - changeToInput(e, calendar, dates) { - if (!dates) return; - if (dates[0]) { - calendar.HTMLInputElement.innerHTML = dates[0]; + changeToInput(e, calendar, self) { + if (!self.selectedDates || !self.HTMLInputElement) return; + if (self.selectedDates[0]) { + self.HTMLInputElement.innerHTML = self.selectedDates[0]; } else { - calendar.HTMLInputElement.innerHTML = ''; + self.HTMLInputElement.innerHTML = ''; } calendar.hide(); }, diff --git a/demo/pages/multiple/main.ts b/demo/pages/multiple/main.ts index 159d9242..bea94a3e 100644 --- a/demo/pages/multiple/main.ts +++ b/demo/pages/multiple/main.ts @@ -17,6 +17,7 @@ const config: IOptions = { settings: { selection: { day: 'multiple-ranged', + cancelableDay: false, }, selected: { month: 3, diff --git a/package/index.d.ts b/package/index.d.ts index da99302b..fffb3a61 100644 --- a/package/index.d.ts +++ b/package/index.d.ts @@ -2,7 +2,7 @@ import * as T from './types'; export type Options = T.IOptions; export type TypesCalendar = T.TypesCalendar; -export type Date = T.IDate; +export type Dates = T.IDates; export type Range = T.IRange; export type Selection = T.ISelection; export type Selected = T.ISelected; @@ -13,14 +13,14 @@ export type Popups = T.IPopups; export type CSSClasses = T.ICSSClasses; export type DOMTemplates = T.IDOMTemplates; -export default class VanillaCalendar { +export default class VanillaCalendar implements T.IVanillaCalendar { constructor(selector: HTMLElement | string, options?: Partial); input: boolean; type: T.TypesCalendar; months: number; jumpMonths: number; - date: T.IDate; + date: T.IDates; settings: { lang: string; iso8601: boolean; @@ -50,12 +50,12 @@ export default class VanillaCalendar { readonly selectedDates: T.FormatDateString[]; readonly selectedHolidays: T.FormatDateString[]; readonly selectedMonth: number; - readonly selectedYea: number; - readonly selectedHours: string; - readonly selectedMinutes: string; - readonly selectedKeeping: string; - readonly selectedTime: string; - readonly userTime: boolean; + readonly selectedYear: number; + readonly selectedHours?: string; + readonly selectedMinutes?: string; + readonly selectedKeeping?: string; + readonly selectedTime?: string; + readonly userTime?: boolean; readonly currentType: T.TypesCalendar; readonly correctMonths: number; readonly viewYear: number; diff --git a/package/src/scripts/default.ts b/package/src/scripts/default.ts index 7483ff36..464f7348 100644 --- a/package/src/scripts/default.ts +++ b/package/src/scripts/default.ts @@ -11,7 +11,7 @@ export default class DefaultOptionsCalendar { type: T.TypesCalendar = 'default'; months = 2; jumpMonths = 1; - date: T.IDate = { + date: T.IDates = { min: '1970-01-01', max: '2470-12-31', today: new Date(), diff --git a/package/src/scripts/handles/handleClickArrow.ts b/package/src/scripts/handles/handleClickArrow.ts index 4188afeb..48359c27 100644 --- a/package/src/scripts/handles/handleClickArrow.ts +++ b/package/src/scripts/handles/handleClickArrow.ts @@ -15,7 +15,7 @@ const handleClickArrow = (self: VanillaCalendar, event: MouseEvent) => { createYears(self, event.target as HTMLElement); } - if (self.actions.clickArrow) self.actions.clickArrow(event, self.selectedYear as number, self.selectedMonth as number); + if (self.actions.clickArrow) self.actions.clickArrow(event, self); }; export default handleClickArrow; diff --git a/package/src/scripts/handles/handleClickDay.ts b/package/src/scripts/handles/handleClickDay.ts index 21a43f6b..8e43eb89 100644 --- a/package/src/scripts/handles/handleClickDay.ts +++ b/package/src/scripts/handles/handleClickDay.ts @@ -20,18 +20,14 @@ const handleClickDay = (self: VanillaCalendar, event: MouseEvent) => { daySelectionActions[self.settings.selection.day](); self.selectedDates?.sort((a, b) => +new Date(a) - +new Date(b)); - if (self.actions.clickDay) self.actions.clickDay(event, self.selectedDates); + if (self.actions.clickDay) self.actions.clickDay(event, self); const isInitAsInput = self.input && self.HTMLInputElement && self.HTMLElement; if (isInitAsInput && self.actions.changeToInput) { self.actions.changeToInput( event, actionsInput(self), - self.selectedDates, - self.selectedTime, - self.selectedHours, - self.selectedMinutes, - self.selectedKeeping, + self, ); } diff --git a/package/src/scripts/handles/handleClickMonthOrYear.ts b/package/src/scripts/handles/handleClickMonthOrYear.ts index e0c3c02b..e17abfc6 100644 --- a/package/src/scripts/handles/handleClickMonthOrYear.ts +++ b/package/src/scripts/handles/handleClickMonthOrYear.ts @@ -14,8 +14,8 @@ type HandleCSSClasses = { const handleItemClick = (self: VanillaCalendar, event: MouseEvent, type: HandleType, CSSClasses: HandleCSSClasses, itemEl: HTMLElement) => { const actionByType = { - year: () => self.actions.clickYear?.(event, self.selectedYear as number, self.selectedMonth as number), - month: () => self.actions.clickMonth?.(event, self.selectedMonth as number, self.selectedYear as number), + year: () => self.actions.clickYear?.(event, self), + month: () => self.actions.clickMonth?.(event, self), }; const selectByType = { year: () => { diff --git a/package/src/scripts/handles/handleClickWeekNumber.ts b/package/src/scripts/handles/handleClickWeekNumber.ts index 56168b27..00bb63e2 100644 --- a/package/src/scripts/handles/handleClickWeekNumber.ts +++ b/package/src/scripts/handles/handleClickWeekNumber.ts @@ -12,7 +12,7 @@ const handleClickWeekNumber = (self: VanillaCalendar, event: MouseEvent) => { const yearWeek = Number(weekNumberEl.dataset.calendarYearWeek); const daysOfThisWeek = [...daysToWeeks].filter((day) => Number((day as HTMLElement).dataset.calendarWeekNumber) === weekNumberValue); - self.actions.clickWeekNumber(event, weekNumberValue, daysOfThisWeek, yearWeek); + self.actions.clickWeekNumber(event, weekNumberValue, daysOfThisWeek, yearWeek, self); }; export default handleClickWeekNumber; diff --git a/package/src/scripts/helpers/actionsInput.ts b/package/src/scripts/helpers/actionsInput.ts index 32b778a2..27627683 100644 --- a/package/src/scripts/helpers/actionsInput.ts +++ b/package/src/scripts/helpers/actionsInput.ts @@ -3,14 +3,13 @@ import VanillaCalendar from '@src/vanilla-calendar'; const actionsInput = (self: VanillaCalendar) => ({ hide() { self.HTMLElement.classList.add(self.CSSClasses.calendarHidden); - if (self.actions.hideCalendar) self.actions.hideCalendar(self.HTMLInputElement as HTMLInputElement, self.HTMLElement); + if (self.actions.hideCalendar) self.actions.hideCalendar(self); }, show() { self.HTMLElement.classList.remove(self.CSSClasses.calendarHidden); - if (self.actions.showCalendar) self.actions.showCalendar(self.HTMLInputElement as HTMLInputElement, self.HTMLElement); + if (self.actions.showCalendar) self.actions.showCalendar(self); }, - HTMLInputElement: self.HTMLInputElement as HTMLInputElement, - HTMLElement: self.HTMLElement, + self, }); export default actionsInput; diff --git a/package/src/scripts/methods/changeTime.ts b/package/src/scripts/methods/changeTime.ts index 041deb77..b2913974 100644 --- a/package/src/scripts/methods/changeTime.ts +++ b/package/src/scripts/methods/changeTime.ts @@ -25,27 +25,9 @@ const setTime = (self: VanillaCalendar, e: Event, value: string, type: TypeTime) self.selectedTime = `${self.selectedHours}:${self.selectedMinutes}${self.selectedKeeping ? ` ${self.selectedKeeping}` : ''}`; - if (self.actions.changeTime) { - self.actions.changeTime( - e, - self.selectedTime, - self.selectedHours, - self.selectedMinutes, - self.selectedKeeping, - ); - } - - if (self.input && self.HTMLInputElement && self.actions.changeToInput) { - self.actions.changeToInput( - e, - actionsInput(self), - self.selectedDates, - self.selectedTime, - self.selectedHours, - self.selectedMinutes, - self.selectedKeeping, - ); - } + if (self.actions.changeTime) self.actions.changeTime(e, self); + + if (self.input && self.HTMLInputElement && self.actions.changeToInput) self.actions.changeToInput(e, actionsInput(self), self); }; const changeRange = (self: VanillaCalendar, range: HTMLInputElement, input: HTMLInputElement, btnKeepingTime: HTMLButtonElement | null, type: TypeTime, max: number) => { diff --git a/package/src/scripts/methods/createDays.ts b/package/src/scripts/methods/createDays.ts index 1fb1b8f6..5b728ed4 100644 --- a/package/src/scripts/methods/createDays.ts +++ b/package/src/scripts/methods/createDays.ts @@ -104,7 +104,7 @@ const createDay = ( setDayModifier(self, year, dayEl, dayBtnEl, dayWeekID, date, otherMonth); daysEl.append(dayEl); - if (self.actions.getDays) self.actions.getDays(day, date, dayEl, dayBtnEl); + if (self.actions.getDays) self.actions.getDays(day, date, dayEl, dayBtnEl, self); }; const prevMonth = (self: VanillaCalendar, daysEl: HTMLElement, selectedYear: number, selectedMonth: number, firstDayWeek: number) => { diff --git a/package/src/vanilla-calendar.ts b/package/src/vanilla-calendar.ts index d7c0ce4e..47371874 100644 --- a/package/src/vanilla-calendar.ts +++ b/package/src/vanilla-calendar.ts @@ -6,7 +6,7 @@ import init from '@scripts/init'; import destroy from '@scripts/destroy'; import messages from '@scripts/helpers/getMessages'; -export default class VanillaCalendar extends DefaultOptionsCalendar { +export default class VanillaCalendar extends DefaultOptionsCalendar implements T.IVanillaCalendar { constructor(selector: HTMLElement | string, options?: Partial) { super(); diff --git a/package/types.ts b/package/types.ts index 811623d1..56ac632b 100644 --- a/package/types.ts +++ b/package/types.ts @@ -5,7 +5,7 @@ export type FormatDateString = `${number}-${MM}-${DD}`; export type TypesCalendar = 'default' | 'multiple' | 'month' | 'year'; -export interface IDate { +export interface IDates { min: FormatDateString; max: FormatDateString; today: Date; @@ -67,29 +67,23 @@ export interface ILocale { } export interface IActions { - clickDay: ((e: MouseEvent, dates: FormatDateString[] | undefined) => void) | null; - clickWeekNumber: ((e: MouseEvent, number: number, days: HTMLElement[], year: number) => void) | null; - clickMonth: ((e: MouseEvent, month: number, year: number) => void) | null; - clickYear: ((e: MouseEvent, year: number, month: number) => void) | null; - clickArrow: ((e: MouseEvent, year: number, month: number) => void) | null; - changeTime: ((e: Event, time: string, hours: string, minutes: string, keeping: string) => void) | null; + clickDay: ((e: MouseEvent, self: IVanillaCalendar) => void) | null; + clickWeekNumber: ((e: MouseEvent, number: number, days: HTMLElement[], year: number, self: IVanillaCalendar) => void) | null; + clickMonth: ((e: MouseEvent, self: IVanillaCalendar) => void) | null; + clickYear: ((e: MouseEvent, self: IVanillaCalendar) => void) | null; + clickArrow: ((e: MouseEvent, self: IVanillaCalendar) => void) | null; + changeTime: ((e: Event, self: IVanillaCalendar) => void) | null; changeToInput: (( e: Event, calendar: { hide(): void; show(): void; - HTMLInputElement: HTMLInputElement; - HTMLElement: HTMLElement; }, - dates?: FormatDateString[], - time?: string, - hours?: string, - minutes?: string, - keeping?: string + self: IVanillaCalendar, ) => void) | null; - getDays: ((day: number, date: FormatDateString, HTMLElement: HTMLElement, HTMLButtonElement: HTMLButtonElement) => void) | null; - hideCalendar: ((HTMLInputElement: HTMLInputElement, HTMLElement: HTMLElement) => void) | null; - showCalendar: ((HTMLInputElement: HTMLInputElement, HTMLElement: HTMLElement) => void) | null; + getDays: ((day: number, date: FormatDateString, HTMLElement: HTMLElement, HTMLButtonElement: HTMLButtonElement, self: IVanillaCalendar) => void) | null; + hideCalendar: ((self: IVanillaCalendar) => void) | null; + showCalendar: ((self: IVanillaCalendar) => void) | null; } export type IPopup = { @@ -185,7 +179,7 @@ export interface IOptions { type?: TypesCalendar; months?: number; jumpMonths?: number; - date?: Partial; + date?: Partial; settings?: Partial<{ lang: string; iso8601: boolean; @@ -200,3 +194,52 @@ export interface IOptions { CSSClasses?: Partial; DOMTemplates?: Partial; } + +export interface IVanillaCalendar { + input: boolean; + type: TypesCalendar; + months: number; + jumpMonths: number; + date: IDates; + settings: { + lang: string; + iso8601: boolean; + range: IRange; + selection: ISelection; + selected: ISelected; + visibility: IVisibility; + }; + locale: ILocale; + actions: IActions; + popups: IPopups; + CSSClasses: ICSSClasses; + DOMTemplates: IDOMTemplates; + + reset: () => void; + update: () => void; + init: () => void; + destroy: () => void; + + readonly HTMLElement: HTMLElement; + readonly HTMLOriginalElement: HTMLElement; + readonly HTMLInputElement?: HTMLInputElement; + readonly rangeMin: FormatDateString; + readonly rangeMax: FormatDateString; + readonly rangeDisabled: FormatDateString[]; + readonly rangeEnabled: FormatDateString[]; + readonly selectedDates: FormatDateString[]; + readonly selectedHolidays: FormatDateString[]; + readonly selectedMonth: number; + readonly selectedYear: number; + readonly selectedHours?: string; + readonly selectedMinutes?: string; + readonly selectedKeeping?: string; + readonly selectedTime?: string; + readonly userTime?: boolean; + readonly currentType: TypesCalendar; + readonly correctMonths: number; + readonly viewYear: number; + readonly dateMin: Date; + readonly dateMax: Date; + readonly isInit: boolean; +}