From 0f8be5bc39ca5049d3f29fe74eb423da4dcb055a Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Thu, 13 Nov 2014 13:03:20 -0500 Subject: text color picker --- public/assets/javascripts/ui/editor/TextEditor.js | 68 ++++++++++++++++++++++- 1 file changed, 65 insertions(+), 3 deletions(-) (limited to 'public/assets/javascripts/ui/editor/TextEditor.js') 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 ) + }, }) -- cgit v1.2.3-70-g09d2 From d4774d78b0b9a52b5fff4c4b782df6b2d534a167 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Thu, 13 Nov 2014 13:34:00 -0500 Subject: toggle color picker, swatches, done button, etc --- public/assets/javascripts/ui/editor/TextEditor.js | 31 ++++++++++++++++++++--- public/assets/stylesheets/app.css | 6 +++++ views/controls/editor/text-editor.ejs | 10 +++++--- 3 files changed, 40 insertions(+), 7 deletions(-) (limited to 'public/assets/javascripts/ui/editor/TextEditor.js') diff --git a/public/assets/javascripts/ui/editor/TextEditor.js b/public/assets/javascripts/ui/editor/TextEditor.js index c5902b2..5013408 100644 --- a/public/assets/javascripts/ui/editor/TextEditor.js +++ b/public/assets/javascripts/ui/editor/TextEditor.js @@ -13,8 +13,10 @@ var TextEditor = FormView.extend({ "change [name=text-align]": 'changeTextAlign', "click .swatch": 'showColorPicker', "click [data-role=hide-color-picker]": 'hideColorPicker', + "click [data-role=hide-text-editor]": 'hide', "input [name=text-body]": 'changeText', "click [data-role=destroy-text]": "destroy", + "click .colors span": "setHue", }, initialize: function(opt){ @@ -34,13 +36,22 @@ var TextEditor = FormView.extend({ this.$(".color-picker").append( this.colorPicker.canvas ) this.$(".color-picker").append( this.colorPicker.cursor ) this.$(".slider").append( this.colorPicker.brightness ) - + + this.$colors = this.$(".colors") + this.parent.colorControl.colors.forEach(function(color){ + var $swatch = $("") + $swatch.css("background-color","rgb(" + color + ")") + $swatch.data('color', color) + this.$colors.append($swatch) + }.bind(this)) + this.$(".setting").hide() app.on("cancel-scenery", function(){ this.createMode(true) $("body").toggleClass("addText", false) }.bind(this)) + }, toggle: function(state){ @@ -100,7 +111,7 @@ var TextEditor = FormView.extend({ }, createMode: function(state){ - this.$colorSettings.hide() + this.hideColorPicker() this.$textSettings.toggle(! state) this.$noTextMessage.toggle(!! state) $("body").toggleClass("addText", !! state) @@ -169,24 +180,36 @@ var TextEditor = FormView.extend({ this.$textSettings.hide() this.$colorSettings.show() - this.labColor = this.colorPicker.load(this.scenery.media.font.color) + var color = this.scenery.media.font.color + this.labColor = this.colorPicker.load(color) this.pickColor(color, this.labColor) + + this.$el.addClass("color-mode") }, + hideColorPicker: function(e){ e && e.preventDefault() this.$textSettings.show() this.$colorSettings.hide() + this.$el.removeClass("color-mode") }, pickColor: function(rgb, Lab){ this.labColor = Lab this.setSwatchColor(rgb) this.scenery.setFont({ color: rgb }) + this.tainted = true + }, + + setHue: function(e){ + var color = $(e.currentTarget).data('color') + this.labColor = this.colorPicker.load(color) + this.pickColor(color, this.labColor) }, initialState: null, - begin: function(){ + begin: function(){ // this.initialState = this.serialize() }, diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index b8ede80..814df90 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -1992,6 +1992,12 @@ input[type="range"]::-webkit-slider-thumb { cursor: pointer; float: none; } +#textEditor.color-mode { + width: 180px; +} +#textEditor.color-mode h4:after { + content: ' Colors'; +} .settings.active { -webkit-transform: translateY(0px); diff --git a/views/controls/editor/text-editor.ejs b/views/controls/editor/text-editor.ejs index 2423e9f..baf9239 100644 --- a/views/controls/editor/text-editor.ejs +++ b/views/controls/editor/text-editor.ejs @@ -54,15 +54,19 @@
- remove from wall + done + remove from wall
- done + done

+ +
+
- +
-- cgit v1.2.3-70-g09d2 From bb6d520f07ca5aa481cb80558dd9078f600a1d64 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Thu, 13 Nov 2014 13:35:03 -0500 Subject: hide dots --- public/assets/javascripts/ui/editor/TextEditor.js | 1 + 1 file changed, 1 insertion(+) (limited to 'public/assets/javascripts/ui/editor/TextEditor.js') diff --git a/public/assets/javascripts/ui/editor/TextEditor.js b/public/assets/javascripts/ui/editor/TextEditor.js index 5013408..d897f91 100644 --- a/public/assets/javascripts/ui/editor/TextEditor.js +++ b/public/assets/javascripts/ui/editor/TextEditor.js @@ -77,6 +77,7 @@ var TextEditor = FormView.extend({ if (this.scenery) { this.unbind() } + Scenery.resize.hide() this.toggle(false) }, -- cgit v1.2.3-70-g09d2