stimulus-library 0.7.3 → 0.8.0-beta

package/dist/controllers/utility/interval_controller.js

@@ -0,0 +1,16 @@
+import { BaseController } from "../../utilities/base_controller";
+import { useInterval } from "../../mixins/use_interval";
+export class IntervalController extends BaseController {
+    connect() {
+        if (!this.hasSecondsValue) {
+            throw new Error('Expected `secondsValue` to be present');
+        }
+        requestAnimationFrame(() => {
+            useInterval(this, this._interval, this.secondsValue * 1000);
+        });
+    }
+    _interval() {
+        this.dispatchEvent(this.el, "interval:action");
+    }
+}
+IntervalController.values = { seconds: Number };

package/dist/controllers/utility/presence_controller.js

@@ -0,0 +1,19 @@
+import { BaseController } from "../../utilities/base_controller";
+export class PresenceController extends BaseController {
+    get name() {
+        return this.hasNameValue ? this.nameValue : ``;
+    }
+    get _addedEventName() {
+        return [this.name, 'presence', 'added'].filter(el => !!el).join(':');
+    }
+    get _removedEventName() {
+        return [this.name, 'presence', 'removed'].filter(el => !!el).join(':');
+    }
+    connect() {
+        this.dispatchEvent(this.el, this._addedEventName);
+    }
+    disconnect() {
+        this.dispatchEvent(this.el, this._removedEventName);
+    }
+}
+PresenceController.values = { name: String };

package/dist/controllers/utility/print_controller.js

@@ -0,0 +1,7 @@
+import { BaseController } from '../../utilities/base_controller';
+export class PrintController extends BaseController {
+    print(event) {
+        event === null || event === void 0 ? void 0 : event.preventDefault();
+        window.print();
+    }
+}

package/dist/controllers/utility/timeout_controller.js

@@ -0,0 +1,13 @@
+import { BaseController } from "../../utilities/base_controller";
+import { useTimeout } from "../../mixins/use_timeout";
+export class TimeoutController extends BaseController {
+    connect() {
+        requestAnimationFrame(() => {
+            useTimeout(this, this._timeout, this.secondsValue * 1000);
+        });
+    }
+    _timeout() {
+        this.dispatchEvent(this.el, "timeout");
+    }
+}
+TimeoutController.values = { seconds: Number };

package/dist/controllers/utility/user_focus_controller.js

@@ -0,0 +1,23 @@
+import { BaseController } from "../../utilities/base_controller";
+import { useEventListener } from "../../mixins/use_event_listener";
+export class UserFocusController extends BaseController {
+    connect() {
+        useEventListener(this, window, ["focus", "blur"], this._handleVisibility);
+        useEventListener(this, document, "visibilitychange", this._handleVisibility);
+        requestAnimationFrame(() => {
+            this._handleVisibility();
+        });
+    }
+    appear() {
+        this.dispatchEvent(this.el, "user-focus:active");
+    }
+    away() {
+        this.dispatchEvent(this.el, "user-focus:away");
+    }
+    _handleVisibility() {
+        this._documentIsActive() ? this.appear() : this.away();
+    }
+    _documentIsActive() {
+        return document.visibilityState == "visible" && document.hasFocus();
+    }
+}

package/dist/controllers/visual/clock_controller.js

