stimulus-library 0.3.19 → 0.4.0

package/src/controllers/visual/countdown_controller.ts

@@ -1,198 +0,0 @@
-import {Duration, intervalToDuration, isPast} from "date-fns";
-import {BaseController} from "../../utilities/base_controller";
-
-export class CountdownController extends BaseController {
-
-  static values = {deadline: String, removeUnused: Boolean};
-  static targets = ["years", "months", "days", "hours", "minutes", "seconds"];
-  static classes = ["countingDown", "ended"];
-
-  // Values
-  declare readonly deadlineValue: string;
-  declare readonly removeUnusedValue: boolean;
-  declare readonly hasRemoveUnusedValue: boolean;
-  // Targets
-  declare readonly hasYearsTarget: boolean;
-  declare readonly yearsTarget: HTMLElement;
-  declare readonly hasMonthsTarget: boolean;
-  declare readonly monthsTarget: HTMLElement;
-  declare readonly hasDaysTarget: boolean;
-  declare readonly daysTarget: HTMLElement;
-  declare readonly hasHoursTarget: boolean;
-  declare readonly hoursTarget: HTMLElement;
-  declare readonly hasMinutesTarget: boolean;
-  declare readonly minutesTarget: HTMLElement;
-  declare readonly hasSecondsTarget: boolean;
-  declare readonly secondsTarget: HTMLElement;
-  // Classes
-  declare readonly countingDownClass: string;
-  declare readonly hasCountingDownClass: boolean;
-  declare readonly endedClass: string;
-  declare readonly hasEndedClass: boolean;
-  // Instance Data
-  _interval: null | ReturnType<typeof window.setInterval> = null;
-
-  get _removeUnused(): boolean {
-    return this.hasRemoveUnusedValue ? this.removeUnusedValue : false;
-  }
-
-  get _endedClasses(): string[] {
-    return this.endedClass.split(' ');
-  }
-
-  get _defaultEndedClasses(): string[] {
-    return [];
-  }
-
-  get _countingDownClasses(): string[] {
-    return this.countingDownClass.split(' ');
-  }
-
-  get _defaultCountingDownClasses(): string[] {
-    return [];
-  }
-
-  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: Duration = {};
-
-      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.dispatch(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: HTMLElement, value: number) {
-    this._removeTargetIfUnused(target, value);
-    target.innerHTML = value.toString();
-  }
-
-  _removeTargetIfUnused(target: HTMLElement, value: number) {
-    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: Duration): number {
-    return duration.years || 0;
-  }
-
-  _months(duration: Duration): number {
-    return duration.months || 0;
-  }
-
-  _days(duration: Duration): number {
-    return duration.days || 0;
-  }
-
-  _hours(duration: Duration): number {
-    return duration.hours || 0;
-  }
-
-  _minutes(duration: Duration): number {
-    return duration.minutes || 0;
-  }
-
-  _seconds(duration: Duration): number {
-    return duration.seconds || 0;
-  }
-
-  private _addEndedClasses(el: HTMLElement = this.el) {
-    if (this.hasEndedClass) {
-      el.classList.add(...this._endedClasses);
-    } else {
-      el.classList.add(...this._defaultEndedClasses);
-    }
-  }
-
-  private _removeEndedClasses(el: HTMLElement = this.el) {
-    if (this.hasEndedClass) {
-      el.classList.remove(...this._endedClasses);
-    } else {
-      el.classList.remove(...this._defaultEndedClasses);
-    }
-  }
-
-  private _addCountingDownClasses(el: HTMLElement = this.el) {
-    if (this.hasCountingDownClass) {
-      el.classList.add(...this._countingDownClasses);
-    } else {
-      el.classList.add(...this._defaultCountingDownClasses);
-    }
-  }
-
-  private _removeCountingDownClasses(el: HTMLElement = this.el) {
-    if (this.hasCountingDownClass) {
-      el.classList.remove(...this._countingDownClasses);
-    } else {
-      el.classList.remove(...this._defaultCountingDownClasses);
-    }
-  }
-}

