public/js/views/app/unreadBannerView.js

   1 'use strict';
   2
   3 const debug = require('debug-proxy')('app:unread-banner-view');
   4 var Marionette = require('backbone.marionette');
   5 var template = require('./tmpl/unreadBannerTemplate.hbs');
   6 var appEvents = require('../../utils/appevents');
   7 var unreadItemsClient = require('../../components/unread-items-client');
   8 require('../behaviors/tooltip');
   9
  10 var TopBannerView = Marionette.ItemView.extend({
  11   octicon: 'octicon-chevron-up',
  12   position: 'Above',
  13   template: template,
  14   hidden: true,
  15   className: 'banner-wrapper',
  16   actAsScrollHelper: false,
  17
  18   ui: {
  19     bannerMessage: '#banner-message',
  20     buttons: 'button'
  21   },
  22
  23   behaviors: {
  24     Tooltip: {
  25       'button.side': { title: 'Mark as read', placement: 'top' }
  26     }
  27   },
  28
  29   events: {
  30     'click button.main': 'onMainButtonClick',
  31     'click button.side': 'onSideButtonClick'
  32   },
  33
  34   modelEvents: function() {
  35     var events = {};
  36     events['change:unread' + this.position] = 'updateVisibility';
  37     events['change:hasUnread' + this.position] = 'updateVisibility';
  38     events['change:hasMentions' + this.position] = 'updateVisibility';
  39
  40     return events;
  41   },
  42
  43   applyStyles: function() {
  44     if (this.getMentionsCount()) {
  45       this.ui.buttons.removeClass('unread');
  46       this.ui.buttons.addClass('mention');
  47       return;
  48     }
  49     if (this.getUnreadCount()) {
  50       this.ui.buttons.addClass('unread');
  51       return;
  52     }
  53     this.ui.buttons.removeClass('unread');
  54     this.ui.buttons.removeClass('mention');
  55   },
  56
  57   getUnreadCount: function() {
  58     return this.model.get('unread' + this.position);
  59   },
  60
  61   getMentionsCount: function() {
  62     return this.model.get('mentions' + this.position);
  63   },
  64
  65   serializeData: function() {
  66     return { message: this.getMessage(), octicon: this.octicon };
  67   },
  68
  69   getMessage: function() {
  70     var unreadCount = this.getUnreadCount();
  71     var mentionsCount = this.getMentionsCount();
  72
  73     if (!unreadCount && !mentionsCount) return 'Go to bottom';
  74     if (mentionsCount === 1) return '1 mention';
  75     if (mentionsCount > 1) return mentionsCount + '  mentions';
  76     if (unreadCount === 1) return '1 unread';
  77     if (unreadCount > 99) return '99+ unread';
  78     return unreadCount + ' unread';
  79   },
  80
  81   shouldBeVisible: function() {
  82     return !!this.getMentionsCount() || !!this.getUnreadCount() || !!this.actAsScrollHelper;
  83   },
  84
  85   updateMessage: function() {
  86     this.ui.bannerMessage.text(this.getMessage());
  87   },
  88
  89   updateVisibility: function() {
  90     this.applyStyles();
  91     this.updateMessage();
  92
  93     // TODO Add some fancy transitions
  94     if (this.shouldBeVisible()) {
  95       this.$el.parent().show();
  96     } else {
  97       this.ui.buttons.blur();
  98       this.$el.parent().hide();
  99     }
 100   },
 101
 102   onRender: function() {
 103     this.updateVisibility();
 104   },
 105
 106   onMainButtonClick: function() {
 107     var mentionId = this.model.get('oldestMentionId');
 108     if (mentionId) {
 109       debug(`onMainButtonClick scrolling to unread mention=${mentionId}`);
 110       return appEvents.trigger('chatCollectionView:scrollToChatId', mentionId);
 111     }
 112
 113     var itemId = this.model.get('oldestUnreadItemId');
 114     if (itemId) {
 115       debug(`onMainButtonClick scrolling to unread message=${itemId}`);
 116       appEvents.trigger('chatCollectionView:scrollToChatId', itemId);
 117     }
 118   },
 119
 120   onSideButtonClick: function() {
 121     debug(`onSideButtonClick marking all messages as read`);
 122     unreadItemsClient.markAllRead();
 123   }
 124 });
 125
 126 var BottomBannerView = TopBannerView.extend({
 127   octicon: 'octicon-chevron-down',
 128   position: 'Below',
 129   className: 'banner-wrapper bottom',
 130   actAsScrollHelper: false,
 131
 132   initialize: function() {
 133     debug(`BottomBanner initialized`);
 134     this.listenTo(appEvents, 'atBottomChanged', this.toggleScrollHelper);
 135   },
 136
 137   onAttach: function() {
 138     debug(`BottomBannerView.onAttach`);
 139   },
 140
 141   toggleScrollHelper: function(atBottom) {
 142     this.actAsScrollHelper = !atBottom;
 143     this.updateVisibility();
 144   },
 145
 146   onMainButtonClick: function() {
 147     this.toggleScrollHelper(true);
 148
 149     var mentionId = this.model.get('firstMentionIdBelow');
 150     if (mentionId) {
 151       debug(`BottomBannerView.onMainButtonClick scrolling to unread mention=${mentionId}`);
 152       return appEvents.trigger('chatCollectionView:scrollToChatId', mentionId);
 153     }
 154
 155     var itemId = this.model.get('firstUnreadItemIdBelow');
 156     if (itemId) {
 157       debug(`BottomBannerView.onMainButtonClick scrolling to unread message=${itemId}`);
 158       return appEvents.trigger('chatCollectionView:scrollToChatId', itemId);
 159     }
 160
 161     debug(`BottomBannerView.onMainButtonClick scrolling to bottom of chats`);
 162     appEvents.trigger('chatCollectionView:scrollToBottom');
 163   },
 164
 165   onSideButtonClick: function() {}
 166 });
 167
 168 module.exports = {
 169   Top: TopBannerView,
 170   Bottom: BottomBannerView
 171 };