@@ -0,0 +1,51 @@
+import { BaseController } from "../../utilities/base_controller";
+import { useInterval } from "../../mixins/use_interval";
+export class ClockController extends BaseController {
+    get _tickInterval() {
+        if (this.hasMillisecondsTarget) {
+            return 1; // 1 ms
+        }
+        else if (this.hasSecondsTarget) {
+            return 1000; // 1 seconds
+        }
+        else if (this.hasMinutesTarget) {
+            return 15000; // 15 seconds
+        }
+        else {
+            return 300000; // Every 5 minutes
+        }
+    }
+    connect() {
+        requestAnimationFrame(() => {
+            useInterval(this, this._tick, this._tickInterval);
+        });
+    }
+    _tick() {
+        let current = new Date();
+        if (this.hasHoursTarget) {
+            this.hoursTarget.innerHTML = current
+                .getHours()
+                .toString()
+                .padStart(2, "0");
+        }
+        if (this.hasMinutesTarget) {
+            this.minutesTarget.innerHTML = current
+                .getMinutes()
+                .toString()
+                .padStart(2, "0");
+        }
+        if (this.hasSecondsTarget) {
+            this.secondsTarget.innerHTML = current
+                .getSeconds()
+                .toString()
+                .padStart(2, "0");
+        }
+        if (this.hasMillisecondsTarget) {
+            this.millisecondsTarget.innerHTML = current
+                .getMilliseconds()
+                .toString()
+                .padStart(3, "0");
+        }
+    }
+}
+ClockController.targets = ["hours", "minutes", "seconds", "milliseconds"];

package/dist/controllers/visual/countdown_controller.js

@@ -0,0 +1,116 @@
+import intervalToDuration from "date-fns/intervalToDuration";
+import isPast from "date-fns/isPast";
+import { BaseController } from "../../utilities/base_controller";
+export class CountdownController extends BaseController {
+    constructor() {
+        super(...arguments);
+        // Instance Data
+        this._interval = null;
+    }
+    get _removeUnused() {
+        return this.hasRemoveUnusedValue ? this.removeUnusedValue : false;
+    }
+    get _deadlineDate() {
+        return new Date(this.deadlineValue);
+    }
+    connect() {
+        this._interval = setInterval(this._tick.bind(this), 1000);
+        this.addCountingDownClasses();
+    }
+    disconnect() {
+        this._clearTick();
+        this.removeCountingDownClasses();
+        this.removeEndedClasses();
+    }
+    deadlineValueChanged() {
+        // Countdown had previously ended, restart ticking. Updating mid-tick will just work.
+        if (this._interval == null) {
+            this._interval = setInterval(this._tick.bind(this), 1000);
+        }
+    }
+    _tick() {
+        try {
+            const now = new Date();
+            let distance = {};
+            if (isPast(this._deadlineDate)) {
+                distance = { years: 0, months: 0, days: 0, hours: 0, minutes: 0, seconds: 0 };
+                // Countdown has ended, stop ticking
+                this._clearTick();
+                this.removeCountingDownClasses();
+                this.addEndedClasses();
+                this.dispatchEvent(this.el, "countdown:ended");
+            }
+            else {
+                distance = intervalToDuration({ start: this._deadlineDate, end: now });
+            }
+            if (this.hasYearsTarget) {
+                this._updateTarget(this.yearsTarget, this._years(distance));
+            }
+            if (this.hasMonthsTarget) {
+                this._updateTarget(this.monthsTarget, this._months(distance));
+            }
+            if (this.hasDaysTarget) {
+                this._updateTarget(this.daysTarget, this._days(distance));
+            }
+            if (this.hasHoursTarget) {
+                this._updateTarget(this.hoursTarget, this._hours(distance));
+            }
+            if (this.hasMinutesTarget) {
+                this._updateTarget(this.minutesTarget, this._minutes(distance));
+            }
+            if (this.hasSecondsTarget) {
+                this._updateTarget(this.secondsTarget, this._seconds(distance));
+            }
+        }
+        catch (e) {
+            console.error(e);
+            this._clearTick();
+        }
+    }
+    _clearTick() {
+        if (this._interval) {
+            clearInterval(this._interval);
+            this._interval = null;
+        }
+    }
+    _updateTarget(target, value) {
+        this._removeTargetIfUnused(target, value);
+        target.innerHTML = value.toString();
+    }
+    _removeTargetIfUnused(target, value) {
+        if (this._removeUnused) {
+            if (value === 0 && target.dataset.unused) {
+                if (Number.parseInt(target.dataset.unused) > Date.now() + 1500) {
+                    target.remove();
+                }
+            }
+            else if (value == 0) {
+                target.dataset.unused = Date.now().toString();
+            }
+            else {
+                target.dataset.unused = undefined;
+            }
+        }
+    }
+    _years(duration) {
+        return duration.years || 0;
+    }
+    _months(duration) {
+        return duration.months || 0;
+    }
+    _days(duration) {
+        return duration.days || 0;
+    }
+    _hours(duration) {
+        return duration.hours || 0;
+    }
+    _minutes(duration) {
+        return duration.minutes || 0;
+    }
+    _seconds(duration) {
+        return duration.seconds || 0;
+    }
+}
+CountdownController.values = { deadline: String, removeUnused: Boolean };
+CountdownController.targets = ["years", "months", "days", "hours", "minutes", "seconds"];
+CountdownController.classes = ["countingDown", "ended"];

