demo-template.js 1.0 KB

123456789101112131415161718192021222324
  1. const toggleDir = () => {
  2. document.dir = document.dir === "rtl" ? "ltr" : "rtl";
  3. };
  4. const toggleTheme = () => {
  5. document.body.classList.toggle("calcite-theme-dark");
  6. };
  7. const toggleDom = (event) => {
  8. const mover = document.querySelector("demo-dom-swapper");
  9. const switchEl = event.currentTarget;
  10. if (switchEl.checked) {
  11. mover.moveTo("shadow");
  12. }
  13. else {
  14. mover.moveTo("light");
  15. }
  16. };
  17. const loadDemoToggles = () => {
  18. document.querySelectorAll("h1:not(#demo-heading)").forEach((h1) => h1.remove());
  19. document.getElementById("demo-heading").textContent = document.title;
  20. document.getElementById("toggle-dir").addEventListener("calciteSwitchChange", toggleDir);
  21. document.getElementById("toggle-theme").addEventListener("calciteSwitchChange", toggleTheme);
  22. document.getElementById("toggle-dom").addEventListener("calciteSwitchChange", toggleDom);
  23. };
  24. document.readyState === "loading" ? document.addEventListener("DOMContentLoaded", loadDemoToggles) : loadDemoToggles();