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:
2022-10-15 18:22:13 +00:00
parent 04ae7a2540
commit 704ed737a9
5 changed files with 1852 additions and 2 deletions

View File

@ -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>

View File

@ -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;
}
}

View 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;
}

File diff suppressed because it is too large Load Diff