@stimulus-plumbers/controllers 0.4.0 → 0.4.1

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'],
@@ -131,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));
@@ -150,14 +152,21 @@ 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;
@@ -169,13 +178,16 @@ export class Calendar extends Plumber {
    * @returns {Array<Object>} Array of year objects
    */
   buildYearsOfDecade() {
-    const decadeStart = Math.floor(this.year / 10) * 10;
+    const decadeStart = Math.floor(this.year / DECADE_SIZE) * DECADE_SIZE;
     const yearsOfDecade = [];
-    for (let i = decadeStart - 1; i <= decadeStart + 10; i++) {
+    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,
-        outside: i < decadeStart || i > decadeStart + 9,
+        disabled: bufferYear || rangeDisabled || listDisabled,
       });
     }
     return yearsOfDecade;

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_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 } });
-  }
-}