tasiaiso/tildefriends
1
0
Fork 0
forked from cory/tildefriends
Code Issues Pull Requests Releases Wiki Activity

Merge branch 'wiki-improvements' of https://dev.tildefriends.net/tasiaiso/tildefriends into tasiaiso-wiki-improvements

Browse Source
This commit is contained in:
Cory McWilliams
2024-02-25 15:37:13 -05:00
parent a43c1d3d1e 2d3e108fd9
commit 6aa2bce2be
6 changed files with 185 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
apps/wiki/tf-wiki-doc.js
View File

@ -84,7 +84,11 @@ class TfWikiDocElement extends LitElement {
async load_blob() {
let blob = await tfrpc.rpc.get_blob(this.value?.blob);
if (blob.endsWith('.box')) {
if (!blob) {
console.warn(
"no blob found, we're going to assume the document is empty (load_blob())"
);
} else if (blob.endsWith('.box')) {
let d = await tfrpc.rpc.try_decrypt(this.whoami, blob);
if (d) {
blob = d;
@ -253,85 +257,43 @@ class TfWikiDocElement extends LitElement {
let self = this;
let thumbnail_ref = this.thumbnail(this.blob);
return html`
<link rel="stylesheet" href="tildefriends.css"/>
<style>
a:link {
color: #268bd2;
}
a:visited {
color: #6c71c4;
}
a:hover {
color: #859900;
}
a:active {
color: #2aa198;
}
a:link { color: #268bd2 }
a:visited { color: #6c71c4 }
a:hover { color: #859900 }
a:active { color: #2aa198 }
#editor-text-area {
background-color: #00000040;
color: white;
style="flex: 1 1;
min-height: 10em;
font-size: larger;
${this.value?.private ? 'border: 4px solid #800' : ''}
</style>
<div style="display: inline-flex; flex-direction: row">
<button
?disabled=${!this.whoami || this.is_editing}
@click=${() => (self.is_editing = true)}
>
Edit
</button>
<button
?disabled=${this.blob == this.blob_original}
@click=${this.on_save_draft}
>
Save Draft
</button>
<button
?disabled=${this.blob == this.blob_original && !this.value?.draft}
@click=${this.on_publish}
>
Publish
</button>
<button ?disabled=${!this.is_editing} @click=${this.on_discard}>
Discard
</button>
<button
?disabled=${!this.is_editing}
@click=${() =>
(self.value = Object.assign({}, self.value, {
private: !self.value.private,
}))}
>
${this.value?.private ? 'Make Public' : 'Make Private'}
</button>
<button ?disabled=${!this.is_editing} @click=${this.on_blog_publish}>
Publish Blog
</button>
<div class="inline-flex-row">
<button ?disabled=${!this.whoami || this.is_editing} @click=${() => (self.is_editing = true)}>Edit</button>
<button ?disabled=${this.blob == this.blob_original} @click=${this.on_save_draft}>Save Draft</button>
<button ?disabled=${this.blob == this.blob_original && !this.value?.draft} @click=${this.on_publish}>Publish</button>
<button ?disabled=${!this.is_editing} @click=${this.on_discard}>Discard</button>
<button ?disabled=${!this.is_editing} @click=${() => (self.value = Object.assign({}, self.value, {private: !self.value.private}))}>${this.value?.private ? 'Make Public' : 'Make Private'}</button>
<button ?disabled=${!this.is_editing} @click=${this.on_blog_publish}>Publish Blog</button>
</div>
<div ?hidden=${!this.value?.private} style="color: #800">
🔒 document is private
</div>
<div
style="display: flex; flex-direction: row; ${this.value?.private
? 'border-top: 4px solid #800'
: ''}"
>
<div ?hidden=${!this.value?.private} style="color: #800">🔒 document is private</div>
<div class="flex-column" ${this.value?.private ? 'border-top: 4px solid #800' : ''}">
<textarea
rows="25"
?hidden=${!this.is_editing}
style="flex: 1 1; min-height: 10em; ${this.value?.private
? 'border: 4px solid #800'
: ''}"
id="editor-text-area"
@input=${this.on_edit}
@paste=${this.paste}
.value=${this.blob ?? ''}
></textarea>
<div style="flex: 1 1">
<div
?hidden=${!this.is_editing}
style="border: 1px solid #fff; border-radius: 1em; padding: 0.5em"
>
<img
?hidden=${!thumbnail_ref}
style="max-width: 128px; max-height: 128px; float: right"
src="/${thumbnail_ref}/view"
/>
<h1 ?hidden=${!this.title(this.blob)}>
${unsafeHTML(this.markdown(this.title(this.blob)))}
</h1>
.value=${this.blob ?? ''}></textarea>
<div style="flex: 1 1; margin-top: 16px">
<div ?hidden=${!this.is_editing} class="box">
Summary
<img ?hidden=${!thumbnail_ref} style="max-width: 128px; max-height: 128px; float: right" src="/${thumbnail_ref}/view">
<h1 ?hidden=${!this.title(this.blob)}>${unsafeHTML(this.markdown(this.title(this.blob)))}</h1>
${unsafeHTML(this.markdown(this.summary(this.blob)))}
</div>
${unsafeHTML(this.markdown(this.blob))}