blueprint integration into views

4 files changed, 253 insertions, 0 deletions

diff --git a/public/assets/javascripts/ui/blueprint/BlueprintScale.js b/public/assets/javascripts/ui/blueprint/BlueprintScale.js
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/public/assets/javascripts/ui/blueprint/BlueprintScale.js
diff --git a/public/assets/javascripts/ui/blueprint/BlueprintUpload.js b/public/assets/javascripts/ui/blueprint/BlueprintUpload.js
new file mode 100644
index 0000000..fd3a659
--- /dev/null
+++ b/public/assets/javascripts/ui/blueprint/BlueprintUpload.js
@@ -0,0 +1,122 @@
+
+var BlueprintUploadView = UploadView.extend({
+	el: ".blueprintUpload",
+	
+	mediaTag: "blueprint",
+	createAction: "/api/media/new",
+	uploadAction: "/api/media/upload",
+	listAction: "/api/media/user",
+	destroyAction: "/api/media/destroy",
+
+	events: {
+		"mousedown": 'stopPropagation',
+    "change .url": "enterUrl",
+    "keydown .url": "enterSetUrl",
+    
+    "click .blueprint": "choose",
+    "change [name=blueprint-dimensions]": "changeDimensions",
+    "change [name=blueprint-units]": "changeUnits",
+    "click #saveBlueprint": "save",
+  },
+	
+	initialize: function(opt){
+	  this.parent = opt.parent
+	  this.__super__.initialize.call(this)
+
+    this.$url = this.$(".url")
+
+    this.$blueprintMap = this.$("#blueprintMap")
+    this.$blueprintDimensionsRapper = this.$("#blueprintDimensions")
+    this.$dimensions = this.$("[name=blueprint-dimensions]")
+    this.$units = this.$("[name=blueprint-units]")
+    this.$save = this.$("#saveBlueprint")
+    
+    this.map = new Map ({ type: 'ortho' })
+    
+    this.load()
+	},
+	
+  loaded: false,
+	load: function(){
+		$.get(this.listAction, { tag: this.mediaTag }, this.populate.bind(this))
+	},
+
+	populate: function(data){
+		this.loaded = true
+		if (data && data.length) {
+		  data.forEach(this.append.bind(this))
+		  this.$(".txt").hide()
+		}
+		else {
+		  this.$(".txt").show()
+		}
+	},
+	
+	append: function(media){
+	  var $el = $("<div>")
+	  $el.data("id", media._id)
+	  $el.addClass("blueprint")
+	  this.$blueprints.append($el)
+	},
+	
+	pick: function(e){
+	  var $el = $(e.currentTarget)
+	  // load map with it
+	},
+  
+	destroy: function(_id, cb){
+		$.ajax({
+			type: "delete",
+			url: this.destroyAction,
+			data: { _id: _id, _csrf: $("[name=_csrf]").val() }
+		}).complete(cb || function(){})
+	},
+	
+	show: function(){
+    this.toggle(true)
+	},
+	hide: function(){
+		this.toggle(false)
+	},
+	toggle: function (state) {
+    this.$el.toggleClass("active", state)
+	},
+
+	addUrl: function (url){
+		Parser.loadImage(url, function(media){
+			if (! media) return
+			media._csrf = $("[name=_csrf]").val()
+			media.tag = this.mediaTag
+			
+			var request = $.ajax({
+				type: "post",
+				url: this.createAction,
+				data: media,
+			})
+			request.done(this.add.bind(this))
+			
+		}.bind(this))
+	},
+  enterUrl: function(){
+  	var url = this.$url.sanitize()
+  	this.addUrl(url)
+  	this.$url.val("")
+  },
+	enterSetUrl: function (e) {
+		e.stopPropagation()
+		if (e.keyCode == 13) {
+			setTimeout(this.enterUrl.bind(this), 100)
+		}
+	},
+	
+	add: function(media){
+	  this.append(media)
+	},
+	changeDimensions: function(){
+	},
+	changeUnits: function(){
+	},
+	save: function(){
+	},
+
+})
diff --git a/public/assets/javascripts/ui/blueprint/BlueprintView.js b/public/assets/javascripts/ui/blueprint/BlueprintView.js
new file mode 100644
index 0000000..f7ee13e
--- /dev/null
+++ b/public/assets/javascripts/ui/blueprint/BlueprintView.js
@@ -0,0 +1,39 @@
+
+var BlueprintView = View.extend({
+	el: "#blueprintView",
+	
+	events: {
+	},
+	
+	initialize: function(){
+// 		this.info = new BuilderInfo ({ parent: this })
+// 		this.toolbar = new BuilderToolbar ({ parent: this })
+// 		this.settings = new BuilderSettings ({ parent: this })
+// 		this.colorControl = new ColorControl ({ parent: this })
+// 		this.cursor = new HelpCursor({ parent: this })
+    this.blueprintUpload = new BlueprintUploadView ({ parent: this })
+	},
+
+	load: function(name){
+// 		if (! name || name == "new") {
+// 			this.ready({ isNew: true, _id: "new", name: "" })
+// 			return
+// 		}
+// 		
+// 		name = sanitize(name)
+// 		
+// 		$.get(this.action + name, this.ready.bind(this))
+	},
+	
+	ready: function(data){
+// 		this.settings.load(data)
+// 		this.info.load(data)
+	},
+	
+	hideExtras: function(){
+	},
+
+	pickWall: function(wall, pos){
+	},
+
+})
diff --git a/views/controls/builder/blueprint.ejs b/views/controls/builder/blueprint.ejs
new file mode 100644
index 0000000..e5f3257
--- /dev/null
+++ b/views/controls/builder/blueprint.ejs
@@ -0,0 +1,92 @@
+<style type="text/css">
+html,body{width:100%;height:100%;margin:0;padding:0;}
+body {
+	overflow: hidden;
+}
+#perspective,
+#perspective .mx-scene {
+	position: absolute;
+	left:0%;
+	top:0px;
+	-webkit-transform: translateZ(0);
+	transform: translateZ(0);
+}
+
+#orthographic {
+	position: absolute;
+	left:50%;
+	top:0px
+}
+.hud {
+  position: absolute;
+  top: 0;
+  left: 0;
+  padding: 10px;
+  background: white;
+}
+.ortho-hud {
+  left: 50%;
+  border-left: 1px solid black;
+}
+#url { width: 300px }
+.hud span { color: #888; cursor: pointer; }
+.hud span.active { color: #000; }
+
+#blueprintForm {
+  width: 240px;
+}
+</style>
+
+<div id="blueprintView">
+  <div id="perspective"></div>
+  <div id="orthographic"></div>
+
+  <div class="hud persp-hud">
+    <input type="text" id="url" placeholder="paste an image URL here!">
+    <span class="ion-ionic active" data-role="orbit-mode"></span>
+    <span class="ion-archive" data-role="keyboard-mode"></span>
+  </div>
+
+  <div class="hud ortho-hud">
+    <span class="ion-navigate" data-role="arrow-mode"></span>
+    <span class="ion-ios-pulse active" data-role="polyline-mode"></span>
+    <span class="ion-ios-grid-view-outline" data-role="ortho-polyline-mode"></span>
+    <span class="ion-scissors" data-role="eraser-mode"></span>
+  </div>
+
+  <div class="mediaDrawer fixed animate blueprintUpload active">
+    <span class="close">X</span>
+    <div class="box">
+    
+      <h2>Upload A Room Image</h2>
+    
+      <div id="blueprintForm">
+        <div class="wallpaperUpload toolButton">
+          <form>
+            <span class="ion-ios-upload-outline upload-icon"></span>
+            <label>Upload</label>
+            <input type="file" accept="image/*" multiple>
+          </form>
+        </div>
+        <input type="text" class="url" placeholder="Enter an image URL or...">
+      </div>
+    
+      Please tell us the scale of your map.
+      Click both corners of a wall, and then enter how long the wall is.
+    
+      <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>
+    
+        <button id="saveBlueprint">Save</button>
+      </div>
+
+    </div>
+  </div>
+</div>
\ No newline at end of file