More wiki layout/navigation fixes, and use markdown for the wiki.
git-svn-id: https://www.unprompted.com/svn/projects/tildefriends/trunk@4596 ed5197a5-7fde-0310-b194-c3ffbd925b24
This commit is contained in:
parent
8f3883563f
commit
c6ae9313cc
@ -1,5 +1,5 @@
|
||||
{
|
||||
"type": "tildefriends-app",
|
||||
"emoji": "📦",
|
||||
"previous": "&JGlOM9T/I5L3daDq44CL/khzQy5OhBOFO3SXa5pUEnM=.sha256"
|
||||
"previous": "&tKFnpVGJPHFQHzK07kdrKuTNl8PQ38zIfDzDC7CaNLI=.sha256"
|
||||
}
|
||||
@ -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
1
apps/collections/commonmark.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@ -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>
|
||||
|
||||
@ -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,23 +95,37 @@ 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,
|
||||
tombstone: {
|
||||
date: new Date().valueOf(),
|
||||
reason: 'archived',
|
||||
},
|
||||
name: name,
|
||||
};
|
||||
print(message);
|
||||
await tfrpc.rpc.appendMessage(this.whoami, message);
|
||||
//return this.load();
|
||||
}
|
||||
|
||||
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(),
|
||||
reason: 'archived',
|
||||
},
|
||||
};
|
||||
print(message);
|
||||
await tfrpc.rpc.appendMessage(this.whoami, message);
|
||||
}
|
||||
}
|
||||
|
||||
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`
|
||||
${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>`)}
|
||||
</select>
|
||||
`}
|
||||
<span ?hidden=${!this.is_creating}>
|
||||
<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 style="display: inline-flex; flex-direction: row">
|
||||
${this.collections_loading > 0 ? html`<div>Loading...</div>` : html`
|
||||
<select @change=${this.on_selected}>
|
||||
<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>
|
||||
<button @click=${() => self.is_creating = true} ?hidden=${this.is_creating}>+</button>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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}
|
||||
selectname=${this.hash?.split('/')?.[1]}
|
||||
@selected=${this.on_wiki_doc_changed}></tf-collection>
|
||||
` : undefined}
|
||||
<tf-collection
|
||||
id="docs"
|
||||
whoami=${this.whoami}
|
||||
.ids=${this.owner_ids}
|
||||
type="wiki-doc"
|
||||
parent=${this.wiki?.id}
|
||||
?hidden=${!this.wiki?.id}
|
||||
selectname=${this.hash?.split('/')?.[1]}
|
||||
@selected=${this.on_wiki_doc_changed}></tf-collection>
|
||||
</div>
|
||||
${this.wiki_doc && this.wiki_doc.parent === this.wiki?.id ? html`
|
||||
<tf-wiki-doc
|
||||
|
||||
@ -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>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user