Archive snapshots of websites locally (#672)

* Add basic HTML snapshots

* Implement asset list

* Add snapshot creation tests

* Add deletion tests

* Show file size

* Remove snapshots

* Create new snapshots

* Switch to single-file

* CSS tweak

* Remove auto refresh

* Show delete link when there is no file yet

* Add current date to display name

* Add flag for snapshot support

* Add option for disabling automatic snapshots

* Make snapshots sharable

* Document image variants

* Update README.md

* Add migrations

* Fix tests

bookmarks/frontend/behaviors/bookmark-details.js

@@ -1,38 +0,0 @@
-import { registerBehavior } from "./index";
-
-class BookmarkDetails {
-  constructor(element) {
-    this.form = element.querySelector(".status form");
-    if (!this.form) {
-      // Form may not exist if user does not own the bookmark
-      return;
-    }
-    this.form.addEventListener("submit", (event) => {
-      event.preventDefault();
-      this.submitForm();
-    });
-
-    const inputs = this.form.querySelectorAll("input");
-    inputs.forEach((input) => {
-      input.addEventListener("change", () => {
-        this.submitForm();
-      });
-    });
-  }
-
-  async submitForm() {
-    const url = this.form.action;
-    const formData = new FormData(this.form);
-
-    await fetch(url, {
-      method: "POST",
-      body: formData,
-      redirect: "manual", // ignore redirect
-    });
-
-    // Refresh bookmark page if it exists
-    document.dispatchEvent(new CustomEvent("bookmark-page-refresh"));
-  }
-}
-
-registerBehavior("ld-bookmark-details", BookmarkDetails);

bookmarks/frontend/behaviors/bookmark-page.js

@@ -1,4 +1,4 @@
-import { registerBehavior, swap } from "./index";
+import { registerBehavior, swapContent } from "./index";
 
 class BookmarkPage {
   constructor(element) {
@@ -37,8 +37,8 @@ class BookmarkPage {
       fetch(`${bookmarksUrl}${query}`).then((response) => response.text()),
       fetch(`${tagsUrl}${query}`).then((response) => response.text()),
     ]).then(([bookmarkListHtml, tagCloudHtml]) => {
-      swap(this.bookmarkList, bookmarkListHtml);
-      swap(this.tagCloud, tagCloudHtml);
+      swapContent(this.bookmarkList, bookmarkListHtml);
+      swapContent(this.tagCloud, tagCloudHtml);
 
       // Dispatch list updated event
       const listElement = this.bookmarkList.querySelector(

bookmarks/frontend/behaviors/form.js

@@ -0,0 +1,54 @@
+import { registerBehavior, swap } from "./index";
+
+class FormBehavior {
+  constructor(element) {
+    this.element = element;
+    element.addEventListener("submit", this.onFormSubmit.bind(this));
+  }
+
+  async onFormSubmit(event) {
+    event.preventDefault();
+
+    const url = this.element.action;
+    const formData = new FormData(this.element);
+    if (event.submitter) {
+      formData.append(event.submitter.name, event.submitter.value);
+    }
+
+    await fetch(url, {
+      method: "POST",
+      body: formData,
+      redirect: "manual", // ignore redirect
+    });
+
+    // Dispatch refresh events
+    const refreshEvents = this.element.getAttribute("refresh-events");
+    if (refreshEvents) {
+      refreshEvents.split(",").forEach((eventName) => {
+        document.dispatchEvent(new CustomEvent(eventName));
+      });
+    }
+
+    // Refresh form
+    await this.refresh();
+  }
+
+  async refresh() {
+    const refreshUrl = this.element.getAttribute("refresh-url");
+    const html = await fetch(refreshUrl).then((response) => response.text());
+    swap(this.element, html);
+  }
+}
+
+class FormAutoSubmitBehavior {
+  constructor(element) {
+    this.element = element;
+    this.element.addEventListener("change", () => {
+      const form = this.element.closest("form");
+      form.dispatchEvent(new Event("submit", { cancelable: true }));
+    });
+  }
+}
+
+registerBehavior("ld-form", FormBehavior);
+registerBehavior("ld-form-auto-submit", FormAutoSubmitBehavior);

bookmarks/frontend/behaviors/index.js

@@ -12,7 +12,14 @@ export function applyBehaviors(container, behaviorNames = null) {
 
   behaviorNames.forEach((behaviorName) => {
     const behavior = behaviorRegistry[behaviorName];
-    const elements = container.querySelectorAll(`[${behaviorName}]`);
+    const elements = Array.from(
+      container.querySelectorAll(`[${behaviorName}]`),
+    );
+
+    // Include the container element if it has the behavior
+    if (container.hasAttribute && container.hasAttribute(behaviorName)) {
+      elements.push(container);
+    }
 
     elements.forEach((element) => {
       element.__behaviors = element.__behaviors || [];
@@ -31,6 +38,13 @@ export function applyBehaviors(container, behaviorNames = null) {
 }
 
 export function swap(element, html) {
+  const dom = new DOMParser().parseFromString(html, "text/html");
+  const newElement = dom.body.firstChild;
+  element.replaceWith(newElement);
+  applyBehaviors(newElement);
+}
+
+export function swapContent(element, html) {
   element.innerHTML = html;
   applyBehaviors(element);
 }

bookmarks/frontend/index.js

@@ -1,8 +1,8 @@
-import "./behaviors/bookmark-details";
 import "./behaviors/bookmark-page";
 import "./behaviors/bulk-edit";
 import "./behaviors/confirm-button";
 import "./behaviors/dropdown";
+import "./behaviors/form";
 import "./behaviors/modal";
 import "./behaviors/global-shortcuts";
 import "./behaviors/tag-autocomplete";