@aurodesignsystem-dev/auro-formkit 0.0.0-pr1452.1 → 0.0.0-pr1452.3

package/components/menu/demo/api.js

@@ -0,0 +1,29 @@
+/* eslint-disable jsdoc/require-jsdoc, no-magic-numbers, no-param-reassign */
+
+import { auroMenuResetExample } from '../apiExamples/reset';
+import { auroMenuMatchWordExample } from '../apiExamples/match-word';
+import { initKeysExample } from '../apiExamples/keys';
+import { auroMenuLoadingExample } from '../apiExamples/loading';
+import { initSelectAllMatchingOptionsExample } from '../apiExamples/select-all-matching-options';
+import '../src/registered.js';
+
+export function initExamples(initCount) {
+  initCount = initCount || 0;
+
+  try {
+    // javascript example function calls to be added here upon creation to test examples
+    initKeysExample();
+    auroMenuLoadingExample();
+    auroMenuMatchWordExample();
+    initSelectAllMatchingOptionsExample();
+    auroMenuResetExample();
+  } catch (err) {
+    if (initCount <= 20) {
+      // setTimeout handles issue where content is sometimes loaded after the functions get called
+      setTimeout(() => {
+        initExamples(initCount + 1);
+      }, 100);
+    }
+  }
+}
+

package/components/menu/demo/api.min.js

@@ -0,0 +1,121 @@
+import { A as AuroMenu, a as AuroMenuOption } from './auro-menuoption.min.js';
+
+function auroMenuResetExample() {
+  const resetExampleBtnElem = document.querySelector('#resetExampleBtn');
+  const resetExampleElem = document.querySelector('#resetExample');
+  
+  if (resetExampleElem && resetExampleBtnElem) {
+    resetExampleBtnElem.addEventListener('click', () => {
+      resetExampleElem.reset();
+    });
+  }
+}
+
+function updateMatch() {
+  let matchWordMenu = document.querySelector('#matchWordMenu');
+
+  matchWordMenu.matchWord = matchWordInput.value;
+}
+
+function auroMenuMatchWordExample() {
+  let matchWordInput = document.querySelector('#matchWordInput');
+
+  matchWordInput.addEventListener('keyup', updateMatch);
+}
+
+function initKeysExample() {
+  const menu = document.getElementById('keys-menu');
+  const stopsButton = document.getElementById('stopsButton');
+  const stopsTopButton = document.getElementById('stopsTopButton');
+  const output = document.getElementById('output');
+
+  const createConsoleEntry = (message) => {
+    const node = document.createElement('span');
+    node.innerHTML = message;
+    output.appendChild(node);
+    output.appendChild(document.createElement('br'));
+  };
+
+  const resetConsole = () => {
+    output.innerHTML = '';
+  };
+
+  const updateMenuValue = (value) => {
+    resetConsole();
+    createConsoleEntry(`Setting menu.value: <em>"${value}"</em>`);
+    menu.value = '';
+    menu.value = value;
+    createConsoleEntry(`menu.value before next lifecycle: <em>"${menu.value}"</em>`);
+    setTimeout(() => {
+      createConsoleEntry(`menu.value after lifecycle: <em>"${menu.value}"</em>`);
+    });
+  };
+
+  stopsButton.addEventListener('click', () => {
+    updateMenuValue('stops');
+  });
+
+  stopsTopButton.addEventListener('click', () => {
+    updateMenuValue('stops-top');
+  });
+}
+
+function auroMenuLoadingExample() {
+  document.querySelector("#loadingExampleToggleButton").addEventListener("click", () => {
+    document.querySelectorAll("#loadingExampleTable auro-menu").forEach(menu => menu.toggleAttribute("loading"));
+  });
+}
+
+const initSelectAllMatchingOptionsExample = () => {
+
+  const selectAllBtn = document.getElementById('selectAllBtn');
+  const selectAllMenu = document.getElementById('selectAllMenu');
+  const selectFirstBtn = document.getElementById('selectFirstBtn');
+  const selectFirstMenu = document.getElementById('selectFirstMenu');
+  const resetAllBtn = document.getElementById('resetAllBtn');
+  const resetFirstBtn = document.getElementById('resetFirstBtn');
+
+  selectAllBtn.addEventListener('click', () => {
+    selectAllMenu.value = 'stops';
+  });
+
+  resetAllBtn.addEventListener('click', () => {
+    selectAllMenu.reset();
+  });
+
+  selectFirstBtn.addEventListener('click', () => {
+    selectFirstMenu.value = 'stops';
+  });
+
+  resetFirstBtn.addEventListener('click', () => {
+    selectFirstMenu.reset();
+  });
+};
+
+AuroMenu.register();
+AuroMenuOption.register();
+
+/* eslint-disable jsdoc/require-jsdoc, no-magic-numbers, no-param-reassign */
+
+
+function initExamples(initCount) {
+  initCount = initCount || 0;
+
+  try {
+    // javascript example function calls to be added here upon creation to test examples
+    initKeysExample();
+    auroMenuLoadingExample();
+    auroMenuMatchWordExample();
+    initSelectAllMatchingOptionsExample();
+    auroMenuResetExample();
+  } catch (err) {
+    if (initCount <= 20) {
+      // setTimeout handles issue where content is sometimes loaded after the functions get called
+      setTimeout(() => {
+        initExamples(initCount + 1);
+      }, 100);
+    }
+  }
+}
+
+export { initExamples };