perf(examples): update example js code for docsite #154

.npmignore

@@ -16,6 +16,9 @@ demo/**/*.scss
 demo/**/*.html
 
 dist/es5.js
+dist/auro-select.js
+dist/style-css.js
+dist/style-fixed-css.js
 
 index.html
 

README.md

@@ -118,9 +118,9 @@ import "@aurodesignsystem/auro-select";
 ## Install bundled assets from CDN
 
 <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/bundleInstallDescription.md) -->
-In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Two bundles are available -- `auro-select__bundled.js` for modern browsers and `auro-select__bundled.es5.js` for legacy browsers (including IE11).
+In cases where the project is not able to process JS assets, there are pre-processed assets available for use. See -- `auro-select__bundled.js` for modern browsers. Legacy browsers such as IE11 are no longer supported.
 
-Since the legacy bundle includes many polyfills that are not needed by modern browsers, we recommend you load these bundles using [differential serving](https://philipwalton.com/articles/deploying-es2015-code-in-production-today/) so that the browser only loads the bundle it needs. To accomplish this, the script tag for the modern bundle should have `type="module"` and the script tag for the legacy bundle should have the `nomodule` attribute. See the example below.
+We recommend you load these bundles using [differential serving](https://philipwalton.com/articles/deploying-es2015-code-in-production-today/) so that the browser only loads the bundle correctly. To accomplish this, the script tag for the modern bundle should have `type="module"` and the script tag.
 
 <!-- AURO-GENERATED-CONTENT:END -->
 
@@ -130,10 +130,9 @@ Since the legacy bundle includes many polyfills that are not needed by modern br
 
 ```html
 <!-- **NOTE:** Be sure to replace `@latest` in the URL with the version of the asset you want. @latest is NOT aware of any MAJOR releases, use at your own risk. -->
-<link rel="stylesheet" href="https://unpkg.com/@alaskaairux/design-tokens@latest/dist/tokens/CSSCustomProperties.css" />
-<link rel="stylesheet" href="https://unpkg.com/@alaskaairux/webcorestylesheets@latest/dist/bundled/essentials.css" />
-<script src="https://unpkg.com/@aurodesignsystem/auro-select@latest/dist/auro-select__bundled.js" type="module"></script>
-<script src="https://unpkg.com/@aurodesignsystem/auro-select@latest/dist/auro-select__bundled.es5.js" nomodule></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/tokens/CSSCustomProperties.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/essentials.css" />
+<script src="https://cdn.jsdelivr.net/@aurodesignsystem/auro-select@latest/dist/auro-select__bundled.js" type="module"></script>
 ```
 
 <!-- AURO-GENERATED-CONTENT:END -->

apiExamples/customErrorValidity.js

@@ -1,9 +1,11 @@
-export function setErrorOnValueChange(elem) {
-  elem.addEventListener('auroSelect-valueSet', () => {
-    if (+elem.value > 2) {
-      elem.setAttribute('error', 'Quantity Exceeded');
-    } else if (elem.hasAttribute('error')) {
-      elem.removeAttribute('error');
+export function customErrorValidityExample(elem) {
+  const customErrorValidityExample = document.querySelector('#primaryError');
+
+  customErrorValidityExample.addEventListener('auroSelect-valueSet', () => {
+    if (+customErrorValidityExample.value > 2) {
+      customErrorValidityExample.setAttribute('error', 'Quantity Exceeded');
+    } else if (customErrorValidityExample.hasAttribute('error')) {
+      customErrorValidityExample.removeAttribute('error');
     }
   })
 };

apiExamples/errorApi.js

@@ -1,9 +1,11 @@
-export function setError(elem) {
+export function setErrorExample() {
+  const setErrorExample = document.querySelector('#errorExample');
+
   document.querySelector('#undefinedValueExampleBtnAddError').addEventListener('click', () => {
-    elem.setAttribute('error', 'custom error');
+    setErrorExample.setAttribute('error', 'custom error');
   })
 
   document.querySelector('#undefinedValueExampleBtnRemoveError').addEventListener('click', () => {
-    elem.removeAttribute('error');
+    setErrorExample.removeAttribute('error');
   })
 }

apiExamples/nestedSelect.js

@@ -1,9 +1,11 @@
-export function openDialog() {
+export function nestedSelectExample() {
   // JavaScript for the overflow: visible dialog
   let visOverflowDialog = document.getElementById('visibleOverflowDialog');
   let visibleOverflowButton = document.getElementById('overflowVisibleButton');
   let closeVisButtonElem = document.getElementById('closeVisButton');
 
+  const elem = document.querySelector('#nestedSelect');
+
   visibleOverflowButton.addEventListener('click', () => {
     visOverflowDialog.setAttribute('open', 'true');
   });

apiExamples/value.js

@@ -1,13 +1,15 @@
-export function setValue(elem) {
+export function valueExample() {
+  const valueExample = document.querySelector('#valueExample');
+
   document.querySelector('#validValueExampleBtn').addEventListener('click', () => {
-    elem.value = 'arrival';
+    valueExample.value = 'arrival';
   })
 
   document.querySelector('#invalidValueExampleBtn').addEventListener('click', () => {
-    elem.value = 'flight course';
+    valueExample.value = 'flight course';
   })
 
   document.querySelector('#undefinedValueExampleBtn').addEventListener('click', () => {
-    elem.value = undefined;
+    valueExample.value = undefined;
   })
 }

apiExamples/valueExtraction.js

@@ -0,0 +1,11 @@
+export function valueExtractionExample() {
+  const valueExtractionExample = document.querySelector('#valueExtraction');
+  const valueExtractionBtn = document.querySelector('#valueExtractionBtn');
+
+  valueExtractionBtn.addEventListener('click', () => {
+    console.warn('Value selected:', valueExtractionExample.value);
+    console.warn('Option selected:', valueExtractionExample.optionSelected);
+
+    alert(`Value selected: ${valueExtractionExample.value}`);
+  })
+}

demo/api.html

@@ -49,6 +49,9 @@
     <script src="https://unpkg.com/@alaskaairux/auro-interruption@latest/dist/auro-dialog__bundled.js" type="module"></script>
 
     <script type="module" src="../src/auro-select.js"></script>
-    <script type="module" src="../demo/api.js"></script>
+    <script src="./api.min.js"></script>
+    <script>
+      initSelectApiExamples();
+    </script>
   </body>
 </html>

demo/api.js

@@ -1,86 +1,24 @@
-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;
-      }
+import { customErrorValidityExample } from "../apiExamples/customErrorValidity";
+import { setErrorExample } from "../apiExamples/errorApi";
+import { nestedSelectExample } from "../apiExamples/nestedSelect";
+import { valueExample } from "../apiExamples/value";
+import { valueExtractionExample } from "../apiExamples/valueExtraction";
 
-      if (retryCount < 10) {
-        setTimeout(initializeExample, 500, element, callback, retryCount);
-      } else {
-        console.error('Unable to initialize functional example code for:', element);
-      }
-    } else {
-      callback(elem);
+export function initSelectApiExamples(initCount) {
+  initCount = initCount || 0;
+
+  try {
+    customErrorValidityExample();
+    setErrorExample();
+    nestedSelectExample();
+    valueExample();
+    valueExtractionExample();
+  } catch {
+    if (initCount <= 20) {
+      // setTimeout handles issue where content is sometimes loaded after the functions get called
+      setTimeout(() => {
+        initSelectApiExamples(initCount + 1);
+      }, 100);
     }
   }
-
-  /**
-   * Send alert to user when an option is selected
-   */
-  import { valueAlert } from './alertValue';
-
-  (function(){
-    initializeExample('auro-select#valueAlert', function(elem) {
-      valueAlert(elem);
-    });
-  }());
-
-  /**
-   * Extract the value from auro-select element
-   */
-  import { getValue } from './extractValue';
-
-  (function(){
-    initializeExample('#valueExtraction', function(elem) {
-      getValue(elem);
-    });
-  }());
-
-  /**
-   * Programmatically set value of auro-select
-   */
-   import { setValue } from './../apiExamples/value';
-
-   (function(){
-     initializeExample('#valueExample', function(elem) {
-      setValue(elem);
-     });
-   }());
-
-   /**
-   * Show auro-select overflow when nested inside another element
-   */
-  import { openDialog } from './../apiExamples/nestedSelect';
-
-  (function(){
-    initializeExample('#nestedSelect', function() {
-      openDialog();
-    });
-  }());
-
-   /**
-   * Programmatically set error attribute
-   */
-   import { setError } from '../apiExamples/errorApi';
-
-   (function(){
-     initializeExample('#errorExample', function(elem) {
-      setError(elem);
-     });
-   }());
-
-    /**
-   * Programmatically set error attribute based on specific condition
-   */
-    import { setErrorOnValueChange } from './../apiExamples/customErrorValidity';
-
-    (function(){
-      initializeExample('#primaryError', function(elem) {
-        setErrorOnValueChange(elem);
-      });
-    }());
+}

demo/api.md

@@ -259,17 +259,19 @@ To pre-set the value of auro-select on load, use the `value` property. The `sele
 <!-- The below code snippet is automatically added from ./../../apiExamples/value.js -->
 
 ```js
-export function setValue(elem) {
+export function valueExample() {
+  const valueExample = document.querySelector('#valueExample');
+
   document.querySelector('#validValueExampleBtn').addEventListener('click', () => {
-    elem.value = 'arrival';
+    valueExample.value = 'arrival';
   })
 
   document.querySelector('#invalidValueExampleBtn').addEventListener('click', () => {
-    elem.value = 'flight course';
+    valueExample.value = 'flight course';
   })
 
   document.querySelector('#undefinedValueExampleBtn').addEventListener('click', () => {
-    elem.value = undefined;
+    valueExample.value = undefined;
   })
 }
 ```
@@ -548,16 +550,19 @@ The following example illustrates how a user may query the `element.value` or `e
 </div>
 <auro-accordion lowProfile justifyRight>
   <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../demo/extractValue.js) -->
-<!-- The below code snippet is automatically added from ./../../demo/extractValue.js -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/valueExtraction.js) -->
+<!-- The below code snippet is automatically added from ./../../apiExamples/valueExtraction.js -->
 
 ```js
-export function getValue(elem) {
-  const btn = document.querySelector('#valueExtractionBtn');
+export function valueExtractionExample() {
+  const valueExtractionExample = document.querySelector('#valueExtraction');
+  const valueExtractionBtn = document.querySelector('#valueExtractionBtn');
+
+  valueExtractionBtn.addEventListener('click', () => {
+    console.warn('Value selected:', valueExtractionExample.value);
+    console.warn('Option selected:', valueExtractionExample.optionSelected);
 
-  btn.addEventListener('click', () => {
-    console.warn('Value selected:', elem.value);
-    console.warn('Option selected:', elem.optionSelected);
+    alert(`Value selected: ${valueExtractionExample.value}`);
   })
 }
 ```
@@ -622,12 +627,14 @@ This example programmatically adds the `error` state when a user selects an opti
 <!-- The below code snippet is automatically added from ./../../apiExamples/customErrorValidity.js -->
 
 ```js
-export function setErrorOnValueChange(elem) {
-  elem.addEventListener('auroSelect-valueSet', () => {
-    if (+elem.value > 2) {
-      elem.setAttribute('error', 'Quantity Exceeded');
-    } else if (elem.hasAttribute('error')) {
-      elem.removeAttribute('error');
+export function customErrorValidityExample(elem) {
+  const customErrorValidityExample = document.querySelector('#primaryError');
+
+  customErrorValidityExample.addEventListener('auroSelect-valueSet', () => {
+    if (+customErrorValidityExample.value > 2) {
+      customErrorValidityExample.setAttribute('error', 'Quantity Exceeded');
+    } else if (customErrorValidityExample.hasAttribute('error')) {
+      customErrorValidityExample.removeAttribute('error');
     }
   })
 };