Merge pull request #374 from koenbok/feature/rotationFix

Sets screen size to correct size after orientation change on device
koenbok · Jun 28, 2016 · f93ae7fb20f01f399b8ed47f076cecf94192431b · f93ae7f
2 parents 0dff457 + 1b804f6
commit f93ae7fb20f01f399b8ed47f076cecf94192431b
Unified Split

Showing with 8 additions and 4 deletions.

+1 −0 framer/BackgroundLayer.coffee

+7 −4 framer/Components/DeviceComponent.coffee
diff --git a/framer/BackgroundLayer.coffee b/framer/BackgroundLayer.coffee
@@ -15,6 +15,7 @@ class exports.BackgroundLayer extends Layer
 		@sendToBack()
 		@layout()
 		@_context.domEventManager.wrap(window).addEventListener("resize", @layout)
+		Framer.Device.on("change:orientation", @layout)

 	layout: =>
 		if @parent
diff --git a/framer/Components/DeviceComponent.coffee b/framer/Components/DeviceComponent.coffee
@@ -59,8 +59,6 @@ class exports.DeviceComponent extends BaseClass

 		_.extend(@, _.defaults(options, defaults))

-		window.addEventListener("orientationchange", @_orientationChange, true)
-
 	_setup: ->

 		if @_setupDone
@@ -100,6 +98,7 @@ class exports.DeviceComponent extends BaseClass
 		@content.originY = 0

 		Framer.CurrentContext.domEventManager.wrap(window).addEventListener("resize", @_update) unless Utils.isMobile()
+		Framer.CurrentContext.domEventManager.wrap(window).addEventListener("resize", @_orientationChange) if Utils.isMobile()

 		# This avoids rubber banding on mobile
 		for layer in [@background, @phone, @viewport, @content, @screen]
@@ -117,10 +116,14 @@ class exports.DeviceComponent extends BaseClass
 		contentScaleFactor = 1 if contentScaleFactor > 1

 		if @_shouldRenderFullScreen()
+
+			width = window.innerWidth / contentScaleFactor
+			height = window.innerHeight / contentScaleFactor
+
 			for layer in [@background, @hands, @phone, @viewport, @content, @screen]
 				layer.x = layer.y = 0
-				layer.width = window.innerWidth / contentScaleFactor
-				layer.height = window.innerHeight / contentScaleFactor
+				layer.width = width
+				layer.height = height
 				layer.scale = 1

 			@content.scale = contentScaleFactor