diff --git a/client/css/style.css b/client/css/style.css index 790fdbf2..490439ce 100644 --- a/client/css/style.css +++ b/client/css/style.css @@ -765,6 +765,9 @@ kbd { overflow: auto; -webkit-overflow-scrolling: touch; position: absolute; +} + +#chat .channel .chat { right: 180px; } @@ -788,18 +791,6 @@ kbd { transform: translateZ(0); } -#chat .lobby .chat, -#chat .special .chat, -#chat .query .chat { - right: 0; -} - -#chat .lobby .sidebar, -#chat .special .sidebar, -#chat .query .sidebar { - display: none; -} - #chat .show-more { display: none; padding: 10px; @@ -1177,6 +1168,10 @@ kbd { width: 100%; } +#chat .names-filtered { + display: none; +} + #chat .names .user { display: block; line-height: 1.6; @@ -1216,6 +1211,10 @@ kbd { content: "Users"; } +#chat .user-mode-search:before { + content: "Search Results"; +} + #loading { font-size: 14px; z-index: 1; diff --git a/client/js/libs/handlebars/users.js b/client/js/libs/handlebars/users.js deleted file mode 100644 index d962423c..00000000 --- a/client/js/libs/handlebars/users.js +++ /dev/null @@ -1,5 +0,0 @@ -"use strict"; - -module.exports = function(count) { - return count + " " + (count === 1 ? "user" : "users"); -}; diff --git a/client/js/lounge.js b/client/js/lounge.js index f134c16c..e7ddb02f 100644 --- a/client/js/lounge.js +++ b/client/js/lounge.js @@ -7,6 +7,7 @@ const $ = require("jquery"); const moment = require("moment"); const Mousetrap = require("mousetrap"); const URI = require("urijs"); +const fuzzy = require("fuzzy"); // our libraries const emojiMap = require("./libs/simplemap.json"); @@ -320,7 +321,10 @@ $(function() { function renderChannel(data) { renderChannelMessages(data); - renderChannelUsers(data); + + if (data.type === "channel") { + renderChannelUsers(data); + } } function renderChannelMessages(data) { @@ -380,7 +384,19 @@ $(function() { return (oldSortOrder[a] || Number.MAX_VALUE) - (oldSortOrder[b] || Number.MAX_VALUE); }); - users.html(templates.user(data)).data("nicks", nicks); + const search = users + .find(".search") + .attr("placeholder", nicks.length + " " + (nicks.length === 1 ? "user" : "users")); + + users + .find(".names-original") + .html(templates.user(data)) + .data("nicks", nicks); + + // Refresh user search + if (search.val().length) { + search.trigger("input"); + } } function renderNetworks(data) { @@ -1022,17 +1038,31 @@ $(function() { }); chat.on("input", ".search", function() { - var value = $(this).val().toLowerCase(); - var names = $(this).closest(".users").find(".names"); - names.find(".user").each(function() { - var btn = $(this); - var name = btn.text().toLowerCase().replace(/[+%@~]/, ""); - if (name.indexOf(value) > -1) { - btn.show(); - } else { - btn.hide(); - } - }); + const value = $(this).val(); + const parent = $(this).closest(".users"); + const names = parent.find(".names-original"); + const container = parent.find(".names-filtered"); + + if (!value.length) { + container.hide(); + names.show(); + return; + } + + const fuzzyOptions = { + pre: "", + post: "", + extract: el => $(el).text() + }; + + const result = fuzzy.filter( + value, + names.find(".user").toArray(), + fuzzyOptions + ); + + names.hide(); + container.html(templates.user_filtered({matches: result})).show(); }); chat.on("msg", ".messages", function(e, target, msg) { diff --git a/client/views/chat.tpl b/client/views/chat.tpl index 9ccb6391..898dd75b 100644 --- a/client/views/chat.tpl +++ b/client/views/chat.tpl @@ -19,8 +19,16 @@
+ {{#equal type "channel"}} + {{/equal}} {{/each}} diff --git a/client/views/index.js b/client/views/index.js index fa1916ee..201690ee 100644 --- a/client/views/index.js +++ b/client/views/index.js @@ -30,4 +30,5 @@ module.exports = { toggle: require("./toggle.tpl"), unread_marker: require("./unread_marker.tpl"), user: require("./user.tpl"), + user_filtered: require("./user_filtered.tpl"), }; diff --git a/client/views/user.tpl b/client/views/user.tpl index 23a3a9f0..b0af2a0c 100644 --- a/client/views/user.tpl +++ b/client/views/user.tpl @@ -1,18 +1,11 @@ -{{#if users.length}} -
- -
-{{/if}} -
- {{#diff "reset"}}{{/diff}} - {{#each users}} - {{#diff mode}} - {{#unless @first}} -
- {{/unless}} -
- {{/diff}} - {{mode}}{{name}} - {{/each}} -
+{{#diff "reset"}}{{/diff}} +{{#each users}} + {{#diff mode}} + {{#unless @first}} + + {{/unless}} +
+ {{/diff}} + {{mode}}{{name}} +{{/each}}
diff --git a/client/views/user_filtered.tpl b/client/views/user_filtered.tpl new file mode 100644 index 00000000..1b86f99d --- /dev/null +++ b/client/views/user_filtered.tpl @@ -0,0 +1,5 @@ + diff --git a/package.json b/package.json index fc8693d7..e7c54e1e 100644 --- a/package.json +++ b/package.json @@ -65,6 +65,7 @@ "chai": "3.5.0", "eslint": "3.19.0", "font-awesome": "4.7.0", + "fuzzy": "0.1.3", "handlebars": "4.0.6", "handlebars-loader": "1.5.0", "jquery": "3.2.1", diff --git a/webpack.config.js b/webpack.config.js index 0cdd6833..93b9794e 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -19,6 +19,7 @@ let config = { "mousetrap", "socket.io-client", "urijs", + "fuzzy", ], }, devtool: "source-map",