docs(examples): refactor system to run on docsite

AlaskaAirlines · Apr 14, 2023 · 03fa145 · 03fa145
1 parent 284e046
commit 03fa145
Show file tree

Hide file tree

Showing 11 changed files with 83 additions and 190 deletions.
diff --git a/apiExamples/dynamicMenu.js b/apiExamples/dynamicMenu.js
@@ -41,12 +41,15 @@ function generateMenuOptionHtml(menu, label, value) {
   menu.appendChild(option);
 }
 
-// Main function that runs all JS to create example
-export async function populateCombobox(elem) {
-  const dynamicData = new DynamicData();
+// Main javascript that runs all JS to create example
+const dynamicData = new DynamicData();
+const dynamicMenuExample = document.querySelector('#dynamicMenuExample');
 
-  let data = await dynamicData.getData();
-  data = dynamicData.filterData(data, elem.value);
+const input = dynamicMenuExample.shadowRoot.querySelector('auro-dropdown').querySelector('auro-input');
+
+input.addEventListener('input', () => {
+  let data = dynamicData.getData();
+  data = dynamicData.filterData(data, dynamicMenuExample.value);
 
   generateHtml(data);
-}
+});
diff --git a/apiExamples/focus.js b/apiExamples/focus.js
@@ -1,7 +1,8 @@
-export function focus(elem) {
+// export function focus(elem) {
+  const focusExample = document.querySelector('#focusExample');
   const focusExampleBtnElem = document.querySelector('#focusExampleBtn');
 
   focusExampleBtnElem.addEventListener('click', () => {
-    elem.focus();
-  })
-}
+    focusExample.focus();
+  });
+// }
diff --git a/apiExamples/persistent.js b/apiExamples/persistent.js
@@ -1,6 +1,8 @@
-export function persistentEventOption(elem) {
-  elem.addEventListener('addNewAddress', () => {
-    console.warn('addNewAddress event fired');
-    alert(`addNewAddress event fired`);
-  });
-}
+const persistentExample = document.querySelector('#persistent');
+
+console.log(persistentExample);
+
+persistentExample.addEventListener('addNewAddress', () => {
+  console.warn('addNewAddress event fired');
+  alert(`addNewAddress event fired`);
+});
diff --git a/apiExamples/swapValue.js b/apiExamples/swapValue.js
@@ -1,13 +1,15 @@
-export function swapComboboxValues(selectors) {
-  const btn = document.querySelector(selectors[0]);
-  const comboboxOne = document.querySelector(selectors[1]);
-  const comboboxTwo = document.querySelector(selectors[2]);
+const btn = document.querySelector('#swapExampleBtn');
+const comboboxOne = document.querySelector('#swapExampleLeft');
+const comboboxTwo = document.querySelector('#swapExampleRight');
 
-  btn.addEventListener('click', () => {
-    const valueOne = comboboxOne.value;
-    const valueTwo = comboboxTwo.value;
+console.log("hello");
+console.log(btn);
 
-    comboboxOne.value = valueTwo;
-    comboboxTwo.value = valueOne;
-  });
-}
+btn.addEventListener('click', () => {
+  console.log("btn clicked");
+  const valueOne = comboboxOne.value;
+  const valueTwo = comboboxTwo.value;
+
+  comboboxOne.value = valueTwo;
+  comboboxTwo.value = valueOne;
+});
diff --git a/apiExamples/value.js b/apiExamples/value.js
@@ -1,14 +1,13 @@
-export function initValueExamples(elem) {
-  document.querySelector('#valueValidExampleBtn').addEventListener('click', () => {
-    elem.value = 'Oranges';
-  })
+const valueExample = document.querySelector('#valueExample');
 
-  document.querySelector('#valueInvalidExampleBtn').addEventListener('click', () => {
-    console.warn('dragon fruit', elem);
-    elem.value = 'Dragon Fruit';
-  })
+document.querySelector('#valueValidExampleBtn').addEventListener('click', () => {
+  valueExample.value = 'Oranges';
+});
 
-  document.querySelector('#valueUndefinedExampleBtn').addEventListener('click', () => {
-    elem.value = undefined;
-  })
-}
+document.querySelector('#valueInvalidExampleBtn').addEventListener('click', () => {
+  valueExample.value = 'Dragon Fruit';
+});
+
+document.querySelector('#valueUndefinedExampleBtn').addEventListener('click', () => {
+  valueExample.value = undefined;
+});
diff --git a/demo/api.html b/demo/api.html
@@ -32,27 +32,20 @@
     <script type="module">
       import 'https://unpkg.com/marked@latest/marked.min.js';
       import 'https://unpkg.com/prismjs@latest/prism.js';
