Split files

architype.css

@@ -0,0 +1,47 @@
+body {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+
+  margin: 0;
+
+  font-family: 'Courier', monospace;
+}
+
+#definition {
+  list-style: none;
+
+  margin: 0;
+  padding: 0;
+
+  height: 100%;
+  width: 400px;
+
+  overflow-y: scroll;
+}
+
+#definition li {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: left;
+  white-space: pre;
+
+  padding: 3px;
+  border: 5px dotted rgba(0,0,0,0.0);
+}
+
+#definition li.node {
+  background-color: #daf0db;
+}
+
+#definition li.selected {
+  border-color: red;
+}
+
+#definition li input {
+  background-color: rgba(255,255,255,0.8);
+  border: 1px solid black;
+}

architype.js

@@ -0,0 +1,132 @@
+let def = document.getElementById('definition');
+
+document.addEventListener('keydown', e => {
+  console.log(e.key);
+
+  let sel = def.getElementsByClassName('selected').item(0);
+
+  switch (e.key) {
+    case 'd':
+      if (sel) {
+        let newSel = sel.nextElementSibling || sel.previousElementSibling;
+        if (newSel) {
+          newSel.classList.add('selected');
+        }
+        sel.remove();
+      }
+      break;
+
+    case 'D':
+      while (sel.nextElementSibling) {
+        sel.nextElementSibling.remove();
+      }
+      if (sel.previousElementSibling) {
+        sel.previousElementSiblist.classList.add('selected');
+      }
+      sel.remove();
+      break;
+
+    case 'j':
+    case 'ArrowDown':
+      if (sel) {
+        let newSel = sel.nextElementSibling || def.firstElementChild;
+        sel.classList.remove('selected');
+        newSel.classList.add('selected');
+      }
+      break;
+
+    case 'k':
+    case 'ArrowUp':
+      if (sel) {
+        let newSel = sel.previousElementSibling || def.lastElementChild;
+        sel.classList.remove('selected');
+        newSel.classList.add('selected');
+      }
+      break;
+
+    case 'PageUp':
+      if (sel) {
+        let pageCount = Math.floor(def.clientHeight / sel.clientHeight) - 1;
+        let newSel = sel;
+        for (let i = 0; i < pageCount; ++i) {
+          newSel = newSel.previousElementSibling || def.firstElementChild;
+        }
+        sel.classList.remove('selected');
+        newSel.classList.add('selected');
+      }
+      break;
+
+    case 'PageDown':
+      if (sel) {
+        let pageCount = Math.floor(def.clientHeight / sel.clientHeight) - 1;
+        let newSel = sel;
+        for (let i = 0; i < pageCount; ++i) {
+          newSel = newSel.nextElementSibling || def.lastElementChild;
+        }
+        sel.classList.remove('selected');
+        newSel.classList.add('selected');
+      }
+      break;
+
+    case 'Home':
+      if (sel) {
+        sel.classList.remove('selected');
+        def.firstElementChild.classList.add('selected');
+      }
+      break;
+
+    case 'G': // vi compat
+    case 'End':
+      if (sel) {
+        sel.classList.remove('selected');
+        def.lastElementChild.classList.add('selected');
+      }
+      break;
+
+    case 'n':
+      {
+        let node = document.createElement('li');
+        node.innerText = 'Node: ';
+
+        let input = document.createElement('input');
+        input.type = 'text';
+        node.appendChild(input);
+
+        node.classList.add('node');
+        def.insertBefore(node, sel ? sel.nextSibling : null);
+
+        if (sel) {
+          sel.classList.remove('selected');
+        }
+        node.classList.add('selected');
+      }
+      break;
+
+    case 'N':
+      {
+        let node = document.createElement('li');
+        node.innerText = 'Node: ';
+
+        let input = document.createElement('input');
+        input.type = 'text';
+        node.appendChild(input);
+
+        node.classList.add('node');
+        def.insertBefore(node, sel);
+
+        if (sel) {
+          sel.classList.remove('selected');
+        }
+        node.classList.add('selected');
+      }
+      break;
+  }
+
+  sel = def.getElementsByClassName('selected').item(0);
+
+  if (sel) {
+    sel.scrollIntoView({
+      block: 'center',
+    });
+  }
+});

index.html

@@ -5,192 +5,14 @@
 	<meta name=viewport content="width=device-width, initial-scale=1.0">
 	<title>Architype</title>
 	<style>
