Commits

nakamura committed dbc24b9

chat.js: if there is unread messages, display asterisk on channel list tab

Comments (0)

Files changed (2)

tai/service/static/js/chat.js

     },
 });
 
+var ChannelMap = Backbone.Model.extend({
+    unread: function() {
+        return _.reduce(this.toJSON(), function(sum, channel) {
+            return sum + channel.get('unread');
+        }, 0);
+    },
+
+    set: function(key, val, options) {
+        if (key == null) {
+            return this;
+        }
+
+        var attrs
+        if (typeof key === 'object') {
+            attrs = key;
+            options = val;
+        } else {
+            (attrs = {})[key] = val;
+        }
+
+        var self = this;
+
+        // proxy events from channels
+        _.each(attrs, function(channel, name) {
+            var current;
+            if (current = self.get(name)) {
+                current.off(null, null, self);
+            }
+
+            channel.on('all', function(eventName) {
+                self.trigger(eventName);
+            }, self);
+        });
+
+        return Backbone.Model.prototype.set.apply(this, arguments);
+    },
+
+    unset: function(attr, options) {
+        var current;
+        if (current = this.get(attr)) {
+            current.off(null, null, this);
+        }
+        return Backbone.Model.prototype.unset.apply(this, attr, options);
+    },
+});
+
 // IRC Channel model
 var Channel = Backbone.Model.extend({
     defaults: {
 var ChannelListView = Backbone.View.extend({
     template: Mustache.compile($('#template-channel-name').html()),
     listEl: '#channel-list',
+    unreadIcon: '#channels-have-unreads',
 
     initialize: function() {
         this.$listEl = this.$(this.listEl);
+        this.$unreadIcon = $(this.unreadIcon);
     },
 
     render: function() {
             }, this);
         }, this);
 
+        if (this.model.unread()) {
+            this.$unreadIcon.show();
+        } else {
+            this.$unreadIcon.hide();
+        }
+
         return this;
     },
 
 var UserListView = ChannelListView.extend({
     template: Mustache.compile($('#template-user-name').html()),
     listEl: '#user-list',
+    unreadIcon: '#users-have-unreads',
 });
 
 var ChannelView = Backbone.View.extend({
     initialize: function(options) {
         this.state = new ApplicationState();
 
-        this.channels = new Backbone.Model();
+        this.channels = new ChannelMap();
         _.each(options.channels, function(channel) {
             this.channels.set(channel.name, new Channel(channel));
         }, this);
         this.channelList = new ChannelListView({el: $('#tab-list'), model: this.channels});
         this.channelList.render();
 
-        this.users = new Backbone.Model();
+        this.users = new ChannelMap();
         _.each(options.users, function(user) {
             this.users.set(user.name, new Channel(user));
         }, this);

tai/service/templates/chat.html

                 <div class="well sidebar-nav" id="sidebar">
                     <div class="tabbable">
                         <ul class="nav nav-pills" style="margin-bottom: 0;">
-                            {% comment TODO: <li class="active"><a href="#tab-notice" data-toggle="tab">Notice</a></li> %}
-                            <li class="active"><a href="#tab-list" data-toggle="tab">Channels</a></li>
-                            <li><a href="#tab-names" data-toggle="tab">Users</a></li>
+                            <li class="active"><a href="#tab-list" data-toggle="tab">Channels<span id="channels-have-unreads" style="display: none;"> *</i></a></li>
+                            <li><a href="#tab-names" data-toggle="tab">Users<span id="users-have-unreads" style="display: none;"> *</i></a></li>
                         </ul>
                     </div>
                     <hr style="margin: 5px;" />
                     <div class="tab-content app-column">
-                        {% comment TODO:
-                        <div class="tab-pane active" id="tab-notice">
-                            <ul id="notice-list" class="nav nav-list">
-                                <li><a class="channel-name" name="#channel_name" href="#">#channel_name <i class="icon-star pull-right"></i></a></li>
-                                <li><a class="channel-name" name="someone" href="#">someone</a></li>
-                            </ul>
-                        </div>
-                        %}
                         <div class="tab-pane active" id="tab-list">
                             <script type="text/template" id="template-channel-name">
                                 {% raw templateChannelName %}