-      import { Examples } from './api.js';
       fetch('/demo/api.md')
         .then((response) => response.text())
         .then((text) => {
           const rawHtml = marked.parse(text);
           document.querySelector('main').innerHTML = rawHtml;
           Prism.highlightAll();
-        })
-        .then(() => {
-          const examples = new Examples();
-
-          examples.initialize();
         });
     </script>
 
     <!-- If additional elements are needed for the demo, add them here. -->
     <script src="https://unpkg.com/@alaskaairux/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
     <script src="https://unpkg.com/@alaskaairux/auro-icon@latest/dist/auro-icon__bundled.js" type="module"></script>
-    <script src="https://unpkg.com/@aurodesignsystem/auro-dropdown@latest/dist/auro-dropdown__bundled.js" type="module"></script>
-    <script src="https://unpkg.com/@aurodesignsystem/auro-input@latest/dist/auro-input__bundled.js" type="module"></script>
     <script src="https://unpkg.com/@alaskaairux/auro-button@latest/dist/auro-button__bundled.js" type="module"></script>
-    <script type="module" src="../src/auro-combobox.js"></script>
+    <script type="module" src="../index.js"></script>
+    <script type="module" src="./api.js"></script>
   </body>
 </html>
diff --git a/demo/api.js b/demo/api.js
@@ -1,55 +1,3 @@
-import { populateCombobox } from '../apiExamples/dynamicMenu';
-import { initValueExamples } from '../apiExamples/value';
-import { focus } from './../apiExamples/focus';
-
-class Examples {
-  initialize() {
-    function initializeExample(element, callback, retryCount) {
-      const elem = document.querySelector(element);
-
-      if (!elem || !elem.ready) {
-        // If the component is not ready, retry until it is
-        if (!retryCount && retryCount != 0) {
-          retryCount = 0;
-        } else {
-          retryCount += 1;
-        }
-
-        if (retryCount < 10) {
-          setTimeout(initializeExample, 500, element, callback, retryCount);
-        } else {
-          console.error('Unable to initialize functional example code for:', element);
-        }
-      } else {
-        callback(elem);
-      }
-    }
-
-    /**
-     * Value examples
-     */
-    initializeExample('auro-combobox#valueExample', function(elem) {
-      initValueExamples(elem);
-    });
-
-    /**
-     * Apply focus to trigger using element.focus()
-     */
-    initializeExample('#focusExample', function(elem) {
-      focus(elem);
-    });
-
-    /**
-     * Populate combobox via Dynamic API
-     */
-    initializeExample('#dynamicMenuExample', function(elem) {
-      const input = elem.shadowRoot.querySelector('auro-dropdown').querySelector('auro-input');
-
-      input.addEventListener('input', () => {
-        populateCombobox(elem);
-      });
-    });
-  }
-}
-
-export { Examples }
+import '../apiExamples/dynamicMenu';
+import '../apiExamples/value';
+import '../apiExamples/focus';
diff --git a/demo/api.md b/demo/api.md
@@ -156,15 +156,18 @@ function generateMenuOptionHtml(menu, label, value) {
   menu.appendChild(option);
 }
 
-// Main function that runs all JS to create example
-export async function populateCombobox(elem) {
-  const dynamicData = new DynamicData();
+// Main javascript that runs all JS to create example
+const dynamicData = new DynamicData();
+const dynamicMenuExample = document.querySelector('#dynamicMenuExample');
 
-  let data = await dynamicData.getData();
-  data = dynamicData.filterData(data, elem.value);
+const input = dynamicMenuExample.shadowRoot.querySelector('auro-dropdown').querySelector('auro-input');
+
+input.addEventListener('input', () => {
+  let data = dynamicData.getData();
+  data = dynamicData.filterData(data, dynamicMenuExample.value);
 
   generateHtml(data);
-}
+});
 ```
 
 </auro-accordion>
@@ -411,20 +414,19 @@ Note: using a value that does not match a menu option will reset the combobox va
 ```
 
 ```js
-export function initValueExamples(elem) {
-  document.querySelector('#valueValidExampleBtn').addEventListener('click', () => {
-    elem.value = 'Oranges';
-  })
-
-  document.querySelector('#valueInvalidExampleBtn').addEventListener('click', () => {
-    console.warn('dragon fruit', elem);
-    elem.value = 'Dragon Fruit';
-  })
-
-  document.querySelector('#valueUndefinedExampleBtn').addEventListener('click', () => {
-    elem.value = undefined;
-  })
-}
+const valueExample = document.querySelector('#valueExample');
+
+document.querySelector('#valueValidExampleBtn').addEventListener('click', () => {
+  valueExample.value = 'Oranges';
+});
+
+document.querySelector('#valueInvalidExampleBtn').addEventListener('click', () => {
+  valueExample.value = 'Dragon Fruit';
+});
+
+document.querySelector('#valueUndefinedExampleBtn').addEventListener('click', () => {
+  valueExample.value = undefined;
+});
 ```
 
 </auro-accordion>