-body {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-
-  margin: 0;
-
-  font-family: 'Courier', monospace;
-}
-
-#definition {
-  list-style: none;
-
-  margin: 0;
-  padding: 0;
-
-  height: 100%;
-  width: 400px;
-
-  overflow-y: scroll;
-}
-
-#definition li {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: left;
-  white-space: pre;
-
-  padding: 3px;
-  border: 5px dotted rgba(0,0,0,0.0);
-}
-
-#definition li.node {
-  background-color: #daf0db;
-}
-
-#definition li.selected {
-  border-color: red;
-}
-
-#definition li input {
-  background-color: rgba(255,255,255,0.8);
-  border: 1px solid black;
-}
-	</style>
+<!--# include file="architype.css" -->
+  </style>
 </head>
 
 <body>
 <ul id="definition">
 </ul>
 <script>
-
-let def = document.getElementById('definition');
-
-document.addEventListener('keydown', e => {
-  console.log(e.key);
-
-  let sel = def.getElementsByClassName('selected').item(0);
-
-  switch (e.key) {
-    case 'd':
-      if (sel) {
-        let newSel = sel.nextElementSibling || sel.previousElementSibling;
-        if (newSel) {
-          newSel.classList.add('selected');
-        }
-        sel.remove();
-      }
-      break;
-
-    case 'D':
-      while (sel.nextElementSibling) {
-        sel.nextElementSibling.remove();
-      }
-      if (sel.previousElementSibling) {
-        sel.previousElementSiblist.classList.add('selected');
-      }
-      sel.remove();
-      break;
-
-    case 'j':
-    case 'ArrowDown':
-      if (sel) {
-        let newSel = sel.nextElementSibling || def.firstElementChild;
-        sel.classList.remove('selected');
-        newSel.classList.add('selected');
-      }
-      break;
-
-    case 'k':
-    case 'ArrowUp':
-      if (sel) {
-        let newSel = sel.previousElementSibling || def.lastElementChild;
-        sel.classList.remove('selected');
-        newSel.classList.add('selected');
-      }
-      break;
-
-    case 'PageUp':
-      if (sel) {
-        let pageCount = Math.floor(def.clientHeight / sel.clientHeight) - 1;
-        let newSel = sel;
-        for (let i = 0; i < pageCount; ++i) {
-          newSel = newSel.previousElementSibling || def.firstElementChild;
-        }
-        sel.classList.remove('selected');
-        newSel.classList.add('selected');
-      }
-      break;
-
-    case 'PageDown':
-      if (sel) {
-        let pageCount = Math.floor(def.clientHeight / sel.clientHeight) - 1;
-        let newSel = sel;
-        for (let i = 0; i < pageCount; ++i) {
-          newSel = newSel.nextElementSibling || def.lastElementChild;
-        }
-        sel.classList.remove('selected');
-        newSel.classList.add('selected');
-      }
-      break;
-
-    case 'Home':
-      if (sel) {
-        sel.classList.remove('selected');
-        def.firstElementChild.classList.add('selected');
-      }
-      break;
-
-    case 'G': // vi compat
-    case 'End':
-      if (sel) {
-        sel.classList.remove('selected');
-        def.lastElementChild.classList.add('selected');
-      }
-      break;
-
-    case 'n':
-      {
-        let node = document.createElement('li');
-        node.innerText = 'Node: ';
-
-        let input = document.createElement('input');
-        input.type = 'text';
-        node.appendChild(input);
-
-        node.classList.add('node');
-        def.insertBefore(node, sel ? sel.nextSibling : null);
-
-        if (sel) {
-          sel.classList.remove('selected');
-        }
-        node.classList.add('selected');
-      }
-      break;
-
-    case 'N':
-      {
-        let node = document.createElement('li');
-        node.innerText = 'Node: ';
-
-        let input = document.createElement('input');
-        input.type = 'text';
-        node.appendChild(input);
-
-        node.classList.add('node');
-        def.insertBefore(node, sel);
-
-        if (sel) {
-          sel.classList.remove('selected');
-        }
-        node.classList.add('selected');
-      }
-      break;
-  }
-
-  sel = def.getElementsByClassName('selected').item(0);
-
-  if (sel) {
-    sel.scrollIntoView({
-      block: 'center',
-    });
-  }
-});
+<!--# include file="architype.js" -->
 </script>
 </body>