diff options
Diffstat (limited to 'public/assets/javascripts/ui/editor')
8 files changed, 309 insertions, 21 deletions
diff --git a/public/assets/javascripts/ui/editor/EditorSettings.js b/public/assets/javascripts/ui/editor/EditorSettings.js index b9f4560..13a6f60 100644 --- a/public/assets/javascripts/ui/editor/EditorSettings.js +++ b/public/assets/javascripts/ui/editor/EditorSettings.js @@ -2,11 +2,12 @@ var EditorSettings = FormView.extend({ el: "#editorSettings", - createAction: "/api/projects/new", - updateAction: "/api/projects/edit", - destroyAction: "/api/projects/destroy", + createAction: "/api/project/new", + updateAction: "/api/project/edit", + destroyAction: "/api/project/destroy", events: { + "keydown": 'stopPropagation', "keydown [name=name]": 'enterSubmit', "click [data-role='save-project']": 'save', "click [data-role='clone-project']": 'clone', @@ -32,7 +33,7 @@ var EditorSettings = FormView.extend({ data.startPosition && scene.camera.move(data.startPosition) if (! data.isNew) { - console.log(data) + // console.log(data) this.$id.val( data._id ) this.$name.val( data.name ) @@ -65,7 +66,7 @@ var EditorSettings = FormView.extend({ destroy: function(){ var msg = "Are you sure you want to delete the project " + sanitize(this.$name.val()) + "?" - ConfirmModal.confirm(msg, $.proxy(function(){ + ConfirmModal.confirm(msg, function(){ $.ajax({ url: this.destroyAction, type: "delete", @@ -74,7 +75,7 @@ var EditorSettings = FormView.extend({ window.location.href = "/project" } }) - }, this)) + }.bind(this)) }, toggle: function(){ diff --git a/public/assets/javascripts/ui/editor/EditorToolbar.js b/public/assets/javascripts/ui/editor/EditorToolbar.js index 210ef6c..a3abc5a 100644 --- a/public/assets/javascripts/ui/editor/EditorToolbar.js +++ b/public/assets/javascripts/ui/editor/EditorToolbar.js @@ -87,6 +87,7 @@ var EditorToolbar = View.extend({ var editor = new function(){ this.permissions = new Permissions({ + '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 b87ac83..4067c4d 100644 --- a/public/assets/javascripts/ui/editor/EditorView.js +++ b/public/assets/javascripts/ui/editor/EditorView.js @@ -2,8 +2,8 @@ var EditorView = View.extend({ el: "#editorView", - projectAction: "/api/projects/", - layoutAction: "/api/layouts/", + projectAction: "/api/project/", + layoutAction: "/api/layout/", events: { }, @@ -13,18 +13,19 @@ 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 }) }, load: function(name){ name = sanitize(name) - $.get(this.projectAction + name, $.proxy(this.ready, this)) + $.get(this.projectAction + name, this.ready.bind(this)) }, loadLayout: function(layout){ layout = sanitize(layout) - $.get(this.layoutAction + layout, $.proxy(this.readyLayout, this)) + $.get(this.layoutAction + layout, this.readyLayout.bind(this)) }, ready: function(data){ @@ -36,7 +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/LightControl.js b/public/assets/javascripts/ui/editor/LightControl.js index 20c3577..93d97ed 100644 --- a/public/assets/javascripts/ui/editor/LightControl.js +++ b/public/assets/javascripts/ui/editor/LightControl.js @@ -3,6 +3,7 @@ var LightControl = View.extend({ el: ".lightcontrol", events: { + "mousedown": "stopPropagation", }, toggle: function(){ 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)) + }, + +}) diff --git a/public/assets/javascripts/ui/editor/MediaUpload.js b/public/assets/javascripts/ui/editor/MediaUpload.js index b7fea07..86bf767 100644 --- a/public/assets/javascripts/ui/editor/MediaUpload.js +++ b/public/assets/javascripts/ui/editor/MediaUpload.js @@ -39,7 +39,7 @@ var MediaUpload = View.extend({ var url = this.$url.val() this.$url.val("") - Parser.parse(url, $.proxy(function(media){ + Parser.parse(url, function(media){ if (! media) { alert("Not a valid image/video link") return @@ -53,8 +53,8 @@ var MediaUpload = View.extend({ url: this.createAction, data: media, }) - request.done($.proxy(this.add, this)) - }, this)) + request.done(this.add.bind(this)) + }.bind(this)) }, handleFileSelect: function(e) { @@ -109,7 +109,7 @@ var MediaUpload = View.extend({ processData: false, contentType: false, }) - request.done($.proxy(this.add, this)) + request.done(this.add.bind(this)) }, add: function(media){ diff --git a/public/assets/javascripts/ui/editor/MediaViewer.js b/public/assets/javascripts/ui/editor/MediaViewer.js index 2535f1b..264ed7c 100644 --- a/public/assets/javascripts/ui/editor/MediaViewer.js +++ b/public/assets/javascripts/ui/editor/MediaViewer.js @@ -40,12 +40,12 @@ var MediaViewer = ModalView.extend({ }, load: function(){ - $.get("/api/media/user", $.proxy(this.populate, this)) + $.get("/api/media/user", this.populate.bind(this)) }, populate: function(data){ this.loaded = true - data && data.forEach($.proxy(this.add, this)) + data && data.forEach(this.add.bind(this)) this.__super__.show.call(this) }, @@ -62,6 +62,15 @@ var MediaViewer = ModalView.extend({ case 'vimeo': image.src = media.thumbnail break + + case 'video': + image = document.createElement('video') + image.addEventListener("loadedmetadata", function(){ + image.currentTime = image.duration * 1/3 + }) + image.src = media.url + image.load() + break } $span.data("media", media) @@ -124,7 +133,16 @@ var MediaViewer = ModalView.extend({ var $floatingImg = $('.floatingImg'); Scenery.nextMedia = media - $floatingImg.attr('src', image.attr('src')); + + switch (media.type) { + case "video": + $floatingImg.attr('src', 'http://www.rawrcast.com/wp-content/uploads/2010/02/BluePlayButton.png') + break + + default: + $floatingImg.attr('src', image.attr('src')) + break + } var height = $floatingImg.height() var width = $floatingImg.width() diff --git a/public/assets/javascripts/ui/editor/WallpaperPicker.js b/public/assets/javascripts/ui/editor/WallpaperPicker.js index ffbd935..cb1e361 100644 --- a/public/assets/javascripts/ui/editor/WallpaperPicker.js +++ b/public/assets/javascripts/ui/editor/WallpaperPicker.js @@ -3,7 +3,24 @@ var WallpaperPicker = View.extend({ el: ".wallpaper", events: { - "click .paper1": 'pick', + "click .swatch": 'pick', + }, + + initialize: function(){ + var wm = new WallpaperManager() + app.on('wallpaper-ready', function(){ + var black = [0,0,0,1.0] + var white = [255,255,255,1.0] + var swatches = wm.buildSwatches(black, white, 2) + swatches.forEach(function(swatch){ + var dataUrl = swatch.toDataURL() + var span = document.createElement('span') + span.style.backgroundImage = "url(" + dataUrl + ")" + span.className = "swatch" + this.$el.append(span) + }.bind(this)) + }.bind(this)) + wm.init() }, toggle: function(){ @@ -13,8 +30,116 @@ var WallpaperPicker = View.extend({ }, pick: function(e){ - $("body").toggleClass("pastePaper"); - $(e.currentTarget).toggleClass("active"); + var $swatch = $(e.currentTarget) + var $floatingSwatch = $(".floatingSwatch") + + $floatingSwatch.css('background-image', $swatch.css('background-image')) + + Scenery.nextWallpaper = $swatch.css('background-image') + + setTimeout(function(){ + function _followCursor(e) { + $floatingSwatch.css({ + top: (e.pageY + 10) + 'px', + left: (e.pageX + 10) + 'px' + }); + } + $(window).on('mousemove', _followCursor); + $(window).one('click', function () { + $(window).off('mousemove', _followCursor); + $floatingSwatch.hide(); + }); + $floatingSwatch.show() + _followCursor(e); + }) } }) + +// pattern +// scale +// foreground +// background + +var WallpaperManager = function () { + + var image = new Image () + var imageData + var w, h + + this.masks = [] + + this.init = function(){ + this.load() + } + + this.load = function(){ + image.onload = function(){ + this.loadImageData() + this.buildMasks() + app.tube('wallpaper-ready') + }.bind(this) + + image.src = "/assets/img/palette.gif" + } + + this.loadImageData = function(){ + var canvas = document.createElement('canvas') + var ctx = canvas.getContext('2d') + w = canvas.width = image.naturalWidth + h = canvas.height = image.naturalHeight + ctx.drawImage(image, 0,0) + imageData = ctx.getImageData(0,0,image.naturalWidth,image.naturalHeight).data + } + + this.buildMasks = function(){ + var mask + for (var y = 0; y < 6; y++) { + for (var x = 0; x < 16; x++) { + mask = this.buildMask(x,y) + this.masks.push(mask) + } + } + } + + this.buildMask = function(x,y){ + // add the offset of the top-left swatch + x = (x * 18) + 15 + y = (y * 16) + 5 + + var mask = new Array(64) + var t = 0 + for (var i = 0; i < 8; i++) { + for (var j = 0; j < 8; j++) { + t = ( w*(y+j) + x+i ) * 4 + mask[j*8+i] = imageData[t] === 0 + } + } + return mask + } + + this.buildSwatches = function(black, white, scale) { + var swatches = this.masks.map(function(mask){ + return this.buildSwatch(mask,black,white,scale) + }.bind(this)) + + return swatches + } + + this.buildSwatch = function(mask,black,white,scale){ + black = 'rgba(' + black.join(',') + ')' + white = 'rgba(' + white.join(',') + ')' + var canvas = document.createElement("canvas") + canvas.width = 8*scale + canvas.height = 8*scale + var ctx = canvas.getContext('2d') + for (var i = 0; i < 8; i++) { + for (var j = 0; j < 8; j++) { + ctx.fillStyle = mask[j*8+i] ? black : white + ctx.fillRect(i*scale, j*scale, scale, scale) + } + } + return canvas + } + +}
\ No newline at end of file |