Add comments to plugin html example

SAP · Jul 20, 2020 · 06799f0 · 06799f0
1 parent ae5e9e6
commit 06799f0
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 25 deletions.
diff --git a/docs/examples/selected_items/application.html b/docs/examples/selected_items/application.html
@@ -8,9 +8,9 @@
     <div>
       <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>
+        <button onClick="setUser('User 1')">User 1</button>
+        <button onClick="setUser('User 2')">User 2</button>
+        <button onClick="setUser('User 3')">User 3</button>
       </div>
       <iframe src="/examples/selected_items/plugin.html"></iframe>
       <iframe src="/examples/selected_items/plugin.html"></iframe>
@@ -19,31 +19,36 @@ <h1>Selected items with nested view</h1>
     <script src="https://unpkg.com/fsm-shell"></script>
     <script>
       const { ShellSdk, SHELL_EVENTS } = FSMShell;
-      if (!ShellSdk.isInsideShell()) {
-        throw new Error('unable to reach shell eventAPI');
-      }
+
+      // Init ShellSDk
       const shellSdk = FSMShell.ShellSdk.init(parent, '*');
-      // We register all iframe to enable routing
+
+      // We register all iframes to enable routing
       document
         .querySelectorAll('iframe')
         .forEach((iframe) => shellSdk.registerOutlet(iframe));
-      // Define action
-      const setUser = (button) => {
-        shellSdk.setViewState('name', button.innerHTML);
-        // Disable selected buttons
-        document
-          .querySelectorAll('button')
-          .forEach((button) => button.removeAttribute('disabled'));
-        button.setAttribute('disabled', 'disabled');
+
+      // Define onClick event to set name value
+      const setUser = (name) => {
+        shellSdk.setViewState('name', name);
       };
-      // Allo plugins to trigger unselect buton
+
+      // Allow plugins to trigger unselect buton
       shellSdk.on(SHELL_EVENTS.Version1.TO_APP, (value) => {
         if (value === 'unselect') {
           shellSdk.setViewState('name', null);
-          // Disable selected buttons
-          document
-            .querySelectorAll('button')
-            .forEach((button) => button.removeAttribute('disabled'));
+        }
+      });
+
+      // update UI based on new `name` value
+      shellSdk.onViewState('name', (name) => {
+        document
+          .querySelectorAll('button')
+          .forEach((button) => button.removeAttribute('disabled'));
+        if (name) {
+          Array.from(document.querySelectorAll('button'))
+            .find((button) => button.innerHTML == name)
+            .setAttribute('disabled', 'disabled');
         }
       });
     </script>

diff --git a/docs/examples/selected_items/plugin.html b/docs/examples/selected_items/plugin.html
@@ -7,23 +7,30 @@
   <body>
     <div>
       <p id="name"></p>
-      <button hidden id="unselect" onClick="unselect()">Unselect</button>
+      <button id="unselect" onClick="unselect()" hidden>Unselect</button>
     </div>
     <script src="https://unpkg.com/fsm-shell"></script>
     <script>
-      // get latest sdk
       const { ShellSdk, SHELL_EVENTS } = FSMShell;
-      const element = document.querySelectorAll('#name')[0];
+
+      // Init shellSdk
       const shellSdk = ShellSdk.init(parent, '*');
+
+      // Listen to name value an
       shellSdk.onViewState('name', (name) => {
+        const element = document.getElementById('name');
+        const button = document.getElementById('unselect');
+
         if (name) {
           element.innerText = `👋 Hi ${name}`;
-          document.getElementById('unselect').removeAttribute('hidden');
+          button.removeAttribute('hidden');
         } else {
           element.innerText = ``;
-          document.getElementById('unselect').setAttribute('hidden', 'hidden');
+          button.setAttribute('hidden', 'hidden');
         }
       });
+
+      // onClick we request the application to unselect current user
       var unselect = () => {
         shellSdk.emit(SHELL_EVENTS.Version1.TO_APP, 'unselect');
       };

diff --git a/docs/examples/selected_items/selected_items.css b/docs/examples/selected_items/selected_items.css