Prevent redefining 'alchemy-menubar' custom element when using Turbo

AlchemyCMS · Nov 22, 2024 · 202aba8 · 202aba8
1 parent a244b6b
commit 202aba8
Showing 1 changed file with 15 additions and 13 deletions.
diff --git a/app/views/alchemy/_menubar.html.erb b/app/views/alchemy/_menubar.html.erb
@@ -112,22 +112,24 @@
     </template>
 
     <script type="module">
-      class Menubar extends HTMLElement {
-        constructor() {
-          super()
-          const template = this.querySelector("template")
-          const attachedShadowRoot = this.attachShadow({ mode: "open" })
-          attachedShadowRoot.appendChild(template.content.cloneNode(true))
-        }
+      if (customElements.get('alchemy-menubar') === undefined) {
+        class Menubar extends HTMLElement {
+          constructor() {
+            super()
+            const template = this.querySelector("template")
+            const attachedShadowRoot = this.attachShadow({ mode: "open" })
+            attachedShadowRoot.appendChild(template.content.cloneNode(true))
+          }
 
-        connectedCallback() {
-          const bar = this.shadowRoot.querySelector(".menubar")
-          const width = bar.offsetWidth
-          bar.style = `--panel-width: ${width}px; --left-offset: calc(var(--icon-size) + 32px);`
+          connectedCallback() {
+            const bar = this.shadowRoot.querySelector(".menubar")
+            const width = bar.offsetWidth
+            bar.style = `--panel-width: ${width}px; --left-offset: calc(var(--icon-size) + 32px);`
+          }
         }
-      }
 
-      customElements.define("alchemy-menubar", Menubar)
+        customElements.define("alchemy-menubar", Menubar)
+      }
     </script>
   </alchemy-menubar>
 <% end %>