@stimulus-plumbers/controllers 0.3.3 → 0.4.1

package/src/controllers/timeline_controller.js

@@ -0,0 +1,71 @@
+import { Controller } from '@hotwired/stimulus';
+import { DateFormatter } from '../plumbers/formatters/date';
+import { RovingTabIndex } from '../accessibility/keyboard';
+import { setExpanded, setHidden, announce } from '../accessibility/aria';
+
+export default class extends Controller {
+  static targets = ['trigger', 'detail', 'time'];
+  static values = {
+    dateFormat: { type: Object, default: {} },
+  };
+
+  connect() {
+    this.rovingTabIndex = new RovingTabIndex(this.triggerTargets, { orientation: 'vertical' });
+    this.rovingTabIndex.activate();
+  }
+
+  disconnect() {
+    this.rovingTabIndex?.deactivate();
+    this.rovingTabIndex = null;
+  }
+
+  toggle(event) {
+    const trigger = event.currentTarget;
+    trigger.getAttribute('aria-expanded') === 'true' ? this.collapseItem(trigger) : this.expandItem(trigger);
+  }
+
+  expand(event) {
+    this.expandItem(event.currentTarget);
+  }
+
+  collapse(event) {
+    this.collapseItem(event.currentTarget);
+  }
+
+  expandItem(trigger) {
+    const detail = this.detailTargets.find((d) => d.id === trigger.getAttribute('aria-controls')) ?? null;
+    this.dispatch('expand', { detail: { trigger, detail } });
+    setExpanded(trigger, true);
+    if (detail) {
+      setHidden(detail, false);
+      announce(`${trigger.textContent.trim()} expanded`);
+    }
+    this.dispatch('expanded', { detail: { trigger, detail } });
+  }
+
+  collapseItem(trigger) {
+    const detail = this.detailTargets.find((d) => d.id === trigger.getAttribute('aria-controls')) ?? null;
+    this.dispatch('collapse', { detail: { trigger, detail } });
+    setExpanded(trigger, false);
+    if (detail) {
+      setHidden(detail, true);
+      announce(`${trigger.textContent.trim()} collapsed`);
+    }
+    this.dispatch('collapsed', { detail: { trigger, detail } });
+  }
+
+  triggerTargetConnected(trigger) {
+    if (!trigger.hasAttribute('aria-expanded')) trigger.setAttribute('aria-expanded', 'false');
+    this.rovingTabIndex?.updateItems(this.triggerTargets);
+  }
+
+  triggerTargetDisconnected() {
+    this.rovingTabIndex?.updateItems(this.triggerTargets);
+  }
+
+  timeTargetConnected(el) {
+    if (!Object.keys(this.dateFormatValue).length || el.textContent.trim()) return;
+    const formatted = DateFormatter.format(el.getAttribute('datetime'), this.dateFormatValue);
+    if (formatted) el.textContent = formatted;
+  }
+}

package/src/index.js

@@ -17,8 +17,12 @@ export { fuzzyMatcher, filterOptions } from './researcher.js';
 export { Formatter, FORMATTER_TYPES } from './plumbers/formatter.js';
 
 // Export Stimulus controllers
+export { default as CalendarDecadeController } from './controllers/calendar_decade_controller.js';
+export { default as CalendarDecadeSelectorController } from './controllers/calendar_decade_selector_controller.js';
 export { default as CalendarMonthController } from './controllers/calendar_month_controller.js';
-export { default as CalendarMonthObserverController } from './controllers/calendar_month_observer_controller.js';
+export { default as CalendarMonthSelectorController } from './controllers/calendar_month_selector_controller.js';
+export { default as CalendarYearController } from './controllers/calendar_year_controller.js';
+export { default as CalendarYearSelectorController } from './controllers/calendar_year_selector_controller.js';
 export { default as ClipboardController } from './controllers/clipboard_controller.js';
 export { default as ComboboxDateController } from './controllers/combobox_date_controller.js';
 export { default as ComboboxDropdownController } from './controllers/combobox_dropdown_controller.js';
@@ -31,3 +35,4 @@ export { default as InputClearableController } from './controllers/input_clearab
 export { default as ModalController } from './controllers/modal_controller.js';
 export { default as PannerController } from './controllers/panner_controller.js';
 export { default as PopoverController } from './controllers/popover_controller.js';
+export { default as TimelineController } from './controllers/timeline_controller.js';

package/src/plumbers/calendar-selector.js

