diff options
| -rw-r--r-- | public/assets/javascripts/ui/editor/EditorView.js | 1 | ||||
| -rw-r--r-- | public/assets/javascripts/ui/editor/LightControl.js | 11 | ||||
| -rw-r--r-- | public/assets/javascripts/ui/editor/WallpaperPicker.js | 57 | ||||
| -rwxr-xr-x | public/assets/stylesheets/app.css | 18 | ||||
| -rw-r--r-- | public/assets/test/bg.html | 2 | ||||
| -rw-r--r-- | views/controls/editor/light-control.ejs | 6 | ||||
| -rw-r--r-- | views/controls/editor/wallpaper.ejs | 6 |
7 files changed, 90 insertions, 11 deletions
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/LightControl.js b/public/assets/javascripts/ui/editor/LightControl.js index 2b7cfaa..51e6be7 100644 --- a/public/assets/javascripts/ui/editor/LightControl.js +++ b/public/assets/javascripts/ui/editor/LightControl.js @@ -134,17 +134,18 @@ var LightControl = View.extend({ floor: [255,255,0], ceiling: [225,118,252], }, - seapunk: { - wall: [110,255,255], - outline: [146,133,255], - floor: [89,221,255], - ceiling: [139,255,173], + inverse: { + wall: [0,0,0], + outline: [0,230,255], + floor: [0,0,0], + ceiling: [0,0,0], }, }, selectPreset: function(e){ var preset = $(e.currentTarget).data('preset') if (! this.presets[preset]) return this.load(this.presets[preset]) + $(e.currentTarget).addClass('active') }, beginBrightness: 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 b4d176f..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; } @@ -1529,6 +1541,10 @@ input[type="range"]::-webkit-slider-thumb { width: 50%; float:left; cursor:pointer; + border-bottom: 1px transparent solid; +} +.presets span.active { + border-bottom: 1px dotted; } .color-swatches span { display: inline-block; @@ -1589,7 +1605,7 @@ input[type="range"]::-webkit-slider-thumb { font-size: 12px; -webkit-transform: translateY(500px); -webkit-transition: -webkit-transform 0.2s ease-in-out; - transform: translateY(450px); + transform: translateY(500px); transition: -webkit-transform 0.2s ease-in-out; width: 210px; } 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/light-control.ejs b/views/controls/editor/light-control.ejs index 1fc4484..8f42d8d 100644 --- a/views/controls/editor/light-control.ejs +++ b/views/controls/editor/light-control.ejs @@ -30,11 +30,11 @@ <span data-preset="shaded"> Shaded </span> + <span data-preset="inverse"> + Inverse + </span> <span data-preset="pfunk"> P.Funk </span> - <span data-preset="seapunk"> - SeaPunk - </span> </div> </div> diff --git a/views/controls/editor/wallpaper.ejs b/views/controls/editor/wallpaper.ejs index 2d47e04..d54b9c1 100644 --- a/views/controls/editor/wallpaper.ejs +++ b/views/controls/editor/wallpaper.ejs @@ -30,6 +30,12 @@ <span class="ion-arrow-resize"></span> <label>Resize Wallpaper</label> </div> + + <div class="wallpaperResizeControls"> + <span data-role="wallpaper-position" class="ion-arrow-expand"></span> + <input data-role="wallpaper-scale" type="range" min="0.01" max="8.0" step="0.1" value="1.0"> + </div> + </div> <div class="floatingSwatch"></div> |