Add nested views to documentation (#73)

* Add nested example and fix typos on nested page * Add comments to plugin html example * Add nested nested example to documentation * Add get context usecase to nested ntested demo * Edit Changelog * Update hangelog and clean nested example
SAP · Jul 23, 2020 · a52df1b · a52df1b
1 parent e362b10
commit a52df1b
Show file tree

Hide file tree

Showing 9 changed files with 397 additions and 10 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 - `getTarget()` method to access ShellSdk target object
+- Nested page within fsm-shell documentation
 
 ## [1.5.0] - 2020-06-05
 

diff --git a/cypress/integration/example_require_context.js b/cypress/integration/example_require_context.js
@@ -42,6 +42,6 @@ context('Docsify start and load', () => {
     getIframeBody()
       .find('h2')
       .should('be.visible')
-      .should('have.text', 'Hi user / account / company!');
+      .should('have.text', 'Hi shell-docsify / my_account / sap!');
   });
 });
diff --git a/docs/_sidebar.md b/docs/_sidebar.md
@@ -6,14 +6,16 @@
 
   - [Library Usage Sample](usage-sample.md)
 
+  - [Nested views](nested-views.md)
+
 - API documentation
 
   - [ShellSdk Events](events.md)
 
-  - [Debugging](debugging.md)
-
   - [Security](security.md)
 
+  - [Debugging](debugging.md)
+
 - Examples
 
   - [Require context](examples.md)

