Added keyhandler

This commit is contained in:
Magnus Åhall 2023-06-20 07:59:54 +02:00
parent 105dfc9e2d
commit 38c8c5c519
5 changed files with 36 additions and 18 deletions

View File

@ -15,7 +15,7 @@ import (
_ "embed" _ "embed"
) )
const VERSION = "v0.1.0"; const VERSION = "v0.1.1";
const LISTEN_HOST = "0.0.0.0"; const LISTEN_HOST = "0.0.0.0";
const DB_SCHEMA = 2 const DB_SCHEMA = 2

View File

@ -18,7 +18,7 @@ body {
background-color: #fff; background-color: #fff;
} }
h1 { h1 {
color: #ecbf00; color: #abc837;
} }
#app { #app {
display: grid; display: grid;
@ -67,9 +67,9 @@ header {
display: grid; display: grid;
grid-template-columns: 1fr min-content min-content; grid-template-columns: 1fr min-content min-content;
align-items: center; align-items: center;
background: #ecbf00; background: #abc837;
padding: 0px; padding: 0px;
color: #3a2f00; color: #333c11;
} }
header.modified { header.modified {
background: #c84a37; background: #c84a37;
@ -108,7 +108,7 @@ header .menu {
.crumbs .crumb:after { .crumbs .crumb:after {
content: "•"; content: "•";
margin-left: 8px; margin-left: 8px;
color: #ecbf00; color: #abc837;
} }
.crumbs .crumb:last-child { .crumbs .crumb:last-child {
margin-right: 0; margin-right: 0;

View File

@ -16,6 +16,7 @@ export class NodeUI extends Component {
else else
this.goToNode(0, true) this.goToNode(0, true)
}) })
window.addEventListener('keydown', evt=>this.keyHandler(evt))
}//}}} }//}}}
render() {//{{{ render() {//{{{
if(this.node.value === null) if(this.node.value === null)
@ -70,12 +71,6 @@ export class NodeUI extends Component {
<${NodeContent} key=${node.ID} content=${node.Content} ref=${this.nodeContent} /> <${NodeContent} key=${node.ID} content=${node.Content} ref=${this.nodeContent} />
` : html``} ` : html``}
` `
/*
<div class="tree" onclick=${()=>this.retrieveTree()} style="color: #000">
<div class="node">Start</div>
${treeHTML}
</div>
*/
}//}}} }//}}}
componentDidMount() {//{{{ componentDidMount() {//{{{
let urlParams = new URLSearchParams(window.location.search) let urlParams = new URLSearchParams(window.location.search)
@ -87,6 +82,34 @@ export class NodeUI extends Component {
}) })
}//}}} }//}}}
keyHandler(evt) {//{{{
let handled = true
switch(evt.key.toUpperCase()) {
case 'S':
if(!evt.ctrlKey) {
handled = false
break
}
this.saveNode()
break
case 'N':
if(!evt.ctrlKey && !evt.AltKey) {
handled = false
break
}
this.createNode()
break
default:
handled = false
}
if(handled) {
evt.preventDefault()
evt.stopPropagation()
}
}//}}}
showMenu() {//{{{ showMenu() {//{{{
this.menu.value = true this.menu.value = true
}//}}} }//}}}
@ -121,10 +144,6 @@ export class NodeUI extends Component {
}//}}} }//}}}
saveNode() {//{{{ saveNode() {//{{{
let content = this.nodeContent.current.contentDiv.current.value let content = this.nodeContent.current.contentDiv.current.value
content = content
.replaceAll("\r", "")
.replaceAll("<br>", "")
this.props.app.request('/node/update', { this.props.app.request('/node/update', {
NodeID: this.node.value.ID, NodeID: this.node.value.ID,
Content: content, Content: content,

View File

@ -186,7 +186,6 @@ header {
} }
&:invalid { &:invalid {
//background: #eee;
border-bottom: 1px solid #eee; border-bottom: 1px solid #eee;
border-radius: 8px; border-radius: 8px;
} }

View File

@ -1,5 +1,5 @@
@fontsize: 14pt; @fontsize: 14pt;
@background: #fff; @background: #fff;
@accent_1: #ecbf00; @accent_1: #abc837;
@accent_2: #abc837; @accent_2: #ecbf00;
@accent_3: #c84a37; @accent_3: #c84a37;