forked from cory/tildefriends
collections -> wiki
git-svn-id: https://www.unprompted.com/svn/projects/tildefriends/trunk@4599 ed5197a5-7fde-0310-b194-c3ffbd925b24
This commit is contained in:
99
apps/wiki/app.js
Normal file
99
apps/wiki/app.js
Normal file
@ -0,0 +1,99 @@
|
||||
import * as tfrpc from '/tfrpc.js';
|
||||
|
||||
let g_hash;
|
||||
|
||||
tfrpc.register(async function getOwnerIdentities() {
|
||||
return ssb.getOwnerIdentities();
|
||||
});
|
||||
|
||||
tfrpc.register(async function getIdentities() {
|
||||
return ssb.getIdentities();
|
||||
});
|
||||
|
||||
tfrpc.register(async function query(sql, args) {
|
||||
let result = [];
|
||||
await ssb.sqlAsync(sql, args, function callback(row) {
|
||||
result.push(row);
|
||||
});
|
||||
return result;
|
||||
});
|
||||
|
||||
tfrpc.register(async function localStorageGet(key) {
|
||||
return app.localStorageGet(key);
|
||||
});
|
||||
|
||||
tfrpc.register(async function localStorageSet(key, value) {
|
||||
return app.localStorageSet(key, value);
|
||||
});
|
||||
|
||||
tfrpc.register(async function following(ids, depth) {
|
||||
return ssb.following(ids, depth);
|
||||
});
|
||||
|
||||
tfrpc.register(async function appendMessage(id, message) {
|
||||
return ssb.appendMessageWithIdentity(id, message);
|
||||
});
|
||||
|
||||
tfrpc.register(async function store_blob(blob) {
|
||||
if (Array.isArray(blob)) {
|
||||
blob = Uint8Array.from(blob);
|
||||
}
|
||||
return await ssb.blobStore(blob);
|
||||
});
|
||||
|
||||
tfrpc.register(async function get_blob(id) {
|
||||
return utf8Decode(await ssb.blobGet(id));
|
||||
});
|
||||
|
||||
ssb.addEventListener('message', async function(id) {
|
||||
let message;
|
||||
await ssb.sqlAsync('SELECT * FROM messages WHERE id = ?', [id], function(row) { message = row; });
|
||||
await tfrpc.rpc.notify_new_message(message);
|
||||
});
|
||||
|
||||
core.register('message', async function message_handler(message) {
|
||||
if (message.event == 'hashChange') {
|
||||
print('hash change', message.hash);
|
||||
g_hash = message.hash;
|
||||
await tfrpc.rpc.hash_changed(message.hash);
|
||||
}
|
||||
});
|
||||
|
||||
tfrpc.register(function set_hash(hash) {
|
||||
if (g_hash != hash) {
|
||||
return app.setHash(hash);
|
||||
}
|
||||
});
|
||||
|
||||
tfrpc.register(function get_hash(id, message) {
|
||||
return g_hash;
|
||||
});
|
||||
|
||||
tfrpc.register(async function try_decrypt(id, content) {
|
||||
return await ssb.privateMessageDecrypt(id, content);
|
||||
});
|
||||
tfrpc.register(async function encrypt(id, recipients, content) {
|
||||
return await ssb.privateMessageEncrypt(id, recipients, content);
|
||||
});
|
||||
|
||||
async function get_collections(kind) {
|
||||
let me = await ssb.getIdentities();
|
||||
let them = await ssb.following(me, 2);
|
||||
let collections = {};
|
||||
print('querying');
|
||||
for (let row of await query(`
|
||||
SELECT author, content, timestamp
|
||||
FROM messages JOIN json_each(?) AS id ON messages.author = id.value
|
||||
WHERE json_extract(content, '$.type') = 'collection' AND json_extract(content, '$.kind') = ?
|
||||
`, [JSON.stringify(them), kind])) {
|
||||
print(row);
|
||||
}
|
||||
print('done');
|
||||
return collections;
|
||||
}
|
||||
|
||||
async function main() {
|
||||
await app.setDocument(utf8Decode(await getFile('index.html')));
|
||||
}
|
||||
|
||||
main();
|
||||
1
apps/wiki/commonmark.min.js
vendored
Normal file
1
apps/wiki/commonmark.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
14
apps/wiki/index.html
Normal file
14
apps/wiki/index.html
Normal file
@ -0,0 +1,14 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
</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>
|
||||
<script src="tf-id-picker.js" type="module"></script>
|
||||
<script src="tf-wiki-doc.js" type="module"></script>
|
||||
</body>
|
||||
</html>
|
||||
120
apps/wiki/lit-all.min.js
vendored
Normal file
120
apps/wiki/lit-all.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
1
apps/wiki/lit-all.min.js.map
Normal file
1
apps/wiki/lit-all.min.js.map
Normal file
File diff suppressed because one or more lines are too long
246
apps/wiki/tf-collection.js
Normal file
246
apps/wiki/tf-collection.js
Normal file
@ -0,0 +1,246 @@
|
||||
import {LitElement, html} from './lit-all.min.js';
|
||||
import * as tfrpc from '/static/tfrpc.js';
|
||||
|
||||
class TfCollectionElement extends LitElement {
|
||||
static get properties() {
|
||||
return {
|
||||
whoami: {type: String},
|
||||
ids: {type: Array},
|
||||
collections: {type: Array},
|
||||
collections_loading: {type: Number},
|
||||
type: {type: String},
|
||||
parent: {type: String},
|
||||
selectname: {type: String},
|
||||
selectid: {type: String},
|
||||
is_creating: {type: Boolean},
|
||||
is_renaming: {type: Boolean},
|
||||
};
|
||||
}
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.ids = [];
|
||||
this.loaded = this.load();
|
||||
this.type = 'collection';
|
||||
this.collections_loading = 0;
|
||||
}
|
||||
|
||||
async process_message(message) {
|
||||
let content = JSON.parse(message.content);
|
||||
if (typeof content == 'string') {
|
||||
let x = await tfrpc.rpc.try_decrypt(this.whoami, content);
|
||||
if (x) {
|
||||
content = JSON.parse(x);
|
||||
content.draft = true;
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
if (content.type !== this.type ||
|
||||
(this.parent && content.parent !== this.parent)) {
|
||||
return;
|
||||
}
|
||||
} else {
|
||||
content.draft = false;
|
||||
}
|
||||
if (content?.key) {
|
||||
if (content?.tombstone) {
|
||||
delete this.by_id[content.key];
|
||||
} else if (this.by_id[content.key]) {
|
||||
this.by_id[content.key] = Object.assign(this.by_id[content.key], content);
|
||||
}
|
||||
} else {
|
||||
this.by_id[message.id] = Object.assign(content, {id: message.id});
|
||||
}
|
||||
}
|
||||
|
||||
async load() {
|
||||
try {
|
||||
this.collections_loading++;
|
||||
if (this.ids) {
|
||||
let visible = this.ids;
|
||||
this.visible = visible;
|
||||
if (this.type) {
|
||||
let collections = await tfrpc.rpc.query(`
|
||||
SELECT messages.id, author, content, timestamp
|
||||
FROM messages JOIN json_each(?1) AS id ON messages.author = id.value
|
||||
WHERE
|
||||
json_extract(content, '$.type') = ?2 AND
|
||||
(?3 IS NULL OR json_extract(content, '$.parent') = ?3) OR
|
||||
content LIKE '"%'
|
||||
ORDER BY timestamp
|
||||
`, [JSON.stringify(visible), this.type, this.parent]);
|
||||
this.by_id = {};
|
||||
for (let collection of collections) {
|
||||
await this.process_message(collection);
|
||||
}
|
||||
this.collections = Object.values(this.by_id);
|
||||
}
|
||||
}
|
||||
} finally {
|
||||
this.collections_loading--;
|
||||
}
|
||||
if (this.selectname) {
|
||||
this.set_selected_by_name(this.selectname);
|
||||
}
|
||||
}
|
||||
|
||||
async create(name, editors) {
|
||||
let message = {
|
||||
type: this.type,
|
||||
name: name,
|
||||
parent: this.parent,
|
||||
editors: editors,
|
||||
};
|
||||
print('will append', message);
|
||||
await tfrpc.rpc.appendMessage(this.whoami, message);
|
||||
}
|
||||
|
||||
notify_new_message(message) {
|
||||
if (this.visible &&
|
||||
this.visible.indexOf(message.author) != -1 &&
|
||||
JSON.parse(message.content).type == this.type) {
|
||||
let self = this;
|
||||
this.process_message(message).then(function() {
|
||||
self.collections = [...Object.values(self.by_id)];
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
async on_create(event) {
|
||||
let name = this.shadowRoot.getElementById('create_name').value;
|
||||
if (name) {
|
||||
await this.create(name, [this.whoami]);
|
||||
}
|
||||
}
|
||||
|
||||
async on_rename(id) {
|
||||
let name = this.shadowRoot.getElementById('rename_name').value;
|
||||
let message = {
|
||||
type: this.type,
|
||||
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(),
|
||||
reason: 'archived',
|
||||
},
|
||||
};
|
||||
print(message);
|
||||
await tfrpc.rpc.appendMessage(this.whoami, message);
|
||||
}
|
||||
}
|
||||
|
||||
set_selected(id, value, by_user) {
|
||||
this.selectid = id;
|
||||
console.log('SEND', id, value?.name);
|
||||
this.dispatchEvent(new CustomEvent('selected', {
|
||||
bubbles: true,
|
||||
detail: {
|
||||
id: id,
|
||||
value: value,
|
||||
by_user: by_user,
|
||||
},
|
||||
}));
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
this._select_by_name = name;
|
||||
}
|
||||
|
||||
render_collection(collection) {
|
||||
return html`
|
||||
<div>
|
||||
<button @click=${() => this.set_selected(collection.id, collection, true)}>${collection.name}</button>
|
||||
<span>${collection.id}</span>
|
||||
</div>
|
||||
<div>
|
||||
${collection.editors.map(id => html`<span>${id}</span>`)}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
on_selected(event) {
|
||||
if (this.collections) {
|
||||
for (let collection of this.collections) {
|
||||
if (collection.id === event.srcElement.value) {
|
||||
this.set_selected(collection.id, collection, true);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
let self = this;
|
||||
let state = JSON.stringify([this.whoami, this.ids, this.parent]);
|
||||
if (state !== this.loaded_for) {
|
||||
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}>
|
||||
<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>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('tf-collection', TfCollectionElement);
|
||||
126
apps/wiki/tf-collections-app.js
Normal file
126
apps/wiki/tf-collections-app.js
Normal file
@ -0,0 +1,126 @@
|
||||
import {LitElement, html} from './lit-all.min.js';
|
||||
import * as tfrpc from '/static/tfrpc.js';
|
||||
|
||||
class TfCollectionsAppElement extends LitElement {
|
||||
static get properties() {
|
||||
return {
|
||||
ids: {type: Array},
|
||||
owner_ids: {type: Array},
|
||||
whoami: {type: String},
|
||||
wiki: {type: Object},
|
||||
wiki_doc: {type: Object},
|
||||
hash: {type: String},
|
||||
};
|
||||
}
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.ids = [];
|
||||
this.owner_ids = [];
|
||||
this.load();
|
||||
let self = this;
|
||||
tfrpc.register(function notify_new_message(message) {
|
||||
self.notify_new_message(message);
|
||||
});
|
||||
tfrpc.register(function hash_changed(hash) {
|
||||
self.hash = hash;
|
||||
});
|
||||
tfrpc.rpc.get_hash().then(hash => self.hash = hash);
|
||||
}
|
||||
|
||||
async load() {
|
||||
this.ids = await tfrpc.rpc.getIdentities();
|
||||
this.owner_ids = await tfrpc.rpc.getOwnerIdentities();
|
||||
this.whoami = await tfrpc.rpc.localStorageGet('collections_whoami');
|
||||
}
|
||||
|
||||
notify_new_message(message) {
|
||||
console.log('notify_new_message', message);
|
||||
console.log('this', this);
|
||||
console.log('qs', this.shadowRoot.querySelectorAll('tf-collection'));
|
||||
for (let element of this.shadowRoot.querySelectorAll('tf-collection')) {
|
||||
element.notify_new_message(message);
|
||||
}
|
||||
}
|
||||
|
||||
async notify_hash_changed(hash) {
|
||||
this.hash = hash;
|
||||
}
|
||||
|
||||
async on_whoami_changed(event) {
|
||||
let new_id = event.srcElement.selected;
|
||||
await tfrpc.rpc.localStorageSet('collections_whoami', new_id);
|
||||
this.whoami = new_id;
|
||||
}
|
||||
|
||||
update_hash() {
|
||||
tfrpc.rpc.set_hash(this.wiki_doc ? `${this.wiki.name}/${this.wiki_doc.name}` : `${this.wiki.name}`);
|
||||
}
|
||||
|
||||
async on_wiki_changed(event) {
|
||||
this.wiki = event.detail.value;
|
||||
if (event.detail.by_user) {
|
||||
this.update_hash();
|
||||
}
|
||||
}
|
||||
|
||||
async on_wiki_doc_changed(event) {
|
||||
this.wiki_doc = Object.assign({}, event.detail.value);
|
||||
if (event.detail.by_user) {
|
||||
this.update_hash();
|
||||
}
|
||||
}
|
||||
|
||||
async on_wiki_publish(event) {
|
||||
let blob_id = event.detail.id;
|
||||
let message = {
|
||||
type: 'wiki-doc',
|
||||
key: this.wiki_doc.id,
|
||||
parent: this.wiki_doc.parent,
|
||||
blob: blob_id,
|
||||
};
|
||||
if (event.detail.draft) {
|
||||
message.recps = this.wiki_doc.editors;
|
||||
print(message);
|
||||
message = await tfrpc.rpc.encrypt(this.whoami, this.wiki_doc.editors, JSON.stringify(message));
|
||||
}
|
||||
print(message);
|
||||
await tfrpc.rpc.appendMessage(this.whoami, message);
|
||||
return this.shadowRoot.getElementById('docs').load();
|
||||
}
|
||||
|
||||
render() {
|
||||
let self = this;
|
||||
console.log('render', this.wiki?.name, this.wiki_doc?.name, this.hash);
|
||||
return html`
|
||||
<div>
|
||||
<tf-id-picker .ids=${this.ids} selected=${this.whoami} @change=${this.on_whoami_changed}></tf-id-picker>
|
||||
</div>
|
||||
<div>
|
||||
<tf-collection
|
||||
whoami=${this.whoami}
|
||||
.ids=${this.owner_ids}
|
||||
type="wiki"
|
||||
selectname=${this.hash?.substring(1)?.split('/')?.[0]}
|
||||
@selected=${this.on_wiki_changed}></tf-collection>
|
||||
<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
|
||||
whoami=${this.whoami}
|
||||
.value=${this.wiki_doc}
|
||||
@publish=${this.on_wiki_publish}></tf-wiki-doc>
|
||||
` : undefined}
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('tf-collections-app', TfCollectionsAppElement);
|
||||
36
apps/wiki/tf-id-picker.js
Normal file
36
apps/wiki/tf-id-picker.js
Normal file
@ -0,0 +1,36 @@
|
||||
import {LitElement, html} from './lit-all.min.js';
|
||||
import * as tfrpc from '/static/tfrpc.js';
|
||||
|
||||
/*
|
||||
** Provide a list of IDs, and this lets the user pick one.
|
||||
*/
|
||||
class TfIdentityPickerElement extends LitElement {
|
||||
static get properties() {
|
||||
return {
|
||||
ids: {type: Array},
|
||||
selected: {type: String},
|
||||
};
|
||||
}
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.ids = [];
|
||||
}
|
||||
|
||||
changed(event) {
|
||||
this.selected = event.srcElement.value;
|
||||
this.dispatchEvent(new Event('change', {
|
||||
srcElement: this,
|
||||
}));
|
||||
}
|
||||
|
||||
render() {
|
||||
return html`
|
||||
<select @change=${this.changed} style="max-width: 100%">
|
||||
${(this.ids ?? []).map(id => html`<option ?selected=${id == this.selected} value=${id}>${id}</option>`)}
|
||||
</select>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('tf-id-picker', TfIdentityPickerElement);
|
||||
91
apps/wiki/tf-wiki-doc.js
Normal file
91
apps/wiki/tf-wiki-doc.js
Normal file
@ -0,0 +1,91 @@
|
||||
import {LitElement, html, unsafeHTML} from './lit-all.min.js';
|
||||
import * as tfrpc from '/static/tfrpc.js';
|
||||
|
||||
class TfWikiDocElement extends LitElement {
|
||||
static get properties() {
|
||||
return {
|
||||
whoami: {type: String},
|
||||
value: {type: Object},
|
||||
blob: {type: String},
|
||||
blob_original: {type: String},
|
||||
blob_for_value: {type: String},
|
||||
is_editing: {type: Boolean},
|
||||
};
|
||||
}
|
||||
|
||||
constructor() {
|
||||
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;
|
||||
}
|
||||
|
||||
on_edit(event) {
|
||||
this.blob = event.srcElement.value;
|
||||
}
|
||||
|
||||
on_discard(event) {
|
||||
this.blob = this.blob_original;
|
||||
this.is_editing = false;
|
||||
}
|
||||
|
||||
async on_save_draft() {
|
||||
let id = await tfrpc.rpc.store_blob(this.blob);
|
||||
this.dispatchEvent(new CustomEvent('publish', {
|
||||
bubbles: true,
|
||||
detail: {
|
||||
id: id,
|
||||
draft: true,
|
||||
},
|
||||
}));
|
||||
this.is_editing = false;
|
||||
}
|
||||
|
||||
async on_publish() {
|
||||
let id = await tfrpc.rpc.store_blob(this.blob);
|
||||
this.dispatchEvent(new CustomEvent('publish', {
|
||||
bubbles: true,
|
||||
detail: {
|
||||
id: id,
|
||||
},
|
||||
}));
|
||||
this.is_editing = false;
|
||||
}
|
||||
|
||||
render() {
|
||||
let value = JSON.stringify(this.value);
|
||||
if (this.blob_for_value != value) {
|
||||
this.blob_for_value = value;
|
||||
this.blob = undefined;
|
||||
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_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>
|
||||
</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">${unsafeHTML(this.markdown(this.blob))}</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('tf-wiki-doc', TfWikiDocElement);
|
||||
Reference in New Issue
Block a user