ariadne_view_components 0.0.48 → 0.0.49

data/app/components/ariadne/options_controller/options_controller.js

@@ -3,48 +3,96 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
     return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
-var _OptionsController_instances, _OptionsController_updateAllAttrsForElement, _OptionsController_syncAttrsForTarget;
-import { Controller } from '@hotwired/stimulus';
-class OptionsController extends Controller {
+var _OptionsController_instances, _OptionsController_shouldChangeState, _OptionsController_activateIndex, _OptionsController_deactivateIndex, _OptionsController_getElementKey, _OptionsController_buildActiveTargets;
+import SyncedBooleanAttributesController from '../synced_boolean_attributes_controller/synced_boolean_attributes_controller';
+class OptionsController extends SyncedBooleanAttributesController {
     constructor() {
         super(...arguments);
         _OptionsController_instances.add(this);
+        this.optionTargetLookup = new Map();
+        this.outletUpdate = this.select;
     }
     connect() {
-        this.select(new Event('Init'), this.activeIndexValue);
+        __classPrivateFieldGet(this, _OptionsController_instances, "m", _OptionsController_buildActiveTargets).call(this);
+        this.syncElementAttributes();
     }
-    select(e, newIndex) {
+    select(event, updateTo = {}) {
+        var _a;
+        const activeOptions = updateTo.data;
         for (let index in this.optionTargets) {
             const target = this.optionTargets[index];
-            const isActive = newIndex === undefined ? target === e.currentTarget : Number(index) === Number(newIndex);
-            if (isActive) {
-                this.activeIndexValue = Number(index);
+            const wasSelected = target === event.currentTarget;
+            const isCurrentlyActive = (_a = this.getValueForElement(target)) !== null && _a !== void 0 ? _a : false;
+            const optionKey = __classPrivateFieldGet(this, _OptionsController_instances, "m", _OptionsController_getElementKey).call(this, target);
+            const shouldChangeState = activeOptions !== undefined
+                ? !!activeOptions[optionKey] !== isCurrentlyActive
+                : __classPrivateFieldGet(this, _OptionsController_instances, "m", _OptionsController_shouldChangeState).call(this, isCurrentlyActive, wasSelected);
+            if (shouldChangeState) {
+                const willBeActive = !isCurrentlyActive;
+                this.updateAttributesForElement(target, willBeActive);
+                willBeActive ? __classPrivateFieldGet(this, _OptionsController_instances, "m", _OptionsController_activateIndex).call(this, optionKey) : __classPrivateFieldGet(this, _OptionsController_instances, "m", _OptionsController_deactivateIndex).call(this, optionKey);
             }
-            __classPrivateFieldGet(this, _OptionsController_instances, "m", _OptionsController_updateAllAttrsForElement).call(this, target, isActive);
         }
+        this.sendToOutlets(event, Object.assign(Object.assign({}, updateTo), { data: this.activeOptionsValue }));
+    }
+    getValueForElement(element) {
+        var _a;
+        if (!this.optionTargetLookup.has(element)) {
+            return null;
+        }
+        const optionKey = __classPrivateFieldGet(this, _OptionsController_instances, "m", _OptionsController_getElementKey).call(this, element);
+        return (_a = this.activeOptionsValue[optionKey]) !== null && _a !== void 0 ? _a : false;
+    }
+    getState() {
+        return this.activeOptionsValue;
     }
 }
-_OptionsController_instances = new WeakSet(), _OptionsController_updateAllAttrsForElement = function _OptionsController_updateAllAttrsForElement(element, value) {
-    if (this.hasSyncedAttrsValue) {
-        __classPrivateFieldGet(this, _OptionsController_instances, "m", _OptionsController_syncAttrsForTarget).call(this, element, this.syncedAttrsValue, value);
+_OptionsController_instances = new WeakSet(), _OptionsController_shouldChangeState = function _OptionsController_shouldChangeState(isCurrentlyActive, wasSelected) {
+    if (!wasSelected && !isCurrentlyActive) {
+        // Not currently on and wasn't selected, no reason to change
+        return false;
+    }
+    if (!wasSelected && isCurrentlyActive && this.isMultiValue) {
+        // It wasn't selected and it is on. However, multi value is on so just leave it
+        return false;
     }
-    if (this.hasAntiAttrsValue) {
-        __classPrivateFieldGet(this, _OptionsController_instances, "m", _OptionsController_syncAttrsForTarget).call(this, element, this.antiAttrsValue, !value);
+    if (wasSelected && isCurrentlyActive && !this.toggleableValue) {
+        // It was selected and it's on. But toggle isn't on so just leave it
+        return false;
     }
-}, _OptionsController_syncAttrsForTarget = function _OptionsController_syncAttrsForTarget(element, attrs, value) {
-    const attrState = String(value);
-    for (let index in attrs) {
-        const attr = attrs[index];
-        element.setAttribute(attr, attrState);
+    // Wasn't selected and it's active but only one can be active
+    // Was selected and it's active but toggling behavior means it should deactivate
+    // Was selected and it's not on, so it just needs to be turned on
+    return true;
+}, _OptionsController_activateIndex = function _OptionsController_activateIndex(key) {
+    this.activeOptionsValue = Object.assign(Object.assign({}, this.activeOptionsValue), { [key]: true });
+}, _OptionsController_deactivateIndex = function _OptionsController_deactivateIndex(key) {
+    const copy = Object.assign({}, this.activeOptionsValue);
+    delete copy[key];
+    this.activeOptionsValue = copy;
+}, _OptionsController_getElementKey = function _OptionsController_getElementKey(element) {
+    const elementValue = element.getAttribute('data-option-value');
+    if (elementValue) {
+        return elementValue;
+    }
+    return element.innerText.trim();
+}, _OptionsController_buildActiveTargets = function _OptionsController_buildActiveTargets() {
+    this.optionTargetLookup = new Map();
+    for (let index in this.optionTargets) {
+        const target = this.optionTargets[index];
+        const optionKey = __classPrivateFieldGet(this, _OptionsController_instances, "m", _OptionsController_getElementKey).call(this, target);
+        this.optionTargetLookup.set(target, optionKey);
+        const onSyncAttr = !!this.syncedAttrsValue.find(attr => target.getAttribute(attr) === 'true');
+        if (onSyncAttr) {
+            __classPrivateFieldGet(this, _OptionsController_instances, "m", _OptionsController_activateIndex).call(this, optionKey);
+        }
+        else {
+            const hasOffAttr = !!this.antiAttrsValue.find(attr => target.getAttribute(attr) === 'false');
+            hasOffAttr && __classPrivateFieldGet(this, _OptionsController_instances, "m", _OptionsController_activateIndex).call(this, optionKey);
+        }
     }
 };
+OptionsController.outlets = SyncedBooleanAttributesController.outlets;
 OptionsController.targets = ['option'];
-OptionsController.values = {
-    activeIndex: {
-        type: Number,
-        default: 0,
-    },
-    syncedAttrs: Array,
-    antiAttrs: Array,
-};
+OptionsController.values = Object.assign(Object.assign({}, SyncedBooleanAttributesController.values), { activeOptions: Object, isMulti: { type: Boolean, default: false }, toggleable: { type: Boolean, default: false } });
 export default OptionsController;

data/app/components/ariadne/options_controller/options_controller.ts

@@ -1,57 +1,132 @@
-import {Controller} from '@hotwired/stimulus'
+import {TOutletChangeData} from '../outlet_manager_controller/outlet_manager_controller'
+import SyncedBooleanAttributesController from '../synced_boolean_attributes_controller/synced_boolean_attributes_controller'
 
-export default class OptionsController extends Controller {
+type TOptionKey = string | number
+type TActiveOptions = {[k: TOptionKey]: boolean}
+export interface OptionsOutlet extends SyncedBooleanAttributesController<TActiveOptions> {
+  select: (e: Event, updateTo?: TOutletChangeData<TActiveOptions>) => void
+}
+
+export default class OptionsController
+  extends SyncedBooleanAttributesController<TActiveOptions>
+  implements OptionsOutlet
+{
+  static outlets = SyncedBooleanAttributesController.outlets
   static targets = ['option']
 
   static values = {
-    activeIndex: {
-      type: Number,
-      default: 0,
-    },
-    syncedAttrs: Array,
-    antiAttrs: Array,
+    ...SyncedBooleanAttributesController.values,
+    activeOptions: Object, // The currently active elements in TActiveOptions format
+    isMulti: {type: Boolean, default: false}, // Allows more than one selection
+    toggleable: {type: Boolean, default: false}, // If true, selecting the same value twice will turn it off. If false, nothing happens
   }
 
+  // Targets
   declare readonly optionTargets: Array<Element>
-  declare activeIndexValue: number
 
-  declare readonly syncedAttrsValue: string[]
-  declare readonly hasSyncedAttrsValue: boolean
-  declare readonly antiAttrsValue: string[]
-  declare readonly hasAntiAttrsValue: boolean
+  // Values
+  declare activeOptionsValue: TActiveOptions
+  declare readonly isMultiValue: boolean
+  declare readonly toggleableValue: boolean
+
+  optionTargetLookup: Map<Element, TOptionKey> = new Map()
 
   connect(): void {
-    this.select(new Event('Init'), this.activeIndexValue)
+    this.#buildActiveTargets()
+    this.syncElementAttributes()
   }
 
-  select(e: Event, newIndex?: number) {
+  select(event: Event, updateTo: TOutletChangeData<TActiveOptions> = {}) {
+    const activeOptions = updateTo.data
     for (let index in this.optionTargets) {
       const target = this.optionTargets[index]
-      const isActive = newIndex === undefined ? target === e.currentTarget : Number(index) === Number(newIndex)
+      const wasSelected = target === event.currentTarget
+      const isCurrentlyActive = this.getValueForElement(target) ?? false
+      const optionKey = this.#getElementKey(target)
+      const shouldChangeState =
+        activeOptions !== undefined
+          ? !!activeOptions[optionKey] !== isCurrentlyActive
+          : this.#shouldChangeState(isCurrentlyActive, wasSelected)
 
-      if (isActive) {
-        this.activeIndexValue = Number(index)
+      if (shouldChangeState) {
+        const willBeActive = !isCurrentlyActive
+        this.updateAttributesForElement(target, willBeActive)
+        willBeActive ? this.#activateIndex(optionKey) : this.#deactivateIndex(optionKey)
       }
+    }
+
+    this.sendToOutlets(event, {...updateTo, data: this.activeOptionsValue})
+  }
 
-      this.#updateAllAttrsForElement(target, isActive)
+  #shouldChangeState(isCurrentlyActive: boolean, wasSelected: boolean) {
+    if (!wasSelected && !isCurrentlyActive) {
+      // Not currently on and wasn't selected, no reason to change
+      return false
     }
+
+    if (!wasSelected && isCurrentlyActive && this.isMultiValue) {
+      // It wasn't selected and it is on. However, multi value is on so just leave it
+      return false
+    }
+
+    if (wasSelected && isCurrentlyActive && !this.toggleableValue) {
+      // It was selected and it's on. But toggle isn't on so just leave it
+      return false
+    }
+
+    // Wasn't selected and it's active but only one can be active
+    // Was selected and it's active but toggling behavior means it should deactivate
+    // Was selected and it's not on, so it just needs to be turned on
+    return true
+  }
+
+  #activateIndex(key: TOptionKey) {
+    this.activeOptionsValue = {...this.activeOptionsValue, [key]: true}
+  }
+
+  #deactivateIndex(key: TOptionKey) {
+    const copy = {...this.activeOptionsValue}
+    delete copy[key]
+    this.activeOptionsValue = copy
   }
 
-  #updateAllAttrsForElement(element: Element, value: boolean) {
-    if (this.hasSyncedAttrsValue) {
-      this.#syncAttrsForTarget(element, this.syncedAttrsValue, value)
+  #getElementKey(element: Element) {
+    const elementValue = element.getAttribute('data-option-value')
+    if (elementValue) {
+      return elementValue
     }
 
-    if (this.hasAntiAttrsValue) {
-      this.#syncAttrsForTarget(element, this.antiAttrsValue, !value)
+    return (element as HTMLElement).innerText.trim()
+  }
+
+  #buildActiveTargets() {
+    this.optionTargetLookup = new Map()
+    for (let index in this.optionTargets) {
+      const target = this.optionTargets[index]
+      const optionKey = this.#getElementKey(target)
+      this.optionTargetLookup.set(target, optionKey)
+      const onSyncAttr = !!this.syncedAttrsValue.find(attr => target.getAttribute(attr) === 'true')
+      if (onSyncAttr) {
+        this.#activateIndex(optionKey)
+      } else {
+        const hasOffAttr = !!this.antiAttrsValue.find(attr => target.getAttribute(attr) === 'false')
+        hasOffAttr && this.#activateIndex(optionKey)
+      }
     }
   }
 
-  #syncAttrsForTarget(element: Element, attrs: string[], value: boolean) {
-    const attrState = String(value)
-    for (let index in attrs) {
-      const attr = attrs[index]
-      element.setAttribute(attr, attrState)
+  getValueForElement(element: Element) {
+    if (!this.optionTargetLookup.has(element)) {
+      return null
     }
+
+    const optionKey = this.#getElementKey(element)
+    return this.activeOptionsValue[optionKey] ?? false
   }
+
+  getState() {
+    return this.activeOptionsValue
+  }
+
+  outletUpdate = this.select
 }

data/app/components/ariadne/outlet_manager_controller/outlet_manager_controller.d.ts

@@ -0,0 +1,42 @@
+import { Controller } from '@hotwired/stimulus';
+type TOutletEventLookup = boolean | {
+    [k: string]: TOutletEventLookup;
+};
+export type TOutletChangeData<T> = {
+    eventKey?: string;
+    data?: T;
+} | undefined;
+export default class OutletManagerController<T> extends Controller {
+    #private;
+    static values: {
+        outletEvents: ArrayConstructor;
+    };
+    readonly outletEventsValue: Array<string>;
+    readonly hasOutletEventsValue: boolean;
+    static outlets: string[];
+    readonly toggleableOutlets: Array<OutletManagerController<T>>;
+    readonly hasToggleableOutlet: boolean;
+    readonly optionsOutlets: Array<OutletManagerController<T>>;
+    readonly hasOptionsOutlet: boolean;
+    readonly stringMatchOutlets: Array<OutletManagerController<T>>;
+    readonly hasStringMatchOutlet: boolean;
+    outletEventsLookup: TOutletEventLookup | null;
+    static domEvents: {
+        [k: string]: boolean;
+    };
+    eventRecords: Map<Event, boolean>;
+    getOutlets(): Array<OutletManagerController<T>> | null | void;
+    outletUpdate(event: Event, data: TOutletChangeData<T>): void;
+    getState(): T;
+    connect(): void;
+    syncOutlets(): void;
+    sendToOutlets(event: Event, updateTo?: TOutletChangeData<T>): void;
+    isListeningForOutletEvent(eventTypes: string): boolean;
+    isDOMEventName(eventName: string): boolean;
+    getEventKey(event: Event): string;
+    hasHeardEvent(event: Event): boolean;
+    get event_key_prefix(): string;
+    get event_key_postfix(): string;
+    get outletEvents(): TOutletEventLookup;
+}
+export {};

data/app/components/ariadne/outlet_manager_controller/outlet_manager_controller.js

@@ -0,0 +1,237 @@
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _OutletManagerController_instances, _OutletManagerController_outlets_get;
+import { Controller } from '@hotwired/stimulus';
+class OutletManagerController extends Controller {
+    constructor() {
+        super(...arguments);
+        _OutletManagerController_instances.add(this);
+        this.outletEventsLookup = null;
+        this.eventRecords = new Map();
+    }
+    getOutlets() {
+        return null;
+    }
+    outletUpdate(event, data) { }
+    getState() {
+        return null;
+    }
+    connect() {
+        this.syncOutlets();
+    }
+    syncOutlets() {
+        const event = new Event('init');
+        this.sendToOutlets(event, {
+            data: this.getState(),
+            eventKey: this.getEventKey(event),
+        });
+    }
+    sendToOutlets(event, updateTo = {}) {
+        var _a;
+        const eventKey = (_a = updateTo.eventKey) !== null && _a !== void 0 ? _a : this.getEventKey(event);
+        const outlets = __classPrivateFieldGet(this, _OutletManagerController_instances, "a", _OutletManagerController_outlets_get);
+        if (outlets === null || outlets === void 0 ? void 0 : outlets.length) {
+            for (const index in outlets) {
+                const outlet = outlets[index];
+                if (outlet.isListeningForOutletEvent(eventKey) && !this.hasHeardEvent(event)) {
+                    const isSameControllerType = this.identifier === outlet.identifier;
+                    outlet.outletUpdate(event, { eventKey, data: isSameControllerType ? updateTo.data : undefined });
+                }
+            }
+        }
+    }
+    isListeningForOutletEvent(eventTypes) {
+        const eventTypeNames = eventTypes.split('-');
+        if (!eventTypeNames.length) {
+            return false;
+        }
+        let lookup = this.outletEvents;
+        for (let i = 0; i < eventTypeNames.length; i++) {
+            const name = eventTypeNames[i];
+            if (typeof lookup === 'boolean') {
+                return lookup;
+            }
+            const hasWildCard = lookup['*'] !== undefined;
+            let nextKey = name;
+            if (hasWildCard) {
+                nextKey = '*';
+            }
+            else {
+                const isListeningForDOMEvent = lookup.domEvent !== undefined;
+                if (isListeningForDOMEvent && !this.isDOMEventName(name)) {
+                    return false;
+                }
+                else if (isListeningForDOMEvent) {
+                    nextKey = 'domEvent';
+                }
+            }
+            if (!lookup[nextKey]) {
+                return false;
+            }
+            lookup = lookup[nextKey];
+        }
+        return true;
+    }
+    isDOMEventName(eventName) {
+        return OutletManagerController.domEvents[eventName];
+    }
+    getEventKey(event) {
+        const pre = this.event_key_prefix;
+        const post = this.event_key_postfix;
+        const maybePreHyphen = pre ? '-' : '';
+        const maybePrefix = pre !== null && pre !== void 0 ? pre : '';
+        const maybePostHyphen = post ? '-' : '';
+        const maybePostfix = post !== null && post !== void 0 ? post : '';
+        return `${this.identifier}-${maybePrefix}${maybePreHyphen}${event.type}${maybePostHyphen}${maybePostfix}`;
+    }
+    hasHeardEvent(event) {
+        if (this.eventRecords.has(event)) {
+            return true;
+        }
+        this.eventRecords.set(event, true);
+        setTimeout(() => this.eventRecords.delete(event));
+        return false;
+    }
+    get event_key_prefix() {
+        return '';
+    }
+    get event_key_postfix() {
+        return '';
+    }
+    get outletEvents() {
+        if (!this.outletEventsLookup && this.hasOutletEventsValue) {
+            this.outletEventsLookup = this.outletEventsValue.reduce((acc, eventType) => {
+                let step = acc;
+                eventType.split('-').forEach((eventTypeName, i, splitArr) => {
+                    if (typeof step === 'boolean') {
+                        return;
+                    }
+                    if (i === splitArr.length - 1) {
+                        step[eventTypeName] = true;
+                    }
+                    else if (step[eventTypeName] === undefined) {
+                        step[eventTypeName] = {};
+                    }
+                    step = step[eventTypeName];
+                });
+                return acc;
+            }, {});
+        }
+        else if (!this.outletEventsLookup) {
+            this.outletEventsLookup = { '*': true };
+        }
+        return this.outletEventsLookup;
+    }
+}
+_OutletManagerController_instances = new WeakSet(), _OutletManagerController_outlets_get = function _OutletManagerController_outlets_get() {
+    const outlets = this.getOutlets();
+    if (outlets) {
+        return outlets;
+    }
+    const defaultOutlets = [];
+    if (this.hasToggleableOutlet) {
+        defaultOutlets.push(...this.toggleableOutlets);
+    }
+    if (this.hasOptionsOutlet) {
+        defaultOutlets.push(...this.optionsOutlets);
+    }
+    if (this.hasStringMatchOutlet) {
+        defaultOutlets.push(...this.stringMatchOutlets);
+    }
+    return defaultOutlets;
+};
+OutletManagerController.values = {
+    outletEvents: Array,
+};
+OutletManagerController.outlets = ['toggleable', 'options', 'string-match'];
+OutletManagerController.domEvents = {
+    abort: true,
+    afterprint: true,
+    animationend: true,
+    animationiteration: true,
+    animationstart: true,
+    beforeprint: true,
+    beforeunload: true,
+    blur: true,
+    canplay: true,
+    canplaythrough: true,
+    change: true,
+    click: true,
+    contextmenu: true,
+    copy: true,
+    cut: true,
+    dblclick: true,
+    drag: true,
+    dragend: true,
+    dragenter: true,
+    dragleave: true,
+    dragover: true,
+    dragstart: true,
+    drop: true,
+    durationchange: true,
+    ended: true,
+    error: true,
+    focus: true,
+    focusin: true,
+    focusout: true,
+    fullscreenchange: true,
+    fullscreenerror: true,
+    hashchange: true,
+    input: true,
+    invalid: true,
+    keydown: true,
+    keypress: true,
+    keyup: true,
+    load: true,
+    loadeddata: true,
+    loadedmetadata: true,
+    loadstart: true,
+    message: true,
+    mousedown: true,
+    mouseenter: true,
+    mouseleave: true,
+    mousemove: true,
+    mouseover: true,
+    mouseout: true,
+    mouseup: true,
+    mousewheel: true,
+    offline: true,
+    online: true,
+    open: true,
+    pagehide: true,
+    pageshow: true,
+    paste: true,
+    pause: true,
+    play: true,
+    playing: true,
+    popstate: true,
+    progress: true,
+    ratechange: true,
+    resize: true,
+    reset: true,
+    scroll: true,
+    search: true,
+    seeked: true,
+    seeking: true,
+    select: true,
+    show: true,
+    stalled: true,
+    storage: true,
+    submit: true,
+    suspend: true,
+    timeupdate: true,
+    toggle: true,
+    touchcancel: true,
+    touchend: true,
+    touchmove: true,
+    touchstart: true,
+    transitionend: true,
+    unload: true,
+    volumechange: true,
+    waiting: true,
+    wheel: true,
+};
+export default OutletManagerController;