2019-05-22 22:50:27 +00:00
|
|
|
<!doctype html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
|
|
|
|
|
<head>
|
|
|
|
|
<meta name=viewport content="width=device-width, initial-scale=1.0">
|
|
|
|
|
<title>Architype</title>
|
|
|
|
|
<style>
|
2019-05-23 01:24:30 -07:00
|
|
|
body {
|
|
|
|
|
position: fixed;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
bottom: 0;
|
2019-05-23 09:10:44 +00:00
|
|
|
|
2019-05-23 01:24:30 -07:00
|
|
|
margin: 0;
|
2019-05-23 09:10:44 +00:00
|
|
|
|
|
|
|
|
font-family: 'Courier', monospace;
|
2019-05-23 01:24:30 -07:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#definition {
|
|
|
|
|
list-style: none;
|
2019-05-23 09:10:44 +00:00
|
|
|
|
2019-05-23 01:24:30 -07:00
|
|
|
margin: 0;
|
|
|
|
|
padding: 0;
|
2019-05-23 09:10:44 +00:00
|
|
|
|
2019-05-23 01:24:30 -07:00
|
|
|
height: 100%;
|
2019-05-23 09:10:44 +00:00
|
|
|
width: 400px;
|
|
|
|
|
|
2019-05-23 01:24:30 -07:00
|
|
|
overflow-y: scroll;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#definition li {
|
2019-05-23 09:10:44 +00:00
|
|
|
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;
|
2019-05-23 01:24:30 -07:00
|
|
|
}
|
|
|
|
|
|
2019-05-23 09:10:44 +00:00
|
|
|
#definition li input {
|
|
|
|
|
background-color: rgba(255,255,255,0.8);
|
|
|
|
|
border: 1px solid black;
|
2019-05-23 01:24:30 -07:00
|
|
|
}
|
2019-05-22 22:50:27 +00:00
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
<ul id="definition">
|
|
|
|
|
</ul>
|
|
|
|
|
<script>
|
2019-05-23 01:24:30 -07:00
|
|
|
|
|
|
|
|
let def = document.getElementById('definition');
|
|
|
|
|
|
2019-05-22 22:50:27 +00:00
|
|
|
document.addEventListener('keydown', e => {
|
2019-05-23 01:24:30 -07:00
|
|
|
console.log(e.key);
|
|
|
|
|
|
2019-05-23 09:10:44 +00:00
|
|
|
let sel = def.getElementsByClassName('selected').item(0);
|
2019-05-23 01:24:30 -07:00
|
|
|
|
|
|
|
|
switch (e.key) {
|
|
|
|
|
case 'd':
|
2019-05-23 09:10:44 +00:00
|
|
|
if (sel) {
|
|
|
|
|
let newSel = sel.nextElementSibling || sel.previousElementSibling;
|
|
|
|
|
if (newSel) {
|
|
|
|
|
newSel.classList.add('selected');
|
|
|
|
|
}
|
|
|
|
|
sel.remove();
|
2019-05-23 01:24:30 -07:00
|
|
|
}
|
|
|
|
|
break;
|
|
|
|
|
|
|
|
|
|
case 'D':
|
2019-05-23 09:10:44 +00:00
|
|
|
while (sel.nextElementSibling) {
|
|
|
|
|
sel.nextElementSibling.remove();
|
|
|
|
|
}
|
|
|
|
|
if (sel.previousElementSibling) {
|
|
|
|
|
sel.previousElementSiblist.classList.add('selected');
|
2019-05-23 01:24:30 -07:00
|
|
|
}
|
2019-05-23 09:10:44 +00:00
|
|
|
sel.remove();
|
2019-05-23 01:24:30 -07:00
|
|
|
break;
|
|
|
|
|
|
|
|
|
|
case 'j':
|
|
|
|
|
case 'ArrowDown':
|
2019-05-23 09:10:44 +00:00
|
|
|
if (sel) {
|
|
|
|
|
let newSel = sel.nextElementSibling || def.firstElementChild;
|
|
|
|
|
sel.classList.remove('selected');
|
|
|
|
|
newSel.classList.add('selected');
|
|
|
|
|
}
|
2019-05-23 01:24:30 -07:00
|
|
|
break;
|
|
|
|
|
|
|
|
|
|
case 'k':
|
|
|
|
|
case 'ArrowUp':
|
2019-05-23 09:10:44 +00:00
|
|
|
if (sel) {
|
|
|
|
|
let newSel = sel.previousElementSibling || def.lastElementChild;
|
|
|
|
|
sel.classList.remove('selected');
|
|
|
|
|
newSel.classList.add('selected');
|
|
|
|
|
}
|
2019-05-23 01:24:30 -07:00
|
|
|
break;
|
|
|
|
|
|
|
|
|
|
case 'PageUp':
|
2019-05-23 09:10:44 +00:00
|
|
|
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');
|
2019-05-23 01:24:30 -07:00
|
|
|
}
|
|
|
|
|
break;
|
|
|
|
|
|
|
|
|
|
case 'PageDown':
|
2019-05-23 09:10:44 +00:00
|
|
|
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');
|
2019-05-23 01:24:30 -07:00
|
|
|
}
|
|
|
|
|
break;
|
|
|
|
|
|
|
|
|
|
case 'Home':
|
2019-05-23 09:10:44 +00:00
|
|
|
if (sel) {
|
|
|
|
|
sel.classList.remove('selected');
|
|
|
|
|
def.firstElementChild.classList.add('selected');
|
|
|
|
|
}
|
2019-05-23 01:24:30 -07:00
|
|
|
break;
|
|
|
|
|
|
|
|
|
|
case 'G': // vi compat
|
|
|
|
|
case 'End':
|
2019-05-23 09:10:44 +00:00
|
|
|
if (sel) {
|
|
|
|
|
sel.classList.remove('selected');
|
|
|
|
|
def.lastElementChild.classList.add('selected');
|
|
|
|
|
}
|
2019-05-23 01:24:30 -07:00
|
|
|
break;
|
|
|
|
|
|
|
|
|
|
case 'n':
|
|
|
|
|
{
|
|
|
|
|
let node = document.createElement('li');
|
2019-05-23 09:10:44 +00:00
|
|
|
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');
|
2019-05-23 01:24:30 -07:00
|
|
|
}
|
|
|
|
|
break;
|
|
|
|
|
|
|
|
|
|
case 'N':
|
|
|
|
|
{
|
|
|
|
|
let node = document.createElement('li');
|
2019-05-23 09:10:44 +00:00
|
|
|
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');
|
2019-05-23 01:24:30 -07:00
|
|
|
}
|
|
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
|
2019-05-23 09:10:44 +00:00
|
|
|
sel = def.getElementsByClassName('selected').item(0);
|
|
|
|
|
|
|
|
|
|
if (sel) {
|
|
|
|
|
sel.scrollIntoView({
|
|
|
|
|
block: 'center',
|
|
|
|
|
});
|
2019-05-23 01:24:30 -07:00
|
|
|
}
|
2019-05-22 22:50:27 +00:00
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
