Added keyhandler
This commit is contained in:
parent
105dfc9e2d
commit
38c8c5c519
2
main.go
2
main.go
@ -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
|
||||||
|
|
||||||
|
@ -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;
|
||||||
|
@ -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,
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
|
@ -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;
|
||||||
|
Loading…
Reference in New Issue
Block a user