magnus/Notes2
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Rewrite

Browse source
This commit is contained in:
Magnus Åhall 2024-12-03 06:53:31 +01:00
parent 42b66714aa
commit ac8b334eee
35 changed files with 541 additions and 675 deletions
Download patch file Download diff file Expand all files Collapse all files

74
static/js/node.mjs
View file

@ -113,7 +113,7 @@ export class NodeUI extends Component {
return html`
<${menu} />
<header class="${modified}" onclick=${() => this.saveNode()}>
<!--header class="${modified}" onclick=${() => this.saveNode()}>
<div class="tree"><img src="/images/${window._VERSION}/tree.svg" onclick=${() => document.getElementById('app').classList.toggle('toggle-tree')} /></div>
<div class="name">Notes</div>
<div class="markdown" onclick=${evt => { evt.stopPropagation(); this.toggleMarkdown() }}><img src="/images/${window._VERSION}/${node.RenderMarkdown.value ? 'markdown.svg' : 'markdown-hollow.svg'}" /></div>
@ -122,10 +122,12 @@ export class NodeUI extends Component {
<div class="add" onclick=${evt => this.createNode(evt)}><img src="/images/${window._VERSION}/add.svg" /></div>
<div class="keys" onclick=${evt => { evt.stopPropagation(); this.showPage('keys') }}><img src="/images/${window._VERSION}/padlock.svg" /></div>
<div class="menu" onclick=${evt => this.showMenu(evt)}>☰</div>
</header>
</header-->
<div id="crumbs">
<div class="crumbs">${crumbs}</crumbs>
<div style="display: grid; justify-items: center;">
<div id="crumbs">
<div class="crumbs">${crumbs}</crumbs>
</div>
</div>
${page}
@ -134,7 +136,8 @@ export class NodeUI extends Component {
async componentDidMount() {//{{{
// When rendered and fetching the node, keys could be needed in order to
// decrypt the content.
await this.retrieveKeys()
/* TODO - implement keys.
await this.retrieveKeys() */
this.props.app.startNode.retrieve(node => {
this.node.value = node
@ -209,15 +212,13 @@ export class NodeUI extends Component {
}//}}}
goToNode(nodeID, dontPush) {//{{{
/* TODO - implement modified values
if (this.props.app.nodeModified.value) {
if (!confirm("Changes not saved. Do you want to discard changes?"))
return
}
*/
if (!dontPush)
history.pushState({ nodeID }, '', `/?node=${nodeID}`)
history.pushState({ nodeID }, '', `/notes2#${nodeID}`)
// New node is fetched in order to retrieve content and files.
// Such data is unnecessary to transfer for tree/navigational purposes.
@ -229,7 +230,7 @@ export class NodeUI extends Component {
// Tree needs to know another node is selected, in order to render any
// previously selected node not selected.
this.props.app.tree.setSelected(node)
//this.props.app.tree.setSelected(node)
// Hide tree toggle, as this would be the next natural action to do manually anyway.
// At least in mobile mode.
@ -335,7 +336,7 @@ class NodeContent extends Component {
`
}
var element
let element
if (node.RenderMarkdown.value)
element = html`<${MarkdownContent} key='markdown-content' content=${content} />`
else
@ -350,6 +351,17 @@ class NodeContent extends Component {
componentDidMount() {//{{{
this.resize()
window.addEventListener('resize', () => this.resize())
const contentResizeObserver = new ResizeObserver(entries => {
for (const idx in entries) {
const w = entries[idx].contentRect.width
document.getElementById('crumbs').style.width = `${w}px`
}
});
const nodeContent = document.getElementById('node-content')
contentResizeObserver.observe(nodeContent);
}//}}}
componentDidUpdate() {//{{{
this.resize()
@ -361,7 +373,7 @@ class NodeContent extends Component {
this.resize()
}//}}}
resize() {//{{{
let textarea = document.getElementById('node-content')
const textarea = document.getElementById('node-content')
if (textarea)
textarea.parentNode.dataset.replicatedValue = textarea.value
}//}}}
@ -467,27 +479,29 @@ export class Node {
// Used to expand the crumbs upon site loading.
}//}}}
retrieve(callback) {//{{{
nodeStore.get(this.ID).then(node => {
this.ParentID = node.ParentID
this.UserID = node.UserID
this.CryptoKeyID = node.CryptoKeyID
this.Name = node.Name
this._content = node.Content
this.Children = node.Children
this.Crumbs = node.Crumbs
this.Files = node.Files
this.Markdown = node.Markdown
//this.RenderMarkdown.value = this.Markdown
this.initChecklist(node.ChecklistGroups)
callback(this)
})
.catch(e => { console.log(e); alert(e) })
/* TODO - implement schedules
this.app.request('/schedule/list', { NodeID: this.ID })
.then(res => {
this.ScheduleEvents.value = res.ScheduleEvents
})
*/
this.app.request('/node/retrieve', { ID: this.ID })
.then(res => {
this.ParentID = res.Node.ParentID
this.UserID = res.Node.UserID
this.CryptoKeyID = res.Node.CryptoKeyID
this.Name = res.Node.Name
this._content = res.Node.Content
this.Children = res.Node.Children
this.Crumbs = res.Node.Crumbs
this.Files = res.Node.Files
this.Markdown = res.Node.Markdown
this.RenderMarkdown.value = this.Markdown
this.initChecklist(res.Node.ChecklistGroups)
callback(this)
})
.catch(this.app.responseError)
}//}}}
delete(callback) {//{{{
this.app.request('/node/delete', {
@ -1044,7 +1058,7 @@ class ScheduleEventListTab extends Component {
if (evt.RemindMinutes > 0)
return html`${evt.RemindMinutes} min`
}
const nodeLink = () => html`<a href="/?node=${evt.Node.ID}">${evt.Node.Name}</a>`
const nodeLink = () => html`<a href="/notes2#${evt.Node.ID}">${evt.Node.Name}</a>`
return html`
@ -1108,12 +1122,12 @@ class ScheduleCalendarTab extends Component {
return {
title: sch.Description,
start: sch.Time,
url: `/?node=${sch.Node.ID}`,
url: `/notes2#${sch.Node.ID}`,
}
})
successCallback(fullcalendarEvents)
})
.catch(err=>failureCallback(err))
.catch(err => failureCallback(err))
}
}