Add nickname to chat message when clicking on room occupant.

Allows you to easily mention someone in your message.

README.md

@@ -10,8 +10,8 @@ to, either your own, or a public one.
 
 ## Demo
 
-A live demo is available at [https://conversejs.org](https://conversejs.org)
-A demo showing anonymous login is available at [https://conversejs.org/demo/anonymous.html](https://conversejs.org/demo/anonymous.html)
+- A live demo is available at [https://conversejs.org](https://conversejs.org)
+- A demo showing anonymous login is available at [https://conversejs.org/demo/anonymous.html](https://conversejs.org/demo/anonymous.html)
 
 ## Documentation
 

css/converse.css

@@ -2044,6 +2044,8 @@
             text-overflow: ellipsis;
             white-space: nowrap;
             width: 100px; }
+            #conversejs .chatroom .box-flyout .chatroom-body .occupants .occupant-list li.occupant {
+              cursor: pointer; }
             #conversejs .chatroom .box-flyout .chatroom-body .occupants .occupant-list li.moderator {
               color: #D24E2B; }
       #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container {

docs/CHANGES.md

@@ -5,6 +5,8 @@
   [jcbrand]
 - Check whether the user has a reserved nickname before entering a room, and if so,
   use it. [jcbrand]
+- Mention someone in your chat room message by clicking on their name in the occupants
+  list. [jcbrand]
 
 ## 1.0.4 (2016-07-26)
 

sass/_chatrooms.scss

@@ -109,6 +109,9 @@
                             text-overflow: ellipsis;
                             white-space: nowrap;
                             width: 100px;
+                            &.occupant {
+                                cursor: pointer;
+                            }
                             &.moderator {
                                 color: $moderator-color;
                             }

spec/chatroom.js

@@ -242,7 +242,7 @@
                 expect($(occupant).first().text()).toBe("dummy");
                 expect($(occupant).last().text()).toBe("moderatorman");
                 expect($(occupant).last().attr('class').indexOf('moderator')).not.toBe(-1);
-                expect($(occupant).last().attr('title')).toBe('This user is a moderator');
+                expect($(occupant).last().attr('title')).toBe('This user is a moderator. Click to mention this user in your message.');
             });
 
             it("will use the user's reserved nickname, if it exists", function () {

src/converse-chatview.js

@@ -551,17 +551,21 @@
                     return this;
                 },
 
+                insertIntoTextArea: function (value) {
+                    var $textbox = this.$el.find('textarea.chat-textarea');
+                    var existing = $textbox.val();
+                    if (existing && (existing[existing.length-1] !== ' ')) {
+                        existing = existing + ' ';
+                    }
+                    $textbox.focus().val(existing+value+' ');
+                },
+
                 insertEmoticon: function (ev) {
                     ev.stopPropagation();
                     this.$el.find('.toggle-smiley ul').slideToggle(200);
-                    var $textbox = this.$el.find('textarea.chat-textarea');
-                    var value = $textbox.val();
                     var $target = $(ev.target);
                     $target = $target.is('a') ? $target : $target.children('a');
-                    if (value && (value[value.length-1] !== ' ')) {
-                        value = value + ' ';
-                    }
-                    $textbox.focus().val(value+$target.data('emoticon')+' ');
+                    this.insertIntoTextArea($target.data('emoticon'));
                 },
 
                 toggleEmoticonMenu: function (ev) {

src/converse-muc.js

@@ -186,6 +186,7 @@
                     'click .toggle-call': 'toggleCall',
                     'click .toggle-occupants a': 'toggleOccupants',
                     'click .new-msgs-indicator': 'viewUnreadMessages',
+                    'click .occupant': 'onOccupantClicked',
                     'keypress textarea.chat-textarea': 'keyPressed'
                 },
 
@@ -284,6 +285,13 @@
                     }
                 },
 
+                onOccupantClicked: function (ev) {
+                    /* When an occupant is clicked, insert their nickname into
+                     * the chat textarea input.
+                     */
+                    this.insertIntoTextArea(ev.target.textContent);
+                },
+
                 directInvite: function (recipient, reason) {
                     var attrs = {
                         xmlns: 'jabber:x:conference',
@@ -1032,13 +1040,15 @@
                     this.model.on('change', this.render, this);
                     this.model.on('destroy', this.destroy, this);
                 },
+
                 render: function () {
                     var new_el = converse.templates.occupant(
                         _.extend(
                             this.model.toJSON(), {
-                                'desc_moderator': __('This user is a moderator'),
-                                'desc_occupant': __('This user can send messages in this room'),
-                                'desc_visitor': __('This user can NOT send messages in this room')
+                                'hint_occupant': __('Click to mention this user in your message.'),
+                                'desc_moderator': __('This user is a moderator.'),
+                                'desc_occupant': __('This user can send messages in this room.'),
+                                'desc_visitor': __('This user can NOT send messages in this room.')
                         })
                     );
                     var $parents = this.$el.parents();

src/templates/occupant.html

-<li class="{{role}}" id="{{id}}"
+<li class="{{role}} occupant" id="{{id}}"
     {[ if (role === "moderator") { ]}
-       title="{{desc_moderator}}"
+       title="{{desc_moderator}} {{hint_occupant}}"
     {[ } ]}
     {[ if (role === "occupant") { ]}
-       title="{{desc_occupant}}"
+       title="{{desc_occupant}} {{hint_occupant}}"
     {[ } ]}
     {[ if (role === "visitor") { ]}
-       title="{{desc_visitor}}"
+       title="{{desc_visitor}} {{hint_occupant}}"
     {[ } ]}>{{nick}}</li>