squiffy-runtime 6.0.0-alpha.8 → 6.0.0-alpha.9

package/dist/squiffy.runtime.js

@@ -591,9 +591,20 @@ export const init = (options) => {
     function getPassageContent(section, passage) {
         return outputElement.querySelectorAll(`[data-source='[[${section}]][${passage}]']`);
     }
+    function updateElementTextPreservingDisabledPassageLinks(element, text) {
+        // Record which passage links are disabled
+        const disabledPassages = Array.from(element
+            .querySelectorAll("a.link-passage.disabled"))
+            .map((el) => el.getAttribute("data-passage"));
+        element.innerHTML = text;
+        // Re-disable links that were disabled before the update
+        for (const passage of disabledPassages) {
+            const link = element.querySelector(`a.link-passage[data-passage="${passage}"]`);
+            if (link)
+                disableLink(link);
+        }
+    }
     function update(newStory) {
-        // TODO: Re-disable clicked links after update
-        // TODO: Delete empty output blocks
         for (const existingSection of Object.keys(story.sections)) {
             const elements = getSectionContent(existingSection);
             if (elements.length) {
@@ -601,13 +612,14 @@ export const init = (options) => {
                 if (!newSection) {
                     // section has been deleted
                     for (const element of elements) {
-                        element.remove();
+                        const parentOutputSection = element.closest('.squiffy-output-section');
+                        parentOutputSection.remove();
                     }
                 }
                 else if (newSection.text && newSection.text != story.sections[existingSection].text) {
                     // section has been updated
                     for (const element of elements) {
-                        element.innerHTML = ui.processText(newSection.text);
+                        updateElementTextPreservingDisabledPassageLinks(element, newSection.text);
                     }
                 }
             }
@@ -621,13 +633,14 @@ export const init = (options) => {
                 if (!newPassage) {
                     // passage has been deleted
                     for (const element of elements) {
-                        element.remove();
+                        const parentOutputBlock = element.closest('.squiffy-output-block');
+                        parentOutputBlock.remove();
                     }
                 }
                 else if (newPassage.text && newPassage.text != story.sections[existingSection].passages[existingPassage].text) {
                     // passage has been updated
                     for (const element of elements) {
-                        element.innerHTML = ui.processText(newPassage.text);
+                        updateElementTextPreservingDisabledPassageLinks(element, newPassage.text);
                     }
                 }
             }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "squiffy-runtime",
-  "version": "6.0.0-alpha.8",
+  "version": "6.0.0-alpha.9",
   "main": "dist/squiffy.runtime.js",
   "types": "dist/squiffy.runtime.d.ts",
   "scripts": {

package/src/__snapshots__/squiffy.runtime.test.ts.snap

@@ -60,7 +60,7 @@ exports[`Delete passage 1`] = `
 
 exports[`Delete passage 2`] = `
 "
-    <div class="squiffy-output-section" id="squiffy-section-1" data-section="_default"><div class="squiffy-output-block"><div data-source="[[_default]]"><p>Click this: <a class="squiffy-link link-passage disabled" data-passage="a" role="link" tabindex="-1">a</a></p></div></div><div class="squiffy-output-block"></div></div>"
+    <div class="squiffy-output-section" id="squiffy-section-1" data-section="_default"><div class="squiffy-output-block"><div data-source="[[_default]]"><p>Click this: <a class="squiffy-link link-passage disabled" data-passage="a" role="link" tabindex="-1">a</a></p></div></div></div>"
 `;
 
 exports[`Delete section 1`] = `
@@ -70,7 +70,7 @@ exports[`Delete section 1`] = `
 
 exports[`Delete section 2`] = `
 "
-    <div class="squiffy-output-section" id="squiffy-section-1" data-section="_default"><div class="squiffy-output-block"><div data-source="[[_default]]"><p>Click this: <a class="squiffy-link link-section" data-section="a" role="link" tabindex="0">a</a></p></div></div></div><div class="squiffy-output-section" id="squiffy-section-2" data-section="a"><div class="squiffy-output-block"></div></div>"
+    <div class="squiffy-output-section" id="squiffy-section-1" data-section="_default"><div class="squiffy-output-block"><div data-source="[[_default]]"><p>Click this: <a class="squiffy-link link-section" data-section="a" role="link" tabindex="0">a</a></p></div></div></div>"
 `;
 
 exports[`Update default section output 1`] = `

package/src/squiffy.runtime.test.ts

@@ -61,7 +61,9 @@ const initScript = async (script: string) => {
 };
 
 const findLink = (element: HTMLElement, linkType: string, linkText: string, onlyEnabled: boolean = false) => {
-    const links = element.querySelectorAll(`.squiffy-output-section:last-child a.squiffy-link.link-${linkType}`);
+    const links = onlyEnabled
+        ? element.querySelectorAll(`.squiffy-output-section:last-child a.squiffy-link.link-${linkType}`)
+        : element.querySelectorAll(`a.squiffy-link.link-${linkType}`);
     return Array.from(links).find(link => link.textContent === linkText && (onlyEnabled ? !link.classList.contains("disabled") : true)) as HTMLElement;
 };
 
@@ -290,4 +292,42 @@ New passage`);
     expect(passageOutput).toBeNull();
 
     expect(element.innerHTML).toMatchSnapshot();
+});
+
+test('Clicked passage links remain disabled after an update', async () => {
+    const { squiffyApi, element } = await initScript(`Click one of these: [a] [b]
+
+[a]:
+Output for passage A.
+
+[b]:
+Output for passage B.`);
+
+    // click linkA
+    
+    let linkA = findLink(element, 'passage', 'a');
+    expect(linkA.classList).not.toContain('disabled');
+    expect(squiffyApi.clickLink(linkA)).toBe(true);
+
+    const updated = await compile(`Click one of these (updated): [a] [b]
+
+[a]:
+Output for passage A.
+
+[b]:
+Output for passage B.`);
+
+    squiffyApi.update(updated.story);
+
+    // linkA should still be disabled
+
+    linkA = findLink(element, 'passage', 'a');
+    expect(linkA.classList).toContain('disabled');
+    expect(squiffyApi.clickLink(linkA)).toBe(false);
+
+    // linkB should still be enabled
+
+    let linkB = findLink(element, 'passage', 'b');
+    expect(linkB.classList).not.toContain('disabled');
+    expect(squiffyApi.clickLink(linkB)).toBe(true);
 });

package/src/squiffy.runtime.ts

@@ -691,10 +691,22 @@ export const init = (options: SquiffyInitOptions): SquiffyApi => {
         return outputElement.querySelectorAll(`[data-source='[[${section}]][${passage}]']`);
     }
 
-    function update(newStory: Story) {
-        // TODO: Re-disable clicked links after update
-        // TODO: Delete empty output blocks
+    function updateElementTextPreservingDisabledPassageLinks(element: Element, text: string) {
+        // Record which passage links are disabled
+        const disabledPassages = Array.from(element
+            .querySelectorAll("a.link-passage.disabled"))
+            .map((el: HTMLElement) => el.getAttribute("data-passage"));
+
+        element.innerHTML = text;
+
+        // Re-disable links that were disabled before the update
+        for (const passage of disabledPassages) {
+            const link = element.querySelector(`a.link-passage[data-passage="${passage}"]`);
+            if (link) disableLink(link);
+        }
+    }
 
+    function update(newStory: Story) {
         for (const existingSection of Object.keys(story.sections)) {
             const elements = getSectionContent(existingSection);
             if (elements.length) {
@@ -702,13 +714,14 @@ export const init = (options: SquiffyInitOptions): SquiffyApi => {
                 if (!newSection) {
                     // section has been deleted
                     for (const element of elements) {
-                        element.remove();
+                        const parentOutputSection = element.closest('.squiffy-output-section');
+                        parentOutputSection.remove();
                     }
                 }
                 else if (newSection.text && newSection.text != story.sections[existingSection].text) {
                     // section has been updated
                     for (const element of elements) {
-                        element.innerHTML = ui.processText(newSection.text);
+                        updateElementTextPreservingDisabledPassageLinks(element, newSection.text);
                     }
                 }
             }
@@ -723,13 +736,14 @@ export const init = (options: SquiffyInitOptions): SquiffyApi => {
                 if (!newPassage) {
                     // passage has been deleted
                     for (const element of elements) {
-                        element.remove();
+                        const parentOutputBlock = element.closest('.squiffy-output-block');
+                        parentOutputBlock.remove();
                     }
                 }
                 else if (newPassage.text && newPassage.text != story.sections[existingSection].passages[existingPassage].text) {
                     // passage has been updated
                     for (const element of elements) {
-                        element.innerHTML = ui.processText(newPassage.text);
+                        updateElementTextPreservingDisabledPassageLinks(element, newPassage.text);
                     }
                 }
             }