public/js/views/modals/notification-settings-view.js

   1 'use strict';
   2
   3 var Marionette = require('backbone.marionette');
   4 var _ = require('lodash');
   5 var apiClient = require('../../components/api-client');
   6 var ModalView = require('./modal');
   7 var template = require('./tmpl/notification-settings-view.hbs');
   8 var userNotifications = require('../../components/user-notifications');
   9 var FeaturesView = require('./notification-features-collection-view');
  10
  11 var OPTIONS = {
  12   all: 'All: Notify me for all messages',
  13   announcement: 'Announcements: Notify me for mentions/announcements (email for all messages)',
  14   mute: "Mute: Notify me only when I'm directly mentioned"
  15 };
  16
  17 var View = Marionette.LayoutView.extend({
  18   template: template,
  19   events: {
  20     'click #close-settings': 'destroySettings',
  21     'change #notification-options': 'formChange'
  22   },
  23   modelEvents: {
  24     change: 'update'
  25   },
  26   ui: {
  27     options: '#notification-options',
  28     nonstandard: '#nonstandard',
  29     notifyFeatures: '#notify-features'
  30   },
  31   regions: {
  32     notifyFeatures: '#notify-features'
  33   },
  34
  35   initialize: function() {
  36     // TODO: this should go to the userRoom endpoint as a get
  37     // or better yet should be a live field on the room
  38     apiClient.userRoom
  39       .get('/settings/notifications')
  40       .bind(this)
  41       .then(function(settings) {
  42         this.model.set(settings);
  43       });
  44
  45     this.listenTo(this, 'menuItemClicked', this.menuItemClicked);
  46   },
  47
  48   getNotificationOption: function() {
  49     var model = this.model;
  50
  51     if (!model.attributes.hasOwnProperty('mode')) {
  52       // Not yet loaded...
  53       return null;
  54     }
  55     var value = model.get('mode');
  56     var lurk = model.get('lurk');
  57
  58     var nonStandard;
  59
  60     var defaultDescription =
  61       'Legacy setting: ' +
  62       value +
  63       ' mode, with ' +
  64       (lurk ? 'unread item count off' : 'unread item count on');
  65
  66     switch (value) {
  67       case 'all':
  68         nonStandard = lurk === true;
  69         return {
  70           selectValue: 'all',
  71           nonStandard: nonStandard,
  72           description: nonStandard ? defaultDescription : null
  73         };
  74
  75       case 'announcement':
  76       case 'mention':
  77         nonStandard = lurk === true;
  78
  79         return {
  80           selectValue: 'announcement',
  81           nonStandard: nonStandard,
  82           description: nonStandard ? defaultDescription : null
  83         };
  84
  85       case 'mute':
  86         nonStandard = lurk === false;
  87
  88         return {
  89           selectValue: 'mute',
  90           nonStandard: nonStandard,
  91           description: nonStandard ? defaultDescription : null
  92         };
  93
  94       default:
  95         return {
  96           selectValue: 'mute',
  97           nonStandard: true,
  98           description: 'Custom legacy setting (details below)'
  99         };
 100     }
 101   },
 102
 103   update: function() {
 104     var val = this.getNotificationOption();
 105
 106     if (val) {
 107       if (val.nonStandard) {
 108         this.ui.nonstandard.show();
 109       } else {
 110         this.ui.nonstandard.hide();
 111       }
 112
 113       var isDefault = this.model.get('default');
 114
 115       if (isDefault) {
 116         this.setOption('default');
 117       } else {
 118         if (val.nonStandard) {
 119           this.setOption('', val.description);
 120         } else {
 121           this.setOption(val.selectValue);
 122         }
 123       }
 124     } else {
 125       this.setOption('', 'Please wait...');
 126       this.ui.nonstandard.hide();
 127     }
 128
 129     var count = 0;
 130     if (this.featuresView) {
 131       count = this.featuresView.resetFromHash(this.model.attributes);
 132     } else {
 133       count = 0;
 134     }
 135
 136     if (count > 0) {
 137       this.ui.notifyFeatures.show();
 138     } else {
 139       this.ui.notifyFeatures.hide();
 140     }
 141   },
 142
 143   setOption: function(val, text) {
 144     var selectInput = this.ui.options;
 145     selectInput.empty();
 146     var found = false;
 147
 148     var defaultOptgroup = document.createElement('optgroup');
 149     defaultOptgroup.label = 'Use Default';
 150     selectInput.append(defaultOptgroup);
 151
 152     var defaultOption = document.createElement('option');
 153     defaultOption.value = 'default';
 154     defaultOption.textContent = this.getDefaulDescription();
 155     if (val === 'default') {
 156       defaultOption.selected = true;
 157       found = true;
 158     }
 159     defaultOptgroup.appendChild(defaultOption);
 160
 161     var overrideOptGroup = document.createElement('optgroup');
 162     overrideOptGroup.label = 'Override';
 163     selectInput.append(overrideOptGroup);
 164
 165     Object.keys(OPTIONS).forEach(function(key) {
 166       var text = OPTIONS[key];
 167
 168       var option = document.createElement('option');
 169       option.value = key;
 170       option.textContent = text;
 171       var selected = key === val;
 172       option.selected = selected;
 173       if (selected) {
 174         found = true;
 175       }
 176       overrideOptGroup.appendChild(option);
 177     });
 178
 179     if (!found) {
 180       var option = document.createElement('option');
 181       option.value = val;
 182       option.textContent = text;
 183       option.selected = true;
 184       option.style.display = 'none';
 185       overrideOptGroup.appendChild(option);
 186     }
 187   },
 188
 189   getDefaulDescription: function() {
 190     var model = this.model;
 191     var defaultSettings = model.get('defaultSettings');
 192     if (!defaultSettings) return 'Default settings';
 193
 194     if (!defaultSettings.mode || !OPTIONS[defaultSettings.mode]) return 'Legacy settings';
 195     return OPTIONS[defaultSettings.mode];
 196   },
 197
 198   onRender: function() {
 199     this.featuresView = new FeaturesView({});
 200     this.getRegion('notifyFeatures').show(this.featuresView);
 201     this.update();
 202   },
 203
 204   formChange: function(e) {
 205     if (e) e.preventDefault();
 206     var mode = this.ui.options.val();
 207     var oldIsDefault = this.model.get('default');
 208
 209     var effectiveMode = mode;
 210     if (mode === 'default') {
 211       var defaultSettings = this.model.get('defaultSettings');
 212       effectiveMode = defaultSettings && defaultSettings.mode;
 213     }
 214     this.featuresView.resetFromMode(effectiveMode);
 215
 216     var noChange;
 217     if (oldIsDefault) {
 218       noChange = mode === 'default';
 219     } else {
 220       noChange = mode === this.model.get('mode');
 221     }
 222
 223     this.dialog.toggleButtonClass('apply', 'modal--default__footer__btn--neutral', noChange);
 224     this.dialog.toggleButtonClass('apply', 'modal--default__footer__btn', !noChange);
 225   },
 226
 227   destroySettings: function() {
 228     this.dialog.hide();
 229     this.dialog = null;
 230   },
 231
 232   serializeData: function() {
 233     return {
 234       notificationsBlocked: userNotifications.isAccessDenied()
 235     };
 236   },
 237
 238   menuItemClicked: function(button) {
 239     switch (button) {
 240       case 'set-defaults':
 241         window.location.href = '#notification-defaults';
 242         break;
 243       case 'apply':
 244         this.applyChangeAndClose();
 245         break;
 246     }
 247   },
 248
 249   applyChangeAndClose: function() {
 250     var mode = this.ui.options.val();
 251     // TODO: this should go to the userRoom endpoint as a patch
 252     apiClient.userRoom
 253       .put('/settings/notifications', { mode: mode })
 254       .bind(this)
 255       .then(function() {
 256         this.dialog.hide();
 257         this.dialog = null;
 258       });
 259   }
 260 });
 261
 262 module.exports = ModalView.extend({
 263   initialize: function(options) {
 264     options = _.extend(
 265       {
 266         title: 'Notification Settings',
 267         menuItems: [
 268           {
 269             action: 'set-defaults',
 270             pull: 'left',
 271             text: 'Configure Defaults',
 272             className: 'modal--default__footer__link'
 273           },
 274           {
 275             action: 'apply',
 276             pull: 'right',
 277             text: 'Apply',
 278             className: 'modal--default__footer__btn--neutral'
 279           }
 280         ]
 281       },
 282       options
 283     );
 284
 285     ModalView.prototype.initialize.call(this, options);
 286     this.view = new View(options);
 287   }
 288 });