@@ -0,0 +1,85 @@
+import Plumber from './plumber';
+import { tryParseDate } from './plumber/date';
+
+export class CalendarDaySelector extends Plumber {
+  constructor(controller, options = {}) {
+    super(controller, options);
+    this.handle = this.handle.bind(this);
+    this.onSelect = options.onSelect || null;
+  }
+
+  attach() {
+    this.element.addEventListener('click', this.handle);
+  }
+  detach() {
+    this.element.removeEventListener('click', this.handle);
+  }
+
+  handle(event) {
+    if (!(event.target instanceof HTMLElement)) return;
+    event.preventDefault();
+    const input = event.target instanceof HTMLTimeElement ? event.target.parentElement : event.target;
+    if (input.disabled || input.getAttribute('aria-disabled') === 'true') return;
+    const time = event.target instanceof HTMLTimeElement ? event.target : event.target.querySelector('time');
+    if (!time) return;
+    const date = tryParseDate(time.dateTime);
+    if (!date) return;
+    this.dispatch('selecting', { target: input });
+    const iso = date.toISOString();
+    if (this.onSelect) {
+      this.awaitCallback(this.onSelect, iso);
+    } else {
+      this.dispatch('selected', { detail: { epoch: date.getTime(), iso } });
+    }
+  }
+}
+
+export class CalendarMonthSelector extends Plumber {
+  constructor(controller, options = {}) {
+    super(controller, options);
+    this.handle = this.handle.bind(this);
+  }
+
+  attach() {
+    this.element.addEventListener('click', this.handle);
+  }
+  detach() {
+    this.element.removeEventListener('click', this.handle);
+  }
+
+  handle(event) {
+    const btn = event.target.closest('button[data-month]');
+    if (!btn || btn.disabled || btn.getAttribute('aria-disabled') === 'true') return;
+    event.preventDefault();
+    const month = parseInt(btn.dataset.month, 10);
+    if (isNaN(month)) return;
+    this.dispatch('selected', { detail: { month } });
+  }
+}
+
+export class CalendarYearSelector extends Plumber {
+  constructor(controller, options = {}) {
+    super(controller, options);
+    this.handle = this.handle.bind(this);
+  }
+
+  attach() {
+    this.element.addEventListener('click', this.handle);
+  }
+  detach() {
+    this.element.removeEventListener('click', this.handle);
+  }
+
+  handle(event) {
+    const btn = event.target.closest('button[data-year]');
+    if (!btn || btn.disabled || btn.getAttribute('aria-disabled') === 'true') return;
+    event.preventDefault();
+    const year = parseInt(btn.dataset.year, 10);
+    if (isNaN(year)) return;
+    this.dispatch('selected', { detail: { year } });
+  }
+}
+
+export const attachCalendarDaySelector = (controller, options) => new CalendarDaySelector(controller, options);
+export const attachCalendarMonthSelector = (controller, options) => new CalendarMonthSelector(controller, options);
+export const attachCalendarYearSelector = (controller, options) => new CalendarYearSelector(controller, options);

package/src/plumbers/calendar.js

@@ -1,7 +1,9 @@
 import Plumber from './plumber';
 import { isValidDate, tryParseDate } from './plumber/date';
 
