basic media editor

4 files changed, 77 insertions, 2 deletions

diff --git a/public/assets/javascripts/rectangles/engine/scenery/move.js b/public/assets/javascripts/rectangles/engine/scenery/move.js
index bad0a55..aa7ddd1 100644
--- a/public/assets/javascripts/rectangles/engine/scenery/move.js
+++ b/public/assets/javascripts/rectangles/engine/scenery/move.js
@@ -26,6 +26,12 @@ Scenery.move = function(base){
 			Scenery.remove(base.id)
 			return
 		}
+
+		if (editor.permissions.pick) {
+			// load the modal
+			app.router.editorView.mediaEditor.pick(base)
+		}
+
 		if (! (editor.permissions.move || editor.permissions.resize) ) {
 			e.clickAccepted = false
 			return
diff --git a/public/assets/javascripts/ui/editor/EditorToolbar.js b/public/assets/javascripts/ui/editor/EditorToolbar.js
index 4a7c3e8..a3abc5a 100644
--- a/public/assets/javascripts/ui/editor/EditorToolbar.js
+++ b/public/assets/javascripts/ui/editor/EditorToolbar.js
@@ -87,7 +87,7 @@ var EditorToolbar = View.extend({
 
 var editor = new function(){
 	this.permissions = new Permissions({
-	  'pick': false,
+	  'pick': true,
 		'move': true,
 		'resize': false,
 		'destroy': false,
diff --git a/public/assets/javascripts/ui/editor/EditorView.js b/public/assets/javascripts/ui/editor/EditorView.js
index 2bb2d61..017e241 100644
--- a/public/assets/javascripts/ui/editor/EditorView.js
+++ b/public/assets/javascripts/ui/editor/EditorView.js
@@ -13,6 +13,7 @@ var EditorView = View.extend({
 		this.settings = new EditorSettings ({ parent: this })
 		this.mediaViewer = new MediaViewer ({ parent: this })
 		this.mediaUpload = new MediaUpload ({ parent: this })
+		this.mediaEditor = new MediaEditor ({ parent: this })
 		this.wallpaperPicker = new WallpaperPicker ({ parent: this })
 		this.lightControl = new LightControl ({ parent: this })
 	},
@@ -39,4 +40,3 @@ var EditorView = View.extend({
 	}
 
 })
-
diff --git a/public/assets/javascripts/ui/editor/MediaEditor.js b/public/assets/javascripts/ui/editor/MediaEditor.js
new file mode 100644
index 0000000..8d6d517
--- /dev/null
+++ b/public/assets/javascripts/ui/editor/MediaEditor.js
@@ -0,0 +1,69 @@
+
+var MediaEditor = FormView.extend({
+	el: "#mediaEditor",
+		
+	events: {
+	},
+
+	initialize: function(opt){
+		this.parent = opt.parent
+		this.__super__.initialize.call(this)
+		
+		this.$name = this.$("[name=name]")
+		this.$description = this.$("[name=description]")
+		this.$autoplay = this.$("[name=autoplay]")
+
+		// image fields
+		this.$widthDimension = this.$("[name=width]")
+		this.$heightDimension = this.$("[name=height]")
+		this.$units = this.$("[name=units]")
+		
+		// video fields
+		this.$playButton = this.$(".play")
+		this.$loop = this.$("[name=loop]")
+		this.$mute = this.$("[name=mute]")
+		this.$keyframe = this.$("[name=keyframe]")
+	},
+	
+	toggle: function(state) {
+    this.$el.toggleClass("active", state);
+	},
+	
+	pick: function(scenery) {
+		this.$el.addClass("active")
+		
+		var media = scenery.media
+		
+		this.$name.val(media.title)
+		this.$description.val(media.description)
+		
+		switch (media.type) {
+			case "image":
+				this.$(".image").show()
+				this.$(".video").hide()
+				/*
+				this.$widthDimension
+				this.$heightDimension
+				this.$units
+				*/
+				
+				break
+
+			case "youtube":
+			case "vimeo":
+			case "video":
+				this.$(".video").show()
+				this.$(".image").hide()
+				
+				/*
+				this.$loop
+				this.$mute
+				this.$keyframe
+				*/
+				
+				
+				break
+		}
+	},
+
+})