diff --git a/docs/client-server/howto.rst b/docs/client-server/howto.rst
index 57a2d2424c..433277000d 100644
--- a/docs/client-server/howto.rst
+++ b/docs/client-server/howto.rst
@@ -23,6 +23,8 @@ Accounts
Before you can send and receive messages, you must **register** for an account.
If you already have an account, you must **login** into it.
+**Try out the fiddle: http://jsfiddle.net/jrf1h02d/**
+
Registration
------------
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
-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
---------------
diff --git a/jsfiddles/create_room_send_msg/demo.css b/jsfiddles/create_room_send_msg/demo.css
new file mode 100644
index 0000000000..48a55f372d
--- /dev/null
+++ b/jsfiddles/create_room_send_msg/demo.css
@@ -0,0 +1,17 @@
+.loggedin {
+ visibility: hidden;
+}
+
+p {
+ font-family: monospace;
+}
+
+table
+{
+ border-spacing:5px;
+}
+
+th,td
+{
+ padding:5px;
+}
diff --git a/jsfiddles/create_room_send_msg/demo.html b/jsfiddles/create_room_send_msg/demo.html
new file mode 100644
index 0000000000..31c26c7631
--- /dev/null
+++ b/jsfiddles/create_room_send_msg/demo.html
@@ -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>
+
diff --git a/jsfiddles/create_room_send_msg/demo.js b/jsfiddles/create_room_send_msg/demo.js
new file mode 100644
index 0000000000..c17eb26b98
--- /dev/null
+++ b/jsfiddles/create_room_send_msg/demo.js
@@ -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)));
+ }
+ });
+});
diff --git a/webclient/app-directive.js b/webclient/app-directive.js
new file mode 100644
index 0000000000..01f60fdadf
--- /dev/null
+++ b/webclient/app-directive.js
@@ -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);
+ }
+ };
+}]);
\ No newline at end of file
diff --git a/webclient/app-filter.js b/webclient/app-filter.js
new file mode 100644
index 0000000000..64c3bb04de
--- /dev/null
+++ b/webclient/app-filter.js
@@ -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);
+ };
+}]);
diff --git a/webclient/app.js b/webclient/app.js
index 576912be46..f27ebedc6f 100644
--- a/webclient/app.js
+++ b/webclient/app.js
@@ -83,84 +83,3 @@ matrixWebClient.run(['$location', 'matrixService', 'eventStreamService', functio
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);
- };
- }]);
diff --git a/webclient/index.html b/webclient/index.html
index 51f6ff1f4d..a7e9cd9341 100644
--- a/webclient/index.html
+++ b/webclient/index.html
@@ -13,8 +13,11 @@
<script type='text/javascript' src='js/ng-infinite-scroll-matrix.js'></script>
<script src="app.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="room/room-controller.js"></script>
+ <script src="room/room-directive.js"></script>
<script src="rooms/rooms-controller.js"></script>
<script src="user/user-controller.js"></script>
<script src="components/matrix/matrix-service.js"></script>
diff --git a/webclient/room/room-controller.js b/webclient/room/room-controller.js
index b585e338ed..364ca41510 100644
--- a/webclient/room/room-controller.js
+++ b/webclient/room/room-controller.js
@@ -15,95 +15,6 @@ limitations under the License.
*/
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',
function($scope, $http, $timeout, $routeParams, $location, matrixService, eventStreamService, eventHandlerService) {
'use strict';
diff --git a/webclient/room/room-directive.js b/webclient/room/room-directive.js
new file mode 100644
index 0000000000..94655336df
--- /dev/null
+++ b/webclient/room/room-directive.js
@@ -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;
+ });
+ }
+ };
+}]);
+
|
