cory/tildefriends
4
5
Fork 1
Code Issues 29 Pull Requests 1 Actions Releases 26 Wiki Activity

More wiki layout/navigation fixes, and use markdown for the wiki.

Browse Source 
git-svn-id: https://www.unprompted.com/svn/projects/tildefriends/trunk@4596 ed5197a5-7fde-0310-b194-c3ffbd925b24
This commit is contained in:
Cory McWilliams 2023-11-02 00:29:07 +00:00
parent 8f3883563f
commit c6ae9313cc
7 changed files with 103 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/collections.json
View File

@ -1,5 +1,5 @@
{ {
"type": "tildefriends-app", "type": "tildefriends-app",
"emoji": "📦", "emoji": "📦",
"previous": "&JGlOM9T/I5L3daDq44CL/khzQy5OhBOFO3SXa5pUEnM=.sha256" "previous": "&tKFnpVGJPHFQHzK07kdrKuTNl8PQ38zIfDzDC7CaNLI=.sha256"
} }

2
apps/collections/app.js
View File

@ -53,7 +53,7 @@ ssb.addEventListener('message', async function(id) {
core.register('message', async function message_handler(message) { core.register('message', async function message_handler(message) {
if (message.event == 'hashChange') { if (message.event == 'hashChange') {
print('hash change'); print('hash change', message.hash);
g_hash = message.hash; g_hash = message.hash;
await tfrpc.rpc.hash_changed(message.hash); await tfrpc.rpc.hash_changed(message.hash);
} }

1
apps/collections/commonmark.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
apps/collections/index.html
View File

@ -4,6 +4,7 @@
</head> </head>
<body style="color: #fff"> <body style="color: #fff">
<tf-collections-app></tf-collections-app> <tf-collections-app></tf-collections-app>
<script src="commonmark.min.js"></script>
<script>window.litDisableBundleWarning = true;</script> <script>window.litDisableBundleWarning = true;</script>
<script src="tf-collections-app.js" type="module"></script> <script src="tf-collections-app.js" type="module"></script>
<script src="tf-collection.js" type="module"></script> <script src="tf-collection.js" type="module"></script>

60
apps/collections/tf-collection.js
View File

@ -13,6 +13,7 @@ class TfCollectionElement extends LitElement {
selectname: {type: String}, selectname: {type: String},
selectid: {type: String}, selectid: {type: String},
is_creating: {type: Boolean}, is_creating: {type: Boolean},
is_renaming: {type: Boolean},
}; };
} }
@ -22,7 +23,6 @@ class TfCollectionElement extends LitElement {
this.loaded = this.load(); this.loaded = this.load();
this.type = 'collection'; this.type = 'collection';
this.collections_loading = 0; this.collections_loading = 0;
console.log('CONSTRUCTOR');
} }
process_message(message) { process_message(message) {
@ -40,7 +40,6 @@ class TfCollectionElement extends LitElement {
async load() { async load() {
try { try {
console.log('loading...');
this.collections_loading++; this.collections_loading++;
if (this.ids) { if (this.ids) {
let visible = this.ids; let visible = this.ids;
@ -96,10 +95,23 @@ class TfCollectionElement extends LitElement {
} }
} }
async on_tombstone(id) { async on_rename(id) {
let name = this.shadowRoot.getElementById('rename_name').value;
let message = { let message = {
type: this.type, type: this.type,
key: id, key: this.selectid,
parent: this.parent,
name: name,
};
print(message);
await tfrpc.rpc.appendMessage(this.whoami, message);
}
async on_tombstone(event) {
if (confirm(`Are you sure you want to delete this ${this.type}?`)) {
let message = {
type: this.type,
key: this.selectid,
parent: this.parent, parent: this.parent,
tombstone: { tombstone: {
date: new Date().valueOf(), date: new Date().valueOf(),
@ -108,11 +120,12 @@ class TfCollectionElement extends LitElement {
}; };
print(message); print(message);
await tfrpc.rpc.appendMessage(this.whoami, message); await tfrpc.rpc.appendMessage(this.whoami, message);
//return this.load(); }
} }
set_selected(id, value, by_user) { set_selected(id, value, by_user) {
this.selectedid = id; this.selectid = id;
console.log('SEND', id, value?.name);
this.dispatchEvent(new CustomEvent('selected', { this.dispatchEvent(new CustomEvent('selected', {
bubbles: true, bubbles: true,
detail: { detail: {
@ -124,10 +137,13 @@ class TfCollectionElement extends LitElement {
} }
set_selected_by_name(name) { set_selected_by_name(name) {
console.log('set selected by name', name);
if (this.collections) { if (this.collections) {
for (let collection of this.collections) { for (let collection of this.collections) {
if (collection.name === name) { if (collection.name === name) {
this.set_selected(collection.id, collection); this.set_selected(collection.id, collection);
this._select_by_name = undefined;
return;
} }
} }
} }
@ -139,7 +155,6 @@ class TfCollectionElement extends LitElement {
<div> <div>
<button @click=${() => this.set_selected(collection.id, collection, true)}>${collection.name}</button> <button @click=${() => this.set_selected(collection.id, collection, true)}>${collection.name}</button>
<span>${collection.id}</span> <span>${collection.id}</span>
<button @click=${() => this.on_tombstone(collection.id)}>🪦</button>
</div> </div>
<div> <div>
${collection.editors.map(id => html`<span>${id}</span>`)} ${collection.editors.map(id => html`<span>${id}</span>`)}
@ -165,18 +180,47 @@ class TfCollectionElement extends LitElement {
this.loaded_for = state; this.loaded_for = state;
this.loaded = this.load(); this.loaded = this.load();
} }
if (this.collections) {
if (this.selectname) {
for (let collection of this.collections) {
if (collection.name === this.selectname) {
this.set_selected(collection.id, collection);
break;
}
}
} else {
for (let collection of this.collections) {
if (collection.id === this.selectid) {
this.set_selected(collection.id, collection);
break;
}
}
}
}
return html` return html`
<span style="display: inline-flex; flex-direction: row">
${this.collections_loading > 0 ? html`<div>Loading...</div>` : html` ${this.collections_loading > 0 ? html`<div>Loading...</div>` : html`
<select @change=${this.on_selected}> <select @change=${this.on_selected}>
${this.collections?.map(x => html`<option value=${x.id} ?selected=${this.selectedid === x.id}>${x.name}</option>`)} <option>(select)</option>
${this.collections?.map(x => html`<option value=${x.id} ?selected=${this.selectid === x.id}>${x.name}</option>`)}
</select> </select>
`} `}
<span ?hidden=${!this.is_creating}> <span ?hidden=${!this.is_creating}>
<label for="create_name">New ${this.type} name:</label>
<input type="text" id="create_name"></input> <input type="text" id="create_name"></input>
<button @click=${this.on_create}>Create ${this.type}</button> <button @click=${this.on_create}>Create ${this.type}</button>
<button @click=${() => self.is_creating = false}>x</button> <button @click=${() => self.is_creating = false}>x</button>
</span> </span>
<span ?hidden=${!this.is_renaming}>
<label for="rename_name">Rename to:</label>
<input type="text" id="rename_name"></input>
<button @click=${this.on_rename}>Rename ${this.type}</button>
<button @click=${() => self.is_renaming = false}>x</button>
</span>
<button @click=${() => self.is_renaming = true} ?hidden=${this.is_renaming}>✏️</button>
<button @click=${self.on_tombstone}>🪦</button>
<button @click=${() => self.is_creating = true} ?hidden=${this.is_creating}>+</button> <button @click=${() => self.is_creating = true} ?hidden=${this.is_creating}>+</button>
</span>
`; `;
} }
} }

25
apps/collections/tf-collections-app.js
View File

@ -45,21 +45,6 @@ class TfCollectionsAppElement extends LitElement {
async notify_hash_changed(hash) { async notify_hash_changed(hash) {
this.hash = hash; this.hash = hash;
console.log('notify_hash_changed', hash);
let parts = (hash.startsWith('#') ? hash.substring(1) : hash).split('/');
console.log('parts', parts);
let wiki = this.shadowRoot.querySelector('tf-collection[type="wiki"]');
console.log('selecting', wiki, parts[0]);
wiki.set_selected_by_name(parts[0]);
/*console.log('SET wiki', this.wiki);
if (parts.length > 1) {
let wiki_doc = this.shadowRoot.querySelector('tf-collection[type="wiki-doc"]');
if (wiki_doc) {
this.wiki_doc = wiki_doc.get_by_name(parts[1]);
}
} else {
this.wiki_doc = undefined;
}*/
} }
async on_whoami_changed(event) { async on_whoami_changed(event) {
@ -73,17 +58,14 @@ class TfCollectionsAppElement extends LitElement {
} }
async on_wiki_changed(event) { async on_wiki_changed(event) {
console.log('wiki changed', event.detail.value);
this.wiki = event.detail.value; this.wiki = event.detail.value;
console.log(this.wiki);
if (event.detail.by_user) { if (event.detail.by_user) {
this.update_hash(); this.update_hash();
} }
} }
async on_wiki_doc_changed(event) { async on_wiki_doc_changed(event) {
console.log(event); this.wiki_doc = Object.assign({}, event.detail.value);
this.wiki_doc = event.detail.value;
if (event.detail.by_user) { if (event.detail.by_user) {
this.update_hash(); this.update_hash();
} }
@ -116,16 +98,15 @@ class TfCollectionsAppElement extends LitElement {
type="wiki" type="wiki"
selectname=${this.hash?.substring(1)?.split('/')?.[0]} selectname=${this.hash?.substring(1)?.split('/')?.[0]}
@selected=${this.on_wiki_changed}></tf-collection> @selected=${this.on_wiki_changed}></tf-collection>
${this.wiki?.id ? html`
<tf-collection <tf-collection
id="docs" id="docs"
whoami=${this.whoami} whoami=${this.whoami}
.ids=${this.owner_ids} .ids=${this.owner_ids}
type="wiki-doc" type="wiki-doc"
parent=${this.wiki.id} parent=${this.wiki?.id}
?hidden=${!this.wiki?.id}
selectname=${this.hash?.split('/')?.[1]} selectname=${this.hash?.split('/')?.[1]}
@selected=${this.on_wiki_doc_changed}></tf-collection> @selected=${this.on_wiki_doc_changed}></tf-collection>
` : undefined}
</div> </div>
${this.wiki_doc && this.wiki_doc.parent === this.wiki?.id ? html` ${this.wiki_doc && this.wiki_doc.parent === this.wiki?.id ? html`
<tf-wiki-doc <tf-wiki-doc

28
apps/collections/tf-wiki-doc.js
View File

@ -1,4 +1,4 @@
import {LitElement, html} from './lit-all.min.js'; import {LitElement, html, unsafeHTML} from './lit-all.min.js';
import * as tfrpc from '/static/tfrpc.js'; import * as tfrpc from '/static/tfrpc.js';
class TfWikiDocElement extends LitElement { class TfWikiDocElement extends LitElement {
@ -9,6 +9,7 @@ class TfWikiDocElement extends LitElement {
blob: {type: String}, blob: {type: String},
blob_original: {type: String}, blob_original: {type: String},
blob_for_value: {type: String}, blob_for_value: {type: String},
is_editing: {type: Boolean},
}; };
} }
@ -16,6 +17,13 @@ class TfWikiDocElement extends LitElement {
super(); super();
} }
markdown(md) {
var reader = new commonmark.Parser({safe: true});
var writer = new commonmark.HtmlRenderer();
var parsed = reader.parse(md || '');
return writer.render(parsed);
}
async load_blob() { async load_blob() {
this.blob = await tfrpc.rpc.get_blob(this.value?.blob); this.blob = await tfrpc.rpc.get_blob(this.value?.blob);
this.blob_original = this.blob; this.blob_original = this.blob;
@ -25,7 +33,12 @@ class TfWikiDocElement extends LitElement {
this.blob = event.srcElement.value; this.blob = event.srcElement.value;
} }
async publish() { on_discard(event) {
this.blob = this.blob_original;
this.is_editing = false;
}
async on_publish() {
let id = await tfrpc.rpc.store_blob(this.blob); let id = await tfrpc.rpc.store_blob(this.blob);
this.dispatchEvent(new CustomEvent('publish', { this.dispatchEvent(new CustomEvent('publish', {
bubbles: true, bubbles: true,
@ -33,6 +46,7 @@ class TfWikiDocElement extends LitElement {
id: id, id: id,
}, },
})); }));
this.is_editing = false;
} }
render() { render() {
@ -43,14 +57,20 @@ class TfWikiDocElement extends LitElement {
this.blob_original = undefined; this.blob_original = undefined;
this.load_blob(); this.load_blob();
} }
let self = this;
return html` return html`
<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_publish}>Publish</button>
<button ?disabled=${!this.is_editing} @click=${this.on_discard}>Discard</button>
</div>
<div style="display: flex; flex-direction: row"> <div style="display: flex; flex-direction: row">
<textarea <textarea
?hidden=${!this.is_editing}
style="flex: 1 1; min-height: 10em" style="flex: 1 1; min-height: 10em"
@input=${this.on_edit} .value=${this.blob ?? ''}></textarea> @input=${this.on_edit} .value=${this.blob ?? ''}></textarea>
<div style="flex: 1 1">${this.blob}</div> <div style="flex: 1 1">${unsafeHTML(this.markdown(this.blob))}</div>
</div> </div>
<button ?disabled=${this.blob == this.blob_original} @click=${this.publish}>Publish</button>
`; `;
} }
} }