forked from cory/tildefriends
Auto-complete @mentions.
git-svn-id: https://www.unprompted.com/svn/projects/tildefriends/trunk@4007 ed5197a5-7fde-0310-b194-c3ffbd925b24
This commit is contained in:
@ -3,6 +3,12 @@
|
||||
<head>
|
||||
<title>Tilde Friends</title>
|
||||
<base target="_top">
|
||||
<link rel="stylesheet" href="tribute.css" />
|
||||
<style>
|
||||
.tribute-container {
|
||||
color: #000;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Tilde Friends</h1>
|
||||
|
@ -1,6 +1,8 @@
|
||||
import {LitElement, html} from './lit-all.min.js';
|
||||
import * as tfutils from './tf-utils.js';
|
||||
import * as tfrpc from '/static/tfrpc.js';
|
||||
import {styles} from './tf-styles.js';
|
||||
import Tribute from './tribute.esm.js';
|
||||
|
||||
class TfComposeElement extends LitElement {
|
||||
static get properties() {
|
||||
@ -12,6 +14,8 @@ class TfComposeElement extends LitElement {
|
||||
}
|
||||
}
|
||||
|
||||
static styles = styles;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.users = {};
|
||||
@ -95,8 +99,18 @@ class TfComposeElement extends LitElement {
|
||||
input.click();
|
||||
}
|
||||
|
||||
firstUpdated() {
|
||||
let tribute = new Tribute({
|
||||
values: Object.entries(this.users).map(x => ({key: x[1].name, value: x[0]})),
|
||||
selectTemplate: function(item) {
|
||||
return `[@${item.original.key}](${item.original.value})`;
|
||||
},
|
||||
});
|
||||
tribute.attach(this.renderRoot.getElementById('edit'));
|
||||
}
|
||||
|
||||
render() {
|
||||
return html`
|
||||
let result = html`
|
||||
<div style="display: flex; flex-direction: row; width: 100%">
|
||||
<textarea id="edit" @input=${this.changed} @paste=${this.paste} style="flex: 1 0 50%"></textarea>
|
||||
<div id="preview" style="flex: 1 0 50%"></div>
|
||||
@ -105,6 +119,7 @@ class TfComposeElement extends LitElement {
|
||||
<input type="button" value="Attach" @click=${this.attach}></input>
|
||||
<input type="button" value="Discard" @click=${this.discard}></input>
|
||||
`;
|
||||
return result;
|
||||
}
|
||||
}
|
||||
|
||||
|
32
apps/cory/ssblit/tribute.css
Normal file
32
apps/cory/ssblit/tribute.css
Normal file
@ -0,0 +1,32 @@
|
||||
.tribute-container {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: auto;
|
||||
overflow: auto;
|
||||
display: block;
|
||||
z-index: 999999;
|
||||
}
|
||||
.tribute-container ul {
|
||||
margin: 0;
|
||||
margin-top: 2px;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
background: #efefef;
|
||||
}
|
||||
.tribute-container li {
|
||||
padding: 5px 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.tribute-container li.highlight {
|
||||
background: #ddd;
|
||||
}
|
||||
.tribute-container li span {
|
||||
font-weight: bold;
|
||||
}
|
||||
.tribute-container li.no-match {
|
||||
cursor: default;
|
||||
}
|
||||
.tribute-container .menu-highlighted {
|
||||
font-weight: bold;
|
||||
}
|
1797
apps/cory/ssblit/tribute.esm.js
Normal file
1797
apps/cory/ssblit/tribute.esm.js
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user