package/dist/controllers/visual/duration_controller.js

@@ -0,0 +1,79 @@
+import formatDuration from "date-fns/formatDuration";
+import intervalToDuration from "date-fns/intervalToDuration";
+import toDate from "date-fns/toDate";
+import { BaseController } from "../../utilities/base_controller";
+import { useInterval } from "../../mixins/use_interval";
+export class DurationController extends BaseController {
+    get _format() {
+        return [
+            "years",
+            "months",
+            "weeks",
+            "days",
+            "hours",
+            ...(this._minutes ? ["minutes"] : []),
+            ...(this._seconds ? ["seconds"] : []),
+        ];
+    }
+    get _output() {
+        let { years, months, weeks, days, hours, minutes, seconds } = this._duration;
+        years || (years = 0);
+        months || (months = 0);
+        weeks || (weeks = 0);
+        days || (days = 0);
+        hours || (hours = 0);
+        minutes || (minutes = 0);
+        seconds || (seconds = 0);
+        let largeDenominators = [years, months, weeks, days, hours];
+        if (!this._minutes && !this._seconds && largeDenominators.every((x) => x === 0)) {
+            minutes = minutes + seconds / 60.0;
+            return `${(minutes / 60).toFixed(1)} hours`;
+        }
+        return formatDuration(this._duration, { format: this._format, delimiter: ", " });
+    }
+    get _seconds() {
+        return this.hasSecondsValue ? this.secondsValue : true;
+    }
+    get _minutes() {
+        return this.hasMinutesValue ? this.minutesValue : true;
+    }
+    get _timestamp() {
+        if (this.hasTimestampValue) {
+            return toDate(this.timestampValue * 1000);
+        }
+        else {
+            throw new Error("Expected `timestampValue` to be present");
+        }
+    }
+    get _duration() {
+        return intervalToDuration({ start: new Date(), end: this._timestamp });
+    }
+    get _tickInterval() {
+        if (this._seconds) {
+            return 1000; // 1 seconds
+        }
+        else if (this._minutes) {
+            return 15000; // 15 seconds
+        }
+        else {
+            return 120000; // 2 minutes
+        }
+    }
+    connect() {
+        this._clearInterval = useInterval(this, this._update, this._tickInterval);
+        this._update();
+    }
+    _update() {
+        try {
+            this.el.innerHTML = this._output;
+        }
+        catch (_a) {
+            this._clearInterval();
+        }
+    }
+}
+DurationController.values = {
+    timestamp: Number,
+    minutes: Boolean,
+    seconds: Boolean,
+};

package/dist/controllers/visual/{index.d.ts → index.js}

@@ -4,4 +4,3 @@ export * from './duration_controller';
 export * from './tabs_controller';
 export * from './time_distance_controller';
 export * from './tree_view_controller';
-//# sourceMappingURL=index.d.ts.map

package/dist/controllers/visual/tabs_controller.js

