stimulus-library 0.3.19 → 0.4.0

package/src/controllers/toggle_class_controller.ts

@@ -1,149 +0,0 @@
-import {useClickOutside, useHover} from "stimulus-use";
-import {BaseController} from "../utilities/base_controller";
-
-export type ToggleClassMode = "on" | "off" | "toggle"
-
-export class ToggleClassController extends BaseController {
-
-  static targets = ["toggle"];
-  static values = {
-    class: String,
-    mouseEnter: String,
-    mouseLeave: String,
-    clickAway: Boolean,
-    initial: String,
-  };
-
-  declare readonly toggleTargets: HTMLElement[];
-
-  declare readonly classValue: string;
-  declare readonly hasClassValue: boolean;
-
-  declare readonly mouseEnterValue: ToggleClassMode;
-  declare readonly hasMouseEnterValue: boolean;
-
-  declare readonly mouseLeaveValue: ToggleClassMode;
-  declare readonly hasMouseLeaveValue: boolean;
-
-  declare readonly clickAwayValue: boolean;
-  declare readonly hasClickAwayValue: boolean;
-
-  declare readonly initialValue: "on" | "off";
-  declare readonly hasInitialValue: boolean;
-
-  connect() {
-    if (!this.hasClassValue) {
-      throw new Error("data-toggle-class-class-value must not be empty");
-    }
-
-    if (this.hasMouseEnterValue || this.hasMouseLeaveValue) {
-      useHover(this);
-    }
-
-    if (this.hasClickAwayValue && this.clickAwayValue) {
-      useClickOutside(this);
-    }
-
-    requestAnimationFrame(() => {
-      if (this.hasInitialValue) {
-        if (this.initialValue === "on") {
-          this.toggleTargets.forEach((target) => this._elementOn(target));
-        } else {
-          this.toggleTargets.forEach((target) => this._elementOff(target));
-        }
-      }
-    });
-  }
-
-  clickOutside() {
-    this.toggleTargets.forEach((target) => {
-      if (this._elementWasToggled(target)) {
-        this._elementToggleStatus(target);
-        this._elementToggle(target);
-      }
-    });
-  }
-
-  mouseEnter() {
-    if (this.hasMouseEnterValue) {
-      switch (this.mouseEnterValue) {
-        case "on":
-          this.on();
-          break;
-        case "off":
-          this.off();
-          break;
-        case "toggle":
-          this.toggle();
-          break;
-      }
-    }
-    return {};
-  }
-
-  mouseLeave() {
-    if (this.hasMouseLeaveValue) {
-      switch (this.mouseLeaveValue) {
-        case "on":
-          this.on();
-          break;
-        case "off":
-          this.off();
-          break;
-        case "toggle":
-          this.toggle();
-          break;
-      }
-    }
-    return {};
-  }
-
-  on(event?: Event) {
-    this.toggleTargets.forEach((target) => {
-      this._elementToggleStatus(target);
-      this._elementOn(target);
-    });
-  }
-
-  off(event?: Event) {
-    this.toggleTargets.forEach((target) => {
-      this._elementToggleStatus(target);
-      this._elementOff(target);
-    });
-  }
-
-  toggle(event?: Event) {
-    this.toggleTargets.forEach((target) => {
-      this._elementToggleStatus(target);
-      this._elementToggle(target);
-    });
-  }
-
-  private _elementWasToggled(el: HTMLElement): boolean {
-    return el.dataset.toggled == "true";
-  }
-
-  private _elementToggleStatus(el: HTMLElement) {
-    if (this._elementWasToggled(el)) {
-      delete el.dataset.toggled;
-    } else {
-      el.dataset.toggled = "true";
-    }
-  }
-
-  private _elementToggle(el: HTMLElement) {
-    let classes = this.classValue.split(" ");
-    classes.forEach((klass) => el.classList.toggle(klass));
-  }
-
-  private _elementOn(el: HTMLElement) {
-    let classes = this.classValue.split(" ");
-    classes.forEach((klass) => el.classList.toggle(klass, true));
-  }
-
-  private _elementOff(el: HTMLElement) {
-    let classes = this.classValue.split(" ");
-    classes.forEach((klass) => el.classList.toggle(klass, false));
-  }
-
-}

package/src/controllers/turbo_frame_rc_controller.ts