@@ -490,13 +492,14 @@ The focus method will apply focus state to the combobox input field.
   <span slot="trigger">See code</span>
 
 ```js
-export function focus(elem) {
+// export function focus(elem) {
+  const focusExample = document.querySelector('#focusExample');
   const focusExampleBtnElem = document.querySelector('#focusExampleBtn');
 
   focusExampleBtnElem.addEventListener('click', () => {
-    elem.focus();
-  })
-}
+    focusExample.focus();
+  });
+// }
 ```
 
 ```html

diff --git a/demo/index.html b/demo/index.html
@@ -32,25 +32,20 @@
     <script type="module">
       import 'https://unpkg.com/marked@latest/marked.min.js';
       import 'https://unpkg.com/prismjs@latest/prism.js';
-      import { Examples } from './index.js';
       fetch('/index/index.md')
         .then((response) => response.text())
         .then((text) => {
           const rawHtml = marked.parse(text);
           document.querySelector('main').innerHTML = rawHtml;
           Prism.highlightAll();
-        })
-        .then(() => {
-          const examples = new Examples();
-
-          examples.initialize();
         });
     </script>
 
     <!-- If additional elements are needed for the demo, add them here. -->
     <script src="https://unpkg.com/@alaskaairux/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
     <script src="https://unpkg.com/@alaskaairux/auro-icon@latest/dist/auro-icon__bundled.js" type="module"></script>
     <script src="https://unpkg.com/@alaskaairux/auro-button@latest/dist/auro-button__bundled.js" type="module"></script>
-    <script type="module" src="../src/auro-combobox.js"></script>
+    <script type="module" src="../index.js"></script>
+    <script type="module" src="./index.js"></script>
   </body>
 </html>
diff --git a/demo/index.js b/demo/index.js
@@ -1,55 +1,2 @@
-import { persistentEventOption } from '../apiExamples/persistent';
-import { swapComboboxValues } from '../apiExamples/swapValue';
-
-class Examples {
-  initialize() {
-    function initializeExample(elements, callback, elementsPendingReady, retryCount) {
-      if (!elementsPendingReady) {
-        elementsPendingReady = elementsPendingReady || [];
-
-        if (typeof elements === 'string') {
-          elementsPendingReady.push(elements);
-        } else {
-          elementsPendingReady = elements;
-        }
-
-        initializeExample(elements, callback, elementsPendingReady);
-      } else {
-        let readyCount = 0;
-
-        elementsPendingReady.forEach(element => {
-          if (document.querySelector(element) && document.querySelector(element)['ready']) {
-            readyCount++;
-          }
-        });
-
-        retryCount = retryCount || 0;
-
-        if (elementsPendingReady.length != readyCount && retryCount < 10) {
-          retryCount = retryCount + 1;
-          setTimeout(initializeExample, 500, elements, callback, elementsPendingReady, retryCount);
-        } else {
-          callback(elements);
-        }
-      }
-    }
-
-    /**
-     * Persistent option with custom event
-     */
-    initializeExample('#persistent', function(selector) {
-      persistentEventOption(document.querySelector(selector));
-    });
-
-    /**
-     * swap values example
-     */
-    (function(){
-      initializeExample(['#swapExampleBtn', '#swapExampleLeft', '#swapExampleRight'], function(selectors) {
-        swapComboboxValues(selectors);
-      });
-    }());
-  }
-}
-
-export { Examples }
+import '../apiExamples/persistent';
+import '../apiExamples/swapValue';
diff --git a/src/auro-combobox.js b/src/auro-combobox.js
@@ -42,7 +42,7 @@ import styleCss from "./style-css.js";
  */
 
 // build the component class
-class AuroCombobox extends LitElement {
+export class AuroCombobox extends LitElement {
   constructor() {
     super();