navigateToTarget action on ref tag (Doenet#1961)

Resolves Doenet#1835
jaltekruse · Mar 3, 2023 · 3420b63 · 3420b63
1 parent 91b9357
commit 3420b63
Show file tree

Hide file tree

Showing 6 changed files with 356 additions and 72 deletions.
diff --git a/cypress/e2e/AssignedActivity/multipageActivities.cy.js b/cypress/e2e/AssignedActivity/multipageActivities.cy.js
@@ -184,7 +184,7 @@ describe('Multipage activity tests', function () {
     cy.get('[data-test="View Activity"]').click();
 
     cy.get('#page1\\/top').should('contain.text', 'top 1')
-    cy.get('#page2\\/top').should('contain.text', 'top 2') 
+    cy.get('#page2\\/top').should('contain.text', 'top 2')
 
     cy.url().should('match', /#page1$/)
 
@@ -2350,7 +2350,7 @@ describe('Multipage activity tests', function () {
     cy.get('.navigationRow').eq(0).find('.navigationColumn1').click();
     cy.get('[data-test="Assign Activity"]').click();
     cy.wait(1500);  // wait for update
-    
+
 
     cy.get('[data-test="RoleDropDown"] > div:nth-child(2)').click().type("{downArrow}{downArrow}{enter}")
 
@@ -2559,5 +2559,83 @@ describe('Multipage activity tests', function () {
 
   })
 
+  it('Change pages with navigateToTarget action and choiceinput', () => {
+    const doenetML1 = `
+    <setup>
+      <ref page="1" name="refpage1" />
+      <ref page="2" name="refpage2" />
+      <ref page="3" name="refpage3" />
+    </setup>
+
+    <p>Page 1</p>
+
+    <choiceinput inline name="moveToPage">
+      <choice>Page 1</choice>
+      <choice>Page 2</choice>
+      <choice>Page 3</choice>
+    </choiceinput>
+
+    <callAction triggerWhen="$moveToPage.selectedIndex=1" target="refpage1" actionName="navigateToTarget" />
+    <callAction triggerWhen="$moveToPage.selectedIndex=2" target="refpage2" actionName="navigateToTarget" />
+    <callAction triggerWhen="$moveToPage.selectedIndex=3" target="refpage3" actionName="navigateToTarget" />
+    `
+
+    const doenetML2 = `Page 2`
+    const doenetML3 = `Page 3`
+
+    cy.createMultipageActivity({ courseId, doenetId, parentDoenetId: courseId, pageDoenetId1, pageDoenetId2, pageDoenetId3, doenetML1, doenetML2, doenetML3 });
+
+    cy.visit(`http://localhost/course?tool=navigation&courseId=${courseId}`)
+
+    cy.get('.navigationRow').should('have.length', 1); //Need this to wait for the row to appear
+    cy.get('.navigationRow').eq(0).get('.navigationColumn1').click();
+
+    cy.get('[data-test="Assign Activity"]').click();
+    cy.get('[data-test="Unassign Activity"]').should('be.visible')
+
+    cy.get('[data-test="View Assigned Activity"]').click();
+
+    cy.get('#page1').should('contain.text', 'Page 1')
+
+    cy.url().should('match', /#page1$/)
+
+
+    cy.get(`#page1\\/moveToPage`).select('2');
+
+    cy.get('#page2').should('contain.text', 'Page 2')
+
+    cy.url().should('match', /#page2$/)
+
+
+    cy.get('[data-test=previous]').click();
+
+    cy.get('#page1').should('contain.text', 'Page 1')
+
+    cy.url().should('match', /#page1$/)
+
+
+    cy.get(`#page1\\/moveToPage`).select('3');
+
+    cy.get('#page3').should('contain.text', 'Page 3')
+
+    cy.url().should('match', /#page3$/)
+
+
+    cy.get('[data-test=previous]').click();
+
+    cy.get('#page2').should('contain.text', 'Page 2')
+
+    cy.url().should('match', /#page2$/)
+
+
+    cy.get('[data-test=previous]').click();
+
+    cy.get('#page1').should('contain.text', 'Page 1')
+
+    cy.url().should('match', /#page1$/)
+
+
+
+  })
 
 })
diff --git a/cypress/e2e/DoenetML/tagSpecific/ref.cy.js b/cypress/e2e/DoenetML/tagSpecific/ref.cy.js
@@ -295,5 +295,94 @@ describe('ref Tag Tests', function () {
 
   });
 
+  it('navigate to target action opens aside', () => {
+    cy.window().then(async (win) => {
+      win.postMessage({
+        doenetML: `
+    <ref name="toAside" target="/aside" hide>Aside</ref>
+    <p>
+    <callAction target="toAside" actionName="navigateToTarget" name="go"><label>Go to aside</label></callAction>
+    </p>
+    <lorem generateParagraphs="2" />
+
+    <aside name="aside">
+      <title name="asideTitle">The aside</title>
+      <p name="inside">Inside the aside</p>
+    </aside>
+
+    <lorem generateParagraphs="10" />
+
+    `}, "*");
+    });
+
+    // to wait for page to load
+    cy.get('#\\/asideTitle').should('have.text', 'The aside')
+
+    cy.log('Aside closed at the beginning')
+    cy.get('#\\/inside').should('not.exist')
+    cy.window().then(async (win) => {
+      let stateVariables = await win.returnAllStateVariables1();
+      expect(stateVariables["/aside"].stateValues.open).eq(false);
+    })
+
+    cy.log('clicking action opens aside')
+    cy.get('#\\/go').click();
+
+    cy.get('#\\/inside').should('have.text', "Inside the aside");
+    cy.window().then(async (win) => {
+      let stateVariables = await win.returnAllStateVariables1();
+      expect(stateVariables["/aside"].stateValues.open).eq(true);
+    })
+
+  });
+
+  it('chain action to navigate to target', () => {
+    cy.window().then(async (win) => {
+      win.postMessage({
+        doenetML: `
+    <setup>
+      <ref target="countAside" name="refCountAside" />
+      <animateFromSequence target="n" from="1" to="5" animationinterval="500" animationmode="increase once" name="count" />
+    </setup>
+
+    <callAction target="refCountAside" actionName="navigateToTarget" name="startCount">
+      <label>Start counting</label>
+    </callAction>
+    <callAction target="count" actionName="startAnimation" triggerWith="startCount" />
+    <ref name="toAside" target="/aside" hide>Aside</ref>
+    <p>
+    <callAction target="toAside" actionName="navigateToTarget" name="go"><label>Go to aside</label></callAction>
+    </p>
+
+    <lorem generateParagraphs="1" />
+
+    <aside name="countAside">
+      <title name="asideTitle">Counting</title>
+      Let's count: <number name="n">1</number>
+    </aside>
+
+    <lorem generateParagraphs="10" />
+
+    `}, "*");
+    });
+
+    // to wait for page to load
+    cy.get('#\\/asideTitle').should('have.text', 'Counting')
+
+    cy.log('Aside closed at the beginning')
+    cy.get('#\\/n').should('not.exist')
+
+    cy.log('clicking action opens aside and starts counting')
+    cy.get('#\\/startCount').click();
+
+    cy.get('#\\/n').should('have.text', '1');
+    cy.get('#\\/n').should('have.text', '2');
+    cy.get('#\\/n').should('have.text', '3');
+    cy.get('#\\/n').should('have.text', '4');
+    cy.get('#\\/n').should('have.text', '5');
+
+  });
+
+
 
 });
diff --git a/src/Core/Core.js b/src/Core/Core.js
@@ -74,6 +74,7 @@ export default class Core {
       recordSolutionView: this.recordSolutionView.bind(this),
       requestComponentDoenetML: this.requestComponentDoenetML.bind(this),
       copyToClipboard: this.copyToClipboard.bind(this),
+      navigateToTarget: this.navigateToTarget.bind(this),
     }
 
     this.updateInfo = {
@@ -10445,6 +10446,14 @@ export default class Core {
       })
     }
   }
+
+  navigateToTarget(args) {
+    postMessage({
+      messageType: "navigateToTarget",
+      coreId: this.coreId,
+      args
+    })
+  }
 }
 
 

diff --git a/src/Core/components/Ref.js b/src/Core/components/Ref.js
@@ -1,6 +1,14 @@
 import InlineComponent from './abstract/InlineComponent';
 
 export default class Ref extends InlineComponent {
+  constructor(args) {
+    super(args);
+
+    Object.assign(this.actions, {
+      navigateToTarget: this.navigateToTarget.bind(this)
+    });
+
+  }
   static componentType = "ref";
   static renderChildren = true;
 
@@ -292,4 +300,31 @@ export default class Ref extends InlineComponent {
 
   }
 
+  async navigateToTarget({ actionId }) {
+
+    if (await this.stateValues.disabled) {
+      this.coreFunctions.resolveAction({ actionId });
+    } else {
+      let cid = await this.stateValues.cid;
+      let doenetId = await this.stateValues.doenetId;
+      let variantIndex = await this.stateValues.variantIndex;
+      let edit = await this.stateValues.edit;
+      let hash = await this.stateValues.hash;
+      let page = await this.stateValues.page;
+      let uri = await this.stateValues.uri;
+      let targetName = await this.stateValues.targetName;
+
+      let effectiveName = this.componentOrAdaptedName
+
+
+      this.coreFunctions.navigateToTarget({
+        cid, doenetId, variantIndex, edit, hash, page, uri, targetName,
+        actionId, componentName: this.componentName, effectiveName
+      })
+    }
+
+
+  }
+
+
 }