diff --git a/webclient/room/room-controller.js b/webclient/room/room-controller.js
index 86f1379f75..a2032cf57c 100644
--- a/webclient/room/room-controller.js
+++ b/webclient/room/room-controller.js
@@ -16,6 +16,94 @@ limitations under the License.
angular.module('RoomController', ['ngSanitize'])
+.directive('ngAutoComplete', ['$timeout', function ($timeout) {
+ return function (scope, element, attrs) {
+ element.bind("keydown keypress", function (event) {
+ console.log("event: " + event.which);
+ if (event.which === 9) {
+ if (!scope.autoCompleting) { // cache our starting text
+ console.log("caching " + element[0].value);
+ scope.autoCompleteOriginal = element[0].value;
+ scope.autoCompleting = true;
+ }
+
+ if (event.shiftKey) {
+ scope.autoCompleteIndex--;
+ if (scope.autoCompleteIndex < 0) {
+ scope.autoCompleteIndex = 0;
+ }
+ }
+ else {
+ scope.autoCompleteIndex++;
+ }
+
+ var searchIndex = 0;
+ var targetIndex = scope.autoCompleteIndex;
+ var text = scope.autoCompleteOriginal;
+
+ console.log("targetIndex: " + targetIndex + ", text=" + text);
+
+ // FIXME: use the correct regexp to recognise userIDs
+ var search = /@?([a-zA-Z0-9_\-:\.]+)$/.exec(text);
+ if (targetIndex === 0) {
+ element[0].value = text;
+ }
+ else if (search && search[1]) {
+ console.log("search found: " + search);
+ var expansion;
+
+ // FIXME: could do better than linear search here
+ angular.forEach(scope.members, function(item, name) {
+ if (item.displayname && searchIndex < targetIndex) {
+ if (item.displayname.toLowerCase().indexOf(search[1].toLowerCase()) == 0) {
+ expansion = item.displayname;
+ searchIndex++;
+ }
+ }
+ });
+ if (searchIndex < targetIndex) { // then search raw mxids
+ angular.forEach(scope.members, function(item, name) {
+ if (searchIndex < targetIndex) {
+ if (name.toLowerCase().indexOf(search[1].toLowerCase()) == 1) {
+ expansion = name;
+ searchIndex++;
+ }
+ }
+ });
+ }
+
+ if (searchIndex === targetIndex) {
+ // xchat-style tab complete
+ if (search[0].length === text.length)
+ expansion += " : ";
+ else
+ expansion += " ";
+ element[0].value = text.replace(/@?([a-zA-Z0-9_\-:\.]+)$/, expansion);
+ // cancel blink
+ element[0].className = "";
+ }
+ else {
+ console.log("wrapped!");
+ element[0].className = "blink"; // XXX: slightly naughty to bypass angular
+ $timeout(function() {
+ element[0].className = "";
+ }, 150);
+ element[0].value = text;
+ scope.autoCompleteIndex = 0;
+ }
+ }
+ else {
+ scope.autoCompleteIndex = 0;
+ }
+ event.preventDefault();
+ }
+ else if (event.which != 16 && scope.autoCompleting) {
+ scope.autoCompleting = false;
+ scope.autoCompleteIndex = 0;
+ }
+ });
+ };
+}])
.controller('RoomController', ['$scope', '$http', '$timeout', '$routeParams', '$location', 'matrixService', 'eventStreamService', 'eventHandlerService',
function($scope, $http, $timeout, $routeParams, $location, matrixService, eventStreamService, eventHandlerService) {
'use strict';
@@ -31,6 +119,9 @@ angular.module('RoomController', ['ngSanitize'])
stream_failure: undefined // the response when the stream fails
};
$scope.members = {};
+ $scope.autoCompleting = false;
+ $scope.autoCompleteIndex = 0;
+ $scope.autoCompleteOriginal = "";
$scope.imageURLToSend = "";
$scope.userIDToInvite = "";
diff --git a/webclient/room/room.html b/webclient/room/room.html
index 2726188b4b..f965d13c55 100644
--- a/webclient/room/room.html
+++ b/webclient/room/room.html
@@ -16,7 +16,7 @@
<div class="userName">{{ member.displayname || member.id.substr(0, member.id.indexOf(':')) }}<wbr/>{{ member.displayname ? "" : member.id.substr(member.id.indexOf(':')) }}</div>
</td>
<td class="userPresence" ng-class="member.presenceState === 'online' ? 'online' : (member.presenceState === 'unavailable' ? 'unavailable' : '')">
- {{ member.mtime_age | duration }} {{ member.mtime_age ? "ago" : "" }}
+ {{ member.mtime_age | duration }}<br/>{{ member.mtime_age ? "ago" : "" }}
</td>
</table>
</div>
@@ -29,7 +29,7 @@
<div class="timestamp">{{ msg.content.hsob_ts | date:'MMM d HH:mm:ss' }}</div>
</td>
<td class="avatar">
- <img ng-src="{{ members[msg.user_id].avatar_url || 'img/default-profile.jpg' }}" width="32" height="32"
+ <img class="avatarImage" ng-src="{{ members[msg.user_id].avatar_url || 'img/default-profile.jpg' }}" width="32" height="32"
ng-hide="events.rooms[room_id].messages[$index - 1].user_id === msg.user_id || msg.user_id === state.user_id"/>
</td>
<td ng-class="!msg.content.membership_target ? (msg.content.msgtype === 'm.emote' ? 'emote text' : 'text') : ''">
@@ -40,7 +40,7 @@
</div>
</td>
<td class="rightBlock">
- <img ng-src="{{ members[msg.user_id].avatar_url || 'img/default-profile.jpg' }}" width="32" height="32"
+ <img class="avatarImage" ng-src="{{ members[msg.user_id].avatar_url || 'img/default-profile.jpg' }}" width="32" height="32"
ng-hide="events.rooms[room_id].messages[$index - 1].user_id === msg.user_id || msg.user_id !== state.user_id"/>
</td>
</tr>
@@ -58,7 +58,7 @@
{{ state.user_id }}
</td>
<td width="*" style="min-width: 100px">
- <input id="mainInput" ng-model="textInput" ng-enter="send()" ng-focus="true"/>
+ <input id="mainInput" ng-model="textInput" ng-enter="send()" ng-focus="true" ng-auto-complete/>
</td>
<td width="1">
<button ng-click="send()">Send</button>
|
