diff --git a/jsfiddles/event_stream/demo.css b/jsfiddles/event_stream/demo.css
new file mode 100644
index 0000000000..48a55f372d
--- /dev/null
+++ b/jsfiddles/event_stream/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/event_stream/demo.html b/jsfiddles/event_stream/demo.html
new file mode 100644
index 0000000000..ee4fc3ea68
--- /dev/null
+++ b/jsfiddles/event_stream/demo.html
@@ -0,0 +1,23 @@
+<div>
+ <p>This event stream 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="sendMessageForm">
+ <input type="button" class="sendMessage" value="Send random message"></input>
+ </form>
+ <p id="streamErrorText"></p>
+ <table id="rooms">
+ <tbody>
+ <tr>
+ <th>Room ID</th>
+ <th>Latest message</th>
+ </tr>
+ </tbody>
+ </table>
+</div>
+
diff --git a/jsfiddles/event_stream/demo.js b/jsfiddles/event_stream/demo.js
new file mode 100644
index 0000000000..b657b809e2
--- /dev/null
+++ b/jsfiddles/event_stream/demo.js
@@ -0,0 +1,142 @@
+var accountInfo = {};
+
+var eventStreamInfo = {
+ from: "END"
+};
+
+var roomInfo = [];
+
+var longpollEventStream = function() {
+ var url = "http://localhost:8080/matrix/client/api/v1/events?access_token=$token&from=$from";
+ url = url.replace("$token", accountInfo.access_token);
+ url = url.replace("$from", eventStreamInfo.from);
+
+ $.getJSON(url, function(data) {
+ eventStreamInfo.from = data.end;
+
+ var hasNewLatestMessage = false;
+ for (var i=0; i<data.chunk.length; ++i) {
+ if (data.chunk[i].type === "m.room.message") {
+ for (var j=0; j<roomInfo.length; ++j) {
+ if (roomInfo[j].room_id === data.chunk[i].room_id) {
+ roomInfo[j].latest_message = data.chunk[i].content.body;
+ hasNewLatestMessage = true;
+ }
+ }
+ }
+ }
+
+ if (hasNewLatestMessage) {
+ setRooms(roomInfo);
+ }
+ $("#streamErrorText").text("");
+ longpollEventStream();
+ }).fail(function(err) {
+ $("#streamErrorText").text("Event stream error: "+JSON.stringify($.parseJSON(err.responseText)));
+ setTimeout(longpollEventStream, 5000);
+ });
+};
+
+var showLoggedIn = function(data) {
+ accountInfo = data;
+ longpollEventStream();
+ 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) {
+ $("#rooms").find("tr:gt(0)").remove();
+ showLoggedIn(data);
+ },
+ error: function(err) {
+ alert(JSON.stringify($.parseJSON(err.responseText)));
+ }
+ });
+});
+
+var getCurrentRoomList = function() {
+ $("#roomId").val("");
+ 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) {
+ if ("messages" in data[i]) {
+ data[i].latest_message = data[i].messages.chunk[0].content.body;
+ }
+ }
+ roomInfo = data;
+ setRooms(roomInfo);
+ }).fail(function(err) {
+ alert(JSON.stringify($.parseJSON(err.responseText)));
+ });
+};
+
+$('.sendMessage').live('click', function() {
+ if (roomInfo.length === 0) {
+ alert("There is no room to send a message to!");
+ return;
+ }
+
+ var index = Math.floor(Math.random() * roomInfo.length);
+
+ sendMessage(roomInfo[index].room_id);
+});
+
+var sendMessage = function(roomId) {
+ var body = "jsfiddle message @" + $.now();
+ var msgId = $.now();
+
+ if (roomId.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("");
+ },
+ error: function(err) {
+ alert(JSON.stringify($.parseJSON(err.responseText)));
+ }
+ });
+};
+
+var setRooms = function(roomList) {
+ // wipe existing entries
+ $("#rooms").find("tr:gt(0)").remove();
+
+ var rows = "";
+ for (var i=0; i<roomList.length; ++i) {
+ row = "<tr>" +
+ "<td>"+roomList[i].room_id+"</td>" +
+ "<td>"+roomList[i].latest_message+"</td>" +
+ "</tr>";
+ rows += row;
+ }
+
+ $("#rooms").append(rows);
+};
+
diff --git a/jsfiddles/room_memberships/demo.css b/jsfiddles/room_memberships/demo.css
new file mode 100644
index 0000000000..48a55f372d
--- /dev/null
+++ b/jsfiddles/room_memberships/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/room_memberships/demo.html b/jsfiddles/room_memberships/demo.html
new file mode 100644
index 0000000000..96232e827a
--- /dev/null
+++ b/jsfiddles/room_memberships/demo.html
@@ -0,0 +1,37 @@
+<div>
+ <p>This room membership 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="button" class="createRoom" value="Create Room"></input>
+ </form>
+ <form class="changeMembershipForm">
+ <input type="text" id="roomId" placeholder="Room ID"></input>
+ <input type="text" id="targetUser" placeholder="Target User ID"></input>
+ <select id="membership">
+ <option value="invite">Invite</option>
+ <option value="join">Join</option>
+ <option value="leave">Leave</option>
+ </select>
+ <input type="button" class="changeMembership" value="Change Membership"></input>
+ </form>
+ <form class="joinAliasForm">
+ <input type="text" id="roomAlias" placeholder="Room Alias (#name:domain)"></input>
+ <input type="button" class="joinAlias" value="Join via Alias"></input>
+ </form>
+ <table id="rooms">
+ <tbody>
+ <tr>
+ <th>Room ID</th>
+ <th>My state</th>
+ <th>Room Alias</th>
+ </tr>
+ </tbody>
+ </table>
+</div>
+
diff --git a/jsfiddles/room_memberships/demo.js b/jsfiddles/room_memberships/demo.js
new file mode 100644
index 0000000000..b3ce0f0e33
--- /dev/null
+++ b/jsfiddles/room_memberships/demo.js
@@ -0,0 +1,139 @@
+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) {
+ $("#rooms").find("tr:gt(0)").remove();
+ showLoggedIn(data);
+ },
+ error: function(err) {
+ alert(JSON.stringify($.parseJSON(err.responseText)));
+ }
+ });
+});
+
+var getCurrentRoomList = function() {
+ $("#roomId").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();
+
+ 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) {
+ addRoom(data[i]);
+ }
+ }).fail(function(err) {
+ alert(JSON.stringify($.parseJSON(err.responseText)));
+ });
+};
+
+$('.createRoom').live('click', function() {
+ var data = {};
+ $.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>" +
+ "</tr>";
+ $("#rooms").append(row);
+};
+
+$('.changeMembership').live('click', function() {
+ var roomId = $("#roomId").val();
+ var member = $("#targetUser").val();
+ var membership = $("#membership").val();
+
+ if (roomId.length === 0) {
+ return;
+ }
+
+ var url = "http://localhost:8080/matrix/client/api/v1/rooms/$roomid/members/$user/state?access_token=$token";
+ url = url.replace("$token", accountInfo.access_token);
+ url = url.replace("$roomid", encodeURIComponent(roomId));
+ url = url.replace("$user", encodeURIComponent(member));
+
+ if (membership === "leave") {
+ $.ajax({
+ url: url,
+ type: "DELETE",
+ contentType: "application/json; charset=utf-8",
+ dataType: "json",
+ success: function(data) {
+ getCurrentRoomList();
+ },
+ error: function(err) {
+ alert(JSON.stringify($.parseJSON(err.responseText)));
+ }
+ });
+ }
+ else {
+ var data = {
+ membership: membership
+ };
+
+ $.ajax({
+ url: url,
+ type: "PUT",
+ contentType: "application/json; charset=utf-8",
+ data: JSON.stringify(data),
+ dataType: "json",
+ success: function(data) {
+ getCurrentRoomList();
+ },
+ error: function(err) {
+ alert(JSON.stringify($.parseJSON(err.responseText)));
+ }
+ });
+ }
+});
+
+$('.joinAlias').live('click', function() {
+ var roomAlias = $("#roomAlias").val();
+ var url = "http://localhost:8080/matrix/client/api/v1/join/$roomalias?access_token=$token";
+ url = url.replace("$token", accountInfo.access_token);
+ url = url.replace("$roomalias", encodeURIComponent(roomAlias));
+ $.ajax({
+ url: url,
+ type: "PUT",
+ contentType: "application/json; charset=utf-8",
+ data: JSON.stringify({}),
+ dataType: "json",
+ success: function(data) {
+ getCurrentRoomList();
+ },
+ error: function(err) {
+ alert(JSON.stringify($.parseJSON(err.responseText)));
+ }
+ });
+});
|
