CringeStudios/gamja
5
0
Fork 1
mirror of https://codeberg.org/emersion/gamja synced 2025-03-12 23:43:42 +01:00
Code Issues Packages Projects Releases Wiki Activity

Add basic autocompletion

Browse Source
This commit is contained in:
Simon Ser 2020-06-29 12:36:17 +02:00
parent 2f284f183a
commit 20be67503b
No known key found for this signature in database
GPG Key ID: 0FDE7BE0E88F5E48
2 changed files with 53 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
components/app.js
View File

@ -55,6 +55,7 @@ export default class App extends Component {
this.handleComposerSubmit = this.handleComposerSubmit.bind(this);
this.handleNickClick = this.handleNickClick.bind(this);
this.handleJoinClick = this.handleJoinClick.bind(this);
this.autocomplete = this.autocomplete.bind(this);
if (window.localStorage && localStorage.getItem("autoconnect")) {
var connectParams = JSON.parse(localStorage.getItem("autoconnect"));
@ -554,6 +555,26 @@ export default class App extends Component {
this.client.send({ command: "JOIN", params: [channel] });
}
autocomplete(prefix) {
if (!this.state.activeBuffer) {
return null;
}
var buf = this.state.buffers.get(this.state.activeBuffer);
prefix = prefix.toLowerCase();
var repl = null;
for (var nick of buf.members.keys()) {
if (nick.toLowerCase().startsWith(prefix)) {
if (repl) {
return null;
}
repl = nick;
}
}
return repl;
}
componentDidMount() {
if (this.state.connectParams.autoconnect) {
this.connect(this.state.connectParams);
@ -609,7 +630,7 @@ export default class App extends Component {
</section>
</>
${memberList}
<${Composer} ref=${this.composer} readOnly=${this.state.activeBuffer == SERVER_BUFFER} onSubmit=${this.handleComposerSubmit}/>
<${Composer} ref=${this.composer} readOnly=${this.state.activeBuffer == SERVER_BUFFER} onSubmit=${this.handleComposerSubmit} autocomplete=${this.autocomplete}/>
`;
}
}

33
components/composer.js
View File

@ -11,6 +11,7 @@ export default class Composer extends Component {
this.handleInput = this.handleInput.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
this.handleInputKeyDown = this.handleInputKeyDown.bind(this);
this.handleWindowKeyDown = this.handleWindowKeyDown.bind(this);
}
@ -24,8 +25,36 @@ export default class Composer extends Component {
this.setState({ text: "" });
}
handleInputKeyDown(event) {
if (!this.props.autocomplete || event.key !== "Tab") {
return;
}
var text = this.state.text;
var i;
for (i = text.length - 1; i >= 0; i--) {
if (text[i] === " ") {
break;
}
}
var prefix = text.slice(i + 1);
if (!prefix) {
return;
}
event.preventDefault();
var repl = this.props.autocomplete(prefix);
if (!repl) {
return;
}
text = text.slice(0, i + 1) + repl;
this.setState({ text });
}
handleWindowKeyDown(event) {
if (document.activeElement == document.body && event.key == "/" && !this.state.text) {
if (document.activeElement === document.body && event.key === "/" && !this.state.text) {
event.preventDefault();
this.setState({ text: "/" }, () => {
this.focus();
@ -49,7 +78,7 @@ export default class Composer extends Component {
render() {
return html`
<form id="composer" class="${this.props.readOnly && !this.state.text ? "read-only" : ""}" onInput=${this.handleInput} onSubmit=${this.handleSubmit}>
<input type="text" name="text" ref=${this.textInput} value=${this.state.text} placeholder="Type a message"/>
<input type="text" name="text" ref=${this.textInput} value=${this.state.text} placeholder="Type a message" onKeyDown=${this.handleInputKeyDown}/>
</form>
`;
}