1 files changed, 113 insertions, 0 deletions
diff --git a/third_party/webkit/PerformanceTests/Speedometer/resources/flightjs-example-app/app/component_ui/compose_box.js b/third_party/webkit/PerformanceTests/Speedometer/resources/flightjs-example-app/app/component_ui/compose_box.js
new file mode 100644
index 0000000000..feb14040be
--- /dev/null
+++ b/third_party/webkit/PerformanceTests/Speedometer/resources/flightjs-example-app/app/component_ui/compose_box.js
@@ -0,0 +1,113 @@
+'use strict';
+
+define(
+
+  [
+    'flight/lib/component'
+  ],
+
+  function(defineComponent) {
+
+    return defineComponent(composeBox);
+
+    function composeBox() {
+
+      this.defaultAttrs({
+        newMailType: 'newMail',
+        forwardMailType: 'forward',
+        replyMailType: 'reply',
+        hintClass: 'hint',
+        selectedFolders: [],
+        selectedMailItems: [],
+
+        //selectors
+        composeControl: '.compose',
+        newControlSelector: '#new_mail',
+        cancelSelector: '#cancel_composed',
+        sendSelector: '#send_composed',
+        toSelector: '#compose_to',
+        subjectSelector: '#compose_subject',
+        messageSelector: '#compose_message',
+        recipientSelector: '#recipient_select',
+        recipientHintSelector: '#recipient_hint',
+        selectedRecipientSelector: '#recipient_select :selected',
+        hintSelector: 'div.hint'
+      });
+
+      this.newMail = function() {
+        this.requestComposeBox(this.attr.newMailType);
+      };
+
+      this.forward = function() {
+        this.requestComposeBox(this.attr.forwardMailType, this.attr.selectedMailItems);
+      };
+
+      this.reply = function() {
+        this.requestComposeBox(this.attr.replyMailType, this.attr.selectedMailItems);
+      };
+
+      this.requestComposeBox = function(type, relatedMailId) {
+        this.trigger('uiComposeBoxRequested', {type: type, relatedMailId: relatedMailId});
+      };
+
+      this.launchComposeBox = function(ev, data) {
+        var focusSelector = (data.type == this.attr.replyMailType) ? 'messageSelector' : 'toSelector';
+        this.$node.html(data.markup).show();
+        this.select(focusSelector).focus();
+      };
+
+      this.cancel = function() {
+        this.$node.html('').hide();
+      };
+
+      this.requestSend = function() {
+        var data = {
+          to_id: this.select('selectedRecipientSelector').attr('id'),
+          subject: this.select('subjectSelector').text(),
+          message: this.select('messageSelector').text(),
+          currentFolder: this.attr.selectedFolders[0]
+        };
+        this.trigger('uiSendRequested', data);
+        this.$node.hide();
+      };
+
+      this.enableSend = function() {
+        this.select('recipientHintSelector').attr('disabled', 'disabled');
+        this.select('sendSelector').removeAttr('disabled');
+      };
+
+      this.removeHint = function(ev, data) {
+        $(ev.target).html('').removeClass(this.attr.hintClass);
+      };
+
+      this.updateMailItemSelections = function(ev, data) {
+        this.attr.selectedMailItems = data.selectedIds;
+      }
+
+      this.updateFolderSelections = function(ev, data) {
+        this.attr.selectedFolders = data.selectedIds;
+      }
+
+      this.after('initialize', function() {
+        this.on(document, 'dataComposeBoxServed', this.launchComposeBox);
+        this.on(document, 'uiForwardMail', this.forward);
+        this.on(document, 'uiReplyToMail', this.reply);
+        this.on(document, 'uiMailItemSelectionChanged', this.updateMailItemSelections);
+        this.on(document, 'uiFolderSelectionChanged', this.updateFolderSelections);
+
+        //the following bindings use delegation so that the event target is read at event time
+        this.on(document, "click", {
+          'cancelSelector': this.cancel,
+          'sendSelector': this.requestSend,
+          'newControlSelector': this.newMail
+        });
+        this.on('change', {
+          'recipientSelector': this.enableSend
+        });
+        this.on('keydown', {
+          'hintSelector': this.removeHint
+        });
+      });
+    }
+  }
+);