package/src/controllers/visual/duration_controller.ts

@@ -1,106 +0,0 @@
-import {Duration, formatDuration, intervalToDuration, toDate} from "date-fns";
-import {BaseController} from "../../utilities/base_controller";
-
-export class DurationController extends BaseController {
-  static values = {
-    timestamp: Number,
-    minutes: Boolean,
-    seconds: Boolean,
-  };
-
-  declare readonly minutesValue: boolean;
-  declare readonly hasMinutesValue: boolean;
-  declare readonly secondsValue: boolean;
-  declare readonly hasSecondsValue: boolean;
-  declare timestampValue: number;
-  declare readonly hasTimestampValue: boolean;
-  _intervalHandle: number | null = null;
-
-  get _format(): string[] {
-    return [
-      "years",
-      "months",
-      "weeks",
-      "days",
-      "hours",
-      ...(this._minutes ? ["minutes"] : []),
-      ...(this._seconds ? ["seconds"] : []),
-    ];
-  }
-
-  get _output(): string {
-    let {years, months, weeks, days, hours, minutes, seconds} = this._duration;
-
-    years ||= 0;
-    months ||= 0;
-    weeks ||= 0;
-    days ||= 0;
-    hours ||= 0;
-    minutes ||= 0;
-    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(): boolean {
-    return this.hasSecondsValue ? this.secondsValue : true;
-  }
-
-  get _minutes(): boolean {
-    return this.hasMinutesValue ? this.minutesValue : true;
-  }
-
-  get _timestamp(): Date {
-    if (this.hasTimestampValue) {
-      return toDate(this.timestampValue * 1000);
-    } else {
-      throw new Error("Expected `timestampValue` to be present");
-    }
-  }
-
-  get _duration(): 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
-    }
-  }
-
-  initialize() {
-    this._update = this._update.bind(this);
-  }
-
-  connect() {
-    this._intervalHandle = window.setInterval(this._update, this._tickInterval);
-    this._update();
-  }
-
-  disconnect() {
-    if (this._intervalHandle) {
-      window.clearInterval(this._intervalHandle);
-    }
-  }
-
-  _update() {
-    try {
-      this.el.innerHTML = this._output;
-    } catch {
-      if (this._intervalHandle) {
-        window.clearInterval(this._intervalHandle);
-      }
-    }
-  }
-}

package/src/controllers/visual/tabs_controller.ts

