forked from MirrorHub/synapse
Merge branch 'master' of github.com:matrix-org/synapse into develop
This commit is contained in:
commit
2ffb075772
|
@ -23,6 +23,8 @@ Accounts
|
||||||
Before you can send and receive messages, you must **register** for an account.
|
Before you can send and receive messages, you must **register** for an account.
|
||||||
If you already have an account, you must **login** into it.
|
If you already have an account, you must **login** into it.
|
||||||
|
|
||||||
|
**Try out the fiddle: http://jsfiddle.net/jrf1h02d/**
|
||||||
|
|
||||||
Registration
|
Registration
|
||||||
------------
|
------------
|
||||||
The aim of registration is to get a user ID and access token which you will need
|
The aim of registration is to get a user ID and access token which you will need
|
||||||
|
@ -76,7 +78,9 @@ Communicating
|
||||||
=============
|
=============
|
||||||
|
|
||||||
In order to communicate with another user, you must **create a room** with that
|
In order to communicate with another user, you must **create a room** with that
|
||||||
user and **send a message** to that room.
|
user and **send a message** to that room.
|
||||||
|
|
||||||
|
**Try out the fiddle: http://jsfiddle.net/jnwqcshc/**
|
||||||
|
|
||||||
Creating a room
|
Creating a room
|
||||||
---------------
|
---------------
|
||||||
|
|
17
jsfiddles/create_room_send_msg/demo.css
Normal file
17
jsfiddles/create_room_send_msg/demo.css
Normal file
|
@ -0,0 +1,17 @@
|
||||||
|
.loggedin {
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-family: monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
table
|
||||||
|
{
|
||||||
|
border-spacing:5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
th,td
|
||||||
|
{
|
||||||
|
padding:5px;
|
||||||
|
}
|
30
jsfiddles/create_room_send_msg/demo.html
Normal file
30
jsfiddles/create_room_send_msg/demo.html
Normal file
|
@ -0,0 +1,30 @@
|
||||||
|
<div>
|
||||||
|
<p>This room creation / message sending demo requires a home server to be running on http://localhost:8080</p>
|
||||||
|
</div>
|
||||||
|
<form class="loginForm">
|
||||||
|
<input type="text" id="userLogin" placeholder="Username"></input>
|
||||||
|
<input type="password" id="passwordLogin" placeholder="Password"></input>
|
||||||
|
<input type="button" class="login" value="Login"></input>
|
||||||
|
</form>
|
||||||
|
<div class="loggedin">
|
||||||
|
<form class="createRoomForm">
|
||||||
|
<input type="text" id="roomAlias" placeholder="Room alias (optional)"></input>
|
||||||
|
<input type="button" class="createRoom" value="Create Room"></input>
|
||||||
|
</form>
|
||||||
|
<form class="sendMessageForm">
|
||||||
|
<input type="text" id="roomId" placeholder="Room ID"></input>
|
||||||
|
<input type="text" id="messageBody" placeholder="Message body"></input>
|
||||||
|
<input type="button" class="sendMessage" value="Send Message"></input>
|
||||||
|
</form>
|
||||||
|
<table id="rooms">
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<th>Room ID</th>
|
||||||
|
<th>My state</th>
|
||||||
|
<th>Room Alias</th>
|
||||||
|
<th>Latest message</th>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
109
jsfiddles/create_room_send_msg/demo.js
Normal file
109
jsfiddles/create_room_send_msg/demo.js
Normal file
|
@ -0,0 +1,109 @@
|
||||||
|
var accountInfo = {};
|
||||||
|
|
||||||
|
var showLoggedIn = function(data) {
|
||||||
|
accountInfo = data;
|
||||||
|
getCurrentRoomList();
|
||||||
|
$(".loggedin").css({visibility: "visible"});
|
||||||
|
};
|
||||||
|
|
||||||
|
$('.login').live('click', function() {
|
||||||
|
var user = $("#userLogin").val();
|
||||||
|
var password = $("#passwordLogin").val();
|
||||||
|
$.ajax({
|
||||||
|
url: "http://localhost:8080/matrix/client/api/v1/login",
|
||||||
|
type: "POST",
|
||||||
|
contentType: "application/json; charset=utf-8",
|
||||||
|
data: JSON.stringify({ user: user, password: password, type: "m.login.password" }),
|
||||||
|
dataType: "json",
|
||||||
|
success: function(data) {
|
||||||
|
showLoggedIn(data);
|
||||||
|
},
|
||||||
|
error: function(err) {
|
||||||
|
alert(JSON.stringify($.parseJSON(err.responseText)));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
var getCurrentRoomList = function() {
|
||||||
|
var url = "http://localhost:8080/matrix/client/api/v1/im/sync?access_token=" + accountInfo.access_token + "&from=END&to=START&limit=1";
|
||||||
|
$.getJSON(url, function(data) {
|
||||||
|
for (var i=0; i<data.length; ++i) {
|
||||||
|
data[i].latest_message = data[i].messages.chunk[0].content.body;
|
||||||
|
addRoom(data[i]);
|
||||||
|
}
|
||||||
|
}).fail(function(err) {
|
||||||
|
alert(JSON.stringify($.parseJSON(err.responseText)));
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
$('.createRoom').live('click', function() {
|
||||||
|
var roomAlias = $("#roomAlias").val();
|
||||||
|
var data = {};
|
||||||
|
if (roomAlias.length > 0) {
|
||||||
|
data.room_alias_name = roomAlias;
|
||||||
|
}
|
||||||
|
$.ajax({
|
||||||
|
url: "http://localhost:8080/matrix/client/api/v1/rooms?access_token="+accountInfo.access_token,
|
||||||
|
type: "POST",
|
||||||
|
contentType: "application/json; charset=utf-8",
|
||||||
|
data: JSON.stringify(data),
|
||||||
|
dataType: "json",
|
||||||
|
success: function(data) {
|
||||||
|
data.membership = "join"; // you are automatically joined into every room you make.
|
||||||
|
data.latest_message = "";
|
||||||
|
addRoom(data);
|
||||||
|
},
|
||||||
|
error: function(err) {
|
||||||
|
alert(JSON.stringify($.parseJSON(err.responseText)));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
var addRoom = function(data) {
|
||||||
|
row = "<tr>" +
|
||||||
|
"<td>"+data.room_id+"</td>" +
|
||||||
|
"<td>"+data.membership+"</td>" +
|
||||||
|
"<td>"+data.room_alias+"</td>" +
|
||||||
|
"<td>"+data.latest_message+"</td>" +
|
||||||
|
"</tr>";
|
||||||
|
$("#rooms").append(row);
|
||||||
|
};
|
||||||
|
|
||||||
|
$('.sendMessage').live('click', function() {
|
||||||
|
var roomId = $("#roomId").val();
|
||||||
|
var body = $("#messageBody").val();
|
||||||
|
var msgId = $.now();
|
||||||
|
|
||||||
|
if (roomId.length === 0 || body.length === 0) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var url = "http://localhost:8080/matrix/client/api/v1/rooms/$roomid/messages/$user/$msgid?access_token=$token";
|
||||||
|
url = url.replace("$token", accountInfo.access_token);
|
||||||
|
url = url.replace("$roomid", encodeURIComponent(roomId));
|
||||||
|
url = url.replace("$user", encodeURIComponent(accountInfo.user_id));
|
||||||
|
url = url.replace("$msgid", msgId);
|
||||||
|
|
||||||
|
var data = {
|
||||||
|
msgtype: "m.text",
|
||||||
|
body: body
|
||||||
|
};
|
||||||
|
|
||||||
|
$.ajax({
|
||||||
|
url: url,
|
||||||
|
type: "PUT",
|
||||||
|
contentType: "application/json; charset=utf-8",
|
||||||
|
data: JSON.stringify(data),
|
||||||
|
dataType: "json",
|
||||||
|
success: function(data) {
|
||||||
|
$("#messageBody").val("");
|
||||||
|
// wipe the table and reload it. Using the event stream would be the best
|
||||||
|
// solution but that is out of scope of this fiddle.
|
||||||
|
$("#rooms").find("tr:gt(0)").remove();
|
||||||
|
getCurrentRoomList();
|
||||||
|
},
|
||||||
|
error: function(err) {
|
||||||
|
alert(JSON.stringify($.parseJSON(err.responseText)));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
38
webclient/app-directive.js
Normal file
38
webclient/app-directive.js
Normal file
|
@ -0,0 +1,38 @@
|
||||||
|
/*
|
||||||
|
Copyright 2014 matrix.org
|
||||||
|
|
||||||
|
Licensed under the Apache License, Version 2.0 (the "License");
|
||||||
|
you may not use this file except in compliance with the License.
|
||||||
|
You may obtain a copy of the License at
|
||||||
|
|
||||||
|
http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
|
||||||
|
Unless required by applicable law or agreed to in writing, software
|
||||||
|
distributed under the License is distributed on an "AS IS" BASIS,
|
||||||
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||||
|
See the License for the specific language governing permissions and
|
||||||
|
limitations under the License.
|
||||||
|
*/
|
||||||
|
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
angular.module('matrixWebClient')
|
||||||
|
.directive('ngEnter', function () {
|
||||||
|
return function (scope, element, attrs) {
|
||||||
|
element.bind("keydown keypress", function (event) {
|
||||||
|
if(event.which === 13) {
|
||||||
|
scope.$apply(function () {
|
||||||
|
scope.$eval(attrs.ngEnter);
|
||||||
|
});
|
||||||
|
event.preventDefault();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
})
|
||||||
|
.directive('ngFocus', ['$timeout', function($timeout) {
|
||||||
|
return {
|
||||||
|
link: function(scope, element, attr) {
|
||||||
|
$timeout(function() { element[0].focus(); }, 0);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}]);
|
79
webclient/app-filter.js
Normal file
79
webclient/app-filter.js
Normal file
|
@ -0,0 +1,79 @@
|
||||||
|
/*
|
||||||
|
Copyright 2014 matrix.org
|
||||||
|
|
||||||
|
Licensed under the Apache License, Version 2.0 (the "License");
|
||||||
|
you may not use this file except in compliance with the License.
|
||||||
|
You may obtain a copy of the License at
|
||||||
|
|
||||||
|
http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
|
||||||
|
Unless required by applicable law or agreed to in writing, software
|
||||||
|
distributed under the License is distributed on an "AS IS" BASIS,
|
||||||
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||||
|
See the License for the specific language governing permissions and
|
||||||
|
limitations under the License.
|
||||||
|
*/
|
||||||
|
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
angular.module('matrixWebClient')
|
||||||
|
.filter('duration', function() {
|
||||||
|
return function(time) {
|
||||||
|
if (!time) return;
|
||||||
|
var t = parseInt(time / 1000);
|
||||||
|
var s = t % 60;
|
||||||
|
var m = parseInt(t / 60) % 60;
|
||||||
|
var h = parseInt(t / (60 * 60)) % 24;
|
||||||
|
var d = parseInt(t / (60 * 60 * 24));
|
||||||
|
if (t < 60) {
|
||||||
|
return s + "s";
|
||||||
|
}
|
||||||
|
if (t < 60 * 60) {
|
||||||
|
return m + "m "; // + s + "s";
|
||||||
|
}
|
||||||
|
if (t < 24 * 60 * 60) {
|
||||||
|
return h + "h "; // + m + "m";
|
||||||
|
}
|
||||||
|
return d + "d "; // + h + "h";
|
||||||
|
};
|
||||||
|
})
|
||||||
|
.filter('orderMembersList', function($sce) {
|
||||||
|
return function(members) {
|
||||||
|
var filtered = [];
|
||||||
|
|
||||||
|
var displayNames = {};
|
||||||
|
angular.forEach(members, function(value, key) {
|
||||||
|
value["id"] = key;
|
||||||
|
filtered.push( value );
|
||||||
|
if (value["displayname"]) {
|
||||||
|
if (!displayNames[value["displayname"]]) {
|
||||||
|
displayNames[value["displayname"]] = [];
|
||||||
|
}
|
||||||
|
displayNames[value["displayname"]].push(key);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// FIXME: we shouldn't disambiguate displayNames on every orderMembersList
|
||||||
|
// invocation but keep track of duplicates incrementally somewhere
|
||||||
|
angular.forEach(displayNames, function(value, key) {
|
||||||
|
if (value.length > 1) {
|
||||||
|
// console.log(key + ": " + value);
|
||||||
|
for (i=0; i < value.length; i++) {
|
||||||
|
var v = value[i];
|
||||||
|
members[v].displayname += " (" + v + ")";
|
||||||
|
// console.log(v + " " + members[v]);
|
||||||
|
};
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
filtered.sort(function (a, b) {
|
||||||
|
return ((a["mtime_age"] || 10e10) > (b["mtime_age"] || 10e10) ? 1 : -1);
|
||||||
|
});
|
||||||
|
return filtered;
|
||||||
|
};
|
||||||
|
})
|
||||||
|
.filter('unsafe', ['$sce', function($sce) {
|
||||||
|
return function(text) {
|
||||||
|
return $sce.trustAsHtml(text);
|
||||||
|
};
|
||||||
|
}]);
|
|
@ -83,84 +83,3 @@ matrixWebClient.run(['$location', 'matrixService', 'eventStreamService', functio
|
||||||
eventStreamService.resume();
|
eventStreamService.resume();
|
||||||
}
|
}
|
||||||
}]);
|
}]);
|
||||||
|
|
||||||
matrixWebClient
|
|
||||||
.directive('ngEnter', function () {
|
|
||||||
return function (scope, element, attrs) {
|
|
||||||
element.bind("keydown keypress", function (event) {
|
|
||||||
if(event.which === 13) {
|
|
||||||
scope.$apply(function () {
|
|
||||||
scope.$eval(attrs.ngEnter);
|
|
||||||
});
|
|
||||||
event.preventDefault();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
})
|
|
||||||
.directive('ngFocus', ['$timeout', function($timeout) {
|
|
||||||
return {
|
|
||||||
link: function(scope, element, attr) {
|
|
||||||
$timeout(function() { element[0].focus() }, 0);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}])
|
|
||||||
.filter('duration', function() {
|
|
||||||
return function(time) {
|
|
||||||
if (!time) return;
|
|
||||||
var t = parseInt(time / 1000);
|
|
||||||
var s = t % 60;
|
|
||||||
var m = parseInt(t / 60) % 60;
|
|
||||||
var h = parseInt(t / (60 * 60)) % 24;
|
|
||||||
var d = parseInt(t / (60 * 60 * 24));
|
|
||||||
if (t < 60) {
|
|
||||||
return s + "s"
|
|
||||||
}
|
|
||||||
if (t < 60 * 60) {
|
|
||||||
return m + "m "; // + s + "s";
|
|
||||||
}
|
|
||||||
if (t < 24 * 60 * 60) {
|
|
||||||
return h + "h "; // + m + "m";
|
|
||||||
}
|
|
||||||
return d + "d "; // + h + "h";
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.filter('orderMembersList', function($sce) {
|
|
||||||
return function(members) {
|
|
||||||
var filtered = [];
|
|
||||||
|
|
||||||
var displayNames = {};
|
|
||||||
angular.forEach(members, function(value, key) {
|
|
||||||
value["id"] = key;
|
|
||||||
filtered.push( value );
|
|
||||||
if (value["displayname"]) {
|
|
||||||
if (!displayNames[value["displayname"]]) {
|
|
||||||
displayNames[value["displayname"]] = [];
|
|
||||||
}
|
|
||||||
displayNames[value["displayname"]].push(key);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// FIXME: we shouldn't disambiguate displayNames on every orderMembersList
|
|
||||||
// invocation but keep track of duplicates incrementally somewhere
|
|
||||||
angular.forEach(displayNames, function(value, key) {
|
|
||||||
if (value.length > 1) {
|
|
||||||
// console.log(key + ": " + value);
|
|
||||||
for (i=0; i < value.length; i++) {
|
|
||||||
var v = value[i];
|
|
||||||
members[v].displayname += " (" + v + ")";
|
|
||||||
// console.log(v + " " + members[v]);
|
|
||||||
};
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
filtered.sort(function (a, b) {
|
|
||||||
return ((a["mtime_age"] || 10e10) > (b["mtime_age"] || 10e10) ? 1 : -1);
|
|
||||||
});
|
|
||||||
return filtered;
|
|
||||||
};
|
|
||||||
})
|
|
||||||
.filter('unsafe', ['$sce', function($sce) {
|
|
||||||
return function(text) {
|
|
||||||
return $sce.trustAsHtml(text);
|
|
||||||
};
|
|
||||||
}]);
|
|
||||||
|
|
|
@ -13,8 +13,11 @@
|
||||||
<script type='text/javascript' src='js/ng-infinite-scroll-matrix.js'></script>
|
<script type='text/javascript' src='js/ng-infinite-scroll-matrix.js'></script>
|
||||||
<script src="app.js"></script>
|
<script src="app.js"></script>
|
||||||
<script src="app-controller.js"></script>
|
<script src="app-controller.js"></script>
|
||||||
|
<script src="app-directive.js"></script>
|
||||||
|
<script src="app-filter.js"></script>
|
||||||
<script src="login/login-controller.js"></script>
|
<script src="login/login-controller.js"></script>
|
||||||
<script src="room/room-controller.js"></script>
|
<script src="room/room-controller.js"></script>
|
||||||
|
<script src="room/room-directive.js"></script>
|
||||||
<script src="rooms/rooms-controller.js"></script>
|
<script src="rooms/rooms-controller.js"></script>
|
||||||
<script src="user/user-controller.js"></script>
|
<script src="user/user-controller.js"></script>
|
||||||
<script src="components/matrix/matrix-service.js"></script>
|
<script src="components/matrix/matrix-service.js"></script>
|
||||||
|
|
|
@ -15,95 +15,6 @@ limitations under the License.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
angular.module('RoomController', ['ngSanitize'])
|
angular.module('RoomController', ['ngSanitize'])
|
||||||
|
|
||||||
.directive('autoComplete', ['$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',
|
.controller('RoomController', ['$scope', '$http', '$timeout', '$routeParams', '$location', 'matrixService', 'eventStreamService', 'eventHandlerService',
|
||||||
function($scope, $http, $timeout, $routeParams, $location, matrixService, eventStreamService, eventHandlerService) {
|
function($scope, $http, $timeout, $routeParams, $location, matrixService, eventStreamService, eventHandlerService) {
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
134
webclient/room/room-directive.js
Normal file
134
webclient/room/room-directive.js
Normal file
|
@ -0,0 +1,134 @@
|
||||||
|
/*
|
||||||
|
Copyright 2014 matrix.org
|
||||||
|
|
||||||
|
Licensed under the Apache License, Version 2.0 (the "License");
|
||||||
|
you may not use this file except in compliance with the License.
|
||||||
|
You may obtain a copy of the License at
|
||||||
|
|
||||||
|
http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
|
||||||
|
Unless required by applicable law or agreed to in writing, software
|
||||||
|
distributed under the License is distributed on an "AS IS" BASIS,
|
||||||
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||||
|
See the License for the specific language governing permissions and
|
||||||
|
limitations under the License.
|
||||||
|
*/
|
||||||
|
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
angular.module('RoomController')
|
||||||
|
.directive('autoComplete', ['$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;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
}])
|
||||||
|
|
||||||
|
// A directive to anchor the scroller position at the bottom when the browser is resizing.
|
||||||
|
// When the screen resizes, the bottom of the element remains the same, not the top.
|
||||||
|
.directive('keepScroll', ['$window', function($window) {
|
||||||
|
return {
|
||||||
|
link: function(scope, elem, attrs) {
|
||||||
|
|
||||||
|
scope.windowHeight = $window.innerHeight;
|
||||||
|
|
||||||
|
// Listen to window size change
|
||||||
|
angular.element($window).bind('resize', function() {
|
||||||
|
|
||||||
|
// If the scroller is scrolled to the bottom, there is nothing to do.
|
||||||
|
// The browser will move it as expected
|
||||||
|
if (elem.scrollTop() + elem.height() !== elem[0].scrollHeight) {
|
||||||
|
// Else, move the scroller position according to the window height change delta
|
||||||
|
var windowHeightDelta = $window.innerHeight - scope.windowHeight;
|
||||||
|
elem.scrollTop(elem.scrollTop() - windowHeightDelta);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Store the new window height for the next screen size change
|
||||||
|
scope.windowHeight = $window.innerHeight;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}]);
|
||||||
|
|
Loading…
Reference in a new issue