hotwirebits 0.1.0

data/app/javascript/controllers/hotwirebits/rb_dropdown_controller.js

@@ -0,0 +1,73 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["menu", "trigger"]
+  static values = { open: { type: Boolean, default: false } }
+
+  connect() {
+    this._beforeCache = () => { if (this.hasMenuTarget) this.menuTarget.classList.add("hidden") }
+    document.addEventListener("turbo:before-cache", this._beforeCache)
+    this.handleOutsideClick = this.handleOutsideClick.bind(this)
+    this.handleKeydown = this.handleKeydown.bind(this)
+    document.addEventListener("click", this.handleOutsideClick)
+    document.addEventListener("keydown", this.handleKeydown)
+  }
+
+  disconnect() {
+    document.removeEventListener("turbo:before-cache", this._beforeCache)
+    document.removeEventListener("click", this.handleOutsideClick)
+    document.removeEventListener("keydown", this.handleKeydown)
+  }
+
+  toggle() {
+    this.openValue ? this.close() : this.open()
+  }
+
+  open() {
+    this.openValue = true
+    this.menuTarget.classList.remove("hidden")
+    this.triggerTarget.setAttribute("aria-expanded", "true")
+  }
+
+  close() {
+    this.openValue = false
+    this.menuTarget.classList.add("hidden")
+    this.triggerTarget.setAttribute("aria-expanded", "false")
+  }
+
+  handleOutsideClick(event) {
+    if (!this.openValue) return
+    if (!this.element.contains(event.target)) this.close()
+  }
+
+  handleKeydown(event) {
+    if (!this.openValue) return
+    if (event.key === "Escape") {
+      this.close()
+      this.triggerTarget.focus()
+    }
+    if (event.key === "ArrowDown") {
+      event.preventDefault()
+      const items = this.menuTarget.querySelectorAll('[role="menuitem"]')
+      if (items.length) items[0].focus()
+    }
+  }
+
+  focusNext(event) {
+    const items = Array.from(this.menuTarget.querySelectorAll('[role="menuitem"]'))
+    const index = items.indexOf(document.activeElement)
+    if (index < items.length - 1) {
+      event.preventDefault()
+      items[index + 1].focus()
+    }
+  }
+
+  focusPrev(event) {
+    const items = Array.from(this.menuTarget.querySelectorAll('[role="menuitem"]'))
+    const index = items.indexOf(document.activeElement)
+    if (index > 0) {
+      event.preventDefault()
+      items[index - 1].focus()
+    }
+  }
+}

data/app/javascript/controllers/hotwirebits/rb_feedback_controller.js

@@ -0,0 +1,50 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["form", "buttons", "response", "comment"]
+  static values = { url: { type: String, default: "" }, type: { type: String, default: "rating" } }
+
+  selectResponse(event) {
+    const value = event.currentTarget.dataset.value
+    this.responseTargets.forEach((r) => r.classList.toggle("selected", r === event.currentTarget))
+    this.dispatch("select", { detail: { value } })
+  }
+
+  async submit() {
+    const data = {
+      type: this.typeValue,
+      response: this.element.querySelector(".selected")?.dataset.value,
+      comment: this.hasCommentTarget ? this.commentTarget.value : null
+    }
+
+    if (this.urlValue) {
+      try {
+        const response = await fetch(this.urlValue, {
+          method: "POST",
+          headers: { "Content-Type": "application/json", "X-CSRF-Token": this.csrfToken },
+          body: JSON.stringify(data)
+        })
+        if (response.ok) {
+          this.dispatch("submitted", { detail: data })
+          this.showThankYou()
+        }
+      } catch (e) {
+        this.dispatch("error", { detail: { error: e } })
+      }
+    } else {
+      this.dispatch("submitted", { detail: data })
+      this.showThankYou()
+    }
+  }
+
+  showThankYou() {
+    if (this.hasFormTarget) {
+      this.formTarget.innerHTML = '<div class="feedback-thanks">Thank you for your feedback!</div>'
+    }
+  }
+
+  get csrfToken() {
+    const meta = document.querySelector('meta[name="csrf-token"]')
+    return meta ? meta.content : ""
+  }
+}

data/app/javascript/controllers/hotwirebits/rb_file_browser_controller.js

