page.js in lookbook-0.7.0

- old
+ new
@@ -1,47 +1,25 @@
-import createSocket from "../lib/socket";
-
-const morphOpts = {
-  key(el) {
-    return el.getAttribute("key") ? el.getAttribute("key") : el.id;
-  },
-  updating(el, toEl, childrenOnly, skip) {
-    if (
-      el.getAttribute &&
-      el.getAttribute("data-morph-strategy") === "replace"
-    ) {
-      el.innerHTML = toEl.innerHTML;
-      return skip();
-    }
-  },
-  lookahead: true,
-};
-
 export default function page() {
   return {
-    init() {
-      const socket = createSocket(window.SOCKET_PATH);
-      socket.addListener("Lookbook::ReloadChannel", () => this.refresh());
+    init() {},
+    scrollToTop() {
+      this.$refs.scroller.scrollTop = 0;
     },
-    async update() {
-      const response = await fetch(window.document.location);
-      if (!response.ok) return window.location.reload();
-      const html = await response.text();
-      const newDoc = new DOMParser().parseFromString(html, "text/html");
-      this.morph(newDoc);
-      document.title = newDoc.title;
+    checkForNavigation(event) {
+      const link = event.target.closest("a[href]");
+      if (
+        link &&
+        !isExternalLink(link.href) &&
+        link.getAttribute("target") !== "_blank"
+      ) {
+        event.preventDefault();
+        this.setLocation(link.href);
+      }
     },
-    setLocation(loc) {
-      const path = loc instanceof Event ? loc.currentTarget.href : loc;
-      history.pushState({}, null, path);
-      this.$dispatch("popstate");
-    },
-    refresh() {
-      this.$dispatch("popstate");
-    },
-    morph(dom) {
-      const pageHtml = dom.getElementById(this.$root.id).outerHTML;
-      Alpine.morph(this.$root, pageHtml, morphOpts);
-      this.$dispatch("page:morphed");
-    },
   };
+}
+
+function isExternalLink(url) {
+  const tmp = document.createElement("a");
+  tmp.href = url;
+  return tmp.host !== window.location.host;
 }