blueprint upload styling

6 files changed, 153 insertions, 36 deletions

diff --git a/public/assets/javascripts/rectangles/engine/map/ui/ortho.js b/public/assets/javascripts/rectangles/engine/map/ui/ortho.js
index 52f7339..5be7446 100644
--- a/public/assets/javascripts/rectangles/engine/map/ui/ortho.js
+++ b/public/assets/javascripts/rectangles/engine/map/ui/ortho.js
@@ -81,7 +81,9 @@ Map.UI.Ortho = function(map){
 	}
 	base.set_tool = function(s){
 	  console.log("set tool to", s)
-	  base.tools[currentTool].cancel()
+	  if (base.tools[currentTool]) {
+	    base.tools[currentTool].cancel()
+	  }
 	  currentTool = s
 	  tool = base.tools[currentTool]
 	}
diff --git a/public/assets/javascripts/ui/blueprint/BlueprintEditor.js b/public/assets/javascripts/ui/blueprint/BlueprintScaler.js
index 227c1c8..e11b61e 100644
--- a/public/assets/javascripts/ui/blueprint/BlueprintEditor.js
+++ b/public/assets/javascripts/ui/blueprint/BlueprintScaler.js
@@ -1,6 +1,6 @@
 
-var BlueprintEditor = ModalView.extend({
-	el: ".blueprintEditor",
+var BlueprintScaler = ModalView.extend({
+	el: ".blueprintScaler",
 	
 	events: {
     "change [name=blueprint-dimensions]": "changeDimensions",
@@ -15,9 +15,22 @@ var BlueprintEditor = ModalView.extend({
     this.$units = this.$("[name=blueprint-units]")
     this.$save = this.$("#saveBlueprint")
 
-    this.map = new Map ({ type: 'ortho' })
-
-    this.$blueprintMap.append(this.map.el)
+    this.map = map = new Map ({
+      type: "ortho",
+      el: this.$blueprintMap.get(0),
+      width: window.innerWidth/2,
+      height: window.innerHeight,
+      zoom: -2,
+      zoom_min: -6.2,
+      zoom_max: 1,
+    })
+    map.ui.add_tool("arrow", new ArrowTool)
+    map.ui.add_tool("position", new PositionTool)
+    map.ui.set_tool("position")
+	},
+	
+	pick: function(){
+    
 	},
 
 	changeDimensions: function(){
diff --git a/public/assets/javascripts/ui/blueprint/BlueprintUpload.js b/public/assets/javascripts/ui/blueprint/BlueprintUpload.js
index 9467715..deb1075 100644
--- a/public/assets/javascripts/ui/blueprint/BlueprintUpload.js
+++ b/public/assets/javascripts/ui/blueprint/BlueprintUpload.js
@@ -13,7 +13,8 @@ var BlueprintUpload = UploadView.extend({
     "change .url": "enterUrl",
     "keydown .url": "enterSetUrl",
     
-    "click .blueprint": "choose",
+    "click .blueprint": "pick",
+    "click .remove": "destroy",
   },
 	
 	initialize: function(opt){
@@ -34,25 +35,33 @@ var BlueprintUpload = UploadView.extend({
 	populate: function(data){
 		this.loaded = true
 		if (data && data.length) {
+		  this.$blueprints.show()
 		  data.forEach(this.append.bind(this))
-		  this.$(".txt").hide()
+		  this.show()
 		}
 		else {
-		  this.$(".txt").show()
+		  this.show()
 		}
 	},
 	
 	pick: function(e){
 	  var $el = $(e.currentTarget)
-	  // load map with it
+	  var media = $el.data("media")
+	  this.hide()
+	  this.parent.blueprintScaler.pick(media)
 	},
   
-	destroy: function(_id, cb){
+	destroy: function(e){
+	  e.stopPropagation()
+	  var $el = $(e.currentTarget)
+	  var _id = $el.closest(".blueprint").data("id")
+    $el.remove()
 		$.ajax({
 			type: "delete",
 			url: this.destroyAction,
 			data: { _id: _id, _csrf: $("[name=_csrf]").val() }
-		}).complete(cb || function(){})
+		}).complete(function(){
+		})
 	},
 	
 	show: function(){
@@ -93,13 +102,24 @@ var BlueprintUpload = UploadView.extend({
 	},
 	
 	add: function(media){
+    this.$blueprints.show()
 	  this.append(media)
+	  this.hide()
+	  this.parent.blueprintScaler.pick(media)
 	},
 
 	append: function(media){
-	  var $el = $("<img>")
-	  $el.attr("src", media.url)
+	  var $el = $("<span>")
+	  var img = new Image ()
+	  img.src = media.url
+	  var remove = document.createElement("span")
+	  remove.className = "remove"
+	  remove.innerHTML = "<span>x</span>"
+	  
 	  $el.data("id", media._id)
+	  $el.data("media", media)
+	  $el.append(img)
+	  $el.append(remove)
 	  $el.addClass("blueprint")
 	  this.$blueprints.append($el)
 	},
diff --git a/public/assets/javascripts/ui/blueprint/BlueprintView.js b/public/assets/javascripts/ui/blueprint/BlueprintView.js
index 40c61d7..a803f12 100644
--- a/public/assets/javascripts/ui/blueprint/BlueprintView.js
+++ b/public/assets/javascripts/ui/blueprint/BlueprintView.js
@@ -12,7 +12,7 @@ var BlueprintView = View.extend({
 // 		this.colorControl = new ColorControl ({ parent: this })
 // 		this.cursor = new HelpCursor({ parent: this })
     this.blueprintUpload = new BlueprintUpload ({ parent: this })
-    this.blueprintEditor = new BlueprintEditor ({ parent: this })
+    this.blueprintScaler = new BlueprintScaler ({ parent: this })
 	},
 
 	load: function(name){
diff --git a/views/controls/blueprint/editor.ejs b/views/controls/blueprint/editor.ejs
index 6b80287..aec5e25 100644
--- a/views/controls/blueprint/editor.ejs
+++ b/views/controls/blueprint/editor.ejs
@@ -33,13 +33,88 @@ body {
 .hud span.active { color: #000; }
 
 .blueprintUpload {
-  width: 240px;
+  -webkit-transition: all 0.2s ease-in-out;
+  transition: all 0.2s ease-in-out;
+  width: 340px;
+  position: absolute;
+  top: 50%; left: 50%;
+  background: white;
+  padding: 10px;
+  border: 1px solid black;
+  box-shadow: -3px 3px #000;
+  -webkit-transform: translate3D(0%,-200%,0);
+  transform: translate3D(0%,-200%,0);
+  margin-left: -175px;
+  margin-top: -200px;
+  opacity: 0;
+}
+.blueprintUpload.active {
+  -webkit-transform: translate3D(0,0,0);
+  transform: translate3D(0,0,0);
+  opacity: 1;
+}
+.blueprintUpload .toolButton {
+  float: none;
+  width: 108px;
+  display: inline-block;
+}
+.blueprintUpload .url {
+  font-size: 15px;
+  border: 1px solid #888;
+  padding: 2px;
+  font-weight: 300;
+  position: relative;
+  top: 3px;
+  margin-right: 10px;
+  width: 190px;
+}
+.blueprintUpload p {
+  font-weight: 300;
+  font-size: 13px;
+}
+.blueprintUpload .blueprints {
+  display: none;
+}
+.blueprintUpload .blueprints h5 {
+  width: 250px;
+  margin: 10px auto;
+  padding-top: 9px;
 }
 .blueprints .blueprint {
   border: 1px solid black;
-  padding: 5px;
+  background: white;
+  padding: 0px;
+  position: relative;
+  display: inline-block;
+}
+.blueprints .blueprint img {
   height: 100px;
   max-width: 200px;
+  display: block;
+  cursor: pointer;
+}
+.blueprints .blueprint .remove {
+  box-shadow: 0 1px 2px #888;
+  cursor: pointer;
+  position: absolute;
+  color: red;
+  top: 7px;
+  right: 7px;
+  width: 20px; height: 20px;
+  text-align: center;
+  background: #fff;
+  border-radius: 50%;
+}
+.blueprints .blueprint .remove span {
+  position: relative;
+  top: -2px;
+}
+.blueprintUpload .wallpaperUpload .upload-icon {
+  margin: 0 4px;
+}
+.uploadNewBlueprint {
+  color: #333;
+  border-bottom: 1px solid;
   cursor: pointer;
 }
 </style>
@@ -63,42 +138,49 @@ body {
 </div>
 
 <div class="mediaDrawer fixed animate active blueprintEditor">
-  <span class="close">X</span>
   <div class="box">
   
-    <h2>Upload your Blueprint</h2>
-  
     <div class="blueprintUpload">
+      <h2>Upload your Blueprint</h2>
+      <p>
+        Upload an image which you will trace to make a floor plan.
+        Images should be at least 1000x1000.
+      </p>
       <input type="hidden" name="_csrf" value="[[- token ]]">
+      <input type="text" class="url" placeholder="Enter an image URL or...">
       <div class="wallpaperUpload toolButton">
         <form>
           <span class="ion-ios-upload-outline upload-icon"></span>
-          <label>Upload</label>
+          <label>Upload a File</label>
           <input type="file" accept="image/*" multiple>
         </form>
       </div>
-      <input type="text" class="url" placeholder="Enter an image URL or...">
       <div class="blueprints">
         <h5>Your uploaded blueprints</h5>
       </div>
     </div>
     
-    Please tell us the scale of your blueprint.
-    Click both corners of a wall, and then enter how long the wall is.
-    https://s3.amazonaws.com/luckyplop/fbf4295da80f1f66c5e4a248f2ea3e1ce7a22c3d.jpg
+    <div class="blueprintScaler">
+      <div class="blueprintInfo">
+        Please tell us the scale of your blueprint.
+        Click both corners of a wall, and then enter how long the wall is.
+        <br><br>
+        Do you want to <span class="uploadNewBlueprint">upload a blueprint?</span>
+      </div>
 
-    <div id="blueprintMap">
-    </div>
+      <div id="blueprintMap">
+      </div>
   
-    <div id="blueprintDimensions">
-      <input type="text" name="blueprint-dimensions">
-      <select id="blueprint-units" name="blueprint-units">
-        <option value="ft">foot</option>
-        <option value="m">meter</option>
-      </select>
+      <div id="blueprintDimensions">
+        <input type="text" name="blueprint-dimensions">
+        <select id="blueprint-units" name="blueprint-units">
+          <option value="ft">foot</option>
+          <option value="m">meter</option>
+        </select>
   
-      <button id="saveBlueprint">Save</button>
+        <button id="saveBlueprint">Save</button>
+      </div>
     </div>
-
+    
   </div>
 </div>
diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs
index 2a93e9b..136bd4d 100644
--- a/views/partials/scripts.ejs
+++ b/views/partials/scripts.ejs
@@ -128,7 +128,7 @@
 <script type="text/javascript" src="/assets/javascripts/ui/builder/BuilderInfo.js"></script>
 
 <script type="text/javascript" src="/assets/javascripts/ui/blueprint/BlueprintView.js"></script>
-<script type="text/javascript" src="/assets/javascripts/ui/blueprint/BlueprintEditor.js"></script>
+<script type="text/javascript" src="/assets/javascripts/ui/blueprint/BlueprintScaler.js"></script>
 <script type="text/javascript" src="/assets/javascripts/ui/blueprint/BlueprintUpload.js"></script>
 
 <script type="text/javascript" src="/assets/javascripts/ui/editor/EditorView.js"></script>