-const DAYS_OF_WEEK = 7;
+const DAYS_PER_ROW = 7;
+const YEAR_SIZE = 12;
+const DECADE_SIZE = 10;
 
 const defaultOptions = {
   locales: ['default'],
@@ -77,6 +79,7 @@ export class Calendar extends Plumber {
     this.daysOfWeek = this.buildDaysOfWeek();
     this.daysOfMonth = this.buildDaysOfMonth();
     this.monthsOfYear = this.buildMonthsOfYear();
+    this.yearsOfDecade = this.buildYearsOfDecade();
   }
 
   /**
@@ -130,8 +133,8 @@ export class Calendar extends Plumber {
       const current = new Date(currentYear, currentMonth, i);
       daysOfMonth.push(parseDate(current));
     }
-    const mod = daysOfMonth.length % DAYS_OF_WEEK;
-    const trailing = mod === 0 ? 0 : DAYS_OF_WEEK - mod;
+    const mod = daysOfMonth.length % DAYS_PER_ROW;
+    const trailing = mod === 0 ? 0 : DAYS_PER_ROW - mod;
     for (let i = 1; i <= trailing; i++) {
       const next = new Date(currentYear, currentMonth + 1, i);
       daysOfMonth.push(parseDate(next));
@@ -149,19 +152,47 @@ export class Calendar extends Plumber {
     const numericFormatter = new Intl.DateTimeFormat(this.localesValue, { month: 'numeric' });
 
     const monthsOfYear = [];
-    for (let i = 0; i < 12; i++) {
-      const month = new Date(this.year, i);
+    for (let i = 0; i < YEAR_SIZE; i++) {
+      const date = new Date(this.year, i);
+      const monthStart = new Date(this.year, i, 1);
+      const monthEnd = new Date(this.year, i + 1, 0);
+      const shortName = shortFormatter.format(date);
+      const longName = longFormatter.format(date);
+      const rangeDisabled = (this.since && monthEnd < this.since) || (this.till && monthStart > this.till);
+      const listDisabled = this.disabledMonths.some((str) => i == str || shortName === str || longName === str);
       monthsOfYear.push({
-        date: month,
-        value: month.getMonth(),
-        long: longFormatter.format(month),
-        short: shortFormatter.format(month),
-        numeric: numericFormatter.format(month),
+        date: date,
+        value: date.getMonth(),
+        long: longName,
+        short: shortName,
+        numeric: numericFormatter.format(date),
+        disabled: rangeDisabled || listDisabled,
       });
     }
     return monthsOfYear;
   }
 
+  /**
+   * Builds array of year objects spanning the decade containing the current year.
+   * Returns 12 entries: decade start - 1 (buffer) through decade start + 10 (buffer).
+   * @returns {Array<Object>} Array of year objects
+   */
+  buildYearsOfDecade() {
+    const decadeStart = Math.floor(this.year / DECADE_SIZE) * DECADE_SIZE;
+    const yearsOfDecade = [];
+    for (let i = decadeStart - 1; i <= decadeStart + DECADE_SIZE; i++) {
+      const bufferYear = i < decadeStart || i > decadeStart + DECADE_SIZE - 1;
+      const rangeDisabled = (this.since && i < this.since.getFullYear()) || (this.till && i > this.till.getFullYear());
+      const listDisabled = this.disabledYears.some((str) => i == str);
+      yearsOfDecade.push({
+        value: i,
+        current: i === this.year,
+        disabled: bufferYear || rangeDisabled || listDisabled,
+      });
+    }
+    return yearsOfDecade;
+  }
+
   /**
    * Gets the current "today" reference date.
    * @returns {Date} Today's date
@@ -380,6 +411,9 @@ export class Calendar extends Plumber {
           get monthsOfYear() {
             return context.monthsOfYear;
           },
+          get yearsOfDecade() {
+            return context.yearsOfDecade;
+          },
           navigate: async (to) => await context.navigate(to),
           step: async (type, value) => await context.step(type, value),
           isDisabled: (date) => context.isDisabled(date),

package/src/plumbers/index.js

@@ -3,6 +3,11 @@
  */
 
 export { initCalendar } from './calendar';
+export {
+  attachCalendarDaySelector,
+  attachCalendarMonthSelector,
+  attachCalendarYearSelector,
+} from './calendar-selector';
 export { attachContentLoader } from './content_loader';
 export { attachDismisser } from './dismisser';
 export { attachFlipper } from './flipper';

package/src/plumbers/visibility.js

@@ -1,5 +1,6 @@
 import Plumber from './plumber';
 import { visibilityConfig } from './plumber/config';
+import { setExpanded, setHidden } from '../accessibility/aria';
 
 const defaultOptions = {
   visibility: 'visibility',
@@ -62,8 +63,7 @@ export class Visibility extends Plumber {
       if (visible) target.classList.remove(hiddenClass);
       else target.classList.add(hiddenClass);
     } else {
-      if (visible) target.removeAttribute('hidden');
-      else target.setAttribute('hidden', true);
+      setHidden(target, !visible);
     }
   }
 
@@ -72,7 +72,7 @@ export class Visibility extends Plumber {
    * @param {boolean} isExpanded - True to mark as expanded, false to mark as collapsed
    */
   activate(isExpanded) {
-    if (this.activator) this.activator.setAttribute('aria-expanded', isExpanded ? 'true' : 'false');
+    if (this.activator) setExpanded(this.activator, isExpanded);
   }
 
   /**

package/src/controllers/calendar_month_observer_controller.js

@@ -1,27 +0,0 @@
-import { Controller } from '@hotwired/stimulus';
-import { tryParseDate } from '../plumbers/plumber/date';
-
-export default class extends Controller {
-  onSelect(event) {
-    if (!(event.target instanceof HTMLElement)) return;
-
-    event.preventDefault();
-    const input = event.target instanceof HTMLTimeElement ? event.target.parentElement : event.target;
-    if (input.disabled || input.getAttribute('aria-disabled') === 'true') return;
-
-    this.dispatch('selecting', { target: input });
-    const time = event.target instanceof HTMLTimeElement ? event.target : event.target.querySelector('time');
-    if (!time) return console.error(`unable to locate time element within ${input}`);
-
-    const date = tryParseDate(time.dateTime);
-    if (!date) return console.error(`unable to parse ${time.dateTime} found within the time element`);
-
-    this.select(date.toISOString());
-  }
-
-  select(iso) {
-    const date = tryParseDate(iso);
-    if (!date) return;
-    this.dispatch('selected', { detail: { epoch: date.getTime(), iso } });
-  }
-}