chuijs 4.0.2 → 4.0.4

package/framework/components/chui_scheduler/scheduler.js

@@ -1,5 +1,5 @@
-const {setStyles, optionOr} = require('../../modules/chui_functions');
-const {I18n} = require('../../modules/chui_i18n/chui_i18n');
+const { setStyles, optionOr } = require("../../modules/chui_functions");
+const { I18n } = require("../../modules/chui_i18n/chui_i18n");
 
 /**
  * Расписание: сетка времени по дням с событиями.
@@ -36,7 +36,7 @@ const {I18n} = require('../../modules/chui_i18n/chui_i18n');
 class Scheduler {
     static VIEW = {
         DAY: "day",
-        WEEK: "week"
+        WEEK: "week",
     };
     static DEFAULT_HOUR_HEIGHT = 48;
     static DEFAULT_SLOT_MINUTES = 30;
@@ -45,11 +45,11 @@ class Scheduler {
 
     #root = document.createElement("chui_scheduler");
     #title = document.createElement("scheduler_title");
-    #prev_button = document.createElement("button");
-    #next_button = document.createElement("button");
-    #today_button = document.createElement("button");
-    #view_buttons = new Map();
-    #days_head = document.createElement("scheduler_days_head");
+    #prevButton = document.createElement("button");
+    #nextButton = document.createElement("button");
+    #todayButton = document.createElement("button");
+    #viewButtons = new Map();
+    #daysHead = document.createElement("scheduler_days_head");
     #scroll = document.createElement("scheduler_scroll");
     #times = document.createElement("scheduler_times");
     #days = document.createElement("scheduler_days");
@@ -57,32 +57,34 @@ class Scheduler {
     #date = new Date();
     #view = Scheduler.VIEW.WEEK;
     #events = [];
-    #start_hour = 8;
-    #end_hour = 20;
-    #slot_minutes = Scheduler.DEFAULT_SLOT_MINUTES;
-    #hour_height = Scheduler.DEFAULT_HOUR_HEIGHT;
-    #first_day = Scheduler.DEFAULT_FIRST_DAY;
+    #startHour = 8;
+    #endHour = 20;
+    #slotMinutes = Scheduler.DEFAULT_SLOT_MINUTES;
+    #hourHeight = Scheduler.DEFAULT_HOUR_HEIGHT;
+    #firstDay = Scheduler.DEFAULT_FIRST_DAY;
     #label = undefined;
-    #on_event_click = undefined;
-    #on_slot_click = undefined;
-    #on_period_change = undefined;
-
-    constructor(options = {
-        id: String(),
-        date: undefined,
-        view: String(),
-        events: [],
-        startHour: Number(),
-        endHour: Number(),
-        slotMinutes: Number(),
-        hourHeight: Number(),
-        firstDay: Number(),
-        height: String(),
-        label: String(),
-        onEventClick: undefined,
-        onSlotClick: undefined,
-        onPeriodChange: undefined
-    }) {
+    #onEventClick = undefined;
+    #onSlotClick = undefined;
+    #onPeriodChangeCallback = undefined;
+
+    constructor(
+        options = {
+            id: String(),
+            date: undefined,
+            view: String(),
+            events: [],
+            startHour: Number(),
+            endHour: Number(),
+            slotMinutes: Number(),
+            hourHeight: Number(),
+            firstDay: Number(),
+            height: String(),
+            label: String(),
+            onEventClick: undefined,
+            onSlotClick: undefined,
+            onPeriodChange: undefined,
+        }
+    ) {
         setStyles(__dirname + "/styles.css", "chUiJS_Scheduler");
         Scheduler.#counter += 1;
         this.#id = options.id === undefined ? `chui_scheduler_${Scheduler.#counter}` : options.id;
@@ -93,18 +95,18 @@ class Scheduler {
         // вид, которого сетка не рисует
         this.#view = options.view === Scheduler.VIEW.DAY ? Scheduler.VIEW.DAY : Scheduler.VIEW.WEEK;
         this.#events = Array.isArray(options.events) ? [...options.events] : [];
-        this.#start_hour = options.startHour === undefined ? this.#start_hour : options.startHour;
-        this.#end_hour = options.endHour === undefined ? this.#end_hour : options.endHour;
-        this.#slot_minutes = options.slotMinutes === undefined ? this.#slot_minutes : options.slotMinutes;
-        this.#hour_height = options.hourHeight === undefined ? this.#hour_height : options.hourHeight;
-        this.#first_day = options.firstDay === undefined ? this.#first_day : options.firstDay;
-        this.#on_event_click = options.onEventClick;
-        this.#on_slot_click = options.onSlotClick;
-        this.#on_period_change = options.onPeriodChange;
+        this.#startHour = options.startHour === undefined ? this.#startHour : options.startHour;
+        this.#endHour = options.endHour === undefined ? this.#endHour : options.endHour;
+        this.#slotMinutes = options.slotMinutes === undefined ? this.#slotMinutes : options.slotMinutes;
+        this.#hourHeight = options.hourHeight === undefined ? this.#hourHeight : options.hourHeight;
+        this.#firstDay = options.firstDay === undefined ? this.#firstDay : options.firstDay;
+        this.#onEventClick = options.onEventClick;
+        this.#onSlotClick = options.onSlotClick;
+        this.#onPeriodChangeCallback = options.onPeriodChange;
         this.setLabel(optionOr(options.label, I18n.t("scheduler.title")));
         if (options.height !== undefined) this.setHeight(options.height);
         this.#buildHead();
-        this.#root.appendChild(this.#days_head);
+        this.#root.appendChild(this.#daysHead);
         this.#scroll.appendChild(this.#times);
         this.#scroll.appendChild(this.#days);
         this.#root.appendChild(this.#scroll);
@@ -129,7 +131,7 @@ class Scheduler {
     /** Начало и конец показанного периода (включительно) */
     getRange() {
         const days = this.#dayDates();
-        return {from: days[0], to: days[days.length - 1]};
+        return { from: days[0], to: days[days.length - 1] };
     }
 
     getEvents() {
@@ -137,15 +139,15 @@ class Scheduler {
     }
 
     getStartHour() {
-        return this.#start_hour;
+        return this.#startHour;
     }
 
     getEndHour() {
-        return this.#end_hour;
+        return this.#endHour;
     }
 
     getSlotMinutes() {
-        return this.#slot_minutes;
+        return this.#slotMinutes;
     }
 
     /** События, попавшие на день (с учётом пересечения полуночи) */
@@ -250,7 +252,11 @@ class Scheduler {
     }
 
     static #sameDay(left = new Date(), right = new Date()) {
-        return left.getFullYear() === right.getFullYear() && left.getMonth() === right.getMonth() && left.getDate() === right.getDate();
+        return (
+            left.getFullYear() === right.getFullYear() &&
+            left.getMonth() === right.getMonth() &&
+            left.getDate() === right.getDate()
+        );
     }
 
     static #eventDate(event = Object(), key = "start") {