@@ -0,0 +1,9 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["list", "input"]
+  static values = { multiple: { type: Boolean, default: false } }
+
+  browse() { if (this.hasInputTarget) this.inputTarget.click() }
+  select(event) { this.dispatch("select", { detail: { files: event.target.files } }) }
+}

data/app/javascript/controllers/hotwirebits/rb_highlight_controller.js

@@ -0,0 +1,47 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["content"]
+  static values = { term: { type: String, default: "" }, caseSensitive: { type: Boolean, default: false } }
+
+  connect() {
+    this.originalContent = this.contentTarget.innerHTML
+  }
+
+  termValueChanged() {
+    this.apply()
+  }
+
+  apply() {
+    const term = this.termValue
+    if (!term) {
+      this.contentTarget.innerHTML = this.originalContent
+      return
+    }
+    this.contentTarget.innerHTML = this.originalContent
+    const walker = document.createTreeWalker(this.contentTarget, NodeFilter.SHOW_TEXT, null, false)
+    const textNodes = []
+    while (walker.nextNode()) textNodes.push(walker.currentNode)
+
+    textNodes.forEach((node) => {
+      const flags = this.caseSensitiveValue ? "g" : "gi"
+      const escaped = term.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")
+      const regex = new RegExp(`(${escaped})`, flags)
+      if (regex.test(node.textContent)) {
+        const span = document.createElement("span")
+        span.innerHTML = node.textContent.replace(regex, '<mark class="highlight">$1</mark>')
+        node.parentNode.replaceChild(span, node)
+      }
+    })
+  }
+
+  highlight(event) {
+    this.termValue = event.params.term || event.currentTarget.value || ""
+    this.apply()
+  }
+
+  clear() {
+    this.termValue = ""
+    this.contentTarget.innerHTML = this.originalContent
+  }
+}

data/app/javascript/controllers/hotwirebits/rb_hover_3d_controller.js

@@ -0,0 +1,7 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  connect() {
+    this.element.setAttribute("data-hw-ready", "true")
+  }
+}

data/app/javascript/controllers/hotwirebits/rb_hover_card_controller.js

@@ -0,0 +1,19 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["card"]
+  static values = { delay: { type: Number, default: 300 } }
+
+  connect() {
+    this._onEnter = () => { this._timeout = setTimeout(() => { if (this.hasCardTarget) this.cardTarget.classList.remove("hidden") }, this.delayValue) }
+    this._onLeave = () => { clearTimeout(this._timeout); if (this.hasCardTarget) this.cardTarget.classList.add("hidden") }
+    this.element.addEventListener("mouseenter", this._onEnter)
+    this.element.addEventListener("mouseleave", this._onLeave)
+  }
+
+  disconnect() {
+    this.element.removeEventListener("mouseenter", this._onEnter)
+    this.element.removeEventListener("mouseleave", this._onLeave)
+    clearTimeout(this._timeout)
+  }
+}

data/app/javascript/controllers/hotwirebits/rb_hover_gallery_controller.js

@@ -0,0 +1,7 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  connect() {
+    this.element.setAttribute("data-hw-ready", "true")
+  }
+}

data/app/javascript/controllers/hotwirebits/rb_image_compare_controller.js

@@ -0,0 +1,7 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  connect() {
+    this.element.setAttribute("data-hw-ready", "true")
+  }
+}

data/app/javascript/controllers/hotwirebits/rb_image_controller.js

@@ -0,0 +1,7 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  connect() {
+    this.element.setAttribute("data-hw-ready", "true")
+  }
+}

data/app/javascript/controllers/hotwirebits/rb_image_zoom_controller.js

@@ -0,0 +1,7 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  connect() {
+    this.element.setAttribute("data-hw-ready", "true")
+  }
+}

data/app/javascript/controllers/hotwirebits/rb_inline_edit_controller.js

@@ -0,0 +1,7 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  connect() {
+    this.element.setAttribute("data-hw-ready", "true")
+  }
+}

data/app/javascript/controllers/hotwirebits/rb_inplace_controller.js

@@ -0,0 +1,7 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  connect() {
+    this.element.setAttribute("data-hw-ready", "true")
+  }
+}

data/app/javascript/controllers/hotwirebits/rb_input_number_controller.js

