layout editor stuff

9 files changed, 125 insertions, 34 deletions

diff --git a/public/assets/javascripts/rectangles/models/floor.js b/public/assets/javascripts/rectangles/models/floor.js
index a144ecd..3f452e1 100644
--- a/public/assets/javascripts/rectangles/models/floor.js
+++ b/public/assets/javascripts/rectangles/models/floor.js
@@ -36,8 +36,40 @@
 
 		this.mx.forEach(function(mx, index){
 			$(mx.el).bind({
+        contextmenu: function(e){
+          if (! (e.ctrlKey || e.metaKey || e.shiftKey) ) {
+            e.preventDefault()
+          }
+          if (Scenery.nextMedia) {
+            e.preventDefault()
+            Scenery.nextMedia = null
+            app.tube('cancel-scenery')
+          }
+          else if (Scenery.nextWallpaper) {
+            e.preventDefault()
+            Scenery.nextWallpaper = null
+            app.tube('cancel-wallpaper')
+          }
+        },
+
 				mousedown: function(e){
-					if (Scenery.nextWallpaper) {
+				  
+				  // right-click
+				  if (e.which == 3) {
+				    if (Scenery.nextMedia) {
+				      e.preventDefault()
+              Scenery.nextMedia = null
+              app.tube('cancel-scenery')
+				    }
+				    else if (Scenery.nextWallpaper) {
+				      e.preventDefault()
+              Scenery.nextWallpaper = null
+              app.tube('cancel-wallpaper')
+				    }
+				    return
+				  }
+
+          if (Scenery.nextWallpaper) {
 					  var oldState = base.serialize()
 						base.wallpaper(Scenery.nextWallpaper)
 						// Scenery.nextWallpaper = null
diff --git a/public/assets/javascripts/ui/_router.js b/public/assets/javascripts/ui/_router.js
index 794079e..bda0960 100644
--- a/public/assets/javascripts/ui/_router.js
+++ b/public/assets/javascripts/ui/_router.js
@@ -212,7 +212,6 @@ var SiteRouter = Router.extend({
 		// this.documentModal.destroy(name)
 	},
 
-
 	testWallpaper: function(e){
 		var content = document.getElementById("content")
 		content.style.width = "680px"
diff --git a/public/assets/javascripts/ui/builder/BuilderInfo.js b/public/assets/javascripts/ui/builder/BuilderInfo.js
index 67834e7..c708275 100644
--- a/public/assets/javascripts/ui/builder/BuilderInfo.js
+++ b/public/assets/javascripts/ui/builder/BuilderInfo.js
@@ -10,8 +10,10 @@ var BuilderInfo = View.extend({
 		"change [name=width]": 'changeWidth',
 		"change [name=depth]": 'changeDepth',
 		"change [name=height]": 'changeHeight',
+		"keydown [name=width]": 'enterWidth',
+		"keydown [name=depth]": 'enterDepth',
+		"keydown [name=height]": 'enterHeight',
 		"change [name=units]": 'changeUnits',
-		"change [name=resolution]": 'changeResolution',
 		"change [name=viewHeight]": 'changeViewHeight',
 		"click [data-role=destroy-room]": 'destroy',
 	},
@@ -85,16 +87,25 @@ var BuilderInfo = View.extend({
 		this.hide()
 	},
 
+	enterWidth: function(e){
+	  if (e.keyCode == 13) this.changeWidth(e)
+	},
 	changeWidth: function(e){
 		e.stopPropagation()
 		this.room.rect.x.setLength( this.$width.unitVal() )
     Rooms.rebuild()
 	},
+	enterDepth: function(e){
+	  if (e.keyCode == 13) this.changeDepth(e)
+	},
 	changeDepth: function(e){
 		e.stopPropagation()
 		this.room.rect.y.setLength( this.$depth.unitVal() )
     Rooms.rebuild()
 	},
+	enterHeight: function(e){
+	  if (e.keyCode == 13) this.changeHeight(e)
+	},
 	changeHeight: function(e){
 		e.stopPropagation()
 		this.room.height = this.$height.unitVal()
diff --git a/public/assets/javascripts/ui/editor/Presets.js b/public/assets/javascripts/ui/editor/Presets.js
index be86af3..ab311ef 100644
--- a/public/assets/javascripts/ui/editor/Presets.js
+++ b/public/assets/javascripts/ui/editor/Presets.js
@@ -84,15 +84,12 @@ var Presets = View.extend({
     this.parent.colorControl.modes.forEach(function(mode){
     	if (! preset[mode].length) {
     		Walls.setWallpaper[mode](preset[mode])
-				Walls.setColor[mode](preset[mode].color)
 			}
 			else {
-				if (preset[mode].length) {
-					Walls.clearWallpaper[mode]()
-				}
-				Walls.setColor[mode](preset[mode])
-				this.parent.colorControl.$swatch[ mode ].css("background-color", rgb_string(preset[mode]))
-    	}
+        Walls.clearWallpaper[mode]()
+      }
+      Walls.setColor[mode](preset[mode])
+      this.parent.colorControl.$swatch[ mode ].css("background-color", rgb_string(preset[mode]))
     }.bind(this))
     this.parent.colorControl.setMode(preset.wall.color ? "wall" : "floor")
     Walls.setBodyColor()
diff --git a/public/assets/javascripts/ui/lib/UploadView.js b/public/assets/javascripts/ui/lib/UploadView.js
index efaa8c9..2d2c2c7 100644
--- a/public/assets/javascripts/ui/lib/UploadView.js
+++ b/public/assets/javascripts/ui/lib/UploadView.js
@@ -4,12 +4,12 @@ var UploadView = View.extend({
   // define uploadAction
 
 	events: {
-		"change .file": "handleFileSelect",
+		"change [type=file]": "handleFileSelect",
 		"submit form": "preventDefault",
 	},
 	
 	initialize: function(){
-		this.$file = this.$(".file")
+		this.$file = this.$("[type=file]")
 		this.$upload = this.$(".upload-icon")
   },
   
diff --git a/public/assets/javascripts/util.js b/public/assets/javascripts/util.js
index 367e20e..2fa994a 100644
--- a/public/assets/javascripts/util.js
+++ b/public/assets/javascripts/util.js
@@ -185,3 +185,58 @@ function bitcount(v) {
   v = (v & 0x33333333) + ((v >>> 2) & 0x33333333);
   return ((v + (v >>> 4) & 0xF0F0F0F) * 0x1010101) >>> 24;
 }
+
+// Function.bind polyfill
+if (!Function.prototype.bind) {
+  Function.prototype.bind = function(oThis) {
+    if (typeof this !== 'function') {
+      // closest thing possible to the ECMAScript 5
+      // internal IsCallable function
+      throw new TypeError('Function.prototype.bind - what is trying to be bound is not callable');
+    }
+
+    var aArgs   = Array.prototype.slice.call(arguments, 1),
+        fToBind = this,
+        fNOP    = function() {},
+        fBound  = function() {
+          return fToBind.apply(this instanceof fNOP && oThis
+                 ? this
+                 : oThis,
+                 aArgs.concat(Array.prototype.slice.call(arguments)));
+        };
+
+    fNOP.prototype = this.prototype;
+    fBound.prototype = new fNOP();
+
+    return fBound;
+  };
+}
+
+// rAF polyfill
+(function() {
+    var lastTime = 0;
+    var vendors = ['ms', 'moz', 'webkit', 'o'];
+    for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
+        window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
+        window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] 
+                                   || window[vendors[x]+'CancelRequestAnimationFrame'];
+    }
+ 
+    if (!window.requestAnimationFrame)
+        window.requestAnimationFrame = function(callback, element) {
+            var currTime = new Date().getTime();
+            var timeToCall = Math.max(0, 16 - (currTime - lastTime));
+            var id = window.setTimeout(function() { callback(currTime + timeToCall); }, 
+              timeToCall);
+            lastTime = currTime + timeToCall;
+            return id;
+        };
+ 
+    if (!window.cancelAnimationFrame)
+        window.cancelAnimationFrame = function(id) {
+            clearTimeout(id);
+        };
+}());
+
+
+
diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css
index 28eabd9..9df1573 100755
--- a/public/assets/stylesheets/app.css
+++ b/public/assets/stylesheets/app.css
@@ -1507,9 +1507,12 @@ border-left: 1px solid black;
 
 .toolButton {
 	border: 1px solid;
-	display: inline-block;
-	width: 100%;
-	margin-top: 5px;
+	position: relative;
+	display: block;
+	float: right;
+	margin-left: 3px;
+  width: 35px;
+  height: 35px;
 	font-size: 14px;
 	font-weight: 300;
 }
@@ -1524,9 +1527,9 @@ border-left: 1px solid black;
 }
 .wallpaper form {
   position: relative;
-  padding: 2px 0 0 0;
   font-size: 14px;
   font-weight: 300;
+  overflow: hidden;
 }
 .toolButton:hover {
 	background:black;
@@ -1550,14 +1553,19 @@ border-left: 1px solid black;
 .wallpaper .wallpaperRemove:hover img {
   -webkit-filter:invert(100%);
 }
+.wallpaperUpload .upload-icon {
+  margin: 0 8px;
+}
 .wallpaperUpload .upload-icon.uploading {
 }
 .wallpaperUpload .upload-icon.uploading:before {
 	content: ' ' !important;
 	background-image: url("/assets/img/loader.gif");
 	background-repeat: no-repeat;
-	width: 40px;
-	height: 40px;
+	background-position: center;
+	width: 100%;
+	height: 100%;
+	position:absolute;top:0;left:0;
 }
 .wallpaperUpload input[type="text"]{
   border: 1px solid #ccc;
@@ -1575,7 +1583,7 @@ border-left: 1px solid black;
   top: 0;
   left: 0;
 	background: blue;
-	height: 28px;
+	height: 100%;
 	width: 100%;
 	opacity: 0;
 	cursor: pointer;
diff --git a/views/controls/editor/media-drawer.ejs b/views/controls/editor/media-drawer.ejs
index d1e2c99..1404d86 100644
--- a/views/controls/editor/media-drawer.ejs
+++ b/views/controls/editor/media-drawer.ejs
@@ -26,7 +26,7 @@
 		<form>
 			<span class="ion-ios7-upload-outline upload-icon"></span><br>
 			Upload File
-			<input type="file" accept="image/*" class="file" multiple>
+			<input type="file" accept="image/*" multiple>
 		</form>
 		<small>~ or ~</small><br>
 		<input type="text" placeholder="Enter Vimeo or YouTube or image link" class="url">
diff --git a/views/controls/editor/wallpaper.ejs b/views/controls/editor/wallpaper.ejs
index ed175ae..69a60ec 100644
--- a/views/controls/editor/wallpaper.ejs
+++ b/views/controls/editor/wallpaper.ejs
@@ -9,31 +9,20 @@
 			<span class="swatch" style="background-image:url(/assets/img/plainpattern.png)"></span>
 			<span class="swatch" style="background-image:url(/assets/img/plainpattern2.png)"></span>
   </span>
+
+  <input type="text" class="url" placeholder="enter a url">
   
   <div class="wallpaperUpload toolButton">
     <form>
       <span class="ion-ios7-upload-outline upload-icon"></span>
-      <label>Upload Wallpaper</label>
-      <input type="file" accept="image/*" class="file" multiple>
+      <input type="file" accept="image/*" multiple>
     </form>
-<!-- 
-    <input type="text" placeholder="Enter Image URL" class="url">
- -->
   </div>
   
   <div class="wallpaperRemove toolButton">
     <span class="ion-scissors"></span>
-    <label>Remove Wallpaper</label>
   </div>
 
-<!--
-  <div class="wallpaperResize toolButton">
-    <span class="ion-arrow-resize"></span>
-    <label>Resize Wallpaper</label>
-  </div>
--->
-  <input type="text" class="url" placeholder="enter a url">
-
   <div class="wallpaperResizeControls">
     <span data-role="wallpaper-position" class="ion-arrow-expand"></span>
     <input data-role="wallpaper-scale" type="range" min="0.01" max="8.0" step="0.1" value="1.0">