@@ -1,77 +0,0 @@
-import {BaseController} from "../utilities/base_controller";
-import {isHTMLAnchorElement} from "../utilities/elements";
-import {isTurboFrame} from "../utilities/turbo";
-
-export class TurboFrameRCController extends BaseController {
-
-  static values = {
-    frameId: String,
-    src: String,
-    loadingMessage: String,
-  };
-
-  declare readonly frameIdValue: string;
-  declare readonly srcValue: string;
-  declare readonly hasSrcValue: boolean;
-  declare readonly loadingMessageValue: string;
-  declare readonly hasLoadingMessageValue: boolean;
-
-  toggle(event?: Event) {
-    event?.preventDefault();
-    let frame = this._getFrame();
-    let frameSrc = frame.src;
-    if (frameSrc == null || frameSrc !== this._getSrc()) {
-      this._setSrc();
-    } else {
-      this._clear();
-    }
-  }
-
-  setSrc(event?: Event) {
-    event?.preventDefault();
-    this._setSrc();
-  }
-
-  clear(event?: Event) {
-    event?.preventDefault();
-    this._clear();
-  }
-
-  private _setSrc() {
-    let frame = this._getFrame();
-    if (this.hasLoadingMessageValue) {
-      frame.innerHTML = this.loadingMessageValue;
-    }
-    frame.src = this._getSrc();
-  }
-
-  private _clear() {
-    let frame = this._getFrame();
-    frame.src = "";
-    frame.innerHTML = "";
-  }
-
-  private _getFrame(): TurboFrame {
-    let frame = document.getElementById(`${this.frameIdValue}`);
-    if (frame == null) {
-      throw new Error(`Could not find frame with ID '${this.frameIdValue}'`);
-    }
-    if (!isTurboFrame(frame)) {
-      throw new Error(`Element targeted by ID '${this.frameIdValue}'`);
-    } else {
-      return frame;
-    }
-  }
-
-  private _getSrc(): string {
-    let element = this.el;
-    if (this.hasSrcValue) {
-      return this.srcValue;
-    } else if (isHTMLAnchorElement(element)) {
-      return element.href;
-    } else {
-      throw new Error("No link given to drive frame to");
-    }
-  }
-
-}

package/src/controllers/turbo_frame_refresh_controller.ts

@@ -1,51 +0,0 @@
-import {BaseController} from "../utilities/base_controller";
-import {isTurboFrame} from "../utilities/turbo";
-
-// noinspection SillyAssignmentJS
-export class TurboFrameRefreshController extends BaseController {
-
-  static values = {
-    interval: Number,
-    poll: Boolean,
-  };
-
-  declare readonly intervalValue: number;
-  declare readonly pollValue: boolean;
-  declare readonly hasPollValue: boolean;
-  _timeoutHandle: null | ReturnType<typeof window.setTimeout> = null;
-
-  get _poll(): boolean {
-    return this.hasPollValue ? this.pollValue : false;
-  }
-
-  initialize() {
-    this.refresh = this.refresh.bind(this);
-  }
-
-  connect() {
-    let element = this.el;
-    if (isTurboFrame(element)) {
-      if (!!element.src) {
-        throw new Error('The provided <turbo-frame> element has no `src` attribute.');
-      }
-    } else {
-      throw new Error('Expected controller to be mounted on a <turbo-frame> element.');
-    }
-    if (this._poll) {
-      requestAnimationFrame(() => this._timeoutHandle = setTimeout(() => this.refresh(), this.intervalValue));
-    }
-  }
-
-  disconnect() {
-    if (this._timeoutHandle) {
-      clearTimeout(this._timeoutHandle);
-    }
-  }
-
-  refresh(event?: Event) {
-    event?.preventDefault();
-    let element = this.el as TurboFrame;
-    element.src = element.src;
-  }
-
-}

package/src/controllers/utility/intersection_controller.ts

@@ -1,51 +0,0 @@
-import {useIntersection} from "stimulus-use";
-import {BaseController} from "../../utilities/base_controller";
-
-export class IntersectionController extends BaseController {
-
-  static values = {threshold: String};
-
-  declare readonly isVisible: boolean;
-  declare readonly thresholdValue: string;
-  declare readonly hasThresholdValue: boolean;
-
-  get _threshold(): number[] {
-    if (this.hasThresholdValue) {
-      return this.thresholdValue.split(',').map(val => Number.parseFloat(val.trim())).filter(val => val >= 0 && val <= 1);
-    } else {
-      return [0, 1];
-    }
-  }
-
-  connect() {
-    useIntersection(this, {
-      threshold: this._threshold,
-      element: this.el,
-    });
-  }
-
-  appear(entry: IntersectionObserverEntry) {
-    this.dispatch(
-      this.el,
-      "intersection:appear",
-      {
-        detail: {
-          element: this.el,
-        },
-      },
-    );
-  };
-
-  disappear(entry: IntersectionObserverEntry) {
-    this.dispatch(
-      this.el,
-      "intersection:disappear",
-      {
-        detail: {
-          element: this.el,
-        },
-      },
-    );
-  };
-
-}

