update hex color

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>\

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();
         },
 

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);