+ `
+ }// }}}
+ constructor() {// {{{
+ super(true)
+
+ document.addEventListener('dragover', e => {
+ this.style.left = `${e.clientX + 8}px`
+ this.style.top = `${e.clientY}px`
+ })
+
+ this.dragSource = null
+ }// }}}
+ start() {// {{{
+ this.style.display = 'block'
+ }// }}}
+ end() {// {{{
+ this.style.display = 'none'
+ }// }}}
+ icon(name) {// {{{
+ if (name != '')
+ name = '_' + name
+ this.elIcon.setAttribute('src', `/images/${_VERSION}/icon_drag${name}.svg`)
+ }// }}}
+ setSource(s) {// {{{
+ this.dragSource = s
+ }// }}}
+ getSource() {// {{{
+ return this.dragSource
+ }// }}}
+}
+
+customElements.define('n2-crumbs', N2Crumbs)
+customElements.define('n2-crumb', N2Crumb)
+customElements.define('n2-dragicon', N2DragIcon)
+
// vim: foldmethod=marker
diff --git a/static/js/lib/custom_html_element.mjs b/static/js/lib/custom_html_element.mjs
index 2cec808..d1fb7ae 100644
--- a/static/js/lib/custom_html_element.mjs
+++ b/static/js/lib/custom_html_element.mjs
@@ -1,7 +1,17 @@
+/* Use data-el or data-field attribute.
+ * Element with data-el="hum-ding" is accessible as this.elHumDing and fields with
+ * data-field="long-dong" as this.fieldLongDong.
+ *
+ * All field values can be retrieved with fieldValues() and uses the data-field attribute
+ * as LongDong as key.
+ */
+
export class CustomHTMLElement extends HTMLElement {
constructor(useShadow) {// {{{
super()
+ this._fields = new Map()
+
const workOn = useShadow ? this.attachShadow({ mode: 'open' }) : this
workOn.appendChild(this.constructor.tmpl.content.cloneNode(true))
workOn.querySelectorAll('*').forEach(el => {
@@ -9,6 +19,7 @@ export class CustomHTMLElement extends HTMLElement {
if (field !== undefined) {
const fieldName = this.toElementName('field', field)
this[fieldName] = el
+ this._fields.set(this.toElementName('', field), el)
}
const name = el.dataset.el
@@ -19,39 +30,22 @@ export class CustomHTMLElement extends HTMLElement {
}
})
}// }}}
+ allFields() {// {{{
+ return this._fields
+ }// }}}
+ fieldValues() {// {{{
+ const state = {}
+ for (const [name, field] of this._fields) {
+ if (field.tagName.toLowerCase() == 'input' && field.getAttribute('type').toLowerCase() == 'checkbox')
+ state[name] = field.checked
+ else
+ state[name] = field.value
+
+ }
+ return state
+ }// }}}
toElementName(prefix, str) {// {{{
str = prefix + '-' + str
return str.replace(/-(id|[a-z])/g, match => match.toUpperCase().replace('-', ''))
}// }}}
}
-
-export class StupidPreactCustomHTMLElement extends HTMLElement {
- constructor() {// {{{
- super()
-
- // Stupid stuff because of Preact.
- this.clonedNodes = this.constructor.tmpl.content.cloneNode(true)
- this.clonedNodes.querySelectorAll('*').forEach(el => {
- const field = el.dataset.field
- if (field !== undefined) {
- const fieldName = this.toElementName('field', field)
- this[fieldName] = el
- }
-
- const name = el.dataset.el
- if (name !== undefined) {
- const elName = this.toElementName('el', name)
- this[elName] = el
- el.classList.add('el-' + name)
- }
- })
- }// }}}
- toElementName(prefix, str) {// {{{
- str = prefix + '-' + str
- return str.replace(/-(id|[a-z])/g, match => match.toUpperCase().replace('-', ''))
- }// }}}
- connectedCallback() {// {{{
- // Stupid stuff because of Preact.
- this.appendChild(this.clonedNodes)
- }// }}}
-}
diff --git a/static/js/marked_position.mjs b/static/js/marked_position.mjs
index 62a6996..8c81eb4 100644
--- a/static/js/marked_position.mjs
+++ b/static/js/marked_position.mjs
@@ -92,7 +92,9 @@ function escapeHtmlEntities(html, encode) {// {{{
export class MarkedPosition {
constructor() {// {{{
- window.setpos = (event) => this.setpos(event)
+ window.marked_setpos = (event) => this.setpos(event)
+ window.marked_changecheckbox = (event) => this.changecheckbox(event)
+ window.marked_copy_to_clipboard = (event, tagname) => this.copy_to_clipboard(event, tagname)
this.render()
}// }}}
setpos(event) {// {{{
@@ -106,20 +108,61 @@ export class MarkedPosition {
}
})
}// }}}
+ changecheckbox(event) {// {{{
+ event.stopPropagation()
+ event.preventDefault()
+
+ _mbus.dispatch('MARKDOWN_CHANGE_CHECKBOX', {
+ checkbox: event.target,
+ position: {
+ start: event.target.closest('[data-offset-start]').dataset.offsetStart,
+ end: event.target.closest('[data-offset-start]').dataset.offsetEnd,
+ }
+ })
+ }// }}}
+ async copy_to_clipboard(event, tagname) {// {{{
+ if (!event.shiftKey)
+ return
+
+ try {
+ // Stop text selections on the page to the mouse pointer.
+ // Old selections are remove as well to give a cleaner view
+ // of the copied text/highlighting.
+ event.preventDefault()
+ event.stopPropagation()
+ window.getSelection().removeAllRanges()
+
+ const text = event.target.innerText
+ await navigator.clipboard.writeText(text)
+
+ const tagClasslist = event.target.closest(tagname).classList
+ tagClasslist.add('copy')
+ setTimeout(()=>tagClasslist.remove('copy'), 250)
+
+ } catch (err) {
+ console.error('Failed to copy: ', err)
+ alert('Failed to copy: ', err)
+ }
+ }// }}}
+
render() {// {{{
- const markedObject = this
this.marked = new Marked()
this.marked.use(markedTokenPosition())
this.marked.use({
renderer: {
heading(token) {
const content = this.parser.parseInline(token.tokens)
- return `
+ ${content} \n
+ \n
+
+ `
},
paragraph(token) {
const content = this.parser.parseInline(token.tokens)
- return `${content}
\n` + return `${content}
\n` }, list(token) { @@ -138,7 +181,7 @@ export class MarkedPosition { }, listitem(token) { - return ``
+ return ``
+ (token.escaped ? code : escapeHtmlEntities(code, true))
+ '
\n'
}
- return `'
+ (token.escaped ? code : escapeHtmlEntities(code, true))
@@ -161,7 +204,7 @@ export class MarkedPosition {
blockquote(token) {
const body = this.parser.parse(token.tokens)
- return `\n${body}
\n`
+ return `\n${body}
\n`
},
html(token) {
@@ -173,13 +216,13 @@ export class MarkedPosition {
},
hr(token) {
- return `
\n`
+ return `
\n`
},
checkbox(token) {
- return ` '
+ + 'type="checkbox"> '
},
table(token) {
@@ -222,7 +265,7 @@ export class MarkedPosition {
if (token.tokens.length > 0) {
const start = token.tokens[0].position.start.offset
const end = token.tokens[0].position.end.offset
- ofs = `ondblclick="setpos(event)" data-offset-start="${start}" data-offset-end="${end}"`
+ ofs = `ondblclick="marked_setpos(event)" data-offset-start="${start}" data-offset-end="${end}"`
}
const content = this.parser.parseInline(token.tokens);
@@ -234,23 +277,23 @@ export class MarkedPosition {
},
strong(token) {
- return `${this.parser.parseInline(token.tokens)}`
+ return `${this.parser.parseInline(token.tokens)}`
},
em(token) {
- return `${this.parser.parseInline(token.tokens)}`
+ return `${this.parser.parseInline(token.tokens)}`
},
codespan(token) {
- return `${escapeHtmlEntities(token.text, true)}`
+ return `${escapeHtmlEntities(token.text, true)}`
},
br(token) {
- return `
`
+ return `
`
},
del(token) {
- return `${this.parser.parseInline(token.tokens)}`
+ return `${this.parser.parseInline(token.tokens)}`
},
link(token) {
@@ -260,7 +303,7 @@ export class MarkedPosition {
return text
}
token.href = cleanHref
- let out = ' {
@@ -57,7 +61,7 @@ export class NodeStore {
break
case 6:
- nodesHistory = db.createObjectStore('nodes_history', { keyPath: ['UUID', 'Updated'] })
+ nodesHistory = db.createObjectStore('nodes_history', { keyPath: ['UUID', 'HistoryUUID'] })
break
case 7:
@@ -74,10 +78,9 @@ export class NodeStore {
req.onsuccess = (event) => {
this.db = event.target.result
this.sendQueue = new SimpleNodeStore(this.db, 'send_queue')
- this.nodesHistory = new SimpleNodeStore(this.db, 'nodes_history')
+ this.nodesHistory = new NodeHistoryStore(this.db, 'nodes_history')
this.files = new SimpleNodeStore(this.db, 'files')
- this.initializeRootNode()
- .then(() => resolve())
+ resolve()
}
req.onerror = (event) => {
@@ -85,40 +88,11 @@ export class NodeStore {
}
})
}//}}}
- initializeRootNode() {//{{{
- return new Promise((resolve, reject) => {
- // The root node is a magical node which displays as the first node if none is specified.
- // If not already existing, it will be created.
- const trx = this.db.transaction('nodes', 'readwrite')
- const nodes = trx.objectStore('nodes')
- const getRequest = nodes.get(ROOT_NODE)
- getRequest.onsuccess = (event) => {
- // Root node exists - nice!
- if (event.target.result !== undefined) {
- resolve(event.target.result)
- return
- }
-
- const putRequest = nodes.put({
- UUID: ROOT_NODE,
- Name: 'Notes2',
- Content: 'Hello, World!',
- Updated: new Date().toISOString(),
- ParentUUID: '',
- })
- putRequest.onsuccess = (event) => {
- resolve(event.target.result)
- }
- putRequest.onerror = (event) => {
- reject(event.target.error)
- }
- }
- getRequest.onerror = (event) => reject(event.target.error)
- })
- }//}}}
- purgeCache() {//{{{
- this.nodes = {}
- }//}}}
+ initializeSpecialNodes() {// {{{
+ this.nodes[ROOT_NODE] = new Node({ UUID: ROOT_NODE, Name: 'Start', Special: true }, -1)
+ this.nodes[DELETED_NODE] = new Node({ UUID: DELETED_NODE, Name: 'Deleted nodes', Special: true }, -1)
+ this.nodes[ORPHANED_NODE] = new Node({ UUID: ORPHANED_NODE, Name: 'Orphaned nodes', Special: true }, -1)
+ }// }}}
node(uuid, dataIfUndefined, newLevel) {//{{{
let n = this.nodes[uuid]
@@ -199,9 +173,7 @@ export class NodeStore {
}
Promise.all(hasChildrenPromises)
- .then(() => {
- resolve(nodes)
- })
+ .then(() => resolve(nodes))
}
req.onerror = (event) => reject(event.target.error)
})
@@ -249,6 +221,7 @@ export class NodeStore {
nodeStore = t.objectStore('nodes')
t.oncomplete = (_event) => {
+ console.log('complete')
resolve()
}
@@ -273,6 +246,14 @@ export class NodeStore {
}//}}}
get(uuid, suppliedNodestore) {//{{{
return new Promise((resolve, reject) => {
+ switch (uuid) {
+ case ROOT_NODE:
+ case DELETED_NODE:
+ case ORPHANED_NODE:
+ resolve(this.nodes[uuid])
+ return
+ }
+
// A nodestore can be provided in order to
// avoid creating new transactions.
let trx
@@ -310,6 +291,16 @@ export class NodeStore {
return
}
+ if (node.UUID === DELETED_NODE || node.ParentUUID === DELETED_NODE) {
+ resolve(accumulated)
+ return
+ }
+
+ if (node.UUID === ORPHANED_NODE || node.ParentUUID === ORPHANED_NODE) {
+ resolve(accumulated)
+ return
+ }
+
const getRequest = nodeParentIndex.get(node.ParentUUID)
getRequest.onsuccess = (event) => {
// Node not found in IndexedDB.
@@ -360,6 +351,7 @@ class SimpleNodeStore {
// Node to be moved is first stored in the new queue.
const req = store.put(node.data)
req.onsuccess = () => {
+ console.log('here')
resolve()
}
req.onerror = (event) => {
@@ -437,28 +429,91 @@ class SimpleNodeStore {
}//}}}
}
-export class StoreFile {
- static createFromFileObject(f) {
- const obj = new StoreFile()
- obj.name = f.name
- obj.size = f.size
- obj.mime = f.type
- return obj
- }
- constructor() {
- this.name = ''
- this.size = 0
- this.mime = ''
+class NodeHistoryStore extends SimpleNodeStore {
+ constructor(db, storeName) {//{{{
+ super(db, storeName)
+ }//}}}
+ count(uuid) {//{{{
+ if (uuid === undefined)
+ return super.count()
- this.objectURL = null // URL.createObjectURL(blob)
- }
- data() {
- return {
- }
- }
+ const index = this.db
+ .transaction(['nodes', this.storeName], 'readonly')
+ .objectStore(this.storeName)
+ .index('byUUID')
+
+ return new Promise((resolve, reject) => {
+ const request = index.count(uuid)
+ request.onsuccess = (event) => resolve(event.target.result)
+ request.onerror = (event) => reject(event.target.error)
+ })
+ }//}}}
+ hasNode(uuid, updated) {// {{{
+ return new Promise((resolve, reject) => {
+ const req = this.db
+ .transaction(['nodes', this.storeName], 'readonly')
+ .objectStore(this.storeName)
+ .getKey([uuid, updated])
+
+ req.onsuccess = (event) => {
+ resolve(event.target.result !== undefined)
+ }
+
+ req.onerror = (event) => {
+ console.log(event.target.error)
+ reject(event.target.error)
+ }
+ })
+ }// }}}
+ retrievePage(uuid, perPage, page) {// {{{
+ return new Promise((resolve, _reject) => {
+
+ const lowerBound = [uuid, '00000000-0000-0000-0000-000000000000']
+ const upperBound = [uuid, 'ffffffff-ffff-ffff-ffff-ffffffffffff']
+ const range = IDBKeyRange.bound(lowerBound, upperBound)
+
+ const cursor = this.db
+ .transaction(['nodes', this.storeName], 'readonly')
+ .objectStore(this.storeName)
+ .openCursor(range, 'prev')
+
+ let retrieved = 0
+ let first = true
+ const nodes = []
+
+ cursor.onsuccess = (event) => {
+ const cursor = event.target.result
+ if (!cursor) {
+ resolve(nodes)
+ return
+ }
+
+ // openCursor returns the first value which is only useful
+ // if the first page is requested.
+ if (page == 1 || !first) {
+ retrieved++
+ nodes.push(new Node(cursor.value))
+ if (retrieved === perPage) {
+ resolve(nodes)
+ return
+ }
+ cursor.continue()
+ return
+ }
+
+ // Jump to the start of the requested page.
+ // Minus one since the first record was already returned.
+ if (page > 1 && first) {
+ first = false
+ cursor.advance((perPage * (page - 1)))
+ return
+ }
+ }
+ })
+ }// }}}
}
-export function uuidv7() {
+export function uuidv7() {// {{{
// random bytes
const value = new Uint8Array(16)
crypto.getRandomValues(value)
@@ -482,6 +537,6 @@ export function uuidv7() {
.map((b) => b.toString(16).padStart(2, "0"))
.join("")
return `${str.slice(0, 8)}-${str.slice(8, 12)}-${str.slice(12, 16)}-${str.slice(16, 20)}-${str.slice(20)}`
-}
+}// }}}
// vim: foldmethod=marker
diff --git a/static/js/page_history.mjs b/static/js/page_history.mjs
index a931faa..44061f6 100644
--- a/static/js/page_history.mjs
+++ b/static/js/page_history.mjs
@@ -1,15 +1,319 @@
import { CustomHTMLElement } from './lib/custom_html_element.mjs'
+import { Node } from './page_node.mjs'
+import { MarkedPosition } from './marked_position.mjs'
+
export class N2PageHistory extends CustomHTMLElement {
- static {
+ static PAGESIZE = 15
+ static {// {{{
this.tmpl = document.createElement('template')
this.tmpl.innerHTML = `
- History
- `
- }
+
- constructor() {
+
+ 
+ Back to node
+
+
+
+ 
+
+
+
+
+ Actions
+
+
+
+
+
+
+ History
+
+
+ History on server:
+
+
+ History on client:
+
+
+
+
+
+
+ <
+
+ >
+
+
+
+
+
+ Document
+
+
+
+
+ `
+ }// }}}
+
+ constructor() {// {{{
super()
- }
+ this.selectedNode = null
+
+ this.setAttribute('tabindex', '-1')
+ this.addEventListener('keydown', event => this.keyHandler(event))
+
+ // Connect back icon and text to give the user a way back to the node.
+ this.elBackImage.addEventListener('click', () => _mbus.dispatch('SHOW_PAGE', { page: 'node' }))
+ this.elBackText.addEventListener('click', () => _mbus.dispatch('SHOW_PAGE', { page: 'node' }))
+ this.elPrev.addEventListener('click', () => this.prevPage())
+ this.elNext.addEventListener('click', () => this.nextPage())
+ this.elDownloadHistory.addEventListener('click', async () => {
+ await this.downloadHistory()
+ await this.useNode(this.node)
+ this.render(true)
+
+ })
+
+ _mbus.subscribe('SHOW_PAGE', async (event) => {
+ if(event.detail.data.page != 'history')
+ return
+
+ await this.useNode(_app.nodeUI.node)
+ this.render()
+ })
+
+ _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) {// {{{
+ this.elNodeName.innerText = this.node.get('Name')
+ this.elPage.innerText = `${this.page} / ${this.pages}`
+ this.elStatsOnClient.innerText = `${this.nodesTotal}`
+ this.elStatsOnServer.innerText = `${this.historyOnServerTotal}`
+
+ if (this.nodesTotal <= N2PageHistory.PAGESIZE)
+ this.elPagination.style.display = 'none'
+ else
+ this.elPagination.style.display = ''
+
+ let nodes = await nodeStore.nodesHistory.retrievePage(this.node.UUID, N2PageHistory.PAGESIZE, this.page)
+ let i = 0
+ let divs = nodes.map(n => {
+ i++
+ const index = 1 + this.nodesTotal - (N2PageHistory.PAGESIZE * (this.page - 1) + i)
+ const div = new N2PageHistoryNode(n, index)
+ div.render()
+ return div
+ })
+ this.elNodes.replaceChildren(...divs)
+
+ if (!keepFetchHistoryProgress)
+ this.elFetchHistoryProgress.innerText = ''
+
+ // Select the first node.
+ if (!this.selectedNode) {
+ this.elNodes.firstElementChild?.select()
+ }
+ }// }}}
+
+ async useNode(node) {// {{{
+ this.node = node
+ this.page = 1
+
+ this.nodesTotal = await nodeStore.nodesHistory.count(this.node.UUID)
+ this.historyOnServerTotal = await this.getServerTotal()
+ 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()
+ }
+ }// }}}
+
+ prevPage() {// {{{
+ if (this.page == 1)
+ return
+
+ // Selecting a node on another page is wrong.
+ this.selectedNode = null
+ this.page--
+ this.render()
+ }// }}}
+ nextPage() {// {{{
+ if (this.page >= this.pages)
+ return
+ // Selecting a node on another page is wrong.
+ this.selectedNode = null
+ this.page++
+ this.render()
+ }// }}}
+
+ async getServerTotal() {// {{{
+ const res = await fetch(`/node/history/count/${this.node.UUID}`, {
+ headers: {
+ "Authorization": 'Bearer ' + localStorage.getItem('token'),
+ }
+ })
+ const json = await res.json()
+
+ if (!json.OK) {
+ alert(json.Error)
+ return
+ }
+
+ return json.Count
+ }// }}}
+ async downloadHistory() {// {{{
+ try {
+ const nodes = []
+ let offset = 0
+ let hasMore = true
+
+ while (hasMore) {
+ const history = await this.downloadHistoryPage(offset)
+ hasMore = history.HasMore
+ for (const nodeData of history.Nodes) {
+ nodes.push(new Node(nodeData))
+ }
+ offset = nodes.length
+ this.elFetchHistoryProgress.innerText = `${nodes.length} fetched.`
+ }
+
+ let num = 0
+ for (const node of nodes) {
+ const ok = await nodeStore.nodesHistory.hasNode(node.UUID, node.get('Updated'))
+ if (ok) num++
+ await nodeStore.nodesHistory.add(node)
+ }
+
+ this.elFetchHistoryProgress.innerText = `${nodes.length} fetched - all history fetched.`
+ } catch (e) {
+ console.error(e)
+ alert(e)
+ }
+ }// }}}
+ async downloadHistoryPage(offset) {// {{{
+ const res = await fetch(`/node/history/retrieve/${this.node.UUID}/${offset}`, {
+ headers: {
+ "Authorization": 'Bearer ' + localStorage.getItem('token'),
+ }
+ })
+ const json = await res.json()
+
+ if (!json.OK) {
+ alert(json.Error)
+ return
+ }
+
+ return json
+ }// }}}
}
customElements.define('n2-pagehistory', N2PageHistory)
+
+
+class N2PageHistoryNode extends CustomHTMLElement {
+ static {// {{{
+ this.tmpl = document.createElement('template')
+ this.tmpl.innerHTML = `
+
+
+
+
+ `
+ }// }}}
+ constructor(node, index) {// {{{
+ super()
+
+ this.node = node
+ this.index = index
+
+ this.style.display = 'contents'
+ this.selected = false
+
+ this.addEventListener('click', () => this.select())
+
+ // Another history node has been selected.
+ _mbus.subscribe('HISTORY_NODE_SELECTED', (event) => {
+ if (this.node.get('Updated') == event.detail.data.historyNode.node.get('Updated'))
+ return
+ this.selected = false
+ this.render()
+ })
+ }// }}}
+
+ select() {// {{{
+ this.selected = true
+ // Other nodes are told to unselect and rerender.
+ _mbus.dispatch('HISTORY_NODE_SELECTED', { historyNode: this })
+ this.render()
+ }// }}}
+ render() {// {{{
+ const date = this.node.get('Updated').slice(0, 10)
+ const time = this.node.get('Updated').slice(11, 19)
+
+ if (this.selected)
+ this.classList.add('selected')
+ else
+ this.classList.remove('selected')
+
+ this.elIndex.innerText = this.index
+ this.elDate.innerText = date
+ this.elTime.innerText = time
+ this.elSize.innerText = this.formatSize(this.node.get('Content').length)
+ this.elName.innerText = this.node.get('Name')
+ }// }}}
+ formatSize(s) {// {{{
+ let div = 1
+ let unit = 'B'
+ if (s >= 1048576) {
+ div = 1048576
+ unit = 'MB'
+ } else if (s >= 1024) {
+ div = 1024
+ unit = 'kB'
+ }
+
+ return new Intl.NumberFormat(undefined, {
+ maximumFractionDigits: 0
+ }).format(Math.round(s / div)) + ' ' + unit
+ }// }}}
+}
+customElements.define('n2-pagehistorynode', N2PageHistoryNode)
diff --git a/static/js/page_node.mjs b/static/js/page_node.mjs
index 81d7c33..2106ada 100644
--- a/static/js/page_node.mjs
+++ b/static/js/page_node.mjs
@@ -2,21 +2,86 @@ import { ROOT_NODE, uuidv7 } from 'node_store'
import { CustomHTMLElement } from './lib/custom_html_element.mjs'
import { MarkedPosition } from './marked_position.mjs'
+class N2NodeMenu extends CustomHTMLElement {
+ static {// {{{
+ this.tmpl = document.createElement('template')
+ this.tmpl.innerHTML = `
+
+
+
+ 
+ Format tables
+
+
+
+
+ History
+
+
+
+ `
+ }// }}}
+ constructor() {// {{{
+ super()
+ }// }}}
+}
+customElements.define('n2-nodemenu', N2NodeMenu)
+
export class N2PageNodeUI extends CustomHTMLElement {
static {// {{{
this.tmpl = document.createElement('template')
this.tmpl.innerHTML = `
@@ -27,9 +92,13 @@ export class N2PageNodeUI extends CustomHTMLElement {
![]()
-
-
+ 
+
+ Preferences
+
+ Changes preferences to not download images or files on the device doesn't remove the already downloaded data.
+
+
+ Device preference set
+
+
+
+
+
+
+
+ `
+ }// }}}
+ constructor() {// {{{
+ super(true)
+ this.sets = []
+
+ this.elNewSet.addEventListener('click', () => this.newSet())
+ this.elSave.addEventListener('click', () => this.save())
+ this.elDevPreferenceSet.addEventListener('change', event=>this.changePreferenceSet(event))
+
+ window._mbus.subscribe('SHOW_PAGE', async event => {
+ if (event.detail.data?.page == 'preferences') {
+ this.sets = await this.getPreferenceSets()
+ this.render()
+ }
+ })
+
+ window._mbus.subscribe('PREFERENCE_SET_MODIFIED', () => this.preferencesModified())
+ window._mbus.subscribe('PREFERENCE_SET_DELETE', event => this.preferencesDelete(event.detail.data.set))
+ }// }}}
+ sortSets(a, b) {// {{{
+ if (a.name == 'default') return -1
+ if (b.name == 'default') return 1
+
+ if (a.name.toLowerCase() < b.name.toLowerCase()) return -1
+ if (a.name.toLowerCase() > b.name.toLowerCase()) return 1
+
+ return 0
+ }// }}}
+ async render() {// {{{
+ try {
+ this.sets.sort(this.sortSets)
+ this.elSets.replaceChildren(...this.sets)
+
+ const setNames = this.sets.entries().map(([i, set]) => {
+ const optn = document.createElement('option')
+ optn.innerText = set.name
+ return optn
+ })
+ this.elDevPreferenceSet.replaceChildren(...setNames)
+ } catch (e) {
+ console.error(e)
+ alert(e.message)
+ }
+ }// }}}
+ async getPreferenceSets() {// {{{
+ const userData = localStorage.getItem('user')
+ if (userData === null)
+ throw new Error('Could not find user in localStorage')
+
+ const user = JSON.parse(userData)
+ const prefsData = user.Preferences
+
+ if (prefsData === undefined)
+ throw new Error('User object is missing preferences')
+
+ if (!prefsData.hasOwnProperty('default'))
+ throw new Error('The "default" preferences set is missing')
+
+ return Object.keys(prefsData).map(name => new N2PreferenceSet(name, prefsData[name]))
+ }// }}}
+ async retrieveServerPreferences() {// {{{
+ try {
+ API.query('GET', '/user/preferences')
+ } catch (e) {
+ console.error(e)
+ alert(`Error retrieving preferences: ${e.message}`)
+ }
+ }// }}}
+ changePreferenceSet(event) {// {{{
+ this.preferencesModified()
+ }// }}}
+ newSet() {// {{{
+ let name = prompt("Name for new preference set")
+ if (!name)
+ return
+
+ name = name.trim()
+ if (name === '')
+ return
+
+ if (name == 'default') {
+ alert(`Name can't be "default".`)
+ return
+ }
+
+ const exists = this.sets.some(s => s.name.toLowerCase() == name.toLowerCase())
+ if (exists) {
+ alert(`Set with name "${name}" already exist.`)
+ return
+ }
+
+ this.sets.push(new N2PreferenceSet(name, {}))
+ this.preferencesModified()
+ this.render()
+ }// }}}
+ preferencesModified() {// {{{
+ this.elSave.removeAttribute('disabled')
+ }// }}}
+ preferencesDelete(deleteSet) {// {{{
+ if (deleteSet.name == 'default') {
+ alert("Can't delete the default set.")
+ return
+ }
+
+ if (!confirm(`Confirm deleting "${deleteSet.name}"`))
+ return
+
+ this.sets = this.sets.filter(set => {
+ return !(set.name === deleteSet.name)
+ })
+
+ this.preferencesModified()
+ this.render()
+ }// }}}
+ async save() {// {{{
+ try {
+ let newPrefs = {}
+ this.sets.forEach(s => {
+ const setState = s.getState()
+ newPrefs[setState.name] = setState.state
+ })
+
+ // Throws exception on both HTTP and application errors.
+ await API.query('POST', '/user/preferences', newPrefs)
+
+ const userData = localStorage.getItem('user')
+ const user = JSON.parse(userData)
+ user.Preferences = newPrefs
+ localStorage.setItem('user', JSON.stringify(user))
+ localStorage.setItem('device_preference_set', this.elDevPreferenceSet.value)
+ _mbus.dispatch('DEVICE_PREFERENCE_SET_UPDATED')
+ } catch (e) {
+ console.error(e)
+ alert(e.message)
+ } finally {
+ this.elSave.setAttribute('disabled', true)
+ }
+
+ }// }}}
+}
+customElements.define('n2-pagepreferences', N2PagePreferences)
+
+// Preferences is a set of preferences, of which there can be many named.
+export class N2PreferenceSet extends CustomHTMLElement {
+ static {// {{{
+ this.tmpl = document.createElement('template')
+ this.tmpl.innerHTML = `
+
+
+
+
+ ✘
+
+
+
+
+
+
+
+ `
+ }// }}}
+ constructor(name, data) {// {{{
+ super(true)
+ this.name = name
+ this.data = data
+ this.render()
+
+ // Enable the save button when settings are modified.
+ this.allFields().forEach(f =>
+ f.addEventListener('input', () => _mbus.dispatch('PREFERENCE_SET_MODIFIED'))
+ )
+
+ this.elName.addEventListener('click', () => this.updateName())
+ this.elDelete.addEventListener('click', () => this.deleteSet())
+ }// }}}
+ updateName() {// {{{
+ if (this.name == 'default') {
+ alert('Can not change name of the default profile.')
+ return
+ }
+
+ const name = prompt("Change name", this.name)
+ if (!name)
+ return
+
+ this.name = name
+ this.render()
+ _mbus.dispatch('PREFERENCE_SET_MODIFIED')
+ }// }}}
+ deleteSet() {// {{{
+ _mbus.dispatch('PREFERENCE_SET_DELETE', { set: this })
+ }// }}}
+ render() {// {{{
+ this.elName.innerText = this.name
+
+ this.fieldDownloadImages.checked = this.data.DownloadImages
+ this.fieldDownloadFiles.checked = this.data.DownloadFiles
+ }// }}}
+ getState() {// {{{
+ const name = this.name.trim()
+ if (name === '')
+ throw new Error('Name can not be empty.')
+
+ return {
+ name: this.name.trim(),
+ state: this.fieldValues(),
+ }
+ }// }}}
+}
+customElements.define('n2-preferenceset', N2PreferenceSet)
diff --git a/static/js/page_storage.mjs b/static/js/page_storage.mjs
index 931a718..a007130 100644
--- a/static/js/page_storage.mjs
+++ b/static/js/page_storage.mjs
@@ -13,7 +13,10 @@ export class N2PageStorage extends CustomHTMLElement {
constructor() {
super()
- window._mbus.subscribe('SHOW_PAGE', () => this.render())
+ window._mbus.subscribe('SHOW_PAGE', event => {
+ if (event.detail.data?.page == 'storage')
+ this.render()
+ })
}
async render() {
const countNodes = await globalThis.nodeStore.nodeCount()
diff --git a/static/js/tree.mjs b/static/js/sidebar.mjs
similarity index 55%
rename from static/js/tree.mjs
rename to static/js/sidebar.mjs
index 04555f6..6cd5814 100644
--- a/static/js/tree.mjs
+++ b/static/js/sidebar.mjs
@@ -1,4 +1,5 @@
-import { ROOT_NODE } from 'node_store'
+import { ROOT_NODE, ORPHANED_NODE, DELETED_NODE } from 'node_store'
+import { Node } from 'node'
import { CustomHTMLElement } from './lib/custom_html_element.mjs'
import { Color, Solver } from './lib/css_colorize.mjs'
@@ -58,21 +59,46 @@ class TreeExpansionHandler {// {{{
}
}// }}}
-export class N2Tree extends CustomHTMLElement {
+export class N2Sidebar extends CustomHTMLElement {
static {// {{{
this.tmpl = document.createElement('template')
this.tmpl.innerHTML = `
- 
<
@@ -92,7 +118,6 @@ export class N2Tree extends CustomHTMLElement {
this.tabIndex = 0
this.treeNodeComponents = {}
- this.treeTrunk = []
this.expandedNodes = {} // keyed on UUID
this.selectedNode = null
this.rendered = false
@@ -103,6 +128,7 @@ export class N2Tree extends CustomHTMLElement {
this.elSearch.addEventListener('click', () => _mbus.dispatch('op-search'))
this.elSync.addEventListener('click', () => _sync.run())
this.elLogo.addEventListener('click', () => _app.goToNode(ROOT_NODE, false, false))
+ this.elSettings.addEventListener('click', ()=> _mbus.dispatch('SHOW_PAGE', { page: 'preferences' }))
this.elHideTree.addEventListener('click', event => {
event.stopPropagation()
_mbus.dispatch('TREE_EXPANSION', { expand: false })
@@ -119,64 +145,61 @@ export class N2Tree extends CustomHTMLElement {
treenode.render(true)
})
- this.populateFirstLevel()
-
/* XXX - set color */
let color = new Color(0x80, 0x00, 0x33)
let solver = new Solver(color)
let result = solver.solve()
- // console.log(result.filter)
+ console.log(result.filter)
}// }}}
- render() {// {{{
+ async render() {// {{{
if (this.rendered)
alert('Tree should only be rendered once.')
- for (const node of this.treeTrunk) {
- const treenode = new N2TreeNode(this, node)
- this.treeNodeComponents[node.UUID] = treenode
- this.elTreenodes.appendChild(treenode.render())
- }
+ this.expandedNodes[ROOT_NODE] = true
+ const startnode = await nodeStore.get(ROOT_NODE)
+ const starttreenode = new N2TreeNode(this, startnode, null)
+
+ const deletednode = await nodeStore.get(DELETED_NODE)
+ const deletedtreenode = new SpecialNodeDeleted(this, deletednode, null)
+
+ const orphanednode = await nodeStore.get(ORPHANED_NODE)
+ const orphanedtreenode = new SpecialNodeOrphaned(this, orphanednode, null)
+
+ startnode._sibling_after = deletednode
+ deletednode._sibling_before = startnode
+
+ deletednode._sibling_after = orphanednode
+ orphanednode._sibling_before = deletednode
+
+ this.treeNodeComponents[startnode.UUID] = starttreenode
+ this.treeNodeComponents[deletednode.UUID] = deletedtreenode
+ this.treeNodeComponents[orphanednode.UUID] = orphanedtreenode
+
+ this.elTreenodes.appendChild(await starttreenode.render())
+ this.elTreenodes.appendChild(await deletedtreenode.render())
+ this.elTreenodes.appendChild(await orphanedtreenode.render())
+
+ // Notify the application that the initial tree is rendered (with children)
+ // and that initial node selection can take place. App will check URL to
+ // select the correct one.
+ _mbus.dispatch('TREE_RENDERED')
this.rendered = true
return this
}// }}}
reset() {// {{{
- console.log('tree reset')
this.treeNodeComponents = {}
- this.treeTrunk = []
this.rendered = false
this.elTreenodes.replaceChildren()
- this.populateFirstLevel()
+ this.render()
}// }}}
- populateFirstLevel() {//{{{
- nodeStore.get(ROOT_NODE)
- .then(node => node.fetchChildren())
- .then(children => {
- this.treeNodeComponents = {}
- this.treeTrunk = []
- for (const node of children) {
- // The root node isn't supposed to be shown in the tree.
- if (node.UUID === ROOT_NODE)
- continue
- if (node.ParentUUID === ROOT_NODE)
- this.treeTrunk.push(node)
- }
- _mbus.dispatch('TREE_TRUNK_FETCHED')
- })
- .catch(e => {
- console.error(e)
- console.log(e.type, e.error)
- alert(e.error)
- })
- }//}}}
getNodeExpanded(UUID) {//{{{
if (this.expandedNodes[UUID] === undefined)
this.expandedNodes[UUID] = false
return this.expandedNodes[UUID]
}//}}}
- setNodeExpanded(node, value) {//{{{
+ async setNodeExpanded(node, value) {//{{{
let expanded = this.expandedNodes[node.UUID]
-
if (expanded === undefined) {
this.expandedNodes[node.UUID] = false
expanded = false
@@ -208,6 +231,9 @@ export class N2Tree extends CustomHTMLElement {
isSelected(node) {//{{{
return this.selectedNode?.UUID === node.UUID
}//}}}
+ getTreeNode(uuid) {// {{{
+ return this.treeNodeComponents[uuid]
+ }// }}}
async keyHandler(event) {//{{{
let handled = true
@@ -231,38 +257,31 @@ export class N2Tree extends CustomHTMLElement {
}
break
- case 'g':
case 'Home':
this.navigateTop()
break
- case 'G':
case 'End':
this.navigateBottom()
break
- case 'j':
case 'ArrowDown':
await this.navigateDown(this.selectedNode)
break
- case 'k':
case 'ArrowUp':
await this.navigateUp(this.selectedNode)
break
- case 'h':
case 'ArrowLeft':
await this.navigateLeft(this.selectedNode)
break
- case 'l':
case 'ArrowRight':
await this.navigateRight(this.selectedNode)
break
default:
- // nonsole.log(event.key)
handled = false
}
@@ -272,16 +291,16 @@ export class N2Tree extends CustomHTMLElement {
}
}//}}}
async navigateLeft(n) {//{{{
- if (n === null || n === undefined)
+ if (n === null || n === undefined || n.UUID == ROOT_NODE)
return
const expanded = this.getNodeExpanded(n.UUID)
- if (expanded && n.hasChildren()) {
+ if (expanded && n.hasChildren() && n.UUID !== ROOT_NODE) {
this.setNodeExpanded(n, false)
return
}
- if (n.isFirstSibling() && n.getParent().UUID !== ROOT_NODE) {
+ if (n.isFirstSibling()) {
_mbus.dispatch("GO_TO_NODE", { nodeUUID: n.getParent()?.UUID, dontPush: false, dontExpand: true })
return
}
@@ -322,7 +341,7 @@ export class N2Tree extends CustomHTMLElement {
_mbus.dispatch("GO_TO_NODE", { nodeUUID: n.getSiblingAfter()?.UUID, dontPush: false, dontExpand: true })
}//}}}
async navigateUp(n) {//{{{
- if (n === null || n === undefined)
+ if (n === null || n === undefined || n.UUID == ROOT_NODE)
return
let parent = null
@@ -333,14 +352,13 @@ export class N2Tree extends CustomHTMLElement {
if (n.isFirstSibling()) {
parent = n.getParent()
- if (parent?.UUID === ROOT_NODE)
- return
_mbus.dispatch("GO_TO_NODE", { nodeUUID: parent?.UUID, dontPush: false, dontExpand: true })
return
}
if (siblingBefore !== null && siblingExpanded && siblingBefore.hasChildren()) {
- _mbus.dispatch("GO_TO_NODE", { nodeUUID: siblingBefore.Children[siblingBefore.Children.length - 1]?.UUID, dontPush: false, dontExpand: true })
+ const nodeVisuallyAbove = this.getLastExpandedNode(siblingBefore)
+ _mbus.dispatch("GO_TO_NODE", { nodeUUID: nodeVisuallyAbove.UUID, dontPush: false, dontExpand: true })
return
}
@@ -385,23 +403,26 @@ export class N2Tree extends CustomHTMLElement {
}//}}}
async navigateTop() {//{{{
const root = await nodeStore.get(ROOT_NODE)
- if (root.Children.length === 0)
- return
- _mbus.dispatch("GO_TO_NODE", { nodeUUID: root.Children[0]?.UUID, dontPush: false, dontExpand: true })
+ _mbus.dispatch("GO_TO_NODE", { nodeUUID: root.UUID, dontPush: false, dontExpand: true })
}//}}}
async navigateBottom() {//{{{
- const root = await nodeStore.get(ROOT_NODE)
- if (root.Children.length === 0)
- return
+ const orphaned = await nodeStore.get(ORPHANED_NODE)
- const toplevel = root.Children[root.Children.length - 1]
+ if (!orphaned.hasChildren() || this.getNodeExpanded(orphaned.UUID)) {
+ _mbus.dispatch("GO_TO_NODE", { nodeUUID: orphaned.UUID, dontPush: false, dontExpand: true })
+ return
+ }
+
+ /* TODO - fix this when orphaned nodes are implemented.
+ const toplevel = orphaned.Children[orphaned.Children.length - 1]
const toplevelExpanded = this.getNodeExpanded(toplevel?.UUID)
if (toplevelExpanded) {
const lastnode = this.getLastExpandedNode(toplevel)
_mbus.dispatch("GO_TO_NODE", { nodeUUID: lastnode?.UUID, dontPush: false, dontExpand: true })
} else
- _mbus.dispatch("GO_TO_NODE", { nodeUUID: root.Children[root.Children.length - 1]?.UUID, dontPush: false, dontExpand: true })
+ _mbus.dispatch("GO_TO_NODE", { nodeUUID: orphaned.Children[orphaned.Children.length - 1]?.UUID, dontPush: false, dontExpand: true })
+ */
}//}}}
getParentWithNextSibling(node) {//{{{
@@ -422,86 +443,255 @@ export class N2Tree extends CustomHTMLElement {
if (state)
await this.setNodeExpanded(node, true)
+ // An expanded node needs to have its children fetched.
+ if (!node.hasFetchedChildren())
+ await node.fetchChildren()
+
for (const child of node.Children)
await this.recursiveExpand(child, state)
if (!state)
await this.setNodeExpanded(node, false)
}//}}}
- async makeVisible(node) {// {{{
+ async makeVisible(node, providedAncestors, dontExpand) {// {{{
const treenode = this.treeNodeComponents[node.UUID]
- const ancestors = await nodeStore.getNodeAncestry(node)
- for (const ancestor of ancestors.reverse()) {
- this.setNodeExpanded(ancestor, true)
+ if (!dontExpand) {
+ const ancestors = providedAncestors || await nodeStore.getNodeAncestry(node)
+ for (const ancestor of ancestors.reverse()) {
+ this.setNodeExpanded(ancestor, true)
+ }
}
- // The ROOT_NODE for example hasn't got a treenode.
treenode?.scrollIntoView({ block: 'nearest' })
}// }}}
}
-customElements.define('n2-tree', N2Tree)
export class N2TreeNode extends CustomHTMLElement {
+ static DRAG_ICON = new Image()
+ static DRAG_ICON_OK = new Image()
+
static {// {{{
+ N2TreeNode.DRAG_ICON.src = `/images/${_VERSION}/leaf.svg`
+ N2TreeNode.DRAG_ICON_OK.src = `/images/${_VERSION}/expanded.svg`
+
this.tmpl = document.createElement('template')
this.tmpl.innerHTML = `
+
+
- ![]()
+ ![]()
-
+
`
}// }}}
- constructor(tree, node, parent) {//{{{
+ constructor(sidebar, node, parent) {//{{{
super()
+ this.setAttribute('draggable', 'true')
this.classList.add('node')
- this.tree = tree
+ this.sidebar = sidebar
this.node = node
this.parent = parent
this.children_populated = false
this.rendered = false
+ this.dragNode = null
- this.elExpandToggle.addEventListener('click', () => this.tree.setNodeExpanded(this.node, !this.tree.getNodeExpanded(this.node.UUID)))
- this.elName.addEventListener('click', () => _mbus.dispatch('TREE_NODE_SELECTED', this.node))
-
- _mbus.subscribe(`NODE_CHILDREN_FETCHED_${node.UUID}`, () => {
- this.render(true)
+ this.elExpandToggle.addEventListener('click', event => {
+ if (this.node.hasChildren())
+ this.expandNode(event)
+ else
+ _mbus.dispatch('TREE_NODE_SELECTED', this.node)
})
+ this.elName.addEventListener('click', () => _mbus.dispatch('TREE_NODE_SELECTED', this.node))
_mbus.subscribe(`NODE_EXPAND_${node.UUID}`, _state => {
this.render(true)
})
- if (this.node.Level === 0 || this.tree.getNodeExpanded(this.node.UUID))
- this.fetchChildren()
+ // Drag-and-dropping of nodes
+ this.addEventListener('dragstart', event => this.dragStart(event))
+ this.addEventListener('dragend', event => this.dragEnd(event))
+ this.addEventListener('dragover', event => this.dragOver(event))
+ this.addEventListener('drop', event => this.dragDrop(event))
+ this.elName.addEventListener('dragenter', event => this.dragEnter(event))
+ this.elName.addEventListener('dragleave', event => this.dragLeave(event))
}// }}}
- async fetchChildren() {//{{{
+
+ dragStart(e) {// {{{
+ if (this.node.isModified()) {
+ alert('Save note before moving it.')
+ e.stopPropagation()
+ e.preventDefault()
+ return
+ }
+
+ this.classList.add('drag-source')
+ const blankPixel = new Image()
+ blankPixel.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
+ e.dataTransfer.setDragImage(blankPixel, 0, 0)
+ e.dataTransfer.allowedEffects = 'none'
+ e.stopPropagation()
+ _app.dragIcon.setSource(this)
+ _app.dragIcon.start()
+ }// }}}
+ dragEnd(e) {// {{{
+ this.classList.remove('drag-source')
+ _app.dragIcon.end()
+ e.stopPropagation()
+ }// }}}
+ dragOver(e) {// {{{
+ e.dataTransfer.dropEffect = 'move'
+ e.preventDefault()
+ }// }}}
+ async dragDrop(e) {// {{{
+ try {
+ e.stopPropagation()
+ const sourceNode = _app.dragIcon.getSource()
+
+ // Abort if user drops the node back on itself.
+ if (sourceNode.node.UUID === this.node.UUID)
+ return
+
+ await _app.moveNode(sourceNode.node, this.node.UUID)
+
+ _app.sidebar.setNodeExpanded(this, true)
+ await this.render(true, true)
+ await sourceNode.render(true, true)
+ } catch (e) {
+ console.error(e)
+ alert(e)
+ } finally {
+ this.dragLeave(e)
+ }
+ }// }}}
+ dragEnter(e) {// {{{
+ const targetNode = e.target.closest('n2-treenode')
+ if (targetNode.classList.contains('drag-source'))
+ return
+ e.stopPropagation()
+ _app.dragIcon.icon('ok')
+ this.classList.add('drag-target')
+ }// }}}
+ dragLeave(e) {// {{{
+ e.stopPropagation()
+ e.dataTransfer.dropEffect = 'none'
+ e.dataTransfer.setDragImage(N2TreeNode.DRAG_ICON, -16, 8)
+ _app.dragIcon.icon('')
+ this.classList.remove('drag-target')
+ }// }}}
+
+ async expandNode(event) {// {{{
+ const expanded = _app.sidebar.getNodeExpanded(this.node.UUID)
+
+ if (event.shiftKey) {
+ _app.sidebar.recursiveExpand(this.node, !expanded)
+ } else {
+ _app.sidebar.setNodeExpanded(this.node, !expanded)
+ }
+ }// }}}
+ async fetchChildren(force_fetch) {//{{{
+ if (this.children_populated && !force_fetch)
+ return
+
await this.node.fetchChildren()
this.children_populated = true
}//}}}
- render(force_update) {//{{{
+ async render(force_update, force_refetch_children) {//{{{
if (this.rendered && force_update !== true)
return this
- // Fetch the next level of children if the parent tree node is expanded and our children thus will be visible.
- const expanded = this.node.hasChildren() && this.tree.getNodeExpanded(this.node.UUID)
+ if (this.sidebar.getNodeExpanded(this.node.UUID) || force_refetch_children)
+ await this.fetchChildren(force_refetch_children)
- if (!this.children_populated && this.tree.getNodeExpanded(this.parent?.node.UUID)) {
- this.node.fetchChildren().then(() => this.children_populated = true)
- }
+ // Update the name and selected status.
+ this.elName.querySelector('span').innerText = this.node.get('Name')
- // Update the name and selected status
- this.elName.innerText = this.node.get('Name')
- if (this.tree.isSelected(this.node))
+ if (this.sidebar.isSelected(this.node))
this.elName.classList.add('selected')
else
this.elName.classList.remove('selected')
// Update expansion state
+ const expanded = this.node.hasChildren() && this.sidebar.getNodeExpanded(this.node.UUID)
if (expanded) {
this.elChildren.classList.add('expanded')
this.elChildren.classList.remove('collapsed')
@@ -511,28 +701,42 @@ export class N2TreeNode extends CustomHTMLElement {
}
// The expand icon ![]()
is only changed to not get a flickering when re-rendering.
- if (!this.node.hasChildren())
+ if (this.node.UUID === ROOT_NODE)
+ this.setImgSrc(this.elExpand, `/images/${window._VERSION}/icon_home.svg`)
+
+ else if (this.node.UUID === DELETED_NODE) {
+ this.setImgSrc(this.elExpand, `/images/${window._VERSION}/leaf_deleted.svg`)
+ this.elExpand.classList.add('deleted')
+ }
+
+ else if (this.node.UUID === ORPHANED_NODE) {
+ this.setImgSrc(this.elExpand, `/images/${window._VERSION}/leaf_orphaned.svg`)
+ this.elExpand.classList.add('deleted')
+ }
+
+ else if (!this.node.hasChildren())
this.setImgSrc(this.elExpand, `/images/${window._VERSION}/leaf.svg`)
- else if (this.tree.getNodeExpanded(this.node.UUID))
+ else if (this.sidebar.getNodeExpanded(this.node.UUID))
this.setImgSrc(this.elExpand, `/images/${window._VERSION}/expanded.svg`)
else
this.setImgSrc(this.elExpand, `/images/${window._VERSION}/collapsed.svg`)
// Should children be rendered?
- this.elChildren.innerHTML = ''
let children = []
if (expanded)
children = this.node.Children.map(node => {
- let treenode = this.tree.treeNodeComponents[node.UUID]
+ let treenode = this.sidebar.treeNodeComponents[node.UUID]
if (treenode === undefined) {
- treenode = new N2TreeNode(this.tree, node, this)
- this.tree.treeNodeComponents[node.UUID] = treenode
+ treenode = new N2TreeNode(this.sidebar, node, this)
+ this.sidebar.treeNodeComponents[node.UUID] = treenode
}
return treenode
})
+ const renderedChildren = []
for (const c of children)
- this.elChildren.appendChild(c.render())
+ renderedChildren.push(await c.render())
+ this.elChildren.replaceChildren(...renderedChildren)
this.rendered = true
return this
@@ -544,6 +748,24 @@ export class N2TreeNode extends CustomHTMLElement {
img.setAttribute('src', newSrc)
}// }}}
}
+
+class SpecialNodeDeleted extends N2TreeNode {
+ constructor(sidebar, node, parent) {//{{{
+ super(sidebar, node, parent)
+ this.removeAttribute('draggable')
+ }//}}}
+}
+
+class SpecialNodeOrphaned extends N2TreeNode {
+ constructor(sidebar, node, parent) {//{{{
+ super(sidebar, node, parent)
+ this.removeAttribute('draggable')
+ }//}}}
+}
+
+customElements.define('n2-sidebar', N2Sidebar)
customElements.define('n2-treenode', N2TreeNode)
+customElements.define('n2-specialnodedeleted', SpecialNodeDeleted)
+customElements.define('n2-specialnodeorphaned', SpecialNodeOrphaned)
// vim: foldmethod=marker
diff --git a/static/js/sync.mjs b/static/js/sync.mjs
index 291e0b9..daa603f 100644
--- a/static/js/sync.mjs
+++ b/static/js/sync.mjs
@@ -17,10 +17,12 @@ export class Sync {
const state = await nodeStore.getAppState('latest_sync_node')
const oldMax = (state?.value ? state.value : 0)
- let nodeCount = await this.getNodeCount(oldMax)
- nodeCount += await nodeStore.sendQueue.count()
+ let nodeCountDownload = await this.getNodeCount(oldMax)
+ let nodeCountUpload = await nodeStore.sendQueue.count()
- _mbus.dispatch('SYNC_COUNT', { count: nodeCount })
+ _mbus.dispatch('SYNC_START')
+ _mbus.dispatch('SYNC_DOWNLOAD_COUNT', { count: nodeCountDownload })
+ _mbus.dispatch('SYNC_UPLOAD_COUNT', { count: nodeCountUpload })
await this.nodesFromServer(oldMax)
.then(durationNodes => {
@@ -28,6 +30,7 @@ export class Sync {
console.log(`Total time: ${Math.round(1000 * durationNodes) / 1000}s`)
})
+ // Uploads of modified nodes to server.
await this.nodesToServer()
} finally {
_mbus.dispatch('SYNC_DONE')
@@ -78,15 +81,16 @@ export class Sync {
handled++
if (handled % 100 === 0)
- _mbus.dispatch('SYNC_HANDLED', { handled })
+ _mbus.dispatch('SYNC_DOWNLOADED', { handled })
}
} while (res.Continue)
- _mbus.dispatch('SYNC_HANDLED', { handled })
+ _mbus.dispatch('SYNC_DOWNLOADED', { handled })
nodeStore.setAppState('latest_sync_node', currMax)
} catch (e) {
- console.log('sync node tree', e)
+ console.error('sync node tree', e)
+ alert(e.message)
} finally {
syncEnd = Date.now()
const duration = (syncEnd - syncStart) / 1000
@@ -154,8 +158,8 @@ export class Sync {
_mbus.dispatch('SYNC_UPLOADED', { count: nodesToSend.length })
} catch (e) {
- console.trace(e)
- alert(e)
+ console.error(e)
+ alert(e.message)
return
}
}
@@ -166,59 +170,80 @@ export class N2SyncProgress extends CustomHTMLElement {
static {// {{{
this.tmpl = document.createElement('template')
this.tmpl.innerHTML = `
-
- 0 / 0
+ 
+ 0 / 0
+ 0 / 0
`
}// }}}
constructor() {//{{{
super()
-
this.reset()
- _mbus.subscribe('SYNC_COUNT', event => this.progressHandler(event))
- _mbus.subscribe('SYNC_HANDLED', event => this.progressHandler(event))
+ _mbus.subscribe('SYNC_START', () => this.reset())
+ _mbus.subscribe('SYNC_DOWNLOAD_COUNT', event => this.progressHandler(event))
+ _mbus.subscribe('SYNC_UPLOAD_COUNT', event => this.progressHandler(event))
+ _mbus.subscribe('SYNC_DOWNLOADED', event => this.progressHandler(event))
+ _mbus.subscribe('SYNC_UPLOADED', event => this.progressHandler(event))
_mbus.subscribe('SYNC_DONE', event => this.progressHandler(event))
}//}}}
reset() {//{{{
+ this.classList.remove('ok')
this.state = {
- nodesToSync: 0,
- nodesSynced: 0,
+ nodesToDownload: 0,
+ nodesToUpload: 0,
+ nodesDowloaded: 0,
+ nodesUploaded: 0,
}
+ this.render()
}//}}}
progressHandler(event) {//{{{
const eventData = event.detail.data
switch (event.type) {
- case 'SYNC_COUNT':
- this.state.nodesToSync = eventData.count
+ case 'SYNC_DOWNLOAD_COUNT':
+ this.state.nodesToDownload = eventData.count
this.setSyncState(true)
break
- case 'SYNC_HANDLED':
- this.state.nodesSynced = eventData.handled
+ case 'SYNC_UPLOAD_COUNT':
+ this.state.nodesToUpload = eventData.count
+ this.setSyncState(true)
+ break
+
+ case 'SYNC_DOWNLOADED':
+ this.state.nodesDowloaded = eventData.handled
+ break
+
+ case 'SYNC_UPLOADED':
+ this.state.nodesUploaded += eventData.count
break
case 'SYNC_DONE':
+ this.classList.add('ok')
+
// Hides the progress bar.
this.setSyncState(false)
// Don't update anything if nothing was synced.
- if (this.state.nodesSynced === 0)
+ if (this.state.nodesDowloaded === 0)
break
// Reload the tree nodes to reflect the new/updated nodes.
- window._app.tree.reset()
+ window._app.sidebar.reset()
break
}
this.render()
}//}}}
render() {//{{{
- this.elProgress.max = this.state.nodesToSync
- this.elProgress.value = this.state.nodesSynced
- this.elCount.innerText = `${this.state.nodesSynced} / ${this.state.nodesToSync}`
+ this.elDownloadTransferred.innerText = this.state.nodesDowloaded
+ this.elDownloadTotal.innerText = this.state.nodesToDownload
+
+ this.elUploadTransferred.innerText = this.state.nodesUploaded
+ this.elUploadTotal.innerText = this.state.nodesToUpload
}//}}}
setSyncState(state) {// {{{
if (state)
this.classList.add('show')
else
+ // Give the user a chance to see what it ended on.
setTimeout(() => this.classList.remove('show'), 1500)
}// }}}
}
diff --git a/static/service_worker.js b/static/service_worker.js
index b6a1a13..8522b20 100644
--- a/static/service_worker.js
+++ b/static/service_worker.js
@@ -6,6 +6,7 @@ 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',
@@ -42,8 +43,8 @@ const CACHED_ASSETS = [
'/js/{{ .VERSION }}/page_history.mjs',
'/js/{{ .VERSION }}/page_node.mjs',
'/js/{{ .VERSION }}/page_storage.mjs',
+ '/js/{{ .VERSION }}/sidebar.mjs',
'/js/{{ .VERSION }}/sync.mjs',
- '/js/{{ .VERSION }}/tree.mjs',
]
async function precache() {
@@ -119,9 +120,13 @@ self.addEventListener('activate', event => {
})
self.addEventListener('fetch', event => {
- // console.debug('SERVICE WORKER: fetch', event.request.url)
+ // 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
- if ({{ .DevMode }})
+ if (`{{ .DevMode }}` == 'true')
return event
event.respondWith(fetchAsset(event))
diff --git a/user.go b/user.go
deleted file mode 100644
index b1c2abf..0000000
--- a/user.go
+++ /dev/null
@@ -1,27 +0,0 @@
-package main
-
-import (
- // External
- "github.com/golang-jwt/jwt/v5"
-)
-
-type UserSession struct {
- UserID int
- Username string
- Password string
- Name string
- ClientUUID string
-}
-
-func NewUser(claims jwt.MapClaims) (u UserSession) {
- uid, _ := claims["uid"].(float64)
- name, _ := claims["name"].(string)
- username, _ := claims["login"].(string)
- clientUUID, _ := claims["cid"].(string)
-
- u.UserID = int(uid)
- u.Username = username
- u.Name = name
- u.ClientUUID = clientUUID
- return
-}
diff --git a/user/pkg.go b/user/pkg.go
new file mode 100644
index 0000000..bcdfac8
--- /dev/null
+++ b/user/pkg.go
@@ -0,0 +1,63 @@
+package user
+
+import (
+ // External
+ "github.com/golang-jwt/jwt/v5"
+ "github.com/jmoiron/sqlx"
+
+ // Standard
+ "encoding/json"
+)
+
+type User struct {
+ ID int
+ Username string
+ Name string
+ Preferences map[string]UserPreferences
+}
+
+type UserSession struct {
+ UserID int
+ Username string
+ Password string
+ Name string
+ ClientUUID string
+ Db *sqlx.DB
+}
+
+type UserPreferences struct {
+ DownloadImages bool
+ DownloadFiles bool
+}
+
+func NewUser(claims jwt.MapClaims) (u UserSession) {
+ uid, _ := claims["uid"].(float64)
+ name, _ := claims["name"].(string)
+ username, _ := claims["login"].(string)
+ clientUUID, _ := claims["cid"].(string)
+
+ u.UserID = int(uid)
+ u.Username = username
+ u.Name = name
+ u.ClientUUID = clientUUID
+ return
+}
+
+func (u UserSession) Preferences() (prefs map[string]UserPreferences, err error) {
+ row := u.Db.QueryRow(`SELECT preferences FROM public.user WHERE id=$1`, u.UserID)
+
+ var data []byte
+ err = row.Scan(&data)
+ if err != nil {
+ return
+ }
+
+ err = json.Unmarshal(data, &prefs)
+ return
+}
+
+func (u UserSession) SetPreferences(prefs map[string]UserPreferences) (err error) {
+ j, _ := json.Marshal(prefs)
+ _, err = u.Db.Exec(`UPDATE public.user SET preferences=$2 WHERE id=$1`, u.UserID, j)
+ return
+}
diff --git a/views/layouts/main.gotmpl b/views/layouts/main.gotmpl
index ead95a9..c5fbead 100644
--- a/views/layouts/main.gotmpl
+++ b/views/layouts/main.gotmpl
@@ -15,7 +15,7 @@
"crypto": "/js/{{ .VERSION }}/crypto.mjs",
"node_store": "/js/{{ .VERSION }}/node_store.mjs",
"node": "/js/{{ .VERSION }}/page_node.mjs",
- "tree": "/js/{{ .VERSION }}/tree.mjs"
+ "sidebar": "/js/{{ .VERSION }}/sidebar.mjs"
}
}
diff --git a/views/pages/notes2.gotmpl b/views/pages/notes2.gotmpl
index f15bbb5..2755aea 100644
--- a/views/pages/notes2.gotmpl
+++ b/views/pages/notes2.gotmpl
@@ -1,5 +1,12 @@
{{ define "page" }}
-
+
+
+
+
+
+
+
+
>
@@ -9,21 +16,30 @@
+ {{ .VERSION }}
+
+ Create note
+
+
+
-