diff options
Diffstat (limited to 'public/assets/javascripts/ui/editor/TextEditor.js')
| -rw-r--r-- | public/assets/javascripts/ui/editor/TextEditor.js | 68 |
1 files changed, 65 insertions, 3 deletions
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 ) + }, }) |