stimulus-library 0.3.19 → 0.4.0

package/src/controllers/forms/value_warn_controller.ts

@@ -1,107 +0,0 @@
-import {BaseController} from "../../utilities/base_controller";
-
-export class ValueWarnController extends BaseController {
-  static classes = ["inputWarning", "warningHide"];
-  static targets = ["input", "warning"];
-  static values = {max: Number, min: Number, minMessage: String, maxMessage: String};/* Classes*/
-  declare readonly inputWarningClass: string;
-  declare readonly hasInputWarningClass: boolean;
-  declare readonly warningHideClass: string;
-  declare readonly hasWarningHideClass: boolean;/* Targets*/
-  declare readonly inputTarget: HTMLInputElement;
-  declare readonly warningTarget: HTMLElement;/* Values*/
-  declare readonly maxValue: number;
-  declare readonly hasMaxValue: boolean;
-  declare readonly minValue: number;
-  declare readonly hasMinValue: boolean;
-  declare readonly minMessageValue: string;
-  declare readonly hasMinMessageValue: boolean;
-  declare readonly maxMessageValue: string;
-  declare readonly hasMaxMessageValue: boolean;
-
-  get _maxMessage(): string {
-    return this.hasMaxMessageValue ? this.maxMessageValue : `Value must be less than ${this.maxValue}`;
-  }
-
-  get _minMessage(): string {
-    return this.hasMinMessageValue ? this.minMessageValue : `Value must be greater than ${this.minValue}`;
-  }
-
-  get _warningHideClasses(): string[] {
-    return this.warningHideClass.split(" ");
-  }
-
-  get _defaultWarningHideClasses(): string[] {
-    return ["hide"];
-  }
-
-  get _inputWarningClasses(): string[] {
-    return this.inputWarningClass.split(" ");
-  }
-
-  get _defaultInputWarningClasses(): string[] {
-    return [""];
-  }
-
-  initialize() {
-    this._check = this._check.bind(this);
-  }
-
-  connect() {
-    this._addWarningHideClasses(this.warningTarget);
-    this.inputTarget.addEventListener("input", this._check);
-    this._check();
-  }
-
-  disconnect() {
-    this.inputTarget.removeEventListener("input", this._check);
-  }
-
-  private _check() {
-    if (this.hasMinValue && Number.parseFloat(this.inputTarget.value) < this.minValue) {
-      this._removeWarningHideClasses(this.warningTarget);
-      this._addInputWarningClasses(this.inputTarget);
-      this.warningTarget.innerText = this._minMessage;
-    } else if (this.hasMaxValue && Number.parseFloat(this.inputTarget.value) > this.maxValue) {
-      this._removeWarningHideClasses(this.warningTarget);
-      this._addInputWarningClasses(this.inputTarget);
-      this.warningTarget.innerText = this._maxMessage;
-    } else {
-      this._addWarningHideClasses(this.warningTarget);
-      this._removeInputWarningClasses(this.inputTarget);
-      this.warningTarget.innerText = "";
-    }
-  }
-
-  private _addWarningHideClasses(el: HTMLElement = this.el) {
-    if (this.hasWarningHideClass) {
-      el.classList.add(...this._warningHideClasses);
-    } else {
-      el.classList.add(...this._defaultWarningHideClasses);
-    }
-  }
-
-  private _removeWarningHideClasses(el: HTMLElement = this.el) {
-    if (this.hasWarningHideClass) {
-      el.classList.remove(...this._warningHideClasses);
-    } else {
-      el.classList.remove(...this._defaultWarningHideClasses);
-    }
-  }
-
-  private _addInputWarningClasses(el: HTMLElement = this.el) {
-    if (this.hasInputWarningClass) {
-      el.classList.add(...this._inputWarningClasses);
-    } else {
-      el.classList.add(...this._defaultInputWarningClasses);
-    }
-  }
-
-  private _removeInputWarningClasses(el: HTMLElement = this.el) {
-    if (this.hasInputWarningClass) {
-      el.classList.remove(...this._inputWarningClasses);
-    } else {
-      el.classList.remove(...this._defaultInputWarningClasses);
-    }
-  }
-}

package/src/controllers/forms/word_count_controller.ts

@@ -1,86 +0,0 @@
-import {BaseController} from "../../utilities/base_controller";
-
-export class WordCountController extends BaseController {
-
-  static targets = ["input", "output"];
-  static values = {min: Number, max: Number};
-  static classes = ["error"];
-
-  declare readonly inputTarget: HTMLInputElement | HTMLTextAreaElement;
-  declare readonly outputTarget: HTMLElement;
-  declare minValue: number;
-  declare hasMinValue: boolean;
-  declare maxValue: number;
-  declare hasMaxValue: boolean;
-
-  declare readonly errorClass: string;
-  declare readonly hasErrorClass: boolean;
-
-  get _errorClasses(): string[] {
-    return this.errorClass.split(' ');
-  }
-
-  get _defaultErrorClasses(): string[] {
-    return [];
-  }
-
-  initialize() {
-    this._updateWordCount = this._updateWordCount.bind(this);
-  }
-
-  connect() {
-    this._updateWordCount();
-    this.inputTarget.addEventListener("input", this._updateWordCount);
-  }
-
-  disconnect() {
-    this.inputTarget.removeEventListener("input", this._updateWordCount);
-  }
-
-  _updateWordCount() {
-    let wordCount = 0;
-    let textAreaValue = this.inputTarget.value;
-    let matches = textAreaValue.match(/\S+/g);
-    wordCount = (matches && matches.length) || 0;
-    this.outputTarget.innerText = wordCount.toString();
-    if (this.hasErrorClass) {
-      if (this._isValidCount(wordCount)) {
-        this._removeErrorClasses(this.outputTarget);
-      } else {
-        this._addErrorClasses(this.outputTarget);
-      }
-    }
-  }
-
-  private _addErrorClasses(el: HTMLElement = this.el) {
-    if (this.hasErrorClass) {
-      el.classList.add(...this._errorClasses);
-    } else {
-      el.classList.add(...this._defaultErrorClasses);
-    }
-  }
-
-  private _removeErrorClasses(el: HTMLElement = this.el) {
-    if (this.hasErrorClass) {
-      el.classList.remove(...this._errorClasses);
-    } else {
-      el.classList.remove(...this._defaultErrorClasses);
-    }
-  }
-
-  private _isValidCount(count: number) {
-    let min = 0;
-    let max = 99999;
-
-    if (this.hasMinValue) {
-      min = this.minValue;
-    }
-
-    if (this.hasMaxValue) {
-      max = this.maxValue;
-    }
-
-    return count >= min && count <= max;
-  }
-
-}

package/src/controllers/media/fallback_image_controller.ts

@@ -1,108 +0,0 @@
-import {BaseController} from "../../utilities/base_controller";
-
-export class FallbackImageController extends BaseController {
-
-  static values = {placeholder: String};
-  static classes = ["success", "fail"];
-
-  declare readonly placeholderValue: string;
-  declare readonly hasPlaceholderValue: boolean;
-  declare readonly successClass: string;
-  declare readonly hasSuccessClass: boolean;
-  declare readonly failClass: string;
-  declare readonly hasFailClass: boolean;
-
-  get _successClasses(): string[] {
-    return this.successClass.split(' ');
-  }
-
-  get _defaultSuccessClasses(): string[] {
-    return [];
-  }
-
-  get _failClasses(): string[] {
-    return this.failClass.split(' ');
-  }
-
-  get _defaultFailClasses(): string[] {
-    return [];
-  }
-
-  initialize() {
-    this._hasLoadedSuccessfully = this._hasLoadedSuccessfully.bind(this);
-    this._success = this._success.bind(this);
-    this._fail = this._fail.bind(this);
-  }
-
-  connect() {
-    let element = this.el as HTMLImageElement;
-
-    element.onerror = this._fail;
-    if (element.complete && !this._hasLoadedSuccessfully()) {
-      this._fail();
-    } else {
-      this._success();
-    }
-  }
-
-  disconnect() {
-    this._removeSuccessClasses();
-    this._removeFailClasses();
-  }
-
-  private _success() {
-    this._addSuccessClasses();
-  }
-
-  private _fail() {
-    let element = this.el as HTMLImageElement;
-    this._addFailClasses();
-
-    if (this.hasPlaceholderValue && element.src !== this.placeholderValue) {
-      this.dispatch(element, "fallback-image:placeholder");
-      element.src = this.placeholderValue;
-      element.onerror = this._fail;
-    } else {
-      this.dispatch(element, "fallback-image:fail");
-      element.style.display = "none";
-    }
-  }
-
-  private _hasLoadedSuccessfully(): boolean {
-    let element = this.el as HTMLImageElement;
-    return element.naturalHeight > 0 && element.naturalWidth > 0;
-  }
-
-  private _addFailClasses(el: HTMLElement = this.el) {
-    if (this.hasFailClass) {
-      el.classList.add(...this._failClasses);
-    } else {
-      el.classList.add(...this._defaultFailClasses);
-    }
-  }
-
-  private _removeFailClasses(el: HTMLElement = this.el) {
-    if (this.hasFailClass) {
-      el.classList.remove(...this._failClasses);
-    } else {
-      el.classList.remove(...this._defaultFailClasses);
-    }
-  }
-
-  private _addSuccessClasses(el: HTMLElement = this.el) {
-    if (this.hasSuccessClass) {
-      el.classList.add(...this._successClasses);
-    } else {
-      el.classList.add(...this._defaultSuccessClasses);
-    }
-  }
-
-  private _removeSuccessClasses(el: HTMLElement = this.el) {
-    if (this.hasSuccessClass) {
-      el.classList.remove(...this._successClasses);
-    } else {
-      el.classList.remove(...this._defaultSuccessClasses);
-    }
-  }
-
-}

