stimulus-components 1.0.0

data/app/javascript/content-loader.js

@@ -0,0 +1,109 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class ContentLoader extends Controller<HTMLElement> {
+  declare refreshTimer: number
+  declare readonly hasUrlValue: boolean
+  declare readonly hasLazyLoadingValue: boolean
+  declare readonly hasRefreshIntervalValue: boolean
+  declare readonly lazyLoadingThresholdValue: number
+  declare readonly lazyLoadingRootMarginValue: string
+  declare readonly urlValue: string
+  declare readonly loadScriptsValue: boolean
+  declare readonly refreshIntervalValue: number
+
+  static values = {
+    url: String,
+    lazyLoading: Boolean,
+    lazyLoadingThreshold: Number,
+    lazyLoadingRootMargin: {
+      type: String,
+      default: "0px",
+    },
+    refreshInterval: Number,
+    loadScripts: Boolean,
+  }
+
+  connect(): void {
+    if (!this.hasUrlValue) {
+      console.error("[stimulus-content-loader] You need to pass an url to fetch the remote content.")
+      return
+    }
+
+    this.hasLazyLoadingValue ? this.lazyLoad() : this.load()
+  }
+
+  disconnect(): void {
+    this.stopRefreshing()
+  }
+
+  load(): void {
+    this.fetch()
+
+    if (this.hasRefreshIntervalValue) {
+      this.startRefreshing()
+    }
+  }
+
+  lazyLoad(): void {
+    const options: IntersectionObserverInit = {
+      threshold: this.lazyLoadingThresholdValue,
+      rootMargin: this.lazyLoadingRootMarginValue,
+    }
+
+    const observer = new IntersectionObserver(
+      (entries, observer) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            this.load()
+            observer.unobserve(entry.target)
+          }
+        })
+      },
+      options
+    )
+
+    observer.observe(this.element)
+  }
+
+  fetch(): void {
+    fetch(this.urlValue)
+      .then((response) => {
+        if (!response.ok) {
+          throw new Error(response.statusText)
+        }
+        return response.text()
+      })
+      .then((html) => {
+        this.element.innerHTML = html
+
+        if (this.loadScriptsValue) {
+          this.loadScripts()
+        }
+
+        this.dispatch("success")
+      })
+      .catch((error) => {
+        this.dispatch("error", { detail: { error } })
+      })
+  }
+
+  startRefreshing(): void {
+    this.refreshTimer = setInterval(() => {
+      this.fetch()
+    }, this.refreshIntervalValue)
+  }
+
+  stopRefreshing(): void {
+    if (this.refreshTimer) {
+      clearInterval(this.refreshTimer)
+    }
+  }
+
+  loadScripts(): void {
+    this.element.querySelectorAll("script").forEach((content) => {
+      const script = document.createElement("script")
+      script.innerHTML = content.innerHTML
+      document.head.appendChild(script).parentNode.removeChild(script)
+    })
+  }
+}

data/app/javascript/dialog.js

@@ -0,0 +1,53 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class Dialog extends Controller {
+  declare readonly dialogTarget: HTMLDialogElement
+  declare readonly openValue: boolean
+
+  static targets = ["dialog"]
+  static values = {
+    open: {
+      type: Boolean,
+      default: false,
+    },
+  }
+
+  initialize() {
+    this.forceClose = this.forceClose.bind(this)
+  }
+
+  connect(): void {
+    if (this.openValue) {
+      this.open()
+    }
+
+    document.addEventListener("turbo:before-render", this.forceClose)
+  }
+
+  disconnect(): void {
+    document.removeEventListener("turbo:before-render", this.forceClose)
+  }
+
+  open(): void {
+    this.dialogTarget.showModal()
+  }
+
+  close(): void {
+    this.dialogTarget.setAttribute("closing", "")
+
+    Promise.all(this.dialogTarget.getAnimations().map((animation) => animation.finished)).then(() => {
+      this.dialogTarget.removeAttribute("closing")
+      this.dialogTarget.close()
+    })
+  }
+
+  backdropClose(event: Event): void {
+    if (event.target === this.dialogTarget) {
+      this.close()
+    }
+  }
+
+  forceClose(): void {
+    this.dialogTarget.close()
+  }
+}

