cory/tildefriends
4
5
Fork 1
Code Issues 33 Pull Requests 1 Actions Releases 27 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",
"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) {
if (message.event == 'hashChange') {
print('hash change');
print('hash change', message.hash);
g_hash = 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>
<body style="color: #fff">
<tf-collections-app></tf-collections-app>
<script src="commonmark.min.js"></script>
<script>window.litDisableBundleWarning = true;</script>
<script src="tf-collections-app.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},
selectid: {type: String},
is_creating: {type: Boolean},
is_renaming: {type: Boolean},
};
}
@ -22,7 +23,6 @@ class TfCollectionElement extends LitElement {
this.loaded = this.load();
this.type = 'collection';
this.collections_loading = 0;
console.log('CONSTRUCTOR');
}
process_message(message) {
@ -40,7 +40,6 @@ class TfCollectionElement extends LitElement {
async load() {
try {
console.log('loading...');
this.collections_loading++;
if (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 = {
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,
tombstone: {
date: new Date().valueOf(),
@ -108,11 +120,12 @@ class TfCollectionElement extends LitElement {
};
print(message);
await tfrpc.rpc.appendMessage(this.whoami, message);
//return this.load();
}
}
set_selected(id, value, by_user) {
this.selectedid = id;
this.selectid = id;
console.log('SEND', id, value?.name);
this.dispatchEvent(new CustomEvent('selected', {
bubbles: true,
detail: {
@ -124,10 +137,13 @@ class TfCollectionElement extends LitElement {
}
set_selected_by_name(name) {
console.log('set selected by name', name);
if (this.collections) {
for (let collection of this.collections) {
if (collection.name === name) {
this.set_selected(collection.id, collection);
this._select_by_name = undefined;
return;
}
}
}
@ -139,7 +155,6 @@ class TfCollectionElement extends LitElement {
<div>
<button @click=${() => this.set_selected(collection.id, collection, true)}>${collection.name}</button>
<span>${collection.id}</span>
<button @click=${() => this.on_tombstone(collection.id)}>🪦</button>
</div>
<div>
${collection.editors.map(id => html`<span>${id}</span>`)}
@ -165,18 +180,47 @@ class TfCollectionElement extends LitElement {
this.loaded_for = state;
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`
<span style="display: inline-flex; flex-direction: row">
${this.collections_loading > 0 ? html`<div>Loading...</div>` : html`
<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>
`}
<span ?hidden=${!this.is_creating}>
<label for="create_name">New ${this.type} name:</label>
<input type="text" id="create_name"></input>
<button @click=${this.on_create}>Create ${this.type}</button>
<button @click=${() => self.is_creating = false}>x</button>
</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>
</span>
`;
}
}

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

@ -45,21 +45,6 @@ class TfCollectionsAppElement extends LitElement {
async notify_hash_changed(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) {
@ -73,17 +58,14 @@ class TfCollectionsAppElement extends LitElement {
}
async on_wiki_changed(event) {
console.log('wiki changed', event.detail.value);
this.wiki = event.detail.value;
console.log(this.wiki);
if (event.detail.by_user) {
this.update_hash();
}
}
async on_wiki_doc_changed(event) {
console.log(event);
this.wiki_doc = event.detail.value;
this.wiki_doc = Object.assign({}, event.detail.value);
if (event.detail.by_user) {
this.update_hash();
}
@ -116,16 +98,15 @@ class TfCollectionsAppElement extends LitElement {
type="wiki"
selectname=${this.hash?.substring(1)?.split('/')?.[0]}
@selected=${this.on_wiki_changed}></tf-collection>
${this.wiki?.id ? html`
<tf-collection
id="docs"
whoami=${this.whoami}
.ids=${this.owner_ids}
type="wiki-doc"
parent=${this.wiki.id}
parent=${this.wiki?.id}
?hidden=${!this.wiki?.id}
selectname=${this.hash?.split('/')?.[1]}
@selected=${this.on_wiki_doc_changed}></tf-collection>
` : undefined}
</div>
${this.wiki_doc && this.wiki_doc.parent === this.wiki?.id ? html`
<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';
class TfWikiDocElement extends LitElement {
@ -9,6 +9,7 @@ class TfWikiDocElement extends LitElement {
blob: {type: String},
blob_original: {type: String},
blob_for_value: {type: String},
is_editing: {type: Boolean},
};
}
@ -16,6 +17,13 @@ class TfWikiDocElement extends LitElement {
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() {
this.blob = await tfrpc.rpc.get_blob(this.value?.blob);
this.blob_original = this.blob;
@ -25,7 +33,12 @@ class TfWikiDocElement extends LitElement {
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);
this.dispatchEvent(new CustomEvent('publish', {
bubbles: true,
@ -33,6 +46,7 @@ class TfWikiDocElement extends LitElement {
id: id,
},
}));
this.is_editing = false;
}
render() {
@ -43,14 +57,20 @@ class TfWikiDocElement extends LitElement {
this.blob_original = undefined;
this.load_blob();
}
let self = this;
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">
<textarea
?hidden=${!this.is_editing}
style="flex: 1 1; min-height: 10em"
@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>
<button ?disabled=${this.blob == this.blob_original} @click=${this.publish}>Publish</button>
`;
}
}