Separate HTML and Javascript

2 files changed, 51 insertions, 52 deletions

diff --git a/html/template.html b/html/template.html
index 080c07d..477539e 100644
--- a/html/template.html
+++ b/html/template.html
@@ -51,58 +51,7 @@ print("This is just some example code!")
 			</a>
 		</main>
 
-		<script>
-			// 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) {
-				console.log("State is now " + 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";
-						}
-					}
-				}
-			}
-		</script>
+		<script src="../js/xengineering.js"></script>
 
 	</body>
 
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";
+      }
+    }
+  }
+}