Separate HTML and Javascript

1 files changed, 50 insertions, 0 deletions

diff --git a/js/xengineering.js b/js/xengineering.js
new file mode 100644
index 0000000..9d10026
--- /dev/null
+++ b/js/xengineering.js
@@ -0,0 +1,50 @@
+// vim: shiftwidth=2 tabstop=2 expandtab
+
+// define menu state
+const MenuState = {
+  Desktop: "Desktop",
+  MobileCollapsed: "MobileCollapsed",
+  MobileExpanded: "MobileExpanded"
+}
+var state;
+
+// init menu state and add mediaChange handler
+var isMobile = window.matchMedia("(max-width: 767px)");
+mediaChange(isMobile);
+isMobile.addListener(mediaChange)
+
+function mediaChange(isMobile) {
+  if (isMobile.matches) {
+    state = MenuState.MobileCollapsed;
+    handleState(state);
+  } else {
+    state = MenuState.Desktop;
+    handleState(state);
+  }
+}
+
+function toggleMenu() {
+  switch (state) {
+    case MenuState.MobileCollapsed:
+      state = MenuState.MobileExpanded;
+      handleState(state);
+      break;
+    case MenuState.MobileExpanded:
+      state = MenuState.MobileCollapsed;
+      handleState(state);
+      break;
+  }
+}
+
+function handleState(state) {
+  var items = document.getElementsByTagName("a");
+  for(var i=0; i<items.length; i++) {
+    if (items[i].parentNode.tagName == "NAV") {
+      if (state == MenuState.MobileCollapsed) {
+        items[i].style.display = "none";
+      } else {
+        items[i].style.display = "block";
+      }
+    }
+  }
+}