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

   1 'use strict';
   2
   3 var context = require('gitter-web-client-context');
   4 var Marionette = require('backbone.marionette');
   5 var ModalView = require('./modal');
   6 var apiClient = require('../../components/api-client');
   7 var roomSettingsTemplate = require('./tmpl/room-settings-view.hbs');
   8 var Promise = require('bluebird');
   9 var toggleClass = require('../../utils/toggle-class');
  10
  11 var View = Marionette.ItemView.extend({
  12   template: roomSettingsTemplate,
  13
  14   ui: {
  15     githubOnly: '#github-only',
  16     welcomeMessage: '#room-welcome-message',
  17     welcomeMessagePreviewButton: '#preview-welcome-message',
  18     welcomeMessagePreviewContainer: '#welcome-message-preview-container',
  19     editWelcomeMessageButton: '#close-welcome-message-preview',
  20     errorMessage: '#error-message'
  21   },
  22
  23   events: {
  24     'click #close-settings': 'destroySettings',
  25     'click @ui.welcomeMessagePreviewButton': 'previewWelcomeMessage',
  26     'click @ui.editWelcomeMessageButton': 'editWelcomeMessage'
  27   },
  28
  29   initialize: function() {
  30     this.listenTo(this, 'menuItemClicked', this.menuItemClicked, this);
  31     apiClient.room
  32       .get('/meta')
  33       .then(({ welcomeMessage = { text: '', html: '' } }) => {
  34         if (welcomeMessage.text.length) {
  35           this.initWithMessage(welcomeMessage);
  36         } else {
  37           this.initEmptyTextArea();
  38         }
  39       })
  40       .catch(this.showError.bind(this));
  41   },
  42
  43   destroySettings: function() {
  44     this.dialog.hide();
  45     this.dialog = null;
  46   },
  47
  48   menuItemClicked: function(action) {
  49     switch (action) {
  50       case 'submit':
  51         this.formSubmit();
  52         break;
  53     }
  54   },
  55
  56   update: function() {
  57     var hasGithub = (this.model.get('providers') || []).indexOf('github') !== -1;
  58     if (hasGithub) {
  59       this.ui.githubOnly.attr('checked', true);
  60     } else {
  61       this.ui.githubOnly.removeAttr('checked');
  62     }
  63   },
  64
  65   initEmptyTextArea: function() {
  66     this.ui.welcomeMessage.attr('placeholder', 'Add a new welcome message here');
  67   },
  68
  69   initWithMessage: function(msg) {
  70     this.ui.welcomeMessage.val(msg.text);
  71   },
  72
  73   onRender: function() {
  74     this.update();
  75   },
  76
  77   previewWelcomeMessage: function(e) {
  78     e.preventDefault();
  79     this.setPreviewLoadingState();
  80     toggleClass(this.el, 'preview', true);
  81     //hide the text area
  82     this.ui.welcomeMessage[0].classList.add('hidden');
  83     this.fetchRenderedHTML().then(
  84       function(html) {
  85         this.ui.welcomeMessagePreviewContainer.html(html);
  86         toggleClass(this.ui.welcomeMessagePreviewContainer[0], 'loading', false);
  87       }.bind(this)
  88     );
  89   },
  90
  91   editWelcomeMessage: function(e) {
  92     e.preventDefault();
  93     this.setPreviewLoadingState();
  94     toggleClass(this.el, 'preview', false);
  95     //show the text area
  96     this.ui.welcomeMessage[0].classList.remove('hidden');
  97   },
  98
  99   setPreviewLoadingState: function() {
 100     this.ui.welcomeMessagePreviewContainer.html('Loading ...');
 101     toggleClass(this.ui.welcomeMessagePreviewContainer[0], 'loading', true);
 102   },
 103
 104   fetchRenderedHTML: function() {
 105     return apiClient
 106       .post(
 107         '/private/markdown-preview',
 108         { text: this.getWelcomeMessageContent() },
 109         { dataType: 'text' }
 110       )
 111       .catch(this.showError.bind(this));
 112   },
 113
 114   getWelcomeMessageContent: function() {
 115     return this.ui.welcomeMessage.val();
 116   },
 117
 118   formSubmit: function() {
 119     var providers = this.ui.githubOnly.is(':checked') ? ['github'] : [];
 120     var welcomeMessageContent = this.getWelcomeMessageContent();
 121
 122     Promise.all([
 123       apiClient.room.put('', { providers: providers }),
 124       apiClient.room.post('/meta', {
 125         welcomeMessage: welcomeMessageContent
 126       })
 127     ])
 128       .spread(
 129         function(updatedTroupe /*, metaResponse*/) {
 130           context.setTroupe(updatedTroupe);
 131           this.destroySettings();
 132         }.bind(this)
 133       )
 134       .catch(this.showError.bind(this));
 135   },
 136
 137   // FIXME: Don't swallow an error
 138   // eslint-disable-next-line no-unused-vars
 139   showError: function(err) {
 140     this.ui.errorMessage[0].classList.remove('hidden');
 141     this.ui.welcomeMessage.attr('disabled', true);
 142   }
 143 });
 144
 145 var Modal = ModalView.extend({
 146   initialize: function(options) {
 147     options = options || {};
 148     options.title = options.title || 'Room Settings';
 149     ModalView.prototype.initialize.apply(this, arguments);
 150     this.view = new View(options);
 151   },
 152   menuItems: [
 153     { action: 'submit', pull: 'right', text: 'Submit', className: 'modal--default__footer__btn' }
 154   ]
 155 });
 156
 157 module.exports = Modal;