data/app/javascript/dropdown.js

@@ -0,0 +1,27 @@
+import { Controller } from "@hotwired/stimulus"
+import { useTransition } from "stimulus-use"
+
+export default class Dropdown extends Controller {
+  declare readonly menuTarget: HTMLElement
+  declare toggleTransition: (event?: Event) => void
+  declare leave: (event?: Event) => void
+  declare transitioned: false
+
+  static targets = ["menu"]
+
+  connect(): void {
+    useTransition(this, {
+      element: this.menuTarget,
+    })
+  }
+
+  toggle(): void {
+    this.toggleTransition()
+  }
+
+  hide(event: Event): void {
+    if (!this.element.contains(event.target) && !this.menuTarget.classList.contains("hidden")) {
+      this.leave()
+    }
+  }
+}

data/app/javascript/glow.js

@@ -0,0 +1,30 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class Glow extends Controller<HTMLElement> {
+  declare childTarget: HTMLElement
+  declare overlayTarget: HTMLElement
+
+  static targets = ["child", "overlay"]
+
+  initialize(): void {
+    this.move = this.move.bind(this)
+  }
+
+  connect(): void {
+    this.overlayTarget.append(this.childTarget.cloneNode(true))
+    document.body.addEventListener("pointermove", this.move)
+  }
+
+  disconnect(): void {
+    document.body.removeEventListener("pointermove", this.move)
+  }
+
+  move(e: PointerEvent): void {
+    const x = e.pageX - this.element.offsetLeft
+    const y = e.pageY - this.element.offsetTop
+
+    this.element.style.setProperty("--glow-opacity", "1")
+    this.element.style.setProperty("--glow-x", `${x}px`)
+    this.element.style.setProperty("--glow-y", `${y}px`)
+  }
+}

data/app/javascript/hotkey.js

@@ -0,0 +1,26 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class Hotkey extends Controller<HTMLElement> {
+  click(event: KeyboardEvent): void {
+    if (this.isClickable && !this.shouldIgnore(event)) {
+      event.preventDefault()
+      this.element.click()
+    }
+  }
+
+  focus(event: KeyboardEvent): void {
+    if (this.isClickable && !this.shouldIgnore(event)) {
+      event.preventDefault()
+      this.element.focus()
+    }
+  }
+
+  private shouldIgnore(event: KeyboardEvent): boolean {
+    const target = event.target as Element | null
+    return event.defaultPrevented || !!target?.closest("input, textarea, [contenteditable]")
+  }
+
+  private get isClickable(): boolean {
+    return getComputedStyle(this.element).pointerEvents !== "none"
+  }
+}

data/app/javascript/lightbox.js

@@ -0,0 +1,26 @@
+import { Controller } from "@hotwired/stimulus"
+import lightGallery, { LightGallerySettings, LightGallery } from "lightgallery"
+
+export default class Lightbox extends Controller<HTMLElement> {
+  declare optionsValue: LightGallerySettings
+  declare lightGallery: LightGallery
+
+  static values = {
+    options: Object,
+  }
+
+  connect(): void {
+    this.lightGallery = lightGallery(this.element, {
+      ...this.defaultOptions,
+      ...this.optionsValue,
+    })
+  }
+
+  disconnect(): void {
+    this.lightGallery.destroy()
+  }
+
+  get defaultOptions(): LightGallerySettings {
+    return {}
+  }
+}

data/app/javascript/notification.js

