don’t put things in the dom until you’re in landscape mode

2 files changed, 25 insertions, 4 deletions

diff --git a/public/assets/javascripts/ui/reader/ReaderView.js b/public/assets/javascripts/ui/reader/ReaderView.js
index db2ab2f..aea681a 100644
--- a/public/assets/javascripts/ui/reader/ReaderView.js
+++ b/public/assets/javascripts/ui/reader/ReaderView.js
@@ -50,8 +50,27 @@ var ReaderView = View.extend({
 	
 	ready: function(data){
 		$("#map").hide()
-
     this.data = data
+    var is_landscape = window.innerWidth > window.innerHeight
+
+		if (is_desktop || (is_mobile && is_landscape)) {
+		  this.build(data)
+		  return
+		}
+		
+		// don't build anything until we're in landscape mode, otherwise ios might crash
+		var orientationFn = orientationchange.bind(this)
+    window.addEventListener('orientationchange', orientationFn)
+    function orientationchange (e) {
+      var is_landscape = window.innerWidth > window.innerHeight
+      if (is_landscape) {
+        window.removeEventListener('orientationchange', orientationFn)
+        this.build(data)
+      }
+    }
+  },
+  
+  build: function(data){
 		data.rooms && Rooms.deserialize(data.rooms)
 		data.walls && Walls.deserialize(data.walls)
 		data.media && Scenery.deserialize(data.media)
diff --git a/public/assets/javascripts/vendor/polyfill.js b/public/assets/javascripts/vendor/polyfill.js
index 8e4b9dc..499cbc5 100644
--- a/public/assets/javascripts/vendor/polyfill.js
+++ b/public/assets/javascripts/vendor/polyfill.js
@@ -53,10 +53,12 @@ function has3d(){
 })( navigator.userAgent );
 
 // Naive useragent detection pattern
-var is_iphone = (navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i));
-var is_ipad = (navigator.userAgent.match(/iPad/i));
+var is_iphone = (navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))
+var is_ipad = (navigator.userAgent.match(/iPad/i))
 var is_android = (navigator.userAgent.match(/Android/i))
-var is_mobile = is_iphone || is_ipad || is_android;
+var is_mobile = is_iphone || is_ipad || is_android
+var is_desktop = ! is_mobile;
+
 
 // rAF shim
 (function() {