fix: JS error in flow demo by removing unnecessary script. #617

Esri · Dec 10, 2019 · f2f81d5 · f2f81d5
1 parent a13cebf
commit f2f81d5
Showing 1 changed file with 24 additions and 35 deletions.
diff --git a/src/demos/calcite-flow.html b/src/demos/calcite-flow.html
@@ -38,11 +38,17 @@
     <main>
       <section class="example-container">
         <h1>calcite-flow</h1>
-        <p>A Flow is a container for showing flow-items 1 at a time. This can be useful to break content into steps,
-          useful for complicated instructions or walkthroughs.</p>
-        <p>To go to a next step, you'll need to <a href="advanced/flow-adding-items.html">add a new flow-item using native dom methods</a>. The back button (used to go back to previous steps (flow-items)
-          emits an event, but does not automatically switch flow-items by default. Hook into the event to do any cleanup necessary then remove the last flow-item in the flow.
-        Or use the handle-back attribute to have it automatically remove the last flow-item.</p>
+        <p>
+          A Flow is a container for showing flow-items 1 at a time. This can be useful to break content into steps,
+          useful for complicated instructions or walkthroughs.
+        </p>
+        <p>
+          To go to a next step, you'll need to
+          <a href="advanced/flow-adding-items.html">add a new flow-item using native dom methods</a>. The back button
+          (used to go back to previous steps (flow-items) emits an event, but does not automatically switch flow-items
+          by default. Hook into the event to do any cleanup necessary then remove the last flow-item in the flow. Or use
+          the handle-back attribute to have it automatically remove the last flow-item.
+        </p>
         <p>
           see the
           <a href="https://github.com/Esri/calcite-app-components/tree/master/src/components/calcite-flow/readme.md"
@@ -52,8 +58,12 @@ <h1>calcite-flow</h1>
 
         <h2>Basic</h2>
         <calcite-flow>
-            <calcite-flow-item heading="Item One"><img src="https://via.placeholder.com/300x200" alt="placeholder" /></calcite-flow-item>
-            <calcite-flow-item heading="Item Two"><img src="https://via.placeholder.com/400x300" alt="placeholder" /></calcite-flow-item>
+          <calcite-flow-item heading="Item One"
+            ><img src="https://via.placeholder.com/300x200" alt="placeholder"
+          /></calcite-flow-item>
+          <calcite-flow-item heading="Item Two"
+            ><img src="https://via.placeholder.com/400x300" alt="placeholder"
+          /></calcite-flow-item>
         </calcite-flow>
 
         <h2>Menu-actions and Footer-actions</h2>
@@ -76,8 +86,12 @@ <h2>Menu-actions and Footer-actions</h2>
           <h2>Flow RTL</h2>
           <h3>Basic</h3>
           <calcite-flow>
-              <calcite-flow-item heading="Item One"><img src="https://via.placeholder.com/300x200" alt="placeholder" /></calcite-flow-item>
-              <calcite-flow-item heading="Item Two"><img src="https://via.placeholder.com/400x300" alt="placeholder" /></calcite-flow-item>
+            <calcite-flow-item heading="Item One"
+              ><img src="https://via.placeholder.com/300x200" alt="placeholder"
+            /></calcite-flow-item>
+            <calcite-flow-item heading="Item Two"
+              ><img src="https://via.placeholder.com/400x300" alt="placeholder"
+            /></calcite-flow-item>
           </calcite-flow>
 
           <h3>Menu-actions and Footer-actions</h3>
@@ -95,33 +109,8 @@ <h3>Menu-actions and Footer-actions</h3>
               <p><img src="https://via.placeholder.com/300x200" alt="placeholder" /></p>
             </calcite-flow-item>
           </calcite-flow>
-      </div>
-
+        </div>
       </section>
     </main>
-    <script>
-      var flowNode = document.getElementById("flow");
-
-      var addFlowButtonNode = document.getElementById("add-flow-item");
-
-      addFlowButtonNode.addEventListener("click", function() {
-        var newNode = document.createElement("calcite-flow-item");
-        newNode.heading = "Item " + (flowNode.childElementCount + 1);
-        newNode.innerHTML = `
-          <p><img src="https://via.placeholder.com/300x200" alt="placeholder" /></p>
-          <p><img src="https://via.placeholder.com/300x200" alt="placeholder" /></p>
-          <div slot="menu-actions">
-            <calcite-action>
-              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M14.792 2.666l-1.414-1.413a.965.965 0 0 0-1.385-.03l-1.444 1.444-8.763 8.72L.03 15.481a.371.371 0 0 0 .488.488l4.096-1.756 8.763-8.72-.001-.001.002.002 1.443-1.444a.965.965 0 0 0-.03-1.385zM1.569 14.431l.554-1.293.74.739zm2.338-.924l-1.414-1.414 7.963-7.92 1.414 1.415zm8.67-8.626l-1.413-1.414 1.29-1.29a.306.306 0 0 1 .433 0l.981.98a.306.306 0 0 1 0 .433z"/></svg>
-            </calcite-action>
-          </div>
-          <div slot="footer-actions">
-            <button>Save</button>
-            <button>Cancel</button>
-          </div>
-        `;
-        flowNode.appendChild(newNode);
-      });
-    </script>
   </body>
 </html>