plugins.js

  1function detectOS() {
  2  var userAgent = navigator.userAgent;
  3
  4  var platform = navigator.platform;
  5  var macosPlatforms = ["Macintosh", "MacIntel", "MacPPC", "Mac68K"];
  6  var windowsPlatforms = ["Win32", "Win64", "Windows", "WinCE"];
  7  var iosPlatforms = ["iPhone", "iPad", "iPod"];
  8
  9  if (macosPlatforms.indexOf(platform) !== -1) {
 10    return "Mac";
 11  } else if (iosPlatforms.indexOf(platform) !== -1) {
 12    return "iOS";
 13  } else if (windowsPlatforms.indexOf(platform) !== -1) {
 14    return "Windows";
 15  } else if (/Android/.test(userAgent)) {
 16    return "Android";
 17  } else if (/Linux/.test(platform)) {
 18    return "Linux";
 19  }
 20
 21  return "Unknown";
 22}
 23
 24// Usage
 25var os = detectOS();
 26console.log("Operating System:", os);
 27
 28(function updateKeybindings() {
 29  const os = detectOS();
 30  const isMac = os === "Mac" || os === "iOS";
 31
 32  function processKeybinding(element) {
 33    const [macKeybinding, linuxKeybinding] = element.textContent.split("|");
 34    element.textContent = isMac ? macKeybinding : linuxKeybinding;
 35    element.classList.add("keybinding");
 36  }
 37
 38  function walkDOM(node) {
 39    if (node.nodeType === Node.ELEMENT_NODE) {
 40      if (node.tagName.toLowerCase() === "kbd") {
 41        processKeybinding(node);
 42      } else {
 43        Array.from(node.children).forEach(walkDOM);
 44      }
 45    }
 46  }
 47
 48  // Start the process from the body
 49  walkDOM(document.body);
 50})();
 51
 52function darkModeToggle() {
 53  var html = document.documentElement;
 54  var themeToggleButton = document.getElementById("theme-toggle");
 55  var themePopup = document.getElementById("theme-list");
 56  var themePopupButtons = themePopup.querySelectorAll("button");
 57
 58  function setTheme(theme) {
 59    html.setAttribute("data-theme", theme);
 60    html.setAttribute("data-color-scheme", theme);
 61    html.className = theme;
 62    localStorage.setItem("mdbook-theme", theme);
 63
 64    // Force a repaint to ensure the changes take effect in the client immediately
 65    document.body.style.display = "none";
 66    document.body.offsetHeight;
 67    document.body.style.display = "";
 68  }
 69
 70  themeToggleButton.addEventListener("click", function (event) {
 71    event.preventDefault();
 72    themePopup.style.display =
 73      themePopup.style.display === "block" ? "none" : "block";
 74  });
 75
 76  themePopupButtons.forEach(function (button) {
 77    button.addEventListener("click", function () {
 78      setTheme(this.id);
 79      themePopup.style.display = "none";
 80    });
 81  });
 82
 83  document.addEventListener("click", function (event) {
 84    if (
 85      !themePopup.contains(event.target) &&
 86      !themeToggleButton.contains(event.target)
 87    ) {
 88      themePopup.style.display = "none";
 89    }
 90  });
 91
 92  // Set initial theme
 93  var currentTheme = localStorage.getItem("mdbook-theme");
 94  if (currentTheme) {
 95    setTheme(currentTheme);
 96  } else {
 97    // If no theme is set, use the system's preference
 98    var systemPreference = window.matchMedia("(prefers-color-scheme: dark)")
 99      .matches
100      ? "dark"
101      : "light";
102    setTheme(systemPreference);
103  }
104
105  // Listen for system's preference changes
106  const darkModeMediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
107  darkModeMediaQuery.addEventListener("change", function (e) {
108    if (!localStorage.getItem("mdbook-theme")) {
109      setTheme(e.matches ? "dark" : "light");
110    }
111  });
112}