Merge branch 'master' of github.com:okfocus/vvalls

1 files changed, 90 insertions, 4 deletions

diff --git a/public/assets/javascripts/ui/editor/TextEditor.js b/public/assets/javascripts/ui/editor/TextEditor.js
index 2949943..d897f91 100644
--- a/public/assets/javascripts/ui/editor/TextEditor.js
+++ b/public/assets/javascripts/ui/editor/TextEditor.js
@@ -11,25 +11,47 @@ 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',
+		"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){
 		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.$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){
@@ -55,6 +77,7 @@ var TextEditor = FormView.extend({
 		if (this.scenery) {
 			this.unbind()
 		}
+		Scenery.resize.hide()
 		this.toggle(false)
 	},
 
@@ -68,7 +91,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 +112,8 @@ var TextEditor = FormView.extend({
 	},
   
   createMode: function(state){
-    this.$settings.toggle(! state)
+    this.hideColorPicker()
+    this.$textSettings.toggle(! state)
     this.$noTextMessage.toggle(!! state)
     $("body").toggleClass("addText", !! state)
   },
@@ -109,6 +134,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 +173,65 @@ 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()
+    
+	  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(){
+    // 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 )
+  },
 
 })