Reviewed by Yusuke Suzuki, Addy Osmani, and Julian Descottes. * InteractiveRunner.html: Added. * index.html Added. * resources: Added.
113 lines
3.5 KiB
JavaScript
113 lines
3.5 KiB
JavaScript
'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
|
|
});
|
|
});
|
|
}
|
|
}
|
|
);
|