stimulus-library 0.3.19 → 0.4.0

package/src/controllers/ajax/async_block_controller.ts

@@ -1,28 +0,0 @@
-import {LoadBlockController} from "./load_block_controller";
-
-export class AsyncBlockController extends LoadBlockController {
-  static targets = ["replace"];
-  static values = {endpoint: String, errorMessage: String, selector: String};
-
-  declare readonly replaceTarget: HTMLElement;
-  declare readonly hasReplaceTarget: boolean;
-  declare readonly endpointValue: string;
-
-  declare readonly hasSelectorValue: boolean;
-  declare readonly selectorValue: string;
-
-  declare readonly hasErrorMessageValue: boolean;
-  declare readonly errorMessageValue: string;
-
-  get _errorMessage(): string {
-    return this.hasErrorMessageValue ? this.errorMessageValue : "This content failed to load";
-  }
-
-  // This is a simple controller to load a block of content when the page loads.
-  // It should be used to give a quick initial response before calling out to an
-  // an AJAX endpoint to do some expensive work.
-  async connect() {
-    await this.loadContent();
-  }
-
-}

package/src/controllers/ajax/lazy_block_controller.ts

@@ -1,31 +0,0 @@
-import {useIntersection} from "stimulus-use";
-import {LoadBlockController} from "./load_block_controller";
-
-export class LazyBlockController extends LoadBlockController {
-
-  declare observe: () => void;
-  declare unobserve: () => void;
-  declare isVisible: boolean;
-  declare disappear: () => void;
-
-  async connect() {
-    let element = this.el;
-
-    if ("IntersectionObserver" in window) {
-      [this.observe, this.unobserve] = useIntersection(this, {element, threshold: 0.3});
-    } else {
-      // Client doesn't support intersection observer, fallback to pre-loading
-      await this.loadContent();
-    }
-  }
-
-  async appear(entry: IntersectionObserverEntry) {
-    if (entry.target === this.el && entry.isIntersecting) {
-      await this.loadContent();
-      if (this.unobserve) {
-        this.unobserve();
-      }
-    }
-  }
-
-}

package/src/controllers/ajax/load_block_controller.ts

@@ -1,59 +0,0 @@
-import {BaseController} from "../../utilities/base_controller";
-
-export class LoadBlockController extends BaseController {
-
-  static targets = ["replace"];
-  static values = {endpoint: String, errorMessage: String, selector: String};
-
-  declare readonly replaceTarget: HTMLElement;
-  declare readonly hasReplaceTarget: boolean;
-  declare readonly endpointValue: string;
-
-  declare readonly hasSelectorValue: boolean;
-  declare readonly selectorValue: string;
-
-  declare readonly hasErrorMessageValue: boolean;
-  declare readonly errorMessageValue: string;
-
-  get _errorMessage(): string {
-    return this.hasErrorMessageValue ? this.errorMessageValue : "This content failed to load";
-  }
-
-  connect() {
-  }
-
-  async loadContent(event: Event | null = null) {
-    event?.preventDefault();
-
-    let self = this;
-    let el = this.hasReplaceTarget ? this.replaceTarget : this.el;
-
-    let failure = () => {
-      el.replaceWith(this._errorMessage);
-      self.dispatch(el, "ajax:error");
-    };
-
-    try {
-      let response = await fetch(this.endpointValue);
-      if (!response.ok) {
-        failure();
-      }
-      let text = await response.text();
-      let newEl = document.createElement("div");
-
-      newEl.innerHTML = text;
-      if (this.hasSelectorValue) {
-        let selectedContent = newEl.querySelectorAll(this.selectorValue);
-        el.replaceWith(...selectedContent);
-      } else {
-        el.replaceWith(...newEl.children);
-      }
-      // Trigger event to show block has loaded
-      self.dispatch(el, "ajax:success");
-    } catch (e) {
-      failure();
-    } finally {
-      self.dispatch(el, "ajax:complete");
-    }
-  }
-}

package/src/controllers/ajax/poll_block_controller.ts