package/src/controllers/media/lightbox_image_controller.ts

@@ -1,89 +0,0 @@
-import dialogPolyfill from "dialog-polyfill";
-import {BaseController} from "../../utilities/base_controller";
-import {scrollToElement} from "../../utilities/scroll";
-
-export class LightboxImageController extends BaseController {
-
-  static values = {
-    src: String,
-    srcSet: String,
-    sizes: String,
-  };
-  static classes = ["modal", "image"];
-
-  declare readonly hasModalClass: boolean;
-  declare readonly modalClass: string;
-  declare readonly hasImageClass: boolean;
-  declare readonly imageClass: string;
-  declare readonly hasSrcValue: boolean;
-  declare readonly srcValue: string;
-  declare readonly hasSrcSetValue: boolean;
-  declare readonly srcSetValue: string;
-  declare readonly hasSizesValue: boolean;
-  declare readonly sizesValue: string;
-  _dialog: HTMLDialogElement | null = null;
-
-  get _src(): string {
-    return this.hasSrcValue ? this.srcValue : (this.el as HTMLImageElement).src;
-  }
-
-  get _srcSet(): string {
-    return this.hasSrcSetValue ? this.srcSetValue : (this.el as HTMLImageElement).srcset;
-  }
-
-  get _sizes(): string {
-    return this.hasSizesValue ? this.sizesValue : (this.el as HTMLImageElement).sizes;
-  }
-
-  get _modalClassName() {
-    return this.hasModalClass ? this.modalClass : "image-lightbox-dialog";
-  }
-
-  get _imageClassName() {
-    return this.hasImageClass ? this.imageClass : "image-lightbox-image";
-  }
-
-  initialize() {
-    this.open = this.open.bind(this);
-    this.close = this.close.bind(this);
-  }
-
-  connect() {
-  }
-
-  open() {
-    let element = this.el as HTMLImageElement;
-    if (this._dialog) {
-      return;
-    }
-    this._dialog = document.createElement("dialog");
-
-    let image = document.createElement("img") as HTMLImageElement;
-    image.className = this._imageClassName;
-    image.src = this._src;
-    image.srcset = this._srcSet;
-    image.sizes = this._sizes;
-    this._dialog.appendChild(image);
-
-    element.insertAdjacentElement("afterend", this._dialog);
-    dialogPolyfill.registerDialog(this._dialog);
-    this._dialog.className = this._modalClassName;
-    // @ts-ignore Experimental API
-    this._dialog.showModal();
-    scrollToElement(this._dialog, {behavior: "smooth", block: "end"}).catch(() => this._dialog!.scrollIntoView(false));
-    this._dialog.addEventListener("click", this.close);
-    this._dialog.addEventListener("cancel", this.close);
-    this._dialog.addEventListener("close", this.close);
-  }
-
-  close() {
-    if (this._dialog) {
-      // @ts-ignore Experimental API
-      this._dialog.close();
-      this._dialog.remove();
-      this._dialog = null;
-      scrollToElement(this.el, {behavior: "smooth", block: "end"}).catch(() => this.el.scrollIntoView(false));
-    }
-  }
-
-}