@@ -0,0 +1,49 @@
+import { Controller } from "@hotwired/stimulus"
+import { useTransition } from "stimulus-use"
+
+export default class Notification extends Controller {
+  declare timeout: number
+  declare enter: (event?: Event) => void
+  declare leave: (event?: Event) => void
+  declare transitioned: false
+  declare delayValue: number
+  declare hiddenValue: boolean
+
+  static values = {
+    delay: {
+      type: Number,
+      default: 3000,
+    },
+    hidden: {
+      type: Boolean,
+      default: false,
+    },
+  }
+
+  initialize() {
+    this.hide = this.hide.bind(this)
+  }
+
+  connect() {
+    useTransition(this)
+
+    if (this.hiddenValue === false) {
+      this.show()
+    }
+  }
+
+  show() {
+    this.enter()
+
+    this.timeout = setTimeout(this.hide, this.delayValue)
+  }
+
+  async hide() {
+    if (this.timeout) {
+      clearTimeout(this.timeout)
+    }
+
+    await this.leave()
+    this.element.remove()
+  }
+}

data/app/javascript/password-visibility.js

@@ -0,0 +1,27 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class PasswordVisibility extends Controller {
+  declare hasHiddenClass: boolean
+  declare hiddenClass: string
+  declare class: string
+  declare hidden: boolean
+  declare inputTarget: HTMLInputElement
+  declare iconTargets: HTMLElement[]
+
+  static targets = ["input", "icon"]
+  static classes = ["hidden"]
+
+  connect(): void {
+    this.hidden = this.inputTarget.type === "password"
+    this.class = this.hasHiddenClass ? this.hiddenClass : "hidden"
+  }
+
+  toggle(e: Event): void {
+    e.preventDefault()
+
+    this.inputTarget.type = this.hidden ? "text" : "password"
+    this.hidden = !this.hidden
+
+    this.iconTargets.forEach((icon) => icon.classList.toggle(this.class))
+  }
+}

data/app/javascript/places-autocomplete.js

@@ -0,0 +1,123 @@
+import { Controller } from "@hotwired/stimulus"
+
+interface Address {
+  street_number: string
+  route: string
+  locality: string
+  administrative_area_level_2: string
+  administrative_area_level_1: string
+  country: string
+  postal_code: string
+}
+
+export default class PlacesAutocomplete extends Controller {
+  declare autocomplete: google.maps.places.Autocomplete
+  declare place: google.maps.places.PlaceResult
+  declare addressTarget: HTMLInputElement
+  declare streetNumberTarget: HTMLInputElement
+  declare routeTarget: HTMLInputElement
+  declare cityTarget: HTMLInputElement
+  declare countyTarget: HTMLInputElement
+  declare stateTarget: HTMLInputElement
+  declare countryTarget: HTMLInputElement
+  declare postalCodeTarget: HTMLInputElement
+  declare longitudeTarget: HTMLInputElement
+  declare latitudeTarget: HTMLInputElement
+  declare hasStreetNumberTarget: boolean
+  declare hasRouteTarget: boolean
+  declare hasCityTarget: boolean
+  declare hasCountryTarget: boolean
+  declare hasCountyTarget: boolean
+  declare hasPostalCodeTarget: boolean
+  declare hasStateTarget: boolean
+  declare hasLongitudeTarget: boolean
+  declare hasLatitudeTarget: boolean
+  declare countryValue: Array<string>
+
+  static targets = [
+    "address",
+    "city",
+    "streetNumber",
+    "route",
+    "postalCode",
+    "country",
+    "county",
+    "state",
+    "longitude",
+    "latitude",
+  ]
+
+  static values = {
+    country: Array,
+  }
+
+  initialize(): void {
+    this.placeChanged = this.placeChanged.bind(this)
+  }
+
+  connect(): void {
+    if (typeof google !== "undefined") {
+      this.initAutocomplete()
+    }
+  }
+
+  initAutocomplete(): void {
+    this.autocomplete = new google.maps.places.Autocomplete(this.addressTarget, this.autocompleteOptions)
+    this.autocomplete.addListener("place_changed", this.placeChanged)
+  }
+
+  placeChanged(): void {
+    this.place = this.autocomplete.getPlace()
+    const addressComponents = this.place.address_components
+
+    if (addressComponents !== undefined) {
+      const formattedAddress = this.formatAddressComponents(addressComponents) as Address
+      this.setAddressComponents(formattedAddress)
+    }
+
+    if (this.place.geometry !== undefined) {
+      this.setGeometry(this.place.geometry)
+    }
+  }
+
+  setAddressComponents(address: Address): void {
+    if (this.hasStreetNumberTarget) this.streetNumberTarget.value = address.street_number || ""
+    if (this.hasRouteTarget) this.routeTarget.value = address.route || ""
+    if (this.hasCityTarget) this.cityTarget.value = address.locality || ""
+    if (this.hasCountyTarget) this.countyTarget.value = address.administrative_area_level_2 || ""
+    if (this.hasStateTarget) this.stateTarget.value = address.administrative_area_level_1 || ""
+    if (this.hasCountryTarget) this.countryTarget.value = address.country || ""
+    if (this.hasPostalCodeTarget) this.postalCodeTarget.value = address.postal_code || ""
+  }
+
+  setGeometry(geometry: google.maps.places.PlaceGeometry): void {
+    if (this.hasLongitudeTarget) this.longitudeTarget.value = geometry.location.lng().toString()
+    if (this.hasLatitudeTarget) this.latitudeTarget.value = geometry.location.lat().toString()
+  }
+
+  get autocompleteOptions(): google.maps.places.AutocompleteOptions {
+    return {
+      fields: ["address_components", "geometry"],
+      componentRestrictions: {
+        country: this.countryValue,
+      },
+    }
+  }
+
+  preventSubmit(event: KeyboardEvent): void {
+    if (event.code === "Enter") {
+      event.preventDefault()
+    }
+  }
+
+  private formatAddressComponents(addressComponents): Address {
+    const data = {}
+
+    addressComponents.forEach((component) => {
+      const type = component.types[0]
+      data[type] = component.long_name
+    })
+
+    return data as Address
+  }
+}

