Compare commits
No commits in common. "9c07611f95b581b0d24154771260c3aae1db03cf" and "28111cc8eb93b9ac8b1bbac45ceb8a2dabc87f64" have entirely different histories.
9c07611f95
...
28111cc8eb
6 changed files with 199 additions and 113 deletions
2
main.go
2
main.go
|
|
@ -23,7 +23,7 @@ import (
|
|||
"text/template"
|
||||
)
|
||||
|
||||
const VERSION = "v12"
|
||||
const VERSION = "v11"
|
||||
const CONTEXT_USER = 1
|
||||
const SYNC_PAGINATION = 200
|
||||
|
||||
|
|
|
|||
|
|
@ -32,8 +32,6 @@ button {
|
|||
min-height: 100vh;
|
||||
|
||||
display: grid;
|
||||
|
||||
&.page-node {
|
||||
grid-template-areas:
|
||||
"tree-expander tree pad1 crumbs crumbs pad2"
|
||||
"tree-expander tree pad1 name functions pad2"
|
||||
|
|
@ -59,28 +57,6 @@ button {
|
|||
min-content
|
||||
/* Content */
|
||||
1fr;
|
||||
}
|
||||
|
||||
&.page-history {
|
||||
grid-template-areas:
|
||||
"tree-expander tree pad1 n2-pagehistory pad2"
|
||||
;
|
||||
|
||||
grid-template-columns:
|
||||
/* Tree-expander */
|
||||
var(--tree-expander)
|
||||
/* Tree */
|
||||
min-content
|
||||
/* pad1 */
|
||||
32px
|
||||
/* Content */
|
||||
1fr
|
||||
/* pad2 */
|
||||
32px;
|
||||
|
||||
grid-template-rows: 1fr;
|
||||
}
|
||||
|
||||
|
||||
/* Tree expander is collapsed as default */
|
||||
--tree-expander: 0px;
|
||||
|
|
@ -247,10 +223,11 @@ button {
|
|||
|
||||
&.history {
|
||||
#page-history {
|
||||
display: grid;
|
||||
grid-area: n2-pagehistory;
|
||||
display: contents;
|
||||
|
||||
n2-pagehistory {}
|
||||
n2-pagehistory {
|
||||
grid-area: content;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -538,3 +515,143 @@ dialog.op {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
n2-pagehistory {
|
||||
|
||||
.back,
|
||||
.node-name {
|
||||
display: grid;
|
||||
grid-template-columns: min-content 1fr;
|
||||
grid-gap: 8px;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.group-label {
|
||||
font-weight: bold;
|
||||
background-color: #444;
|
||||
color: #fff;
|
||||
padding: 8px 32px;
|
||||
display: inline-block;
|
||||
margin-left: 32px;
|
||||
transform: translateY(14px);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.group {
|
||||
border: 1px solid #ccc;
|
||||
padding: 32px;
|
||||
margin-bottom: 32px;
|
||||
border-radius: 8px;
|
||||
background-color: #fafafa;
|
||||
|
||||
box-shadow:
|
||||
rgba(0, 0, 0, 0.4) 0px 2px 4px,
|
||||
rgba(0, 0, 0, 0.3) 0px 7px 13px -3px,
|
||||
rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
|
||||
}
|
||||
|
||||
.el-stats {
|
||||
margin-bottom: 16px;
|
||||
display: grid;
|
||||
grid-template-columns: min-content 1fr;
|
||||
grid-gap: 8px 12px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.el-fetch-history-progress {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.el-back-image,
|
||||
.el-back-text {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.el-node-name {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.el-nodes {
|
||||
grid-column: 1 / -1;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: min-content minmax(min-content, max-content) min-content 1fr;
|
||||
|
||||
background-color: var(--line-color);
|
||||
gap: 1px;
|
||||
border: 1px solid var(--line-color);
|
||||
|
||||
n2-pagehistorynode>* {
|
||||
padding: 8px 12px;
|
||||
background-color: #fff;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
n2-pagehistorynode {
|
||||
|
||||
&.selected .el-index:after {
|
||||
position: absolute;
|
||||
left: -20px;
|
||||
|
||||
content: '>';
|
||||
color: var(--color1);
|
||||
font-weight: bold;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.el-index {
|
||||
position: relative;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.el-updated {
|
||||
white-space: initial;
|
||||
}
|
||||
|
||||
.el-date {
|
||||
white-space: nowrap;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.el-time {
|
||||
white-space: nowrap;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.el-name {
|
||||
white-space: initial;
|
||||
/*overflow-wrap: anywhere;*/
|
||||
word-break: break-all;
|
||||
color: var(--color1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-pagination {
|
||||
grid-column: 1 / -1;
|
||||
margin-top: 16px;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, min-content);
|
||||
grid-gap: 16px;
|
||||
align-items: center;
|
||||
white-space: nowrap;
|
||||
user-select: none;
|
||||
|
||||
.el-prev,
|
||||
.el-next {
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
border: 1px solid #aaa;
|
||||
background-color: #eee;
|
||||
padding: 8px 16px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -30,18 +30,11 @@ export class App {
|
|||
})
|
||||
|
||||
_mbus.subscribe('SHOW_PAGE', ({ detail: { data: { page } } }) => {
|
||||
let classList = document.querySelector('#main-page').classList
|
||||
const classList = document.querySelector('#main-page').classList
|
||||
classList.forEach(e =>
|
||||
classList.remove(e)
|
||||
)
|
||||
classList.add(page)
|
||||
|
||||
classList = document.querySelector('#notes2').classList
|
||||
classList.forEach(e => {
|
||||
if (e.startsWith('page-'))
|
||||
classList.remove(e)
|
||||
})
|
||||
classList.add('page-'+page)
|
||||
})
|
||||
|
||||
window.addEventListener('keydown', event => this.keyHandler(event))
|
||||
|
|
|
|||
|
|
@ -24,7 +24,6 @@ export class N2PageHistory extends CustomHTMLElement {
|
|||
<h1 data-el="node-name"></h1>
|
||||
</div>
|
||||
|
||||
<div class="column-1">
|
||||
<div class="group-label">Actions</div>
|
||||
<div class="group">
|
||||
<button data-el="download-history">Fetch all history from server</button>
|
||||
|
|
@ -50,14 +49,8 @@ export class N2PageHistory extends CustomHTMLElement {
|
|||
<div data-el="next">></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column-2">
|
||||
<div class="group-label">Document</div>
|
||||
<div class="group">
|
||||
<div data-el="node-markdown"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div data-el="markdown-content"></div>
|
||||
`
|
||||
}// }}}
|
||||
|
||||
|
|
@ -87,10 +80,6 @@ export class N2PageHistory extends CustomHTMLElement {
|
|||
|
||||
_mbus.subscribe('HISTORY_NODE_SELECTED', (event) => {
|
||||
this.selectedNode = event.detail.data.historyNode
|
||||
|
||||
// Any selected history node is rendered with markdown.
|
||||
const marked = new MarkedPosition()
|
||||
this.elNodeMarkdown.innerHTML = marked.parse(this.selectedNode?.node.content())
|
||||
})
|
||||
}// }}}
|
||||
async render(keepFetchHistoryProgress) {// {{{
|
||||
|
|
@ -122,6 +111,12 @@ export class N2PageHistory extends CustomHTMLElement {
|
|||
if (!this.selectedNode) {
|
||||
this.elNodes.firstElementChild?.select()
|
||||
}
|
||||
|
||||
// Any selected history node is rendered with markdown.
|
||||
/*
|
||||
this.marked = new MarkedPosition()
|
||||
this.elNodeMarkdown.innerHTML = this.marked.parse(this.elNodeContent.value)
|
||||
*/
|
||||
}// }}}
|
||||
|
||||
async useNode(node) {// {{{
|
||||
|
|
@ -133,35 +128,23 @@ export class N2PageHistory extends CustomHTMLElement {
|
|||
this.pages = Math.ceil(this.nodesTotal / N2PageHistory.PAGESIZE)
|
||||
}// }}}
|
||||
keyHandler(event) {// {{{
|
||||
let handled = true
|
||||
switch (event.key) {
|
||||
case 'ArrowLeft':
|
||||
this.prevPage()
|
||||
break
|
||||
|
||||
case 'ArrowRight':
|
||||
this.nextPage()
|
||||
break
|
||||
|
||||
case 'ArrowUp':
|
||||
const prevNode = this.selectedNode?.previousElementSibling
|
||||
if (prevNode)
|
||||
prevNode.select()
|
||||
break
|
||||
|
||||
case 'ArrowDown':
|
||||
const nextNode = this.selectedNode?.nextElementSibling
|
||||
if (nextNode)
|
||||
nextNode.select()
|
||||
break
|
||||
|
||||
default:
|
||||
handled = false
|
||||
}
|
||||
|
||||
if (handled) {
|
||||
event.stopPropagation()
|
||||
event.preventDefault()
|
||||
}
|
||||
}// }}}
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@ const CACHED_ASSETS = [
|
|||
'/css/{{ .VERSION }}/main.css',
|
||||
'/css/{{ .VERSION }}/markdown.css',
|
||||
'/css/{{ .VERSION }}/notes2.css',
|
||||
'/css/{{ .VERSION }}/page_history.css',
|
||||
'/css/{{ .VERSION }}/theme.css',
|
||||
|
||||
'/images/{{ .VERSION }}/collapsed.svg',
|
||||
|
|
@ -120,13 +119,9 @@ self.addEventListener('activate', event => {
|
|||
})
|
||||
|
||||
self.addEventListener('fetch', event => {
|
||||
// The fetch event is also seeing requests to other domains.
|
||||
// Just let the browser handle those for itself.
|
||||
const ourDomain = event.request.url.startsWith(self.location.origin)
|
||||
if (!ourDomain)
|
||||
return event
|
||||
// console.debug('SERVICE WORKER: fetch', event.request.url)
|
||||
|
||||
if (`{{ .DevMode }}` == 'true')
|
||||
if ({{ .DevMode }})
|
||||
return event
|
||||
|
||||
event.respondWith(fetchAsset(event))
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
{{ define "page" }}
|
||||
<!-- page-node -->
|
||||
<div id="notes2" class="page-history">
|
||||
<div id="notes2">
|
||||
<div id="tree-expander" onclick="window._mbus.dispatch('TREE_EXPANSION', { expand: true })">></div>
|
||||
<div id="tree" tabindex=0></div>
|
||||
|
||||
|
|
@ -25,7 +24,6 @@
|
|||
</div>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="/css/{{ .VERSION }}/notes2.css">
|
||||
<link rel="stylesheet" type="text/css" href="/css/{{ .VERSION }}/page_history.css">
|
||||
|
||||
<script type="module">
|
||||
import {NodeStore} from '/js/{{ .VERSION }}/node_store.mjs'
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue