@seamlet/astro 0.5.0 → 0.5.1

package/README.md

@@ -164,7 +164,7 @@ A reference to a record removed since is kept, with the issue `missing-record`:
 
 ## What the page hides
 
-A field is edited where it is seen, so the editor opens what hides it when a person chooses it in the list of fields. A native `<details>` needs nothing: a click on its summary opens it in the editor too. A part the site hides and shows by itself (its own accordion, a step of a quiz, a dialog, a tab) gets the attribute `data-cms-reveal` (`REVEAL_ATTRIBUTE`). When a field inside it is chosen, the bridge sets `data-cms-revealed` on it and sends it the event `cms:reveal`, which bubbles; the site shows the part with CSS or with its own script:
+A field is edited where it is seen, so the editor opens what hides it when a person chooses it in the list of fields. A native `<details>` needs nothing: a click on its summary opens it in the editor too. Neither do tabs, filters and toggles made of radio buttons and checkboxes and shown with CSS: a click on one or its label flips it in the editor, and the page keeps it flipped after every edit. A part the site hides and shows by itself (its own accordion, a step of a quiz, a dialog, a tab) gets the attribute `data-cms-reveal` (`REVEAL_ATTRIBUTE`). When a field inside it is chosen, the bridge sets `data-cms-revealed` on it and sends it the event `cms:reveal`, which bubbles; the site shows the part with CSS or with its own script:
 
 ```css
 [data-cms-reveal][data-cms-revealed] {

package/dist/bridge.js

@@ -62,6 +62,7 @@ function asElement(value) {
 // src/bridge/page-reveals.ts
 var DETAILS_SELECTOR = "details";
 var REVEAL_SELECTOR = `[${REVEAL_ATTRIBUTE}]`;
+var SWITCH_SELECTOR = 'input[type="radio"], input[type="checkbox"]';
 function revealAround(element) {
   for (let part = element; part !== null; ) {
     if (isDetails(part)) part.open = true;
@@ -78,14 +79,28 @@ function toggleDetailsAt(target, isOnField) {
   }
   if (!isOnField) details.open = false;
 }
+function flipSwitchAt(target, isOnField) {
+  const control = switchAround(target);
+  if (control === void 0) return;
+  const isRadio = control.type === "radio";
+  const isFlipped = isRadio ? !control.checked : !isOnField;
+  if (!isFlipped) return;
+  control.checked = isRadio || !control.checked;
+  announceSwitch(control);
+}
 function revealedPartsOf(document2) {
   const details = [...document2.querySelectorAll(DETAILS_SELECTOR)];
   const parts = [...document2.querySelectorAll(REVEAL_SELECTOR)];
+  const switches = [...document2.querySelectorAll(SWITCH_SELECTOR)];
   return {
     openDetails: indexesWhere(details, (part) => isDetails(part) && part.open),
     revealed: indexesWhere(
       parts,
       (part) => part.hasAttribute(REVEALED_ATTRIBUTE)
+    ),
+    flippedSwitches: indexesWhere(
+      switches,
+      (control) => isSwitch(control) && control.checked !== control.defaultChecked
     )
   };
 }
@@ -100,6 +115,26 @@ function restoreRevealedParts(document2, revealed) {
     const part = parts[index];
     if (part !== void 0) reveal(part);
   }
+  restoreSwitches(document2, revealed.flippedSwitches);
+}
+function restoreSwitches(document2, flipped) {
+  const switches = [...document2.querySelectorAll(SWITCH_SELECTOR)];
+  for (const index of flipped) {
+    const control = switches[index];
+    if (control === void 0 || !isSwitch(control)) continue;
+    control.checked = !control.defaultChecked;
+    announceSwitch(control);
+  }
+}
+function announceSwitch(control) {
+  control.dispatchEvent(new Event("input", { bubbles: true }));
+  control.dispatchEvent(new Event("change", { bubbles: true }));
+}
+function switchAround(target) {
+  if (!isElement(target)) return void 0;
+  const label = target.closest("label");
+  const control = isLabel(label) ? label.control : target;
+  return control !== null && isSwitch(control) ? control : void 0;
 }
 function reveal(part) {
   if (part.hasAttribute(REVEALED_ATTRIBUTE)) return;
@@ -120,6 +155,12 @@ function indexesWhere(elements, isPicked) {
 function isDetails(element) {
   return element.localName === "details";
 }
+function isLabel(element) {
+  return element?.localName === "label";
+}
+function isSwitch(element) {
+  return element.matches(SWITCH_SELECTOR);
+}
 function isElement(value) {
   return value !== null && "nodeType" in value && value.nodeType === Node.ELEMENT_NODE;
 }
@@ -147,7 +188,9 @@ function listenToPage(document2, listeners) {
       return;
     }
     const marked = markedElementAround(event.target);
-    toggleDetailsAt(event.target, marked !== void 0);
+    const isOnField = marked !== void 0;
+    toggleDetailsAt(event.target, isOnField);
+    flipSwitchAt(event.target, isOnField);
     listeners.onClick(
       marked === void 0 ? void 0 : { ...marked, point: { x: event.clientX, y: event.clientY } }
     );
@@ -194,6 +237,8 @@ function listenToPage(document2, listeners) {
     ["scroll", listeners.onLayoutChange],
     // An opened or closed `<details>` moves what is below it; toggle does not bubble.
     ["toggle", listeners.onLayoutChange],
+    // A flipped switch shows and hides parts of the page.
+    ["change", listeners.onLayoutChange],
     // Images load after the page is shown and move what is below them; load does not bubble.
     ["load", listeners.onLayoutChange]
   ];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seamlet/astro",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "description": "Connects an Astro site to the Seamlet CMS: the schema of its content, the preview the editor frames, and its published content.",
   "license": "MIT",
   "type": "module",