https://snapnsell.ai/assets/controllers/collection_drawer_controller-1033b577.js

1import { Controller } from "@hotwired/stimulus"
2
3export default class extends Controller {
4  static targets = ["editForm"]
5
6  connect() {
7    this.boundDebugClick = this.debugClick.bind(this)
8    this.element.addEventListener("click", this.boundDebugClick, true)
9
10    console.log("[collection-drawer] connect", {
11      element: this.element,
12      shareButtons: this.element.querySelectorAll(".collection-share-toggle").length,
13      editButtons: this.element.querySelectorAll(".collection-edit-toggle").length,
14      editForms: this.editFormTargets.length
15    })
16  }
17
18  disconnect() {
19    this.element.removeEventListener("click", this.boundDebugClick, true)
20    console.log("[collection-drawer] disconnect")
21  }
22
23  toggleEdit(event) {
24    event.preventDefault()
25    event.stopPropagation()
26
27    console.log("[collection-drawer] toggleEdit", event.params.id)
28    const form = this.formFor(event.params.id)
29    if (!form) return
30
31    const shouldShow = form.classList.contains("hidden")
32    this.hideAll()
33
34    if (!shouldShow) return
35
36    form.classList.remove("hidden")
37    const input = form.querySelector("input")
38    input?.focus()
39    input?.select()
40  }
41
42  cancelInlineEdit(event) {
43    event.preventDefault()
44    event.stopPropagation()
45    this.hideAll()
46  }
47
48  hideEdit(event) {
49    event.preventDefault()
50    event.stopPropagation()
51
52    console.log("[collection-drawer] hideEdit", event.params.id)
53    const form = this.formFor(event.params.id)
54    if (!form) return
55
56    form.classList.add("hidden")
57  }
58
59  hideAll() {
60    this.editFormTargets.forEach((form) => {
61      form.classList.add("hidden")
62    })
63  }
64
65  openShare(event) {
66    event.preventDefault()
67    event.stopPropagation()
68
69    const form = event.currentTarget.form
70    if (!form) return
71
72    console.log("[collection-drawer] openShare", {
73      action: form.action,
74      button: event.currentTarget
75    })
76    this.hideAll()
77    document.dispatchEvent(new CustomEvent("ss:close-menus"))
78    document.dispatchEvent(new CustomEvent("ss:open-card", { detail: { showLoading: true, loadingText: "Loading collection sharing..." } }))
79    form.requestSubmit()
80  }
81
82  selectCollection(event) {
83    // Click anywhere on a card (except rename/share/editing inputs) to select it.
84    const ignore = event.target.closest("[data-collection-drawer-ignore-select]")
85    if (ignore) return
86
87    event.preventDefault()
88    const card = event.currentTarget
89    const form = card.querySelector("form.collection-select-form")
90    if (!form) return
91
92    this.hideAll()
93    document.dispatchEvent(new CustomEvent("ss:close-menus"))
94    form.requestSubmit()
95  }
96
97  formFor(id) {
98    return this.editFormTargets.find((form) => form.dataset.collectionId === String(id))
99  }
100
101  submitEdit(event) {
102    event.preventDefault()
103    event.stopPropagation()
104    console.log("[collection-drawer] submitEdit", {
105      value: event.currentTarget.value,
106      action: event.currentTarget.form?.action
107    })
108    event.currentTarget.form?.requestSubmit()
109  }
110
111  debugClick(event) {
112    const shareButton = event.target.closest(".collection-share-toggle")
113    if (shareButton) {
114      console.log("[collection-drawer] native share click", {
115        target: shareButton,
116        action: shareButton.form?.action
117      })
118      return
119    }
120
121    const editButton = event.target.closest(".collection-edit-toggle")
122    if (editButton) {
123      console.log("[collection-drawer] native edit click", editButton)
124    }
125  }
126}