Merge branch 'master' of github.com:matrix-org/synapse into develop

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
 ---------------

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;
+}

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>
+    

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)));  
+        }
+    }); 
+});

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);
+        }
+    };
+}]);

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);
+    };
+}]);

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);
-        };
-    }]);

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>

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';

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;
+            });
+        }
+    };
+}]);
+