-
-
-
-
-
-
-
- 
-
-
- {{ .VERSION }}
-
- Create note
-
-
-
-
-
- 
`
- start.addEventListener('click', () => _mbus.dispatch("GO_TO_NODE", { nodeUUID: ROOT_NODE, dontPush: false, dontExpand: true }))
- this.classList.add('home')
- this.replaceChildren(start)
- return
- }
-
this.classList.add('crumb')
+
this.label = label
this.uuid = uuid
- this.elLink.href = `/#${this.uuid}`
+ this.elLink.href = `/notes2#${this.uuid}`
this.elLink.innerText = this.label
this.elLink.addEventListener('click', () => _mbus.dispatch("GO_TO_NODE", { nodeUUID: this.uuid, dontPush: false, dontExpand: true }))
}// }}}
}
+customElements.define('n2-crumb', N2Crumb)
function tmpl(html) {// {{{
const el = document.createElement('template')
@@ -361,52 +328,4 @@ class OpSearch extends Op {
}// }}}
}
-class N2DragIcon extends CustomHTMLElement {
- static {// {{{
- this.tmpl = document.createElement('template')
- this.tmpl.innerHTML = `
-
- 
- `
- }// }}}
- 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/file.mjs b/static/js/file.mjs
deleted file mode 100644
index 4322218..0000000
--- a/static/js/file.mjs
+++ /dev/null
@@ -1,81 +0,0 @@
-import { CustomHTMLElement } from "./lib/custom_html_element.mjs";
-
-export class N2File extends CustomHTMLElement {
- static {
- this.tmpl = document.createElement('template')
- this.tmpl.innerHTML = `
-
- 
-
- `
- }
- constructor() {
- super(true)
-
- this.addEventListener('click', event => {
- event.preventDefault()
- event.stopPropagation()
-
- window.open(
- URL.createObjectURL(this.file),
- (event.ctrlKey || event.shiftKey) ? '_blank' : '_self',
- )
- })
-
- this.render()
- }
-
- async render() {
- const src = this.getAttribute('src')
-
- // N2's db:// URLs are fetched from IndexedDB.
- if (src.toLowerCase().match('^db://[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$')) {
- // image population has to happen asynchronously,
- // while Marked lib has to be returned a string when exiting this function.
- // populateImg makes sure this returned img element exists and then populates it
- // with the image from IndexedDB.
- const file = await globalThis.nodeStore.files.get(src.slice(5))
- if (!file)
- return
- this.file = file.file
-
- if (file.file.type.startsWith('image/'))
- this.elImage.src = URL.createObjectURL(file.file)
- else {
- // Check for and use an existing MIME type icon.
- // Place them in static/images/file_icons/ and replace the slash with an underscore.
- const url = `/images/${_VERSION}/file_icons/${file.file.type.replaceAll('/', '_')}.svg`
- const res = await fetch(url)
- if (res.ok)
- this.elImage.src = url
-
- this.elFilename.innerText = file.file.name
- this.elFilename.style.display = 'block'
- }
- } else
- this.elImage.src = src
- }
-}
-customElements.define('n2-file', N2File)
diff --git a/static/js/lib/css_colorize.mjs b/static/js/lib/css_colorize.mjs
deleted file mode 100644
index f0fdb37..0000000
--- a/static/js/lib/css_colorize.mjs
+++ /dev/null
@@ -1,207 +0,0 @@
-export class Color {
- constructor(r, g, b) { this.set(r, g, b); }
- toString() { return `rgb(${Math.round(this.r)}, ${Math.round(this.g)}, ${Math.round(this.b)})`; }
-
- set(r, g, b) {
- this.r = this.clamp(r);
- this.g = this.clamp(g);
- this.b = this.clamp(b);
- }
-
- hueRotate(angle = 0) {
- angle = angle / 180 * Math.PI;
- let sin = Math.sin(angle);
- let cos = Math.cos(angle);
-
- this.multiply([
- 0.213 + cos * 0.787 - sin * 0.213, 0.715 - cos * 0.715 - sin * 0.715, 0.072 - cos * 0.072 + sin * 0.928,
- 0.213 - cos * 0.213 + sin * 0.143, 0.715 + cos * 0.285 + sin * 0.140, 0.072 - cos * 0.072 - sin * 0.283,
- 0.213 - cos * 0.213 - sin * 0.787, 0.715 - cos * 0.715 + sin * 0.715, 0.072 + cos * 0.928 + sin * 0.072
- ]);
- }
-
- grayscale(value = 1) {
- this.multiply([
- 0.2126 + 0.7874 * (1 - value), 0.7152 - 0.7152 * (1 - value), 0.0722 - 0.0722 * (1 - value),
- 0.2126 - 0.2126 * (1 - value), 0.7152 + 0.2848 * (1 - value), 0.0722 - 0.0722 * (1 - value),
- 0.2126 - 0.2126 * (1 - value), 0.7152 - 0.7152 * (1 - value), 0.0722 + 0.9278 * (1 - value)
- ]);
- }
-
- sepia(value = 1) {
- this.multiply([
- 0.393 + 0.607 * (1 - value), 0.769 - 0.769 * (1 - value), 0.189 - 0.189 * (1 - value),
- 0.349 - 0.349 * (1 - value), 0.686 + 0.314 * (1 - value), 0.168 - 0.168 * (1 - value),
- 0.272 - 0.272 * (1 - value), 0.534 - 0.534 * (1 - value), 0.131 + 0.869 * (1 - value)
- ]);
- }
-
- saturate(value = 1) {
- this.multiply([
- 0.213 + 0.787 * value, 0.715 - 0.715 * value, 0.072 - 0.072 * value,
- 0.213 - 0.213 * value, 0.715 + 0.285 * value, 0.072 - 0.072 * value,
- 0.213 - 0.213 * value, 0.715 - 0.715 * value, 0.072 + 0.928 * value
- ]);
- }
-
- multiply(matrix) {
- let newR = this.clamp(this.r * matrix[0] + this.g * matrix[1] + this.b * matrix[2]);
- let newG = this.clamp(this.r * matrix[3] + this.g * matrix[4] + this.b * matrix[5]);
- let newB = this.clamp(this.r * matrix[6] + this.g * matrix[7] + this.b * matrix[8]);
- this.r = newR; this.g = newG; this.b = newB;
- }
-
- brightness(value = 1) { this.linear(value); }
- contrast(value = 1) { this.linear(value, -(0.5 * value) + 0.5); }
-
- linear(slope = 1, intercept = 0) {
- this.r = this.clamp(this.r * slope + intercept * 255);
- this.g = this.clamp(this.g * slope + intercept * 255);
- this.b = this.clamp(this.b * slope + intercept * 255);
- }
-
- invert(value = 1) {
- this.r = this.clamp((value + (this.r / 255) * (1 - 2 * value)) * 255);
- this.g = this.clamp((value + (this.g / 255) * (1 - 2 * value)) * 255);
- this.b = this.clamp((value + (this.b / 255) * (1 - 2 * value)) * 255);
- }
-
- hsl() { // Code taken from https://stackoverflow.com/a/9493060/2688027, licensed under CC BY-SA.
- let r = this.r / 255;
- let g = this.g / 255;
- let b = this.b / 255;
- let max = Math.max(r, g, b);
- let min = Math.min(r, g, b);
- let h, s, l = (max + min) / 2;
-
- if (max === min) {
- h = s = 0;
- } else {
- let d = max - min;
- s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
- switch (max) {
- case r: h = (g - b) / d + (g < b ? 6 : 0); break;
- case g: h = (b - r) / d + 2; break;
- case b: h = (r - g) / d + 4; break;
- } h /= 6;
- }
-
- return {
- h: h * 100,
- s: s * 100,
- l: l * 100
- };
- }
-
- clamp(value) {
- if (value > 255) { value = 255; }
- else if (value < 0) { value = 0; }
- return value;
- }
-}
-
-export class Solver {
- constructor(target) {
- this.target = target;
- this.targetHSL = target.hsl();
- this.reusedColor = new Color(0, 0, 0); // Object pool
- }
-
- solve() {
- let result = this.solveNarrow(this.solveWide());
- return {
- values: result.values,
- loss: result.loss,
- filter: this.css(result.values)
- };
- }
-
- solveWide() {
- const A = 5;
- const c = 15;
- const a = [60, 180, 18000, 600, 1.2, 1.2];
-
- let best = { loss: Infinity };
- for (let i = 0; best.loss > 25 && i < 3; i++) {
- let initial = [50, 20, 3750, 50, 100, 100];
- let result = this.spsa(A, a, c, initial, 1000);
- if (result.loss < best.loss) { best = result; }
- } return best;
- }
-
- solveNarrow(wide) {
- const A = wide.loss;
- const c = 2;
- const A1 = A + 1;
- const a = [0.25 * A1, 0.25 * A1, A1, 0.25 * A1, 0.2 * A1, 0.2 * A1];
- return this.spsa(A, a, c, wide.values, 500);
- }
-
- spsa(A, a, c, values, iters) {
- const alpha = 1;
- const gamma = 0.16666666666666666;
-
- let best = null;
- let bestLoss = Infinity;
- let deltas = new Array(6);
- let highArgs = new Array(6);
- let lowArgs = new Array(6);
-
- for (let k = 0; k < iters; k++) {
- let ck = c / Math.pow(k + 1, gamma);
- for (let i = 0; i < 6; i++) {
- deltas[i] = Math.random() > 0.5 ? 1 : -1;
- highArgs[i] = values[i] + ck * deltas[i];
- lowArgs[i] = values[i] - ck * deltas[i];
- }
-
- let lossDiff = this.loss(highArgs) - this.loss(lowArgs);
- for (let i = 0; i < 6; i++) {
- let g = lossDiff / (2 * ck) * deltas[i];
- let ak = a[i] / Math.pow(A + k + 1, alpha);
- values[i] = fix(values[i] - ak * g, i);
- }
-
- let loss = this.loss(values);
- if (loss < bestLoss) { best = values.slice(0); bestLoss = loss; }
- } return { values: best, loss: bestLoss };
-
- function fix(value, idx) {
- let max = 100;
- if (idx === 2 /* saturate */) { max = 7500; }
- else if (idx === 4 /* brightness */ || idx === 5 /* contrast */) { max = 200; }
-
- if (idx === 3 /* hue-rotate */) {
- if (value > max) { value = value % max; }
- else if (value < 0) { value = max + value % max; }
- } else if (value < 0) { value = 0; }
- else if (value > max) { value = max; }
- return value;
- }
- }
-
- loss(filters) { // Argument is array of percentages.
- let color = this.reusedColor;
- color.set(0, 0, 0);
-
- color.invert(filters[0] / 100);
- color.sepia(filters[1] / 100);
- color.saturate(filters[2] / 100);
- color.hueRotate(filters[3] * 3.6);
- color.brightness(filters[4] / 100);
- color.contrast(filters[5] / 100);
-
- let colorHSL = color.hsl();
- return Math.abs(color.r - this.target.r)
- + Math.abs(color.g - this.target.g)
- + Math.abs(color.b - this.target.b)
- + Math.abs(colorHSL.h - this.targetHSL.h)
- + Math.abs(colorHSL.s - this.targetHSL.s)
- + Math.abs(colorHSL.l - this.targetHSL.l);
- }
-
- css(filters) {
- function fmt(idx, multiplier = 1) { return Math.round(filters[idx] * multiplier); }
- return `invert(${fmt(0)}%) sepia(${fmt(1)}%) saturate(${fmt(2)}%) hue-rotate(${fmt(3, 3.6)}deg) brightness(${fmt(4)}%) contrast(${fmt(5)}%)`;
- }
-}
diff --git a/static/js/lib/custom_html_element.mjs b/static/js/lib/custom_html_element.mjs
index d1fb7ae..dedb5d8 100644
--- a/static/js/lib/custom_html_element.mjs
+++ b/static/js/lib/custom_html_element.mjs
@@ -1,25 +1,14 @@
-/* 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) {// {{{
+ constructor() {// {{{
super()
- this._fields = new Map()
+ this.appendChild(this.constructor.tmpl.content.cloneNode(true))
- const workOn = useShadow ? this.attachShadow({ mode: 'open' }) : this
- workOn.appendChild(this.constructor.tmpl.content.cloneNode(true))
- workOn.querySelectorAll('*').forEach(el => {
+ this.querySelectorAll('*').forEach(el => {
const field = el.dataset.field
if (field !== undefined) {
const fieldName = this.toElementName('field', field)
this[fieldName] = el
- this._fields.set(this.toElementName('', field), el)
}
const name = el.dataset.el
@@ -30,22 +19,39 @@ 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/lib/fullcalendar.min.js b/static/js/lib/fullcalendar.min.js
new file mode 100644
index 0000000..e96f044
--- /dev/null
+++ b/static/js/lib/fullcalendar.min.js
@@ -0,0 +1,6 @@
+/*!
+FullCalendar Standard Bundle v6.1.11
+Docs & License: https://fullcalendar.io/docs/initialize-globals
+(c) 2023 Adam Shaw
+*/
+var FullCalendar=function(e){"use strict";var t,n,r,i,s,o,a,l,c,d={},u=[],h=/acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i;function f(e,t){for(var n in t)e[n]=t[n];return e}function g(e){var t=e.parentNode;t&&t.removeChild(e)}function p(e,n,r){var i,s,o,a={};for(o in n)"key"==o?i=n[o]:"ref"==o?s=n[o]:a[o]=n[o];if(arguments.length>2&&(a.children=arguments.length>3?t.call(arguments,2):r),"function"==typeof e&&null!=e.defaultProps)for(o in e.defaultProps)void 0===a[o]&&(a[o]=e.defaultProps[o]);return m(e,a,i,s,null)}function m(e,t,i,s,o){var a={type:e,props:t,key:i,ref:s,__k:null,__:null,__b:0,__e:null,__d:void 0,__c:null,__h:null,constructor:void 0,__v:null==o?++r:o};return null==o&&null!=n.vnode&&n.vnode(a),a}function v(){return{current:null}}function y(e){return e.children}function b(e,t,n){"-"===t[0]?e.setProperty(t,null==n?"":n):e[t]=null==n?"":"number"!=typeof n||h.test(t)?n:n+"px"}function E(e,t,n,r,i){var s;e:if("style"===t)if("string"==typeof n)e.style.cssText=n;else{if("string"==typeof r&&(e.style.cssText=r=""),r)for(t in r)n&&t in n||b(e.style,t,"");if(n)for(t in n)r&&n[t]===r[t]||b(e.style,t,n[t])}else if("o"===t[0]&&"n"===t[1])s=t!==(t=t.replace(/Capture$/,"")),t=t.toLowerCase()in e?t.toLowerCase().slice(2):t.slice(2),e.l||(e.l={}),e.l[t+s]=n,n?r||e.addEventListener(t,s?A:S,s):e.removeEventListener(t,s?A:S,s);else if("dangerouslySetInnerHTML"!==t){if(i)t=t.replace(/xlink(H|:h)/,"h").replace(/sName$/,"s");else if("width"!==t&&"height"!==t&&"href"!==t&&"list"!==t&&"form"!==t&&"tabIndex"!==t&&"download"!==t&&t in e)try{e[t]=null==n?"":n;break e}catch(e){}"function"==typeof n||(null==n||!1===n&&-1==t.indexOf("-")?e.removeAttribute(t):e.setAttribute(t,n))}}function S(e){s=!0;try{return this.l[e.type+!1](n.event?n.event(e):e)}finally{s=!1}}function A(e){s=!0;try{return this.l[e.type+!0](n.event?n.event(e):e)}finally{s=!1}}function D(e,t){this.props=e,this.context=t}function w(e,t){if(null==t)return e.__?w(e.__,e.__.__k.indexOf(e)+1):null;for(var n;t
- ${content} \n
- \n
-
- `
+ return `${content}
\n` + return `${content}
\n` }, list(token) { @@ -181,7 +134,7 @@ export class MarkedPosition { }, listitem(token) { - return ``
+ return ``
+ (token.escaped ? code : escapeHtmlEntities(code, true))
+ '
\n'
}
- return `'
+ (token.escaped ? code : escapeHtmlEntities(code, true))
@@ -204,7 +157,7 @@ export class MarkedPosition {
blockquote(token) {
const body = this.parser.parse(token.tokens)
- return `\n${body}
\n`
+ return `\n${body}
\n`
},
html(token) {
@@ -216,13 +169,13 @@ export class MarkedPosition {
},
hr(token) {
- return `
\n`
+ return `
\n`
},
checkbox(token) {
- return ` '
+ + 'disabled="" type="checkbox"> '
},
table(token) {
@@ -265,7 +218,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="marked_setpos(event)" data-offset-start="${start}" data-offset-end="${end}"`
+ ofs = `onclick="setpos(event)" data-offset-start="${start}" data-offset-end="${end}"`
}
const content = this.parser.parseInline(token.tokens);
@@ -277,23 +230,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) {
@@ -303,7 +256,7 @@ export class MarkedPosition {
return text
}
token.href = cleanHref
- let out = ' {
- const target = document.getElementById(id)
- if (target) {
- observer.disconnect()
- return target
- }
- })
-
- observer.observe(document.documentElement, {
- childList: true,
- subtree: true
- })
- }// }}}
- async populateImg(fileID, elementID) {// {{{
- let img = await globalThis.nodeStore.files.get(fileID)
- const el = await this.whenElementExist(elementID)
-
- el.src = URL.createObjectURL(img.file)
- }// }}}
}
diff --git a/static/js/node.mjs b/static/js/node.mjs
new file mode 100644
index 0000000..acebbb7
--- /dev/null
+++ b/static/js/node.mjs
@@ -0,0 +1,286 @@
+import { ROOT_NODE } from 'node_store'
+import { CustomHTMLElement } from './lib/custom_html_element.mjs'
+import { MarkedPosition } from './marked_position.mjs'
+
+export class N2NodeUI extends CustomHTMLElement {
+ static {// {{{
+ this.tmpl = document.createElement('template')
+ this.tmpl.innerHTML = `
+
+
+
+
+
+
+
+ ![]()
+ 
+
+ `
+ }// }}}
+
+ constructor() {// {{{
+ super()
+ this.node = null
+
+ this.style.display = 'contents'
+ this.classList.add('show-markdown') // TODO Should probably be moved to settings.
+ this.marked = new MarkedPosition()
+
+ _mbus.subscribe('NODE_UI_OPEN', event => {
+ this.node = event.detail.data
+ this.showMarkdown(true)
+ this.render()
+ })
+
+ _mbus.subscribe('NODE_MODIFIED', () => {
+ document.querySelector('#crumbs .crumbs')?.classList.add('node-modified')
+ this.elIconSave.src = `/images/${_VERSION}/icon_save.svg`
+ this.render()
+ })
+
+ _mbus.subscribe('NODE_UNMODIFIED', () => {
+ document.querySelector('#crumbs .crumbs')?.classList.remove('node-modified')
+ this.elIconSave.src = `/images/${_VERSION}/icon_save_disabled.svg`
+ })
+
+ _mbus.subscribe('MARKDOWN_TOGGLE', () => this.showMarkdown(!this.showMarkdown()))
+ _mbus.subscribe('MARKDOWN_EDIT', ({ detail }) => this.editMarkdown(detail.data))
+
+ this.elName.addEventListener('click', () => {
+ const name = prompt('Change title', this.node.data.Name)
+ if (name === null)
+ return
+
+ try {
+ this.node.setName(name)
+ } catch (err) {
+ console.error(err)
+ alert(err)
+ }
+ })
+ this.elNodeContent.addEventListener('input', event => this.contentChanged(event))
+ this.elIconMarkdown.addEventListener('click', () => this.showMarkdown(!this.showMarkdown()))
+
+ this.showMarkdown(true)
+ }// }}}
+ render() {// {{{
+ this.elName.innerText = this.node?.get('Name') ?? ''
+ this.elNodeContent.value = this.node?.get('Content') ?? ''
+ this.elNodeMarkdown.innerHTML = this.marked.parse(this.elNodeContent.value)
+ }// }}}
+ takeFocus() {// {{{
+ if (this.showMarkdown()) {
+ this.elNodeMarkdown.focus()
+ } else
+ this.elNodeContent.focus()
+ }// }}}
+
+ contentChanged(event) {//{{{
+ this.node.setContent(event.target.value)
+ }//}}}
+ isModified() {// {{{
+ return this.node?.isModified()
+ }// }}}
+ showMarkdown(state) {// {{{
+ // No point in showing markdown if there is no data.
+ // If there is no data, it will show a blank page regardless, and the user will most
+ // likely want to edit content, which can't be done in markdown.
+ const show = this.node?.content().trim() !== '' && state
+
+ switch (show) {
+ case true:
+ this.elNodeMarkdown.innerHTML = this.marked.parse(this.elNodeContent.value)
+ this.elIconMarkdown.src = `/images/${_VERSION}/icon_markdown.svg`
+ this.classList.add('show-markdown')
+ break
+ case false:
+ this.elIconMarkdown.src = `/images/${_VERSION}/icon_markdown_hollow.svg`
+ this.classList.remove('show-markdown')
+ break
+ case null:
+ case undefined:
+ return this.classList.contains('show-markdown')
+ }
+ }// }}}
+ editMarkdown(data) {// {{{
+ this.showMarkdown(false)
+ this.elNodeContent.selectionStart = data.position.start
+ this.elNodeContent.selectionEnd = data.position.end
+ this.elNodeContent.focus()
+ }// }}}
+}
+customElements.define('n2-nodeui', N2NodeUI)
+
+export class Node {
+ static sort(a, b) {//{{{
+ if (a.data.Name < b.data.Name) return -1
+ if (a.data.Name > b.data.Name) return 0
+ return 0
+ }//}}}
+ static create(name, parentUUID) {// {{{
+ return new Node({
+ UUID: uuidv7(),
+ Created: (new Date()).toISOString(),
+ Content: '',
+ Name: name,
+ ParentUUID: parentUUID,
+ Markdown: false,
+ History: false,
+ })
+ }// }}}
+
+ constructor(nodeData, level) {//{{{
+ this.Level = level
+ this.data = nodeData
+ this.UUID = nodeData.UUID
+
+ // Toplevel nodes are normalized to have the ROOT_NODE as parent.
+ if (nodeData.UUID !== ROOT_NODE && nodeData.ParentUUID === '') {
+ this.ParentUUID = ROOT_NODE
+ this.data.ParentUUID = ROOT_NODE
+ } else
+ this.ParentUUID = nodeData.ParentUUID
+
+ this._children_fetched = false
+ this.Children = []
+ this.Ancestors = []
+
+ this._sibling_before = null
+ this._sibling_after = null
+ this._parent = null
+
+ this.reset()
+ }//}}}
+
+ reset() {// {{{
+ this._content = this.data.Content
+ this._modified = false
+ }// }}}
+ get(prop) {//{{{
+ return this.data[prop]
+ }//}}}
+ updated() {//{{{
+ // '2024-12-17T17:33:48.85939Z
+ return new Date(Date.parse(this.data.Updated))
+ }//}}}
+ isModified() {// {{{
+ return this._modified
+ }// }}}
+ hasFetchedChildren() {//{{{
+ return this._children_fetched
+ }//}}}
+ async fetchChildren() {//{{{
+ this.Children = await nodeStore.getTreeNodes(this.UUID, this.Level + 1)
+ this._children_fetched = true
+
+ // Children are sorted to allow for storing siblings befare and after.
+ // These are used with keyboard navigation in the tree.
+ this.Children.sort(Node.sort)
+
+ const numChildren = this.Children.length
+ for (let i = 0; i < numChildren; i++) {
+ if (i > 0)
+ this.Children[i]._sibling_before = this.Children[i - 1]
+ if (i < numChildren - 1)
+ this.Children[i]._sibling_after = this.Children[i + 1]
+ this.Children[i]._parent = this
+ }
+
+ // Notify the tree that all children are fetched and ready to process.
+ //_notes2.current.tree.fetchChildrenOn(this.UUID)
+ _mbus.dispatch(`NODE_CHILDREN_FETCHED_${this.UUID}`)
+
+ return this.Children
+ }//}}}
+ hasChildren() {//{{{
+ return this.Children.length > 0
+ }//}}}
+ getSiblingBefore() {// {{{
+ return this._sibling_before
+ }// }}}
+ getSiblingAfter() {// {{{
+ return this._sibling_after
+ }// }}}
+ getParent() {//{{{
+ return this._parent
+ }//}}}
+ isLastSibling() {//{{{
+ return this._sibling_after === null
+ }//}}}
+ isFirstSibling() {//{{{
+ return this._sibling_before === null
+ }//}}}
+ content() {//{{{
+ /* TODO - implement crypto
+ if (this.CryptoKeyID != 0 && !this._decrypted)
+ this.#decrypt()
+ */
+ return this._content
+ }//}}}
+ setContent(new_content) {//{{{
+ this._content = new_content
+ this._modified = true
+ _mbus.dispatch('NODE_MODIFIED', { node: this })
+ }//}}}
+ setName(new_name) {// {{{
+ if (new_name.trim() === '')
+ throw new Error(`The name can't be empty`)
+
+ this.data.Name = new_name
+ this._modified = true
+ _mbus.dispatch('NODE_MODIFIED', { node: this })
+ }// }}}
+ async save() {//{{{
+ this.data.Content = this._content
+ this.data.Updated = new Date().toISOString()
+ this._modified = false
+
+ _mbus.dispatch('NODE_UNMODIFIED')
+
+ // When stored into database and ancestry was changed,
+ // the ancestry path could be interesting.
+ const ancestors = await nodeStore.getNodeAncestry(this)
+ this.data.Ancestors = ancestors.map(a => a.get('Name')).reverse()
+ }//}}}
+}
+
+function uuidv7() {
+ // random bytes
+ const value = new Uint8Array(16)
+ crypto.getRandomValues(value)
+
+ // current timestamp in ms
+ const timestamp = BigInt(Date.now())
+
+ // timestamp
+ value[0] = Number((timestamp >> 40n) & 0xffn)
+ value[1] = Number((timestamp >> 32n) & 0xffn)
+ value[2] = Number((timestamp >> 24n) & 0xffn)
+ value[3] = Number((timestamp >> 16n) & 0xffn)
+ value[4] = Number((timestamp >> 8n) & 0xffn)
+ value[5] = Number(timestamp & 0xffn)
+
+ // version and variant
+ value[6] = (value[6] & 0x0f) | 0x70
+ value[8] = (value[8] & 0x3f) | 0x80
+
+ const str = Array.from(value)
+ .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/node_store.mjs b/static/js/node_store.mjs
index 6be8f82..e849e29 100644
--- a/static/js/node_store.mjs
+++ b/static/js/node_store.mjs
@@ -1,8 +1,6 @@
import { Node } from 'node'
export const ROOT_NODE = '00000000-0000-0000-0000-000000000000'
-export const ORPHANED_NODE = '00000000-0000-0000-0000-000000000001'
-export const DELETED_NODE = '00000000-0000-0000-0000-000000000002'
export class NodeStore {
constructor() {//{{{
@@ -14,13 +12,10 @@ export class NodeStore {
this.nodes = {}
this.sendQueue = null
this.nodesHistory = null
- this.files = null
-
- this.initializeSpecialNodes()
}//}}}
initializeDB() {//{{{
return new Promise((resolve, reject) => {
- const req = indexedDB.open('notes', 8)
+ const req = indexedDB.open('notes', 7)
// Schema upgrades for IndexedDB.
// These can start from different points depending on updates to Notes2 since a device was online.
@@ -29,7 +24,6 @@ export class NodeStore {
let appState
let sendQueue
let nodesHistory
- let files
const db = event.target.result
const trx = event.target.transaction
@@ -61,16 +55,12 @@ export class NodeStore {
break
case 6:
- nodesHistory = db.createObjectStore('nodes_history', { keyPath: ['UUID', 'HistoryUUID'] })
+ nodesHistory = db.createObjectStore('nodes_history', { keyPath: ['UUID', 'Updated'] })
break
case 7:
trx.objectStore('nodes_history').createIndex('byUUID', 'UUID', { unique: false })
break
-
- case 8:
- files = db.createObjectStore('files', { keyPath: 'UUID' })
- break
}
}
}
@@ -78,9 +68,9 @@ export class NodeStore {
req.onsuccess = (event) => {
this.db = event.target.result
this.sendQueue = new SimpleNodeStore(this.db, 'send_queue')
- this.nodesHistory = new NodeHistoryStore(this.db, 'nodes_history')
- this.files = new SimpleNodeStore(this.db, 'files')
- resolve()
+ this.nodesHistory = new SimpleNodeStore(this.db, 'nodes_history')
+ this.initializeRootNode()
+ .then(() => resolve())
}
req.onerror = (event) => {
@@ -88,11 +78,40 @@ export class NodeStore {
}
})
}//}}}
- 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)
- }// }}}
+ 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 = {}
+ }//}}}
node(uuid, dataIfUndefined, newLevel) {//{{{
let n = this.nodes[uuid]
@@ -140,6 +159,39 @@ export class NodeStore {
})
}//}}}
+ /*
+ upsertNodeRecords(records) {//{{{
+ return new Promise((resolve, reject) => {
+ const t = this.db.transaction('nodes', 'readwrite')
+ const nodeStore = t.objectStore('nodes')
+ t.onerror = (event) => {
+ console.log('transaction error', event.target.error)
+ reject(event.target.error)
+ }
+ t.oncomplete = () => {
+ resolve()
+ }
+
+ // records is an object, not an array.
+ for (const i in records) {
+ const record = records[i]
+
+ let addReq
+ let op
+ if (record.Deleted) {
+ op = 'deleting'
+ addReq = nodeStore.delete(record.UUID)
+ } else {
+ op = 'upserting'
+ // 'modified' is a local property for tracking
+ // nodes needing to be synced to backend.
+ record.modified = 0
+ addReq = nodeStore.put(record)
+ }
+ }
+ })
+ }//}}}
+ */
getTreeNodes(parent, newLevel) {//{{{
return new Promise((resolve, reject) => {
// Parent of toplevel nodes is ROOT_NODE in indexedDB.
@@ -150,30 +202,14 @@ export class NodeStore {
const nodeStore = trx.objectStore('nodes')
const index = nodeStore.index('byParent')
const req = index.getAll(storeParent)
-
- const hasChildrenPromises = []
req.onsuccess = (event) => {
const nodes = []
for (const i in event.target.result) {
const nodeData = event.target.result[i]
const node = this.node(nodeData.UUID, nodeData, newLevel)
-
- // Look for the key of any children, a hopefully fast way
- // to tell if any children exists at all and this node is a
- // "folder". Needed quite early on for sorting.
- const promise = new Promise((resolve, reject) => {
- const countReq = index.getKey(nodeData.UUID)
- countReq.onsuccess = event => {
- node.setHasChildren(event.target.result !== undefined)
- resolve()
- }
- })
- hasChildrenPromises.push(promise)
nodes.push(node)
}
-
- Promise.all(hasChildrenPromises)
- .then(() => resolve(nodes))
+ resolve(nodes)
}
req.onerror = (event) => reject(event.target.error)
})
@@ -221,7 +257,6 @@ export class NodeStore {
nodeStore = t.objectStore('nodes')
t.oncomplete = (_event) => {
- console.log('complete')
resolve()
}
@@ -246,14 +281,6 @@ 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
@@ -291,16 +318,6 @@ 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.
@@ -351,7 +368,6 @@ 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) => {
@@ -360,20 +376,8 @@ class SimpleNodeStore {
}
})
}//}}}
- get(key) {//{{{
- return new Promise((resolve, _reject) => {
- const req = this.db
- .transaction(['nodes', this.storeName], 'readonly')
- .objectStore(this.storeName)
- .get(key)
-
- req.onsuccess = (event) => {
- resolve(event.target.result)
- }
- })
- }//}}}
retrieve(limit) {//{{{
- return new Promise((resolve, _reject) => {
+ return new Promise((resolve, reject) => {
const cursorReq = this.db
.transaction(['nodes', this.storeName], 'readonly')
.objectStore(this.storeName)
@@ -429,114 +433,4 @@ class SimpleNodeStore {
}//}}}
}
-class NodeHistoryStore extends SimpleNodeStore {
- constructor(db, storeName) {//{{{
- super(db, storeName)
- }//}}}
- count(uuid) {//{{{
- if (uuid === undefined)
- return super.count()
-
- 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() {// {{{
- // random bytes
- const value = new Uint8Array(16)
- crypto.getRandomValues(value)
-
- // current timestamp in ms
- const timestamp = BigInt(Date.now())
-
- // timestamp
- value[0] = Number((timestamp >> 40n) & 0xffn)
- value[1] = Number((timestamp >> 32n) & 0xffn)
- value[2] = Number((timestamp >> 24n) & 0xffn)
- value[3] = Number((timestamp >> 16n) & 0xffn)
- value[4] = Number((timestamp >> 8n) & 0xffn)
- value[5] = Number(timestamp & 0xffn)
-
- // version and variant
- value[6] = (value[6] & 0x0f) | 0x70
- value[8] = (value[8] & 0x3f) | 0x80
-
- const str = Array.from(value)
- .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/notes2.mjs b/static/js/notes2.mjs
index ddaf891..7bef2ad 100644
--- a/static/js/notes2.mjs
+++ b/static/js/notes2.mjs
@@ -69,7 +69,7 @@ export class Notes2 extends Component {
}
if (!dontPush)
- history.pushState({ nodeUUID }, '', `/#${nodeUUID}`)
+ history.pushState({ nodeUUID }, '', `/notes2#${nodeUUID}`)
// New node is fetched in order to retrieve content and files.
// Such data is unnecessary to transfer for tree/navigational purposes.
@@ -86,6 +86,404 @@ export class Notes2 extends Component {
}//}}}
}
+class Tree extends Component {
+ constructor(props) {//{{{
+ super(props)
+ console.log('new tree')
+ this.treeNodeComponents = {}
+ this.treeTrunk = []
+ this.selectedNode = null
+ this.expandedNodes = {} // keyed on UUID
+ this.treeDiv = createRef()
+
+ // childrenFetchedCallbacks is keyed on a UUID and each
+ // item is an array with callbacks called when a UUID has
+ // had all children fetched.
+ this.childrenFetchedCallbacks = {}
+
+ this.props.app.tree = this
+
+ this.populateFirstLevel()
+ }//}}}
+ render({ app }) {//{{{
+ const renderedTreeTrunk = this.treeTrunk.map(node => {
+ this.treeNodeComponents[node.UUID] = createRef()
+ return html`<${TreeNode} key=${`treenode_${node.UUID}`} tree=${this} node=${node} ref=${this.treeNodeComponents[node.UUID]} selected=${node.UUID === app.state.startNode?.UUID} />`
+ })
+
+ return html`
+
+ _notes2.current.goToNode(ROOT_NODE)}>
+
+ 
_mbus.dispatch('op-search')} />
+ 
_sync.run()} />
+
+ ${renderedTreeTrunk}
+ `
+ }//}}}
+ componentDidMount() {//{{{
+ //this.treeDiv.current.addEventListener('keydown', event => this.keyHandler(event))
+
+ // This will show and select the treenode that is selected in the node UI.
+ const node = _notes2.current?.nodeUI.current?.node.value
+ if (node === null)
+ return
+ _notes2.current.tree.expandToTrunk(node)
+ this.setSelected(node)
+ }//}}}
+
+ fetchChildrenNotify(uuid, fn) {//{{{
+ if (this.childrenFetchedCallbacks[uuid] === undefined)
+ this.childrenFetchedCallbacks[uuid] = [fn]
+ else
+ this.childrenFetchedCallbacks[uuid].push(fn)
+ }//}}}
+ fetchChildrenOn(uuid) {//{{{
+ if (this.childrenFetchedCallbacks[uuid] === undefined)
+ return
+ for (const fn of this.childrenFetchedCallbacks[uuid])
+ fn(uuid)
+ delete this.childrenFetchedCallbacks[uuid]
+ }//}}}
+
+ populateFirstLevel(callback = null) {//{{{
+ 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)
+ }
+ this.forceUpdate()
+ if (callback)
+ callback()
+
+ })
+ .catch(e => { console.log(e); console.log(e.type, e.error); alert(e.error) })
+ }//}}}
+ setSelected(node, dontExpand) {//{{{
+ // The previously selected node, if any, needs to be rerendered
+ // to not retain its 'selected' class.
+ const prevUUID = this.selectedNode?.UUID
+ this.selectedNode = node
+ if (prevUUID)
+ this.treeNodeComponents[prevUUID]?.current.forceUpdate()
+
+ // And now the newly selected node is rerendered.
+ this.treeNodeComponents[node.UUID]?.current.forceUpdate()
+
+ if (!dontExpand)
+ this.setNodeExpanded(node, true)
+ }//}}}
+ isSelected(node) {//{{{
+ return this.selectedNode?.UUID === node.UUID
+ }//}}}
+ async expandToTrunk(node) {//{{{
+ // Get all ancestors from a certain node up to the highest grandparent.
+ const ancestry = await nodeStore.getNodeAncestry(node, [])
+ for (const i in ancestry) {
+ await nodeStore.node(ancestry[i].UUID).fetchChildren()
+ this.setNodeExpanded(ancestry[i], true)
+ }
+
+ // Already a top node, no need to expand anything.
+ if (ancestry.length === 0)
+ return
+
+ // Start the chain of by expanding the top node.
+ this.setNodeExpanded(ancestry[ancestry.length - 1], true)
+ }//}}}
+ getNodeExpanded(UUID) {//{{{
+ if (this.expandedNodes[UUID] === undefined)
+ this.expandedNodes[UUID] = signal(false)
+ return this.expandedNodes[UUID].value
+ }//}}}
+ async setNodeExpanded(node, value) {//{{{
+ return new Promise((resolve, reject) => {
+ const work = uuid => {
+ // Creating a default value if it doesn't exist already.
+ this.getNodeExpanded(uuid)
+ this.expandedNodes[uuid].value = value
+ resolve()
+ }
+
+ if (node.hasFetchedChildren()) {
+ work(node.UUID)
+ return
+ } else {
+ this.fetchChildrenNotify(node.UUID, uuid => work(uuid))
+ }
+ })
+ }//}}}
+ getParentWithNextSibling(node) {//{{{
+ let currNode = node
+ while (currNode !== null && currNode.UUID !== ROOT_NODE && currNode.getSiblingAfter() === null) {
+ currNode = currNode.getParent()
+ }
+ return currNode?.getSiblingAfter()
+ }//}}}
+ getLastExpandedNode(node) {//{{{
+ let currNode = node
+ while (this.getNodeExpanded(currNode.UUID) && currNode.hasChildren()) {
+ currNode = currNode.Children[currNode.Children.length - 1]
+ }
+ return currNode
+ }//}}}
+
+ async recursiveExpand(node, state) {//{{{
+ if (state)
+ await this.setNodeExpanded(node, true)
+
+ for (const child of node.Children)
+ await this.recursiveExpand(child, state)
+
+ if (!state)
+ await this.setNodeExpanded(node, false)
+ }//}}}
+
+ async keyHandler(event) {//{{{
+ let handled = true
+ const n = this.selectedNode
+ const Space = ' '
+
+ // This handler would otherwise react to stuff like Ctrl+L.
+ if (event.ctrlKey || event.altKey)
+ return
+
+ switch (event.key) {
+ // Space and enter is toggling expansion.
+ // Holding shift down does it recursively.
+ case Space:
+ case 'Enter':
+ const expanded = this.getNodeExpanded(n.UUID)
+ if (event.shiftKey) {
+ this.recursiveExpand(n, !expanded)
+ } else {
+ this.setNodeExpanded(n, !expanded)
+ }
+ 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
+ }
+
+ if (handled) {
+ event.preventDefault()
+ event.stopPropagation()
+ }
+ }//}}}
+ async navigateLeft(n) {//{{{
+ if (n === null)
+ return
+
+ const expanded = this.getNodeExpanded(n.UUID)
+ if (expanded && n.hasChildren()) {
+ this.setNodeExpanded(n, false)
+ return
+ }
+
+ if (n.isFirstSibling() && n.getParent().UUID !== ROOT_NODE) {
+ await _notes2.current.goToNode(n.getParent()?.UUID, true, true)
+ return
+ }
+
+ const siblingBefore = n.getSiblingBefore()
+ const siblingExpanded = this.getNodeExpanded(siblingBefore?.UUID)
+ if (siblingBefore !== null && siblingExpanded && siblingBefore.hasChildren()) {
+ const siblingAbove = this.getLastExpandedNode(siblingBefore)
+ await _notes2.current.goToNode(siblingAbove?.UUID, true, true)
+ return
+ }
+
+ await _notes2.current.goToNode(n.getSiblingBefore()?.UUID, true, true)
+ }//}}}
+ async navigateRight(n) {//{{{
+ if (n === null)
+ return
+
+ const siblingAfter = n.getSiblingAfter()
+ const expanded = this.getNodeExpanded(n.UUID)
+
+ if (!expanded && n.hasChildren()) {
+ this.setNodeExpanded(n, true)
+ return
+ }
+
+ if (expanded && n.hasChildren()) {
+ await _notes2.current.goToNode(n.Children[0]?.UUID, true, true)
+ return
+ }
+
+ if (n.isLastSibling()) {
+ const nextNode = this.getParentWithNextSibling(n)
+ await _notes2.current.goToNode(nextNode?.UUID, true, true)
+ return
+ }
+
+ await _notes2.current.goToNode(n.getSiblingAfter()?.UUID, true, true)
+ }//}}}
+ async navigateUp(n) {//{{{
+ if (n === null)
+ return
+
+ let parent = null
+ const siblingBefore = n.getSiblingBefore()
+ let siblingExpanded = false
+ if (siblingBefore !== null)
+ siblingExpanded = this.getNodeExpanded(siblingBefore.UUID)
+
+ if (n.isFirstSibling()) {
+ parent = n.getParent()
+ if (parent?.UUID === ROOT_NODE)
+ return
+ await _notes2.current.goToNode(parent?.UUID, true, true)
+ return
+ }
+
+ if (siblingBefore !== null && siblingExpanded && siblingBefore.hasChildren()) {
+ await _notes2.current.goToNode(siblingBefore.Children[siblingBefore.Children.length - 1]?.UUID, true, true)
+ return
+ }
+
+ if (siblingBefore) {
+ await _notes2.current.goToNode(siblingBefore.UUID, true, true)
+ return
+ }
+ }//}}}
+ async navigateDown(n) {//{{{
+ if (n === null)
+ return
+
+ const nodeExpanded = this.getNodeExpanded(n.UUID)
+
+ // Last node, not expanded, so it matters not whether it has children or not.
+ // Traverse upward to nearest parent with next sibling.
+ if (!nodeExpanded && n.isLastSibling()) {
+ const wantedNode = this.getParentWithNextSibling(n)
+ await _notes2.current.goToNode(wantedNode?.UUID, true, true)
+ return
+ }
+
+ if (nodeExpanded && n.isLastSibling() && !n.hasChildren()) {
+ const wantedNode = this.getParentWithNextSibling(n)
+ await _notes2.current.goToNode(wantedNode?.UUID, true, true)
+ return
+ }
+
+ // Node not expanded. Go to this node's next sibling.
+ // GoToNode will abort if given null.
+ if (!nodeExpanded || !n.hasChildren()) {
+ await _notes2.current.goToNode(n.getSiblingAfter()?.UUID, true, true)
+ return
+ }
+
+ // Node is expanded.
+ // Children will be visually beneath this node, if any.
+ if (nodeExpanded && n.hasChildren()) {
+ await _notes2.current.goToNode(n.Children[0].UUID, true, true)
+ return
+ }
+ }//}}}
+ async navigateTop() {//{{{
+ const root = await nodeStore.get(ROOT_NODE)
+ if (root.Children.length === 0)
+ return
+ await _notes2.current.goToNode(root.Children[0]?.UUID, true, true)
+ }//}}}
+ async navigateBottom() {//{{{
+ const root = await nodeStore.get(ROOT_NODE)
+ if (root.Children.length === 0)
+ return
+
+ const toplevel = root.Children[root.Children.length - 1]
+ const toplevelExpanded = this.getNodeExpanded(toplevel?.UUID)
+
+ if (toplevelExpanded) {
+ const lastnode = this.getLastExpandedNode(toplevel)
+ await _notes2.current.goToNode(lastnode?.UUID, true, true)
+ } else
+ await _notes2.current.goToNode(root.Children[root.Children.length - 1]?.UUID, true, true)
+ }//}}}
+}
+
+class TreeNode extends Component {
+ constructor(props) {//{{{
+ super(props)
+ this.children_populated = signal(false)
+ if (this.props.node.Level === 0 || this.props.tree.getNodeExpanded(this.props.node.UUID))
+ this.fetchChildren()
+ }//}}}
+ render({ tree, node, parent }) {//{{{
+ // Fetch the next level of children if the parent tree node is expanded and our children thus will be visible.
+ const selected = tree.isSelected(node) ? 'selected' : ''
+
+ if (!this.children_populated.value && tree.getNodeExpanded(parent?.props.node.UUID))
+ this.fetchChildren()
+
+ const children = node.Children.map(node => {
+ tree.treeNodeComponents[node.UUID] = createRef()
+ return html`<${TreeNode} key=${`treenode_${node.UUID}`} tree=${tree} node=${node} parent=${this} ref=${tree.treeNodeComponents[node.UUID]} selected=${node.UUID === tree.props.app.startNode?.UUID} />`
+ })
+
+ let expandImg = ''
+ if (node.Children.length === 0)
+ expandImg = html`
`
+ else {
+ if (tree.getNodeExpanded(node.UUID))
+ expandImg = html`
`
+ else
+ expandImg = html`
`
+ }
+
+ return html`
+
+
+ window._notes2.current.goToNode(node.UUID)}>${node.get('Name')}
+
+ `
+ }//}}}
+ async fetchChildren() {//{{{
+ await this.props.node.fetchChildren()
+ this.children_populated.value = true
+ }//}}}
+}
+
class Op {
constructor(id) {
this.id = id
diff --git a/static/js/page_history.mjs b/static/js/page_history.mjs
deleted file mode 100644
index 44061f6..0000000
--- a/static/js/page_history.mjs
+++ /dev/null
@@ -1,319 +0,0 @@
-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 PAGESIZE = 15
- static {// {{{
- this.tmpl = document.createElement('template')
- this.tmpl.innerHTML = `
-
-
-
- 
- 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
deleted file mode 100644
index 2106ada..0000000
--- a/static/js/page_node.mjs
+++ /dev/null
@@ -1,593 +0,0 @@
-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 = `
-
-
-
-
-
-
-
-
- ![]()
- 
-
- 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
deleted file mode 100644
index a007130..0000000
--- a/static/js/page_storage.mjs
+++ /dev/null
@@ -1,31 +0,0 @@
-import { CustomHTMLElement } from "./lib/custom_html_element.mjs"
-
-export class N2PageStorage extends CustomHTMLElement {
- static {
- this.tmpl = document.createElement('template')
- this.tmpl.innerHTML = `
- Local storage
-
-
-
- `
- }
- constructor() {
- super()
-
- window._mbus.subscribe('SHOW_PAGE', event => {
- if (event.detail.data?.page == 'storage')
- this.render()
- })
- }
- async render() {
- const countNodes = await globalThis.nodeStore.nodeCount()
- const countQueuedNodes = await globalThis.nodeStore.sendQueue.count()
- const countHistoryNodes = await globalThis.nodeStore.nodesHistory.count()
-
- this.elCountNodes.innerText = countNodes
- this.elCountQueuedNodes.innerText = countQueuedNodes
- this.elCountHistoryNodes.innerText = countHistoryNodes
- }
-}
-customElements.define('n2-pagestorage', N2PageStorage)
diff --git a/static/js/sidebar.mjs b/static/js/sidebar.mjs
deleted file mode 100644
index 6cd5814..0000000
--- a/static/js/sidebar.mjs
+++ /dev/null
@@ -1,771 +0,0 @@
-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'
-
-// TreeExpandedHandler is responsible for collapsing or expanding
-// the node tree, wide view or narrow "mobile" view.
-class TreeExpansionHandler {// {{{
- constructor() {
- this.isNarrow = false
- this.initializeMediaHandler()
- this.initializeBusEvents()
- }
-
- initializeBusEvents() {
- _mbus.subscribe('TREE_EXPANSION', ({ detail }) => {
- // When a node is selected on the screen and the screen
- // is narrow the tree is automatically hidden.
- //
- // Can't always hide the tree automatically when a node
- // is selected since the wide mode shows the tree as standard.
- if (detail.data?.when == 'narrow' && !this.isNarrow)
- return
-
- this.treeExpansion(detail.data?.expand)
- })
- }
-
- initializeMediaHandler() {
- const query = window.matchMedia('(max-width: 800px)')
- query.addEventListener('change', event => this.screenNarrowHandler(event))
-
- // Run once to set initial state, instead of needing to toggle state.
- this.screenNarrowHandler(query)
- }
-
- // When screen becomes narrow, the tree is automatically hidden.
- // Primary purpose is to read content, not browse, which is why
- // the tree is hidden as standard.
- screenNarrowHandler(event) {
- this.isNarrow = event.matches
-
- if (this.isNarrow)
- this.treeExpansion(false)
- else
- this.treeExpansion(true)
- }
-
- treeExpansion(expanded) {
- const notes2 = document.getElementById('notes2')
-
- if (expanded) {
- notes2.classList.remove('hide-tree')
- notes2.classList.add('show-tree')
- } else {
- notes2.classList.add('hide-tree')
- notes2.classList.remove('show-tree')
- }
- }
-}// }}}
-
-export class N2Sidebar extends CustomHTMLElement {
- static {// {{{
- this.tmpl = document.createElement('template')
- this.tmpl.innerHTML = `
-
-
-
- <
-
-
-
-
- 
-
-
- `
- }// }}}
-
- constructor() {// {{{
- super()
-
- this.id = 'tree-nodes'
- this.tabIndex = 0
-
- this.treeNodeComponents = {}
- this.expandedNodes = {} // keyed on UUID
- this.selectedNode = null
- this.rendered = false
-
- new TreeExpansionHandler()
-
- this.addEventListener('keydown', event => this.keyHandler(event))
- 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 })
- })
-
- _mbus.subscribe('NODE_MODIFIED', ({ detail }) => {
- const node = detail.data.node
- const treenode = this.treeNodeComponents[node.get('UUID')]
-
- if (!treenode)
- return
-
- treenode.node = node
- treenode.render(true)
- })
-
- /* XXX - set color */
- let color = new Color(0x80, 0x00, 0x33)
- let solver = new Solver(color)
- let result = solver.solve()
- console.log(result.filter)
- }// }}}
- async render() {// {{{
- if (this.rendered)
- alert('Tree should only be rendered once.')
-
- 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() {// {{{
- this.treeNodeComponents = {}
- this.rendered = false
- this.elTreenodes.replaceChildren()
- this.render()
- }// }}}
- getNodeExpanded(UUID) {//{{{
- if (this.expandedNodes[UUID] === undefined)
- this.expandedNodes[UUID] = false
- return this.expandedNodes[UUID]
- }//}}}
- async setNodeExpanded(node, value) {//{{{
- let expanded = this.expandedNodes[node.UUID]
- if (expanded === undefined) {
- this.expandedNodes[node.UUID] = false
- expanded = false
- }
-
- if (expanded === value)
- return
-
- this.expandedNodes[node.UUID] = value
- _mbus.dispatch(`NODE_EXPAND_${node.UUID}`, value)
- }//}}}
- setSelected(node, dontExpand) {//{{{
- if (node === undefined)
- return
-
- // The previously selected node, if any, needs to be rerendered
- // to not retain its 'selected' class.
- const prevUUID = this.selectedNode?.UUID
- this.selectedNode = node
- if (prevUUID)
- this.treeNodeComponents[prevUUID]?.render(true)
-
- // And now the newly selected node is rerendered.
- this.treeNodeComponents[node.UUID]?.render(true)
-
- if (!dontExpand)
- this.setNodeExpanded(node, true)
- }//}}}
- isSelected(node) {//{{{
- return this.selectedNode?.UUID === node.UUID
- }//}}}
- getTreeNode(uuid) {// {{{
- return this.treeNodeComponents[uuid]
- }// }}}
-
- async keyHandler(event) {//{{{
- let handled = true
- const n = this.selectedNode
- const Space = ' '
-
- // This handler would otherwise react to stuff like Ctrl+L.
- if (event.ctrlKey || event.altKey)
- return
-
- switch (event.key) {
- // Space and enter is toggling expansion.
- // Holding shift down does it recursively.
- case Space:
- case 'Enter':
- const expanded = this.getNodeExpanded(n.UUID)
- if (event.shiftKey) {
- this.recursiveExpand(n, !expanded)
- } else {
- this.setNodeExpanded(n, !expanded)
- }
- break
-
- case 'Home':
- this.navigateTop()
- break
-
- case 'End':
- this.navigateBottom()
- break
-
- case 'ArrowDown':
- await this.navigateDown(this.selectedNode)
- break
-
- case 'ArrowUp':
- await this.navigateUp(this.selectedNode)
- break
-
- case 'ArrowLeft':
- await this.navigateLeft(this.selectedNode)
- break
-
- case 'ArrowRight':
- await this.navigateRight(this.selectedNode)
- break
-
- default:
- handled = false
- }
-
- if (handled) {
- event.preventDefault()
- event.stopPropagation()
- }
- }//}}}
- async navigateLeft(n) {//{{{
- if (n === null || n === undefined || n.UUID == ROOT_NODE)
- return
-
- const expanded = this.getNodeExpanded(n.UUID)
- if (expanded && n.hasChildren() && n.UUID !== ROOT_NODE) {
- this.setNodeExpanded(n, false)
- return
- }
-
- if (n.isFirstSibling()) {
- _mbus.dispatch("GO_TO_NODE", { nodeUUID: n.getParent()?.UUID, dontPush: false, dontExpand: true })
- return
- }
-
- const siblingBefore = n.getSiblingBefore()
- const siblingExpanded = this.getNodeExpanded(siblingBefore?.UUID)
- if (siblingBefore !== null && siblingExpanded && siblingBefore.hasChildren()) {
- const siblingAbove = this.getLastExpandedNode(siblingBefore)
- _mbus.dispatch("GO_TO_NODE", { nodeUUID: siblingAbove?.UUID, dontPush: false, dontExpand: true })
- return
- }
-
- _mbus.dispatch("GO_TO_NODE", { nodeUUID: n.getSiblingBefore()?.UUID, dontPush: false, dontExpand: true })
- }//}}}
- async navigateRight(n) {//{{{
- if (n === null || n === undefined)
- return
-
- const siblingAfter = n.getSiblingAfter()
- const expanded = this.getNodeExpanded(n.UUID)
-
- if (!expanded && n.hasChildren()) {
- this.setNodeExpanded(n, true)
- return
- }
-
- if (expanded && n.hasChildren()) {
- _mbus.dispatch("GO_TO_NODE", { nodeUUID: n.Children[0]?.UUID, dontPush: false, dontExpand: true })
- return
- }
-
- if (n.isLastSibling()) {
- const nextNode = this.getParentWithNextSibling(n)
- _mbus.dispatch("GO_TO_NODE", { nodeUUID: nextNode?.UUID, dontPush: false, dontExpand: true })
- return
- }
-
- _mbus.dispatch("GO_TO_NODE", { nodeUUID: n.getSiblingAfter()?.UUID, dontPush: false, dontExpand: true })
- }//}}}
- async navigateUp(n) {//{{{
- if (n === null || n === undefined || n.UUID == ROOT_NODE)
- return
-
- let parent = null
- const siblingBefore = n.getSiblingBefore()
- let siblingExpanded = false
- if (siblingBefore !== null)
- siblingExpanded = this.getNodeExpanded(siblingBefore.UUID)
-
- if (n.isFirstSibling()) {
- parent = n.getParent()
- _mbus.dispatch("GO_TO_NODE", { nodeUUID: parent?.UUID, dontPush: false, dontExpand: true })
- return
- }
-
- if (siblingBefore !== null && siblingExpanded && siblingBefore.hasChildren()) {
- const nodeVisuallyAbove = this.getLastExpandedNode(siblingBefore)
- _mbus.dispatch("GO_TO_NODE", { nodeUUID: nodeVisuallyAbove.UUID, dontPush: false, dontExpand: true })
- return
- }
-
- if (siblingBefore) {
- _mbus.dispatch("GO_TO_NODE", { nodeUUID: siblingBefore.UUID, dontPush: false, dontExpand: true })
- return
- }
- }//}}}
- async navigateDown(n) {//{{{
- if (n === null || n === undefined)
- return
-
- const nodeExpanded = this.getNodeExpanded(n.UUID)
-
- // Last node, not expanded, so it matters not whether it has children or not.
- // Traverse upward to nearest parent with next sibling.
- if (!nodeExpanded && n.isLastSibling()) {
- const wantedNode = this.getParentWithNextSibling(n)
- _mbus.dispatch("GO_TO_NODE", { nodeUUID: wantedNode?.UUID, dontPush: false, dontExpand: true })
- return
- }
-
- if (nodeExpanded && n.isLastSibling() && !n.hasChildren()) {
- const wantedNode = this.getParentWithNextSibling(n)
- _mbus.dispatch("GO_TO_NODE", { nodeUUID: wantedNode?.UUID, dontPush: false, dontExpand: true })
- return
- }
-
- // Node not expanded. Go to this node's next sibling.
- // GoToNode will abort if given null.
- if (!nodeExpanded || !n.hasChildren()) {
- _mbus.dispatch("GO_TO_NODE", { nodeUUID: n.getSiblingAfter()?.UUID, dontPush: false, dontExpand: true })
- return
- }
-
- // Node is expanded.
- // Children will be visually beneath this node, if any.
- if (nodeExpanded && n.hasChildren()) {
- _mbus.dispatch("GO_TO_NODE", { nodeUUID: n.Children[0].UUID, dontPush: false, dontExpand: true })
- return
- }
- }//}}}
- async navigateTop() {//{{{
- const root = await nodeStore.get(ROOT_NODE)
- _mbus.dispatch("GO_TO_NODE", { nodeUUID: root.UUID, dontPush: false, dontExpand: true })
- }//}}}
- async navigateBottom() {//{{{
- const orphaned = await nodeStore.get(ORPHANED_NODE)
-
- 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: orphaned.Children[orphaned.Children.length - 1]?.UUID, dontPush: false, dontExpand: true })
- */
- }//}}}
-
- getParentWithNextSibling(node) {//{{{
- let currNode = node
- while (currNode !== null && currNode.UUID !== ROOT_NODE && currNode.getSiblingAfter() === null) {
- currNode = currNode.getParent()
- }
- return currNode?.getSiblingAfter()
- }//}}}
- getLastExpandedNode(node) {//{{{
- let currNode = node
- while (this.getNodeExpanded(currNode.UUID) && currNode.hasChildren()) {
- currNode = currNode.Children[currNode.Children.length - 1]
- }
- return currNode
- }//}}}
- async recursiveExpand(node, state) {//{{{
- 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, providedAncestors, dontExpand) {// {{{
- const treenode = this.treeNodeComponents[node.UUID]
-
- if (!dontExpand) {
- const ancestors = providedAncestors || await nodeStore.getNodeAncestry(node)
- for (const ancestor of ancestors.reverse()) {
- this.setNodeExpanded(ancestor, true)
- }
- }
-
- treenode?.scrollIntoView({ block: 'nearest' })
- }// }}}
-}
-
-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(sidebar, node, parent) {//{{{
- super()
- this.setAttribute('draggable', 'true')
- this.classList.add('node')
-
- this.sidebar = sidebar
- this.node = node
- this.parent = parent
-
- this.children_populated = false
- this.rendered = false
- this.dragNode = null
-
- 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)
- })
-
- // 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))
- }// }}}
-
- 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
- }//}}}
- async render(force_update, force_refetch_children) {//{{{
- if (this.rendered && force_update !== true)
- return this
-
- if (this.sidebar.getNodeExpanded(this.node.UUID) || force_refetch_children)
- await this.fetchChildren(force_refetch_children)
-
- // Update the name and selected status.
- this.elName.querySelector('span').innerText = this.node.get('Name')
-
- 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')
- } else {
- this.elChildren.classList.remove('expanded')
- this.elChildren.classList.add('collapsed')
- }
-
- // The expand icon ![]()
is only changed to not get a flickering when re-rendering.
- 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.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?
- let children = []
- if (expanded)
- children = this.node.Children.map(node => {
- let treenode = this.sidebar.treeNodeComponents[node.UUID]
- if (treenode === undefined) {
- treenode = new N2TreeNode(this.sidebar, node, this)
- this.sidebar.treeNodeComponents[node.UUID] = treenode
- }
- return treenode
- })
-
- const renderedChildren = []
- for (const c of children)
- renderedChildren.push(await c.render())
- this.elChildren.replaceChildren(...renderedChildren)
-
- this.rendered = true
- return this
- }//}}}
-
- setImgSrc(img, newSrc) {// {{{
- if (img.getAttribute('src') === newSrc)
- return
- 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 daa603f..9b58cf7 100644
--- a/static/js/sync.mjs
+++ b/static/js/sync.mjs
@@ -17,12 +17,10 @@ export class Sync {
const state = await nodeStore.getAppState('latest_sync_node')
const oldMax = (state?.value ? state.value : 0)
- let nodeCountDownload = await this.getNodeCount(oldMax)
- let nodeCountUpload = await nodeStore.sendQueue.count()
+ let nodeCount = await this.getNodeCount(oldMax)
+ nodeCount += await nodeStore.sendQueue.count()
- _mbus.dispatch('SYNC_START')
- _mbus.dispatch('SYNC_DOWNLOAD_COUNT', { count: nodeCountDownload })
- _mbus.dispatch('SYNC_UPLOAD_COUNT', { count: nodeCountUpload })
+ _mbus.dispatch('SYNC_COUNT', { count: nodeCount })
await this.nodesFromServer(oldMax)
.then(durationNodes => {
@@ -30,7 +28,6 @@ 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')
@@ -81,16 +78,15 @@ export class Sync {
handled++
if (handled % 100 === 0)
- _mbus.dispatch('SYNC_DOWNLOADED', { handled })
+ _mbus.dispatch('SYNC_HANDLED', { handled })
}
} while (res.Continue)
- _mbus.dispatch('SYNC_DOWNLOADED', { handled })
+ _mbus.dispatch('SYNC_HANDLED', { handled })
nodeStore.setAppState('latest_sync_node', currMax)
} catch (e) {
- console.error('sync node tree', e)
- alert(e.message)
+ console.log('sync node tree', e)
} finally {
syncEnd = Date.now()
const duration = (syncEnd - syncStart) / 1000
@@ -158,8 +154,8 @@ export class Sync {
_mbus.dispatch('SYNC_UPLOADED', { count: nodesToSend.length })
} catch (e) {
- console.error(e)
- alert(e.message)
+ console.trace(e)
+ alert(e)
return
}
}
@@ -167,83 +163,62 @@ export class Sync {
}
export class N2SyncProgress extends CustomHTMLElement {
- static {// {{{
+ static {
this.tmpl = document.createElement('template')
this.tmpl.innerHTML = `
- 
- 0 / 0
- 0 / 0
+
+ 0 / 0
`
- }// }}}
+ }
constructor() {//{{{
super()
+
this.reset()
- _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_COUNT', event => this.progressHandler(event))
+ _mbus.subscribe('SYNC_HANDLED', event => this.progressHandler(event))
_mbus.subscribe('SYNC_DONE', event => this.progressHandler(event))
}//}}}
reset() {//{{{
- this.classList.remove('ok')
this.state = {
- nodesToDownload: 0,
- nodesToUpload: 0,
- nodesDowloaded: 0,
- nodesUploaded: 0,
+ nodesToSync: 0,
+ nodesSynced: 0,
}
- this.render()
}//}}}
progressHandler(event) {//{{{
const eventData = event.detail.data
switch (event.type) {
- case 'SYNC_DOWNLOAD_COUNT':
- this.state.nodesToDownload = eventData.count
+ case 'SYNC_COUNT':
+ this.state.nodesToSync = eventData.count
this.setSyncState(true)
break
- 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
+ case 'SYNC_HANDLED':
+ this.state.nodesSynced = eventData.handled
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.nodesDowloaded === 0)
+ if (this.state.nodesSynced === 0)
break
// Reload the tree nodes to reflect the new/updated nodes.
- window._app.sidebar.reset()
+ window._app.tree.reset()
break
}
this.render()
}//}}}
render() {//{{{
- this.elDownloadTransferred.innerText = this.state.nodesDowloaded
- this.elDownloadTotal.innerText = this.state.nodesToDownload
-
- this.elUploadTransferred.innerText = this.state.nodesUploaded
- this.elUploadTotal.innerText = this.state.nodesToUpload
+ this.elProgress.max = this.state.nodesToSync
+ this.elProgress.value = this.state.nodesSynced
+ this.elCount.innerText = `${this.state.nodesSynced} / ${this.state.nodesToSync}`
}//}}}
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/js/tree.mjs b/static/js/tree.mjs
new file mode 100644
index 0000000..3732fc5
--- /dev/null
+++ b/static/js/tree.mjs
@@ -0,0 +1,462 @@
+import { ROOT_NODE } from 'node_store'
+import { CustomHTMLElement } from './lib/custom_html_element.mjs'
+
+export class N2Tree extends CustomHTMLElement {
+ static {// {{{
+ this.tmpl = document.createElement('template')
+ this.tmpl.innerHTML = `
+
+
+
+
+
+
+ `
+ }// }}}
+
+ constructor() {// {{{
+ super()
+
+ this.id = 'tree-nodes'
+ this.tabIndex = 0
+
+ this.treeNodeComponents = {}
+ this.treeTrunk = []
+ this.expandedNodes = {} // keyed on UUID
+ this.selectedNode = null
+ this.rendered = false
+
+ this.addEventListener('keydown', event => this.keyHandler(event))
+ this.elSearch.addEventListener('click', () => _mbus.dispatch('op-search'))
+ this.elSync.addEventListener('click', () => _sync.run())
+ this.elLogo.addEventListener('click', () => _app.goToNode(ROOT_NODE, false, false))
+
+ _mbus.subscribe('NODE_MODIFIED', ({ detail })=>{
+ const node = detail.data.node
+ const treenode = this.treeNodeComponents[node.get('UUID')]
+
+ if (!treenode)
+ return
+
+ treenode.node = node
+ treenode.render(true)
+ })
+
+ this.populateFirstLevel()
+ }// }}}
+ 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.rendered = true
+ return this
+ }// }}}
+ reset() {// {{{
+ console.log('tree reset')
+ this.treeNodeComponents = {}
+ this.treeTrunk = []
+ this.rendered = false
+ this.elTreenodes.replaceChildren()
+ this.populateFirstLevel()
+ }// }}}
+ 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.log(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) {//{{{
+ let expanded = this.expandedNodes[node.UUID]
+
+ if (expanded === undefined) {
+ this.expandedNodes[node.UUID] = false
+ expanded = false
+ }
+
+ if (expanded === value)
+ return
+
+ this.expandedNodes[node.UUID] = value
+ _mbus.dispatch(`NODE_EXPAND_${node.UUID}`, value)
+ }//}}}
+ setSelected(node, dontExpand) {//{{{
+ if (node === undefined)
+ return
+
+ // The previously selected node, if any, needs to be rerendered
+ // to not retain its 'selected' class.
+ const prevUUID = this.selectedNode?.UUID
+ this.selectedNode = node
+ if (prevUUID)
+ this.treeNodeComponents[prevUUID]?.render(true)
+
+ // And now the newly selected node is rerendered.
+ this.treeNodeComponents[node.UUID]?.render(true)
+
+ if (!dontExpand)
+ this.setNodeExpanded(node, true)
+ }//}}}
+ isSelected(node) {//{{{
+ return this.selectedNode?.UUID === node.UUID
+ }//}}}
+
+ async keyHandler(event) {//{{{
+ let handled = true
+ const n = this.selectedNode
+ const Space = ' '
+
+ // This handler would otherwise react to stuff like Ctrl+L.
+ if (event.ctrlKey || event.altKey)
+ return
+
+ switch (event.key) {
+ // Space and enter is toggling expansion.
+ // Holding shift down does it recursively.
+ case Space:
+ case 'Enter':
+ const expanded = this.getNodeExpanded(n.UUID)
+ if (event.shiftKey) {
+ this.recursiveExpand(n, !expanded)
+ } else {
+ this.setNodeExpanded(n, !expanded)
+ }
+ 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
+ }
+
+ if (handled) {
+ event.preventDefault()
+ event.stopPropagation()
+ }
+ }//}}}
+ async navigateLeft(n) {//{{{
+ if (n === null || n === undefined)
+ return
+
+ const expanded = this.getNodeExpanded(n.UUID)
+ if (expanded && n.hasChildren()) {
+ this.setNodeExpanded(n, false)
+ return
+ }
+
+ if (n.isFirstSibling() && n.getParent().UUID !== ROOT_NODE) {
+ _mbus.dispatch("GO_TO_NODE", { nodeUUID: n.getParent()?.UUID, dontPush: false, dontExpand: true })
+ return
+ }
+
+ const siblingBefore = n.getSiblingBefore()
+ const siblingExpanded = this.getNodeExpanded(siblingBefore?.UUID)
+ if (siblingBefore !== null && siblingExpanded && siblingBefore.hasChildren()) {
+ const siblingAbove = this.getLastExpandedNode(siblingBefore)
+ _mbus.dispatch("GO_TO_NODE", { nodeUUID: siblingAbove?.UUID, dontPush: false, dontExpand: true })
+ return
+ }
+
+ _mbus.dispatch("GO_TO_NODE", { nodeUUID: n.getSiblingBefore()?.UUID, dontPush: false, dontExpand: true })
+ }//}}}
+ async navigateRight(n) {//{{{
+ if (n === null || n === undefined)
+ return
+
+ const siblingAfter = n.getSiblingAfter()
+ const expanded = this.getNodeExpanded(n.UUID)
+
+ if (!expanded && n.hasChildren()) {
+ this.setNodeExpanded(n, true)
+ return
+ }
+
+ if (expanded && n.hasChildren()) {
+ _mbus.dispatch("GO_TO_NODE", { nodeUUID: n.Children[0]?.UUID, dontPush: false, dontExpand: true })
+ return
+ }
+
+ if (n.isLastSibling()) {
+ const nextNode = this.getParentWithNextSibling(n)
+ _mbus.dispatch("GO_TO_NODE", { nodeUUID: nextNode?.UUID, dontPush: false, dontExpand: true })
+ return
+ }
+
+ _mbus.dispatch("GO_TO_NODE", { nodeUUID: n.getSiblingAfter()?.UUID, dontPush: false, dontExpand: true })
+ }//}}}
+ async navigateUp(n) {//{{{
+ if (n === null || n === undefined)
+ return
+
+ let parent = null
+ const siblingBefore = n.getSiblingBefore()
+ let siblingExpanded = false
+ if (siblingBefore !== null)
+ siblingExpanded = this.getNodeExpanded(siblingBefore.UUID)
+
+ 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 })
+ return
+ }
+
+ if (siblingBefore) {
+ _mbus.dispatch("GO_TO_NODE", { nodeUUID: siblingBefore.UUID, dontPush: false, dontExpand: true })
+ return
+ }
+ }//}}}
+ async navigateDown(n) {//{{{
+ if (n === null || n === undefined)
+ return
+
+ const nodeExpanded = this.getNodeExpanded(n.UUID)
+
+ // Last node, not expanded, so it matters not whether it has children or not.
+ // Traverse upward to nearest parent with next sibling.
+ if (!nodeExpanded && n.isLastSibling()) {
+ const wantedNode = this.getParentWithNextSibling(n)
+ _mbus.dispatch("GO_TO_NODE", { nodeUUID: wantedNode?.UUID, dontPush: false, dontExpand: true })
+ return
+ }
+
+ if (nodeExpanded && n.isLastSibling() && !n.hasChildren()) {
+ const wantedNode = this.getParentWithNextSibling(n)
+ _mbus.dispatch("GO_TO_NODE", { nodeUUID: wantedNode?.UUID, dontPush: false, dontExpand: true })
+ return
+ }
+
+ // Node not expanded. Go to this node's next sibling.
+ // GoToNode will abort if given null.
+ if (!nodeExpanded || !n.hasChildren()) {
+ _mbus.dispatch("GO_TO_NODE", { nodeUUID: n.getSiblingAfter()?.UUID, dontPush: false, dontExpand: true })
+ return
+ }
+
+ // Node is expanded.
+ // Children will be visually beneath this node, if any.
+ if (nodeExpanded && n.hasChildren()) {
+ _mbus.dispatch("GO_TO_NODE", { nodeUUID: n.Children[0].UUID, dontPush: false, dontExpand: true })
+ return
+ }
+ }//}}}
+ 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 })
+ }//}}}
+ async navigateBottom() {//{{{
+ const root = await nodeStore.get(ROOT_NODE)
+ if (root.Children.length === 0)
+ return
+
+ const toplevel = root.Children[root.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 })
+ }//}}}
+
+ getParentWithNextSibling(node) {//{{{
+ let currNode = node
+ while (currNode !== null && currNode.UUID !== ROOT_NODE && currNode.getSiblingAfter() === null) {
+ currNode = currNode.getParent()
+ }
+ return currNode?.getSiblingAfter()
+ }//}}}
+ getLastExpandedNode(node) {//{{{
+ let currNode = node
+ while (this.getNodeExpanded(currNode.UUID) && currNode.hasChildren()) {
+ currNode = currNode.Children[currNode.Children.length - 1]
+ }
+ return currNode
+ }//}}}
+ async recursiveExpand(node, state) {//{{{
+ if (state)
+ await this.setNodeExpanded(node, true)
+
+ for (const child of node.Children)
+ await this.recursiveExpand(child, state)
+
+ if (!state)
+ await this.setNodeExpanded(node, false)
+ }//}}}
+ async makeVisible(node) {// {{{
+ const treenode = this.treeNodeComponents[node.UUID]
+
+ const ancestors = 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 {// {{{
+ this.tmpl = document.createElement('template')
+ this.tmpl.innerHTML = `
+
+ ![]()
+
+
+
+ `
+ }// }}}
+
+ constructor(tree, node, parent) {//{{{
+ super()
+ this.classList.add('node')
+
+ this.tree = tree
+ this.node = node
+ this.parent = parent
+
+ this.children_populated = false
+ this.rendered = false
+
+ 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)
+ })
+
+ _mbus.subscribe(`NODE_EXPAND_${node.UUID}`, state => {
+ this.render(true)
+ })
+
+ if (this.node.Level === 0 || this.tree.getNodeExpanded(this.node.UUID))
+ this.fetchChildren()
+ }// }}}
+ async fetchChildren() {//{{{
+ await this.node.fetchChildren()
+ this.children_populated = true
+ }//}}}
+ render(force_update) {//{{{
+ 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.Children.length > 0 && this.tree.getNodeExpanded(this.node.UUID)
+
+ 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.innerText = this.node.get('Name')
+ if (this.tree.isSelected(this.node))
+ this.elName.classList.add('selected')
+ else
+ this.elName.classList.remove('selected')
+
+ // Update expansion state
+ if (expanded) {
+ this.elChildren.classList.add('expanded')
+ this.elChildren.classList.remove('collapsed')
+ } else {
+ this.elChildren.classList.remove('expanded')
+ this.elChildren.classList.add('collapsed')
+ }
+
+ // The expand icon ![]()
is only changed to not get a flickering when re-rendering.
+ if (this.node.Children.length === 0)
+ this.setImgSrc(this.elExpand, `/images/${window._VERSION}/leaf.svg`)
+ else if (this.tree.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]
+ if (treenode === undefined) {
+ treenode = new N2TreeNode(this.tree, node, this)
+ this.tree.treeNodeComponents[node.UUID] = treenode
+ }
+ return treenode
+ })
+
+ for (const c of children)
+ this.elChildren.appendChild(c.render())
+
+ this.rendered = true
+ return this
+ }//}}}
+
+ setImgSrc(img, newSrc) {// {{{
+ if (img.getAttribute('src') === newSrc)
+ return
+ img.setAttribute('src', newSrc)
+ }// }}}
+}
+customElements.define('n2-treenode', N2TreeNode)
+
+// vim: foldmethod=marker
diff --git a/static/service_worker.js b/static/service_worker.js
index 8522b20..806eaad 100644
--- a/static/service_worker.js
+++ b/static/service_worker.js
@@ -1,50 +1,41 @@
const CACHE_NAME = 'notes2-{{ .VERSION }}'
const CACHED_ASSETS = [
'/',
+ '/notes2',
'/offline',
'/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',
'/images/{{ .VERSION }}/expanded.svg',
- '/images/{{ .VERSION }}/icon_history.svg',
- '/images/{{ .VERSION }}/icon_home.svg',
'/images/{{ .VERSION }}/icon_markdown_hollow.svg',
'/images/{{ .VERSION }}/icon_markdown.svg',
'/images/{{ .VERSION }}/icon_refresh.svg',
'/images/{{ .VERSION }}/icon_save_disabled.svg',
- '/images/{{ .VERSION }}/icon_save.svg',
'/images/{{ .VERSION }}/icon_search.svg',
- '/images/{{ .VERSION }}/icon_settings.svg',
- '/images/{{ .VERSION }}/icon_table.svg',
'/images/{{ .VERSION }}/leaf.svg',
- '/images/{{ .VERSION }}/logo_small.svg',
'/images/{{ .VERSION }}/logo.svg',
'/js/{{ .VERSION }}/api.mjs',
'/js/{{ .VERSION }}/app.mjs',
'/js/{{ .VERSION }}/checklist.mjs',
'/js/{{ .VERSION }}/crypto.mjs',
- '/js/{{ .VERSION }}/file.mjs',
'/js/{{ .VERSION }}/key.mjs',
- '/js/{{ .VERSION }}/lib/css_colorize.mjs',
'/js/{{ .VERSION }}/lib/custom_html_element.mjs',
+ '/js/{{ .VERSION }}/lib/fullcalendar.min.js',
'/js/{{ .VERSION }}/lib/node_modules/marked/lib/marked.esm.js',
'/js/{{ .VERSION }}/lib/node_modules/marked-token-position/lib/index.esm.js',
'/js/{{ .VERSION }}/lib/sjcl.js',
'/js/{{ .VERSION }}/marked_position.mjs',
'/js/{{ .VERSION }}/mbus.mjs',
+ '/js/{{ .VERSION }}/node.mjs',
'/js/{{ .VERSION }}/node_store.mjs',
'/js/{{ .VERSION }}/notes2.mjs',
- '/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() {
@@ -120,13 +111,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))
diff --git a/user.go b/user.go
new file mode 100644
index 0000000..b1c2abf
--- /dev/null
+++ b/user.go
@@ -0,0 +1,27 @@
+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
deleted file mode 100644
index bcdfac8..0000000
--- a/user/pkg.go
+++ /dev/null
@@ -1,63 +0,0 @@
-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 c5fbead..8ffa278 100644
--- a/views/layouts/main.gotmpl
+++ b/views/layouts/main.gotmpl
@@ -14,8 +14,12 @@
"checklist": "/js/{{ .VERSION }}/checklist.mjs",
"crypto": "/js/{{ .VERSION }}/crypto.mjs",
"node_store": "/js/{{ .VERSION }}/node_store.mjs",
- "node": "/js/{{ .VERSION }}/page_node.mjs",
- "sidebar": "/js/{{ .VERSION }}/sidebar.mjs"
+ "node": "/js/{{ .VERSION }}/node.mjs",
+ "tree": "/js/{{ .VERSION }}/tree.mjs"
+ {{/*
+ "session": "/js/{{ .VERSION }}/session.mjs",
+ "ws": "/_js/{{ .VERSION }}/websocket.mjs"
+ */}}
}
}
@@ -29,6 +33,8 @@
import { MessageBus } from '/js/{{ .VERSION }}/mbus.mjs'
window._mbus = new MessageBus()
+
+
{{ block "page" . }}{{ end }}
diff --git a/views/pages/login.gotmpl b/views/pages/login.gotmpl
index 3e2235f..3f4406e 100644
--- a/views/pages/login.gotmpl
+++ b/views/pages/login.gotmpl
@@ -29,7 +29,7 @@ class Login {
const password = document.getElementById('password').value
API.authenticate(username, password)
.then(ans=>{
- location.href = '/'
+ location.href = '/notes2'
})
.catch(e=>{
setTimeout(()=>this.errorDiv.innerText = e, 75)
diff --git a/views/pages/notes2.gotmpl b/views/pages/notes2.gotmpl
index 2755aea..77b74a6 100644
--- a/views/pages/notes2.gotmpl
+++ b/views/pages/notes2.gotmpl
@@ -1,56 +1,18 @@
{{ define "page" }}
-
-
-
-
-
-
-
-
- >
+
-
-
-
-