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

package/dist/squiffy.runtime.d.ts

@@ -14,7 +14,7 @@ export interface SquiffyApi {
     restart: () => void;
     get: (attribute: string) => any;
     set: (attribute: string, value: any) => void;
-    clickLink: (link: HTMLElement) => void;
+    clickLink: (link: HTMLElement) => boolean;
     update: (story: Story) => void;
 }
 interface SquiffyJsFunctionApi {

package/dist/squiffy.runtime.js

@@ -31,8 +31,11 @@ export const init = (options) => {
         return JSON.parse(result);
     }
     function handleLink(link) {
+        const outputSection = link.closest('.squiffy-output-section');
+        if (outputSection !== currentSectionElement)
+            return false;
         if (link.classList.contains('disabled'))
-            return;
+            return false;
         let passage = link.getAttribute('data-passage');
         let section = link.getAttribute('data-section');
         const rotateAttr = link.getAttribute('data-rotate');
@@ -55,15 +58,16 @@ export const init = (options) => {
                     showPassage('@last');
                 }
             }
+            return true;
         }
-        else if (section) {
-            disableLink(link);
+        if (section) {
             section = processLink(section);
             if (section) {
                 go(section);
             }
+            return true;
         }
-        else if (rotateOrSequenceAttr) {
+        if (rotateOrSequenceAttr) {
             const result = rotate(rotateOrSequenceAttr, rotateAttr ? link.innerText : '');
             link.innerHTML = result[0].replace(/"/g, '"').replace(/'/g, '\'');
             const dataAttribute = rotateAttr ? 'data-rotate' : 'data-sequence';
@@ -76,7 +80,9 @@ export const init = (options) => {
                 set(attribute, result[0]);
             }
             save();
+            return true;
         }
+        return false;
     }
     function handleClick(event) {
         const target = event.target;
@@ -88,9 +94,6 @@ export const init = (options) => {
         link.classList.add('disabled');
         link.setAttribute('tabindex', '-1');
     }
-    function disableLinks(links) {
-        links.forEach(disableLink);
-    }
     function begin() {
         if (!load()) {
             go(story.start);
@@ -336,7 +339,6 @@ export const init = (options) => {
     }
     function newSection(sectionName) {
         if (currentSectionElement) {
-            disableLinks(currentSectionElement.querySelectorAll('.squiffy-link'));
             currentSectionElement.querySelectorAll('input').forEach(el => {
                 const attribute = el.getAttribute('data-attribute') || el.id;
                 if (attribute)
@@ -589,8 +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
         for (const existingSection of Object.keys(story.sections)) {
             const elements = getSectionContent(existingSection);
             if (elements.length) {
@@ -598,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);
                     }
                 }
             }
@@ -618,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,9 +1,10 @@
 {
   "name": "squiffy-runtime",
-  "version": "6.0.0-alpha.7",
+  "version": "6.0.0-alpha.9",
   "main": "dist/squiffy.runtime.js",
   "types": "dist/squiffy.runtime.d.ts",
   "scripts": {
+    "dev": "vitest",
     "test": "vitest --run",
     "build": "tsc",
     "prepublishOnly": "npm run build && npm run test"

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

@@ -45,12 +45,12 @@ exports[`Click a section link 2`] = `
 "
     <div class="squiffy-output-section" id="squiffy-section-1" data-section="Introduction"><div class="squiffy-output-block"><div data-source="[[Introduction]]"><h1>Squiffy Test</h1>
 <p>This is <a href="http://textadventures.co.uk">a website link</a>.</p>
-<p>This should be <a class="squiffy-link link-passage disabled" data-passage="passage" role="link" tabindex="-1">a link to a passage</a>. Here's <a class="squiffy-link link-passage disabled" data-passage="passage2" role="link" tabindex="-1">another one</a>.</p>
-<p>You don't need to specify a name - for example, this <a class="squiffy-link link-passage disabled" data-passage="link" role="link" tabindex="-1">link</a> and this <a class="squiffy-link link-section disabled" data-section="section" role="link" tabindex="-1">section</a>.</p>
-<p>And this goes to the <a class="squiffy-link link-section disabled" data-section="section2" role="link" tabindex="-1">next section</a>.</p>
-<p>This line has links to <a class="squiffy-link link-section disabled" data-section="section 3" role="link" tabindex="-1">section 3</a> and <a class="squiffy-link link-section disabled" data-section="section four" role="link" tabindex="-1">section 4</a>.</p>
-<p>This line has links to <a class="squiffy-link link-passage disabled" data-passage="passage 3" role="link" tabindex="-1">passage 3</a> and <a class="squiffy-link link-passage disabled" data-passage="passage four" role="link" tabindex="-1">passage 4</a>.</p>
-<p>Oh look - <a class="squiffy-link link-passage disabled" data-passage="it's a passage with an apostrophe" role="link" tabindex="-1">it's a passage with an apostrophe</a>.</p></div></div></div><div class="squiffy-output-section" id="squiffy-section-2" data-section="section 3"><div class="squiffy-output-block"><div data-source="[[section 3]]"><p>Another section is here.</p></div></div></div>"
+<p>This should be <a class="squiffy-link link-passage" data-passage="passage" role="link" tabindex="0">a link to a passage</a>. Here's <a class="squiffy-link link-passage" data-passage="passage2" role="link" tabindex="0">another one</a>.</p>
+<p>You don't need to specify a name - for example, this <a class="squiffy-link link-passage" data-passage="link" role="link" tabindex="0">link</a> and this <a class="squiffy-link link-section" data-section="section" role="link" tabindex="0">section</a>.</p>
+<p>And this goes to the <a class="squiffy-link link-section" data-section="section2" role="link" tabindex="0">next section</a>.</p>
+<p>This line has links to <a class="squiffy-link link-section" data-section="section 3" role="link" tabindex="0">section 3</a> and <a class="squiffy-link link-section" data-section="section four" role="link" tabindex="0">section 4</a>.</p>
+<p>This line has links to <a class="squiffy-link link-passage" data-passage="passage 3" role="link" tabindex="0">passage 3</a> and <a class="squiffy-link link-passage" data-passage="passage four" role="link" tabindex="0">passage 4</a>.</p>
+<p>Oh look - <a class="squiffy-link link-passage" data-passage="it's a passage with an apostrophe" role="link" tabindex="0">it's a passage with an apostrophe</a>.</p></div></div></div><div class="squiffy-output-section" id="squiffy-section-2" data-section="section 3"><div class="squiffy-output-block"><div data-source="[[section 3]]"><p>Another section is here, with passages <a class="squiffy-link link-passage" data-passage="a" role="link" tabindex="0">a</a> and <a class="squiffy-link link-passage" data-passage="b" role="link" tabindex="0">b</a>.</p></div></div></div>"
 `;
 
 exports[`Delete passage 1`] = `
@@ -60,17 +60,17 @@ 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`] = `
 "
-    <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 disabled" data-section="a" role="link" tabindex="-1">a</a></p></div></div></div><div class="squiffy-output-section" id="squiffy-section-2" data-section="a"><div class="squiffy-output-block"><div data-source="[[a]]"><p>New section</p></div></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><div class="squiffy-output-section" id="squiffy-section-2" data-section="a"><div class="squiffy-output-block"><div data-source="[[a]]"><p>New section</p></div></div></div>"
 `;
 
 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 disabled" data-section="a" role="link" tabindex="-1">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(`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;
 };
 
@@ -100,13 +102,14 @@ test('Click a section link', async () => {
     expect(linkToPassage).not.toBeNull();
     expect(section3Link).not.toBeNull();
     expect(linkToPassage.classList).not.toContain('disabled');
-    expect(section3Link.classList).not.toContain('disabled');
 
-    squiffyApi.clickLink(section3Link);
+    const handled = squiffyApi.clickLink(section3Link);
+    expect(handled).toBe(true);
 
-    expect(linkToPassage.classList).toContain('disabled');
-    expect(section3Link.classList).toContain('disabled');
     expect(element.innerHTML).toMatchSnapshot();
+
+    // passage link is from the previous section, so should be unclickable
+    expect(squiffyApi.clickLink(linkToPassage)).toBe(false);
 });
 
 test('Click a passage link', async () => {
@@ -121,13 +124,15 @@ test('Click a passage link', async () => {
     expect(linkToPassage).not.toBeNull();
     expect(section3Link).not.toBeNull();
     expect(linkToPassage.classList).not.toContain('disabled');
-    expect(section3Link.classList).not.toContain('disabled');
 
-    squiffyApi.clickLink(linkToPassage);
+    const handled = squiffyApi.clickLink(linkToPassage);
+    expect(handled).toBe(true);
 
     expect(linkToPassage.classList).toContain('disabled');
-    expect(section3Link.classList).not.toContain('disabled');
     expect(element.innerHTML).toMatchSnapshot();
+
+    // shouldn't be able to click it again
+    expect(squiffyApi.clickLink(linkToPassage)).toBe(false);
 });
 
 test('Run JavaScript functions', async () => {
@@ -156,7 +161,8 @@ test('Run JavaScript functions', async () => {
     const clickContinue = () => {
         const continueLink = findLink(element, 'section', 'Continue...', true);
         expect(continueLink).not.toBeNull();
-        squiffyApi.clickLink(continueLink);
+        const handled = squiffyApi.clickLink(continueLink);
+        expect(handled).toBe(true);
     };
 
     const { squiffyApi, element } = await initScript(script);
@@ -208,7 +214,8 @@ test('Update passage output', async () => {
 Passage a content`);
     
     const link = findLink(element, 'passage', 'a');
-    squiffyApi.clickLink(link);
+    const handled = squiffyApi.clickLink(link);
+    expect(handled).toBe(true);
 
     let defaultOutput = getSectionContent(element, '_default');
     expect(defaultOutput).toBe('Click this: a');
@@ -238,7 +245,8 @@ test('Delete section', async () => {
 New section`);
     
     const link = findLink(element, 'section', 'a');
-    squiffyApi.clickLink(link);
+    const handled = squiffyApi.clickLink(link);
+    expect(handled).toBe(true);
 
     let defaultOutput = getSectionContent(element, '_default');
     expect(defaultOutput).toBe('Click this: a');
@@ -265,7 +273,8 @@ test('Delete passage', async () => {
 New passage`);
     
     const link = findLink(element, 'passage', 'a');
-    squiffyApi.clickLink(link);
+    const handled = squiffyApi.clickLink(link);
+    expect(handled).toBe(true);
 
     let defaultOutput = getSectionContent(element, '_default');
     expect(defaultOutput).toBe('Click this: a');
@@ -283,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

@@ -16,7 +16,7 @@ export interface SquiffyApi {
     restart: () => void;
     get: (attribute: string) => any;
     set: (attribute: string, value: any) => void;
-    clickLink: (link: HTMLElement) => void;
+    clickLink: (link: HTMLElement) => boolean;
     update: (story: Story) => void;
 }
 
@@ -93,8 +93,12 @@ export const init = (options: SquiffyInitOptions): SquiffyApi => {
         return JSON.parse(result);
     }
     
-    function handleLink(link: HTMLElement) {
-        if (link.classList.contains('disabled')) return;
+    function handleLink(link: HTMLElement): boolean {
+        const outputSection = link.closest('.squiffy-output-section');
+        if (outputSection !== currentSectionElement) return false;
+
+        if (link.classList.contains('disabled')) return false;
+
         let passage = link.getAttribute('data-passage');
         let section = link.getAttribute('data-section');
         const rotateAttr = link.getAttribute('data-rotate');
@@ -117,15 +121,20 @@ export const init = (options: SquiffyInitOptions): SquiffyApi => {
                     showPassage('@last');
                 }
             }
+
+            return true;
         }
-        else if (section) {
-            disableLink(link);
+        
+        if (section) {
             section = processLink(section);
             if (section) {
                 go(section);
             }
+
+            return true;
         }
-        else if (rotateOrSequenceAttr) {
+        
+        if (rotateOrSequenceAttr) {
             const result = rotate(rotateOrSequenceAttr, rotateAttr ? link.innerText : '');
             link.innerHTML = result[0]!.replace(/"/g, '"').replace(/'/g, '\'');
             const dataAttribute = rotateAttr ? 'data-rotate' : 'data-sequence';
@@ -138,7 +147,11 @@ export const init = (options: SquiffyInitOptions): SquiffyApi => {
                 set(attribute, result[0]);
             }
             save();
+            
+            return true;
         }
+
+        return false;
     }
 
     function handleClick(event: Event) {
@@ -153,10 +166,6 @@ export const init = (options: SquiffyInitOptions): SquiffyApi => {
         link.setAttribute('tabindex', '-1');
     }
     
-    function disableLinks(links: NodeListOf<Element>) {
-        links.forEach(disableLink);
-    }
-    
     function begin() {
         if (!load()) {
             go(story.start);
@@ -412,7 +421,6 @@ export const init = (options: SquiffyInitOptions): SquiffyApi => {
     
     function newSection(sectionName: string | null) {
         if (currentSectionElement) {
-            disableLinks(currentSectionElement.querySelectorAll('.squiffy-link'));
             currentSectionElement.querySelectorAll('input').forEach(el => {
                 const attribute = el.getAttribute('data-attribute') || el.id;
                 if (attribute) set(attribute, el.value);
@@ -683,9 +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
+    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) {
@@ -693,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);
                     }
                 }
             }
@@ -714,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);
                     }
                 }
             }