Fix preview actions

bas080 · Jun 27, 2024 · 3025d46 · 3025d46
1 parent f0a3a4a
commit 3025d46
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 34 deletions.
diff --git a/lit-component.mjs b/lit-component.mjs
@@ -149,7 +149,7 @@ const emitAction =
     event.target.dispatchEvent(customEvent);
   };
 
-const onAction = (actions) =>
+export const onAction = (actions) =>
   function (event) {
     this.querySelectorAll("details").forEach((details) => {
       details.open = false;
@@ -215,39 +215,41 @@ const toplist = {
 
   items: (vm) => vm.items.map(toplist.item(vm)),
 
-  list: (vm) => (list, listIndex) => {
-    vm = {
-      ...vm,
-      ...list,
-      isTopList: listIndex === 0,
-      listIndex,
-    };
+  list:
+    (vm) =>
+    (list, listIndex = 0) => {
+      vm = {
+        ...vm,
+        ...list,
+        isTopList: vm.isTopList ?? listIndex === 0,
+        listIndex,
+      };
 
-    return html`<article class="list">
-      ${when(
-        vm.isTopList,
-        () =>
-          html` <h1 id="toplist">${tr("appTitle")}</h1>
-            <form @submit="${emitAction("addItem", vm)}">
-              <label>${tr("newItem")}</label>
-              <input required id="addItemInput" />
-              <input type="submit" value="${tr("addItem")}" />
-            </form>`,
-      )}
-
-      <ul>
-        ${toplist.items(vm)}
-      </ul>
-      <details>
-        <summary>${tr("listActions")}</summary>
+      return html`<article class="list">
+        ${when(
+          vm.isTopList,
+          () =>
+            html` <h1 id="toplist">${tr("appTitle")}</h1>
+              <form @submit="${emitAction("addItem", vm)}">
+                <label>${tr("newItem")}</label>
+                <input required id="addItemInput" />
+                <input type="submit" value="${tr("addItem")}" />
+              </form>`,
+        )}
 
-        ${when(vm.isTopList, () => toplist.action(vm, "newList", svg.plus))}
-        ${when(!vm.isTopList, () => toplist.action(vm, "raise", svg.up))}
-        ${toplist.action(vm, "shareList", svg.share)}
-        ${toplist.action(vm, "qrShareList", svg.qr)}
-      </details>
-    </article> `;
-  },
+        <ul>
+          ${toplist.items(vm)}
+        </ul>
+        <details>
+          <summary>${tr("listActions")}</summary>
+
+          ${when(vm.isTopList, () => toplist.action(vm, "newList", svg.plus))}
+          ${when(!vm.isTopList, () => toplist.action(vm, "raise", svg.up))}
+          ${toplist.action(vm, "shareList", svg.share)}
+          ${toplist.action(vm, "qrShareList", svg.qr)}
+        </details>
+      </article> `;
+    },
 
   lists: (vm) => vm.lists.map(toplist.list(vm)),
 };

diff --git a/toplist.mjs b/toplist.mjs
@@ -12,7 +12,7 @@ import {
   tryReject,
   moveItemToTop,
 } from "./util.mjs";
-import { toplist } from "./lit-component.mjs";
+import { toplist, onAction } from "./lit-component.mjs";
 
 const openQRCode = (items) => {
   const url = shareUrl(items);
@@ -257,7 +257,9 @@ tryReject(async function () {
 
   if (items) {
     render(
-      list(false)({ created: new Date().toISOString(), items }, 0),
+      html`<div @action="${onAction(actions)}">
+        ${toplist.list({ isTopList: false })({ items })}
+      </div>`,
       window.preview,
     );