diff options
| -rw-r--r-- | public/assets/javascripts/ui/editor/LightControl.js | 32 | ||||
| -rwxr-xr-x | public/assets/stylesheets/app.css | 15 | ||||
| -rw-r--r-- | views/controls/editor/light-control.ejs | 3 |
3 files changed, 33 insertions, 17 deletions
diff --git a/public/assets/javascripts/ui/editor/LightControl.js b/public/assets/javascripts/ui/editor/LightControl.js index 96f6942..9c3cdd3 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 @@ -182,6 +178,7 @@ var LabColorPicker = function (parent, w, 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(x,y) parent.pick( rgb, [val,x,y] ) } this.load = function(rgba){ @@ -189,10 +186,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 diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index fe50b92..8f22db5 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -1262,9 +1262,20 @@ input[type="range"]::-webkit-slider-thumb { border-radius:10px; cursor:pointer; } +#color-picker { + position: relative; +} .colorPicker { cursor: crosshair; } +.colorPickerCursor { + position: absolute; + width: 8px; + height: 8px; + border: 2px solid black; + border-radius: 50%; + margin-left: -4px; +} .swatch { width: 20px; @@ -1274,10 +1285,10 @@ input[type="range"]::-webkit-slider-thumb { cursor: pointer; float:left; } -.swatch:hover { +span:hover .swatch { border: 1px solid red; } -.swatch.selected { +.active .swatch { border: 1px solid #000; } .color-swatches { diff --git a/views/controls/editor/light-control.ejs b/views/controls/editor/light-control.ejs index 65a602f..8b133a5 100644 --- a/views/controls/editor/light-control.ejs +++ b/views/controls/editor/light-control.ejs @@ -1,4 +1,7 @@ <div class="vvbox lightcontrol"> + <div id="color-picker"> + </div> + <div class="slider"> <h4>Brightness Control</h4> <input type="range" min="0" max="110" value="0" id="brightness-control" /> |