Precompile alchem/preview.js

app/assets/config/alchemy_manifest.js

@@ -1,5 +1,4 @@
 //= link alchemy/admin/all.js
-//= link alchemy/preview.js
 //= link_tree ../builds/alchemy/
 //= link_tree ../images/alchemy/
 //= link_tree ../../../vendor/assets/fonts/

app/javascript/preview.js

@@ -0,0 +1,117 @@
+window.Alchemy = Alchemy || {}
+
+Object.assign(Alchemy, {
+  ElementSelector: {
+    styles: {
+      reset: {
+        outline: "",
+        "outline-offset": "",
+        cursor: ""
+      },
+      hover: {
+        outline: "2px dashed #f0b437",
+        "outline-offset": "4px",
+        cursor: "pointer"
+      },
+      selected: {
+        outline: "2px dashed #90b9d0",
+        "outline-offset": "4px"
+      }
+    },
+
+    init() {
+      window.addEventListener("message", (event) => {
+        switch (event.data.message) {
+          case "Alchemy.blurElements":
+            this.blurElements()
+            break
+          case "Alchemy.focusElement":
+            this.focusElement(event.data)
+            break
+          default:
+            console.info("Received unknown message!", event.data)
+        }
+      })
+      this.elements = Array.from(
+        document.querySelectorAll("[data-alchemy-element]")
+      )
+      this.elements.forEach((element) => {
+        element.addEventListener("mouseover", () => {
+          if (!element.classList.contains("selected")) {
+            Object.assign(element.style, this.getStyle("hover"))
+          }
+        })
+        element.addEventListener("mouseout", () => {
+          if (!element.classList.contains("selected")) {
+            Object.assign(element.style, this.getStyle("reset"))
+          }
+        })
+        element.addEventListener("click", (e) => {
+          e.stopPropagation()
+          e.preventDefault()
+          this.selectElement(element)
+          this.focusElementEditor(element)
+        })
+      })
+    },
+
+    // Mark element in preview frame as selected and scrolls to it.
+    selectElement(element) {
+      this.blurElements(element)
+      element.classList.add("selected")
+      Object.assign(element.style, this.getStyle("selected"))
+      element.scrollIntoView({
+        behavior: "smooth",
+        block: "start"
+      })
+    },
+
+    // Blur all elements in preview frame.
+    blurElements(selectedElement) {
+      this.elements.forEach((element) => {
+        if (element !== selectedElement) {
+          element.classList.remove("selected")
+          Object.assign(element.style, this.getStyle("reset"))
+        }
+      })
+    },
+
+    // Focus the element in the Alchemy preview window.
+    focusElement(data) {
+      const element = this.getElement(data.element_id)
+      if (element) {
+        return this.selectElement(element)
+      } else {
+        return console.warn("Could not focus element with id", data.element_id)
+      }
+    },
+
+    getElement(element_id) {
+      return this.elements.find(
+        (element) => element.dataset.alchemyElement === element_id.toString()
+      )
+    },
+
+    // Focus the element editor in the Alchemy element window.
+    focusElementEditor(element) {
+      const element_id = element.dataset.alchemyElement
+      window.parent.postMessage(
+        {
+          message: "Alchemy.focusElementEditor",
+          element_id
+        },
+        window.location.origin
+      )
+    },
+
+    getStyle(state) {
+      if (state === "reset") {
+        return this.styles["reset"]
+      } else {
+        return this.styles[state]
+      }
+    }
+  }
+})
+
+Alchemy.ElementSelector.init()

app/views/alchemy/_preview_mode_code.html.erb

@@ -2,5 +2,5 @@
   <script type="text/javascript">
     Alchemy = { locale: "<%= session[:alchemy_locale] %>" };
   </script>
-  <%= javascript_include_tag("alchemy/preview") %>
+  <%= javascript_include_tag("alchemy/preview.min") %>
 <% end %>

rollup.config.mjs

@@ -74,5 +74,13 @@ export default [
       commonjs(),
       terser()
     ]
+  },
+  {
+    input: "app/javascript/preview.js",
+    output: {
+      file: "app/assets/builds/alchemy/preview.min.js"
+    },
+    context: "window",
+    plugins: [terser()]
   }
 ]