@@ -0,0 +1,79 @@
+import { BaseController } from "../../utilities/base_controller";
+import clamp from "lodash-es/clamp";
+import { useCollectionEventListener } from "../../mixins/use_event_listener";
+export class TabsController extends BaseController {
+    get defaultHideClasses() {
+        return ["hide"];
+    }
+    get defaultActiveClasses() {
+        return ["is-active"];
+    }
+    get _currentTab() {
+        return this.hasCurrentTabValue ? this.currentTabValue : 0;
+    }
+    get _equalize() {
+        return this.hasEqualizeValue ? this.equalizeValue : false;
+    }
+    connect() {
+        useCollectionEventListener(this, this.linkTargets, "click", this.switchTabs);
+        if (this._equalize) {
+            this._setMinHeight();
+        }
+        this.currentTabValue = this._currentTab;
+    }
+    switchTabs(event) {
+        event.preventDefault();
+        this.currentTabValue = this.linkTargets.indexOf(event.currentTarget);
+    }
+    currentTabValueChanged() {
+        let index = this._currentTab;
+        index = this._clampIndex(index);
+        this._selectTab(index);
+    }
+    _selectTab(index) {
+        index = this._clampIndex(index);
+        let links = this.linkTargets;
+        let panels = this.contentTargets;
+        let activePanel = panels[index];
+        let activeLink = links[index];
+        let otherPanels = [...panels.slice(0, index), ...panels.slice(index + 1)];
+        let otherLinks = [...links.slice(0, index), ...links.slice(index + 1)];
+        this.addActiveClasses(activeLink);
+        activeLink.setAttribute('aria-selected', "true");
+        this.addActiveClasses(activePanel);
+        this.removeHideClasses(activePanel);
+        otherLinks.forEach((link) => {
+            link.removeAttribute('aria-selected');
+            this.removeActiveClasses(link);
+        });
+        otherPanels.forEach((panel) => {
+            this.removeActiveClasses(panel);
+            this.addHideClasses(panel);
+        });
+    }
+    _clampIndex(index) {
+        return clamp(index, 0, this.contentTargets.length - 1);
+    }
+    _setMinHeight() {
+        let minHeight = 0;
+        // determine the minimum height
+        this.contentTargets.forEach((content) => {
+            let hidden = content.hasAttribute("tab-hidden");
+            if (hidden) {
+                this.removeHideClasses(content);
+            }
+            let height = content.offsetHeight;
+            if (height > minHeight) {
+                minHeight = height;
+            }
+            if (hidden) {
+                this.addHideClasses(content);
+            }
+        });
+        // apply to all tabs
+        this.contentTargets.forEach((content) => content.style.minHeight = minHeight + "px");
+    }
+}
+TabsController.values = { currentTab: Number, equalize: Boolean };
+TabsController.targets = ["link", "content"];
+TabsController.classes = ["active", "hide"];

package/dist/controllers/visual/time_distance_controller.js

@@ -0,0 +1,50 @@
+import formatDistanceToNow from "date-fns/formatDistanceToNow";
+import intervalToDuration from "date-fns/intervalToDuration";
+import isPast from "date-fns/isPast";
+import toDate from "date-fns/toDate";
+import { BaseController } from "../../utilities/base_controller";
+import { useTimeout } from "../../mixins/use_timeout";
+export class TimeDistanceController extends BaseController {
+    get _duration() {
+        return isPast(this._timestamp) ? intervalToDuration({ start: this._timestamp, end: new Date() }) : intervalToDuration({ start: new Date(), end: this._timestamp });
+    }
+    get _nextUpdate() {
+        let duration = this._duration;
+        if (duration.years && duration.years > 0) {
+            return null;
+        }
+        else if (duration.months && duration.months > 0) {
+            return null;
+        }
+        else if (duration.days && duration.days > 0) {
+            return null;
+        }
+        else if (duration.hours && duration.hours > 0) {
+            return 1800000; // Update every 30 mins
+        }
+        else {
+            return 30000; // Update every 30 seconds
+        }
+    }
+    timestampValueChanged() {
+        this._timestamp = toDate(this.timestampValue * 1000);
+    }
+    connect() {
+        if (!this.hasTimestampValue) {
+            throw new Error("Expected `timestampValue` to be present");
+        }
+        this._update();
+    }
+    _update() {
+        this.el.innerHTML = formatDistanceToNow(this._timestamp, {
+            addSuffix: true,
+            includeSeconds: true,
+        });
+        if (this._nextUpdate) {
+            useTimeout(this, this._update, this._nextUpdate);
+        }
+    }
+}
+TimeDistanceController.values = {
+    timestamp: Number,
+};

