1 files changed, 134 insertions, 0 deletions
diff --git a/public/assets/javascripts/ui/editor/MediaEditor.js b/public/assets/javascripts/ui/editor/MediaEditor.js
new file mode 100644
index 0000000..a075e6b
--- /dev/null
+++ b/public/assets/javascripts/ui/editor/MediaEditor.js
@@ -0,0 +1,134 @@
+
+var MediaEditor = FormView.extend({
+	el: "#mediaEditor",
+		
+	events: {
+		"keydown": 'stopPropagation',
+		"click [data-role=play-media]": "togglePaused",
+		"mousedown [name=keyframe]": "stopPropagation",
+		"mousedown": "stopPropagation",
+		"change [name=keyframe]": "seek",
+		"change [name=autoplay]": "setAutoplay",
+		"change [name=loop]": "setLoop",
+		"change [name=mute]": "setMute",
+		"click [data-role=destroy-media]": "destroy",
+	},
+	
+	initialize: function(opt){
+		this.parent = opt.parent
+		this.__super__.initialize.call(this)
+		
+		this.$name = this.$("[name=name]")
+		this.$description = this.$("[name=description]")
+
+		// image fields
+		this.$widthDimension = this.$("[name=width]")
+		this.$heightDimension = this.$("[name=height]")
+		this.$units = this.$("[name=units]")
+		
+		// video fields
+		this.$playButton = this.$("[data-role=play-media]")
+		this.$autoplay = this.$("[name=autoplay]")
+		this.$loop = this.$("[name=loop]")
+		this.$mute = this.$("[name=mute]")
+		this.$keyframe = this.$("[name=keyframe]")
+	},
+	
+	toggle: function(state) {
+    this.$el.toggleClass("active", state);
+	},
+	
+	togglePaused: function(state){
+		var state = this.scenery.toggle(state)
+		this.$playButton.toggleClass("paused", ! state)
+	},
+	
+	pick: function(scenery) {
+		if (this.scenery) {
+			this.unbind()
+		}
+
+		this.bind(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.val( Number(media.widthDimension) || "" )
+				this.$heightDimension.val( Number(media.heightDimension) || "" )
+				this.$units.val( media.units || "cm" )
+				
+				break
+
+			case "youtube":
+			case "vimeo":
+			case "video":
+				this.$(".video").show()
+				this.$(".image").hide()
+				
+				this.$playButton.toggleClass("paused", ! this.scenery.paused())
+				this.$autoplay.prop('checked', !! media.autoplay)
+				this.$loop.prop('checked', !! media.loop)
+				this.$mute.prop('checked', !! media.mute)
+				this.$keyframe.val( Number(media.keyframe || 0) )
+
+				break
+		}
+	},
+
+	hide: function(scenery){
+		if (this.scenery) {
+			this.unbind()
+		}
+		this.toggle(false)
+	},
+	
+	seek: function(){
+		var n = parseFloat( this.$keyframe.val() )
+		this.scenery.seek(n)
+		
+		this.scenery.media.keyframe = n
+	},
+	setAutoplay: function(){
+		var checked = this.$autoplay.prop('checked')
+		this.scenery.media.autoplay = checked
+		if (checked && this.scenery.paused()) {
+			this.togglePaused()
+		}
+	},
+	setLoop: function(){
+		var checked = this.$loop.prop('checked')
+		this.scenery.media.loop = checked
+	},
+	setMute: function(){
+		var checked = this.$mute.prop('checked')
+		this.scenery.media.mute = checked
+		this.scenery.mute(checked)
+	},
+
+	bind: function(scenery){
+		this.scenery = scenery
+		this.scenery.mx.bound = true
+	},
+	
+	unbind: function(){
+		this.scenery.mx.bound = false
+		this.scenery = null
+	},
+	
+	destroy: function(){
+		ConfirmModal.confirm("Are you sure you want to this media?", function(){
+			var scenery = this.scenery
+			this.hide()
+			Scenery.remove(scenery.id)
+		}.bind(this))
+	},
+
+})