package/src/controllers/media/media_player_controller.ts

@@ -1,37 +0,0 @@
-import {BaseController} from "../../utilities/base_controller";
-
-export class MediaPlayerController extends BaseController {
-
-  static targets = ["media"];
-
-  declare readonly mediaTarget: HTMLMediaElement;
-
-  initialize() {
-  }
-
-  connect() {
-  }
-
-  disconnect() {
-  }
-
-  async play(event?: Event) {
-    event?.preventDefault();
-    await this.mediaTarget.play();
-  }
-
-  pause(event?: Event) {
-    event?.preventDefault();
-    this.mediaTarget.pause();
-  }
-
-  restart(event?: Event) {
-    event?.preventDefault();
-    this.mediaTarget.currentTime = 0;
-  }
-
-  seek(event?: Event) {
-    event?.preventDefault();
-    this.mediaTarget.currentTime += 5;
-  }
-}

package/src/controllers/prefetch_controller.ts

@@ -1,99 +0,0 @@
-import {BaseController} from "../utilities/base_controller";
-
-export class PrefetchController extends BaseController {
-
-  static values = {mode: String};
-
-  declare readonly modeValue: "intersect" | "mouseover";
-  declare readonly hasModeValue: boolean;
-
-  get _mode(): string {
-    return this.hasModeValue ? this.modeValue : "mouseover";
-  }
-
-  get _supportsPrefetch(): boolean {
-    const link: HTMLLinkElement = document.createElement('link');
-    return link.relList?.supports && link.relList?.supports('prefetch');
-  }
-
-  get _href(): string {
-    return (this.el as HTMLAnchorElement).href;
-  }
-
-  get _existingPrefetch(): boolean {
-    return (document.head.querySelectorAll(`link[rel="prefetch"][href="${this._href}"]`) || []).length > 0;
-  }
-
-  get _connectionSuitable(): boolean {
-    // @ts-ignore
-    const connection = navigator.connection;
-
-    // no way to know what network state is. Allow prefetching
-    if (!connection) {
-      return true;
-    }
-
-    // Don't prefetch if network conditions are poor or user has enabled data-saving mode
-    if (connection) {
-      // @ts-ignore Experimental API
-      if (connection.saveData) {
-        this.warn('Data Saving is enabled');
-        return false;
-      }
-
-      // @ts-ignore Experimental API
-      if (/2g/.test(connection.effectiveType)) {
-        this.warn("Network is too slow");
-        return false;
-      }
-    }
-    return true;
-  }
-
-  initialize(): void {
-    this.prefetch = this.prefetch.bind(this);
-  }
-
-  connect(): void {
-    if (!this._supportsPrefetch) {
-      return;
-    }
-
-    switch (this._mode) {
-      case "intersect":
-        this._setupObserver();
-        break;
-      case "mouseover":
-        this.el.addEventListener("mouseover", this.prefetch, {once: true});
-        break;
-      default:
-        throw new Error(`'${this._mode}' is not a supported prefetch mode`);
-    }
-  }
-
-  disconnect() {
-    this.el.removeEventListener("mouseover", this.prefetch);
-  }
-
-  _setupObserver(): void {
-    const observer: IntersectionObserver = new IntersectionObserver(
-      ([entry]: IntersectionObserverEntry[], observer: IntersectionObserver) => {
-        if (entry.isIntersecting) {
-          this.prefetch();
-          observer.unobserve(entry.target);
-        }
-      },
-    );
-    observer.observe(this.element);
-  }
-
-  prefetch() {
-    if (this._existingPrefetch || !this._connectionSuitable) {
-      return;
-    }
-    const link: HTMLLinkElement = document.createElement('link');
-    Object.assign(link, {rel: 'prefetch', href: this._href, as: 'document'});
-    document.head.appendChild(link);
-  }
-
-}

package/src/controllers/responsive_iframe_controller.ts