@@ -0,0 +1,9 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["input"]
+  static values = { min: { type: Number, default: 0 }, max: { type: Number, default: 100 }, step: { type: Number, default: 1 } }
+
+  increment() { if (this.hasInputTarget) { this.inputTarget.value = Math.min(this.maxValue, (parseFloat(this.inputTarget.value) || 0) + this.stepValue); this.dispatch("change") } }
+  decrement() { if (this.hasInputTarget) { this.inputTarget.value = Math.max(this.minValue, (parseFloat(this.inputTarget.value) || 0) - this.stepValue); this.dispatch("change") } }
+}

data/app/javascript/controllers/hotwirebits/rb_json_input_controller.js

@@ -0,0 +1,7 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  connect() {
+    this.element.setAttribute("data-hw-ready", "true")
+  }
+}

data/app/javascript/controllers/hotwirebits/rb_kanban_controller.js

@@ -0,0 +1,78 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["column", "card"]
+
+  connect() {
+    this.draggedCard = null
+    this._onDragStart = this.onDragStart.bind(this)
+    this._onDragEnd = this.onDragEnd.bind(this)
+    this._onDragOver = this.onDragOver.bind(this)
+    this._onDrop = this.onDrop.bind(this)
+    this._onDragLeave = this.onDragLeave.bind(this)
+
+    this.cardTargets.forEach((card) => {
+      card.setAttribute("draggable", "true")
+      card.addEventListener("dragstart", this._onDragStart)
+      card.addEventListener("dragend", this._onDragEnd)
+    })
+    this.columnTargets.forEach((col) => {
+      col.addEventListener("dragover", this._onDragOver)
+      col.addEventListener("drop", this._onDrop)
+      col.addEventListener("dragleave", this._onDragLeave)
+    })
+  }
+
+  disconnect() {
+    this.cardTargets.forEach((card) => {
+      card.removeEventListener("dragstart", this._onDragStart)
+      card.removeEventListener("dragend", this._onDragEnd)
+    })
+    this.columnTargets.forEach((col) => {
+      col.removeEventListener("dragover", this._onDragOver)
+      col.removeEventListener("drop", this._onDrop)
+      col.removeEventListener("dragleave", this._onDragLeave)
+    })
+    this.draggedCard = null
+  }
+
+  onDragStart(event) {
+    this.draggedCard = event.target
+    event.target.classList.add("dragging")
+    event.dataTransfer.effectAllowed = "move"
+    event.dataTransfer.setData("text/plain", event.target.dataset.id || "")
+  }
+
+  onDragEnd(event) {
+    event.target.classList.remove("dragging")
+    this.columnTargets.forEach((col) => col.classList.remove("drag-over"))
+    this.draggedCard = null
+  }
+
+  onDragOver(event) {
+    event.preventDefault()
+    event.dataTransfer.dropEffect = "move"
+    event.currentTarget.classList.add("drag-over")
+  }
+
+  onDragLeave(event) {
+    event.currentTarget.classList.remove("drag-over")
+  }
+
+  onDrop(event) {
+    event.preventDefault()
+    const column = event.currentTarget
+    column.classList.remove("drag-over")
+    if (this.draggedCard) {
+      const fromColumn = this.draggedCard.parentElement?.dataset.id
+      column.appendChild(this.draggedCard)
+      this.dispatch("move", {
+        detail: {
+          cardId: this.draggedCard.dataset.id,
+          fromColumn: fromColumn,
+          toColumn: column.dataset.id
+        }
+      })
+    }
+  }
+}

data/app/javascript/controllers/hotwirebits/rb_knob_controller.js

@@ -0,0 +1,7 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  connect() {
+    this.element.setAttribute("data-hw-ready", "true")
+  }
+}

data/app/javascript/controllers/hotwirebits/rb_lightbox_controller.js

