Mirrors
/
synapse
mirror of https://github.com/element-hq/synapse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fix SYWEB-8 : Buggy tab-complete. 

The first red blink was caused by an uninitialised search index. There is no
caching of entries, since this then wouldn't update if someone joined/left
during the tab. Instead, set to search index to MAX_VALUE then fix it to a
valid index AFTER the search is complete. Also ditched trailing space on ": ".
This commit is contained in:
Kegan Dougal 2014-09-23 12:22:14 +01:00
parent b5c9d99424
commit 512f2cc9c4
1 changed files with 40 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
webclient/room/room-directive.js
View File

@ -21,39 +21,53 @@ angular.module('RoomController')
return function (scope, element, attrs) { return function (scope, element, attrs) {
element.bind("keydown keypress", function (event) { element.bind("keydown keypress", function (event) {
// console.log("event: " + event.which); // console.log("event: " + event.which);
if (event.which === 9) { var TAB = 9;
var SHIFT = 16;
var keypressCode = event.which;
if (keypressCode === TAB) {
if (!scope.tabCompleting) { // cache our starting text if (!scope.tabCompleting) { // cache our starting text
// console.log("caching " + element[0].value);
scope.tabCompleteOriginal = element[0].value; scope.tabCompleteOriginal = element[0].value;
scope.tabCompleting = true; scope.tabCompleting = true;
scope.tabCompleteIndex = 0;
} }
// loop in the right direction
if (event.shiftKey) { if (event.shiftKey) {
scope.tabCompleteIndex--; scope.tabCompleteIndex--;
if (scope.tabCompleteIndex < 0) { if (scope.tabCompleteIndex < 0) {
scope.tabCompleteIndex = 0; // wrap to the last search match, and fix up to a real
// index value after we've matched
scope.tabCompleteIndex = Number.MAX_VALUE;
} }
} }
else { else {
scope.tabCompleteIndex++; scope.tabCompleteIndex++;
} }
var searchIndex = 0; var searchIndex = 0;
var targetIndex = scope.tabCompleteIndex; var targetIndex = scope.tabCompleteIndex;
var text = scope.tabCompleteOriginal; var text = scope.tabCompleteOriginal;
// console.log("targetIndex: " + targetIndex + ", text=" + text); // console.log("targetIndex: " + targetIndex + ",
// text=" + text);
// FIXME: use the correct regexp to recognise userIDs // FIXME: use the correct regexp to recognise userIDs
// XXX: I don't really know what the point of this is. You
// WANT to match freeform text given you want to match display
// names AND user IDs. Surely you just want to get the last
// word out of the input text and that's that?
// Am I missing something here? -- Kegan
var search = /@?([a-zA-Z0-9_\-:\.]+)$/.exec(text); var search = /@?([a-zA-Z0-9_\-:\.]+)$/.exec(text);
if (targetIndex === 0) {
element[0].value = text;
// Force angular to wake up and update the input ng-model by firing up input event if (targetIndex === 0) { // 0 is always the original text
element[0].value = text;
// Force angular to wake up and update the input ng-model
// by firing up input event
angular.element(element[0]).triggerHandler('input'); angular.element(element[0]).triggerHandler('input');
} }
else if (search && search[1]) { else if (search && search[1]) {
// console.log("search found: " + search); // console.log("search found: " + search+" from "+text);
var expansion; var expansion;
// FIXME: could do better than linear search here // FIXME: could do better than linear search here
@ -68,6 +82,7 @@ angular.module('RoomController')
if (searchIndex < targetIndex) { // then search raw mxids if (searchIndex < targetIndex) { // then search raw mxids
angular.forEach(scope.members, function(item, name) { angular.forEach(scope.members, function(item, name) {
if (searchIndex < targetIndex) { if (searchIndex < targetIndex) {
// === 1 because mxids are @username
if (name.toLowerCase().indexOf(search[1].toLowerCase()) === 1) { if (name.toLowerCase().indexOf(search[1].toLowerCase()) === 1) {
expansion = name; expansion = name;
searchIndex++; searchIndex++;
@ -76,8 +91,10 @@ angular.module('RoomController')
}); });
} }
if (searchIndex === targetIndex) { if (searchIndex === targetIndex ||
// xchat-style tab complete targetIndex === Number.MAX_VALUE) {
// xchat-style tab complete, add a colon if tab
// completing at the start of the text
if (search[0].length === text.length) if (search[0].length === text.length)
expansion += ": "; expansion += ": ";
else else
@ -85,9 +102,11 @@ angular.module('RoomController')
element[0].value = text.replace(/@?([a-zA-Z0-9_\-:\.]+)$/, expansion); element[0].value = text.replace(/@?([a-zA-Z0-9_\-:\.]+)$/, expansion);
// cancel blink // cancel blink
element[0].className = ""; element[0].className = "";
if (targetIndex === Number.MAX_VALUE) {
// Force angular to wake up and update the input ng-model by firing up input event // wrap the index around to the last index found
angular.element(element[0]).triggerHandler('input'); scope.tabCompleteIndex = searchIndex;
targetIndex = searchIndex;
}
} }
else { else {
// console.log("wrapped!"); // console.log("wrapped!");
@ -97,17 +116,19 @@ angular.module('RoomController')
}, 150); }, 150);
element[0].value = text; element[0].value = text;
scope.tabCompleteIndex = 0; scope.tabCompleteIndex = 0;
// Force angular to wake up and update the input ng-model by firing up input event
angular.element(element[0]).triggerHandler('input');
} }
// Force angular to wak up and update the input ng-model by
// firing up input event
angular.element(element[0]).triggerHandler('input');
} }
else { else {
scope.tabCompleteIndex = 0; scope.tabCompleteIndex = 0;
} }
// prevent the default TAB operation (typically focus shifting)
event.preventDefault(); event.preventDefault();
} }
else if (event.which !== 16 && scope.tabCompleting) { else if (keypressCode !== SHIFT && scope.tabCompleting) {
scope.tabCompleting = false; scope.tabCompleting = false;
scope.tabCompleteIndex = 0; scope.tabCompleteIndex = 0;
} }