package/dist/controllers/visual/tree_view_controller.js

@@ -0,0 +1,92 @@
+import { useMutationObserver } from "../../mixins/use_mutation_observer";
+import { BaseController } from "../../utilities/base_controller";
+import { installClassMethods } from "../../mixins/install_class_methods";
+export class TreeViewController extends BaseController {
+    get defaultActiveClasses() {
+        return ["active"];
+    }
+    get defaultCollapsedClasses() {
+        return ["collapsed"];
+    }
+    initialize() {
+        this._nodeClicked = this._nodeClicked.bind(this);
+    }
+    connect() {
+        installClassMethods(this);
+        useMutationObserver(this, this.el, this.mutate, { subtree: true, childList: true });
+        this._setup();
+    }
+    disconnect() {
+        this._teardown();
+    }
+    _setup() {
+        this._setupNode(this.el);
+    }
+    _setupNode(el) {
+        const process = (e) => {
+            let parent = e.parentElement;
+            if (parent) {
+                if (!this._nodeActive(parent)) {
+                    this._hideNode(parent);
+                }
+                parent.removeEventListener("click", this._nodeClicked);
+                parent.addEventListener("click", this._nodeClicked);
+            }
+        };
+        if (el.tagName === 'UL' || el.tagName === 'OL') {
+            process(el);
+        }
+        el.querySelectorAll("ul, ol").forEach(e => process(e));
+    }
+    _teardown() {
+        this.el.querySelectorAll("ul, ol, li").forEach((el) => this._teardownNode(el));
+    }
+    _teardownNode(el) {
+        [el, ...Array.from(el.querySelectorAll('ul, ol, li'))].forEach((x) => {
+            x.removeEventListener("click", this._nodeClicked);
+            this.removeActiveClasses(x);
+            this.removeCollapsedClasses(x);
+        });
+    }
+    _nodeClicked(event) {
+        if (event) {
+            event.stopImmediatePropagation();
+        }
+        let el = event.target;
+        if (!el || !this._hasNested(el)) {
+            return;
+        }
+        if (this._nodeActive(el)) {
+            this._hideNode(el);
+        }
+        else {
+            this._showNode(el);
+        }
+    }
+    _nodeActive(el) {
+        return this.activeClassesPresent(el);
+    }
+    _showNode(el) {
+        this.removeCollapsedClasses(el);
+        this.addActiveClasses(el);
+    }
+    _hideNode(el) {
+        this.removeActiveClasses(el);
+        this.addCollapsedClasses(el);
+    }
+    _hasNested(el) {
+        return el.querySelectorAll("ul, ol").length > 0;
+    }
+    mutate(entries) {
+        for (const mutation of entries) {
+            if (mutation.type === "childList") {
+                Array.from(mutation.addedNodes || []).forEach(el => this._setupNode(el));
+                Array.from(mutation.removedNodes || []).forEach(el => this._teardownNode(el));
+            }
+        }
+    }
+}
+TreeViewController.classes = [
+    "active",
+    "collapsed",
+];

package/dist/{index.d.ts → index.js}

@@ -1,4 +1,6 @@
+// Utilities
 export * from "./utilities";
+// Mixins
 export * from "./mixins";
+// Controllers
 export * from "./controllers";
-//# sourceMappingURL=index.d.ts.map