diff --git a/docs/examples/nested_nested/application.html b/docs/examples/nested_nested/application.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Example nested nested view</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <div style="margin: 8px 0px;">
+      <button onClick="setUser(this)">User 1</button>
+      <button onClick="setUser(this)">User 2</button>
+      <button onClick="setUser(this)">User 3</button>
+      <button id="unselect" onClick="unselect()" hidden>Unselect</button> |
+      <button id="context" onClick="getContext()">Get context</button>
+    </div>
+    <div>
+      <p><span id="name"></span><span id="contexts"></span></p>
+    </div>
+    <div id="iframes">
+      <!-- script generate two <iframe src="application.html?depth=depth-1" />-->
+    </div>
+    <script src="https://unpkg.com/fsm-shell"></script>
+    <script>
+      // Init ShellSDk
+      const { ShellSdk, SHELL_EVENTS } = FSMShell;
+      const shellSdk = ShellSdk.init(window.parent, '*');
+
+      // Generate 2 iframes until depth is 0
+      const depth = new URL(location.href).searchParams.get('depth');
+      if (depth > 0) {
+        const url = (new URL(location.href).search = `?depth=${depth - 1}`);
+        for (var i = 0; i < 2; i++) {
+          let iframe = document.createElement('iframe');
+          iframe.src = url;
+          document.getElementById('iframes').appendChild(iframe);
+        }
+      }
+
+      // We register all iframes to enable routing
+      document
+        .querySelectorAll('iframe')
+        .forEach((iframe) => shellSdk.registerOutlet(iframe));
+
+      // update UI based on new `name` value
+      shellSdk.onViewState('name', (name) => {
+        document.getElementById('name').innerText = name ? `👋 Hi ${name}` : ``;
+        document.getElementById('unselect').hidden = name ? false : true;
+        document.querySelectorAll('button').forEach((button) => {
+          button.disabled = button.innerHTML == name ? true : false;
+        });
+      });
+
+      // Define onClick event to set name value
+      const setUser = (button) => {
+        shellSdk.emit(SHELL_EVENTS.Version1.TO_APP, button.innerHTML);
+      };
+
+      // unselect function send null to the application value
+      const unselect = () => {
+        shellSdk.emit(SHELL_EVENTS.Version1.TO_APP, null);
+      };
+
+      // Allow plugins to trigger unselect event
+      shellSdk.on(SHELL_EVENTS.Version1.TO_APP, (value) => {
+        shellSdk.setViewState('name', value);
+      });
+
+      // Define onClick event to set name value
+      const getContext = () => {
+        if (document.getElementById('contexts').innerText) {
+          document.getElementById('context').innerText = 'Get context';
+          document.getElementById('contexts').innerText = '';
+        } else {
+          document.getElementById('context').innerText = 'Remove context';
+          shellSdk.emit(SHELL_EVENTS.Version1.REQUIRE_CONTEXT, {
+            clientIdentifier: 'example-plugin',
+          });
+        }
+      };
+
+      shellSdk.on(SHELL_EVENTS.Version1.REQUIRE_CONTEXT, (event) => {
+        const { account, company, user } = JSON.parse(event);
+        document.getElementById(
+          'contexts'
+        ).innerText = ` | ${user} / ${account} / ${company}!`;
+      });
+    </script>
+  </body>
+</html>
diff --git a/docs/examples/nested_nested/styles.css b/docs/examples/nested_nested/styles.css
@@ -0,0 +1,23 @@
+html,
+body {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+}
+body {
+  padding: 4px;
+}
+#iframes {
+  display: flex;
+  flex-grow: 1;
+}
+#iframes iframe {
+  flex-grow: 1;
+  flex-wrap: wrap;
+  margin: 4px;
+  min-width: 40%;
+}
+button {
+  margin-bottom: 4px;
+}
diff --git a/docs/examples/selected_items/application.html b/docs/examples/selected_items/application.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Example nested views iFrame</title>
+  </head>
+  <body>
+    <h1>Selected items with nested view</h1>
+    <div style="margin: 8px 0px;">
+      <button onClick="setUser(this)">User 1</button>
+      <button onClick="setUser(this)">User 2</button>
+      <button onClick="setUser(this)">User 3</button>
+    </div>
+    <iframe src="/examples/selected_items/plugin.html"></iframe>
+    <iframe src="/examples/selected_items/plugin.html"></iframe>
+    <iframe src="/examples/selected_items/plugin.html"></iframe>
+    <script src="https://unpkg.com/fsm-shell"></script>
+    <script>
+      const { ShellSdk, SHELL_EVENTS } = FSMShell;
+
+      // Init ShellSDk
+      const shellSdk = ShellSdk.init(window.parent, '*');
+
+      // We register all iframes to enable routing
+      document
+        .querySelectorAll('iframe')
+        .forEach((iframe) => shellSdk.registerOutlet(iframe));
+
+      // Define onClick event to set name value
+      const setUser = (button) => {
+        shellSdk.setViewState('name', button.innerHTML);
+      };
+
+      // update UI based on new `name` value
+      shellSdk.onViewState('name', (name) => {
+        document.querySelectorAll('button').forEach((button) => {
+          button.disabled = button.innerHTML == name ? true : false;
+        });
+      });
+
+      // Allow plugins to trigger unselect event
+      shellSdk.on(SHELL_EVENTS.Version1.TO_APP, (value) => {
+        if (value === 'unselect') {
+          shellSdk.setViewState('name', null);
+        }
+      });
+    </script>
+  </body>
+</html>
diff --git a/docs/examples/selected_items/plugin.html b/docs/examples/selected_items/plugin.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Example nested views iFrame</title>
+  </head>
+  <body>
+    <p id="name"></p>
+    <button id="unselect" onClick="unselect()" hidden>Unselect</button>
+    <script src="https://unpkg.com/fsm-shell"></script>
+    <script>
+      const { ShellSdk, SHELL_EVENTS } = FSMShell;
+
+      // Init shellSdk
+      const shellSdk = ShellSdk.init(parent, '*');
+
+      // Listen to name value
+      shellSdk.onViewState('name', (name) => {
+        document.getElementById('name').innerText = name ? `👋 Hi ${name}` : ``;
+        document.getElementById('unselect').hidden = name ? false : true;
+      });
+
+      // onClick we request the application to unselect current user
+      var unselect = () => {
+        shellSdk.emit(SHELL_EVENTS.Version1.TO_APP, 'unselect');
+      };
+    </script>
+  </body>
+</html>