@aurodesignsystem-dev/auro-drawer 0.0.0-pr94.0

package/demo/api.min.js

@@ -0,0 +1,260 @@
+import { A as AuroDrawer, i as initBasicExample } from './auro-drawer.min.js';
+
+function initAccessibilityExample() {
+  const button = document.querySelector("#openAccessibility");
+  const drawer = document.querySelector("#unformattedMdDrawer");
+
+  button.addEventListener("click", () => {
+    if (drawer.hasAttribute("open")) {
+      drawer.removeAttribute("open");
+    } else {
+      drawer.setAttribute("open", true);
+    }
+  });
+}
+
+function initCustomizedExample() {
+  const buttons = [
+    document.querySelector("#openCustomized"),
+    document.querySelector("#closeCustomized"),
+  ];
+  const drawer = document.querySelector("#customizedDrawer");
+
+  drawer.triggerElement = buttons[0];
+  buttons[1].addEventListener("click", () => {
+    drawer.removeAttribute("open");
+  });
+}
+
+function initFullscreenBreakpointExample() {
+  const buttons = [
+    document.querySelector("#openSmLg"),
+    document.querySelector("#closeSmLg"),
+  ];
+  const drawer = document.querySelector("#smLgDrawer");
+
+  drawer.triggerElement = buttons[0];
+  buttons[1].addEventListener("click", () => {
+    drawer.removeAttribute("open");
+  });
+}
+
+function initModalExample() {
+  const defaultButtons = [
+    document.querySelector("#openDefaultModal"),
+    document.querySelector("#closeDefaultModal"),
+  ];
+  const defaultDrawer = document.querySelector("#defaultModalDrawer");
+
+  const mediumButtons = [
+    document.querySelector("#openMediumModal"),
+    document.querySelector("#closeMediumModal"),
+  ];
+  const mediumDrawer = document.querySelector("#mediumModalDrawer");
+
+  const smallButtons = [
+    document.querySelector("#openSmallModal"),
+    document.querySelector("#closeSmallModal"),
+  ];
+  const smallDrawer = document.querySelector("#smallModalDrawer");
+
+  defaultButtons.forEach((button) => {
+    button.addEventListener("click", () => {
+      if (defaultDrawer.hasAttribute("open")) {
+        defaultDrawer.removeAttribute("open");
+      } else {
+        defaultDrawer.setAttribute("open", true);
+      }
+    });
+  });
+
+  mediumButtons.forEach((button) => {
+    button.addEventListener("click", () => {
+      if (mediumDrawer.hasAttribute("open")) {
+        mediumDrawer.removeAttribute("open");
+      } else {
+        mediumDrawer.setAttribute("open", true);
+      }
+    });
+  });
+
+  smallButtons.forEach((button) => {
+    button.addEventListener("click", () => {
+      if (smallDrawer.hasAttribute("open")) {
+        smallDrawer.removeAttribute("open");
+      } else {
+        smallDrawer.setAttribute("open", true);
+      }
+    });
+  });
+}
+
+function initNestedExample() {
+  const buttons = [
+    document.querySelector("#openNested"),
+    document.querySelector("#closeNested"),
+  ];
+  const drawer = document.querySelector("#nestedDrawer");
+
+  drawer.triggerElement = buttons[0];
+  buttons[1].addEventListener("click", () => {
+    drawer.removeAttribute("open");
+  });
+}
+
+function initPlacementExample() {
+  const defaultButtons = [
+    document.querySelector("#openDefaultSlide"),
+    document.querySelector("#closeDefaultSlide"),
+  ];
+  const defaultDrawer = document.querySelector("#defaultSlideDrawer");
+
+  defaultButtons.forEach((button) => {
+    button.addEventListener("click", () => {
+      if (defaultDrawer.hasAttribute("open")) {
+        defaultDrawer.removeAttribute("open");
+      } else {
+        defaultDrawer.setAttribute("open", true);
+      }
+    });
+  });
+
+  const leftButtons = [
+    document.querySelector("#openLeftSlide"),
+    document.querySelector("#closeLeftSlide"),
+  ];
+  const leftDrawer = document.querySelector("#leftSlideDrawer");
+
+  leftButtons.forEach((button) => {
+    button.addEventListener("click", () => {
+      if (leftDrawer.hasAttribute("open")) {
+        leftDrawer.removeAttribute("open");
+      } else {
+        leftDrawer.setAttribute("open", true);
+      }
+    });
+  });
+
+  const topButtons = [
+    document.querySelector("#openTopSlide"),
+    document.querySelector("#closeTopSlide"),
+  ];
+  const topDrawer = document.querySelector("#topSlideDrawer");
+
+  topButtons.forEach((button) => {
+    button.addEventListener("click", () => {
+      if (topDrawer.hasAttribute("open")) {
+        topDrawer.removeAttribute("open");
+      } else {
+        topDrawer.setAttribute("open", true);
+      }
+    });
+  });
+
+  const bottomButtons = [
+    document.querySelector("#openBottomSlide"),
+    document.querySelector("#closeBottomSlide"),
+  ];
+  const bottomDrawer = document.querySelector("#bottomSlideDrawer");
+
+  bottomButtons.forEach((button) => {
+    button.addEventListener("click", () => {
+      if (bottomDrawer.hasAttribute("open")) {
+        bottomDrawer.removeAttribute("open");
+      } else {
+        bottomDrawer.setAttribute("open", true);
+      }
+    });
+  });
+}
+
+function initPopoverAndDropdownExample() {
+  const buttons = [
+    document.querySelector("#openPopAndDrop"),
+    document.querySelector("#closePopAndDrop"),
+  ];
+  const drawer = document.querySelector("#popover-drawer");
+
+  drawer.triggerElement = buttons[0];
+  buttons[1].addEventListener("click", () => {
+    drawer.removeAttribute("open");
+  });
+}
+
+function initSizeOptionsExample() {
+  const defaultButtons = [
+    document.querySelector("#openDefaultSize"),
+    document.querySelector("#closeDefaultSize"),
+  ];
+  const defaultDrawer = document.querySelector("#defaultSizeDrawer");
+
+  const mediumButtons = [
+    document.querySelector("#openMediumSize"),
+    document.querySelector("#closeMediumSize"),
+  ];
+  const mediumDrawer = document.querySelector("#mediumSizeDrawer");
+
+  const smallButtons = [
+    document.querySelector("#openSmallSize"),
+    document.querySelector("#closeSmallSize"),
+  ];
+  const smallDrawer = document.querySelector("#smallSizeDrawer");
+
+  defaultButtons.forEach((button) => {
+    button.addEventListener("click", () => {
+      if (defaultDrawer.hasAttribute("open")) {
+        defaultDrawer.removeAttribute("open");
+      } else {
+        defaultDrawer.setAttribute("open", true);
+      }
+    });
+  });
+
+  mediumButtons.forEach((button) => {
+    button.addEventListener("click", () => {
+      if (mediumDrawer.hasAttribute("open")) {
+        mediumDrawer.removeAttribute("open");
+      } else {
+        mediumDrawer.setAttribute("open", true);
+      }
+    });
+  });
+
+  smallButtons.forEach((button) => {
+    button.addEventListener("click", () => {
+      if (smallDrawer.hasAttribute("open")) {
+        smallDrawer.removeAttribute("open");
+      } else {
+        smallDrawer.setAttribute("open", true);
+      }
+    });
+  });
+}
+
+AuroDrawer.register();
+
+function initExamples(initCount) {
+  // biome-ignore lint/style/noParameterAssign: recursion counter
+  initCount = initCount || 0;
+
+  try {
+    initBasicExample();
+    initAccessibilityExample();
+    initModalExample();
+    initNestedExample();
+    initPopoverAndDropdownExample();
+    initSizeOptionsExample();
+    initPlacementExample();
+    initFullscreenBreakpointExample();
+    initCustomizedExample();
+  } 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 };