@@ -260,7 +266,7 @@ class Scheduler {
     #startOfPeriod() {
         const day = Scheduler.#startOfDay(this.#date);
         if (this.#view === Scheduler.VIEW.DAY) return day;
-        const offset = (day.getDay() - this.#first_day + 7) % 7;
+        const offset = (day.getDay() - this.#firstDay + 7) % 7;
         day.setDate(day.getDate() - offset);
         return day;
     }
@@ -268,7 +274,7 @@ class Scheduler {
     #dayDates() {
         const start = this.#startOfPeriod();
         const count = this.#view === Scheduler.VIEW.DAY ? 1 : 7;
-        return Array.from({length: count}, (_, index) => {
+        return Array.from({ length: count }, (_, index) => {
             const day = new Date(start);
             day.setDate(start.getDate() + index);
             return day;
@@ -299,13 +305,13 @@ class Scheduler {
      */
     #layout(date = new Date()) {
         const dayStart = this.#startOfDayMinutes();
-        const dayEnd = this.#end_hour * 60;
+        const dayEnd = this.#endHour * 60;
         const items = [];
         for (const event of this.#events) {
             if (!this.#overlapsDay(event, date)) continue;
             const start = Scheduler.#eventDate(event, "start");
             const end = Scheduler.#eventDate(event, "end");
-            const finished = Number.isNaN(end.getTime()) ? new Date(start.getTime() + this.#slot_minutes * 60000) : end;
+            const finished = Number.isNaN(end.getTime()) ? new Date(start.getTime() + this.#slotMinutes * 60000) : end;
             const sameStartDay = Scheduler.#sameDay(Scheduler.#startOfDay(start), date);
             const sameEndDay = Scheduler.#sameDay(Scheduler.#startOfDay(finished), date);
             let from = sameStartDay ? Scheduler.#minutesOf(start) : 0;
@@ -314,16 +320,16 @@ class Scheduler {
                 from = 0;
                 to = 24 * 60;
             }
-            if (to <= from) to = from + this.#slot_minutes;
+            if (to <= from) to = from + this.#slotMinutes;
             from = Math.max(from, dayStart);
             to = Math.min(to, dayEnd);
             if (to <= from) continue;
-            items.push({event: event, index: this.#events.indexOf(event), start: from, end: to, lane: 0, lanes: 1});
+            items.push({ event: event, index: this.#events.indexOf(event), start: from, end: to, lane: 0, lanes: 1 });
         }
         items.sort((left, right) => left.start - right.start || left.end - right.end);
         // Кластеры пересекающихся событий и дорожки внутри них
         let cluster = [];
-        let cluster_end = -1;
+        let clusterEnd = -1;
         const flush = () => {
             if (cluster.length === 0) return;
             const lanes = [];
@@ -339,54 +345,57 @@ class Scheduler {
             }
             for (const item of cluster) item.lanes = lanes.length;
             cluster = [];
-            cluster_end = -1;
+            clusterEnd = -1;
         };
         for (const item of items) {
-            if (cluster.length > 0 && item.start >= cluster_end) flush();
+            if (cluster.length > 0 && item.start >= clusterEnd) flush();
             cluster.push(item);
-            cluster_end = Math.max(cluster_end, item.end);
+            clusterEnd = Math.max(clusterEnd, item.end);
         }
         flush();
         return items;
     }
 
     #startOfDayMinutes() {
-        return this.#start_hour * 60;
+        return this.#startHour * 60;
     }
 
     // === РЕНДЕР ===
     #buildHead() {
         const head = document.createElement("scheduler_head");
-        this.#prev_button.type = "button";
-        this.#next_button.type = "button";
-        this.#today_button.type = "button";
-        this.#prev_button.className = "scheduler_nav";
-        this.#next_button.className = "scheduler_nav";
-        this.#today_button.className = "scheduler_today";
-        this.#prev_button.dataset.action = "prev";
-        this.#next_button.dataset.action = "next";
-        this.#today_button.dataset.action = "today";
-        this.#prev_button.innerText = "‹";
-        this.#next_button.innerText = "›";
-        this.#today_button.innerText = I18n.t("scheduler.today");
-        this.#prev_button.setAttribute("aria-label", I18n.t("scheduler.previousPeriod"));
-        this.#next_button.setAttribute("aria-label", I18n.t("scheduler.nextPeriod"));
+        this.#prevButton.type = "button";
+        this.#nextButton.type = "button";
+        this.#todayButton.type = "button";
+        this.#prevButton.className = "scheduler_nav";
+        this.#nextButton.className = "scheduler_nav";
+        this.#todayButton.className = "scheduler_today";
+        this.#prevButton.dataset.action = "prev";
+        this.#nextButton.dataset.action = "next";
+        this.#todayButton.dataset.action = "today";
+        this.#prevButton.innerText = "‹";
+        this.#nextButton.innerText = "›";
+        this.#todayButton.innerText = I18n.t("scheduler.today");
+        this.#prevButton.setAttribute("aria-label", I18n.t("scheduler.previousPeriod"));
+        this.#nextButton.setAttribute("aria-label", I18n.t("scheduler.nextPeriod"));
         this.#title.setAttribute("aria-live", "polite");
         const views = document.createElement("scheduler_views");
         views.setAttribute("role", "group");
         views.setAttribute("aria-label", I18n.t("scheduler.view"));
-        for (const [view, label] of [[Scheduler.VIEW.DAY, I18n.t("scheduler.day")], [Scheduler.VIEW.WEEK, I18n.t("scheduler.week")]]) {
+        for (const [view, label] of [
+            [Scheduler.VIEW.DAY, I18n.t("scheduler.day")],
+            [Scheduler.VIEW.WEEK, I18n.t("scheduler.week")],
+        ]) {
             const button = document.createElement("button");
             button.type = "button";
             button.className = "scheduler_view";
             button.dataset.view = view;
             button.innerText = label;
             views.appendChild(button);
-            this.#view_buttons.set(view, button);
+            this.#viewButtons.set(view, button);
         }
-        head.appendChild(this.#prev_button);
-        head.appendChild(this.#next_button);
-        head.appendChild(this.#today_button);
+        head.appendChild(this.#prevButton);
+        head.appendChild(this.#nextButton);
+        head.appendChild(this.#todayButton);
         head.appendChild(this.#title);
         head.appendChild(views);
         this.#root.appendChild(head);
@@ -396,28 +405,35 @@ class Scheduler {
         const days = this.#dayDates();
         const today = new Date();
         this.#title.innerText = this.#periodTitle(days);
-        for (const [view, button] of this.#view_buttons) button.setAttribute("aria-pressed", view === this.#view ? "true" : "false");
-        this.#prev_button.setAttribute("aria-label", this.#view === Scheduler.VIEW.DAY ? I18n.t("scheduler.previousDay") : I18n.t("scheduler.previousWeek"));
-        this.#next_button.setAttribute("aria-label", this.#view === Scheduler.VIEW.DAY ? I18n.t("scheduler.nextDay") : I18n.t("scheduler.nextWeek"));
+        for (const [view, button] of this.#viewButtons)
+            button.setAttribute("aria-pressed", view === this.#view ? "true" : "false");
+        this.#prevButton.setAttribute(
+            "aria-label",
+            this.#view === Scheduler.VIEW.DAY ? I18n.t("scheduler.previousDay") : I18n.t("scheduler.previousWeek")
+        );
+        this.#nextButton.setAttribute(
+            "aria-label",
+            this.#view === Scheduler.VIEW.DAY ? I18n.t("scheduler.nextDay") : I18n.t("scheduler.nextWeek")
+        );
         // Заголовки дней лежат вне области прокрутки и повторяют колонки сетки; ширина
         // вертикальной полосы прокрутки компенсируется, иначе заголовки уехали бы вправо
         const scrollbar = Math.max(0, this.#scroll.offsetWidth - this.#scroll.clientWidth);
-        this.#days_head.style.paddingRight = `${scrollbar}px`;
-        this.#days_head.innerHTML = "";
-        this.#days_head.style.gridTemplateColumns = `56px repeat(${days.length}, minmax(0, 1fr))`;
+        this.#daysHead.style.paddingRight = `${scrollbar}px`;
+        this.#daysHead.innerHTML = "";
+        this.#daysHead.style.gridTemplateColumns = `56px repeat(${days.length}, minmax(0, 1fr))`;
         const corner = document.createElement("scheduler_corner");
         corner.setAttribute("aria-hidden", "true");
-        this.#days_head.appendChild(corner);
+        this.#daysHead.appendChild(corner);
         for (const day of days) {
             const head = document.createElement("scheduler_day_head");
             if (Scheduler.#sameDay(day, today)) head.classList.add("scheduler_today_head");
             const name = document.createElement("scheduler_day_name");
-            name.innerText = day.toLocaleString(I18n.getLocale(), {weekday: "short"}).toUpperCase();
+            name.innerText = day.toLocaleString(I18n.getLocale(), { weekday: "short" }).toUpperCase();
             const number = document.createElement("scheduler_day_number");
             number.innerText = String(day.getDate());
             head.appendChild(name);
             head.appendChild(number);
-            this.#days_head.appendChild(head);
+            this.#daysHead.appendChild(head);
         }
         this.#renderTimes();
         this.#renderDays(days, today);
@@ -425,9 +441,9 @@ class Scheduler {
 
     #renderTimes() {
         this.#times.innerHTML = "";
-        for (let hour = this.#start_hour; hour < this.#end_hour; hour++) {
+        for (let hour = this.#startHour; hour < this.#endHour; hour++) {
             const cell = document.createElement("scheduler_hour");
-            cell.style.height = `${this.#hour_height}px`;
+            cell.style.height = `${this.#hourHeight}px`;
             cell.innerText = `${String(hour).padStart(2, "0")}:00`;
             this.#times.appendChild(cell);
         }
@@ -439,10 +455,10 @@ class Scheduler {
         for (const day of days) {
             const column = document.createElement("scheduler_day");
             column.dataset.day = Scheduler.#key(day);
-            column.style.height = `${(this.#end_hour - this.#start_hour) * this.#hour_height}px`;
+            column.style.height = `${(this.#endHour - this.#startHour) * this.#hourHeight}px`;
             if (Scheduler.#sameDay(day, today)) column.classList.add("scheduler_today");
             // Часовые линии рисует фон: узлы на каждый час не нужны
-            column.style.backgroundSize = `100% ${this.#hour_height}px`;
+            column.style.backgroundSize = `100% ${this.#hourHeight}px`;
             for (const item of this.#layout(day)) column.appendChild(this.#createEvent(item, day));
             this.#days.appendChild(column);
         }
@@ -454,8 +470,8 @@ class Scheduler {
 
     #createEvent(item = Object(), day = new Date()) {
         const event = item.event;
-        const top = ((item.start - this.#startOfDayMinutes()) / 60) * this.#hour_height;
-        const height = Math.max(18, ((item.end - item.start) / 60) * this.#hour_height);
+        const top = ((item.start - this.#startOfDayMinutes()) / 60) * this.#hourHeight;
+        const height = Math.max(18, ((item.end - item.start) / 60) * this.#hourHeight);
         const lanes = Math.max(1, item.lanes);
         const width = 100 / lanes;
         const node = document.createElement("button");
@@ -486,20 +502,25 @@ class Scheduler {
     }
 
     static #dayText(day = new Date()) {
-        return day.toLocaleString(I18n.getLocale(), {weekday: "long", day: "numeric", month: "long"});
+        return day.toLocaleString(I18n.getLocale(), { weekday: "long", day: "numeric", month: "long" });
     }
 
     #periodTitle(days = []) {
         const first = days[0];
         const last = days[days.length - 1];
         if (this.#view === Scheduler.VIEW.DAY) {
-            return first.toLocaleString(I18n.getLocale(), {weekday: "long", day: "numeric", month: "long", year: "numeric"});
+            return first.toLocaleString(I18n.getLocale(), {
+                weekday: "long",
+                day: "numeric",
+                month: "long",
+                year: "numeric",
+            });
         }
         // Дата с числом даёт месяц в родительном падеже, поэтому диапазон собирается из дня
         // и полной даты конца периода, а не из отдельного названия месяца
-        const until = last.toLocaleString(I18n.getLocale(), {day: "numeric", month: "long", year: "numeric"});
+        const until = last.toLocaleString(I18n.getLocale(), { day: "numeric", month: "long", year: "numeric" });
         if (first.getMonth() === last.getMonth()) return `${first.getDate()} – ${until}`;
-        const from = first.toLocaleString(I18n.getLocale(), {day: "numeric", month: "long"});
+        const from = first.toLocaleString(I18n.getLocale(), { day: "numeric", month: "long" });
         return `${from} – ${until}`;
     }
 
@@ -523,18 +544,19 @@ class Scheduler {
         const eventNode = target.closest(".scheduler_event");
         if (eventNode !== null) {
             const found = this.#events[Number(eventNode.dataset.index)];
-            if (this.#on_event_click !== undefined) this.#on_event_click(found === undefined ? undefined : found, eventNode);
+            if (this.#onEventClick !== undefined)
+                this.#onEventClick(found === undefined ? undefined : found, eventNode);
             return;
         }
         const dayNode = target.closest("scheduler_day");
         if (dayNode !== null) {
             const column = dayNode.getBoundingClientRect();
             const offset = Math.max(0, Math.min(event.clientY - column.top, column.height));
-            const raw = this.#startOfDayMinutes() + (offset / this.#hour_height) * 60;
-            const minutes = Math.round(raw / this.#slot_minutes) * this.#slot_minutes;
+            const raw = this.#startOfDayMinutes() + (offset / this.#hourHeight) * 60;
+            const minutes = Math.round(raw / this.#slotMinutes) * this.#slotMinutes;
             const date = this.#dayDates().find((day) => Scheduler.#key(day) === dayNode.dataset.day);
-            if (date !== undefined && this.#on_slot_click !== undefined) {
-                this.#on_slot_click({date: date, minutes: minutes, time: Scheduler.#timeText(minutes)});
+            if (date !== undefined && this.#onSlotClick !== undefined) {
+                this.#onSlotClick({ date: date, minutes: minutes, time: Scheduler.#timeText(minutes) });
             }
         }
     };
@@ -557,10 +579,10 @@ class Scheduler {
     };
 
     #onPeriodChange() {
-        if (this.#on_period_change === undefined) return;
+        if (this.#onPeriodChangeCallback === undefined) return;
         const range = this.getRange();
-        this.#on_period_change(range.from, range.to);
+        this.#onPeriodChangeCallback(range.from, range.to);
     }
 }
 
-exports.Scheduler = Scheduler
+exports.Scheduler = Scheduler;

package/framework/components/chui_scheduler/styles.css

@@ -4,12 +4,12 @@ chui_scheduler {
     flex-direction: column;
     width: -webkit-fill-available;
     box-sizing: border-box;
-    margin: var(--margin);
+    margin: var(--block_margin);
     color: var(--text_color);
     font-size: var(--font_default_size);
     background: var(--element_background_2);
     border: 1px solid var(--border_color);
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     overflow: hidden;
 }
 
@@ -17,7 +17,7 @@ scheduler_head {
     display: flex;
     align-items: center;
     gap: 6px;
-    padding: var(--main_padding);
+    padding: var(--block_padding);
     border-bottom: 1px solid var(--border_color);
 }
 
@@ -25,7 +25,7 @@ button.scheduler_nav,
 button.scheduler_today,
 button.scheduler_view {
     border: none;
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     background: var(--element_background);
     color: var(--text_color);
     font-family: inherit;
@@ -52,7 +52,10 @@ button.scheduler_view[aria-pressed="true"] {
     color: var(--text_color_hover);
 }
 
-button.scheduler_nav:focus-visible, button.scheduler_today:focus-visible, button.scheduler_view:focus-visible, button.scheduler_event:focus-visible {
+button.scheduler_nav:focus-visible,
+button.scheduler_today:focus-visible,
+button.scheduler_view:focus-visible,
+button.scheduler_event:focus-visible {
     outline: var(--focus_outline);
     outline-offset: var(--focus_outline_offset);
 }
@@ -119,7 +122,8 @@ scheduler_times {
 scheduler_hour {
     display: block;
     box-sizing: border-box;
-    padding-block: 2px 0; padding-inline: 0 6px;
+    padding-block: 2px 0;
+    padding-inline: 0 6px;
     text-align: end;
     color: var(--text_color_disabled);
     font-size: 0.85em;
@@ -153,7 +157,7 @@ button.scheduler_event {
     overflow: hidden;
     text-align: start;
     border: none;
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     background: var(--blue_prime_background);
     color: var(--text_color_hover);
     font-family: inherit;