text color picker

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 )
+  },
 
 })