Search improvements.
This commit is contained in:
Richard Lewis
parent
88644314ce
commit
9a1fb0c0a0
@ -20,6 +20,70 @@
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
form.message-search {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
form.message-search .input-wrapper {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
form.message-search button {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
form.message-search input {
|
||||
width: 100%;
|
||||
height: auto !important;
|
||||
margin: 7px 0;
|
||||
border: 0;
|
||||
color: inherit;
|
||||
background-color: rgba(128, 128, 128, 0.15);
|
||||
}
|
||||
|
||||
form.message-search input::placeholder {
|
||||
color: rgba(128, 128, 128, 0.4);
|
||||
}
|
||||
|
||||
@media (min-width: 480px) {
|
||||
form.message-search input {
|
||||
min-width: 140px;
|
||||
transition: min-width 0.2s;
|
||||
}
|
||||
|
||||
form.message-search input:focus {
|
||||
min-width: 220px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
form.message-search .input-wrapper {
|
||||
position: absolute;
|
||||
top: 45px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
height: 0;
|
||||
transition: height 0.2s;
|
||||
overflow: hidden;
|
||||
background: var(--window-bg-color);
|
||||
}
|
||||
|
||||
form.message-search .input-wrapper input {
|
||||
margin: 7px;
|
||||
}
|
||||
|
||||
form.message-search.opened .input-wrapper {
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
form.message-search button {
|
||||
display: flex !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "MessageSearchForm",
|
||||
|
||||
@ -29,7 +29,7 @@
|
||||
ref="loadMoreButton"
|
||||
:disabled="
|
||||
$store.state.messageSearchInProgress ||
|
||||
!$store.state.isConnected
|
||||
!$store.state.isConnected
|
||||
"
|
||||
class="btn"
|
||||
@click="onShowMoreClick"
|
||||
@ -55,14 +55,15 @@
|
||||
<template v-for="(message, id) in messages">
|
||||
<DateMarker
|
||||
v-if="shouldDisplayDateMarker(message, id)"
|
||||
:key="message.time + '-date'"
|
||||
:key="message.date"
|
||||
:message="message"
|
||||
/>
|
||||
<Message
|
||||
:key="message.time"
|
||||
:key="message.id"
|
||||
:channel="channel"
|
||||
:network="network"
|
||||
:message="message"
|
||||
:data-id="message.id"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
@ -178,7 +179,7 @@ export default {
|
||||
networkUuid: this.$route.params.uuid,
|
||||
channelName: this.$route.params.target,
|
||||
searchTerm: this.$route.params.term,
|
||||
offset: this.offset,
|
||||
offset: this.offset + 1,
|
||||
});
|
||||
},
|
||||
jumpToBottom() {
|
||||
|
||||
@ -553,7 +553,6 @@ p {
|
||||
|
||||
#viewport .lt,
|
||||
#viewport .rt,
|
||||
<<<<<<< HEAD
|
||||
#chat button.mentions,
|
||||
#chat button.search,
|
||||
#chat button.menu {
|
||||
@ -2823,68 +2822,6 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
form.message-search {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
form.message-search .input-wrapper {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
form.message-search button {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
form.message-search input {
|
||||
width: 100%;
|
||||
height: auto !important;
|
||||
margin: 7px 0;
|
||||
border: 0;
|
||||
color: inherit;
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
form.message-search input::placeholder {
|
||||
color: rgba(255, 255, 255, 0.35);
|
||||
}
|
||||
|
||||
@media (min-width: 480px) {
|
||||
form.message-search input {
|
||||
min-width: 140px;
|
||||
transition: min-width 0.2s;
|
||||
}
|
||||
|
||||
form.message-search input:focus {
|
||||
min-width: 220px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 479px) {
|
||||
form.message-search .input-wrapper {
|
||||
position: absolute;
|
||||
top: 45px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
height: 0;
|
||||
transition: height 0.2s;
|
||||
overflow: hidden;
|
||||
background: var(--window-bg-color);
|
||||
}
|
||||
|
||||
form.message-search .input-wrapper input {
|
||||
margin: 7px;
|
||||
}
|
||||
|
||||
form.message-search.opened .input-wrapper {
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
form.message-search button {
|
||||
display: flex !important;
|
||||
}
|
||||
}
|
||||
|
||||
.chat-view[data-type="search-results"] .search-status {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
|
||||
340
client/js/autocompletion-custom.js
Normal file
340
client/js/autocompletion-custom.js
Normal file
@ -0,0 +1,340 @@
|
||||
/*
|
||||
"use strict";
|
||||
|
||||
const constants = require("./constants");
|
||||
|
||||
import Mousetrap from "mousetrap";
|
||||
import {Textcomplete, Textarea} from "textcomplete";
|
||||
import fuzzy from "fuzzy";
|
||||
|
||||
import emojiMap from "./helpers/simplemap.json";
|
||||
import store from "./store";
|
||||
|
||||
export default enableAutocomplete;
|
||||
|
||||
export default class CustomTextarea extends Textarea {
|
||||
|
||||
}
|
||||
|
||||
const emojiSearchTerms = Object.keys(emojiMap);
|
||||
const emojiStrategy = {
|
||||
id: "emoji",
|
||||
match: /(^|\s):([-+\w:?]{2,}):?$/,
|
||||
search(term, callback) {
|
||||
// Trim colon from the matched term,
|
||||
// as we are unable to get a clean string from match regex
|
||||
term = term.replace(/:$/, "");
|
||||
callback(fuzzyGrep(term, emojiSearchTerms));
|
||||
},
|
||||
template([string, original]) {
|
||||
return `<span class="emoji">${emojiMap[original]}</span> ${string}`;
|
||||
},
|
||||
replace([, original]) {
|
||||
return "$1" + emojiMap[original];
|
||||
},
|
||||
index: 2,
|
||||
};
|
||||
|
||||
const nicksStrategy = {
|
||||
id: "nicks",
|
||||
match: /(^|\s)(@([a-zA-Z_[\]\\^{}|`@][a-zA-Z0-9_[\]\\^{}|`-]*)?)$/,
|
||||
search(term, callback) {
|
||||
term = term.slice(1);
|
||||
|
||||
if (term[0] === "@") {
|
||||
callback(completeNicks(term.slice(1), true).map((val) => ["@" + val[0], "@" + val[1]]));
|
||||
} else {
|
||||
callback(completeNicks(term, true));
|
||||
}
|
||||
},
|
||||
template([string]) {
|
||||
return string;
|
||||
},
|
||||
replace([, original]) {
|
||||
return "$1" + replaceNick(original);
|
||||
},
|
||||
index: 2,
|
||||
};
|
||||
|
||||
const chanStrategy = {
|
||||
id: "chans",
|
||||
match: /(^|\s)((?:#|\+|&|![A-Z0-9]{5})(?:[^\s]+)?)$/,
|
||||
search(term, callback) {
|
||||
callback(completeChans(term));
|
||||
},
|
||||
template([string]) {
|
||||
return string;
|
||||
},
|
||||
replace([, original]) {
|
||||
return "$1" + original;
|
||||
},
|
||||
index: 2,
|
||||
};
|
||||
|
||||
const commandStrategy = {
|
||||
id: "commands",
|
||||
match: /^\/(\w*)$/,
|
||||
search(term, callback) {
|
||||
callback(completeCommands("/" + term));
|
||||
},
|
||||
template([string]) {
|
||||
return string;
|
||||
},
|
||||
replace([, original]) {
|
||||
return original;
|
||||
},
|
||||
index: 1,
|
||||
};
|
||||
|
||||
const foregroundColorStrategy = {
|
||||
id: "foreground-colors",
|
||||
match: /\x03(\d{0,2}|[A-Za-z ]{0,10})$/,
|
||||
search(term, callback) {
|
||||
term = term.toLowerCase();
|
||||
|
||||
const matchingColorCodes = constants.colorCodeMap
|
||||
.filter((i) => fuzzy.test(term, i[0]) || fuzzy.test(term, i[1]))
|
||||
.map((i) => {
|
||||
if (fuzzy.test(term, i[1])) {
|
||||
return [
|
||||
i[0],
|
||||
fuzzy.match(term, i[1], {
|
||||
pre: "<b>",
|
||||
post: "</b>",
|
||||
}).rendered,
|
||||
];
|
||||
}
|
||||
|
||||
return i;
|
||||
});
|
||||
|
||||
callback(matchingColorCodes);
|
||||
},
|
||||
template(value) {
|
||||
return `<span class="irc-fg${parseInt(value[0], 10)}">${value[1]}</span>`;
|
||||
},
|
||||
replace(value) {
|
||||
return "\x03" + value[0];
|
||||
},
|
||||
index: 1,
|
||||
};
|
||||
|
||||
const backgroundColorStrategy = {
|
||||
id: "background-colors",
|
||||
match: /\x03(\d{2}),(\d{0,2}|[A-Za-z ]{0,10})$/,
|
||||
search(term, callback, match) {
|
||||
term = term.toLowerCase();
|
||||
const matchingColorCodes = constants.colorCodeMap
|
||||
.filter((i) => fuzzy.test(term, i[0]) || fuzzy.test(term, i[1]))
|
||||
.map((pair) => {
|
||||
if (fuzzy.test(term, pair[1])) {
|
||||
return [
|
||||
pair[0],
|
||||
fuzzy.match(term, pair[1], {
|
||||
pre: "<b>",
|
||||
post: "</b>",
|
||||
}).rendered,
|
||||
];
|
||||
}
|
||||
|
||||
return pair;
|
||||
})
|
||||
.map((pair) => pair.concat(match[1])); // Needed to pass fg color to `template`...
|
||||
|
||||
callback(matchingColorCodes);
|
||||
},
|
||||
template(value) {
|
||||
return `<span class="irc-fg${parseInt(value[2], 10)} irc-bg irc-bg${parseInt(
|
||||
value[0],
|
||||
10
|
||||
)}">${value[1]}</span>`;
|
||||
},
|
||||
replace(value) {
|
||||
return "\x03$1," + value[0];
|
||||
},
|
||||
index: 2,
|
||||
};
|
||||
|
||||
function enableAutocomplete(input,) {
|
||||
let tabCount = 0;
|
||||
let lastMatch = "";
|
||||
let currentMatches = [];
|
||||
|
||||
input.addEventListener("input", (e) => {
|
||||
if (e.detail === "autocomplete") {
|
||||
return;
|
||||
}
|
||||
|
||||
tabCount = 0;
|
||||
currentMatches = [];
|
||||
lastMatch = "";
|
||||
});
|
||||
|
||||
Mousetrap(input).bind(
|
||||
"tab",
|
||||
(e) => {
|
||||
if (store.state.isAutoCompleting) {
|
||||
return;
|
||||
}
|
||||
|
||||
e.preventDefault();
|
||||
|
||||
const text = input.value;
|
||||
|
||||
if (tabCount === 0) {
|
||||
lastMatch = text
|
||||
.substring(0, input.selectionStart)
|
||||
.split(/\s/)
|
||||
.pop();
|
||||
|
||||
if (lastMatch.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
currentMatches = completeNicks(lastMatch, false);
|
||||
|
||||
if (currentMatches.length === 0) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
const position = input.selectionStart - lastMatch.length;
|
||||
const newMatch = replaceNick(
|
||||
currentMatches[tabCount % currentMatches.length],
|
||||
position
|
||||
);
|
||||
const remainder = text.substr(input.selectionStart);
|
||||
|
||||
input.value = text.substr(0, position) + newMatch + remainder;
|
||||
input.selectionStart -= remainder.length;
|
||||
input.selectionEnd = input.selectionStart;
|
||||
|
||||
// Propagate change to Vue model
|
||||
input.dispatchEvent(
|
||||
new CustomEvent("input", {
|
||||
detail: "autocomplete",
|
||||
})
|
||||
);
|
||||
|
||||
lastMatch = newMatch;
|
||||
tabCount++;
|
||||
},
|
||||
"keydown"
|
||||
);
|
||||
|
||||
const editor = new CustomTextarea(input);
|
||||
const textcomplete = new Textcomplete(editor, {
|
||||
dropdown: {
|
||||
className: "textcomplete-menu",
|
||||
placement: "top",
|
||||
},
|
||||
});
|
||||
|
||||
textcomplete.register([
|
||||
emojiStrategy,
|
||||
nicksStrategy,
|
||||
chanStrategy,
|
||||
commandStrategy,
|
||||
foregroundColorStrategy,
|
||||
backgroundColorStrategy,
|
||||
]);
|
||||
|
||||
// Activate the first item by default
|
||||
// https://github.com/yuku-t/textcomplete/issues/93
|
||||
textcomplete.on("rendered", () => {
|
||||
if (textcomplete.dropdown.items.length > 0) {
|
||||
textcomplete.dropdown.items[0].activate();
|
||||
}
|
||||
});
|
||||
|
||||
textcomplete.on("show", () => {
|
||||
store.commit("isAutoCompleting", true);
|
||||
});
|
||||
|
||||
textcomplete.on("hidden", () => {
|
||||
store.commit("isAutoCompleting", false);
|
||||
});
|
||||
|
||||
return {
|
||||
hide() {
|
||||
textcomplete.hide();
|
||||
},
|
||||
destroy() {
|
||||
textcomplete.destroy();
|
||||
store.commit("isAutoCompleting", false);
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
function replaceNick(original, position = 1) {
|
||||
// If no postfix specified, return autocompleted nick as-is
|
||||
if (!store.state.settings.nickPostfix) {
|
||||
return original;
|
||||
}
|
||||
|
||||
// If there is whitespace in the input already, append space to nick
|
||||
if (position > 0 && /\s/.test(store.state.activeChannel.channel.pendingMessage)) {
|
||||
return original + " ";
|
||||
}
|
||||
|
||||
// If nick is first in the input, append specified postfix
|
||||
return original + store.state.settings.nickPostfix;
|
||||
}
|
||||
|
||||
function fuzzyGrep(term, array) {
|
||||
const results = fuzzy.filter(term, array, {
|
||||
pre: "<b>",
|
||||
post: "</b>",
|
||||
});
|
||||
return results.map((el) => [el.string, el.original]);
|
||||
}
|
||||
|
||||
function rawNicks() {
|
||||
if (store.state.activeChannel.channel.users.length > 0) {
|
||||
const users = store.state.activeChannel.channel.users.slice();
|
||||
|
||||
return users.sort((a, b) => b.lastMessage - a.lastMessage).map((u) => u.nick);
|
||||
}
|
||||
|
||||
const me = store.state.activeChannel.network.nick;
|
||||
const otherUser = store.state.activeChannel.channel.name;
|
||||
|
||||
// If this is a query, add their name to autocomplete
|
||||
if (me !== otherUser && store.state.activeChannel.channel.type === "query") {
|
||||
return [otherUser, me];
|
||||
}
|
||||
|
||||
// Return our own name by default for anything that isn't a channel or query
|
||||
return [me];
|
||||
}
|
||||
|
||||
function completeNicks(word, isFuzzy) {
|
||||
const users = rawNicks();
|
||||
word = word.toLowerCase();
|
||||
|
||||
if (isFuzzy) {
|
||||
return fuzzyGrep(word, users);
|
||||
}
|
||||
|
||||
return users.filter((w) => !w.toLowerCase().indexOf(word));
|
||||
}
|
||||
|
||||
function completeCommands(word) {
|
||||
const words = constants.commands.slice();
|
||||
|
||||
return fuzzyGrep(word, words);
|
||||
}
|
||||
|
||||
function completeChans(word) {
|
||||
const words = [];
|
||||
|
||||
for (const channel of store.state.activeChannel.network.channels) {
|
||||
// Push all channels that start with the same CHANTYPE
|
||||
if (channel.type === "channel" && channel.name[0] === word[0]) {
|
||||
words.push(channel.name);
|
||||
}
|
||||
}
|
||||
|
||||
return fuzzyGrep(word, words);
|
||||
}
|
||||
*/
|
||||
@ -528,14 +528,9 @@ Client.prototype.clearHistory = function (data) {
|
||||
}
|
||||
};
|
||||
|
||||
Client.prototype.search = function(query) {
|
||||
if (this.messageStorage) {
|
||||
for (const storage of this.messageStorage) {
|
||||
if (storage.database) {
|
||||
return storage.search(query);
|
||||
}
|
||||
}
|
||||
}
|
||||
Client.prototype.search = function (query) {
|
||||
const messageStorage = this.messageStorage.find((s) => s.canProvideMessages());
|
||||
return messageStorage.search(query);
|
||||
};
|
||||
|
||||
Client.prototype.open = function (socketId, target) {
|
||||
|
||||
@ -208,16 +208,32 @@ class MessageStorage {
|
||||
}
|
||||
|
||||
let select =
|
||||
'SELECT msg, type, time, channel FROM messages WHERE type = "message" AND network = ? AND json_extract(msg, "$.text") LIKE ?';
|
||||
const params = [query.networkUuid, `%${query.searchTerm}%`];
|
||||
'SELECT msg, type, time, channel FROM messages WHERE type = "message" AND (json_extract(msg, "$.text") LIKE ?';
|
||||
const params = [`%${query.searchTerm}%`];
|
||||
|
||||
if (query.searchNicks) {
|
||||
select += ' OR json_extract(msg, "$.from.nick") LIKE ?)';
|
||||
params.push(query.searchTerm);
|
||||
} else {
|
||||
select += ")";
|
||||
}
|
||||
|
||||
if (query.networkUuid) {
|
||||
select += " AND network = ? ";
|
||||
params.push(query.networkUuid);
|
||||
}
|
||||
|
||||
if (query.channelName) {
|
||||
select += " AND channel = ? ";
|
||||
params.push(query.channelName);
|
||||
}
|
||||
|
||||
select += " ORDER BY time DESC LIMIT 100 OFFSET ? ";
|
||||
params.push(query.offset || 0);
|
||||
const maxResults = 100;
|
||||
|
||||
select += " ORDER BY time DESC LIMIT ? OFFSET ? ";
|
||||
params.push(maxResults);
|
||||
query.offset = parseInt(query.offset, 10) || 0;
|
||||
params.push(query.offset);
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
this.database.all(select, params, (err, rows) => {
|
||||
@ -229,7 +245,7 @@ class MessageStorage {
|
||||
target: query.channelName,
|
||||
networkUuid: query.networkUuid,
|
||||
offset: query.offset,
|
||||
results: rows.map(parseRowToMessage),
|
||||
results: parseRowsToMessages(query.offset, rows),
|
||||
};
|
||||
resolve(response);
|
||||
}
|
||||
@ -244,10 +260,17 @@ class MessageStorage {
|
||||
|
||||
module.exports = MessageStorage;
|
||||
|
||||
function parseRowToMessage(row) {
|
||||
const msg = JSON.parse(row.msg);
|
||||
msg.time = row.time;
|
||||
msg.type = row.type;
|
||||
function parseRowsToMessages(id, rows) {
|
||||
const messages = [];
|
||||
|
||||
return new Msg(msg);
|
||||
for (const row of rows) {
|
||||
const msg = JSON.parse(row.msg);
|
||||
msg.time = row.time;
|
||||
msg.type = row.type;
|
||||
msg.id = id;
|
||||
messages.push(new Msg(msg));
|
||||
id += 1;
|
||||
}
|
||||
|
||||
return messages;
|
||||
}
|
||||
|
||||
@ -592,12 +592,6 @@ function initializeClient(socket, client, token, lastMessage, openChannel) {
|
||||
|
||||
socket.on("sessions:get", sendSessionList);
|
||||
|
||||
socket.on("search", (query) => {
|
||||
client.search(query).then((results) => {
|
||||
socket.emit("search:results", results);
|
||||
});
|
||||
});
|
||||
|
||||
if (!Helper.config.public) {
|
||||
socket.on("setting:set", (newSetting) => {
|
||||
if (!newSetting || typeof newSetting !== "object") {
|
||||
@ -645,6 +639,12 @@ function initializeClient(socket, client, token, lastMessage, openChannel) {
|
||||
const clientSettings = client.config.clientSettings;
|
||||
socket.emit("setting:all", clientSettings);
|
||||
});
|
||||
|
||||
socket.on("search", (query) => {
|
||||
client.search(query).then((results) => {
|
||||
socket.emit("search:results", results);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
socket.on("sign-out", (tokenToSignOut) => {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user