From a4bd5d25c7444fe58c81872cb1d06bf369f1e239 Mon Sep 17 00:00:00 2001
From: Amanda Ghassaei <amandaghassaei@gmail.com>
Date: Thu, 11 Jun 2015 12:47:25 -0700
Subject: [PATCH] update hex color

---
 js/menus/CompositeMenu.js   |  7 ++++++-
 js/menus/MenuParentView.js  |  1 +
 js/menus/MenuWrapperView.js | 21 ++++++++++++++++++++-
 3 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/js/menus/CompositeMenu.js b/js/menus/CompositeMenu.js
index 2086b8f5..4cc18fdb 100644
--- a/js/menus/CompositeMenu.js
+++ b/js/menus/CompositeMenu.js
@@ -30,6 +30,11 @@ define(['jquery', 'underscore', 'menuParent', 'plist', 'lattice'], function($, _
             lattice._changeRandomColor();
         },
 
+        updateHex: function(hex){
+            //update hex without rendering
+            $("#compositeColor").css("border-color", hex);
+        },
+
         _finishComposite: function(e){
             e.preventDefault();
             this.stopListening();
@@ -76,7 +81,7 @@ define(['jquery', 'underscore', 'menuParent', 'plist', 'lattice'], function($, _
             Name: &nbsp;&nbsp;<input id="compositeName" data-property="compositeName" value="<%= compositeName %>" placeholder="Enter Name" class="seventyFiveWidth form-control textInput lattice" type="text"><br/><br/>\
             Bounding Box: ()<br/><br/>\
             Display Color: &nbsp;&nbsp;\
-            <input style="border-color: <%= compositeColor %> ;" value="<%= compositeColor %>" placeholder="Enter HEX" class="halfWidth form-control" type="text"><br/><br/>\
+            <input id="compositeColor" style="border-color: <%= compositeColor %> ;" data-property="compositeColor" value="<%= compositeColor %>" placeholder="Enter HEX" class="halfWidth lattice form-control hexInput" type="text"><br/><br/>\
             <a id="newRandomColor" href="#" class="btn btn-block btn-lg btn-default">New Random Color</a><br/><br/>\
             <a id="finishComposite" href="#" class="btn btn-block btn-lg btn-success">Finish Composite</a><br/>\
             <a id="cancelComposite" href="#" class="btn btn-halfWidth btn-lg btn-default">Cancel / Exit</a>\
diff --git a/js/menus/MenuParentView.js b/js/menus/MenuParentView.js
index 60f97965..176ab925 100644
--- a/js/menus/MenuParentView.js
+++ b/js/menus/MenuParentView.js
@@ -20,6 +20,7 @@ define(['jquery', 'underscore', 'backbone'], function($, _, Backbone){
             if (this.model.changedAttributes()["currentNav"]) return;
             if ($("input[type=text]").is(":focus")) return;
             this.$el.html(this.template(this._makeTemplateJSON()));
+            this.$el.html(this.template(this._makeTemplateJSON()));
             if (this._render) this._render();
         },
 
diff --git a/js/menus/MenuWrapperView.js b/js/menus/MenuWrapperView.js
index 82d3b82e..884d68d6 100644
--- a/js/menus/MenuWrapperView.js
+++ b/js/menus/MenuWrapperView.js
@@ -44,7 +44,8 @@ define(['jquery', 'underscore', 'plist', 'backbone', 'lattice'], function($, _,
             }
             if ($(".floatInput").is(":focus")) this._updateFloat(e);
             if ($(".intInput").is(":focus")) this._updateInt(e);
-            if ($(".textInput").is(":focus")) this._updateString(e);
+            if ($(".textInput").is(":focus")) this._updateString(e)
+            if ($(".hexInput").is(":focus")) this._updateHex(e);
         },
 
         _updateString: function(e){
@@ -58,6 +59,24 @@ define(['jquery', 'underscore', 'plist', 'backbone', 'lattice'], function($, _,
             this._getPropertyOwner($target).set(property, $target.val());
         },
 
+        _updateHex: function(e){
+            e.preventDefault();
+            var $target = $(e.target);
+            var hex = $target.val();
+            if (!this._isValidHex(hex)) return;
+            var property = $target.data("property");
+            if (!property) {
+                console.warn("no property associated with string input");
+                return;
+            }
+            this._getPropertyOwner($target).set(property, hex);
+            if (this.menu.updateHex) this.menu.updateHex(hex);
+        },
+
+        _isValidHex: function(hex){
+            return hex.match(/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i) !== null;
+        },
+
         _updateFloat: function(e){
             e.preventDefault();
             var $target = $(e.target);
-- 
GitLab