toggle color picker, swatches, done button, etc

1 files changed, 27 insertions, 4 deletions

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 = $("<span>")
+    	$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()
   },