@@ -1,32 +0,0 @@
-import {LoadBlockController} from "./load_block_controller";
-
-export class PollBlockController extends LoadBlockController {
-
-  static targets = ["replace"];
-  static values = {endpoint: String, errorMessage: String, selector: String, seconds: Number};
-
-  declare readonly secondsValue: number;
-  _intervalHandle: null | number = null;
-
-  initialize() {
-    this._timeout = this._timeout.bind(this);
-  }
-
-  connect() {
-    requestAnimationFrame(() => {
-      this._timeout();
-      this._intervalHandle = window.setInterval(this._timeout, this.secondsValue * 1000);
-    });
-  }
-
-  disconnect() {
-    if (this._intervalHandle) {
-      window.clearInterval(this._intervalHandle);
-    }
-  }
-
-  async _timeout() {
-    await this.loadContent();
-  }
-
-}

package/src/controllers/anchor_spy_controller.ts

@@ -1,47 +0,0 @@
-import {BaseController} from "../utilities/base_controller";
-
-export class AnchorSpyController extends BaseController {
-  static values = {key: String};
-
-  declare readonly keyValue: string;
-
-  get _key(): string {
-    return this.keyValue.replaceAll('#', '');
-  }
-
-  get _anchor(): string {
-    return window.location.hash.substr(1);
-  }
-
-  set _anchor(value: string) {
-    window.location.hash = value;
-  }
-
-  initialize() {
-    this._checkAnchor = this._checkAnchor.bind(this);
-  }
-
-  connect() {
-    requestAnimationFrame(() => {
-      this._checkAnchor();
-      window.addEventListener("hashchange", this._checkAnchor);
-    });
-  }
-
-  disconnect() {
-    window.removeEventListener("hashchange", this._checkAnchor);
-  }
-
-  write(event?: Event) {
-    event?.preventDefault();
-    this._anchor = this._key;
-  }
-
-  private _checkAnchor() {
-    if (this._key === this._anchor) {
-      this.dispatch(this.el, "anchor-spy:active");
-    } else {
-      this.dispatch(this.el, "anchor-spy:inactive");
-    }
-  }
-}

package/src/controllers/back_link_controller.ts

@@ -1,49 +0,0 @@
-import {BaseController} from "../utilities/base_controller";
-
-export class BackLinkController extends BaseController {
-
-  static values = {timeout: Number, pages: Number};
-
-  declare readonly timeoutValue: number;
-  declare readonly hasTimeoutValue: boolean;
-  declare readonly pagesValue: number;
-  declare readonly hasPagesValue: boolean;
-  _timeoutHandle: null | ReturnType<typeof window.setTimeout> = null;
-
-  get _pages(): number {
-    return this.hasPagesValue ? Math.abs(this.pagesValue) : 1;
-  }
-
-  get _timeout(): number {
-    return this.hasTimeoutValue ? this.timeoutValue : 1500;
-  }
-
-  initialize() {
-    this.goBack = this.goBack.bind(this);
-    this.fallback = this.fallback.bind(this);
-  }
-
-  connect() {
-    this.el.addEventListener("click", this.goBack);
-  }
-
-  disconnect() {
-    this.el.removeEventListener("click", this.goBack);
-    if (this._timeoutHandle) {
-      clearTimeout(this._timeoutHandle);
-    }
-  }
-
-  goBack(event?: Event) {
-    event?.preventDefault();
-    history.go(-this._pages);
-    if ((this.el as HTMLAnchorElement).href) {
-      this._timeoutHandle = setTimeout(this.fallback, this._timeout);
-    }
-  }
-
-  fallback() {
-    window.location.href = (this.el as HTMLAnchorElement).href;
-  }
-
-}

package/src/controllers/clipboard_controller.ts

