From 1bc87487366cf952cba857dc2cd2be12a486169d Mon Sep 17 00:00:00 2001
From: rsesek <rsesek@ad1dcce9-c9fe-0310-b82b-83ea1733dbb0>
Date: Sun, 21 Aug 2005 05:40:13 +0000
Subject: [PATCH] JavaScript almost completely working

git-svn-id: svn://depot/macosx/trunk/RGB_Converter@12 ad1dcce9-c9fe-0310-b82b-83ea1733dbb0
---
 RGB_Converter.wdgt/Widget.css  | 10 ++++++
 RGB_Converter.wdgt/Widget.html |  2 ++
 RGB_Converter.wdgt/Widget.js   | 59 ++++++++++++++++++++++++++++++++--
 3 files changed, 68 insertions(+), 3 deletions(-)

diff --git a/RGB_Converter.wdgt/Widget.css b/RGB_Converter.wdgt/Widget.css
index 63b0754..da6dbc3 100644
--- a/RGB_Converter.wdgt/Widget.css
+++ b/RGB_Converter.wdgt/Widget.css
@@ -15,6 +15,8 @@
 body
 {
 	margin: 0px;
+	font-family: "Lucida Grande";
+	color: #FFFFFF;
 }
 
 /* ################################################################### */
@@ -53,6 +55,14 @@ body
 	width: 42px;
 }
 
+#hexinput
+{
+	position: absolute;
+	top: 20px;
+	left: 80px;
+	width: 200px;
+}
+
 /* ################################################################### */
 /* Back */
 
diff --git a/RGB_Converter.wdgt/Widget.html b/RGB_Converter.wdgt/Widget.html
index 2a1c915..6d39d31 100644
--- a/RGB_Converter.wdgt/Widget.html
+++ b/RGB_Converter.wdgt/Widget.html
@@ -28,6 +28,8 @@
     <div id="front" onmousemove="mousemove(event);" onmouseout="mouseexit(event);">
 		<img src="Default.png" alt="" />
 		
+		<div id="hexinput">#<input type="text" name="hexinput" id="hexinputf" size="6" maxlength="6" onblur="hexwatcher()" value="0" /></div>
+		
 		<div id="swatch"></div>
 		
 		<div id="redinput"><input type="text" name="redinput" id="redinputf" style="color: red" size="3" maxlength="3" onblur="rgbwatcher('red')" value="0" /></div>
diff --git a/RGB_Converter.wdgt/Widget.js b/RGB_Converter.wdgt/Widget.js
index 573ea61..776a3b7 100644
--- a/RGB_Converter.wdgt/Widget.js
+++ b/RGB_Converter.wdgt/Widget.js
@@ -16,8 +16,6 @@ var fields = {
 	hex : ''
 };
 
-var lastinput = 'rgb';
-
 // ###################################################################
 // watches the three RGB fields to make sure they don't go over the limites
 function rgbwatcher(colour)
@@ -48,7 +46,44 @@ function rgbwatcher(colour)
 	update_hex();
 	
 	// redraw the swatch
-	lastinput = 'rgb';
+	update_swatch();
+}
+
+// ###################################################################
+// watches the hex field for updates
+function hexwatcher()
+{
+	field = document.getElementById("hexinputf");
+	
+	// sanitize the hex
+	var newval = field.value.replace(/[^0-9a-f]*/gi, "");
+	
+	// get the length
+	var length = newval.length;
+	
+	// make sure we're always 6
+	if (length > 6)
+	{
+		newval = newval.substr(0, 6);
+	}
+	else if (length < 6)
+	{
+		for (var i = length; i <= 6; i++)
+		{
+			newval = "" + newval + "0";
+		}
+	}
+	
+	// update the field
+	field.value = newval;
+	
+	// update fields[]
+	fields['hex'] = newval;
+	
+	// set RGB
+	update_rgb();
+	
+	// redraw the swatch
 	update_swatch();
 }
 
@@ -58,6 +93,24 @@ function update_hex()
 {
 	var hexstr = dec2hex(fields['red']) + dec2hex(fields['green']) + dec2hex(fields['blue']);
 	fields['hex'] = hexstr;
+	document.getElementById("hexinputf").value = hexstr;
+}
+
+// ###################################################################
+// update the RGB values
+function update_rgb()
+{
+	// regex match the bits
+	var bits = fields['hex'].match(/(..)(..)(..)/);
+	
+	fields['red'] = hex2dec(bits[1]);
+	fields['green'] = hex2dec(bits[2]);
+	fields['blue'] = hex2dec(bits[3]);
+	
+	// construct the hex values
+	document.getElementById("redinputf").value = fields['red'];
+	document.getElementById("greeninputf").value = fields['green'];
+	document.getElementById("blueinputf").value = fields['blue'];
 }
 
 // ###################################################################
-- 
2.22.5