JavaScript almost completely working

git-svn-id: svn://depot/macosx/trunk@12 ad1dcce9-c9fe-0310-b82b-83ea1733dbb0

diff --git a/RGB_Converter/RGB_Converter.wdgt/Widget.css b/RGB_Converter/RGB_Converter.wdgt/Widget.css
index 63b07544070552bb7a04b9083fb89cac80fca98d..da6dbc39b5936096d10af6c39c09483f823bc291 100644 (file)
--- a/RGB_Converter/RGB_Converter.wdgt/Widget.css
+++ b/RGB_Converter/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/RGB_Converter.wdgt/Widget.html b/RGB_Converter/RGB_Converter.wdgt/Widget.html
index 2a1c9151e03cbf7d8444cb0fb2e264780d470b28..6d39d319148f036cac6ec7b39a0c3cbde8b44d1c 100644 (file)
--- a/RGB_Converter/RGB_Converter.wdgt/Widget.html
+++ b/RGB_Converter/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/RGB_Converter.wdgt/Widget.js b/RGB_Converter/RGB_Converter.wdgt/Widget.js
index 573ea61c83de26517f6d5b97368816717a088799..776a3b736e62e0dd66d0a3a05b334217847b99c5 100644 (file)
--- a/RGB_Converter/RGB_Converter.wdgt/Widget.js
+++ b/RGB_Converter/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'];
 }
 
 // ###################################################################