Update MUC subject

clientapp/pages/groupchat.js

@@ -10,7 +10,7 @@ var Message = require('../views/mucMessage');
 var MessageModel = require('../models/message');
 var embedIt = require('../helpers/embedIt');
 var htmlify = require('../helpers/htmlify');
-
+var tempSubject = '';
 
 module.exports = BasePage.extend({
     template: templates.pages.groupchat,
@@ -29,7 +29,10 @@ module.exports = BasePage.extend({
         'keydown textarea': 'handleKeyDown',
         'keyup textarea': 'handleKeyUp',
         'click .joinRoom': 'handleJoin',
-        'click .leaveRoom': 'handleLeave'
+        'click .leaveRoom': 'handleLeave',
+        'click .status': 'clickStatusChange',
+        'blur .status': 'blurStatusChange',
+        'keydown .status': 'keyDownStatusChange'
     },
     classBindings: {
         joined: '.controls'
@@ -211,6 +214,22 @@ module.exports = BasePage.extend({
     handleLeave: function () {
         this.model.leave();
     },
+    clickStatusChange: function (e) {
+        tempSubject = e.target.textContent;
+    },
+    blurStatusChange: function (e) {
+        var subject = e.target.textContent;
+        if (subject == '')
+            subject = true;
+        client.setSubject(this.model.jid, subject);
+        e.target.textContent = tempSubject;
+    },
+    keyDownStatusChange: function (e) {
+        if (e.which === 13 && !e.shiftKey) {
+            e.target.blur();
+            return false;
+        }
+    },
     appendModel: function (model, preload) {
         var self = this;
         var isGrouped = model.shouldGroupWith(this.lastModel);

clientapp/templates.js

@@ -479,7 +479,7 @@ exports.pages.chat = function anonymous(locals) {
 exports.pages.groupchat = function anonymous(locals) {
     var buf = [];
     with (locals || {}) {
-        buf.push('<section class="page chat"><section class="group conversation"><header class="online"><h1><span class="name"></span><span class="status"></span></h1><div class="controls"><button class="primary small joinRoom">Join</button><button class="secondary small leaveRoom">Leave</button></div></header><ul class="messages"></ul><ul class="groupRoster"></ul><div class="chatBox"><form><textarea name="chatInput" type="text" placeholder="Send a message..." autocomplete="off"></textarea></form></div></section></section>');
+        buf.push('<section class="page chat"><section class="group conversation"><header class="online"><h1><span class="name"></span><span contenteditable="true" class="status"></span></h1><div class="controls"><button class="primary small joinRoom">Join</button><button class="secondary small leaveRoom">Leave</button></div></header><ul class="messages"></ul><ul class="groupRoster"></ul><div class="chatBox"><form><textarea name="chatInput" type="text" placeholder="Send a message..." autocomplete="off"></textarea></form></div></section></section>');
     }
     return buf.join("");
 };

clientapp/templates/pages/groupchat.jade

@@ -3,7 +3,7 @@ section.page.chat
     header.online
       h1
         span.name
-        span.status
+        span.status(contenteditable="true")
       .controls
         button.primary.small.joinRoom Join
         button.secondary.small.leaveRoom Leave

public/css/otalk.css

@@ -1048,10 +1048,25 @@ button.secondary:hover:not(:disabled) {
   text-overflow: ellipsis;
   transition: all 0.25s;
   display: inline-block;
+  -webkit-touch-callout: initial;
+  -webkit-user-select: initial;
+  -khtml-user-select: initial;
+  -moz-user-select: initial;
+  -ms-user-select: initial;
+  user-select: initial;
+}
+.conversation header .status:empty:before {
+  content: '- No subject';
 }
 .conversation header .status:not(:empty):before {
   content: '- ';
 }
+.conversation header .status:before,
+.conversation header .status:empty:focus:before {
+  content: '-';
+  padding-left: 5px;
+  padding-right: 5px;
+}
 .conversation header .tzo:not(:empty) {
   position: absolute;
   right: 15px;

public/css/pages/chat.styl

@@ -122,10 +122,20 @@
       text-overflow: ellipsis
       transition: all .25s
       display: inline-block
+      allowselect()
+
+      &:empty:before
+        content: '- No subject'
 
       &:not(:empty):before
         content: '- '
 
+      &:before,
+      &:empty:focus:before
+        content: '-'
+        padding-left: 5px
+        padding-right: 5px
+
     .tzo:not(:empty)
       position: absolute
       right: 15px