From 9ca5bc7892410ed396d4cab8e30a1fc4b5f41513 Mon Sep 17 00:00:00 2001 From: Emmanuel ROHEE Date: Tue, 19 Aug 2014 18:29:41 +0200 Subject: [PATCH 1/4] keepScroll: a directive to anchor the scroller position at the bottom when the browser is resizing --- webclient/room/room-controller.js | 27 +++++++++++++++++++++++++++ 1 file changed, 27 insertions(+) diff --git a/webclient/room/room-controller.js b/webclient/room/room-controller.js index b585e338e..0ab2fc20a 100644 --- a/webclient/room/room-controller.js +++ b/webclient/room/room-controller.js @@ -104,6 +104,33 @@ angular.module('RoomController', ['ngSanitize']) }); }; }]) + +// 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; + }); + } + }; +}]) + .controller('RoomController', ['$scope', '$http', '$timeout', '$routeParams', '$location', 'matrixService', 'eventStreamService', 'eventHandlerService', function($scope, $http, $timeout, $routeParams, $location, matrixService, eventStreamService, eventHandlerService) { 'use strict'; From 89ed81bb1f4fec8e20fb9d518d440307dacc55be Mon Sep 17 00:00:00 2001 From: Kegan Dougal Date: Tue, 19 Aug 2014 17:34:31 +0100 Subject: [PATCH 2/4] More fiddles, more fun! --- jsfiddles/create_room_send_msg/demo.css | 17 ++++ jsfiddles/create_room_send_msg/demo.html | 30 +++++++ jsfiddles/create_room_send_msg/demo.js | 109 +++++++++++++++++++++++ 3 files changed, 156 insertions(+) create mode 100644 jsfiddles/create_room_send_msg/demo.css create mode 100644 jsfiddles/create_room_send_msg/demo.html create mode 100644 jsfiddles/create_room_send_msg/demo.js diff --git a/jsfiddles/create_room_send_msg/demo.css b/jsfiddles/create_room_send_msg/demo.css new file mode 100644 index 000000000..48a55f372 --- /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 000000000..31c26c763 --- /dev/null +++ b/jsfiddles/create_room_send_msg/demo.html @@ -0,0 +1,30 @@ +
+

This room creation / message sending demo requires a home server to be running on http://localhost:8080

+
+
+ + + +
+
+
+ + +
+
+ + + +
+ + + + + + + + + +
Room IDMy stateRoom AliasLatest message
+
+ diff --git a/jsfiddles/create_room_send_msg/demo.js b/jsfiddles/create_room_send_msg/demo.js new file mode 100644 index 000000000..c17eb26b9 --- /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 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 = "" + + ""+data.room_id+"" + + ""+data.membership+"" + + ""+data.room_alias+"" + + ""+data.latest_message+"" + + ""; + $("#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))); + } + }); +}); From f4839ea042314ac1813d01884aa881e218864861 Mon Sep 17 00:00:00 2001 From: Kegan Dougal Date: Tue, 19 Aug 2014 17:48:49 +0100 Subject: [PATCH 3/4] Add some static fiddles for now (will migrate to github paths eventually) --- docs/client-server/howto.rst | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/docs/client-server/howto.rst b/docs/client-server/howto.rst index 57a2d2424..433277000 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 --------------- From ecce301632ffcf08141f4faa3588eaf05a2de192 Mon Sep 17 00:00:00 2001 From: Emmanuel ROHEE Date: Wed, 20 Aug 2014 11:28:36 +0200 Subject: [PATCH 4/4] File organisation sanity: put directives and filters into dedicated files --- webclient/app-directive.js | 38 +++++++++ webclient/app-filter.js | 79 ++++++++++++++++++ webclient/app.js | 81 ------------------ webclient/index.html | 3 + webclient/room/room-controller.js | 116 -------------------------- webclient/room/room-directive.js | 134 ++++++++++++++++++++++++++++++ 6 files changed, 254 insertions(+), 197 deletions(-) create mode 100644 webclient/app-directive.js create mode 100644 webclient/app-filter.js create mode 100644 webclient/room/room-directive.js diff --git a/webclient/app-directive.js b/webclient/app-directive.js new file mode 100644 index 000000000..01f60fdad --- /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 000000000..64c3bb04d --- /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 576912be4..f27ebedc6 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 51f6ff1f4..a7e9cd934 100644 --- a/webclient/index.html +++ b/webclient/index.html @@ -13,8 +13,11 @@ + + + diff --git a/webclient/room/room-controller.js b/webclient/room/room-controller.js index 0ab2fc20a..364ca4151 100644 --- a/webclient/room/room-controller.js +++ b/webclient/room/room-controller.js @@ -15,122 +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; - } - }); - }; -}]) - -// 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; - }); - } - }; -}]) - .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 000000000..94655336d --- /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; + }); + } + }; +}]); +