@@ -1,47 +0,0 @@
-import {BaseController} from "../utilities/base_controller";
-
-export class ClipboardController extends BaseController {
-
-  static targets = ["source", "button", "copy", "fallback"];
-  static values = {removeUnused: Boolean};
-
-  declare readonly sourceTarget: HTMLElement;
-  declare readonly copyTarget: HTMLElement;
-  declare readonly hasCopyTarget: boolean;
-  declare readonly fallbackTarget: HTMLElement;
-  declare readonly hasFallbackTarget: boolean;
-
-  declare readonly hasRemoveUnusedValue: boolean;
-  declare readonly removeUnusedValue: boolean;
-
-  _supported = false;
-
-  connect() {
-    this._supported = document.queryCommandSupported("copy");
-
-    if (this.hasRemoveUnusedValue && this.removeUnusedValue) {
-      if (this._supported && this.hasFallbackTarget) {
-        this.fallbackTarget.remove();
-      } else if (this.hasCopyTarget) {
-        this.copyTarget.remove();
-      }
-    }
-  }
-
-  select(event: MouseEvent) {
-    if (event) {
-      event.preventDefault();
-    }
-    (this.sourceTarget as HTMLInputElement | HTMLTextAreaElement).select();
-  }
-
-  copy(event: ClipboardEvent) {
-    if (event) {
-      event.preventDefault();
-    }
-    (this.sourceTarget as HTMLInputElement | HTMLTextAreaElement).select();
-    if (this._supported) {
-      document.execCommand("copy");
-    }
-  }
-}

package/src/controllers/confirm_controller.ts

@@ -1,50 +0,0 @@
-import {BaseController} from '../utilities/base_controller';
-import {isHTMLAnchorElement, isHTMLFormElement} from "../utilities/elements";
-
-export class ConfirmController extends BaseController {
-
-  static values = {
-    message: String,
-  };
-
-  declare readonly messageValue: string;
-  declare readonly hasMessageValue: boolean;
-
-  get _message(): string {
-    return this.hasMessageValue ? this.messageValue : 'Are you sure?';
-  }
-
-  initialize() {
-    this.confirm = this.confirm.bind(this);
-  }
-
-  connect() {
-    requestAnimationFrame(() => {
-      let element = this.el;
-      if (isHTMLFormElement(element)) {
-        element.addEventListener("submit", this.confirm);
-      } else if (isHTMLAnchorElement(element)) {
-        element.addEventListener("click", this.confirm);
-      } else {
-        throw new Error("Can't handle confirmation on attached element");
-      }
-    });
-  }
-
-  disconnect() {
-    let element = this.el;
-    if (isHTMLFormElement(element)) {
-      element.removeEventListener("submit", this.confirm);
-    } else if (isHTMLAnchorElement(element)) {
-      element.removeEventListener("click", this.confirm);
-    }
-  }
-
-  confirm(event: Event) {
-    if (!(window.confirm(this._message))) {
-      event.preventDefault();
-      this.dispatch(this.el, "confirm:cancelled");
-    }
-  }
-
-}

package/src/controllers/confirm_navigation_controller.ts

@@ -1,51 +0,0 @@
-import {BaseController} from "../utilities/base_controller";
-
-export class ConfirmNavigationController extends BaseController {
-
-  static values = {message: String};
-
-  declare readonly messageValue: string;
-  declare readonly hasMessageValue: boolean;
-
-  get _message(): string {
-    return this.hasMessageValue ? this.messageValue : "Do you want to leave this page? Changes you made may not be saved";
-  }
-
-  initialize() {
-    this.allowSubmit = this.allowSubmit.bind(this);
-    this.confirmNavigation = this.confirmNavigation.bind(this);
-    this.confirmTurboNavigation = this.confirmTurboNavigation.bind(this);
-  }
-
-  connect() {
-    window.onbeforeunload = () => this._message;
-    window.addEventListener("popstate", this.confirmNavigation);
-    window.addEventListener("submit", this.allowSubmit);
-    window.addEventListener("turbolinks:before-visit", this.confirmTurboNavigation);
-    window.addEventListener("turbo:before-visit", this.confirmTurboNavigation);
-  }
-
-  disconnect() {
-    window.removeEventListener("popstate", this.confirmNavigation);
-    window.onbeforeunload = null;
-    window.removeEventListener("submit", this.allowSubmit);
-    window.removeEventListener("turbolinks:before-visit", this.confirmTurboNavigation);
-    window.removeEventListener("turbo:before-visit", this.confirmTurboNavigation);
-  }
-
-  allowSubmit(_event: Event) {
-    window.removeEventListener("popstate", this.confirmNavigation);
-    window.onbeforeunload = null;
-  }
-
-  confirmNavigation(_event: PopStateEvent) {
-    return false;
-  }
-
-  confirmTurboNavigation(event: Event) {
-    if (!confirm(this._message)) {
-      event.preventDefault();
-    }
-  }
-
-}

