Add event contact email and multi-day occurrences design specifications

- Introduced a new specification for adding an optional contact email field to events, including front-end output and compatibility testing. - Added a comprehensive design document for multi-day event occurrences, detailing the new occurrence data model, validation, normalization, and calendar architecture. - Created specifications for ACF field-key switching compatibility and local ACF override compatibility to ensure seamless integration with existing themes. - Implemented a desktop calendar view toggle design, allowing users to switch between calendar and list views, with persistent preferences and responsive behavior.
2026-07-30 09:56:29 -05:00
parent 25b7a95ad5
commit 51147ef36f
49 changed files with 5333 additions and 124 deletions
@@ -0,0 +1,165 @@
+(function (factory) {
+  'use strict';
+
+  if (typeof module === 'object' && module.exports) {
+    module.exports = factory();
+    return;
+  }
+
+  var controller = factory();
+
+  function boot() {
+    var storage;
+    var mediaQuery;
+
+    try {
+      storage = window.localStorage;
+    } catch (error) {
+      storage = null;
+    }
+
+    if (typeof window.matchMedia === 'function') {
+      mediaQuery = window.matchMedia('(max-width: 640px)');
+    }
+
+    controller.init(document, storage, mediaQuery);
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', boot);
+  } else {
+    boot();
+  }
+})(function () {
+  'use strict';
+
+  var STORAGE_KEY = 'aa-events-calendar-view';
+  var CALENDAR_VIEW = 'calendar';
+  var LIST_VIEW = 'list';
+
+  function isValidView(view) {
+    return view === CALENDAR_VIEW || view === LIST_VIEW;
+  }
+
+  function readPreference(storage) {
+    var preference;
+
+    try {
+      preference = storage && storage.getItem(STORAGE_KEY);
+    } catch (error) {
+      preference = null;
+    }
+
+    return isValidView(preference) ? preference : CALENDAR_VIEW;
+  }
+
+  function writePreference(storage, preference) {
+    try {
+      if (storage) {
+        storage.setItem(STORAGE_KEY, preference);
+      }
+    } catch (error) {
+      // Storage can be unavailable even when the localStorage object exists.
+    }
+  }
+
+  function getInstance(root) {
+    var calendarButton = root.querySelector(
+      '[data-aa-events-view-button="calendar"]'
+    );
+    var listButton = root.querySelector('[data-aa-events-view-button="list"]');
+    var calendarPanel = root.querySelector(
+      '[data-aa-events-view-panel="calendar"]'
+    );
+    var listPanel = root.querySelector('[data-aa-events-view-panel="list"]');
+
+    if (!calendarButton || !listButton || !calendarPanel || !listPanel) {
+      return null;
+    }
+
+    return {
+      root: root,
+      calendarButton: calendarButton,
+      listButton: listButton,
+      calendarPanel: calendarPanel,
+      listPanel: listPanel,
+    };
+  }
+
+  function init(documentObject, storage, mediaQuery) {
+    var roots = documentObject.querySelectorAll('[data-aa-events-calendar]');
+    var instances = [];
+    var preference;
+
+    for (var index = 0; index < roots.length; index += 1) {
+      var instance = getInstance(roots[index]);
+
+      if (instance) {
+        instances.push(instance);
+      }
+    }
+
+    if (instances.length === 0) {
+      return;
+    }
+
+    preference = readPreference(storage);
+
+    function applyView() {
+      var mobile = Boolean(mediaQuery && mediaQuery.matches);
+
+      for (var instanceIndex = 0; instanceIndex < instances.length; instanceIndex += 1) {
+        var calendar = instances[instanceIndex];
+        var showList = mobile || preference === LIST_VIEW;
+
+        calendar.root.classList.toggle(
+          'is-list-view',
+          !mobile && preference === LIST_VIEW
+        );
+        calendar.calendarPanel.hidden = showList;
+        calendar.listPanel.hidden = !showList;
+        calendar.calendarButton.setAttribute(
+          'aria-pressed',
+          String(preference === CALENDAR_VIEW)
+        );
+        calendar.listButton.setAttribute(
+          'aria-pressed',
+          String(preference === LIST_VIEW)
+        );
+      }
+    }
+
+    function selectView(view) {
+      if (!isValidView(view)) {
+        return;
+      }
+
+      preference = view;
+      writePreference(storage, preference);
+      applyView();
+    }
+
+    for (var buttonIndex = 0; buttonIndex < instances.length; buttonIndex += 1) {
+      (function (calendar) {
+        calendar.calendarButton.addEventListener('click', function () {
+          selectView(CALENDAR_VIEW);
+        });
+        calendar.listButton.addEventListener('click', function () {
+          selectView(LIST_VIEW);
+        });
+      })(instances[buttonIndex]);
+    }
+
+    if (mediaQuery) {
+      if (typeof mediaQuery.addEventListener === 'function') {
+        mediaQuery.addEventListener('change', applyView);
+      } else if (typeof mediaQuery.addListener === 'function') {
+        mediaQuery.addListener(applyView);
+      }
+    }
+
+    applyView();
+  }
+
+  return { init: init };
+});