package/src/controllers/utility/interval_controller.ts

@@ -1,34 +0,0 @@
-import {BaseController} from "../../utilities/base_controller";
-
-export class IntervalController extends BaseController {
-
-  static values = {seconds: Number};
-
-  declare readonly secondsValue: number;
-  declare readonly hasSecondsValue: boolean;
-  _intervalHandle: null | number = null;
-
-  initialize() {
-    this._interval = this._interval.bind(this);
-  }
-
-  connect() {
-    if (!this.hasSecondsValue) {
-      throw new Error('Expected `secondsValue` to be present');
-    }
-    requestAnimationFrame(() => {
-      this._intervalHandle = window.setInterval(this._interval, this.secondsValue * 1000);
-    });
-  }
-
-  disconnect() {
-    if (this._intervalHandle) {
-      window.clearInterval(this._intervalHandle);
-    }
-  }
-
-  _interval() {
-    this.dispatch(this.el, "interval:action");
-  }
-
-}

package/src/controllers/utility/presence_controller.ts

@@ -1,13 +0,0 @@
-import {BaseController} from "../../utilities/base_controller";
-
-export class PresenceController extends BaseController {
-
-  connect() {
-    this.dispatch(this.el, "presence:added");
-  }
-
-  disconnect() {
-    this.dispatch(this.el, "presence:removed");
-  }
-
-}

package/src/controllers/utility/timeout_controller.ts

@@ -1,30 +0,0 @@
-import {BaseController} from "../../utilities/base_controller";
-
-export class TimeoutController extends BaseController {
-
-  static values = {seconds: Number};
-
-  declare readonly secondsValue: number;
-  _timeoutHandle: null | number = null;
-
-  initialize() {
-    this._timeout = this._timeout.bind(this);
-  }
-
-  connect() {
-    requestAnimationFrame(() => {
-      this._timeoutHandle = window.setTimeout(this._timeout, this.secondsValue * 1000);
-    });
-  }
-
-  disconnect() {
-    if (this._timeoutHandle) {
-      window.clearTimeout(this._timeoutHandle);
-    }
-  }
-
-  _timeout() {
-    this.dispatch(this.el, "timeout");
-  }
-
-}

package/src/controllers/utility/user_focus_controller.ts

@@ -1,40 +0,0 @@
-import {BaseController} from "../../utilities/base_controller";
-
-export class UserFocusController extends BaseController {
-
-  initialize() {
-    this._handleVisibility = this._handleVisibility.bind(this);
-  }
-
-  connect() {
-    window.addEventListener("focus", this._handleVisibility);
-    window.addEventListener("blur", this._handleVisibility);
-    document.addEventListener("visibilitychange", this._handleVisibility);
-    requestAnimationFrame(() => {
-      this._handleVisibility();
-    });
-  }
-
-  disconnect() {
-    window.removeEventListener("focus", this._handleVisibility);
-    window.removeEventListener("blur", this._handleVisibility);
-    document.removeEventListener("visibilitychange", this._handleVisibility);
-  }
-
-  appear() {
-    this.dispatch(this.el, "user-focus:active");
-  }
-
-  away() {
-    this.dispatch(this.el, "user-focus:away");
-  }
-
-  private _handleVisibility() {
-    this._documentIsActive() ? this.appear() : this.away();
-  }
-
-  private _documentIsActive() {
-    return document.visibilityState == "visible" && document.hasFocus();
-  }
-
-}

package/src/controllers/visual/clock_controller.ts

@@ -1,75 +0,0 @@
-import {BaseController} from "../../utilities/base_controller";
-
-export class ClockController extends BaseController {
-
-
-  static targets = ["hours", "minutes", "seconds", "milliseconds"];
-
-  declare readonly hasHoursTarget: boolean;
-  declare readonly hoursTarget: HTMLElement;
-  declare readonly hasMinutesTarget: boolean;
-  declare readonly minutesTarget: HTMLElement;
-  declare readonly hasSecondsTarget: boolean;
-  declare readonly secondsTarget: HTMLElement;
-  declare readonly hasMillisecondsTarget: boolean;
-  declare readonly millisecondsTarget: HTMLElement;
-
-  _intervalHandle: null | number = null;
-
-  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
-    }
-  }
-
-  initialize() {
-    this._tick = this._tick.bind(this);
-  }
-
-  connect() {
-    requestAnimationFrame(() => {
-      this._intervalHandle = window.setInterval(this._tick, this._tickInterval);
-    });
-  }
-
-  disconnect() {
-    if (this._intervalHandle) {
-      window.clearInterval(this._intervalHandle);
-    }
-  }
-
-  _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");
-    }
-  }
-}