diff options
Diffstat (limited to 'public/assets/javascripts')
7 files changed, 128 insertions, 9 deletions
diff --git a/public/assets/javascripts/rectangles/engine/scenery/move.js b/public/assets/javascripts/rectangles/engine/scenery/move.js index 6229162..94a4e52 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/move.js +++ b/public/assets/javascripts/rectangles/engine/scenery/move.js @@ -28,7 +28,7 @@ Scenery.move = function(base){ } // load the modal - app.router.editorView.mediaEditor.pick(base) + app.controller.pick(base) if (! (editor.permissions.move || editor.permissions.resize) ) { e.clickAccepted = false diff --git a/public/assets/javascripts/rectangles/models/wall.js b/public/assets/javascripts/rectangles/models/wall.js index b2a5b12..cc298c6 100644 --- a/public/assets/javascripts/rectangles/models/wall.js +++ b/public/assets/javascripts/rectangles/models/wall.js @@ -45,6 +45,9 @@ window.Wall = (function(){ if (Scenery.nextMedia) { Scenery.addNextToWall(base) } + else { + app.controller.hideExtras() + } } }) } diff --git a/public/assets/javascripts/ui/_router.js b/public/assets/javascripts/ui/_router.js index 886b8be..c0f35b6 100644 --- a/public/assets/javascripts/ui/_router.js +++ b/public/assets/javascripts/ui/_router.js @@ -61,7 +61,7 @@ var SiteRouter = Router.extend({ app.mode.builder = true app.launch() - this.builderView = new BuilderView() + this.builderView = app.controller = new BuilderView() this.builderView.load(name) }, @@ -92,7 +92,7 @@ var SiteRouter = Router.extend({ layout = slugify(layout) window.history.pushState(null, document.title, "/project/new/" + layout) - this.editorView = new EditorView() + this.editorView = app.controller = new EditorView() this.editorView.loadLayout(layout) }, @@ -109,7 +109,7 @@ var SiteRouter = Router.extend({ app.mode.editor = true app.launch() - this.editorView = new EditorView() + this.editorView = app.controller = new EditorView() this.editorView.load(name) }, @@ -117,7 +117,7 @@ var SiteRouter = Router.extend({ app.mode.editor = true app.launch() - this.readerView = new ReaderView() + this.readerView = app.controller = new ReaderView() this.readerView.load(name) }, diff --git a/public/assets/javascripts/ui/editor/EditorView.js b/public/assets/javascripts/ui/editor/EditorView.js index 322637e..4067c4d 100644 --- a/public/assets/javascripts/ui/editor/EditorView.js +++ b/public/assets/javascripts/ui/editor/EditorView.js @@ -37,6 +37,14 @@ var EditorView = View.extend({ readyLayout: function(data){ data.isNew = true this.ready(data) + }, + + pick: function(scenery){ + this.mediaEditor.pick(scenery) + }, + + hideExtras: function(){ + this.mediaEditor.hide() } }) diff --git a/public/assets/javascripts/ui/editor/MediaEditor.js b/public/assets/javascripts/ui/editor/MediaEditor.js index aea78aa..4e1132c 100644 --- a/public/assets/javascripts/ui/editor/MediaEditor.js +++ b/public/assets/javascripts/ui/editor/MediaEditor.js @@ -5,6 +5,7 @@ var MediaEditor = FormView.extend({ events: { "click .playButton": "togglePlaying", "mousedown [name=keyframe]": "stopPropagation", + "mousedown": "stopPropagation", "change [name=keyframe]": "seek", "change [name=autoplay]": "setAutoplay", "change [name=loop]": "setLoop", @@ -17,7 +18,6 @@ var MediaEditor = FormView.extend({ this.$name = this.$("[name=name]") this.$description = this.$("[name=description]") - this.$autoplay = this.$("[name=autoplay]") // image fields this.$widthDimension = this.$("[name=width]") @@ -79,7 +79,13 @@ var MediaEditor = FormView.extend({ break } + }, + hide: function(scenery){ + if (this.scenery) { + this.unbind() + } + this.toggle(false) }, seek: function(){ @@ -88,7 +94,6 @@ var MediaEditor = FormView.extend({ this.scenery.media.keyframe = n }, - setAutoplay: function(){ var checked = this.$autoplay.prop('checked') this.scenery.media.autoplay = checked diff --git a/public/assets/javascripts/ui/reader/MediaPlayer.js b/public/assets/javascripts/ui/reader/MediaPlayer.js new file mode 100644 index 0000000..74054b4 --- /dev/null +++ b/public/assets/javascripts/ui/reader/MediaPlayer.js @@ -0,0 +1,92 @@ + +var MediaPlayer = FormView.extend({ + el: "#mediaPlayer", + + events: { + "click .playButton": "togglePlaying", + "mousedown": "stopPropagation", + }, + + initialize: function(opt){ + this.parent = opt.parent + this.__super__.initialize.call(this) + + this.$name = this.$(".name") + this.$description = this.$(".description") + + // image fields + this.$dimensions = this.$(".dimensions") + + // video fields + this.$playButton = this.$(".playButton") + }, + + toggle: function(state) { + this.$el.toggleClass("active", state); + }, + + togglePlaying: function(){ + var state = this.scenery.toggle() + this.$playButton.toggleClass("playing", ! state) + }, + + pick: function(scenery) { + var media = scenery.media + + if (this.scenery) { + this.unbind() + } + if (media.type == "image") { + if ((! media.title || ! media.title.length) && (! media.description || ! media.description.length)) { + this.hide() + return + } + } + + this.bind(scenery) + this.$el.addClass("active") + + this.$name.html(media.title) + this.$description.html(media.description) + + switch (media.type) { + case "image": + this.$(".image").show() + this.$(".video").hide() + + this.$widthDimension.html( Number(media.widthDimension) || "" ) + this.$heightDimension.html( Number(media.heightDimension) || "" ) + this.$units.html( media.units || "cm" ) + + break + + case "youtube": + case "vimeo": + case "video": + this.$(".video").show() + this.$(".image").hide() + + this.$playButton.toggleClass("playing", ! this.scenery.paused()) + + break + } + }, + + hide: function(scenery){ + if (this.scenery) { + this.unbind() + } + this.toggle(false) + }, + + bind: function(scenery){ + this.scenery = scenery + this.scenery.mx.bound = true + }, + + unbind: function(){ + this.scenery.mx.bound = false + this.scenery = null + }, + +}) diff --git a/public/assets/javascripts/ui/reader/ReaderView.js b/public/assets/javascripts/ui/reader/ReaderView.js index bbdd437..a2c2983 100644 --- a/public/assets/javascripts/ui/reader/ReaderView.js +++ b/public/assets/javascripts/ui/reader/ReaderView.js @@ -8,6 +8,7 @@ var ReaderView = View.extend({ }, initialize: function(){ + this.mediaPlayer = new MediaPlayer ({ parent: this }) }, load: function(name){ @@ -27,8 +28,10 @@ var ReaderView = View.extend({ editor.permissions.clear() - // - + this.listen() + }, + + listen: function(){ var base = this $(window).on('message', function(event){ @@ -55,6 +58,14 @@ var ReaderView = View.extend({ if (this.spinning) { scene.camera.rotationY -= 1/180 } + }, + + pick: function(scenery){ + this.mediaPlayer.pick(scenery) + }, + + hideExtras: function(){ + this.mediaPlayer.hide() } }) |