Server IP : 80.87.202.40 / Your IP : 216.73.216.169 Web Server : Apache System : Linux rospirotorg.ru 5.14.0-539.el9.x86_64 #1 SMP PREEMPT_DYNAMIC Thu Dec 5 22:26:13 UTC 2024 x86_64 User : bitrix ( 600) PHP Version : 8.2.27 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : OFF | Sudo : ON | Pkexec : ON Directory : /home/bitrix/ext_www/rospirotorg.ru/bitrix/js/ui/date-picker/src/ |
Upload File : |
import { Dom, Tag, Text, Event } from 'main.core'; import { DateTimeFormat } from 'main.date'; import { MemoryCache, type BaseCache } from 'main.core.cache'; import { BasePicker } from './base-picker'; import { createUtcDate } from './helpers/create-utc-date'; import { getDate } from './helpers/get-date'; import { isDatesEqual } from './helpers/is-dates-equal'; export type MonthPickerQuarter = Array<MonthPickerMonth>; export type MonthPickerMonth = { name: string, date: Date, year: number, month: number, current: boolean, selected: boolean, focused: boolean, tabIndex: number, }; import './css/month-picker.css'; export class MonthPicker extends BasePicker { #refs: BaseCache<HTMLElement> = new MemoryCache(); getContainer(): HTMLElement { return this.#refs.remember('container', () => { return Tag.render` <div class="ui-month-picker"> ${this.getHeaderContainer( this.getPrevBtn(), this.getHeaderTitle(), this.getNextBtn(), )} ${this.getContentContainer()} </div> `; }); } getHeaderTitle(): HTMLElement { return this.#refs.remember('header-title', () => { return Tag.render` <button type="button" class="ui-month-picker-header-title" onclick="${this.#handleTitleClick.bind(this)}"></button> `; }); } getMonths(): MonthPickerQuarter[] { const { year } = getDate(this.getDatePicker().getViewDate()); const today = this.getDatePicker().getToday(); const focusDate = this.getDatePicker().getFocusDate(); const initialFocusDate = this.getDatePicker().getInitialFocusDate(); // const formatter = new Intl.DateTimeFormat( // this.getDatePicker().getLocale(), // { month: 'short', timeZone: 'UTC' }, // ); const months: MonthPickerQuarter[] = []; let currentMonthIndex = 0; for (let quarterIndex = 0; quarterIndex < 4; quarterIndex++) { const quarter: MonthPickerQuarter = []; for (let monthIndex = 0; monthIndex < 3; monthIndex++) { const date = createUtcDate(year, currentMonthIndex); const focused = isDatesEqual(date, focusDate, 'month'); const month: MonthPickerMonth = { name: DateTimeFormat.format('f', date, null, true), // name: formatter.format(date), date, year, month: currentMonthIndex, current: isDatesEqual(date, today, 'month'), selected: this.getDatePicker().isDateSelected(date, 'month'), focused, tabIndex: focused || isDatesEqual(date, initialFocusDate, 'month') ? 0 : -1, }; quarter.push(month); currentMonthIndex++; } months.push(quarter); } return months; } renderTo(container: HTMLElement) { super.renderTo(container); Event.bind(this.getContentContainer(), 'click', this.#handleMonthClick.bind(this)); } render(): void { const isFocused = this.getDatePicker().isFocused(); let focusButton: HTMLButtonElement = null; this.getMonths().forEach((quarter: MonthPickerQuarter, index) => { const quarterContainer: HTMLElement = this.#renderQuarter(index); quarter.forEach((month: MonthPickerMonth) => { const button = this.#renderMonth(month, quarterContainer); if (month.focused) { focusButton = button; } }); }); if (focusButton !== null && isFocused) { focusButton.focus({ preventScroll: true }); } const { year: currentYear } = getDate(this.getDatePicker().getViewDate()); this.getHeaderTitle().textContent = currentYear; } #renderQuarter(index: number): HTMLElement { return this.#refs.remember(`quarter-${index}`, () => { const container: HTMLElement = Tag.render`<div class="ui-month-picker-quarter"></div>`; Dom.append(container, this.getContentContainer()); return container; }); } #renderMonth(month, quarterContainer: HTMLElement): HTMLButtonElement { const button: HTMLElement = this.#refs.remember(`month-${month.month}`, () => { const monthButton: HTMLElement = Tag.render` <button type="button" class="ui-month-picker-month" data-year="${month.year}" data-month="${month.month}" data-tab-priority="true" onmouseenter="${this.#handleMouseEnter.bind(this)}" onmouseleave="${this.#handleMouseLeave.bind(this)}" >${Text.encode(month.name)}</button> `; Dom.append(monthButton, quarterContainer); return monthButton; }); const currentYear: number = Number(button.dataset.year); if (currentYear !== month.year) { button.dataset.year = month.year; } if (month.current) { Dom.addClass(button, '--current'); } else { Dom.removeClass(button, '--current'); } if (month.selected) { Dom.addClass(button, '--selected'); } else { Dom.removeClass(button, '--selected'); } if (month.focused) { Dom.addClass(button, '--focused'); } else { Dom.removeClass(button, '--focused'); } button.tabIndex = month.tabIndex; return button; } #handleMouseEnter(event: MouseEvent): void { const dataset = event.target.dataset; const year = Text.toInteger(dataset.year); const month = Text.toInteger(dataset.month); this.emit('onFocus', { year, month }); } #handleMouseLeave(event: MouseEvent): void { this.emit('onBlur'); } #handleMonthClick(event: MouseEvent): void { if (!Dom.hasClass(event.target, 'ui-month-picker-month')) { return; } const year = Text.toInteger(event.target.dataset.year); const month = Text.toInteger(event.target.dataset.month); this.emit('onSelect', { year, month }); } #handleTitleClick(event: MouseEvent): void { this.emit('onTitleClick'); } }