Details

      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

        1. LANDSCAPE_LEFT.jpg
          LANDSCAPE_LEFT.jpg
          1.60 MB
        2. LANDSCAPE_RIGHT.jpg
          LANDSCAPE_RIGHT.jpg
          1.63 MB
        3. left.png
          134 kB
        4. right.png
          135 kB

          Activity

            People

            • Assignee:
              srahim Sabil Rahim
              Reporter:
              shockoe SHOCKOE TEAM
              Reviewer:
              Pedro Enrique (Inactive)
            • Watchers:
              0 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved:

                Backbone Issue Sync

                • Titanium SDK/CLI <> Titanium Mobile
                  Synced with:
                  TIMOB-18181
                  Sync status:
                  ERROR
                  Last received:
                  Last sent:

                  Git Integration