Remove jquery from autocompletion

This commit is contained in:
Pavel Djundik 2019-11-15 20:53:38 +02:00
parent a71472a427
commit fcf7488e1e
2 changed files with 38 additions and 42 deletions

View File

@ -8,7 +8,6 @@
:value="channel.pendingMessage"
:placeholder="getInputPlaceholder(channel)"
:aria-label="getInputPlaceholder(channel)"
class="mousetrap"
@input="setPendingMessage"
@keypress.enter.exact.prevent="onSubmit"
/>
@ -49,6 +48,7 @@
</template>
<script>
import autocompletion from "../js/autocompletion";
const commands = require("../js/commands/index");
const socket = require("../js/socket");
const upload = require("../js/upload");
@ -80,6 +80,8 @@ const bracketWraps = {
_: "_",
};
let autocompletionRef = null;
export default {
name: "ChatInput",
props: {
@ -93,7 +95,7 @@ export default {
},
mounted() {
if (this.$store.state.settings.autocomplete) {
require("../js/autocompletion").enable(this.$refs.input);
autocompletionRef = autocompletion(this.$refs.input);
}
const inputTrap = Mousetrap(this.$refs.input);
@ -152,7 +154,11 @@ export default {
}
},
destroyed() {
require("../js/autocompletion").disable();
if (autocompletionRef) {
autocompletionRef.destroy();
autocompletionRef = null;
}
upload.abort();
},
methods: {
@ -201,6 +207,10 @@ export default {
return false;
}
if (autocompletionRef) {
autocompletionRef.hide();
}
this.channel.inputHistoryPosition = 0;
this.channel.pendingMessage = "";
this.$refs.input.value = "";

View File

@ -1,6 +1,5 @@
"use strict";
const $ = require("jquery");
const fuzzy = require("fuzzy");
const Mousetrap = require("mousetrap");
const {Textcomplete, Textarea} = require("textcomplete");
@ -8,23 +7,7 @@ const emojiMap = require("./helpers/simplemap.json");
const constants = require("./constants");
const store = require("./store").default;
let input;
let textcomplete;
let enabled = false;
module.exports = {
enable: enableAutocomplete,
disable() {
if (enabled) {
$("#form").off("submit.tabcomplete");
input.off("input.tabcomplete");
Mousetrap(input.get(0)).unbind("tab", "keydown");
textcomplete.destroy();
enabled = false;
store.commit("isAutoCompleting", false);
}
},
};
export default enableAutocomplete;
const emojiSearchTerms = Object.keys(emojiMap);
const emojiStrategy = {
@ -66,7 +49,7 @@ const nicksStrategy = {
}
// If there is whitespace in the input already, append space to nick
if (position > 0 && /\s/.test($("#input").val())) {
if (position > 0 && /\s/.test(store.state.activeChannel.channel.pendingMessage)) {
return original + " ";
}
@ -175,14 +158,12 @@ const backgroundColorStrategy = {
index: 2,
};
function enableAutocomplete(inputRef) {
enabled = true;
function enableAutocomplete(input) {
let tabCount = 0;
let lastMatch = "";
let currentMatches = [];
input = $(inputRef);
input.on("input.tabcomplete", (e) => {
input.addEventListener("input", (e) => {
if (e.detail === "autocomplete") {
return;
}
@ -192,7 +173,7 @@ function enableAutocomplete(inputRef) {
lastMatch = "";
});
Mousetrap(input.get(0)).bind(
Mousetrap(input).bind(
"tab",
(e) => {
if (store.state.isAutoCompleting) {
@ -201,12 +182,11 @@ function enableAutocomplete(inputRef) {
e.preventDefault();
const text = input.val();
const element = input.get(0);
const text = input.value;
if (tabCount === 0) {
lastMatch = text
.substring(0, element.selectionStart)
.substring(0, input.selectionStart)
.split(/\s/)
.pop();
@ -221,19 +201,19 @@ function enableAutocomplete(inputRef) {
}
}
const position = element.selectionStart - lastMatch.length;
const position = input.selectionStart - lastMatch.length;
const newMatch = nicksStrategy.replace(
[0, currentMatches[tabCount % currentMatches.length]],
position
);
const remainder = text.substr(element.selectionStart);
const remainder = text.substr(input.selectionStart);
input.val(text.substr(0, position) + newMatch + remainder);
element.selectionStart -= remainder.length;
element.selectionEnd = element.selectionStart;
input.value = text.substr(0, position) + newMatch + remainder;
input.selectionStart -= remainder.length;
input.selectionEnd = input.selectionStart;
// Propagate change to Vue model
element.dispatchEvent(
input.dispatchEvent(
new CustomEvent("input", {
detail: "autocomplete",
})
@ -245,8 +225,8 @@ function enableAutocomplete(inputRef) {
"keydown"
);
const editor = new Textarea(input.get(0));
textcomplete = new Textcomplete(editor, {
const editor = new Textarea(input);
const textcomplete = new Textcomplete(editor, {
dropdown: {
className: "textcomplete-menu",
placement: "top",
@ -278,9 +258,15 @@ function enableAutocomplete(inputRef) {
store.commit("isAutoCompleting", false);
});
$("#form").on("submit.tabcomplete", () => {
textcomplete.hide();
});
return {
hide() {
textcomplete.hide();
},
destroy() {
textcomplete.destroy();
store.commit("isAutoCompleting", false);
},
};
}
function fuzzyGrep(term, array) {
@ -318,7 +304,7 @@ function completeNicks(word, isFuzzy) {
return fuzzyGrep(word, users);
}
return $.grep(users, (w) => !w.toLowerCase().indexOf(word));
return users.filter((w) => !w.toLowerCase().indexOf(word));
}
function completeCommands(word) {