text color picker

8 files changed, 98 insertions, 18 deletions

diff --git a/public/assets/javascripts/mx/primitives/mx.text.js b/public/assets/javascripts/mx/primitives/mx.text.js
index 1d975ec..a0f9283 100644
--- a/public/assets/javascripts/mx/primitives/mx.text.js
+++ b/public/assets/javascripts/mx/primitives/mx.text.js
@@ -38,16 +38,18 @@ MX.Text = MX.Object3D.extend({
   
   load: function(ops){
     var media = ops.media
-    if (media.color) this.el.style.color = media.color;
     if (media.font) this.setFont(media.font)
 
     this.setText( media.description )
   },
   
   setFont: function(font){
+    if (! font.color || font.color[0] == "#") { font.color = [0,0,0] }
+
     this.inner.style.fontFamily = "'" + font.family + "',sans-serif"
     this.el.style.fontSize = (2 * font.size) + "pt"
     this.el.style.textAlign = font.align
+    this.el.style.color = rgb_string(font.color)
   },
   
   setText: function(text){
diff --git a/public/assets/javascripts/ui/editor/ColorControl.js b/public/assets/javascripts/ui/editor/ColorControl.js
index 0c5463e..9ab2623 100644
--- a/public/assets/javascripts/ui/editor/ColorControl.js
+++ b/public/assets/javascripts/ui/editor/ColorControl.js
@@ -28,8 +28,8 @@ var ColorControl = View.extend({
     this.parent = opt.parent
 
     this.colorPicker = new LabColorPicker(this, 155, 155)
-    this.$("#color-picker").append( this.colorPicker.canvas )
-    this.$("#color-picker").append( this.colorPicker.cursor )
+    this.$(".color-picker").append( this.colorPicker.canvas )
+    this.$(".color-picker").append( this.colorPicker.cursor )
     this.$(".slider").append( this.colorPicker.brightness )
     
     this.$swatches = this.$(".swatch")
@@ -85,7 +85,7 @@ var ColorControl = View.extend({
     this.toggle(false)
   },
   
-  pick: function(rgb, Lab){
+  pickColor: function(rgb, Lab){
     this.labColor = Lab
     this.setSwatchColor(this.mode, rgb)
     // console.log(rgb)
@@ -142,7 +142,7 @@ var ColorControl = View.extend({
   setHue: function(e){
   	var color = $(e.currentTarget).data('color')
     this.labColor = this.colorPicker.load(color)
-    this.pick(color, this.labColor)
+    this.pickColor(color, this.labColor)
   }
 
 })
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 )
+  },
 
 })
diff --git a/public/assets/javascripts/ui/lib/LabColorPicker.js b/public/assets/javascripts/ui/lib/LabColorPicker.js
index 0e1563a..7ddcdd5 100644
--- a/public/assets/javascripts/ui/lib/LabColorPicker.js
+++ b/public/assets/javascripts/ui/lib/LabColorPicker.js
@@ -64,7 +64,7 @@ var LabColorPicker = function (parent, w, h) {
     var y = mix( j/hh, b_range[0], b_range[1] )
     var rgb = xyz2rgb(hunterlab2xyz(val, x, y)).map(Math.round)
     this.moveCursor(i, j)
-    parent.pick( rgb, [val,x,y] )
+    parent.pickColor( rgb, [val,x,y] )
   }
   this.load = function(rgba){
     var Lab = xyz2hunterlab(rgb2xyz(rgba))
@@ -107,7 +107,7 @@ var LabColorPicker = function (parent, w, h) {
   this.updateBrightness = function(){
     parent.labColor[0] = parseFloat( $brightnessControl.val() )
     var rgb = base.setLab( parent.labColor )
-    parent.pick(rgb, parent.labColor)
+    parent.pickColor(rgb, parent.labColor)
   }
   this.setBrightness = function(Lab){
     $brightnessControl.val(Lab[0])
diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css
index a3274a1..b8ede80 100755
--- a/public/assets/stylesheets/app.css
+++ b/public/assets/stylesheets/app.css
@@ -1844,7 +1844,7 @@ input[type="range"]::-webkit-slider-thumb {
    50% { opacity:0.7; }
 }
 
-#color-picker {
+.color-picker {
   position: relative;
 }
 .colorPicker {
@@ -1983,7 +1983,14 @@ input[type="range"]::-webkit-slider-thumb {
 	width: 210px;
 }
 #textEditor.settings {
-  width: 300px;
+  width: 320px;
+}
+#textEditor .swatch {
+  position: relative;
+  top: 6px;
+  margin-left: 6px;
+  cursor: pointer;
+  float: none;
 }
 
 .settings.active {
diff --git a/views/controls/editor/color-control.ejs b/views/controls/editor/color-control.ejs
index 1fa1688..c035e24 100644
--- a/views/controls/editor/color-control.ejs
+++ b/views/controls/editor/color-control.ejs
@@ -4,7 +4,7 @@
   <div class="colors">
   </div>
 
-  <div id="color-picker">
+  <div class="color-picker">
   </div>
   
 	<div class="slider">
diff --git a/views/controls/editor/text-editor.ejs b/views/controls/editor/text-editor.ejs
index c30cb67..2423e9f 100644
--- a/views/controls/editor/text-editor.ejs
+++ b/views/controls/editor/text-editor.ejs
@@ -5,7 +5,7 @@
     Click a wall to add text.
   </div>
   
-	<div class="setting">
+	<div class="setting text-setting">
     <select name="font-family">
       <option>Baskerville</option>
       <option>Brush Script</option>
@@ -46,15 +46,26 @@
       <option value="right">Right</option>
       <option value="justify">Justify</option>
     </select>
+    <div class="swatch"></div>
   </div>
   
-	<div class="setting">
+	<div class="setting text-setting">
 	  <textarea name="text-body"></textarea>
   </div>
   
-	<div class="setting">
+	<div class="setting text-setting">
 		<a href="#" class="warn btn" data-role="destroy-text">remove from wall</a>
 	</div>
+	
+	<div class="setting color-setting">
+    <a href="#" class="btn" data-role="hide-color-picker">done</a>
+
+    <div class="color-picker">
+    </div>
+  
+    <div class="slider">
+    </div>
+	</div>
 </div>
 
 <style>
diff --git a/views/controls/editor/toolbar.ejs b/views/controls/editor/toolbar.ejs
index 23d5eb4..6960cbc 100644
--- a/views/controls/editor/toolbar.ejs
+++ b/views/controls/editor/toolbar.ejs
@@ -32,12 +32,10 @@
 		data-role='toggle-color-control'
 		data-info="edit room colors"
 		class="ion-ios7-sunny-outline"></span>
-[[ if (user.username == "asdf") { ]]
   <span
     data-role='toggle-text-editor'
     data-info="add text to wall"
     class="ion-ios7-compose-outline"></span>
-[[ } ]]
 <!-- 
 	<span
 		data-role='toggle-map-view'