Add web-ui based on previous code

4 files changed, 293 insertions, 0 deletions

diff --git a/web-ui/app/js/mixins/with_compose_inline.js b/web-ui/app/js/mixins/with_compose_inline.js
new file mode 100644
index 00000000..36bc4950
--- /dev/null
+++ b/web-ui/app/js/mixins/with_compose_inline.js
@@ -0,0 +1,63 @@
+/*global _ */
+
+define(
+  [
+    'page/events',
+    'views/templates',
+    'mail_view/data/mail_builder',
+    'mixins/with_mail_edit_base'
+  ],
+  function(events, templates, mailBuilder, withMailEditBase) {
+    'use strict';
+
+    function withComposeInline() {
+      this.defaultAttrs({
+        subjectDisplay: '#reply-subject',
+        subjectInput: '#subject-container input',
+        recipientsDisplay: '#all-recipients'
+      });
+
+      this.openMail = function(ev, data) {
+        this.trigger(document, events.ui.mail.open, {ident: this.attr.mail.ident});
+      };
+
+      this.trashReply = function() {
+        this.trigger(document, events.ui.composeBox.trashReply);
+        this.teardown();
+      };
+
+      this.builtMail = function(tag) {
+        return mailBuilder.newMail(this.attr.ident)
+          .subject(this.select('subjectBox').val())
+          .to(this.attr.recipientValues.to)
+          .cc(this.attr.recipientValues.cc)
+          .bcc(this.attr.recipientValues.bcc)
+          .body(this.select('bodyBox').val())
+          .tag(tag);
+      };
+
+      this.renderInlineCompose = function(className, viewData) {
+        this.show();
+        this.render(templates.compose.inlineBox, viewData);
+
+        this.$node.addClass(className);
+        this.select('bodyBox').focus();
+
+        this.enableAutoSave();
+      };
+
+      this.updateIdent = function(ev, data) {
+        this.attr.mail.ident = data.ident;
+      };
+
+      this.after('initialize', function () {
+        this.on(document, events.mail.sent, this.openMail);
+        this.on(document, events.mail.deleted, this.trashReply);
+        this.on(document, events.mail.draftSaved, this.updateIdent);
+      });
+
+      withMailEditBase.call(this);
+    }
+
+    return withComposeInline;
+  });
diff --git a/web-ui/app/js/mixins/with_enable_disable_on_event.js b/web-ui/app/js/mixins/with_enable_disable_on_event.js
new file mode 100644
index 00000000..fa574a97
--- /dev/null
+++ b/web-ui/app/js/mixins/with_enable_disable_on_event.js
@@ -0,0 +1,34 @@
+/*global Smail */
+/*global _ */
+
+define([],
+  function () {
+    'use strict';
+
+    function withEnableDisableOnEvent(ev) {
+      return function () {
+        this.disableElement = function () {
+          this.$node.attr('disabled', 'disabled');
+        };
+
+        this.enableElement = function () {
+          this.$node.removeAttr('disabled');
+        };
+
+        this.toggleEnabled = function (ev, enable) {
+          if (enable) {
+            this.enableElement();
+          } else {
+            this.disableElement();
+          }
+        };
+
+        this.after('initialize', function () {
+          this.on(document, ev, this.toggleEnabled);
+        });
+      };
+    }
+
+    return withEnableDisableOnEvent;
+  }
+);
diff --git a/web-ui/app/js/mixins/with_hide_and_show.js b/web-ui/app/js/mixins/with_hide_and_show.js
new file mode 100644
index 00000000..8cd97ffa
--- /dev/null
+++ b/web-ui/app/js/mixins/with_hide_and_show.js
@@ -0,0 +1,14 @@
+define(function(require) {
+
+  function withHideAndShow() {
+    this.hide = function () {
+      this.$node.hide();
+    };
+    this.show = function () {
+      this.$node.show();
+    };
+  }
+
+  return withHideAndShow;
+
+});
diff --git a/web-ui/app/js/mixins/with_mail_edit_base.js b/web-ui/app/js/mixins/with_mail_edit_base.js
new file mode 100644
index 00000000..fde9823c
--- /dev/null
+++ b/web-ui/app/js/mixins/with_mail_edit_base.js
@@ -0,0 +1,182 @@
+/*global _ */
+
+define(
+  [
+    'helpers/view_helper',
+    'mail_view/ui/recipients/recipients',
+    'mail_view/ui/draft_save_status',
+    'page/events',
+    'views/i18n',
+    'mail_view/ui/send_button',
+    'flight/lib/utils'
+  ],
+  function(viewHelper, Recipients, DraftSaveStatus, events, i18n, SendButton, utils) {
+    'use strict';
+
+    function withMailEditBase() {
+
+      this.defaultAttrs({
+        bodyBox: '#text-box',
+        sendButton: '#send-button',
+        draftButton: '#draft-button',
+        cancelButton: '#cancel-button',
+        trashButton: '#trash-button',
+        toArea: '#recipients-to-area',
+        ccArea: '#recipients-cc-area',
+        bccArea: '#recipients-bcc-area',
+        ccsTrigger: '#ccs-trigger',
+        bccsTrigger: '#bccs-trigger',
+        toTrigger: '#to-trigger',
+        subjectBox: '#subject',
+        tipMsg: '.tip-msg',
+        draftSaveStatus: '#draft-save-status',
+        recipientsFields: '#recipients-fields',
+        currentTag: '',
+        recipientValues: {to: [], cc: [], bcc: []},
+        saveDraftInterval: 3000
+      });
+
+      this.attachRecipients = function (context) {
+        Recipients.attachTo(this.select('toArea'), { name: 'to', addresses: context.recipients.to });
+        Recipients.attachTo(this.select('ccArea'), { name: 'cc', addresses: context.recipients.cc || []});
+        Recipients.attachTo(this.select('bccArea'), { name: 'bcc', addresses: context.recipients.bcc || []});
+      };
+
+      this.render = function(template, context) {
+        this.$node.html(template(context));
+
+        if(!context || _.isEmpty(context)){
+          context.recipients = {to: [], cc: [], bcc: []};
+        }
+        this.attr.recipientValues = context.recipients;
+        this.attachRecipients(context);
+
+        this.on(this.select('draftButton'), 'click', this.buildAndSaveDraft);
+        this.on(this.select('trashButton'), 'click', this.trashMail);
+        SendButton.attachTo(this.select('sendButton'));
+
+        if (!_.isEmpty(this.attr.recipientValues.to.concat(this.attr.recipientValues.cc))) {
+          this.trigger(document, events.ui.sendbutton.enable);
+        }
+      };
+
+      this.enableAutoSave = function () {
+        this.select('bodyBox').on('input', this.monitorInput.bind(this));
+        this.select('subjectBox').on('input', this.monitorInput.bind(this));
+        DraftSaveStatus.attachTo(this.select('draftSaveStatus'));
+      };
+
+      this.deleteMail = function(data) {
+        this.attr.ident = data.ident;
+        var mail = this.buildMail();
+        this.trigger(document, events.ui.mail.delete, { mail: mail });
+      };
+
+      this.monitorInput = function() {
+        this.trigger(events.ui.mail.changedSinceLastSave);
+        this.cancelPostponedSaveDraft();
+        var mail = this.buildMail();
+        this.postponeSaveDraft(mail);
+      };
+
+      this.trashMail = function() {
+        this.cancelPostponedSaveDraft();
+        this.trigger(document, events.mail.save, {
+          mail: this.buildMail(),
+          callback: this.deleteMail.bind(this)
+        });
+      };
+
+      this.sendMail = function () {
+        this.cancelPostponedSaveDraft();
+        var mail = this.buildMail('sent');
+
+        if (allRecipientsAreEmails(mail)) {
+          this.trigger(events.mail.send, mail);
+        } else {
+          this.trigger(
+            events.ui.userAlerts.displayMessage,
+            {message: i18n.get('One or more of the recipients are not valid emails')}
+          );
+        }
+      };
+
+      this.buildAndSaveDraft = function () {
+        var mail = this.buildMail();
+        this.saveDraft(mail);
+      };
+
+      this.recipientsUpdated = function (ev, data) {
+        this.attr.recipientValues[data.recipientsName] = data.newRecipients;
+        this.trigger(document, events.ui.mail.recipientsUpdated);
+        if (data.skipSaveDraft) { return; }
+
+        this.attr.silent = true;
+        var mail = this.buildMail();
+        this.postponeSaveDraft(mail);
+      };
+
+      this.saveDraft = function (mail) {
+        this.cancelPostponedSaveDraft();
+        this.trigger(document, events.mail.saveDraft, mail);
+      };
+
+      this.cancelPostponedSaveDraft = function() {
+        clearTimeout(this.attr.timeout);
+      };
+
+      this.postponeSaveDraft = function (mail) {
+        this.cancelPostponedSaveDraft();
+
+        this.attr.timeout = window.setTimeout(_.bind(function() {
+          this.attr.silent = true;
+          this.saveDraft(mail);
+        }, this), this.attr.saveDraftInterval);
+      };
+
+      this.draftSaved = function(event, data) {
+        this.attr.ident = data.ident;
+        if(!this.attr.silent) {
+          this.trigger(document, events.ui.userAlerts.displayMessage, { message: i18n.get('Saved as draft.') });
+        }
+        delete this.attr.silent;
+      };
+
+      this.validateAnyRecipient = function () {
+        return !_.isEmpty(_.flatten(_.values(this.attr.recipientValues)));
+      };
+
+      // Validators and formatters
+      function allRecipientsAreEmails(mail) {
+        var allRecipients = mail.header.to.concat(mail.header.cc).concat(mail.header.bcc);
+        return _.isEmpty(allRecipients) ? false : _.all(allRecipients, emailFormatChecker);
+      }
+
+      function emailFormatChecker(email) {
+        var emailFormat = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+        return emailFormat.test(email);
+      }
+
+      this.saveTag = function(ev, data) {
+        this.attr.currentTag = data.tag;
+      };
+
+      this.mailSent = function() {
+        this.trigger(document, events.ui.userAlerts.displayMessage, { message: 'Your message was sent!' });
+      };
+
+      this.after('initialize', function () {
+        this.on(document, events.dispatchers.rightPane.clear, this.teardown);
+        this.on(document, events.ui.recipients.updated, this.recipientsUpdated);
+        this.on(document, events.mail.draftSaved, this.draftSaved);
+        this.on(document, events.mail.sent, this.mailSent);
+
+        this.on(document, events.ui.mail.send, this.sendMail);
+
+        this.on(document, events.ui.tag.selected, this.saveTag);
+
+      });
+    }
+
+    return withMailEditBase;
+  });