data/app/javascript/popover.js

@@ -0,0 +1,53 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class Popover extends Controller {
+  declare readonly hasCardTarget: boolean
+  declare readonly hasContentTarget: boolean
+  declare readonly hasUrlValue: boolean
+  declare readonly contentTarget: HTMLElement
+  declare readonly cardTarget: HTMLElement
+  declare readonly urlValue: string
+  declare remoteContent: string
+
+  static targets = ["card", "content"]
+  static values = {
+    url: String,
+  }
+
+  async show(event: Event): Promise<void> {
+    const element = event.currentTarget
+
+    let content: string = null
+
+    if (this.hasContentTarget) {
+      content = this.contentTarget.innerHTML
+    } else {
+      content = await this.fetch()
+    }
+
+    if (!content) return
+
+    const fragment = document.createRange().createContextualFragment(content)
+    element.appendChild(fragment)
+  }
+
+  hide(): void {
+    if (this.hasCardTarget) {
+      this.cardTarget.remove()
+    }
+  }
+
+  async fetch(): Promise<string> {
+    if (!this.remoteContent) {
+      if (!this.hasUrlValue) {
+        console.error("[stimulus-popover] You need to pass an url to fetch the popover content.")
+        return
+      }
+
+      const response = await fetch(this.urlValue)
+      this.remoteContent = await response.text()
+    }
+
+    return this.remoteContent
+  }
+}

data/app/javascript/prefetch.js