@@ -1,162 +0,0 @@
-import {BaseController} from "../../utilities/base_controller";
-import {clamp} from "lodash-es";
-
-export class TabsController extends BaseController {
-
-  static values = {currentTab: Number, equalize: Boolean};
-  static targets = ["link", "content"];
-  static classes = ["active", "hide"];
-
-  declare currentTabValue: number;
-  declare hasCurrentTabValue: boolean;
-
-  declare equalizeValue: boolean;
-  declare hasEqualizeValue: boolean;
-  declare readonly linkTargets: HTMLElement[];
-  declare readonly contentTargets: HTMLElement[];
-  declare readonly activeClass: string;
-  declare readonly hasActiveClass: boolean;
-  declare readonly hideClass: string;
-  declare readonly hasHideClass: boolean;
-
-  get _hideClasses(): string[] {
-    return this.hideClass.split(' ');
-  }
-
-  get _defaultHideClasses(): string[] {
-    return ["hide"];
-  }
-
-  get _activeClasses(): string[] {
-    return this.activeClass.split(' ');
-  }
-
-  get _defaultActiveClasses(): string[] {
-    return ["is-active"];
-  }
-
-  get _currentTab(): number {
-    return this.hasCurrentTabValue ? this.currentTabValue : 0;
-  }
-
-  get _equalize(): boolean {
-    return this.hasEqualizeValue ? this.equalizeValue : false;
-  }
-
-  initialize() {
-    this.switchTabs = this.switchTabs.bind(this);
-  }
-
-  connect() {
-    this.linkTargets.forEach((link) => link.addEventListener("click", this.switchTabs));
-
-    if (this._equalize) {
-      this._setMinHeight();
-    }
-
-    this.currentTabValue = this._currentTab;
-  }
-
-  disconnect() {
-    this.linkTargets.forEach((link) => link.removeEventListener("click", this.switchTabs));
-  }
-
-  switchTabs(event: Event) {
-    event.preventDefault();
-    this.currentTabValue = this.linkTargets.indexOf(event.currentTarget as HTMLElement);
-  }
-
-  currentTabValueChanged() {
-    let index = this._currentTab;
-    index = this._clampIndex(index);
-    this._selectTab(index);
-  }
-
-  _selectTab(index: number) {
-    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: number): number {
-    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");
-  }
-
-  private _addHideClasses(el: HTMLElement = this.el) {
-    el.setAttribute("tab-hidden", "true");
-    if (this.hasHideClass) {
-      el.classList.add(...this._hideClasses);
-    } else {
-      el.classList.add(...this._defaultHideClasses);
-    }
-  }
-
-  private _removeHideClasses(el: HTMLElement = this.el) {
-    el.removeAttribute("tab-hidden");
-    if (this.hasHideClass) {
-      el.classList.remove(...this._hideClasses);
-    } else {
-      el.classList.remove(...this._defaultHideClasses);
-    }
-  }
-
-  private _addActiveClasses(el: HTMLElement = this.el) {
-    if (this.hasActiveClass) {
-      el.classList.add(...this._activeClasses);
-    } else {
-      el.classList.add(...this._defaultActiveClasses);
-    }
-  }
-
-  private _removeActiveClasses(el: HTMLElement = this.el) {
-    if (this.hasActiveClass) {
-      el.classList.remove(...this._activeClasses);
-    } else {
-      el.classList.remove(...this._defaultActiveClasses);
-    }
-  }
-}

package/src/controllers/visual/time_distance_controller.ts

@@ -1,66 +0,0 @@
-import {Duration, formatDistanceToNow, intervalToDuration, isPast, toDate} from "date-fns";
-import {BaseController} from "../../utilities/base_controller";
-
-export class TimeDistanceController extends BaseController {
-  static values = {
-    timestamp: Number,
-  };
-
-  declare timestampValue: number;
-  declare readonly hasTimestampValue: boolean;
-
-  _timeout: number | null = null;
-  declare _timestamp: Date;
-
-  get _duration(): Duration {
-    return isPast(this._timestamp) ? intervalToDuration({start: this._timestamp, end: new Date()}) : intervalToDuration({start: new Date(), end: this._timestamp});
-  }
-
-  get _nextUpdate(): number | null {
-    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);
-  }
-
-  initialize() {
-    this._update = this._update.bind(this);
-  }
-
-  connect() {
-    if (!this.hasTimestampValue) {
-      throw new Error("Expected `timestampValue` to be present");
-    }
-    this._update();
-  }
-
-  disconnect() {
-    if (this._timeout) {
-      window.clearTimeout(this._timeout);
-    }
-  }
-
-  _update() {
-    this.el.innerHTML = formatDistanceToNow(this._timestamp, {
-      addSuffix: true,
-      includeSeconds: true,
-    });
-
-    if (this._nextUpdate) {
-      this._timeout = window.setTimeout(this._update, this._nextUpdate);
-    }
-  }
-}

package/src/controllers/visual/tree_view_controller.ts