@@ -0,0 +1,36 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["overlay", "image"]
+  static values = { index: { type: Number, default: 0 } }
+
+  open(event) {
+    this.indexValue = parseInt(event.currentTarget.dataset.index || 0, 10)
+    if (this.hasOverlayTarget) this.overlayTarget.classList.remove("hidden")
+    this.render()
+  }
+
+  close() {
+    if (this.hasOverlayTarget) this.overlayTarget.classList.add("hidden")
+  }
+
+  next() {
+    if (this.hasImageTarget) {
+      this.indexValue = (this.indexValue + 1) % this.imageTargets.length
+      this.render()
+    }
+  }
+
+  prev() {
+    if (this.hasImageTarget) {
+      this.indexValue = (this.indexValue - 1 + this.imageTargets.length) % this.imageTargets.length
+      this.render()
+    }
+  }
+
+  render() {
+    if (this.hasImageTarget) {
+      this.imageTargets.forEach((img, i) => img.classList.toggle("hidden", i !== this.indexValue))
+    }
+  }
+}

data/app/javascript/controllers/hotwirebits/rb_like_controller.js

@@ -0,0 +1,7 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  connect() {
+    this.element.setAttribute("data-hw-ready", "true")
+  }
+}

data/app/javascript/controllers/hotwirebits/rb_listbox_controller.js

@@ -0,0 +1,7 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  connect() {
+    this.element.setAttribute("data-hw-ready", "true")
+  }
+}

data/app/javascript/controllers/hotwirebits/rb_marquee_controller.js

@@ -0,0 +1,68 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["track", "content"]
+  static values = {
+    speed: { type: Number, default: 50 },
+    direction: { type: String, default: "left" },
+    pauseOnHover: { type: Boolean, default: true }
+  }
+
+  connect() {
+    this.animating = true
+    this.position = 0
+    this.lastTime = null
+    this.animate = this.animate.bind(this)
+    this.setup()
+    requestAnimationFrame(this.animate)
+
+    if (this.pauseOnHoverValue) {
+      this._onMouseEnter = () => { this.animating = false }
+      this._onMouseLeave = () => {
+        this.animating = true
+        this.lastTime = null
+        requestAnimationFrame(this.animate)
+      }
+      this.element.addEventListener("mouseenter", this._onMouseEnter)
+      this.element.addEventListener("mouseleave", this._onMouseLeave)
+    }
+  }
+
+  disconnect() {
+    this.animating = false
+    if (this._onMouseEnter) {
+      this.element.removeEventListener("mouseenter", this._onMouseEnter)
+      this.element.removeEventListener("mouseleave", this._onMouseLeave)
+    }
+  }
+
+  setup() {
+    if (!this.hasTrackTarget) return
+    const children = Array.from(this.trackTarget.children)
+    if (children.length === 1) {
+      const clone = children[0].cloneNode(true)
+      clone.setAttribute("aria-hidden", "true")
+      this.trackTarget.appendChild(clone)
+    }
+  }
+
+  animate(time) {
+    if (!this.animating) return
+    if (this.lastTime === null) this.lastTime = time
+    const delta = time - this.lastTime
+    this.lastTime = time
+
+    const direction = this.directionValue === "left" ? -1 : 1
+    this.position += (this.speedValue * delta / 1000) * direction
+
+    const trackWidth = this.trackTarget.scrollWidth / 2
+    if (direction === -1 && Math.abs(this.position) >= trackWidth) {
+      this.position += trackWidth
+    } else if (direction === 1 && this.position >= 0) {
+      this.position -= trackWidth
+    }
+
+    this.trackTarget.style.transform = `translateX(${this.position}px)`
+    requestAnimationFrame(this.animate)
+  }
+}

data/app/javascript/controllers/hotwirebits/rb_menubar_controller.js

