Share Gaia assets and adapters, keep private profiles and development documents local, and update both public READMEs.
441 lines
12 KiB
JavaScript
Executable file
441 lines
12 KiB
JavaScript
Executable file
/* global module */
|
|
(function(module) {
|
|
'use strict';
|
|
|
|
/**
|
|
* @constructor
|
|
* @param {Marionette.Client} client Marionette client to use.
|
|
*/
|
|
function Fullscreen_View(client) {
|
|
this.client = client.scope({
|
|
searchTimeout: 20000
|
|
});
|
|
}
|
|
|
|
module.exports = Fullscreen_View;
|
|
|
|
/**
|
|
* @const {Object}
|
|
*/
|
|
Fullscreen_View.Selector = Object.freeze({
|
|
currentImage: '#frames .current > .image-view',
|
|
fullscreenView: '#fullscreen-view',
|
|
fullscreenBackButton: '#fullscreen-back-button-tiny',
|
|
editButton: '#fullscreen-edit-button-tiny',
|
|
shareButton: '#fullscreen-share-button-tiny',
|
|
editView: '#edit-view',
|
|
editExposureButton: '#edit-exposure-button',
|
|
editCropButton: '#edit-crop-button',
|
|
editEffectButton: '#edit-effect-button',
|
|
editEnhanceButton: '#edit-enhance-button',
|
|
exposureOptions: '#exposure-slider',
|
|
cropOptions: '#edit-crop-options',
|
|
effectOptions: '#edit-effect-options',
|
|
exposureSlider: '#sliderthumb',
|
|
editCropAspectPortraitButton: '#edit-crop-aspect-portrait',
|
|
editEffectSepiaButton: '#edit-effect-sepia',
|
|
editSaveButton: '#edit-save-button',
|
|
editToolApplyButton: '#edit-tool-apply-button',
|
|
editHeader: '#edit-view gaia-header',
|
|
fullscreenFrame2: '#frame2',
|
|
fullscreenFrame3: '#frame3',
|
|
cropDoneButton: '#crop-done-button',
|
|
editCropCanvas: '#edit-crop-canvas',
|
|
openTitle: '#filename',
|
|
openImage: '#frame > .image-view',
|
|
openSaveButton: '#save',
|
|
fullScreenToolBar: '#fullscreen-toolbar',
|
|
fullScreenToolBarOptions: '#fullscreen-toolbar > a',
|
|
|
|
});
|
|
|
|
Fullscreen_View.prototype = {
|
|
|
|
client: null,
|
|
|
|
/**
|
|
* @return {Marionette.Element} Currently displayed image element.
|
|
*/
|
|
get displayedImage() {
|
|
return this.client.helper.waitForElement(
|
|
Fullscreen_View.Selector.currentImage);
|
|
},
|
|
|
|
/**
|
|
* @return {numeric} Currently displayed image width.
|
|
*/
|
|
get width() {
|
|
return this.displayedImage.size().width;
|
|
},
|
|
|
|
/**
|
|
* @return {numeric} Currently displayed image height.
|
|
*/
|
|
get height() {
|
|
return this.displayedImage.size().height;
|
|
},
|
|
|
|
/**
|
|
* @return {Marionette.Element} Container for fullscreen view of an image.
|
|
*/
|
|
get fullscreenView() {
|
|
return this.client.helper.waitForElement(
|
|
Fullscreen_View.Selector.fullscreenView);
|
|
},
|
|
|
|
/**
|
|
* @return {boolean} display status of Fullscreen View.
|
|
*/
|
|
get displayed() {
|
|
return this.client.helper.waitForElement(
|
|
Fullscreen_View.Selector.fullscreenView).displayed();
|
|
},
|
|
|
|
/**
|
|
* @return {Marionette.Element} Element to click to get back
|
|
* to thumbnail view.
|
|
*/
|
|
get fullscreenBackButton() {
|
|
return this.client.helper.waitForElement(
|
|
Fullscreen_View.Selector.fullscreenBackButton);
|
|
},
|
|
|
|
/**
|
|
* @return {Marionette.Element} Element to click for image editing mode.
|
|
*/
|
|
get editButton() {
|
|
return this.client.helper.waitForElement(
|
|
Fullscreen_View.Selector.editButton);
|
|
},
|
|
|
|
/**
|
|
* @return {Marionette.Element} Element to click for effects editing mode.
|
|
*/
|
|
get editEffectButton() {
|
|
return this.client.helper.waitForElement(
|
|
Fullscreen_View.Selector.editEffectButton);
|
|
},
|
|
|
|
/**
|
|
* @return {Marionette.Element} Element to click for the auto-enhance
|
|
* editing mode.
|
|
*/
|
|
get editEnhanceButton() {
|
|
return this.client.helper.waitForElement(
|
|
Fullscreen_View.Selector.editEnhanceButton);
|
|
},
|
|
|
|
/**
|
|
* @return {Marionette.Element} Element to click for the exposure editing
|
|
* mode.
|
|
*/
|
|
get editExposureButton() {
|
|
return this.client.helper.waitForElement(
|
|
Fullscreen_View.Selector.editExposureButton);
|
|
},
|
|
|
|
/**
|
|
* @return {Marionette.Element} Element to click for crop editing mode.
|
|
*/
|
|
get editCropButton() {
|
|
return this.client.helper.waitForElement(
|
|
Fullscreen_View.Selector.editCropButton);
|
|
},
|
|
|
|
/**
|
|
* @return {Marionette.Element} Container to host the exposure options.
|
|
*/
|
|
get exposureOptions() {
|
|
return this.client.helper.waitForElement(
|
|
Fullscreen_View.Selector.exposureOptions);
|
|
},
|
|
|
|
/**
|
|
* @return {Marionette.Element} Container to host the crop options.
|
|
*/
|
|
get cropOptions() {
|
|
return this.client.helper.waitForElement(
|
|
Fullscreen_View.Selector.cropOptions);
|
|
},
|
|
|
|
/**
|
|
* @return {Marionette.Element} Container to host the effect options.
|
|
*/
|
|
get effectOptions() {
|
|
return this.client.helper.waitForElement(
|
|
Fullscreen_View.Selector.effectOptions);
|
|
},
|
|
|
|
/**
|
|
* @return {Marionette.Element} Container to host the enhance options.
|
|
*/
|
|
get enhanceOptions() {
|
|
return this.client.helper.waitForElement(
|
|
Fullscreen_View.Selector.enhanceOptions);
|
|
},
|
|
|
|
/**
|
|
* @return {Marionette.Element}
|
|
* Element to swipe to change exposure settings.
|
|
*/
|
|
get exposureSlider() {
|
|
return this.client.helper.waitForElement(
|
|
Fullscreen_View.Selector.exposureSlider);
|
|
},
|
|
|
|
/**
|
|
* @return {Marionette.Element}
|
|
* Element to click to save changes from editing.
|
|
*/
|
|
get editSaveButton() {
|
|
return this.client.helper.waitForElement(
|
|
Fullscreen_View.Selector.editSaveButton);
|
|
},
|
|
|
|
/**
|
|
* @return {Marionette.Element} Element to apply edits in edit tool.
|
|
*/
|
|
get editToolApplyButton() {
|
|
return this.client.helper.waitForElement(
|
|
Fullscreen_View.Selector.editToolApplyButton);
|
|
},
|
|
|
|
/**
|
|
* @return {Marionette.Element} Element to click to crop an image.
|
|
*/
|
|
get editCropAspectPortraitButton() {
|
|
return this.client.helper.waitForElement(
|
|
Fullscreen_View.Selector.editCropAspectPortraitButton);
|
|
},
|
|
|
|
/**
|
|
* @return {Marionette.Element} Element to click to apply a sepia affect.
|
|
*/
|
|
get editEffectSepiaButton() {
|
|
return this.client.helper.waitForElement(
|
|
Fullscreen_View.Selector.editEffectSepiaButton);
|
|
},
|
|
|
|
/**
|
|
* @return {Marionette.Element} Container element to host fullscreen images.
|
|
*/
|
|
get fullscreenFrame2() {
|
|
return this.client.helper.waitForElement(
|
|
Fullscreen_View.Selector.fullscreenFrame2);
|
|
},
|
|
|
|
/**
|
|
* @return {Marionette.Element} Container element to host fullscreen images.
|
|
*/
|
|
get fullscreenFrame3() {
|
|
return this.client.helper.waitForElement(
|
|
Fullscreen_View.Selector.fullscreenFrame3);
|
|
},
|
|
|
|
/**
|
|
* @return {Marionette.Element} Done Button to finish crop and pick image.
|
|
*/
|
|
get cropDoneButton() {
|
|
return this.client.helper.waitForElement(
|
|
Fullscreen_View.Selector.cropDoneButton);
|
|
},
|
|
|
|
/**
|
|
* @return {Marionette.Element} edit crop canvas showing crop overlay.
|
|
*/
|
|
get editCropCanvas() {
|
|
return this.client.helper.waitForElement(
|
|
Fullscreen_View.Selector.editCropCanvas);
|
|
},
|
|
|
|
/**
|
|
* @return {Marionette.Element} Element to click for sharing image.
|
|
*/
|
|
get shareButton() {
|
|
return this.client.helper.waitForElement(
|
|
Fullscreen_View.Selector.shareButton);
|
|
},
|
|
|
|
/**
|
|
* @return {Marionette.Element} Element containing fullScreenView toolbar
|
|
*/
|
|
get fullScreenToolBar() {
|
|
return this.client.helper.waitForElement(
|
|
Fullscreen_View.Selector.fullScreenToolBar);
|
|
},
|
|
|
|
/**
|
|
* @return {numeric} fullScreenToolBar width.
|
|
*/
|
|
get toolBarWidth() {
|
|
return this.fullScreenToolBar.size().width;
|
|
},
|
|
|
|
/**
|
|
* @return {Marionette.Element} List of elements of toolbar options.
|
|
*/
|
|
get toolBarOptions() {
|
|
this.waitFor(Fullscreen_View.Selector.fullScreenToolBarOptions);
|
|
return this.client.findElements(
|
|
Fullscreen_View.Selector.fullScreenToolBarOptions);
|
|
},
|
|
|
|
/**
|
|
* @return {String} screen orientation
|
|
*/
|
|
get screenOrientation() {
|
|
var orientation = this.client.executeScript(function () {
|
|
return window.wrappedJSObject.screen.mozOrientation;
|
|
});
|
|
return orientation;
|
|
},
|
|
|
|
/**
|
|
* @return {numeric} screen width
|
|
*/
|
|
get screenWidth() {
|
|
var width = this.client.executeScript(function () {
|
|
return window.wrappedJSObject.screen.width;
|
|
});
|
|
return width;
|
|
},
|
|
|
|
/**
|
|
* @return {numeric} screen height
|
|
*/
|
|
get screenHeight() {
|
|
var height = this.client.executeScript(function () {
|
|
return window.wrappedJSObject.screen.height;
|
|
});
|
|
return height;
|
|
},
|
|
|
|
/**
|
|
* @return {Marionette.Element} element to display image opened using
|
|
* gallery app open activity.
|
|
*/
|
|
get openActivityImage() {
|
|
return this.client.helper.waitForElement(
|
|
Fullscreen_View.Selector.openImage);
|
|
},
|
|
|
|
/**
|
|
* @return {Marionette.Element} header element
|
|
* showing file name opened using gallery app open activity.
|
|
*/
|
|
get openActivityImageTitle() {
|
|
return this.client.helper.waitForElement(
|
|
Fullscreen_View.Selector.openTitle);
|
|
},
|
|
|
|
/**
|
|
* @return {Marionette.Element} save button that saves image opened using
|
|
* gallery app open activity.
|
|
*/
|
|
get openActivitySaveButton() {
|
|
return this.client.findElement(Fullscreen_View.Selector.openSaveButton);
|
|
},
|
|
|
|
/**
|
|
* Check referenced image src
|
|
* is set with the URL provided
|
|
*/
|
|
hasSrcImageBlobURL: function(appURL, image) {
|
|
var url = 'blob:' + appURL;
|
|
return image.getAttribute('src').indexOf(url) > -1;
|
|
},
|
|
|
|
/**
|
|
* Read the translateX style and return its integer value.
|
|
*/
|
|
getFrameTranslation: function(frame) {
|
|
var style = frame.getAttribute('style');
|
|
return parseInt(style.match(/.*:\s.*\((\d*).*/)[1]);
|
|
},
|
|
|
|
waitFor: function(selector) {
|
|
return this.client.helper.waitForElement(selector);
|
|
},
|
|
|
|
/**
|
|
* Wait for the image editor view to render before continuing with the tests.
|
|
*/
|
|
waitForImageEditor: function() {
|
|
this.waitFor(Fullscreen_View.Selector.editCropButton);
|
|
this.waitFor(Fullscreen_View.Selector.editEffectButton);
|
|
this.waitFor(Fullscreen_View.Selector.editExposureButton);
|
|
this.waitFor(Fullscreen_View.Selector.editEnhanceButton);
|
|
},
|
|
|
|
getExposureSliderPosition: function() {
|
|
return this.exposureSlider.text();
|
|
},
|
|
|
|
applyEditToolOptions: function() {
|
|
this.editToolApplyButton.click();
|
|
},
|
|
|
|
saveEditedImage: function() {
|
|
this.editSaveButton.click();
|
|
},
|
|
|
|
performEditHeaderCancelAction: function() {
|
|
this.waitFor(Fullscreen_View.Selector.editHeader).scriptWith(
|
|
function(header) {
|
|
var event = document.createEvent('HTMLEvents');
|
|
event.initEvent('action', true, true);
|
|
header.dispatchEvent(event);
|
|
});
|
|
},
|
|
|
|
performEditEnhanceButtonClick: function() {
|
|
this.waitFor(Fullscreen_View.Selector.editEnhanceButton).scriptWith(
|
|
function(button) {
|
|
var event = document.createEvent('HTMLEvents');
|
|
event.initEvent('click', true, true);
|
|
button.dispatchEvent(event);
|
|
});
|
|
},
|
|
|
|
applyAutoEnhance: function() {
|
|
this.client.waitFor(function() {
|
|
return this.editEnhanceButton.enabled();
|
|
}.bind(this));
|
|
this.performEditEnhanceButtonClick();
|
|
},
|
|
|
|
waitForCropAspectPortraitSelected: function() {
|
|
this.client.waitFor(function() {
|
|
return this.editCropAspectPortraitButton
|
|
.getAttribute('class').indexOf('selected') > -1;
|
|
}.bind(this));
|
|
},
|
|
|
|
waitForSepiaEffectSelected: function() {
|
|
this.client.waitFor(function() {
|
|
return this.editEffectSepiaButton
|
|
.getAttribute('class').indexOf('selected') > -1;
|
|
}.bind(this));
|
|
},
|
|
|
|
waitForAutoEnhanceButtonOn: function() {
|
|
this.client.waitFor(function() {
|
|
return this.editEnhanceButton
|
|
.getAttribute('class').split(' ').indexOf('on') > -1;
|
|
}.bind(this));
|
|
},
|
|
|
|
waitForAutoEnhanceButtonOff: function() {
|
|
this.client.waitFor(function() {
|
|
return this.editEnhanceButton
|
|
.getAttribute('class').split(' ').indexOf('on') < 0;
|
|
}.bind(this));
|
|
},
|
|
|
|
changeOrientation: function(orientation) {
|
|
this.client.executeScript(function(orientation) {
|
|
window.wrappedJSObject.screen.mozLockOrientation(orientation);
|
|
}, [orientation]);
|
|
}
|
|
};
|
|
})(module);
|