media viewer appears

15 files changed, 150 insertions, 36 deletions

diff --git a/public/assets/javascripts/rectangles/_env.js b/public/assets/javascripts/rectangles/_env.js
index 46b43a9..00c2c44 100644
--- a/public/assets/javascripts/rectangles/_env.js
+++ b/public/assets/javascripts/rectangles/_env.js
@@ -19,6 +19,7 @@ environment.init = function(){
 		
 // 	map.center.a = scene.camera.x
 // 	map.center.b = scene.camera.z
+
 	map.center.a = 0
 	map.center.b = 0
 
diff --git a/public/assets/javascripts/ui/SiteRouter.js b/public/assets/javascripts/ui/SiteRouter.js
index 70523d7..664cbb2 100644
--- a/public/assets/javascripts/ui/SiteRouter.js
+++ b/public/assets/javascripts/ui/SiteRouter.js
@@ -79,7 +79,7 @@ var SiteRouter = Router.extend({
 
 		app.mode.editor = true
 		app.launch()
-		
+
 		layout = slugify(layout)
 		
 		window.history.pushState(null, document.title, "/project/new/" + layout)
diff --git a/public/assets/javascripts/ui/editor/EditorSettings.js b/public/assets/javascripts/ui/editor/EditorSettings.js
index ad578d2..9263dd7 100644
--- a/public/assets/javascripts/ui/editor/EditorSettings.js
+++ b/public/assets/javascripts/ui/editor/EditorSettings.js
@@ -25,14 +25,12 @@ var EditorSettings = FormView.extend({
 	},
 	
 	load: function(data){
-		this.$id.val(data._id)
-		this.$name.val(data.name)
-
+		this.action = data.isNew ? this.createAction : this.updateAction
+	},
+	
+	loadLayout: function(data){
 		data.rooms && Rooms.deserialize(data.rooms)
 		data.startPosition && scene.camera.move(data.startPosition)
-		data.privacy && this.$privacy.find("[value=" + data.privacy + "]").prop('checked', "checked")
-
-		this.action = data.isNew ? this.createAction : this.updateAction
 	},
 	
 	clone: function(){
diff --git a/public/assets/javascripts/ui/editor/EditorToolbar.js b/public/assets/javascripts/ui/editor/EditorToolbar.js
index 1942fe8..df7a974 100644
--- a/public/assets/javascripts/ui/editor/EditorToolbar.js
+++ b/public/assets/javascripts/ui/editor/EditorToolbar.js
@@ -1,10 +1,16 @@
 
 var EditorToolbar = View.extend({
-	el: "#builderToolbar",
+	el: "#editorToolbar",
 
 	events: {
 		"click [data-role='toggle-map-view']": 'toggleMap',
-		"click [data-role='toggle-layout-settings']": 'toggleSettings',
+		"click [data-role='toggle-project-settings']": 'toggleSettings',
+		"click [data-role='open-media-viewer']": 'openMediaViewer',
+		"click [data-role='resize-media']": 'resize',
+		"click [data-role='toggle-wallpaper-panel']": 'toggleWallpaper',
+		"click [data-role='toggle-light-control']": 'toggleLightControl',
+		"click [data-role='delete-media']": 'deleteMedia',
+		"click [data-role='edit-wall-text']": 'editWallText',
 	},
 	
 	initialize: function(opt){
@@ -18,5 +24,25 @@ var EditorToolbar = View.extend({
 	toggleSettings: function(){
 		this.parent.settings.toggle()
 	},
+	
+	openMediaViewer: function(){
+		this.parent.mediaViewer.show()
+		this.parent.mediaUpload.show()
+	},
+	
+	resizeMedia: function(){
+	},
+	
+	deleteMedia: function(){
+	},
+	
+	toggleWallpaper: function(){
+	},
+	
+	toggleLightControl: function(){
+	},
+	
+	editWallText: function(){
+	},
 
 })
diff --git a/public/assets/javascripts/ui/editor/EditorView.js b/public/assets/javascripts/ui/editor/EditorView.js
index 7cabeb7..1093c76 100644
--- a/public/assets/javascripts/ui/editor/EditorView.js
+++ b/public/assets/javascripts/ui/editor/EditorView.js
@@ -2,7 +2,8 @@
 var EditorView = View.extend({
 	el: "#editorView",
 	
-	action: "/api/layouts/",
+	projecttAction: "/api/projects/",
+	layoutAction: "/api/layouts/",
 
 	events: {
 	},
@@ -10,25 +11,21 @@ var EditorView = View.extend({
 	initialize: function(){
 		this.toolbar = new EditorToolbar ({ parent: this })
 		this.settings = new EditorSettings ({ parent: this })
+		this.mediaViewer = new MediaViewer ({ parent: this })
+		this.mediaUpload = new MediaUpload ({ parent: this })
 	},
 
 	load: function(name){
 	},
 	
-	loadLayout: function(name){
-		if (! name || name == "new") {
-			this.ready({ isNew: true, _id: "new", name: "" })
-			return
-		}
-		
-		name = sanitize(name)
-		
-		$.get(this.action + name, $.proxy(this.ready, this))
+	loadLayout: function(layout){
+		layout = sanitize(layout)
+		$.get(this.layoutAction + layout, $.proxy(this.ready, this))
 	},
 	
 	ready: function(data){
 		$("#map").hide()
-		this.settings.load(data)
+		this.settings.loadLayout(data)
 	},
 
 })
diff --git a/public/assets/javascripts/ui/editor/MediaUpload.js b/public/assets/javascripts/ui/editor/MediaUpload.js
new file mode 100644
index 0000000..cebb547
--- /dev/null
+++ b/public/assets/javascripts/ui/editor/MediaUpload.js
@@ -0,0 +1,23 @@
+
+var MediaUpload = View.extend({
+	el: ".fileUpload",
+
+	action: "/api/media",
+	
+	initialize: function(opt){
+		this.parent = opt.parent
+	},
+
+	show: function(){
+		this.$el.addClass("active")
+	},
+	
+	hide: function(){
+		this.$el.removeClass("active")
+	},
+
+	success: function(res){
+		window.location.pathname = "/about/" + res.name
+	},
+
+})
diff --git a/public/assets/javascripts/ui/editor/MediaViewer.js b/public/assets/javascripts/ui/editor/MediaViewer.js
new file mode 100644
index 0000000..8413e70
--- /dev/null
+++ b/public/assets/javascripts/ui/editor/MediaViewer.js
@@ -0,0 +1,41 @@
+
+var MediaViewer = ModalView.extend({
+	el: ".mediaDrawer.mediaViewer",
+	createAction: "/api/docs/new",
+	updateAction: "/api/docs/edit",
+	destroyAction: "/api/docs/destroy",
+
+	show: function(){
+		if (! this.loaded) {
+			this.load()
+		}
+		else {
+			this.__super__.show()
+		}
+	},
+
+	load: function(){
+		$.get("/api/media/user", $.proxy(this.populate, this)
+	},
+
+	populate: function(data){
+		data.forEach($.proxy(function(room){
+			var $span = $("<span>")
+			// $span.html(JSON.stringify(room))
+			$span.data("slug", room.slug)
+			$span.css("background-image", "url(" + room.photo + ")")
+			
+			this.$templates.append($span)
+		}, this))
+		this.__super__.show()
+	},
+
+	destroy: function(name, cb){
+		$.ajax({
+			type: "delete",
+			url: this.destroyAction,
+			data: { name: name, _csrf: $("[name=_csrf]").val() }
+		}).complete(cb || function(){})
+	},
+
+})
diff --git a/public/assets/javascripts/ui/lib/FormView.js b/public/assets/javascripts/ui/lib/FormView.js
index dc1801b..0106ce0 100644
--- a/public/assets/javascripts/ui/lib/FormView.js
+++ b/public/assets/javascripts/ui/lib/FormView.js
@@ -6,7 +6,10 @@ var FormView = View.extend({
 		"submit form": "save"
 	},
 
-	initialize: function(){
+	initialize: function(opt){
+		if (opt && opt.parent) {
+			this.parent = opt.parent
+		}
 		this.$form = this.$("form")
 		this.$errors = this.$(".errors")
 		this.$errorList = this.$(".errorList")
diff --git a/public/assets/javascripts/ui/lib/ModalView.js b/public/assets/javascripts/ui/lib/ModalView.js
index b90b3c4..957a54d 100644
--- a/public/assets/javascripts/ui/lib/ModalView.js
+++ b/public/assets/javascripts/ui/lib/ModalView.js
@@ -4,6 +4,12 @@ var ModalView = View.extend({
 		"click .close": 'close',
 	},
 	
+	initialize: function(opt){
+		if (opt && opt.parent) {
+			this.parent = opt.parent
+		}
+	},
+	
 	show: function(){
 		$(".mediaDrawer").removeClass("active");
 		this.$el.addClass("active");
diff --git a/public/assets/javascripts/ui/site/LayoutsModal.js b/public/assets/javascripts/ui/site/LayoutsModal.js
index 18bd27d..0604245 100644
--- a/public/assets/javascripts/ui/site/LayoutsModal.js
+++ b/public/assets/javascripts/ui/site/LayoutsModal.js
@@ -104,7 +104,6 @@ var NewProjectModal = ModalView.extend(LayoutsIndex.prototype).extend({
 	choose: function(e){
 		e && e.preventDefault()
 		var layout = this.$(".templates .active").data("slug")
-		console.log(layout)
 		if (! layout || ! layout.length) return
 		window.location.pathname = "/project/new/" + layout
 	}
diff --git a/public/assets/javascripts/ui/z_misc.js b/public/assets/javascripts/ui/z_misc.js
index 37e41c6..64b8a5b 100644
--- a/public/assets/javascripts/ui/z_misc.js
+++ b/public/assets/javascripts/ui/z_misc.js
@@ -10,11 +10,7 @@ function bind () {
 			$(this).toggleClass("icon-close", isActive);
 		})
 	}
-	
-  $(".addMedia").clickToToggle(function(isActive){
-    $(".mediaDrawer").toggleClass("active", isActive);
-    $(".fileUpload").toggleClass("active", isActive);
-  });
+
 
   $(".room1 .editBtn").click(function () {
   	var room = $(this).parent();
diff --git a/server/lib/api/index.js b/server/lib/api/index.js
index fadfa9c..bfe3632 100644
--- a/server/lib/api/index.js
+++ b/server/lib/api/index.js
@@ -1,9 +1,10 @@
 /* jshint node: true */
 
 var api = {
-	profile: require('./profile'),
 	docs: require('./docs'),
 	layouts: require('./layouts'),
+	media: require('./media'),
+	profile: require('./profile'),
 	projects: require('./projects'),
 }
 
diff --git a/views/controls/editor/media-drawer.ejs b/views/controls/editor/media-drawer.ejs
index af9ea71..f5debec 100644
--- a/views/controls/editor/media-drawer.ejs
+++ b/views/controls/editor/media-drawer.ejs
@@ -13,7 +13,7 @@
 	<img class="floatingImg">
 </div>
 
-<div class="mediaDrawer fixed animate">
+<div class="mediaDrawer fixed animate mediaViewer">
 	<h2><a href="#" class="yourMedia active">Your Media</a> – <a href="#" class="foundToggle">Found Media</a></h2><br>
 	<h3 class="editBtn" id="deleteMedia">delete media</h3>
 	<div class="myMedia">
diff --git a/views/controls/editor/toolbar.ejs b/views/controls/editor/toolbar.ejs
index 37f8114..f380cc8 100644
--- a/views/controls/editor/toolbar.ejs
+++ b/views/controls/editor/toolbar.ejs
@@ -1,9 +1,30 @@
 <div class="edit menu vvbox" id="editorToolbar">
-	<span class="icon-ios7-photos-outline addMedia" data-info="add media"></span>
-	<span class="icon-arrow-resize" data-info="resize media"></span>
-	<span class="icon-ios7-keypad-outline" data-info="add wallpaper"></span>
-	<span class="icon-ios7-sunny-outline" data-info="light control"></span>
-	<span class="icon-ios7-trash-outline delete-image-toggle" data-info="delete images"></span>
-	<span class="icon-ios7-compose-outline edit-text-toggle" data-info="edit wall text"></span>
-	<span class="icon-key" data-info="room settings"></span>
+	<span
+		data-role='open-media-viewer'
+		data-info="add media"
+		class="icon-ios7-photos-outline"></span>
+	<span
+		data-role='resize-media'
+		data-info="resize media"
+		class="icon-arrow-resize"></span>
+	<span
+		data-role='toggle-wallpaper-panel'
+		data-info="add wallpaper"
+		class="icon-ios7-keypad-outline"></span>
+	<span
+		data-role='toggle-light-control'
+		data-info="light control"
+		class="icon-ios7-sunny-outline"></span>
+	<span
+		data-role='delete-media'
+		data-info="delete media"
+		class="icon-ios7-trash-outline"></span>
+	<span
+		data-role='edit-wall-text'
+		data-info="edit wall text"
+		class="icon-ios7-compose-outline"></span>
+	<span
+		data-role='toggle-project-settings'
+		data-info="room settings"
+		class="icon-key"></span>
 </div>
diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs
index 3b3ee8f..a67b80c 100644
--- a/views/partials/scripts.ejs
+++ b/views/partials/scripts.ejs
@@ -64,6 +64,8 @@
 
 <script type="text/javascript" src="/assets/javascripts/ui/editor/EditorSettings.js"></script>
 <script type="text/javascript" src="/assets/javascripts/ui/editor/EditorToolbar.js"></script>
+<script type="text/javascript" src="/assets/javascripts/ui/editor/MediaUpload.js"></script>
+<script type="text/javascript" src="/assets/javascripts/ui/editor/MediaViewer.js"></script>
 <script type="text/javascript" src="/assets/javascripts/ui/editor/EditorView.js"></script>
 
 <script type="text/javascript" src="/assets/javascripts/ui/SiteRouter.js"></script>