@@ -1,75 +0,0 @@
-import {useDebounce, useWindowResize} from "stimulus-use";
-import {WindowResizePayload} from "stimulus-use/dist/use-window-resize/use-window-resize";
-import {BaseController} from "../utilities/base_controller";
-
-interface ResponsiveIframeMessage {
-  name: string,
-  height: number,
-}
-
-export class ResponsiveIframeWrapperController extends BaseController {
-
-  initialize() {
-    this.messageReceived = this.messageReceived.bind(this);
-  }
-
-  connect() {
-    window.addEventListener("message", this.messageReceived);
-  }
-
-  disconnect() {
-    window.removeEventListener("message", this.messageReceived);
-  }
-
-  messageReceived(message: MessageEvent<ResponsiveIframeMessage>) {
-    let data = message.data;
-    if (data.hasOwnProperty("name") && data.name === "iframe-body" && data.hasOwnProperty("height")) {
-      this.resize(data.height);
-    }
-  }
-
-  resize(height: number) {
-    (this.el as HTMLIFrameElement).style.height = `${height}px`;
-  }
-
-}
-
-export class ResponsiveIframeBodyController extends BaseController {
-
-  static debounces = ["postUpdate"];
-
-  declare observe: () => void;
-  declare unobserve: () => void;
-
-  connect() {
-    // If this Window is inside a frame
-    if (window.self !== window.top) {
-      useWindowResize(this);
-      useDebounce(this, {});
-      this.postUpdate();
-    } else {
-      // Not an iframe
-    }
-  }
-
-  windowResize(payload: WindowResizePayload) {
-    this.postUpdate();
-  };
-
-  postUpdate() {
-    let payload: ResponsiveIframeMessage = {name: "iframe-body", height: this.getHeight()};
-    window.parent.postMessage(
-      payload,
-      "*",
-    );
-  }
-
-  getHeight(): number {
-    const body = document.body;
-    const html = document.documentElement;
-
-    // Get the largest height out of body and html's various height measurements
-    return Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight);
-  }
-
-}

package/src/controllers/scroll/scroll_container_controller.ts

@@ -1,73 +0,0 @@
-import {BaseController} from "../../utilities/base_controller";
-import {scrollAbsoluteBottom, scrollAbsoluteLeft, scrollAbsoluteTop, scrollDown, scrollLeft, scrollRight, scrollUp} from "../../utilities/scroll";
-
-export class ScrollContainerController extends BaseController {
-
-  static values = {
-    behaviour: String,
-    increment: Number,
-  };
-
-  declare readonly behaviourValue: ScrollBehavior;
-  declare readonly hasBehaviourValue: boolean;
-
-  declare readonly incrementValue: number;
-  declare readonly hasIncrementValue: boolean;
-
-  get _increment(): number {
-    return this.hasIncrementValue ? this.incrementValue : 50;
-  }
-
-  get _behaviour(): ScrollBehavior {
-    if (this.hasBehaviourValue) {
-      if (["auto", "smooth"].includes(this.behaviourValue)) {
-        return this.behaviourValue;
-      } else {
-        throw new Error(`'${this.behaviourValue}' is not a recognised scroll behaviour`);
-      }
-    } else {
-      return "auto";
-    }
-  }
-
-  async scrollTop(event?: Event) {
-    event?.preventDefault();
-    await scrollAbsoluteTop(this.el, {behavior: this._behaviour});
-  }
-
-  async scrollBottom(event?: Event) {
-    event?.preventDefault();
-    await scrollAbsoluteBottom(this.el, {behavior: this._behaviour});
-  }
-
-  async scrollLeft(event?: Event) {
-    event?.preventDefault();
-    await scrollAbsoluteLeft(this.el, {behavior: this._behaviour});
-  }
-
-  async scrollRight(event?: Event) {
-    event?.preventDefault();
-    await scrollAbsoluteLeft(this.el, {behavior: this._behaviour});
-  }
-
-  async up(event?: Event) {
-    event?.preventDefault();
-    await scrollUp(this.el, this._increment, {behavior: this._behaviour});
-  }
-
-  async down(event?: Event) {
-    event?.preventDefault();
-    await scrollDown(this.el, this._increment, {behavior: this._behaviour});
-  }
-
-  async left(event?: Event) {
-    event?.preventDefault();
-    await scrollLeft(this.el, this._increment, {behavior: this._behaviour});
-  }
-
-  async right(event?: Event) {
-    event?.preventDefault();
-    await scrollRight(this.el, this._increment, {behavior: this._behaviour});
-  }
-}
-