package/src/controllers/debug_controller.ts

@@ -1,11 +0,0 @@
-import {BaseController} from "../utilities/base_controller";
-
-export class DebugController extends BaseController {
-
-  static targets = ["test"];
-  declare testTargets: HTMLElement[];
-
-  connect() {
-    console.log("Debug Controller", this, this.testTargets);
-  }
-}

package/src/controllers/disable_with_controller.ts

@@ -1,116 +0,0 @@
-import {BaseController} from '../utilities/base_controller';
-import {isHTMLAnchorElement, isHTMLButtonElement, isHTMLInputElement} from "../utilities/elements";
-
-export class DisableWithController extends BaseController {
-
-  static values = {
-    message: String,
-    timeout: Number,
-  };
-
-  declare readonly messageValue: string;
-  declare readonly hasMessageValue: boolean;
-  declare readonly timeoutValue: number;
-  declare readonly hasTimeoutValue: boolean;
-
-  _cacheText?: string;
-  _timeoutHandle?: ReturnType<typeof window.setTimeout>;
-
-  get _message(): string {
-    return this.hasMessageValue ? this.messageValue : 'Submitting...';
-  }
-
-  get _timeout(): number {
-    return this.hasTimeoutValue ? this.timeoutValue : 1000;
-  }
-
-  initialize() {
-    this.enable = this.enable.bind(this);
-    this.disable = this.disable.bind(this);
-    this._enable = this._enable.bind(this);
-    this._disable = this._disable.bind(this);
-  }
-
-  connect() {
-    requestAnimationFrame(() => {
-      this.el.addEventListener("click", this.disable);
-      window.addEventListener("turbo:load", this._enable);
-      window.addEventListener("turbolinks:load", this._enable);
-    });
-  }
-
-  disconnect() {
-    if (this._timeoutHandle) {
-      clearTimeout(this._timeoutHandle);
-    }
-    this.el.removeEventListener("click", this.disable);
-    window.addEventListener("turbo:load", this._enable);
-    window.addEventListener("turbolinks:load", this._enable);
-  }
-
-  disable(event?: Event) {
-    let element = this.el;
-
-    if (this._isDisabled(element)) {
-      event?.preventDefault();
-      event?.stopImmediatePropagation();
-    } else {
-      this._cacheText = this._getElText(element);
-      this._setElText(element, this._message);
-      this._disable();
-      setTimeout(this.enable, this._timeout);
-    }
-  }
-
-  enable(event?: Event) {
-    event?.preventDefault();
-    let element = this.el;
-    if (this._isDisabled(element)) {
-      this._setElText(element, this._cacheText!);
-      this._enable();
-    }
-  }
-
-  _isDisabled(el: HTMLElement): boolean {
-    if ((isHTMLInputElement(el) && el.type == "submit") || isHTMLButtonElement(el)) {
-      return el.disabled;
-    } else {
-      return el.dataset.disabled == "true";
-    }
-  }
-
-  _getElText(el: HTMLElement): string {
-    if (isHTMLInputElement(el) && el.type == "submit") {
-      return el.value;
-    } else {
-      return el.innerText;
-    }
-  }
-
-  _setElText(el: HTMLElement, str: string) {
-    if (isHTMLInputElement(el) && el.type == "submit") {
-      el.value = str;
-    } else if (isHTMLButtonElement(el) || isHTMLAnchorElement(el)) {
-      el.innerText = str;
-    }
-  }
-
-  _disable() {
-    let el = this.el;
-    if ((isHTMLInputElement(el) && el.type == "submit") || isHTMLButtonElement(el)) {
-      el.disabled = true;
-    } else {
-      el.dataset.disabled = "true";
-    }
-  }
-
-  _enable() {
-    let el = this.el;
-    if (isHTMLInputElement(el) && el.type == "submit" || isHTMLButtonElement(el)) {
-      el.disabled = false;
-    } else {
-      el.dataset.disabled = undefined;
-    }
-  }
-
-}