package/dist/mixins/create_mixin.js

@@ -0,0 +1,11 @@
+export function useMixin(controller, setup, teardown) {
+    const controllerDisconnect = controller.disconnect.bind(controller);
+    setup();
+    Object.assign(controller, {
+        disconnect() {
+            teardown();
+            controllerDisconnect();
+        },
+    });
+    return controllerDisconnect;
+}

package/dist/mixins/{index.d.ts → index.js}

@@ -6,4 +6,3 @@ export * from './use_interval';
 export * from './use_localstorage';
 export * from './use_temporary_content';
 export * from './use_timeout';
-//# sourceMappingURL=index.d.ts.map

package/dist/mixins/install_class_methods.js

@@ -0,0 +1,28 @@
+import { Controller } from "@hotwired/stimulus";
+import { controllerMethod } from "../utilities/stimulus";
+import { pascalCase } from "../utilities/strings";
+export class InstallClassMethodComposableController extends Controller {
+}
+function addMethodsForClassDefinition(controller, name) {
+    let defaultElement = controller.element;
+    let hasClass = () => controller[`has${pascalCase(name)}Class`] == true;
+    let classes = () => controller[`${name}Classes`];
+    let defaultClasses = () => controllerMethod(controller, `default${pascalCase(name)}Classes`).call(controller) || [];
+    let classOrDefault = () => hasClass() ? classes() : defaultClasses();
+    if (controller[`${name}Classes`] == undefined) {
+        Object.defineProperty(controller, `${name}Classes`, {
+            get: () => hasClass() ? controller[`${name}Class`].split(' ') : defaultClasses(),
+        });
+    }
+    let methods = {
+        [`add${pascalCase(name)}Classes`]: (element = defaultElement) => element.classList.add(...classOrDefault()),
+        [`remove${pascalCase(name)}Classes`]: (element = defaultElement) => element.classList.remove(...classOrDefault()),
+        [`${name}ClassesPresent`]: (element = defaultElement) => classOrDefault().every((klass) => element.classList.contains(klass)),
+    };
+    Object.assign(controller, methods);
+}
+export function installClassMethods(controller) {
+    // @ts-ignore
+    let classes = controller.constructor.classes || [];
+    classes.forEach((classDefinition) => addMethodsForClassDefinition(controller, classDefinition));
+}

package/dist/mixins/use_click_outside.js

@@ -0,0 +1,17 @@
+import { isElementInViewport } from "../utilities/elements";
+import { useEventListener } from "../mixins/use_event_listener";
+import { useMixin } from "./create_mixin";
+export function useClickOutside(controller, element, callback) {
+    callback = callback.bind(controller);
+    const handler = (event) => {
+        if (element.contains(event.target) || (!isElementInViewport(element))) {
+            return;
+        }
+        callback(event);
+    };
+    let { teardown } = useEventListener(controller, window, ["click", "touchend"], handler);
+    useMixin(controller, () => void 0, teardown);
+    return {
+        teardown,
+    };
+}

package/dist/mixins/use_event_bus.js

@@ -0,0 +1,19 @@
+import debounce from "lodash-es/debounce";
+import { EventBus } from "../utilities/event_bus";
+import { wrapArray } from "../utilities/arrays";
+import { useMixin } from "./create_mixin";
+export function useEventBus(controller, eventNameOrNames, handler, opts) {
+    let options = opts;
+    if (options === null || options === void 0 ? void 0 : options.debounce) {
+        handler = debounce(handler.bind(controller), options.debounce);
+        delete options.debounce;
+    }
+    else {
+        handler = handler.bind(controller);
+    }
+    let eventNames = wrapArray(eventNameOrNames);
+    let setup = () => eventNames.forEach(eventName => EventBus.on(eventName, handler));
+    let teardown = () => eventNames.forEach(eventName => EventBus.off(eventName, handler));
+    useMixin(controller, setup, teardown);
+    return { setup, teardown };
+}