[TIMOB-16177] iOS LANDSCAPE Orientation Upside Down

GitHub Issue	n/a
Type	Bug
Priority	n/a
Status	Closed
Resolution	Fixed
Resolution Date	2014-01-22T21:14:01.000+0000
Affected Version/s	n/a
Fix Version/s	2014 Sprint 02, 2014 Sprint 02 API, Release 3.3.0
Components	iOS
Labels	module_orientation, qe-closed-3.3.0, qe-testadded, supportTeam
Reporter	SHOCKOE TEAM
Assignee	Sabil Rahim
Created	2014-01-09T19:45:46.000+0000
Updated	2014-07-28T18:16:24.000+0000

Description

*Problem Description* Opening a modal window with a Scrollable view, with orientationModes set to LANDSCAPE_LEFT & LANDSCAPE_RIGHT display incorrectly. Image displays upside down, however can be reset by turning the phone one way then back again. *Reproduction Steps* 1. Run the code below in a new Alloy Project. 2. Tilt the device to the left and notice the image is upside down instead of showing in.LANDSCAPE_RIGHT. 3. Press Close 4. Tilt device to the right and notice the image is showing LANDSCAPE_LEFT which is correct *index.js*

$.win.open();

function openGallery() {
	if(Alloy.Globals.photoViewerOpen) {
		return;
	}
	var photoViewer = Alloy.createController('LandscapePhotoViewer').getView();
	photoViewer.open();
}

Ti.Gesture.addEventListener('orientationchange', function(e) {
	if(e.orientation === Ti.UI.LANDSCAPE_LEFT || e.orientation === Ti.UI.LANDSCAPE_RIGHT) {
		openGallery();
	}
});

*index.tss*

".container": {
	backgroundColor:"white",
	width : Ti.UI.FILL,
	height : Ti.UI.FILL,
	orientationModes: [Ti.UI.PORTRAIT]
},
"#title": {
	width: Ti.UI.FILL,
	height: Ti.UI.SIZE,
	color: "orange",
	font : {
		fontSize : 30
	},
	textAlign : "center"
},
"#indexView":{
	width : Ti.UI.FILL,
	height : Ti.UI.FILL,
	layout : 'vertical',
	top : 30
},
"#galleryOpen":{
	width : Ti.UI.FILL,
	height : Ti.UI.SIZE,
	top : 30
}

*index.xml*

<Alloy>
	<Window id="win" class="container">
		<View id="indexView">
			<Label id="title">Landscape Photo Test</Label>
			<Button id="galleryOpen" onClick="openGallery">Open Gallery</Button>
		</View>
	</Window>
</Alloy>

*LandscapePhotoViewer.js*

var PHOTOS = [
	'images/1.jpg',
	'images/2.jpg',
	'images/3.jpg',
	'images/4.jpg'
];

var galleryArray = [];

function constructGallery() {
	for(var x = 0; x < 4; x++) {
		var imgPhoto = Ti.UI.createImageView({
			image: PHOTOS[x],
			height: Ti.UI.SIZE,
			width: Ti.UI.FILL
		});

		galleryArray.push(imgPhoto);
	}

	$.scroll.setViews(galleryArray);
}

function backUp() {
	Alloy.Globals.photoViewerOpen = false;
	$.galleryWin.close();
}
Alloy.Globals.photoViewerOpen = true;
constructGallery();

*LandscapePhotoViewer.tss*

"#galleryWin":{
	height : Ti.UI.FILL,
	width : Ti.UI.FILL,
	backgroundColor : "orange",
	fullscreen : true,
	modal : true,
	orientationModes: [Ti.UI.LANDSCAPE_RIGHT, Ti.UI.LANDSCAPE_LEFT]
},
"#backButton":{
	width : 60,
	height : 30,
	backgroundColor : "red",
	color : "white",
	top : 10,
	right : 10,
	zIndex : 10,
	textAlign : "center"
},
"#scroll":{
	height : Ti.UI.FILL,
	width : Ti.UI.FILL,
	backgroundColor: 'transparent'
}

*LandscapePhotoViewer.xml*

<Alloy>
	<Window id="galleryWin">
		<Label id="backButton" onClick="backUp">Close</Label>
		<ScrollableView id="scroll" />
	</Window>
</Alloy>

Attachments

File	Date	Size
LANDSCAPE_LEFT.jpg	2014-01-09T19:45:46.000+0000	1674403
LANDSCAPE_RIGHT.jpg	2014-01-09T19:45:46.000+0000	1708696
left.png	2014-01-13T04:43:25.000+0000	136704
right.png	2014-01-13T04:43:25.000+0000	138582

Comments

Sabil Rahim 2014-01-14

simplified commonjs code

   var win1 = Titanium.UI.createWindow({backgroundColor:'white'});
   var opened = false;
   function openModal() {
   	if(opened){
   		return;
   	}
       var winModal = Titanium.UI.createWindow({
       	backgroundColor:'red',
       	modal:true,
       	orientationModes:[Ti.UI.LANDSCAPE_RIGHT, Ti.UI.LANDSCAPE_LEFT]
       
       });
   
       var label = Ti.UI.createLabel({text:"Close Window"});
       label.addEventListener('click',function(){
       	opened = false;
       	winModal.close();
       });
       winModal.add(label);
       opened =true;
       winModal.open();
   }
   
   
   Ti.Gesture.addEventListener('orientationchange', function(e) {
       if(e.orientation === Ti.UI.LANDSCAPE_LEFT || e.orientation === Ti.UI.LANDSCAPE_RIGHT) {
           openModal();
       }
   });
   
   win1.open();

Sabil Rahim 2014-01-15

https://github.com/appcelerator/titanium_mobile/pull/5225
Vishal Duggal 2014-01-22

PR merged
Neha Mittal 2014-04-23

Verified fix with below environment: Appc Studio: 3.3.0.201404211130 SDK build: 3.3.0.v20140422163054 acs: 1.0.14 npm: 1.3.2 alloy: 1.4.0-dev CLI: titanium-3.3.0-dev titanium-code-processor:1.1.1-beta1 Xcode: 5.1.1 Osx: Mavericks(10.9.2) Device: iPhone 5C( iOS 7.1) Landscape orientation is working fine with code provided in comments. Hence Closing the issue.

JSON Source