diff options
| -rw-r--r-- | public/assets/javascripts/rectangles/models/wall.js | 7 | ||||
| -rw-r--r-- | public/assets/javascripts/ui/editor/WallpaperPicker.js | 40 | ||||
| -rwxr-xr-x | public/assets/stylesheets/app.css | 11 | ||||
| -rw-r--r-- | views/controls/editor/wallpaper.ejs | 12 |
4 files changed, 58 insertions, 12 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); + }) } }) diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index a2d2120..2583284 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -58,6 +58,17 @@ a{ } +.floatingSwatch { + width: 50px; + height: 50px; + position:absolute; + border: 2px solid black; + box-shadow: -2px 2px #fff; + display: none; + z-index: 10; + pointer-events: none; +} + .ants { max-width:320px; height: auto; diff --git a/views/controls/editor/wallpaper.ejs b/views/controls/editor/wallpaper.ejs index 82460b7..144e419 100644 --- a/views/controls/editor/wallpaper.ejs +++ b/views/controls/editor/wallpaper.ejs @@ -1,10 +1,4 @@ <div class="vvbox wallpaper"> - <span class="paper1"></span> - <span class="paper2"></span> - <span class="paper3"></span> - <span class="paper4"></span> - <span class="paper5"></span> - <span class="paper6"></span> - <span class="paper7"></span> - <span class="paper8"></span> -</div>
\ No newline at end of file +</div> + +<div class="floatingSwatch"></div> |