@@ -1,154 +0,0 @@
-import {useMutation} from "stimulus-use";
-import {BaseController} from "../../utilities/base_controller";
-
-export class TreeViewController extends BaseController {
-
-  static classes = [
-    "active",
-    "collapsed",
-  ];
-
-  declare readonly activeClass: string;
-  declare readonly hasActiveClass: boolean;
-  declare readonly collapsedClass: string;
-  declare readonly hasCollapsedClass: boolean;
-
-  get _collapsedClasses(): string[] {
-    return this.hasCollapsedClass ? this.collapsedClass.split(' ') : this._defaultCollapsedClasses;
-  }
-
-  get _defaultCollapsedClasses(): string[] {
-    return ['collapsed'];
-  }
-
-  get _activeClasses(): string[] {
-    return this.hasActiveClass ? this.activeClass.split(' ') : this._defaultActiveClasses;
-  }
-
-  get _defaultActiveClasses(): string[] {
-    return ['active'];
-  }
-
-  initialize() {
-    this._nodeClicked = this._nodeClicked.bind(this);
-  }
-
-  connect() {
-    this._setup();
-    useMutation(this, {subtree: true, childList: true});
-  }
-
-  disconnect() {
-    this._teardown();
-  }
-
-  _setup() {
-    this._setupNode(this.el);
-  }
-
-  _setupNode(el: HTMLElement) {
-    const process = (e: HTMLElement) => {
-      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 as HTMLElement));
-  }
-
-  _teardown() {
-    this.el.querySelectorAll("ul, ol, li").forEach((el) => this._teardownNode(el as HTMLElement));
-  }
-
-  _teardownNode(el: HTMLElement) {
-    [el, ...Array.from(el.querySelectorAll('ul, ol, li')) as HTMLElement[]].forEach((x) => {
-      x.removeEventListener("click", this._nodeClicked);
-      this._removeActiveClasses(x);
-      this._removeCollapsedClasses(x);
-    });
-  }
-
-  _nodeClicked(event: MouseEvent) {
-    if (event) {
-      event.stopImmediatePropagation();
-    }
-
-    let el = event.target as HTMLElement | null;
-
-    if (!el || !this._hasNested(el)) {
-      return;
-    }
-
-    if (this._nodeActive(el)) {
-      this._hideNode(el);
-    } else {
-      this._showNode(el);
-    }
-  }
-
-  _nodeActive(el: HTMLElement): boolean {
-    return this._activeClasses.every(klass => el.classList.contains(klass));
-  }
-
-  _showNode(el: HTMLElement) {
-    this._removeCollapsedClasses(el);
-    this._addActiveClasses(el);
-  }
-
-  _hideNode(el: HTMLElement) {
-    this._removeActiveClasses(el);
-    this._addCollapsedClasses(el);
-  }
-
-  _hasNested(el: HTMLElement): boolean {
-    return el.querySelectorAll("ul, ol").length > 0;
-  }
-
-  mutate(entries: MutationRecord[]) {
-    for (const mutation of entries) {
-      if (mutation.type === "childList") {
-        (Array.from(mutation.addedNodes || []) as HTMLElement[]).forEach(el => this._setupNode(el));
-        (Array.from(mutation.removedNodes || []) as HTMLElement[]).forEach(el => this._teardownNode(el));
-      }
-    }
-  }
-
-  private _addCollapsedClasses(el: HTMLElement = this.el) {
-    if (this.hasCollapsedClass) {
-      el.classList.add(...this._collapsedClasses);
-    } else {
-      el.classList.add(...this._defaultCollapsedClasses);
-    }
-  }
-
-  private _removeCollapsedClasses(el: HTMLElement = this.el) {
-    if (this.hasCollapsedClass) {
-      el.classList.remove(...this._collapsedClasses);
-    } else {
-      el.classList.remove(...this._defaultCollapsedClasses);
-    }
-  }
-
-  private _addActiveClasses(el: HTMLElement = this.el) {
-    if (this.hasActiveClass) {
-      el.classList.add(...this._activeClasses);
-    } else {
-      el.classList.add(...this._defaultActiveClasses);
-    }
-  }
-
-  private _removeActiveClasses(el: HTMLElement = this.el) {
-    if (this.hasActiveClass) {
-      el.classList.remove(...this._activeClasses);
-    } else {
-      el.classList.remove(...this._defaultActiveClasses);
-    }
-  }
-}