From 9888e712a14cc2cf3af98c637f596bfe3cee2566 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 30 Sep 2014 18:05:14 -0400 Subject: esc cancels more things --- public/assets/javascripts/ui/editor/WallpaperPicker.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) (limited to 'public/assets/javascripts/ui/editor/WallpaperPicker.js') diff --git a/public/assets/javascripts/ui/editor/WallpaperPicker.js b/public/assets/javascripts/ui/editor/WallpaperPicker.js index 0dd2921..3756e88 100644 --- a/public/assets/javascripts/ui/editor/WallpaperPicker.js +++ b/public/assets/javascripts/ui/editor/WallpaperPicker.js @@ -97,11 +97,15 @@ var WallpaperPicker = UploadView.extend({ left: (e.pageX + 10) + 'px', }); } - $(window).on('mousemove', _followCursor) - $(window).one('click', function () { + function _hideCursor (e) { $(window).off('mousemove', _followCursor) + $(window).off('click', _hideCursor) + app.off('cancel-wallpaper', _hideCursor) $floatingSwatch.removeClass("scissors").hide() - }); + } + $(window).on('mousemove', _followCursor) + $(window).one('click', _hideCursor); + app.on('cancel-wallpaper', _hideCursor) $floatingSwatch.show() _followCursor(e); }) -- cgit v1.2.3-70-g09d2 From 937814eb04da00adde50cd1f2b658dd96d3550e5 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 1 Oct 2014 11:38:45 -0400 Subject: hide wallpaper tutorial message once wallpaper is uploaded --- public/assets/javascripts/ui/editor/WallpaperPicker.js | 16 ++++++++++++++-- public/assets/stylesheets/app.css | 4 +++- 2 files changed, 17 insertions(+), 3 deletions(-) (limited to 'public/assets/javascripts/ui/editor/WallpaperPicker.js') diff --git a/public/assets/javascripts/ui/editor/WallpaperPicker.js b/public/assets/javascripts/ui/editor/WallpaperPicker.js index 3756e88..7f9b8f7 100644 --- a/public/assets/javascripts/ui/editor/WallpaperPicker.js +++ b/public/assets/javascripts/ui/editor/WallpaperPicker.js @@ -39,6 +39,10 @@ var WallpaperPicker = UploadView.extend({ this.loaded = true if (data && data.length) { data.forEach(this.add.bind(this)) + this.$(".txt").hide() + } + else { + this.$(".txt").show() } this.toggle(true) }, @@ -50,6 +54,7 @@ var WallpaperPicker = UploadView.extend({ swatch.style.backgroundImage = "url(" + media.url + ")" this.$swatches.append(swatch) this.$swatches.show() + this.$(".txt").hide() }, toggle: function (state) { @@ -71,14 +76,21 @@ var WallpaperPicker = UploadView.extend({ }, pick: function(e){ + app.tube('cancel-wallpaper') var $swatch = $(e.currentTarget) this.follow( e, $swatch.css('background-image') ) this.$remove.show() }, remove: function(e){ - this.follow( e, "none" ) - $(".floatingSwatch").addClass("scissors") + if (Scenery.nextWallpaper) { + Scenery.nextWallpaper = null + app.tube('cancel-wallpaper') + } + else { + this.follow( e, "none" ) + $(".floatingSwatch").addClass("scissors") + } }, follow: function(e, wallpaper, icon){ diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 1446c60..9e65086 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -1209,6 +1209,7 @@ iframe.embed { float: none; } .wallpaper form { + position: relative; padding: 2px 0 0 0; font-size: 14px; font-weight: 300; @@ -1252,7 +1253,8 @@ iframe.embed { } .wallpaperUpload input[type="file"]{ position: absolute; - margin-top: -30px; + top: 0; + left: 0; background: blue; height: 28px; width: 100%; -- cgit v1.2.3-70-g09d2 From 8ae73f097e27cd54f685c562081f3a1bc7c9b13d Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 7 Oct 2014 18:59:04 -0400 Subject: resize/scale wallpaper --- public/assets/javascripts/ui/editor/EditorView.js | 1 + .../javascripts/ui/editor/WallpaperPicker.js | 57 +++++++++++++++++++++- public/assets/stylesheets/app.css | 12 +++++ public/assets/test/bg.html | 2 +- views/controls/editor/wallpaper.ejs | 6 +++ 5 files changed, 76 insertions(+), 2 deletions(-) (limited to 'public/assets/javascripts/ui/editor/WallpaperPicker.js') diff --git a/public/assets/javascripts/ui/editor/EditorView.js b/public/assets/javascripts/ui/editor/EditorView.js index f95d909..f60b149 100644 --- a/public/assets/javascripts/ui/editor/EditorView.js +++ b/public/assets/javascripts/ui/editor/EditorView.js @@ -54,6 +54,7 @@ var EditorView = View.extend({ pickWall: function(wall, pos){ this.hideExtras() + this.wallpaperPicker.pickWall(wall) }, hideExtras: function(){ diff --git a/public/assets/javascripts/ui/editor/WallpaperPicker.js b/public/assets/javascripts/ui/editor/WallpaperPicker.js index 7f9b8f7..3694095 100644 --- a/public/assets/javascripts/ui/editor/WallpaperPicker.js +++ b/public/assets/javascripts/ui/editor/WallpaperPicker.js @@ -6,8 +6,11 @@ var WallpaperPicker = UploadView.extend({ uploadAction: "/api/media/upload", events: { + "mousedown": 'stopPropagation', "click .swatch": 'pick', "click .wallpaperRemove": 'remove', + "input [data-role='wallpaper-scale']": 'updateScale', + }, initialize: function(){ @@ -15,6 +18,11 @@ var WallpaperPicker = UploadView.extend({ this.$swatches = this.$(".swatches") this.$remove = this.$(".wallpaperRemove") this.$remove.hide() + + this.$position = this.$("[data-role='wallpaper-position']") + this.$scale = this.$("[data-role='wallpaper-scale']") + + this.initializePositionCursor() }, loaded: false, @@ -122,5 +130,52 @@ var WallpaperPicker = UploadView.extend({ _followCursor(e); }) }, - + + wall: null, + pickWall: function(wall){ + if (wall.background.src == "none") { + return; + } + console.log(wall) + this.wall = wall + }, + + updateScale: function(){ + if (! this.wall) return; + s = parseFloat(this.$scale.val()) + this.wall.wallpaperPosition({ scale: s }) + }, + + initializePositionCursor: function(){ + var base = this + var dx = 0, dy = 0, dragging = false + var x = 0, y = 0, s = 1 + var mymouse = new mouse({ + el: this.$position[0], + down: function(e, cursor){ + if (! base.wall) return + s = parseFloat( base.$scale.val() ) + x = base.wall.background.x + y = base.wall.background.y + dragging = true + }, + drag: function(e, cursor){ + if (! dragging) return + delta = cursor.delta() + delta.a = - delta.a + dx = delta.a*s + dy = delta.b*s + base.wall.wallpaperPosition({ + scale: s, + x: x+dx, + y: y+dy, + }) + }, + up: function(e, cursor, new_cursor){ + delta.zero() + dragging = false + }, + }) + }, + }) diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index f770637..6e23962 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -1487,6 +1487,18 @@ input[type="range"]::-webkit-slider-thumb { border:3px solid #000; } +.wallpaperResizeControls input[type=range] { + width: 130px; + position: relative; + top: -10px; +} +.wallpaperResizeControls { + font-size: 30px; +} +.wallpaperResizeControls span { + cursor: pointer; +} + #color-picker { position: relative; } diff --git a/public/assets/test/bg.html b/public/assets/test/bg.html index cd7eaa8..fecf811 100644 --- a/public/assets/test/bg.html +++ b/public/assets/test/bg.html @@ -88,7 +88,7 @@ var x0 = 0, y0 = 0 var mymouse = new mouse({ el: cursor, down: function(e, cursor){ - console.log(cursor.x.a, cursor.y.a) + console.log(cursor.x.a, cursor.y.a) dragging = true }, drag: function(e, cursor){ diff --git a/views/controls/editor/wallpaper.ejs b/views/controls/editor/wallpaper.ejs index 97a9232..719c8ff 100644 --- a/views/controls/editor/wallpaper.ejs +++ b/views/controls/editor/wallpaper.ejs @@ -25,6 +25,12 @@ + +
+ + +
+
-- cgit v1.2.3-70-g09d2 From bd952badbe37dcd1c4089b2b869a6a4d85c0b198 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 7 Oct 2014 19:01:10 -0400 Subject: update when u click wall --- public/assets/javascripts/ui/editor/WallpaperPicker.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'public/assets/javascripts/ui/editor/WallpaperPicker.js') diff --git a/public/assets/javascripts/ui/editor/WallpaperPicker.js b/public/assets/javascripts/ui/editor/WallpaperPicker.js index 3694095..140076d 100644 --- a/public/assets/javascripts/ui/editor/WallpaperPicker.js +++ b/public/assets/javascripts/ui/editor/WallpaperPicker.js @@ -136,8 +136,8 @@ var WallpaperPicker = UploadView.extend({ if (wall.background.src == "none") { return; } - console.log(wall) this.wall = wall + this.$scale.val( this.wall.background.scale ) }, updateScale: function(){ -- cgit v1.2.3-70-g09d2 From 1f66850f5ec5a2e664ee8eaafbe25c46dad34102 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 8 Oct 2014 12:11:18 -0400 Subject: generate masks for thumbnails --- .../javascripts/rectangles/engine/map/draw.js | 64 ++++++++++++++-------- .../javascripts/rectangles/engine/rooms/_walls.js | 4 ++ .../assets/javascripts/rectangles/models/wall.js | 2 +- .../javascripts/ui/builder/BuilderSettings.js | 4 +- .../assets/javascripts/ui/editor/EditorSettings.js | 4 +- .../javascripts/ui/editor/WallpaperPicker.js | 7 +-- 6 files changed, 54 insertions(+), 31 deletions(-) (limited to 'public/assets/javascripts/ui/editor/WallpaperPicker.js') diff --git a/public/assets/javascripts/rectangles/engine/map/draw.js b/public/assets/javascripts/rectangles/engine/map/draw.js index 3e185d2..07e2d9f 100644 --- a/public/assets/javascripts/rectangles/engine/map/draw.js +++ b/public/assets/javascripts/rectangles/engine/map/draw.js @@ -10,7 +10,7 @@ Map.Draw = function(map, opt){ draw.animate = function(){ ctx.save() draw.clear() - // draw.ruler() + draw.fill("rgba(255,255,255,0.98)") if (opt.minimap) { ctx.translate( map.dimensions.a * 1/2, map.dimensions.b * 1/2) @@ -19,7 +19,7 @@ Map.Draw = function(map, opt){ ctx.scale( -1, 1 ) draw.coords() - draw.regions(Rooms.regions, [ "#fff" ]) + draw.regions(Rooms.regions, [ "#fff" ], "#000") draw.camera(scene.camera) } @@ -29,7 +29,7 @@ Map.Draw = function(map, opt){ ctx.translate( map.center.a, map.center.b ) ctx.scale( -1, 1 ) - draw.regions(Rooms.regions, [ "#f8f8f8" ]) + draw.regions(Rooms.regions, [ "#f8f8f8" ], "#000") draw.mouse(map.ui.mouse.cursor) draw.coords() scene && draw.camera(scene.camera) @@ -39,7 +39,12 @@ Map.Draw = function(map, opt){ } draw.render = function(){ - ctx.save() + // change the ctx temporarily + var canvas = document.createElement("canvas") + ctx = canvas.getContext('2d') + canvas.width = map.canvas.width + canvas.height = map.canvas.height + draw.clear() ctx.translate( map.dimensions.a * 1/2, map.dimensions.b * 1/2) @@ -47,37 +52,52 @@ Map.Draw = function(map, opt){ ctx.translate( map.center.a, map.center.b ) ctx.scale( -1, 1 ) - draw.regions(Rooms.regions, ["#fff"]) - draw.mouse(map.ui.mouse.cursor) - scene && draw.camera(scene.camera) - + draw.regions(Rooms.regions, ["#fff"], null) + ctx.restore() + + // invert opacity + var pixelData = ctx.getImageData(0, 0, canvas.width, canvas.height) + var pixels = pixelData.data + for (var i = 0, k, _len = pixels.length; i < _len; i++) { + k = i*4 + if (pixels[k+3] == 0) { + pixels[k] = pixels[k+1] = pixels[k+2] = pixels[k+3] = 255 + } + else { + pixels[k] = pixels[k+1] = pixels[k+2] = 255 + pixels[k+3] = 0 + } + } + ctx.putImageData(pixelData, 0, 0) + + // reset the ctx + ctx = map.canvas.getContext("2d") + + return canvas } draw.clear = function(){ - ctx.fillStyle = "rgba(255,255,255,0.98)" ctx.clearRect(0, 0, map.dimensions.a, map.dimensions.b) - ctx.fillRect(0, 0, map.dimensions.a, map.dimensions.b) } - draw.ruler = function (){ - ctx.strokeStyle = "rgba(80,80,80,0.5)" - ctx.lineWidth = 1 - var len = 5 - for (var i = 0.5; i < map.dimensions.a; i += 10) { - line(i, 0, i, len) - line(0, i, len, i) - } + draw.fill = function(fillStyle){ + ctx.fillStyle = fillStyle + ctx.fillRect(0, 0, map.dimensions.a, map.dimensions.b) } - draw.regions = function(regions, colors){ + draw.regions = function(regions, colors, stroke){ + if (stroke) { + ctx.strokeStyle = "#000" + ctx.lineWidth = (1 / map.zoom) + } for (var i = 0; i < regions.length; i++) { if (regions[i].dupe) continue ctx.fillStyle = colors[i % colors.length] - ctx.strokeStyle = "#000" - ctx.lineWidth = (1 / map.zoom) fill_region(regions[i]) - stroke_sides(regions[i]) + if (stroke) { + stroke_sides(regions[i]) + } } } diff --git a/public/assets/javascripts/rectangles/engine/rooms/_walls.js b/public/assets/javascripts/rectangles/engine/rooms/_walls.js index 5ff53fe..71ddde9 100644 --- a/public/assets/javascripts/rectangles/engine/rooms/_walls.js +++ b/public/assets/javascripts/rectangles/engine/rooms/_walls.js @@ -103,6 +103,10 @@ walls_data.forEach(function(wall_data){ if (! wall_data) { return } var wall = base.lookup[ wall_data.id ] + if (! wall) { + console.log(wall_data); + return + } wall.deserialize( wall_data ) }) }, diff --git a/public/assets/javascripts/rectangles/models/wall.js b/public/assets/javascripts/rectangles/models/wall.js index 8174de7..fcb2f5e 100644 --- a/public/assets/javascripts/rectangles/models/wall.js +++ b/public/assets/javascripts/rectangles/models/wall.js @@ -13,7 +13,7 @@ } var Wall = function(opt){ - this.id = [ opt.side, opt.edge, opt.vec.a ].join("_") + this.id = [ opt.side|0, opt.edge|0, opt.vec.a|0 ].join("_") this.vec = opt.vec this.edge = opt.edge this.side = opt.side diff --git a/public/assets/javascripts/ui/builder/BuilderSettings.js b/public/assets/javascripts/ui/builder/BuilderSettings.js index 94eed29..99bceed 100644 --- a/public/assets/javascripts/ui/builder/BuilderSettings.js +++ b/public/assets/javascripts/ui/builder/BuilderSettings.js @@ -107,7 +107,7 @@ var BuilderSettings = FormView.extend({ }, serialize: function(){ - map.draw.render() + var thumbnail = map.canvas.render() var fd = new FormData() fd.append( "_csrf", this.$csrf.val() ) fd.append( "_id", this.$id.val() ) @@ -115,7 +115,7 @@ var BuilderSettings = FormView.extend({ fd.append( "privacy", this.$privacy.filter(":checked").val() == "private" ) fd.append( "rooms", JSON.stringify( Rooms.serialize() ) ) fd.append( "startPosition", JSON.stringify( app.position(scene.camera) ) ) - fd.append( "thumbnail", dataUriToBlob(map.canvas.toDataURL()) ) + fd.append( "thumbnail", dataUriToBlob(thumbnail.toDataURL()) ) return fd }, diff --git a/public/assets/javascripts/ui/editor/EditorSettings.js b/public/assets/javascripts/ui/editor/EditorSettings.js index fd251b7..0c08369 100644 --- a/public/assets/javascripts/ui/editor/EditorSettings.js +++ b/public/assets/javascripts/ui/editor/EditorSettings.js @@ -146,7 +146,6 @@ var EditorSettings = FormView.extend({ }, serialize: function(){ - map.draw.render() var fd = new FormData() fd.append( "_csrf", this.$csrf.val() ) fd.append( "_id", this.$id.val() ) @@ -160,7 +159,8 @@ var EditorSettings = FormView.extend({ fd.append( "startPosition", JSON.stringify( app.position(scene.camera) ) ) if (this.thumbnailIsStale()) { - fd.append( "thumbnail", dataUriToBlob(map.canvas.toDataURL()) ) + var thumbnail = map.draw.render() + fd.append( "thumbnail", dataUriToBlob(thumbnail.toDataURL()) ) } return fd }, diff --git a/public/assets/javascripts/ui/editor/WallpaperPicker.js b/public/assets/javascripts/ui/editor/WallpaperPicker.js index 140076d..6bf2542 100644 --- a/public/assets/javascripts/ui/editor/WallpaperPicker.js +++ b/public/assets/javascripts/ui/editor/WallpaperPicker.js @@ -133,7 +133,7 @@ var WallpaperPicker = UploadView.extend({ wall: null, pickWall: function(wall){ - if (wall.background.src == "none") { + if (! wall.background || wall.background.src == "none") { return; } this.wall = wall @@ -148,16 +148,16 @@ var WallpaperPicker = UploadView.extend({ initializePositionCursor: function(){ var base = this - var dx = 0, dy = 0, dragging = false + var dx = 0, dy = 0, dragging = false, delta var x = 0, y = 0, s = 1 var mymouse = new mouse({ el: this.$position[0], down: function(e, cursor){ if (! base.wall) return + dragging = true s = parseFloat( base.$scale.val() ) x = base.wall.background.x y = base.wall.background.y - dragging = true }, drag: function(e, cursor){ if (! dragging) return @@ -172,7 +172,6 @@ var WallpaperPicker = UploadView.extend({ }) }, up: function(e, cursor, new_cursor){ - delta.zero() dragging = false }, }) -- cgit v1.2.3-70-g09d2 From 7089dded0589d45b00a6d4f2a3d1eb2adcf11d1b Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 15 Oct 2014 12:56:50 -0400 Subject: more help text --- .../assets/javascripts/ui/editor/EditorSettings.js | 3 ++ public/assets/javascripts/ui/editor/HelpCursor.js | 6 ++-- .../assets/javascripts/ui/editor/LightControl.js | 32 +++++++++++++++++++--- public/assets/javascripts/ui/editor/MediaViewer.js | 2 ++ public/assets/javascripts/ui/editor/Presets.js | 24 +--------------- .../javascripts/ui/editor/WallpaperPicker.js | 1 + public/assets/stylesheets/app.css | 7 +++-- views/controls/builder/info.ejs | 2 +- views/controls/editor/light-control.ejs | 1 - 9 files changed, 43 insertions(+), 35 deletions(-) (limited to 'public/assets/javascripts/ui/editor/WallpaperPicker.js') diff --git a/public/assets/javascripts/ui/editor/EditorSettings.js b/public/assets/javascripts/ui/editor/EditorSettings.js index ac361a7..e47739b 100644 --- a/public/assets/javascripts/ui/editor/EditorSettings.js +++ b/public/assets/javascripts/ui/editor/EditorSettings.js @@ -121,6 +121,9 @@ var EditorSettings = FormView.extend({ $(".inuse").removeClass("inuse") $("[data-role='toggle-project-settings']").toggleClass("inuse", state) + if (state) { + this.parent.cursor.show("settings") + } }, enterSubmit: function (e) { diff --git a/public/assets/javascripts/ui/editor/HelpCursor.js b/public/assets/javascripts/ui/editor/HelpCursor.js index b2f411d..4a6e616 100644 --- a/public/assets/javascripts/ui/editor/HelpCursor.js +++ b/public/assets/javascripts/ui/editor/HelpCursor.js @@ -7,8 +7,8 @@ var HelpCursor = View.extend({ media: "This is where you pick media to go on the walls. You can upload media, paste links, or use some of the found media.", presets: "These presets will affect on all the walls. Click some of them to see the walls change.", wallpaper: "Drag the wallpaper onto the walls, floor, and ceiling.", - colors: "", - settings: "This is where you publish your project.", + colors: "Use these colors to change the color of the walls, floor, and ceiling.", + settings: "This is where you publish your project. Give it a name, hit save, and you'll have a URL you can share with your friends.", }, shown: {}, @@ -21,7 +21,7 @@ var HelpCursor = View.extend({ }, show: function(name){ - if (name) this.showMessage(name) + this.showMessage(name) this.$el.show() }, diff --git a/public/assets/javascripts/ui/editor/LightControl.js b/public/assets/javascripts/ui/editor/LightControl.js index 34a5a51..bb4454a 100644 --- a/public/assets/javascripts/ui/editor/LightControl.js +++ b/public/assets/javascripts/ui/editor/LightControl.js @@ -5,14 +5,28 @@ var LightControl = View.extend({ events: { "mousedown": "stopPropagation", "click .color-swatches span": "select", - "input #shadow-control": "updateShadow", "mousedown #brightness-control": "beginBrightness", "input #brightness-control": "updateBrightness", - "input #outline-hue": "updateShadow", - "input #wall-hue": "updateShadow", }, + + colors: [ + [255,94,58], + [255,149,0], + [255,219,76], + [76,217,100], + [52,170,220], + [29,98,240], + [198,68,252], + [0,0,0], + [74,74,74], + [125,126,127], + [209,211,212], + [235,235,235], + [255,255,255], + ], - initialize: function(){ + initialize: function(opt){ + this.parent = opt.parent this.colorPicker = new LabColorPicker(this, 180, 180) this.$("#color-picker").append( this.colorPicker.canvas ) @@ -27,6 +41,15 @@ var LightControl = View.extend({ ceiling: this.$("#ceiling-color"), } this.$brightnessControl = this.$("#brightness-control") + + this.$colors = this.$(".colors") + this.colors.forEach(function(color){ + var $swatch = $("") + $swatch.css("background-color","rgb(" + color + ")") + $swatch.data('color', color) + this.$colors.append($swatch) + }.bind(this)) + }, modes: [ "wall", "outline", "floor", "ceiling" ], @@ -54,6 +77,7 @@ var LightControl = View.extend({ }, show: function(){ + this.parent.cursor.show("colors") this.toggle(true) }, diff --git a/public/assets/javascripts/ui/editor/MediaViewer.js b/public/assets/javascripts/ui/editor/MediaViewer.js index b270be5..df77fb1 100644 --- a/public/assets/javascripts/ui/editor/MediaViewer.js +++ b/public/assets/javascripts/ui/editor/MediaViewer.js @@ -68,6 +68,7 @@ var MediaViewer = ModalView.extend({ this.loadTrending() } else { + this.parent.cursor.show("media") this.__super__.show.call(this) } }, @@ -146,6 +147,7 @@ var MediaViewer = ModalView.extend({ } else { this.loaded = true + this.parent.cursor.show("media") this.__super__.show.call(this) } }, diff --git a/public/assets/javascripts/ui/editor/Presets.js b/public/assets/javascripts/ui/editor/Presets.js index 1e70aa2..6222e33 100644 --- a/public/assets/javascripts/ui/editor/Presets.js +++ b/public/assets/javascripts/ui/editor/Presets.js @@ -7,22 +7,6 @@ var Presets = View.extend({ "click .swatches span": "selectColor", }, - colors: [ - [255,94,58], - [255,149,0], - [255,219,76], - [76,217,100], - [52,170,220], - [29,98,240], - [198,68,252], - [0,0,0], - [74,74,74], - [125,126,127], - [209,211,212], - [235,235,235], - [255,255,255], - ], - presets: { wireframe: { wall: [255,255,255], @@ -52,13 +36,6 @@ var Presets = View.extend({ initialize: function(opt){ this.parent = opt.parent - this.$colors = this.$(".colors") - this.colors.forEach(function(color){ - var $swatch = $("") - $swatch.css("background-color","rgb(" + color + ")") - $swatch.data('color', color) - this.$colors.append($swatch) - }.bind(this)) }, toggle: function(state){ @@ -66,6 +43,7 @@ var Presets = View.extend({ }, show: function(){ + this.parent.cursor.show("presets") this.toggle(true) }, diff --git a/public/assets/javascripts/ui/editor/WallpaperPicker.js b/public/assets/javascripts/ui/editor/WallpaperPicker.js index 6bf2542..541ab31 100644 --- a/public/assets/javascripts/ui/editor/WallpaperPicker.js +++ b/public/assets/javascripts/ui/editor/WallpaperPicker.js @@ -28,6 +28,7 @@ var WallpaperPicker = UploadView.extend({ loaded: false, show: function(){ if (! this.loaded) { + this.parent.cursor.show("wallpaper") this.load() } else { diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 0140dc6..250ae67 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -1485,10 +1485,11 @@ border-left: 1px solid black; padding-bottom: 6px; } -#presets .colors { +.vvbox .colors { + max-width: 170px; margin-bottom: 5px; } -#presets .colors span { +.vvbox .colors span { display: inline-block; font-size: 0; width: 20px; @@ -1498,7 +1499,7 @@ border-left: 1px solid black; cursor: pointer; transition: transform 0.2s; } -#presets .colors span:hover { +.vvbox .colors span:hover { transform: translateX(3px) translateY(-3px); } diff --git a/views/controls/builder/info.ejs b/views/controls/builder/info.ejs index 54bb38e..2762207 100644 --- a/views/controls/builder/info.ejs +++ b/views/controls/builder/info.ejs @@ -3,7 +3,7 @@
Click and drag to make a new room. - Click a room to select it. + Click a room to select, move or resize it.

Press ESC to toggle the map.
diff --git a/views/controls/editor/light-control.ejs b/views/controls/editor/light-control.ejs index 4604a7a..99d68f5 100644 --- a/views/controls/editor/light-control.ejs +++ b/views/controls/editor/light-control.ejs @@ -1,7 +1,6 @@

Edit Room Colors

-

Preset Colors

-- cgit v1.2.3-70-g09d2 From 86121b6f8ad112c35a07bc98b161572648517f12 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 15 Oct 2014 12:59:06 -0400 Subject: fix --- public/assets/javascripts/ui/editor/WallpaperPicker.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'public/assets/javascripts/ui/editor/WallpaperPicker.js') diff --git a/public/assets/javascripts/ui/editor/WallpaperPicker.js b/public/assets/javascripts/ui/editor/WallpaperPicker.js index 541ab31..9583376 100644 --- a/public/assets/javascripts/ui/editor/WallpaperPicker.js +++ b/public/assets/javascripts/ui/editor/WallpaperPicker.js @@ -13,7 +13,8 @@ var WallpaperPicker = UploadView.extend({ }, - initialize: function(){ + initialize: function(opt){ + this.parent = opt.parent this.__super__.initialize.call(this) this.$swatches = this.$(".swatches") this.$remove = this.$(".wallpaperRemove") -- cgit v1.2.3-70-g09d2 From 6ad93b573ed6e9b4b339fa0d746bf21b8f827fdb Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 15 Oct 2014 17:09:45 -0400 Subject: help messages on button, starting drag stuff --- public/assets/javascripts/app.js | 4 -- .../javascripts/mx/extensions/mx.movements.js | 12 ++++- .../assets/javascripts/ui/editor/EditorSettings.js | 2 +- public/assets/javascripts/ui/editor/HelpCursor.js | 54 ++++++++++++++-------- .../assets/javascripts/ui/editor/LightControl.js | 2 +- public/assets/javascripts/ui/editor/MediaViewer.js | 4 +- public/assets/javascripts/ui/editor/Presets.js | 2 +- .../javascripts/ui/editor/WallpaperPicker.js | 2 +- 8 files changed, 52 insertions(+), 30 deletions(-) (limited to 'public/assets/javascripts/ui/editor/WallpaperPicker.js') diff --git a/public/assets/javascripts/app.js b/public/assets/javascripts/app.js index 98e1820..f8372cd 100644 --- a/public/assets/javascripts/app.js +++ b/public/assets/javascripts/app.js @@ -18,10 +18,6 @@ else { new WOW().init(); -$('#help-button').click( function(){ - $('body').chardinJs('start') -}); - var scene, cam, map; var app = new function(){} diff --git a/public/assets/javascripts/mx/extensions/mx.movements.js b/public/assets/javascripts/mx/extensions/mx.movements.js index b158625..40e786d 100644 --- a/public/assets/javascripts/mx/extensions/mx.movements.js +++ b/public/assets/javascripts/mx/extensions/mx.movements.js @@ -129,9 +129,19 @@ MX.Movements = function (cam) { } else if (app.controller.mediaViewer && app.controller.mediaViewer.$el.hasClass("active")) { app.controller.mediaViewer.hide() + $(".inuse").removeClass("inuse") } else if (app.controller.lightControl.$el.hasClass('active')) { app.controller.lightControl.hide() + $(".inuse").removeClass("inuse") + } + else if (app.controller.wallpaperPicker.$el.hasClass('active')) { + app.controller.wallpaperPicker.hide() + $(".inuse").removeClass("inuse") + } + else if (app.controller.presets.$el.hasClass('active')) { + app.controller.presets.hide() + $(".inuse").removeClass("inuse") } else { app.controller.toolbar.toggleMap() @@ -242,7 +252,7 @@ MX.Movements = function (cam) { var ry = cam.rotationY var s = creeping ? scale * creepFactor : scale - var vrrrr = creeping ? vr * creepFactor * 5 : vr + var vrrrr = creeping ? vr * creepFactor * 5 : vr * 0.5 var moving = moveForward || moveBackward || moveRight || moveLeft || moveUp || moveDown || turnLeft || turnRight || turnUp || turnDown vx = vz = 0 diff --git a/public/assets/javascripts/ui/editor/EditorSettings.js b/public/assets/javascripts/ui/editor/EditorSettings.js index e47739b..c0c140f 100644 --- a/public/assets/javascripts/ui/editor/EditorSettings.js +++ b/public/assets/javascripts/ui/editor/EditorSettings.js @@ -122,7 +122,7 @@ var EditorSettings = FormView.extend({ $(".inuse").removeClass("inuse") $("[data-role='toggle-project-settings']").toggleClass("inuse", state) if (state) { - this.parent.cursor.show("settings") + this.parent.cursor.message("settings") } }, diff --git a/public/assets/javascripts/ui/editor/HelpCursor.js b/public/assets/javascripts/ui/editor/HelpCursor.js index 4a6e616..8bfaef8 100644 --- a/public/assets/javascripts/ui/editor/HelpCursor.js +++ b/public/assets/javascripts/ui/editor/HelpCursor.js @@ -2,6 +2,8 @@ var HelpCursor = View.extend({ el: "#helpCursor", + active: false, + messages: { start: "Welcome to Vvalls! Click one of the tools at right to learn how it works.", media: "This is where you pick media to go on the walls. You can upload media, paste links, or use some of the found media.", @@ -10,33 +12,47 @@ var HelpCursor = View.extend({ colors: "Use these colors to change the color of the walls, floor, and ceiling.", settings: "This is where you publish your project. Give it a name, hit save, and you'll have a URL you can share with your friends.", }, - shown: {}, initialize: function(){ - $(window).mousemove(function(e){ - this.el.style.left = e.pageX + "px" - this.el.style.top = e.pageY + "px" - }.bind(this)) - this.show("start") + $('#help-button').click(this.toggle.bind(this)); }, - - show: function(name){ - this.showMessage(name) + + toggle: function(){ + this.active ? this.stop() : this.start() + }, + + start: function(){ + if (this.active) return + this.active = true + this.message('start') this.$el.show() +// $('body').chardinJs('start') +// $(window).one("click", function(){ +// $('body').chardinJs('stop') +// }) + this.move({ pageX: -1000, pageY: -10000 }) + this.moveFn = this.move.bind(this) + document.addEventListener("mousemove", this.moveFn) }, - - hide: function(){ + + stop: function(){ + this.active = false this.$el.hide() + document.removeEventListener("mousemove", this.moveFn) + }, + + move: function(e){ + this.el.style.left = e.pageX + "px" + this.el.style.top = e.pageY + "px" + }, + + show: function(name){ + this.showMessage(name) }, - showMessage: function(name){ - if (+(this.shown[name] || 0) < 2) { - this.$el.html(this.messages[name]) - this.shown[name] = (+this.shown[name] || 0) + 1 - } - else { - this.$el.html("") - } + message: function(name){ + if (! this.active) return + this.$el.html(this.messages[name]) }, }) diff --git a/public/assets/javascripts/ui/editor/LightControl.js b/public/assets/javascripts/ui/editor/LightControl.js index bb4454a..10f8d2c 100644 --- a/public/assets/javascripts/ui/editor/LightControl.js +++ b/public/assets/javascripts/ui/editor/LightControl.js @@ -77,7 +77,7 @@ var LightControl = View.extend({ }, show: function(){ - this.parent.cursor.show("colors") + this.parent.cursor.message("colors") this.toggle(true) }, diff --git a/public/assets/javascripts/ui/editor/MediaViewer.js b/public/assets/javascripts/ui/editor/MediaViewer.js index df77fb1..e196e41 100644 --- a/public/assets/javascripts/ui/editor/MediaViewer.js +++ b/public/assets/javascripts/ui/editor/MediaViewer.js @@ -68,7 +68,7 @@ var MediaViewer = ModalView.extend({ this.loadTrending() } else { - this.parent.cursor.show("media") + this.parent.cursor.message("media") this.__super__.show.call(this) } }, @@ -147,7 +147,7 @@ var MediaViewer = ModalView.extend({ } else { this.loaded = true - this.parent.cursor.show("media") + this.parent.cursor.message("media") this.__super__.show.call(this) } }, diff --git a/public/assets/javascripts/ui/editor/Presets.js b/public/assets/javascripts/ui/editor/Presets.js index 6222e33..35b5b58 100644 --- a/public/assets/javascripts/ui/editor/Presets.js +++ b/public/assets/javascripts/ui/editor/Presets.js @@ -43,7 +43,7 @@ var Presets = View.extend({ }, show: function(){ - this.parent.cursor.show("presets") + this.parent.cursor.message("presets") this.toggle(true) }, diff --git a/public/assets/javascripts/ui/editor/WallpaperPicker.js b/public/assets/javascripts/ui/editor/WallpaperPicker.js index 9583376..ad30ad8 100644 --- a/public/assets/javascripts/ui/editor/WallpaperPicker.js +++ b/public/assets/javascripts/ui/editor/WallpaperPicker.js @@ -29,7 +29,7 @@ var WallpaperPicker = UploadView.extend({ loaded: false, show: function(){ if (! this.loaded) { - this.parent.cursor.show("wallpaper") + this.parent.cursor.message("wallpaper") this.load() } else { -- cgit v1.2.3-70-g09d2 From 1a15b32d8cc8fcf27861f94151ca63eb6d8736c2 Mon Sep 17 00:00:00 2001 From: Julie Lala Date: Thu, 16 Oct 2014 04:40:53 -0400 Subject: fix clone button, add urls you paste to your wallpaper --- .../javascripts/mx/extensions/mx.movements.js | 14 ++++++++++--- .../assets/javascripts/ui/editor/EditorSettings.js | 11 +++++++--- public/assets/javascripts/ui/editor/MediaUpload.js | 8 ++++++-- public/assets/javascripts/ui/editor/Presets.js | 1 + .../javascripts/ui/editor/WallpaperPicker.js | 21 ++++++++++++++++++- public/assets/javascripts/ui/lib/Parser.js | 24 ++++++++++++++++++++-- public/assets/stylesheets/app.css | 2 +- views/controls/editor/wallpaper.ejs | 1 - 8 files changed, 69 insertions(+), 13 deletions(-) (limited to 'public/assets/javascripts/ui/editor/WallpaperPicker.js') diff --git a/public/assets/javascripts/mx/extensions/mx.movements.js b/public/assets/javascripts/mx/extensions/mx.movements.js index c2a2473..386819a 100644 --- a/public/assets/javascripts/mx/extensions/mx.movements.js +++ b/public/assets/javascripts/mx/extensions/mx.movements.js @@ -34,6 +34,14 @@ MX.Movements = function (cam) { var pos = { x: 0, y: 0, z: 0, rotationX: 0, rotationY: 0 } $(document).one("keydown", function(){ $("#keyhint").fadeOut(250) }) + function clampRotation( vr ) { + if (Rooms.mover.noclip) { + return clamp(vr, PI/-2, PI/2 ) + } + else { + return clamp(vr, PI/-4, PI/6 ) + } + } var exports = { @@ -224,7 +232,7 @@ MX.Movements = function (cam) { var dx = (e.pageX - mouseX) / window.innerWidth * Math.PI/3 var dy = (e.pageY - mouseY) / window.innerHeight * Math.PI/3 cam.rotationY = rotY + dx - cam.rotationX = clamp( rotX - dy, rotationX_min, rotationX_max ) + cam.rotationX = clampRotation( rotX - dy ) }, mouseup: function (e) { @@ -285,10 +293,10 @@ MX.Movements = function (cam) { } if (turnUp) { - cam.rotationX = clamp( cam.rotationX - vrrrr*s, rotationX_min, rotationX_max) + cam.rotationX = clampRotation( cam.rotationX - vrrrr*s ) } if (turnDown) { - cam.rotationX = clamp( cam.rotationX + vrrrr*s, rotationX_min, rotationX_max) + cam.rotationX = clampRotation( cam.rotationX + vrrrr*s ) } if (turnLeft) { cam.rotationY += vrrrr*s diff --git a/public/assets/javascripts/ui/editor/EditorSettings.js b/public/assets/javascripts/ui/editor/EditorSettings.js index 664b102..240f713 100644 --- a/public/assets/javascripts/ui/editor/EditorSettings.js +++ b/public/assets/javascripts/ui/editor/EditorSettings.js @@ -81,7 +81,9 @@ var EditorSettings = FormView.extend({ this.parent.collaborators.show() }, - clone: function(){ + clone: function(e){ + e.preventDefault() + var names = this.$name.val().split(" ") if ( ! isNaN(Number( names[names.length-1] )) ) { names[names.length-1] = Number( names[names.length-1] ) + 1 @@ -93,11 +95,14 @@ var EditorSettings = FormView.extend({ this.$id.val('new') this.$name.val( names.join(" ") ) this.action = this.createAction + this.thumbnailState = null - window.history.pushState(null, document.title, "/builder/new") + window.history.pushState(null, document.title, "/project/new") }, - clear: function(){ + clear: function(e){ + e.preventDefault() + Scenery.removeAll() }, diff --git a/public/assets/javascripts/ui/editor/MediaUpload.js b/public/assets/javascripts/ui/editor/MediaUpload.js index 9799f99..b3f4ac3 100644 --- a/public/assets/javascripts/ui/editor/MediaUpload.js +++ b/public/assets/javascripts/ui/editor/MediaUpload.js @@ -26,6 +26,7 @@ var MediaUpload = UploadView.extend({ }, enterSubmit: function(e){ + e.stopPropagation() if (e.keyCode == 13) { e.preventDefault() this.parse() @@ -35,7 +36,10 @@ var MediaUpload = UploadView.extend({ parse: function(){ var url = this.$url.val() this.$url.val("") - + this.parseUrl(url) + }, + + parseUrl: function(url){ Parser.parse(url, function(media){ if (! media) { alert("Not a valid image/video link") @@ -52,7 +56,7 @@ var MediaUpload = UploadView.extend({ request.done(this.add.bind(this)) }.bind(this)) }, - + add: function(media){ console.log(media) this.parent.mediaViewer.addUploadedMedia(media) diff --git a/public/assets/javascripts/ui/editor/Presets.js b/public/assets/javascripts/ui/editor/Presets.js index cde2fdf..0a0e0fe 100644 --- a/public/assets/javascripts/ui/editor/Presets.js +++ b/public/assets/javascripts/ui/editor/Presets.js @@ -110,6 +110,7 @@ var Presets = View.extend({ Walls.setWallpaper.floor({ src: url }) Walls.setWallpaper.ceiling({ src: url }) } + app.controller.wallpaperPicker.addUrl(url) }, enterSetUrl: function (e) { e.stopPropagation() diff --git a/public/assets/javascripts/ui/editor/WallpaperPicker.js b/public/assets/javascripts/ui/editor/WallpaperPicker.js index ad30ad8..6bcd859 100644 --- a/public/assets/javascripts/ui/editor/WallpaperPicker.js +++ b/public/assets/javascripts/ui/editor/WallpaperPicker.js @@ -3,6 +3,7 @@ var WallpaperPicker = UploadView.extend({ el: ".wallpaper", mediaTag: "wallpaper", + createAction: "/api/media/new", uploadAction: "/api/media/upload", events: { @@ -10,7 +11,6 @@ var WallpaperPicker = UploadView.extend({ "click .swatch": 'pick', "click .wallpaperRemove": 'remove', "input [data-role='wallpaper-scale']": 'updateScale', - }, initialize: function(opt){ @@ -57,14 +57,33 @@ var WallpaperPicker = UploadView.extend({ this.toggle(true) }, + seenWallpapers: {}, add: function (media) { if (media.type !== "image") { return } + if (this.seenWallpapers[ media.url ]) { return } var swatch = document.createElement("div") swatch.className = "swatch" swatch.style.backgroundImage = "url(" + media.url + ")" this.$swatches.append(swatch) this.$swatches.show() this.$(".txt").hide() + this.seenWallpapers[ media.url ] = true + }, + + addUrl: function (url){ + Parser.loadImage(url, function(media){ + if (! media) return + media._csrf = $("[name=_csrf]").val() + media.tag = this.mediaTag + + var request = $.ajax({ + type: "post", + url: this.createAction, + data: media, + }) + request.done(this.add.bind(this)) + + }.bind(this)) }, toggle: function (state) { diff --git a/public/assets/javascripts/ui/lib/Parser.js b/public/assets/javascripts/ui/lib/Parser.js index 52c96e6..aa8c480 100644 --- a/public/assets/javascripts/ui/lib/Parser.js +++ b/public/assets/javascripts/ui/lib/Parser.js @@ -5,9 +5,12 @@ var Parser = { fetch: function(url, done) { var img = new Image () img.onload = function(){ + if (!img) return var width = img.naturalWidth, height = img.naturalHeight img = null done({ + url: url, + type: "image", token: "", thumbnail: "", title: "", @@ -32,6 +35,8 @@ var Parser = { var width = video.videoWidth, height = video.videoHeight video = null done({ + url: url, + type: "video", token: "", thumbnail: "", title: "", @@ -63,6 +68,8 @@ var Parser = { success: function(result){ var res = result.items[0] done({ + url: url, + type: "youtube", token: id, thumbnail: thumb, title: res.snippet.title, @@ -92,6 +99,8 @@ var Parser = { return } done({ + url: url, + type: "vimeo", token: id, thumbnail: res.thumbnail_large, title: res.title, @@ -119,6 +128,8 @@ var Parser = { + '0673fbe6fc794a7750f680747e863b10', success: function(result) { done({ + url: url, + type: "soundcloud", token: result.id, thumbnail: "", title: "", @@ -138,6 +149,8 @@ var Parser = { regex: /^http.+/i, fetch: function(url, done) { done({ + url: url, + type: "link", token: "", thumbnail: "", title: "", @@ -156,8 +169,6 @@ var Parser = { var matched = Parser.integrations.some(function(integration){ if (integration.regex.test(url)) { integration.fetch(url, function(res){ - res.url = url - res.type = integration.type cb(res) }) return true @@ -176,6 +187,15 @@ var Parser = { return "" }, + loadImage: function(url, cb, error){ + if (Parser.lookup.image.regex.test(url)) { + Parser.lookup.image.fetch(url, function(media){ + cb(media) + }) + } + else error && error() + }, + thumbnail: function (media) { return ''; }, diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index a711baa..1cc8fd6 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -1466,7 +1466,7 @@ border-left: 1px solid black; height: 40px; display: inline-block; border: 1px solid; - background-size: contain; + background-size: 100%; margin: 0 2px 4px 2px; -webkit-transition: -webkit-transform 0.1s ease-in-out; line-height: 0; diff --git a/views/controls/editor/wallpaper.ejs b/views/controls/editor/wallpaper.ejs index accafa1..39a109b 100644 --- a/views/controls/editor/wallpaper.ejs +++ b/views/controls/editor/wallpaper.ejs @@ -12,7 +12,6 @@
- -- cgit v1.2.3-70-g09d2 From f8a4bb4609511393c92c618962f990673328d2f0 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Thu, 16 Oct 2014 14:31:13 -0400 Subject: cursor stuff, hit esc to exit wallpaper mode --- .../assets/javascripts/rectangles/models/floor.js | 2 +- .../assets/javascripts/rectangles/models/wall.js | 2 +- .../assets/javascripts/ui/editor/ColorControl.js | 4 +- public/assets/javascripts/ui/editor/HelpCursor.js | 15 ++++++- .../javascripts/ui/editor/WallpaperPicker.js | 46 ++++++++++------------ 5 files changed, 39 insertions(+), 30 deletions(-) (limited to 'public/assets/javascripts/ui/editor/WallpaperPicker.js') diff --git a/public/assets/javascripts/rectangles/models/floor.js b/public/assets/javascripts/rectangles/models/floor.js index 9838232..a144ecd 100644 --- a/public/assets/javascripts/rectangles/models/floor.js +++ b/public/assets/javascripts/rectangles/models/floor.js @@ -40,7 +40,7 @@ if (Scenery.nextWallpaper) { var oldState = base.serialize() base.wallpaper(Scenery.nextWallpaper) - Scenery.nextWallpaper = null + // Scenery.nextWallpaper = null UndoStack.push({ type: 'update-wallpaper', diff --git a/public/assets/javascripts/rectangles/models/wall.js b/public/assets/javascripts/rectangles/models/wall.js index 542c99a..eb445a7 100644 --- a/public/assets/javascripts/rectangles/models/wall.js +++ b/public/assets/javascripts/rectangles/models/wall.js @@ -104,7 +104,7 @@ else if (Scenery.nextWallpaper) { var oldState = base.serialize() base.wallpaper(Scenery.nextWallpaper) - Scenery.nextWallpaper = null + // Scenery.nextWallpaper = null UndoStack.push({ type: 'update-wallpaper', diff --git a/public/assets/javascripts/ui/editor/ColorControl.js b/public/assets/javascripts/ui/editor/ColorControl.js index 4d8a7bb..459ac1e 100644 --- a/public/assets/javascripts/ui/editor/ColorControl.js +++ b/public/assets/javascripts/ui/editor/ColorControl.js @@ -73,11 +73,13 @@ var ColorControl = View.extend({ }, toggle: function(state){ + if (state) { + this.parent.cursor.message("colors") + } this.$el.toggleClass("active", state); }, show: function(){ - this.parent.cursor.message("colors") this.toggle(true) }, diff --git a/public/assets/javascripts/ui/editor/HelpCursor.js b/public/assets/javascripts/ui/editor/HelpCursor.js index 9b6807e..06f6ab2 100644 --- a/public/assets/javascripts/ui/editor/HelpCursor.js +++ b/public/assets/javascripts/ui/editor/HelpCursor.js @@ -43,9 +43,12 @@ var HelpCursor = View.extend({ document.removeEventListener("mousemove", this.moveFn) }, + offset: 100, + lastPosition: { pageX: 0, pageY: 0 }, move: function(e){ - this.el.style.left = e.pageX + "px" + this.el.style.right = clamp(window.innerWidth - e.pageX, this.offset, window.innerWidth) + "px" this.el.style.top = e.pageY + "px" + this.lastPosition = e }, show: function(name){ @@ -54,6 +57,16 @@ var HelpCursor = View.extend({ message: function(name){ if (! this.active) return + if (name == "start" || name == "media" || name == "settings") { + this.offset = 100 + } + else if (name == "colors") { + this.offset = 270 + } + else { + this.offset = 290 + } + this.move(this.lastPosition) this.$el.html(this.messages[name]) }, diff --git a/public/assets/javascripts/ui/editor/WallpaperPicker.js b/public/assets/javascripts/ui/editor/WallpaperPicker.js index 6bcd859..afdfca7 100644 --- a/public/assets/javascripts/ui/editor/WallpaperPicker.js +++ b/public/assets/javascripts/ui/editor/WallpaperPicker.js @@ -28,19 +28,28 @@ var WallpaperPicker = UploadView.extend({ loaded: false, show: function(){ - if (! this.loaded) { - this.parent.cursor.message("wallpaper") - this.load() - } - else { - this.toggle(true) - } + this.toggle(true) }, - hide: function(){ - this.__super__.hide.call(this) + this.toggle(false) }, - +// hide: function(){ +// this.__super__.hide.call(this) +// }, + + toggle: function (state) { + app.tube('cancel-wallpaper') + this.$el.toggleClass("active", state) + if (state) { + this.parent.cursor.message("wallpaper") + if (! this.loaded) { + this.load() + } + } + // toggle the class that makes the cursor a paintbucket + // $("body").removeClass("pastePaper") + }, + load: function(){ $.get("/api/media/user", { tag: this.mediaTag }, this.populate.bind(this)) }, @@ -86,21 +95,6 @@ var WallpaperPicker = UploadView.extend({ }.bind(this)) }, - toggle: function (state) { - if (state && ! this.loaded) { - this.show() - } - else { - this.$el.toggleClass("active", state) - } - // toggle the class that makes the cursor a paintbucket - // $("body").removeClass("pastePaper") - }, - - hide: function(){ - this.toggle(false) - }, - beforeUpload: function(){ }, @@ -145,7 +139,7 @@ var WallpaperPicker = UploadView.extend({ $floatingSwatch.removeClass("scissors").hide() } $(window).on('mousemove', _followCursor) - $(window).one('click', _hideCursor); + // $(window).one('click', _hideCursor); app.on('cancel-wallpaper', _hideCursor) $floatingSwatch.show() _followCursor(e); -- cgit v1.2.3-70-g09d2 From 4b2360ff6d7279df58d4fe5723fdf015d6577149 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Thu, 16 Oct 2014 17:38:48 -0400 Subject: cancel wallpaper correctly --- public/assets/javascripts/ui/editor/Presets.js | 2 +- public/assets/javascripts/ui/editor/WallpaperPicker.js | 5 +++-- 2 files changed, 4 insertions(+), 3 deletions(-) (limited to 'public/assets/javascripts/ui/editor/WallpaperPicker.js') diff --git a/public/assets/javascripts/ui/editor/Presets.js b/public/assets/javascripts/ui/editor/Presets.js index 0a0e0fe..4cd4eea 100644 --- a/public/assets/javascripts/ui/editor/Presets.js +++ b/public/assets/javascripts/ui/editor/Presets.js @@ -91,7 +91,7 @@ var Presets = View.extend({ Walls.setColor[mode](preset[mode].color) } else { - if (! this.lastPreset[mode].length) { + if (preset[mode].length) { Walls.clearWallpaper[mode]() } Walls.setColor[mode](preset[mode]) diff --git a/public/assets/javascripts/ui/editor/WallpaperPicker.js b/public/assets/javascripts/ui/editor/WallpaperPicker.js index afdfca7..116b725 100644 --- a/public/assets/javascripts/ui/editor/WallpaperPicker.js +++ b/public/assets/javascripts/ui/editor/WallpaperPicker.js @@ -38,6 +38,7 @@ var WallpaperPicker = UploadView.extend({ // }, toggle: function (state) { + Scenery.nextWallpaper = null app.tube('cancel-wallpaper') this.$el.toggleClass("active", state) if (state) { @@ -134,7 +135,7 @@ var WallpaperPicker = UploadView.extend({ } function _hideCursor (e) { $(window).off('mousemove', _followCursor) - $(window).off('click', _hideCursor) + // $(window).off('click', _hideCursor) app.off('cancel-wallpaper', _hideCursor) $floatingSwatch.removeClass("scissors").hide() } @@ -145,7 +146,7 @@ var WallpaperPicker = UploadView.extend({ _followCursor(e); }) }, - + wall: null, pickWall: function(wall){ if (! wall.background || wall.background.src == "none") { -- cgit v1.2.3-70-g09d2 From 9880712797beedb5df936f3c740de79d549fca74 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Thu, 16 Oct 2014 17:42:31 -0400 Subject: move mega-tile behavior into wallpapepr picker --- public/assets/javascripts/ui/editor/Presets.js | 20 ------------------- .../javascripts/ui/editor/WallpaperPicker.js | 23 +++++++++++++++++++++- public/assets/stylesheets/app.css | 2 +- views/controls/editor/presets.ejs | 1 - views/controls/editor/wallpaper.ejs | 1 + 5 files changed, 24 insertions(+), 23 deletions(-) (limited to 'public/assets/javascripts/ui/editor/WallpaperPicker.js') diff --git a/public/assets/javascripts/ui/editor/Presets.js b/public/assets/javascripts/ui/editor/Presets.js index 4cd4eea..be86af3 100644 --- a/public/assets/javascripts/ui/editor/Presets.js +++ b/public/assets/javascripts/ui/editor/Presets.js @@ -5,8 +5,6 @@ var Presets = View.extend({ "mousedown": "stopPropagation", "click .presets span": "selectPreset", "click .swatches span": "selectColor", - "change .url": "tileWalls", - "keydown .url": "enterSetUrl", }, presets: { @@ -46,8 +44,6 @@ var Presets = View.extend({ initialize: function(opt){ this.parent = opt.parent - this.$url = this.$(".url") - this.$presets = this.$(".presets") _.keys(this.presets).forEach(function(name){ var $swatch = $("") @@ -102,21 +98,5 @@ var Presets = View.extend({ Walls.setBodyColor() this.lastPreset = preset }, - - tileWalls: function(){ - var url = this.$url.sanitize() - if (url.length && url.indexOf("http://") == 0) { - Walls.setWallpaper.wall({ src: url }) - Walls.setWallpaper.floor({ src: url }) - Walls.setWallpaper.ceiling({ src: url }) - } - app.controller.wallpaperPicker.addUrl(url) - }, - enterSetUrl: function (e) { - e.stopPropagation() - if (e.keyCode == 13) { - setTimeout(this.tileWalls.bind(this), 100) - } - }, }) \ No newline at end of file diff --git a/public/assets/javascripts/ui/editor/WallpaperPicker.js b/public/assets/javascripts/ui/editor/WallpaperPicker.js index 116b725..b26a5dc 100644 --- a/public/assets/javascripts/ui/editor/WallpaperPicker.js +++ b/public/assets/javascripts/ui/editor/WallpaperPicker.js @@ -11,6 +11,8 @@ var WallpaperPicker = UploadView.extend({ "click .swatch": 'pick', "click .wallpaperRemove": 'remove', "input [data-role='wallpaper-scale']": 'updateScale', + "change .url": "tileWalls", + "keydown .url": "enterSetUrl", }, initialize: function(opt){ @@ -20,6 +22,8 @@ var WallpaperPicker = UploadView.extend({ this.$remove = this.$(".wallpaperRemove") this.$remove.hide() + this.$url = this.$(".url") + this.$position = this.$("[data-role='wallpaper-position']") this.$scale = this.$("[data-role='wallpaper-scale']") @@ -161,7 +165,24 @@ var WallpaperPicker = UploadView.extend({ s = parseFloat(this.$scale.val()) this.wall.wallpaperPosition({ scale: s }) }, - + + tileWalls: function(){ + var url = this.$url.sanitize() + if (url.length && url.indexOf("http") == 0) { + Walls.setWallpaper.wall({ src: url }) + Walls.setWallpaper.floor({ src: url }) + Walls.setWallpaper.ceiling({ src: url }) + } + this.addUrl(url) + this.$url.val("") + }, + enterSetUrl: function (e) { + e.stopPropagation() + if (e.keyCode == 13) { + setTimeout(this.tileWalls.bind(this), 100) + } + }, + initializePositionCursor: function(){ var base = this var dx = 0, dy = 0, dragging = false, delta diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 89a6495..28eabd9 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -1700,7 +1700,7 @@ input[type="range"]::-webkit-slider-thumb { width: 100%; color: #555; } -#presets .url { +.wallpaper .url { margin: 4px 0; padding: 2px; font-size: 12px; diff --git a/views/controls/editor/presets.ejs b/views/controls/editor/presets.ejs index 02e9d42..04b1cf1 100644 --- a/views/controls/editor/presets.ejs +++ b/views/controls/editor/presets.ejs @@ -2,5 +2,4 @@

Preset Styles

-
diff --git a/views/controls/editor/wallpaper.ejs b/views/controls/editor/wallpaper.ejs index 39a109b..ed175ae 100644 --- a/views/controls/editor/wallpaper.ejs +++ b/views/controls/editor/wallpaper.ejs @@ -32,6 +32,7 @@
--> +
-- cgit v1.2.3-70-g09d2 From b21cb665e3ca296b56d389d3a2f83434f4646f26 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 20 Oct 2014 16:42:08 -0400 Subject: logarithmic wallpaper scale --- public/assets/javascripts/rectangles/models/floor.js | 5 +++-- public/assets/javascripts/rectangles/models/wall.js | 7 ++++--- public/assets/javascripts/ui/editor/WallpaperPicker.js | 10 +++++----- views/controls/editor/wallpaper.ejs | 2 +- 4 files changed, 13 insertions(+), 11 deletions(-) (limited to 'public/assets/javascripts/ui/editor/WallpaperPicker.js') diff --git a/public/assets/javascripts/rectangles/models/floor.js b/public/assets/javascripts/rectangles/models/floor.js index 2fb870f..ac1f8c9 100644 --- a/public/assets/javascripts/rectangles/models/floor.js +++ b/public/assets/javascripts/rectangles/models/floor.js @@ -146,8 +146,9 @@ Floor.prototype.wallpaperPosition = function(background){ if (this.background.src == "none") { return } - this.background.x = background.x || this.background.x - this.background.y = background.y || this.background.y + + this.background.x = background.x || this.background.x || 0 + this.background.y = background.y || this.background.y || 0 this.background.scale = background.scale || this.background.scale || 1 var mx, dx, dy diff --git a/public/assets/javascripts/rectangles/models/wall.js b/public/assets/javascripts/rectangles/models/wall.js index 75814dc..8590de7 100644 --- a/public/assets/javascripts/rectangles/models/wall.js +++ b/public/assets/javascripts/rectangles/models/wall.js @@ -288,10 +288,11 @@ Wall.prototype.wallpaperPosition = function(background){ if (this.background.src == "none") { return } - this.background.x = background.x || this.background.x - this.background.y = background.y || this.background.y + + this.background.x = background.x || this.background.x || 0 + this.background.y = background.y || this.background.y || 0 this.background.scale = background.scale || this.background.scale || 1 - + var mx, dx, dy var w = Math.round( this.backgroundImage.naturalWidth * this.background.scale ) var h = Math.round( this.backgroundImage.naturalHeight * this.background.scale ) diff --git a/public/assets/javascripts/ui/editor/WallpaperPicker.js b/public/assets/javascripts/ui/editor/WallpaperPicker.js index b26a5dc..8f701b0 100644 --- a/public/assets/javascripts/ui/editor/WallpaperPicker.js +++ b/public/assets/javascripts/ui/editor/WallpaperPicker.js @@ -157,13 +157,13 @@ var WallpaperPicker = UploadView.extend({ return; } this.wall = wall - this.$scale.val( this.wall.background.scale ) + this.$scale.val( Math.log( this.wall.background.scale ) ) }, updateScale: function(){ if (! this.wall) return; - s = parseFloat(this.$scale.val()) - this.wall.wallpaperPosition({ scale: s }) + var scale = Math.exp( parseFloat(this.$scale.val()) ) + this.wall.wallpaperPosition({ scale: scale }) }, tileWalls: function(){ @@ -192,7 +192,7 @@ var WallpaperPicker = UploadView.extend({ down: function(e, cursor){ if (! base.wall) return dragging = true - s = parseFloat( base.$scale.val() ) + // s = parseFloat( base.$scale.val() ) x = base.wall.background.x y = base.wall.background.y }, @@ -203,7 +203,7 @@ var WallpaperPicker = UploadView.extend({ dx = delta.a*s dy = delta.b*s base.wall.wallpaperPosition({ - scale: s, + // scale: s, x: x+dx, y: y+dy, }) diff --git a/views/controls/editor/wallpaper.ejs b/views/controls/editor/wallpaper.ejs index 69a60ec..d2559cc 100644 --- a/views/controls/editor/wallpaper.ejs +++ b/views/controls/editor/wallpaper.ejs @@ -25,7 +25,7 @@
- +
-- cgit v1.2.3-70-g09d2 From 6dadb217e8253138936d4f5180f9cefa6e7caed9 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 20 Oct 2014 16:57:56 -0400 Subject: disable wallpaper resize controls --- public/assets/javascripts/ui/editor/WallpaperPicker.js | 5 +++++ public/assets/stylesheets/app.css | 4 ++++ 2 files changed, 9 insertions(+) (limited to 'public/assets/javascripts/ui/editor/WallpaperPicker.js') diff --git a/public/assets/javascripts/ui/editor/WallpaperPicker.js b/public/assets/javascripts/ui/editor/WallpaperPicker.js index 8f701b0..994fe74 100644 --- a/public/assets/javascripts/ui/editor/WallpaperPicker.js +++ b/public/assets/javascripts/ui/editor/WallpaperPicker.js @@ -27,6 +27,9 @@ var WallpaperPicker = UploadView.extend({ this.$position = this.$("[data-role='wallpaper-position']") this.$scale = this.$("[data-role='wallpaper-scale']") + this.$wallpaperResizeControls = this.$(".wallpaperResizeControls") + this.$wallpaperResizeControls.addClass('disabled') + this.initializePositionCursor() }, @@ -154,8 +157,10 @@ var WallpaperPicker = UploadView.extend({ wall: null, pickWall: function(wall){ if (! wall.background || wall.background.src == "none") { + this.$wallpaperResizeControls.addClass('disabled') return; } + this.$wallpaperResizeControls.removeClass('disabled') this.wall = wall this.$scale.val( Math.log( this.wall.background.scale ) ) }, diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 226fe98..641fa75 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -1630,6 +1630,10 @@ input[type="range"]::-webkit-slider-thumb { border:3px solid #000; } +.wallpaperResizeControls.disabled { + pointer-events: none; + opacity: 0.3; +} .wallpaperResizeControls input[type=range] { width: 130px; position: relative; -- cgit v1.2.3-70-g09d2 From a8c9c1198a8872c7ebcf3db920d2de3fe721bfc3 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 21 Oct 2014 13:03:03 -0400 Subject: move fileupload out --- .../javascripts/ui/editor/WallpaperPicker.js | 4 +--- views/controls/editor/media-drawer.ejs | 24 +++++++++++----------- 2 files changed, 13 insertions(+), 15 deletions(-) (limited to 'public/assets/javascripts/ui/editor/WallpaperPicker.js') diff --git a/public/assets/javascripts/ui/editor/WallpaperPicker.js b/public/assets/javascripts/ui/editor/WallpaperPicker.js index 994fe74..6e0d5c6 100644 --- a/public/assets/javascripts/ui/editor/WallpaperPicker.js +++ b/public/assets/javascripts/ui/editor/WallpaperPicker.js @@ -40,9 +40,6 @@ var WallpaperPicker = UploadView.extend({ hide: function(){ this.toggle(false) }, -// hide: function(){ -// this.__super__.hide.call(this) -// }, toggle: function (state) { Scenery.nextWallpaper = null @@ -158,6 +155,7 @@ var WallpaperPicker = UploadView.extend({ pickWall: function(wall){ if (! wall.background || wall.background.src == "none") { this.$wallpaperResizeControls.addClass('disabled') + this.$scale.val( 0.0 ) return; } this.$wallpaperResizeControls.removeClass('disabled') diff --git a/views/controls/editor/media-drawer.ejs b/views/controls/editor/media-drawer.ejs index 1404d86..3e64cc3 100644 --- a/views/controls/editor/media-drawer.ejs +++ b/views/controls/editor/media-drawer.ejs @@ -21,17 +21,6 @@ view more - - - -
- Upload File - - - ~ or ~
- - -
@@ -40,4 +29,15 @@ - \ No newline at end of file + + + + +
+
+ Upload File + +
+ ~ or ~
+ + -- cgit v1.2.3-70-g09d2 From 79377c1a06e986abb9146f4a9b41e4d266dc8dfc Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Fri, 24 Oct 2014 16:46:36 -0400 Subject: hit enter to flood message --- public/assets/javascripts/ui/editor/WallpaperPicker.js | 9 +++++++++ public/assets/stylesheets/app.css | 14 ++++++++++++++ views/controls/editor/wallpaper.ejs | 6 +++++- 3 files changed, 28 insertions(+), 1 deletion(-) (limited to 'public/assets/javascripts/ui/editor/WallpaperPicker.js') diff --git a/public/assets/javascripts/ui/editor/WallpaperPicker.js b/public/assets/javascripts/ui/editor/WallpaperPicker.js index 6e0d5c6..3b6168e 100644 --- a/public/assets/javascripts/ui/editor/WallpaperPicker.js +++ b/public/assets/javascripts/ui/editor/WallpaperPicker.js @@ -7,6 +7,7 @@ var WallpaperPicker = UploadView.extend({ uploadAction: "/api/media/upload", events: { + "contextmenu": 'cancel', "mousedown": 'stopPropagation', "click .swatch": 'pick', "click .wallpaperRemove": 'remove', @@ -120,6 +121,14 @@ var WallpaperPicker = UploadView.extend({ $(".floatingSwatch").addClass("scissors") } }, + + cancel: function(e){ + if (Scenery.nextWallpaper) { + e.preventDefault() + Scenery.nextWallpaper = null + app.tube('cancel-wallpaper') + } + }, follow: function(e, wallpaper, icon){ icon = icon || wallpaper diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 894483d..e5b10e3 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -1702,6 +1702,20 @@ input[type="range"]::-webkit-slider-thumb { .wallpaperResizeControls span { cursor: pointer; } +.floodMessage { + display: none; + animation: flicker 0.2s infinite; + color: black; + margin: 5px 5px 49px 5px; + font-size: 13px; + font-weight: 300; + text-align: center; +} +@keyframes flicker { + 49% { color: black; } + 50% { color: red; } + 100% { color: red; } +} #color-picker { position: relative; diff --git a/views/controls/editor/wallpaper.ejs b/views/controls/editor/wallpaper.ejs index 6d8f209..3168f1c 100644 --- a/views/controls/editor/wallpaper.ejs +++ b/views/controls/editor/wallpaper.ejs @@ -10,7 +10,7 @@ - +
@@ -30,6 +30,10 @@
+
+ Hit Enter to Flood the room! +
+
-- cgit v1.2.3-70-g09d2 From 6fa1570122f2bae9abfaffc5ed90c8b6e36675ea Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Fri, 24 Oct 2014 16:57:50 -0400 Subject: hit enter to flood, floods room, badaboom --- .../javascripts/rectangles/engine/rooms/_walls.js | 2 +- .../javascripts/ui/editor/WallpaperPicker.js | 37 ++++++++++++++++------ public/assets/stylesheets/app.css | 3 +- 3 files changed, 30 insertions(+), 12 deletions(-) (limited to 'public/assets/javascripts/ui/editor/WallpaperPicker.js') diff --git a/public/assets/javascripts/rectangles/engine/rooms/_walls.js b/public/assets/javascripts/rectangles/engine/rooms/_walls.js index 653278c..25b1c58 100644 --- a/public/assets/javascripts/rectangles/engine/rooms/_walls.js +++ b/public/assets/javascripts/rectangles/engine/rooms/_walls.js @@ -157,7 +157,7 @@ wall.wallpaper(background, img) }) }.bind(this) - img.src = background.src + img.src = background.src.replace("url(","").replace(")","") img.complete && img.onload() }, floor: function(background){ diff --git a/public/assets/javascripts/ui/editor/WallpaperPicker.js b/public/assets/javascripts/ui/editor/WallpaperPicker.js index 3b6168e..20fdf85 100644 --- a/public/assets/javascripts/ui/editor/WallpaperPicker.js +++ b/public/assets/javascripts/ui/editor/WallpaperPicker.js @@ -7,12 +7,12 @@ var WallpaperPicker = UploadView.extend({ uploadAction: "/api/media/upload", events: { - "contextmenu": 'cancel', + "contextmenu": 'contextmenu', "mousedown": 'stopPropagation', "click .swatch": 'pick', "click .wallpaperRemove": 'remove', "input [data-role='wallpaper-scale']": 'updateScale', - "change .url": "tileWalls", + "change .url": "enterUrl", "keydown .url": "enterSetUrl", }, @@ -122,15 +122,21 @@ var WallpaperPicker = UploadView.extend({ } }, - cancel: function(e){ + contextmenu: function(e){ if (Scenery.nextWallpaper) { e.preventDefault() + this.cancel() + } + }, + cancel: function(){ + if (Scenery.nextWallpaper) { Scenery.nextWallpaper = null app.tube('cancel-wallpaper') } }, follow: function(e, wallpaper, icon){ + var base = this icon = icon || wallpaper var $floatingSwatch = $(".floatingSwatch") @@ -139,6 +145,8 @@ var WallpaperPicker = UploadView.extend({ Scenery.nextWallpaper = wallpaper + $(".floodMessage").show() + setTimeout(function(){ function _followCursor(e) { $floatingSwatch.css({ @@ -151,7 +159,12 @@ var WallpaperPicker = UploadView.extend({ // $(window).off('click', _hideCursor) app.off('cancel-wallpaper', _hideCursor) $floatingSwatch.removeClass("scissors").hide() + $(".floodMessage").hide() } + function _floodRoom (e) { + base.flood() + } + $(window).on('keydown', _floodRoom) $(window).on('mousemove', _followCursor) // $(window).one('click', _hideCursor); app.on('cancel-wallpaper', _hideCursor) @@ -178,22 +191,26 @@ var WallpaperPicker = UploadView.extend({ this.wall.wallpaperPosition({ scale: scale }) }, - tileWalls: function(){ + enterUrl: function(){ var url = this.$url.sanitize() - if (url.length && url.indexOf("http") == 0) { - Walls.setWallpaper.wall({ src: url }) - Walls.setWallpaper.floor({ src: url }) - Walls.setWallpaper.ceiling({ src: url }) - } this.addUrl(url) this.$url.val("") }, enterSetUrl: function (e) { e.stopPropagation() if (e.keyCode == 13) { - setTimeout(this.tileWalls.bind(this), 100) + setTimeout(this.enterUrl.bind(this), 100) } }, + + flood: function(url){ + url = url || Scenery.nextWallpaper + if (! url) return + Walls.setWallpaper.wall({ src: url }) + Walls.setWallpaper.floor({ src: url }) + Walls.setWallpaper.ceiling({ src: url }) + this.cancel() + }, initializePositionCursor: function(){ var base = this diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index e5b10e3..8e259ef 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -1706,7 +1706,8 @@ input[type="range"]::-webkit-slider-thumb { display: none; animation: flicker 0.2s infinite; color: black; - margin: 5px 5px 49px 5px; + float: left; + margin: 10px 5px 5px 5px; font-size: 13px; font-weight: 300; text-align: center; -- cgit v1.2.3-70-g09d2 From 25a60bb0f9e4bd3944bcd3cf88d28056c6b11436 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Fri, 24 Oct 2014 16:59:25 -0400 Subject: fix --- public/assets/javascripts/ui/editor/WallpaperPicker.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) (limited to 'public/assets/javascripts/ui/editor/WallpaperPicker.js') diff --git a/public/assets/javascripts/ui/editor/WallpaperPicker.js b/public/assets/javascripts/ui/editor/WallpaperPicker.js index 20fdf85..2d60f11 100644 --- a/public/assets/javascripts/ui/editor/WallpaperPicker.js +++ b/public/assets/javascripts/ui/editor/WallpaperPicker.js @@ -155,14 +155,16 @@ var WallpaperPicker = UploadView.extend({ }); } function _hideCursor (e) { + $(window).off('keydown', _floodRoom) $(window).off('mousemove', _followCursor) - // $(window).off('click', _hideCursor) app.off('cancel-wallpaper', _hideCursor) $floatingSwatch.removeClass("scissors").hide() $(".floodMessage").hide() } function _floodRoom (e) { - base.flood() + if (e.keyCode == 13) { + base.flood() + } } $(window).on('keydown', _floodRoom) $(window).on('mousemove', _followCursor) -- cgit v1.2.3-70-g09d2 From 7a64a9fef46ddd1180dfa00fddd363b7814e381d Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 27 Oct 2014 11:47:06 -0400 Subject: hide preset underline if u modify something --- public/assets/javascripts/ui/editor/ColorControl.js | 1 + public/assets/javascripts/ui/editor/Presets.js | 9 ++++++--- public/assets/javascripts/ui/editor/WallpaperPicker.js | 3 +-- 3 files changed, 8 insertions(+), 5 deletions(-) (limited to 'public/assets/javascripts/ui/editor/WallpaperPicker.js') diff --git a/public/assets/javascripts/ui/editor/ColorControl.js b/public/assets/javascripts/ui/editor/ColorControl.js index 459ac1e..72e9fb1 100644 --- a/public/assets/javascripts/ui/editor/ColorControl.js +++ b/public/assets/javascripts/ui/editor/ColorControl.js @@ -92,6 +92,7 @@ var ColorControl = View.extend({ this.setSwatchColor(this.mode, rgb) // console.log(rgb) Walls.setColor[ this.mode ](rgb) + this.parent.presets.modified = true }, setSwatchColor: function(mode, rgb) { diff --git a/public/assets/javascripts/ui/editor/Presets.js b/public/assets/javascripts/ui/editor/Presets.js index d233144..ac77d6b 100644 --- a/public/assets/javascripts/ui/editor/Presets.js +++ b/public/assets/javascripts/ui/editor/Presets.js @@ -34,7 +34,7 @@ var Presets = View.extend({ ceiling: [0,0,0], }, matrix: { - wall: { src: "http://dump.fm/images/20130225/1361818675427-dumpfm-melipone-matrixremixtransfast.gif", scale: 4.0, color: [0,0,0] }, + wall: { src: "http://dumpfm.s3.amazonaws.com/images/20130225/1361818675427-dumpfm-melipone-matrixremixtransfast.gif", scale: 4.0, color: [0,0,0] }, outline: [0,0,0], floor: [10,15,10], ceiling: [0,0,0], @@ -53,9 +53,13 @@ var Presets = View.extend({ }.bind(this)) }, + modified: false, toggle: function(state){ this.$el.toggleClass("active", state) this.parent.cursor.message(state ? "presets" : "start") + if (this.modified) { + this.$(".active").removeClass('active') + } }, show: function(){ @@ -72,6 +76,7 @@ var Presets = View.extend({ this.$(".active").removeClass('active') $(e.currentTarget).addClass('active') this.load(this.presets[preset]) + this.modified = false }, selectColor: function(e){ @@ -79,7 +84,6 @@ var Presets = View.extend({ console.log(preset) }, - lastPreset: {wall:[1],outline:[1],floor:[1],ceiling:[1]}, load: function(preset){ this.parent.colorControl.modes.forEach(function(mode){ var color @@ -96,7 +100,6 @@ var Presets = View.extend({ }.bind(this)) this.parent.colorControl.setMode(preset.wall.color ? "wall" : "floor") Walls.setBodyColor() - this.lastPreset = preset }, }) \ No newline at end of file diff --git a/public/assets/javascripts/ui/editor/WallpaperPicker.js b/public/assets/javascripts/ui/editor/WallpaperPicker.js index 2d60f11..d7d666c 100644 --- a/public/assets/javascripts/ui/editor/WallpaperPicker.js +++ b/public/assets/javascripts/ui/editor/WallpaperPicker.js @@ -21,7 +21,6 @@ var WallpaperPicker = UploadView.extend({ this.__super__.initialize.call(this) this.$swatches = this.$(".swatches") this.$remove = this.$(".wallpaperRemove") - this.$remove.hide() this.$url = this.$(".url") @@ -108,7 +107,7 @@ var WallpaperPicker = UploadView.extend({ app.tube('cancel-wallpaper') var $swatch = $(e.currentTarget) this.follow( e, $swatch.css('background-image') ) - this.$remove.show() + this.parent.presets.modified = true }, remove: function(e){ -- cgit v1.2.3-70-g09d2 From e92acfd9a8b7b60544c8b85ad856273c732a1935 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 27 Oct 2014 12:06:25 -0400 Subject: vvalls.com/home for testing --- public/assets/javascripts/ui/_router.js | 1 + public/assets/javascripts/ui/editor/WallpaperPicker.js | 2 +- server/index.js | 1 + server/lib/views/index.js | 8 ++++++++ 4 files changed, 11 insertions(+), 1 deletion(-) (limited to 'public/assets/javascripts/ui/editor/WallpaperPicker.js') diff --git a/public/assets/javascripts/ui/_router.js b/public/assets/javascripts/ui/_router.js index bda0960..c7b625a 100644 --- a/public/assets/javascripts/ui/_router.js +++ b/public/assets/javascripts/ui/_router.js @@ -46,6 +46,7 @@ var SiteRouter = Router.extend({ mobileRoutes: { "/": 'home', + "/home": 'home', "/profile": 'profile', "/project/:name": 'projectViewer', }, diff --git a/public/assets/javascripts/ui/editor/WallpaperPicker.js b/public/assets/javascripts/ui/editor/WallpaperPicker.js index d7d666c..c383489 100644 --- a/public/assets/javascripts/ui/editor/WallpaperPicker.js +++ b/public/assets/javascripts/ui/editor/WallpaperPicker.js @@ -54,7 +54,7 @@ var WallpaperPicker = UploadView.extend({ // toggle the class that makes the cursor a paintbucket // $("body").removeClass("pastePaper") }, - + load: function(){ $.get("/api/media/user", { tag: this.mediaTag }, this.populate.bind(this)) }, diff --git a/server/index.js b/server/index.js index 8f66418..90b724c 100644 --- a/server/index.js +++ b/server/index.js @@ -79,6 +79,7 @@ site.setup = function(){ site.route = function () { app.get('/', views.home); + app.get('/home', views.demoHome); app.get('/login', views.modal); app.get('/logout', auth.logout); app.get('/signup', views.modal); diff --git a/server/lib/views/index.js b/server/lib/views/index.js index eacff1f..5768ace 100644 --- a/server/lib/views/index.js +++ b/server/lib/views/index.js @@ -90,6 +90,14 @@ var views = module.exports = { }) }, + demoHome: function (req, res) { + views_middleware.fetchProjects({ featured: true }, null, null, function(err, projects){ + res.render('home', { + projects: projects || [] + }) + }) + }, + docs: function (req, res){ var name = req.params.name || "index" -- cgit v1.2.3-70-g09d2 From a122c8137152cb7d6c1a398033364b200330b6ee Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 17 Nov 2014 11:34:28 -0500 Subject: autosave after tweaking wallpaper size --- public/assets/javascripts/ui/editor/WallpaperPicker.js | 9 +++++++++ 1 file changed, 9 insertions(+) (limited to 'public/assets/javascripts/ui/editor/WallpaperPicker.js') diff --git a/public/assets/javascripts/ui/editor/WallpaperPicker.js b/public/assets/javascripts/ui/editor/WallpaperPicker.js index c383489..e2aaeb7 100644 --- a/public/assets/javascripts/ui/editor/WallpaperPicker.js +++ b/public/assets/javascripts/ui/editor/WallpaperPicker.js @@ -186,10 +186,19 @@ var WallpaperPicker = UploadView.extend({ this.$scale.val( Math.log( this.wall.background.scale ) ) }, + scaleTimeout: null, updateScale: function(){ if (! this.wall) return; var scale = Math.exp( parseFloat(this.$scale.val()) ) this.wall.wallpaperPosition({ scale: scale }) + + clearTimeout(this.scaleTimeout) + this.scaleTimeout = setTimeout(function(){ + + // TODO: watch individual scenery object here + Minotaur.watch( app.router.editorView.settings ) + + }.bind(this), 500) }, enterUrl: function(){ -- cgit v1.2.3-70-g09d2 From dc4cd71e3a0585a419898c834360f42f5bd09bd4 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 1 Dec 2014 13:03:37 -0500 Subject: delete wallpaper with scissors --- .../javascripts/ui/editor/WallpaperPicker.js | 29 ++++++++++++++++---- public/assets/stylesheets/app.css | 32 ++++++++++++++++++++++ 2 files changed, 56 insertions(+), 5 deletions(-) (limited to 'public/assets/javascripts/ui/editor/WallpaperPicker.js') diff --git a/public/assets/javascripts/ui/editor/WallpaperPicker.js b/public/assets/javascripts/ui/editor/WallpaperPicker.js index e2aaeb7..3640d6d 100644 --- a/public/assets/javascripts/ui/editor/WallpaperPicker.js +++ b/public/assets/javascripts/ui/editor/WallpaperPicker.js @@ -5,6 +5,7 @@ var WallpaperPicker = UploadView.extend({ mediaTag: "wallpaper", createAction: "/api/media/new", uploadAction: "/api/media/upload", + destroyAction: "/api/media/destroy", events: { "contextmenu": 'contextmenu', @@ -51,8 +52,6 @@ var WallpaperPicker = UploadView.extend({ this.load() } } - // toggle the class that makes the cursor a paintbucket - // $("body").removeClass("pastePaper") }, load: function(){ @@ -78,6 +77,7 @@ var WallpaperPicker = UploadView.extend({ var swatch = document.createElement("div") swatch.className = "swatch" swatch.style.backgroundImage = "url(" + media.url + ")" + swatch.setAttribute("data-id", media._id) this.$swatches.append(swatch) this.$swatches.show() this.$(".txt").hide() @@ -104,23 +104,41 @@ var WallpaperPicker = UploadView.extend({ }, pick: function(e){ - app.tube('cancel-wallpaper') var $swatch = $(e.currentTarget) - this.follow( e, $swatch.css('background-image') ) - this.parent.presets.modified = true + if (Scenery.nextWallpaper == "none") { + var _id = $swatch[0].getAttribute("data-id") + $swatch.remove() + this.destroy(_id, function(){}) + } + else { + app.tube('cancel-wallpaper') + this.follow( e, $swatch.css('background-image') ) + this.parent.presets.modified = true + } }, remove: function(e){ if (Scenery.nextWallpaper) { + // remove red class to the wallpaper Scenery.nextWallpaper = null app.tube('cancel-wallpaper') } else { + // add red class to the wallpaper this.follow( e, "none" ) $(".floatingSwatch").addClass("scissors") + this.$el.addClass("deleteArmed") } }, + destroy: function(_id, cb){ + $.ajax({ + type: "delete", + url: this.destroyAction, + data: { _id: _id, _csrf: $("[name=_csrf]").val() } + }).complete(cb || function(){}) + }, + contextmenu: function(e){ if (Scenery.nextWallpaper) { e.preventDefault() @@ -159,6 +177,7 @@ var WallpaperPicker = UploadView.extend({ app.off('cancel-wallpaper', _hideCursor) $floatingSwatch.removeClass("scissors").hide() $(".floodMessage").hide() + base.$el.removeClass("deleteArmed") } function _floodRoom (e) { if (e.keyCode == 13) { diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 3c380ef..a488ad9 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -1690,6 +1690,38 @@ border-left: 1px solid black; padding-bottom: 6px; } +.wallpaper.deleteArmed.active .swatches .swatch { + border: 1px solid #FF3B30; +} +.desktop .wallpaper.deleteArmed .swatch:hover { + background-color: #FF3B30; +} + +.wallpaper.deleteArmed .swatch:before { + content: "\f1eb"; + font-family: 'ionicons'; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + -webkit-font-smoothing: antialiased; + font-size: 16px; + position: absolute; + background: #FF3B30; + border-radius: 50%; + margin-top: -8px; + margin-left: -8px; + color: white; + width: 20px; + height: 20px; + line-height: 16px; + text-align: center; + padding-top: 2px; +} + + + .vvbox .colors { max-width: 155px; margin-bottom: 5px; -- cgit v1.2.3-70-g09d2