@@ -0,0 +1,78 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["item", "submenu"]
+  static values = { activeIndex: { type: Number, default: -1 } }
+
+  connect() {
+    this.handleKeydown = this.handleKeydown.bind(this)
+    this.element.addEventListener("keydown", this.handleKeydown)
+    this.handleOutsideClick = this.handleOutsideClick.bind(this)
+    document.addEventListener("click", this.handleOutsideClick)
+  }
+
+  disconnect() {
+    this.element.removeEventListener("keydown", this.handleKeydown)
+    document.removeEventListener("click", this.handleOutsideClick)
+  }
+
+  activate(event) {
+    const index = this.itemTargets.indexOf(event.currentTarget)
+    this.setActive(index)
+  }
+
+  setActive(index) {
+    this.activeIndexValue = index
+    this.itemTargets.forEach((item, i) => {
+      item.classList.toggle("active", i === index)
+      item.setAttribute("tabindex", i === index ? "0" : "-1")
+    })
+    if (index >= 0) this.itemTargets[index].focus()
+  }
+
+  handleKeydown(event) {
+    const items = this.itemTargets
+    switch (event.key) {
+      case "ArrowRight":
+      case "ArrowDown":
+        event.preventDefault()
+        this.setActive((this.activeIndexValue + 1) % items.length)
+        break
+      case "ArrowLeft":
+      case "ArrowUp":
+        event.preventDefault()
+        this.setActive((this.activeIndexValue - 1 + items.length) % items.length)
+        break
+      case "Home":
+        event.preventDefault()
+        this.setActive(0)
+        break
+      case "End":
+        event.preventDefault()
+        this.setActive(items.length - 1)
+        break
+      case "Enter":
+      case " ":
+        if (this.activeIndexValue >= 0) {
+          event.preventDefault()
+          items[this.activeIndexValue].click()
+        }
+        break
+      case "Escape":
+        this.setActive(-1)
+        this.closeAllSubmenus()
+        break
+    }
+  }
+
+  closeAllSubmenus() {
+    this.submenuTargets.forEach((s) => s.classList.add("hidden"))
+  }
+
+  handleOutsideClick(event) {
+    if (!this.element.contains(event.target)) {
+      this.setActive(-1)
+      this.closeAllSubmenus()
+    }
+  }
+}

data/app/javascript/controllers/hotwirebits/rb_month_picker_controller.js

@@ -0,0 +1,7 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  connect() {
+    this.element.setAttribute("data-hw-ready", "true")
+  }
+}

data/app/javascript/controllers/hotwirebits/rb_month_picker_input_controller.js

@@ -0,0 +1,7 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  connect() {
+    this.element.setAttribute("data-hw-ready", "true")
+  }
+}

data/app/javascript/controllers/hotwirebits/rb_multiselect_controller.js

@@ -0,0 +1,83 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["dropdown", "option", "tag", "input", "hidden"]
+  static values = { selected: { type: Array, default: [] }, open: { type: Boolean, default: false } }
+
+  connect() {
+    this.handleOutsideClick = this.handleOutsideClick.bind(this)
+    document.addEventListener("click", this.handleOutsideClick)
+  }
+
+  disconnect() {
+    document.removeEventListener("click", this.handleOutsideClick)
+  }
+
+  toggle() {
+    this.openValue ? this.close() : this.open()
+  }
+
+  open() {
+    this.openValue = true
+    this.dropdownTarget.classList.remove("hidden")
+  }
+
+  close() {
+    this.openValue = false
+    this.dropdownTarget.classList.add("hidden")
+  }
+
+  select(event) {
+    const value = event.currentTarget.dataset.value
+    if (!this.selectedValue.includes(value)) {
+      this.selectedValue = [...this.selectedValue, value]
+      event.currentTarget.classList.add("selected")
+      this.syncHidden()
+      this.renderTags()
+    } else {
+      this.deselect(value)
+      event.currentTarget.classList.remove("selected")
+    }
+  }
+
+  deselect(value) {
+    this.selectedValue = this.selectedValue.filter((v) => v !== value)
+    this.syncHidden()
+    this.renderTags()
+  }
+
+  removeTag(event) {
+    const value = event.params.value || event.currentTarget.dataset.value
+    this.deselect(value)
+    this.optionTargets.forEach((opt) => {
+      if (opt.dataset.value === value) opt.classList.remove("selected")
+    })
+  }
+
+  renderTags() {
+    this.tagTargets.forEach((tag) => {
+      const value = tag.dataset.value
+      tag.classList.toggle("hidden", !this.selectedValue.includes(value))
+    })
+  }
+
+  syncHidden() {
+    if (!this.hasHiddenTarget) return
+    this.hiddenTarget.innerHTML = ""
+    this.selectedValue.forEach((value) => {
+      const input = document.createElement("input")
+      input.type = "hidden"
+      input.name = this.hiddenTarget.dataset.name || "selected[]"
+      input.value = value
+      this.hiddenTarget.appendChild(input)
+    })
+  }
+
+  handleOutsideClick(event) {
+    if (!this.element.contains(event.target)) this.close()
+  }
+
+  handleKeydown(event) {
+    if (event.key === "Escape") this.close()
+  }
+}