package/src/controllers/dismissable_controller.ts

@@ -1,12 +0,0 @@
-import {BaseController} from "../utilities/base_controller";
-
-export class DismissableController extends BaseController {
-
-  dismiss() {
-    this.el.remove();
-  }
-
-}
-
-export class RemoveController extends DismissableController {
-}

package/src/controllers/element_save_controller.ts

@@ -1,93 +0,0 @@
-import {get as _get, set as _set} from "lodash-es";
-import {BaseController} from '../utilities/base_controller';
-
-export class ElementSaveController extends BaseController {
-
-  static targets = [
-    "element",
-  ];
-  static values = {
-    id: String,
-    attributes: String,
-    restoreOnLoad: Boolean,
-  };
-  declare readonly hasElementTarget: boolean;
-  declare readonly elementTarget: HTMLElement;
-  declare readonly elementTargets: HTMLElement[];
-  declare readonly idValue: string;
-  declare readonly attributesValue: string;
-  declare readonly hasIdValue: boolean;
-  declare readonly restoreOnLoadValue: boolean;
-  declare readonly hasRestoreOnLoadValue: boolean;
-
-  get _id() {
-    if (this.hasIdValue) {
-      return this.idValue;
-    }
-    let elementID = this.el.id;
-
-    if (elementID !== "") {
-      return elementID;
-    } else {
-      throw new Error(`No ID value to uniquely identify this element. Please either specify data-${this.identifier}-id-value or give this element an 'id' attribute. `);
-    }
-  }
-
-  get _uniqueIdentifier() {
-    const url = location.href;
-    return `${url} ${this._id}`;
-  }
-
-  get _restoreOnLoad() {
-    return this.hasRestoreOnLoadValue ? this.restoreOnLoadValue : true;
-  }
-
-  get _element(): HTMLElement {
-    return this.hasElementTarget ? this.elementTarget : this.el;
-  }
-
-  connect() {
-    requestAnimationFrame(() => {
-      if (this._restoreOnLoad) {
-        this.restore();
-      }
-    });
-  }
-
-  clear(event?: Event) {
-    if (event) {
-      event.preventDefault();
-    }
-    localStorage.removeItem(this._uniqueIdentifier);
-    this.dispatch(this._element, `element-save:cleared`);
-  }
-
-  save(event?: Event) {
-    if (event) {
-      event.preventDefault();
-    }
-    let element = this._element;
-    let attributes = this.attributesValue.split(" ");
-    let data: { [idx: string]: any } = {};
-    attributes.forEach((attr: string) => data[attr] = _get(element, attr));
-    localStorage.setItem(this._uniqueIdentifier, JSON.stringify(data));
-    this.dispatch(element, `element-save:save:success`);
-  }
-
-  restore(event?: Event) {
-    if (event) {
-      event.preventDefault();
-    }
-    let element = this._element;
-    if (localStorage.getItem(this._uniqueIdentifier)) {
-      const savedData = JSON.parse(localStorage.getItem(this._uniqueIdentifier)!); // get and parse the saved data from localStorage
-      Object.keys(savedData).forEach((attr: string) => {
-        _set(element as HTMLElement, attr, savedData[attr]);
-      });
-      this.dispatch(element, `element-save:restore:success`);
-    } else {
-      this.dispatch(element, `element-save:restore:empty`);
-    }
-  }
-
-}