Add ability to set topic by double-clicking on the topic text then hitting enter.

webclient/app.css

@@ -297,9 +297,14 @@ a:active  { color: #000; }
     font-size: 13px;
 }
 
+.roomTopicInput {
+    width: 100%;
+}
+
 .roomHeaderInfo {
     float: right;
     margin-top: 15px;
+    width: 50%;
 }
 
 /*** Participant list ***/

webclient/components/matrix/event-handler-service.js

@@ -149,6 +149,7 @@ angular.module('eventHandlerService', [])
         $rootScope.$broadcast(NAME_EVENT, event, isLiveEvent);
     };
     
+    // TODO: Can this just be a generic "I am a room state event, can haz store?"
     var handleRoomTopic = function(event, isLiveEvent) {
         console.log("handleRoomTopic live="+isLiveEvent);
 

webclient/components/matrix/matrix-service.js

@@ -235,6 +235,25 @@ angular.module('matrixService', [])
 
             return doRequest("GET", path, undefined, {});
         },
+        
+        setTopic: function(room_id, topic) {
+            var data = {
+                topic: topic
+            };
+            return this.sendStateEvent(room_id, "m.room.topic", data);
+        },
+        
+        
+        sendStateEvent: function(room_id, eventType, content, state_key) {
+            var path = "/rooms/$room_id/state/"+eventType;
+            if (state_key !== undefined) {
+                path += "/" + state_key;
+            }
+            room_id = encodeURIComponent(room_id);
+            path = path.replace("$room_id", room_id);
+
+            return doRequest("PUT", path, undefined, content);
+        },
 
         sendEvent: function(room_id, eventType, txn_id, content) {
             // The REST path spec

webclient/room/room-controller.js

@@ -42,6 +42,31 @@ angular.module('RoomController', ['ngSanitize', 'matrixFilter', 'mFileInput'])
     $scope.imageURLToSend = "";
     $scope.userIDToInvite = "";
     
+    // vars and functions for updating the topic
+    $scope.topic = {
+        isEditing: false,
+        newTopicText: "",
+        editTopic: function() {
+            if ($scope.topic.isEditing) {
+                console.log("Warning: Already editing topic.");
+                return;
+            }
+            $scope.topic.newTopicText = $rootScope.events.rooms[$scope.room_id]['m.room.topic'].content.topic;
+            $scope.topic.isEditing = true;
+        },
+        updateTopic: function() {
+            console.log("Updating topic to "+$scope.topic.newTopicText);
+            matrixService.setTopic($scope.room_id, $scope.topic.newTopicText);
+            $scope.topic.isEditing = false;
+        },
+        cancelEdit: function() {
+            $scope.topic.isEditing = false;
+        }
+    };
+    
+    
+    
+    
     var scrollToBottom = function(force) {
         console.log("Scrolling to bottom");
         

webclient/room/room.html

@@ -7,7 +7,15 @@
                 {{ room_id  | mRoomName }}
             </div>
             <div id="roomTopic" ng-show="events.rooms[room_id]['m.room.topic'].content.topic">
-                {{ events.rooms[room_id]['m.room.topic'].content.topic }}
+                <div ng-hide="topic.isEditing" ng-dblclick="topic.editTopic()">
+                    {{ events.rooms[room_id]['m.room.topic'].content.topic | limitTo: 200}}
+                </div>
+                
+                <form ng-submit="topic.updateTopic()" ng-show="topic.isEditing" class="roomTopicForm">
+                    <input ng-model="topic.newTopicText" ng-blur="topic.cancelEdit()" class="roomTopicInput" 
+                    autofocus />
+                </form>
+                
             </div>
         </div>
     </div>