forked from cory/tildefriends
88 lines
2.2 KiB
JavaScript
88 lines
2.2 KiB
JavaScript
|
import {LitElement, html} from './lit-all.min.js';
|
||
|
|
import * as tfutils from './tf-utils.js';
|
||
|
|
import * as tfrpc from '/static/tfrpc.js';
|
||
|
|
|
||
|
|
class TfComposeElement extends LitElement {
|
||
|
|
static get properties() {
|
||
|
|
return {
|
||
|
|
whoami: {type: String},
|
||
|
|
users: {type: Object},
|
||
|
|
root: {type: String},
|
||
|
|
branch: {type: String},
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
constructor() {
|
||
|
|
super();
|
||
|
|
this.users = {};
|
||
|
|
this.root = undefined;
|
||
|
|
this.branch = undefined;
|
||
|
|
}
|
||
|
|
|
||
|
|
changed(event) {
|
||
|
|
let edit = this.renderRoot.getElementById('edit');
|
||
|
|
let preview = this.renderRoot.getElementById('preview');
|
||
|
|
preview.innerHTML = tfutils.markdown(edit.value);
|
||
|
|
}
|
||
|
|
|
||
|
|
submit() {
|
||
|
|
let self = this;
|
||
|
|
let edit = this.renderRoot.getElementById('edit');
|
||
|
|
let message = {
|
||
|
|
type: 'post',
|
||
|
|
text: edit.value,
|
||
|
|
};
|
||
|
|
if (this.root || this.branch) {
|
||
|
|
message.root = this.root;
|
||
|
|
message.branch = this.branch;
|
||
|
|
}
|
||
|
|
console.log('Would post:', message);
|
||
|
|
tfrpc.rpc.appendMessage(this.whoami, message).then(function() {
|
||
|
|
edit.value = '';
|
||
|
|
self.changed();
|
||
|
|
}).catch(function(error) {
|
||
|
|
alert(error.message);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
discard() {
|
||
|
|
let edit = this.renderRoot.getElementById('edit');
|
||
|
|
edit.value = '';
|
||
|
|
this.changed();
|
||
|
|
this.dispatchEvent(new CustomEvent('tf-discard'));
|
||
|
|
}
|
||
|
|
|
||
|
|
attach() {
|
||
|
|
let self = this;
|
||
|
|
let edit = this.renderRoot.getElementById('edit');
|
||
|
|
let input = document.createElement('input');
|
||
|
|
input.type = 'file';
|
||
|
|
input.onchange = function(event) {
|
||
|
|
let file = event.target.files[0];
|
||
|
|
file.arrayBuffer().then(function(buffer) {
|
||
|
|
let bin = Array.from(new Uint8Array(buffer));
|
||
|
|
return tfrpc.rpc.store_blob(bin);
|
||
|
|
}).then(function(id) {
|
||
|
|
edit.value += `\n`;
|
||
|
|
self.changed();
|
||
|
|
}).catch(function(e) {
|
||
|
|
alert(e.message);
|
||
|
|
});
|
||
|
|
};
|
||
|
|
input.click();
|
||
|
|
}
|
||
|
|
|
||
|
|
render() {
|
||
|
|
return html`
|
||
|
|
<div style="display: flex; flex-direction: row; width: 100%">
|
||
|
|
<textarea id="edit" @input=${this.changed} style="flex: 1 0 50%"></textarea>
|
||
|
|
<div id="preview" style="flex: 1 0 50%"></div>
|
||
|
|
</div>
|
||
|
|
<input type="button" value="Submit" @click=${this.submit}></input>
|
||
|
|
<input type="button" value="Attach" @click=${this.attach}></input>
|
||
|
|
<input type="button" value="Discard" @click=${this.discard}></input>
|
||
|
|
`;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
customElements.define('tf-compose', TfComposeElement);
|