@@ -0,0 +1,56 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class Prefetch extends Controller<HTMLAnchorElement> {
+  initialize(): void {
+    this.prefetch = this.prefetch.bind(this)
+    this.load = this.load.bind(this)
+  }
+
+  connect(): void {
+    if (!this.hasPrefetch) return
+    this.load()
+  }
+
+  load(): void {
+    const observer = new IntersectionObserver(
+      (entries, observer) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            this.prefetch()
+            observer.unobserve(entry.target)
+          }
+        })
+      }
+    )
+
+    observer.observe(this.element)
+  }
+
+  prefetch(): void {
+    const connection = navigator.connection
+
+    if (connection) {
+      if (connection.saveData) {
+        console.warn("[@stimulus-components/prefetch] Cannot prefetch, Save-Data is enabled.")
+        return
+      }
+
+      if (connection.effectiveType !== "4g") {
+        console.warn("[@stimulus-components/prefetch] Cannot prefetch, network conditions are poor.")
+        return
+      }
+    }
+
+    const link = document.createElement("link")
+    link.rel = "prefetch"
+    link.href = this.element.href
+    link.as = "document"
+
+    document.head.appendChild(link)
+  }
+
+  get hasPrefetch(): boolean {
+    const link = document.createElement("link")
+    return link.relList && link.relList.supports && link.relList.supports("prefetch")
+  }
+}

data/app/javascript/rails-nested-form.js

@@ -0,0 +1,43 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class RailsNestedForm extends Controller {
+  declare targetTarget: HTMLElement
+  declare templateTarget: HTMLElement
+  declare wrapperSelectorValue: string
+
+  static targets = ["target", "template"]
+  static values = {
+    wrapperSelector: {
+      type: String,
+      default: ".nested-form-wrapper",
+    },
+  }
+
+  add(e: Event): void {
+    e.preventDefault()
+
+    const content = this.templateTarget.innerHTML.replace(/NEW_RECORD/g, new Date().getTime().toString())
+    this.targetTarget.insertAdjacentHTML("beforebegin", content)
+
+    const event = new CustomEvent("rails-nested-form:add", { bubbles: true })
+    this.element.dispatchEvent(event)
+  }
+
+  remove(e: Event): void {
+    e.preventDefault()
+
+    const wrapper = e.target.closest(this.wrapperSelectorValue)
+
+    if (wrapper.dataset.newRecord === "true") {
+      wrapper.remove()
+    } else {
+      wrapper.style.display = "none"
+
+      const input = wrapper.querySelector("input[name*='_destroy']")
+      input.value = "1"
+    }
+
+    const event = new CustomEvent("rails-nested-form:remove", { bubbles: true })
+    this.element.dispatchEvent(event)
+  }
+}

data/app/javascript/read-more.js

@@ -0,0 +1,38 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class ReadMore extends Controller {
+  declare open: boolean
+  declare contentTarget: HTMLElement
+  declare moreTextValue: string
+  declare lessTextValue: string
+
+  static targets: string[] = ["content"]
+  static values = {
+    moreText: String,
+    lessText: String,
+  }
+
+  connect(): void {
+    this.open = false
+  }
+
+  toggle(event: Event): void {
+    this.open === false ? this.show(event) : this.hide(event)
+  }
+
+  show(event: Event): void {
+    this.open = true
+
+    const target = event.target as HTMLElement
+    target.innerHTML = this.lessTextValue
+    this.contentTarget.style.setProperty("--read-more-line-clamp", "'unset'")
+  }
+
+  hide(event: Event): void {
+    this.open = false
+
+    const target = event.target as HTMLElement
+    target.innerHTML = this.moreTextValue
+    this.contentTarget.style.removeProperty("--read-more-line-clamp")
+  }
+}

data/app/javascript/remote-rails.js

@@ -0,0 +1,27 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class RemoteRails extends Controller<HTMLElement> {
+  replace(event: CustomEvent): void {
+    event.preventDefault()
+    event.stopPropagation()
+
+    const [, , xhr] = event.detail
+    this.element.outerHTML = xhr.response
+  }
+
+  append(event: CustomEvent): void {
+    event.preventDefault()
+    event.stopPropagation()
+
+    const [, , xhr] = event.detail
+    this.element.insertAdjacentHTML("afterend", xhr.response)
+  }
+
+  prepend(event: CustomEvent): void {
+    event.preventDefault()
+    event.stopPropagation()
+
+    const [, , xhr] = event.detail
+    this.element.insertAdjacentHTML("beforebegin", xhr.response)
+  }
+}