diff options
Diffstat (limited to 'public/assets/javascripts/ui')
11 files changed, 119 insertions, 40 deletions
diff --git a/public/assets/javascripts/ui/builder/BuilderInfo.js b/public/assets/javascripts/ui/builder/BuilderInfo.js index 2fffdba..e6b7e97 100644 --- a/public/assets/javascripts/ui/builder/BuilderInfo.js +++ b/public/assets/javascripts/ui/builder/BuilderInfo.js @@ -55,6 +55,7 @@ var BuilderInfo = View.extend({ this.$height.unitVal( room.height ) this.$x.unitVal( room.rect.x.a ) this.$y.unitVal( room.rect.y.a ) + this.show() }, destroy: function(room){ diff --git a/public/assets/javascripts/ui/builder/BuilderSettings.js b/public/assets/javascripts/ui/builder/BuilderSettings.js index 796c398..94eed29 100644 --- a/public/assets/javascripts/ui/builder/BuilderSettings.js +++ b/public/assets/javascripts/ui/builder/BuilderSettings.js @@ -9,7 +9,7 @@ var BuilderSettings = FormView.extend({ events: { "keydown": 'stopPropagation', "keydown [name=name]": 'enterSubmit', - "click [data-role='save-layout']": 'save', + "click [data-role='save-layout']": 'clickSave', "click [data-role='clone-layout']": 'clone', "click [data-role='clear-layout']": 'clear', "click [data-role='destroy-layout']": 'destroy', @@ -118,6 +118,11 @@ var BuilderSettings = FormView.extend({ fd.append( "thumbnail", dataUriToBlob(map.canvas.toDataURL()) ) return fd }, + + clickSave: function(){ + this.toggle(false) + this.save() + }, success: function(data){ this.$id.val(data._id) diff --git a/public/assets/javascripts/ui/builder/BuilderView.js b/public/assets/javascripts/ui/builder/BuilderView.js index a89111f..81dce52 100644 --- a/public/assets/javascripts/ui/builder/BuilderView.js +++ b/public/assets/javascripts/ui/builder/BuilderView.js @@ -12,6 +12,11 @@ var BuilderView = View.extend({ this.toolbar = new BuilderToolbar ({ parent: this }) this.settings = new BuilderSettings ({ parent: this }) this.lightControl = new LightControl ({ parent: this }) + + app.on("rooms-built", function(){ + Walls.paint() + }) + }, load: function(name){ diff --git a/public/assets/javascripts/ui/editor/EditorSettings.js b/public/assets/javascripts/ui/editor/EditorSettings.js index 2a3929a..92eff2b 100644 --- a/public/assets/javascripts/ui/editor/EditorSettings.js +++ b/public/assets/javascripts/ui/editor/EditorSettings.js @@ -10,15 +10,15 @@ var EditorSettings = FormView.extend({ "keydown": 'stopPropagation', "keydown [name=name]": 'enterSubmit', "click [data-role='show-collaborators']": 'showCollaborators', - "click [data-role='save-project']": 'save', + "click [data-role='save-project']": 'clickSave', "click [data-role='clone-project']": 'clone', "click [data-role='clear-project']": 'clear', "click [data-role='destroy-project']": 'destroy', }, initialize: function(opt){ - this.parent = opt.parent - this.__super__.initialize.call(this) + this.parent = opt.parent + this.__super__.initialize.call(this) this.$id = this.$("[name=_id]") this.$csrf = this.$("[name=_csrf]") @@ -41,6 +41,16 @@ var EditorSettings = FormView.extend({ else { this.parent.lightControl.loadDefaults() } + + if (data.walls) { + data.walls.some(function(wall){ + if (wall.background !== "none") { + this.parent.wallpaperPicker.$remove.show() + return true + } + return false + }.bind(this)) + } if (data.isNew) { this.$name.val( "Room " + moment().format("DD/MM/YYYY ha") ) @@ -96,8 +106,11 @@ var EditorSettings = FormView.extend({ }.bind(this)) }, - toggle: function(){ - this.$el.toggleClass("active") + toggle: function(state){ + var state = typeof state == 'boolean' ? state : ! this.$el.hasClass("active") + this.$el.toggleClass("active", state) + + $("[data-role='toggle-project-settings']").toggleClass("inuse", state) }, enterSubmit: function (e) { @@ -158,6 +171,11 @@ var EditorSettings = FormView.extend({ return false }, + clickSave: function(){ + this.toggle(false) + this.save() + }, + success: function(data){ this.$id.val(data._id) this.$name.val(data.name) diff --git a/public/assets/javascripts/ui/editor/EditorToolbar.js b/public/assets/javascripts/ui/editor/EditorToolbar.js index c631317..e91da0f 100644 --- a/public/assets/javascripts/ui/editor/EditorToolbar.js +++ b/public/assets/javascripts/ui/editor/EditorToolbar.js @@ -23,6 +23,11 @@ var EditorToolbar = View.extend({ }, toggleSettings: function(){ + this.resetMode() + $(".inuse").removeClass("inuse") + this.parent.lightControl.hide() + this.parent.wallpaperPicker.hide() + this.parent.mediaEditor.hide() this.parent.settings.toggle() }, @@ -84,7 +89,9 @@ var EditorToolbar = View.extend({ var state = ! $("[data-role='toggle-wallpaper-panel']").hasClass("inuse") this.resetMode() $("[data-role='toggle-wallpaper-panel']").toggleClass("inuse", state) + this.parent.mediaEditor.hide() this.parent.lightControl.hide() + this.parent.settings.hide() this.parent.wallpaperPicker.toggle(state) }, @@ -92,7 +99,9 @@ var EditorToolbar = View.extend({ var state = ! $("[data-role='toggle-light-control']").hasClass("inuse") this.resetMode() $("[data-role='toggle-light-control']").toggleClass("inuse", state) + this.parent.mediaEditor.hide() this.parent.wallpaperPicker.hide() + this.parent.settings.hide() this.parent.lightControl.toggle(state) }, diff --git a/public/assets/javascripts/ui/editor/LightControl.js b/public/assets/javascripts/ui/editor/LightControl.js index d975180..3eb2861 100644 --- a/public/assets/javascripts/ui/editor/LightControl.js +++ b/public/assets/javascripts/ui/editor/LightControl.js @@ -4,8 +4,7 @@ var LightControl = View.extend({ events: { "mousedown": "stopPropagation", - "click .swatch": "clickSwatch", - "click label": "clickLabel", + "click .color-swatches span": "select", "input #shadow-control": "updateShadow", "mousedown #brightness-control": "beginBrightness", "input #brightness-control": "updateBrightness", @@ -14,8 +13,10 @@ var LightControl = View.extend({ }, initialize: function(){ + this.colorPicker = new LabColorPicker(this, 180, 180) - this.$el.prepend( this.colorPicker.canvas ) + this.$("#color-picker").append( this.colorPicker.canvas ) + this.$("#color-picker").append( this.colorPicker.cursor ) this.$swatches = this.$(".swatch") this.$labels = this.$(".swatch + label") @@ -100,21 +101,16 @@ var LightControl = View.extend({ setMode: function (mode) { var color, brightness this.mode = mode - this.$swatches.removeClass("selected") - this.$labels.removeClass("selected") - this.$swatch[ mode ].addClass("selected") + this.$(".active").removeClass("active") + this.$swatch[ mode ].parent().addClass("active") color = Walls.colors[ mode ] - this.$(".swatch.selected").next("label").addClass("selected") this.labColor = this.colorPicker.load(color) this.$brightnessControl.val( this.labColor[0] ) }, - clickLabel: function(e){ - $(e.currentTarget).prev(".swatch").trigger("click") - }, - clickSwatch: function(e){ - var mode = $(e.currentTarget).data('mode') + select: function(e){ + var mode = $('.swatch', e.currentTarget).data('mode') this.setMode(mode) }, @@ -138,8 +134,8 @@ var LabColorPicker = function (parent, w, h) { var imageData = ctx.createImageData(w,h) var data = imageData.data -// var cursor = this.cursor = document.createElement("div") -// cursor.className = "colorPickerCursor" + var cursor = this.cursor = document.createElement("div") + cursor.className = "colorPickerCursor" canvas.width = w canvas.height = h @@ -179,9 +175,12 @@ var LabColorPicker = function (parent, w, h) { return rgb } this.pick = function(i, j){ + i = clamp(i, 0, w) + j = clamp(j, 0, h) var x = mix( i/ww, a_range[0], a_range[1] ) var y = mix( j/hh, b_range[0], b_range[1] ) var rgb = xyz2rgb(hunterlab2xyz(val, x, y)).map(Math.round) + this.moveCursor(i, j) parent.pick( rgb, [val,x,y] ) } this.load = function(rgba){ @@ -189,10 +188,15 @@ var LabColorPicker = function (parent, w, h) { var val = clamp( Lab[0], L_range[0], L_range[1] ) var x = mix( norm(Lab[1], a_range[0], a_range[1]), 0, ww ) var y = mix( norm(Lab[2], b_range[0], b_range[1]), 0, hh ) - // move the cursor + + this.moveCursor(x,y) this.setLab(Lab) return Lab } + this.moveCursor = function(x,y){ + cursor.style.left = x + "px" + cursor.style.top = y + "px" + } this.paint = function() { val = clamp(val, L_range[0], L_range[1]) var x, y, t @@ -247,11 +251,11 @@ var LabColorPicker = function (parent, w, h) { var var_G = ( RGB[1] / 255 ) // G from 0 to 255 var var_B = ( RGB[2] / 255 ) // B from 0 to 255 - if ( var_R > 0.04045 ) var_R = ( ( var_R + 0.055 ) / 1.055 ) ^ 2.4 + if ( var_R > 0.04045 ) var_R = Math.pow( ( var_R + 0.055 ) / 1.055, 2.4) else var_R = var_R / 12.92 - if ( var_G > 0.04045 ) var_G = ( ( var_G + 0.055 ) / 1.055 ) ^ 2.4 + if ( var_G > 0.04045 ) var_G = Math.pow( ( var_G + 0.055 ) / 1.055, 2.4) else var_G = var_G / 12.92 - if ( var_B > 0.04045 ) var_B = ( ( var_B + 0.055 ) / 1.055 ) ^ 2.4 + if ( var_B > 0.04045 ) var_B = Math.pow( ( var_B + 0.055 ) / 1.055, 2.4) else var_B = var_B / 12.92 var_R = var_R * 100 diff --git a/public/assets/javascripts/ui/editor/MediaEditor.js b/public/assets/javascripts/ui/editor/MediaEditor.js index 750cf41..9b20a43 100644 --- a/public/assets/javascripts/ui/editor/MediaEditor.js +++ b/public/assets/javascripts/ui/editor/MediaEditor.js @@ -39,6 +39,9 @@ var MediaEditor = FormView.extend({ }, toggle: function(state) { + if (state) { + this.parent.settings.toggle() + } this.$el.toggleClass("active", state); }, @@ -142,9 +145,15 @@ var MediaEditor = FormView.extend({ }, unbind: function(){ - if (this.scenery && this.scenery.mx) { - this.scenery.mx.bound = false - this.scenery.mx.el.classList.remove("picked") + if (this.scenery) { + this.scenery.media.title = this.$name.val() + this.scenery.media.description = this.$description.val() + Minotaur.watch( app.router.editorView.settings ) + + if (this.scenery.mx) { + this.scenery.mx.bound = false + this.scenery.mx.el.classList.remove("picked") + } } this.scenery = null }, diff --git a/public/assets/javascripts/ui/editor/MediaViewer.js b/public/assets/javascripts/ui/editor/MediaViewer.js index 7cfa863..436c0cb 100644 --- a/public/assets/javascripts/ui/editor/MediaViewer.js +++ b/public/assets/javascripts/ui/editor/MediaViewer.js @@ -6,23 +6,33 @@ var MediaViewer = ModalView.extend({ events: { 'click .foundToggle': "foundToggle", - 'click .yourMedia': "userToggle", + 'click .userToggle': "userToggle", 'click #deleteMedia': "deleteArmed", 'click .mediaContainer': "pick", }, + initialize: function(opt){ + this.__super__.initialize.call(this) + this.parent = opt.parent + this.$foundMedia = this.$(".foundMedia") + this.$myMedia = this.$(".myMedia") + this.$foundToggle = this.$(".foundToggle") + this.$userToggle = this.$(".userToggle") + this.$deleteMedia = this.$("#deleteMedia") + }, + foundToggle: function(){ - this.$(".foundMedia").addClass("active"); - this.$(".myMedia").addClass("inactive"); + this.foundMedia.addClass("active"); + this.myMedia.addClass("inactive"); this.$("a").removeClass("active"); - this.$(".foundToggle").addClass("active"); + this.foundToggle.addClass("active"); }, userToggle: function(){ - this.$(".foundMedia").removeClass("active"); - this.$(".myMedia").removeClass("inactive"); + this.foundMedia.removeClass("active"); + this.myMedia.removeClass("inactive"); this.$("a").removeClass("active"); - this.$(".yourMedia").addClass("active"); + this.userToggle.addClass("active"); }, show: function(){ @@ -46,7 +56,12 @@ var MediaViewer = ModalView.extend({ populate: function(data){ this.loaded = true - data && data.forEach(this.add.bind(this)) + if (data && data.length) { + data.forEach(this.add.bind(this)) + } + else { + this.$deleteMedia.hide() + } this.__super__.show.call(this) }, @@ -78,6 +93,7 @@ var MediaViewer = ModalView.extend({ $span.append(image) this.$(".myMedia").prepend($span) + this.$deleteMedia.show() }, deleteIsArmed: false, @@ -112,6 +128,11 @@ var MediaViewer = ModalView.extend({ if (this.deleteIsArmed) { this.destroy(media._id) $target.remove() + + if ($(".myMedia .mediaContainer").length == 0) { + this.$deleteMedia.hide() + this.deleteArmed(false) + } return } diff --git a/public/assets/javascripts/ui/editor/WallpaperPicker.js b/public/assets/javascripts/ui/editor/WallpaperPicker.js index bcae3c5..0dd2921 100644 --- a/public/assets/javascripts/ui/editor/WallpaperPicker.js +++ b/public/assets/javascripts/ui/editor/WallpaperPicker.js @@ -13,6 +13,8 @@ var WallpaperPicker = UploadView.extend({ initialize: function(){ this.__super__.initialize.call(this) this.$swatches = this.$(".swatches") + this.$remove = this.$(".wallpaperRemove") + this.$remove.hide() }, loaded: false, @@ -34,9 +36,10 @@ var WallpaperPicker = UploadView.extend({ }, populate: function(data){ - console.log(data) this.loaded = true - data && data.forEach(this.add.bind(this)) + if (data && data.length) { + data.forEach(this.add.bind(this)) + } this.toggle(true) }, @@ -46,6 +49,7 @@ var WallpaperPicker = UploadView.extend({ swatch.className = "swatch" swatch.style.backgroundImage = "url(" + media.url + ")" this.$swatches.append(swatch) + this.$swatches.show() }, toggle: function (state) { @@ -69,6 +73,7 @@ var WallpaperPicker = UploadView.extend({ pick: function(e){ var $swatch = $(e.currentTarget) this.follow( e, $swatch.css('background-image') ) + this.$remove.show() }, remove: function(e){ diff --git a/public/assets/javascripts/ui/site/LayoutsModal.js b/public/assets/javascripts/ui/site/LayoutsModal.js index f109ec3..2449465 100644 --- a/public/assets/javascripts/ui/site/LayoutsModal.js +++ b/public/assets/javascripts/ui/site/LayoutsModal.js @@ -25,9 +25,11 @@ var LayoutsIndex = View.extend({ // $span.html(JSON.stringify(room)) $span.data("slug", room.slug) $span.css("background-image", "url(" + room.photo + ")") + $span.attr("data-name", room.name) this.$templates.append($span) }.bind(this)) + console.log(this.$templates.html()) this.show() } @@ -57,7 +59,7 @@ var ProjectsModal = ModalView.extend(LayoutsIndex.prototype).extend({ this.$(".templates .active").removeClass("active") var $layout = $(e.currentTarget) $layout.addClass("active") - + // actually do window.location.pathname = "/project/" + $layout.data("slug") + "/edit" }, diff --git a/public/assets/javascripts/ui/site/ProjectList.js b/public/assets/javascripts/ui/site/ProjectList.js index ee1b89f..993d805 100644 --- a/public/assets/javascripts/ui/site/ProjectList.js +++ b/public/assets/javascripts/ui/site/ProjectList.js @@ -4,8 +4,8 @@ var ProjectList = View.extend({ el: ".projectList", events: { - "mouseenter td.border": 'spinOn', - "mouseleave td.border": 'spinOff', + "mouseenter .room": 'spinOn', + "mouseleave .room": 'spinOff', }, initialize: function(){ |