diff options
Diffstat (limited to 'public/assets/javascripts')
| -rw-r--r-- | public/assets/javascripts/rectangles/models/wall.js | 7 | ||||
| -rw-r--r-- | public/assets/javascripts/ui/editor/WallpaperPicker.js | 40 |
2 files changed, 44 insertions, 3 deletions
diff --git a/public/assets/javascripts/rectangles/models/wall.js b/public/assets/javascripts/rectangles/models/wall.js index cc298c6..7ff4ccb 100644 --- a/public/assets/javascripts/rectangles/models/wall.js +++ b/public/assets/javascripts/rectangles/models/wall.js @@ -45,6 +45,9 @@ window.Wall = (function(){ if (Scenery.nextMedia) { Scenery.addNextToWall(base) } + else if (Scenery.nextWallpaper) { + base.wallpaper() + } else { app.controller.hideExtras() } @@ -112,6 +115,10 @@ window.Wall = (function(){ this.$walls && this.$walls.css("background-color", color) } + Wall.prototype.wallpaper = function(){ + this.$walls.css("background-image", Scenery.nextWallpaper) + } + Wall.prototype.siblings = function(){ var base = this var match = base.side | base.half_side diff --git a/public/assets/javascripts/ui/editor/WallpaperPicker.js b/public/assets/javascripts/ui/editor/WallpaperPicker.js index 474d4c1..cb1e361 100644 --- a/public/assets/javascripts/ui/editor/WallpaperPicker.js +++ b/public/assets/javascripts/ui/editor/WallpaperPicker.js @@ -3,10 +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(){ @@ -16,8 +30,28 @@ 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); + }) } }) |