diff options
| -rw-r--r-- | public/assets/javascripts/mx/primitives/mx.text.js | 4 | ||||
| -rw-r--r-- | public/assets/javascripts/ui/editor/ColorControl.js | 8 | ||||
| -rw-r--r-- | public/assets/javascripts/ui/editor/TextEditor.js | 68 | ||||
| -rw-r--r-- | public/assets/javascripts/ui/lib/LabColorPicker.js | 4 | ||||
| -rwxr-xr-x | public/assets/stylesheets/app.css | 11 | ||||
| -rw-r--r-- | views/controls/editor/color-control.ejs | 2 | ||||
| -rw-r--r-- | views/controls/editor/text-editor.ejs | 17 | ||||
| -rw-r--r-- | views/controls/editor/toolbar.ejs | 2 |
8 files changed, 98 insertions, 18 deletions
diff --git a/public/assets/javascripts/mx/primitives/mx.text.js b/public/assets/javascripts/mx/primitives/mx.text.js index 1d975ec..a0f9283 100644 --- a/public/assets/javascripts/mx/primitives/mx.text.js +++ b/public/assets/javascripts/mx/primitives/mx.text.js @@ -38,16 +38,18 @@ MX.Text = MX.Object3D.extend({ load: function(ops){ var media = ops.media - if (media.color) this.el.style.color = media.color; if (media.font) this.setFont(media.font) this.setText( media.description ) }, setFont: function(font){ + if (! font.color || font.color[0] == "#") { font.color = [0,0,0] } + this.inner.style.fontFamily = "'" + font.family + "',sans-serif" this.el.style.fontSize = (2 * font.size) + "pt" this.el.style.textAlign = font.align + this.el.style.color = rgb_string(font.color) }, setText: function(text){ diff --git a/public/assets/javascripts/ui/editor/ColorControl.js b/public/assets/javascripts/ui/editor/ColorControl.js index 0c5463e..9ab2623 100644 --- a/public/assets/javascripts/ui/editor/ColorControl.js +++ b/public/assets/javascripts/ui/editor/ColorControl.js @@ -28,8 +28,8 @@ var ColorControl = View.extend({ this.parent = opt.parent this.colorPicker = new LabColorPicker(this, 155, 155) - this.$("#color-picker").append( this.colorPicker.canvas ) - this.$("#color-picker").append( this.colorPicker.cursor ) + this.$(".color-picker").append( this.colorPicker.canvas ) + this.$(".color-picker").append( this.colorPicker.cursor ) this.$(".slider").append( this.colorPicker.brightness ) this.$swatches = this.$(".swatch") @@ -85,7 +85,7 @@ var ColorControl = View.extend({ this.toggle(false) }, - pick: function(rgb, Lab){ + pickColor: function(rgb, Lab){ this.labColor = Lab this.setSwatchColor(this.mode, rgb) // console.log(rgb) @@ -142,7 +142,7 @@ var ColorControl = View.extend({ setHue: function(e){ var color = $(e.currentTarget).data('color') this.labColor = this.colorPicker.load(color) - this.pick(color, this.labColor) + this.pickColor(color, this.labColor) } }) diff --git a/public/assets/javascripts/ui/editor/TextEditor.js b/public/assets/javascripts/ui/editor/TextEditor.js index 2949943..c5902b2 100644 --- a/public/assets/javascripts/ui/editor/TextEditor.js +++ b/public/assets/javascripts/ui/editor/TextEditor.js @@ -11,6 +11,8 @@ var TextEditor = FormView.extend({ "change [name=font-family]": 'changeFontFamily', "change [name=font-size]": 'changeFontSize', "change [name=text-align]": 'changeTextAlign', + "click .swatch": 'showColorPicker', + "click [data-role=hide-color-picker]": 'hideColorPicker', "input [name=text-body]": 'changeText', "click [data-role=destroy-text]": "destroy", }, @@ -19,13 +21,22 @@ var TextEditor = FormView.extend({ this.parent = opt.parent this.__super__.initialize.call(this) - this.$settings = this.$(".setting") + this.$textSettings = this.$(".text-setting") + this.$colorSettings = this.$(".color-setting") this.$noTextMessage = this.$(".no-text") this.$fontFamily = this.$("[name=font-family]") this.$fontSize = this.$("[name=font-size]") this.$textBody = this.$("[name=text-body]") this.$textAlign = this.$("[name=text-align]") + this.$swatch = this.$(".swatch") + + this.colorPicker = new LabColorPicker(this, 155, 155) + this.$(".color-picker").append( this.colorPicker.canvas ) + this.$(".color-picker").append( this.colorPicker.cursor ) + this.$(".slider").append( this.colorPicker.brightness ) + this.$(".setting").hide() + app.on("cancel-scenery", function(){ this.createMode(true) $("body").toggleClass("addText", false) @@ -68,7 +79,8 @@ var TextEditor = FormView.extend({ this.scenery = scenery this.scenery.mx.bound = true this.scenery.mx.el.classList.add("picked") - }, + this.scenery.media.font.color = this.scenery.media.font.color || [0,0,0] + }, unbind: function(){ if (this.scenery) { @@ -88,7 +100,8 @@ var TextEditor = FormView.extend({ }, createMode: function(state){ - this.$settings.toggle(! state) + this.$colorSettings.hide() + this.$textSettings.toggle(! state) this.$noTextMessage.toggle(!! state) $("body").toggleClass("addText", !! state) }, @@ -109,6 +122,7 @@ var TextEditor = FormView.extend({ this.$fontFamily.val( this.scenery.media.font.family ) this.$fontSize.val( this.scenery.media.font.size ) this.$textAlign.val( this.scenery.media.font.align ) + this.setSwatchColor( this.scenery.media.font.color ) this.createMode(false) @@ -147,5 +161,53 @@ var TextEditor = FormView.extend({ this.scenery.remove() this.hide() }, + + setSwatchColor: function(rgb){ + this.$swatch.css("background-color", rgb_string(rgb)) + }, + showColorPicker: function(){ + this.$textSettings.hide() + this.$colorSettings.show() + + this.labColor = this.colorPicker.load(this.scenery.media.font.color) + this.pickColor(color, this.labColor) + }, + hideColorPicker: function(e){ + e && e.preventDefault() + this.$textSettings.show() + this.$colorSettings.hide() + }, + + pickColor: function(rgb, Lab){ + this.labColor = Lab + this.setSwatchColor(rgb) + this.scenery.setFont({ color: rgb }) + }, + + initialState: null, + + begin: function(){ + // this.initialState = this.serialize() + }, + + serialize: function(){ + return { + rgb: Walls.colors[ this.mode ] + } + }, + + finalize: function(){ + if (! this.initialState) { return } + UndoStack.push({ + type: 'update-colors', + undo: this.initialState, + redo: this.serialize(), + }) + + this.initialState = null + + // TODO: watch individual wall object here + Minotaur.watch( app.router.editorView.settings ) + }, }) diff --git a/public/assets/javascripts/ui/lib/LabColorPicker.js b/public/assets/javascripts/ui/lib/LabColorPicker.js index 0e1563a..7ddcdd5 100644 --- a/public/assets/javascripts/ui/lib/LabColorPicker.js +++ b/public/assets/javascripts/ui/lib/LabColorPicker.js @@ -64,7 +64,7 @@ var LabColorPicker = function (parent, w, h) { var y = mix( j/hh, b_range[0], b_range[1] ) var rgb = xyz2rgb(hunterlab2xyz(val, x, y)).map(Math.round) this.moveCursor(i, j) - parent.pick( rgb, [val,x,y] ) + parent.pickColor( rgb, [val,x,y] ) } this.load = function(rgba){ var Lab = xyz2hunterlab(rgb2xyz(rgba)) @@ -107,7 +107,7 @@ var LabColorPicker = function (parent, w, h) { this.updateBrightness = function(){ parent.labColor[0] = parseFloat( $brightnessControl.val() ) var rgb = base.setLab( parent.labColor ) - parent.pick(rgb, parent.labColor) + parent.pickColor(rgb, parent.labColor) } this.setBrightness = function(Lab){ $brightnessControl.val(Lab[0]) diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index a3274a1..b8ede80 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -1844,7 +1844,7 @@ input[type="range"]::-webkit-slider-thumb { 50% { opacity:0.7; } } -#color-picker { +.color-picker { position: relative; } .colorPicker { @@ -1983,7 +1983,14 @@ input[type="range"]::-webkit-slider-thumb { width: 210px; } #textEditor.settings { - width: 300px; + width: 320px; +} +#textEditor .swatch { + position: relative; + top: 6px; + margin-left: 6px; + cursor: pointer; + float: none; } .settings.active { diff --git a/views/controls/editor/color-control.ejs b/views/controls/editor/color-control.ejs index 1fa1688..c035e24 100644 --- a/views/controls/editor/color-control.ejs +++ b/views/controls/editor/color-control.ejs @@ -4,7 +4,7 @@ <div class="colors"> </div> - <div id="color-picker"> + <div class="color-picker"> </div> <div class="slider"> diff --git a/views/controls/editor/text-editor.ejs b/views/controls/editor/text-editor.ejs index c30cb67..2423e9f 100644 --- a/views/controls/editor/text-editor.ejs +++ b/views/controls/editor/text-editor.ejs @@ -5,7 +5,7 @@ Click a wall to add text. </div> - <div class="setting"> + <div class="setting text-setting"> <select name="font-family"> <option>Baskerville</option> <option>Brush Script</option> @@ -46,15 +46,26 @@ <option value="right">Right</option> <option value="justify">Justify</option> </select> + <div class="swatch"></div> </div> - <div class="setting"> + <div class="setting text-setting"> <textarea name="text-body"></textarea> </div> - <div class="setting"> + <div class="setting text-setting"> <a href="#" class="warn btn" data-role="destroy-text">remove from wall</a> </div> + + <div class="setting color-setting"> + <a href="#" class="btn" data-role="hide-color-picker">done</a> + + <div class="color-picker"> + </div> + + <div class="slider"> + </div> + </div> </div> <style> diff --git a/views/controls/editor/toolbar.ejs b/views/controls/editor/toolbar.ejs index 23d5eb4..6960cbc 100644 --- a/views/controls/editor/toolbar.ejs +++ b/views/controls/editor/toolbar.ejs @@ -32,12 +32,10 @@ data-role='toggle-color-control' data-info="edit room colors" class="ion-ios7-sunny-outline"></span> -[[ if (user.username == "asdf") { ]] <span data-role='toggle-text-editor' data-info="add text to wall" class="ion-ios7-compose-outline"></span> -[[ } ]] <!-- <span data-role='toggle-map-view' |