diff options
Diffstat (limited to 'third_party/webkit/PerformanceTests/Speedometer/resources/flightjs-example-app/app/component_ui')
6 files changed, 418 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 + }); + }); + } + } +); diff --git a/third_party/webkit/PerformanceTests/Speedometer/resources/flightjs-example-app/app/component_ui/folders.js b/third_party/webkit/PerformanceTests/Speedometer/resources/flightjs-example-app/app/component_ui/folders.js new file mode 100644 index 0000000000..f8504939eb --- /dev/null +++ b/third_party/webkit/PerformanceTests/Speedometer/resources/flightjs-example-app/app/component_ui/folders.js @@ -0,0 +1,34 @@ +'use strict'; + +define( + + [ + 'flight/lib/component', + './with_select' + ], + + function(defineComponent, withSelect) { + + return defineComponent(folders, withSelect); + + function folders() { + + this.defaultAttrs({ + selectedClass: 'selected', + selectionChangedEvent: 'uiFolderSelectionChanged', + + //selectors + itemSelector: 'li.folder-item', + selectedItemSelector: 'li.folder-item.selected' + }); + + this.fetchMailItems = function(ev, data) { + this.trigger('uiMailItemsRequested', {folder: data.selectedIds[0]}); + } + + this.after('initialize', function() { + this.on('uiFolderSelectionChanged', this.fetchMailItems); + }); + } + } +); diff --git a/third_party/webkit/PerformanceTests/Speedometer/resources/flightjs-example-app/app/component_ui/mail_controls.js b/third_party/webkit/PerformanceTests/Speedometer/resources/flightjs-example-app/app/component_ui/mail_controls.js new file mode 100644 index 0000000000..959f554502 --- /dev/null +++ b/third_party/webkit/PerformanceTests/Speedometer/resources/flightjs-example-app/app/component_ui/mail_controls.js @@ -0,0 +1,67 @@ +'use strict'; + +define( + [ + 'flight/lib/component' + ], + + function(defineComponent) { + + return defineComponent(mailControls); + + function mailControls() { + this.defaultAttrs({ + //selectors + actionControlsSelector: 'button.mail-action', + deleteControlSelector: '#delete_mail', + moveControlSelector: '#move_mail', + forwardControlSelector: '#forward', + replyControlSelector: '#reply', + singleItemActionSelector: 'button.single-item' + }); + + this.disableAll = function() { + this.select('actionControlsSelector').attr('disabled', 'disabled'); + }; + + this.restyleOnSelectionChange = function(ev, data) { + if (data.selectedIds.length > 1) { + this.select('actionControlsSelector').not('button.single-item').removeAttr('disabled'); + this.select('singleItemActionSelector').attr('disabled', 'disabled'); + } else if (data.selectedIds.length == 1) { + this.select('actionControlsSelector').removeAttr('disabled'); + } else { + this.disableAll(); + } + }; + + this.deleteMail = function(ev, data) { + this.trigger('uiDeleteMail'); + }; + + this.moveMail = function(ev, data) { + this.trigger('uiMoveMail'); + }; + + this.forwardMail = function(ev, data) { + this.trigger('uiForwardMail'); + }; + + this.replyToMail = function(ev, data) { + this.trigger('uiReplyToMail'); + }; + + this.after('initialize', function() { + this.on('.mail-action', 'click', { + 'deleteControlSelector': this.deleteMail, + 'moveControlSelector': this.moveMail, + 'forwardControlSelector': this.forwardMail, + 'replyControlSelector': this.replyToMail + }); + this.on(document, 'uiMailItemSelectionChanged', this.restyleOnSelectionChange); + this.on(document, 'uiFolderSelectionChanged', this.disableAll); + }); + } + } +); + diff --git a/third_party/webkit/PerformanceTests/Speedometer/resources/flightjs-example-app/app/component_ui/mail_items.js b/third_party/webkit/PerformanceTests/Speedometer/resources/flightjs-example-app/app/component_ui/mail_items.js new file mode 100644 index 0000000000..29b5cfd665 --- /dev/null +++ b/third_party/webkit/PerformanceTests/Speedometer/resources/flightjs-example-app/app/component_ui/mail_items.js @@ -0,0 +1,61 @@ +'use strict'; + +define( + + [ + 'flight/lib/component', + './with_select' + ], + + function(defineComponent, withSelect) { + + return defineComponent(mailItems, withSelect); + + function mailItems() { + + this.defaultAttrs({ + deleteFolder: 'trash', + selectedClass: 'selected', + allowMultiSelect: true, + selectionChangedEvent: 'uiMailItemSelectionChanged', + selectedMailItems: [], + selectedFolders: [], + //selectors + itemSelector: 'tr.mail-item', + selectedItemSelector: 'tr.mail-item.selected' + }); + + this.renderItems = function(ev, data) { + this.select('itemContainerSelector').html(data.markup); + //new items, so no selections + this.trigger('uiMailItemSelectionChanged', {selectedIds: []}); + } + + this.updateMailItemSelections = function(ev, data) { + this.attr.selectedMailItems = data.selectedIds; + } + + this.updateFolderSelections = function(ev, data) { + this.attr.selectedFolders = data.selectedIds; + } + + this.requestDeletion = function() { + this.trigger('uiMoveItemsRequested', { + itemIds: this.attr.selectedMailItems, + fromFolder: this.attr.selectedFolders[0], + toFolder: this.attr.deleteFolder + }); + }; + + this.after('initialize', function() { + this.on(document, 'dataMailItemsServed', this.renderItems); + this.on(document, 'uiDeleteMail', this.requestDeletion); + + this.on('uiMailItemSelectionChanged', this.updateMailItemSelections); + this.on(document, 'uiFolderSelectionChanged', this.updateFolderSelections); + + this.trigger('uiMailItemsRequested'); + }); + } + } +); diff --git a/third_party/webkit/PerformanceTests/Speedometer/resources/flightjs-example-app/app/component_ui/move_to_selector.js b/third_party/webkit/PerformanceTests/Speedometer/resources/flightjs-example-app/app/component_ui/move_to_selector.js new file mode 100644 index 0000000000..e077e6aff3 --- /dev/null +++ b/third_party/webkit/PerformanceTests/Speedometer/resources/flightjs-example-app/app/component_ui/move_to_selector.js @@ -0,0 +1,79 @@ +'use strict'; + +define( + + [ + 'flight/lib/component', + './with_select' + ], + + function(defineComponent, withSelect) { + + return defineComponent(moveToSelector, withSelect); + + function moveToSelector() { + + this.defaultAttrs({ + selectionChangedEvent: 'uiMoveToSelectionChanged', + selectedMailItems: [], + selectedFolders: [], + //selectors + itemSelector: 'li.move-to-item', + selectedItemSelector: 'li.move-to-item.selected' + }); + + this.requestSelectorWidget = function(ev, data) { + this.trigger('uiAvailableFoldersRequested', { + folder: this.attr.selectedFolders[0] + }) + }; + + this.launchSelector = function(ev, data) { + var controlPosition = $(this.attr.moveActionSelector).offset(); + this.$node.html(data.markup).show().css({ + left: controlPosition.left, + top: controlPosition.top + $(this.attr.moveActionSelector).outerHeight(), + width: $(this.attr.moveActionSelector).outerWidth() + }); + window.setTimeout( + (function() { + this.on(document, 'click', this.hideSelector) + }).bind(this), 0); + }; + + this.hideSelector = function() { + this.off(document, 'click', this.hideSelector); + this.$node.hide(); + } + + this.updateMailItemSelections = function(ev, data) { + this.attr.selectedMailItems = data.selectedIds; + } + + this.updateFolderSelections = function(ev, data) { + this.attr.selectedFolders = data.selectedIds; + } + + this.requestMoveTo = function(ev, data) { + this.trigger('uiMoveItemsRequested', { + itemIds: this.attr.selectedMailItems, + fromFolder: this.attr.selectedFolders[0], + toFolder: data.selectedIds[0] + }); + this.$node.hide(); + }; + + this.after('initialize', function() { + //show selector widget + this.on(document, 'uiMoveMail', this.requestSelectorWidget); + this.on(document, 'dataMoveToItemsServed', this.launchSelector); + //listen for other selections + this.on(document, 'uiMailItemSelectionChanged', this.updateMailItemSelections); + this.on(document, 'uiFolderSelectionChanged', this.updateFolderSelections); + //move items + this.on('uiMoveToSelectionChanged', this.requestMoveTo); + + }); + } + } +); diff --git a/third_party/webkit/PerformanceTests/Speedometer/resources/flightjs-example-app/app/component_ui/with_select.js b/third_party/webkit/PerformanceTests/Speedometer/resources/flightjs-example-app/app/component_ui/with_select.js new file mode 100644 index 0000000000..2a99feaadf --- /dev/null +++ b/third_party/webkit/PerformanceTests/Speedometer/resources/flightjs-example-app/app/component_ui/with_select.js @@ -0,0 +1,64 @@ +'use strict'; + +define( + + function() { + + return withSelect; + + function withSelect() { + + this.defaultAttrs({ + selectedIds: [] + }); + + this.initializeSelections = function() { + this.select('selectedItemSelector').toArray().forEach(function(el) { + this.attr.selectedIds.push(el.getAttribute('id')); + }, this); + }; + + this.getSelectedIds = function() { + return this.attr.selectedIds; + }; + + this.toggleItemSelect = function(ev, data) { + var $item = $(data.el), append; + + if ($item.hasClass(this.attr.selectedClass)) { + this.unselectItem($item); + } else { + append = this.attr.allowMultiSelect && (ev.metaKey || ev.ctrlKey || ev.shiftKey); + this.selectItem($item, append); + } + }; + + this.selectItem = function($item, append) { + if (!append) { + this.select('selectedItemSelector').removeClass(this.attr.selectedClass); + this.attr.selectedIds = []; + } + $item.addClass(this.attr.selectedClass); + + this.attr.selectedIds.push($item.attr('id')); + this.trigger(this.attr.selectionChangedEvent, {selectedIds: this.attr.selectedIds}); + }; + + this.unselectItem = function($item) { + $item.removeClass(this.attr.selectedClass); + + var thisIdIndex = this.attr.selectedIds.indexOf($item.attr('id')); + this.attr.selectedIds.splice(thisIdIndex, 1); + this.trigger(this.attr.selectionChangedEvent, {selectedIds: this.attr.selectedIds}); + }; + + this.after("initialize", function() { + this.on('click', { + 'itemSelector': this.toggleItemSelect + }); + + this.initializeSelections(); + }); + } + } +); |