RGB_Converter.wdgt/Widget.js

   1 /*=====================================================================*\
   2 || ################################################################### ||
   3 || # RGB Converter Widget [#]version[#]
   4 || # --------------------------------------------------------------- # ||
   5 || # Copyright ©2002-[#]year[#] by Iris Studios, Inc. All Rights Reserved. # ||
   6 || # This file may not be reproduced in any way without permission.  # ||
   7 || # --------------------------------------------------------------- # ||
   8 || # User License Agreement at http://www.iris-studios.com/license/  # ||
   9 || ################################################################### ||
  10 \*=====================================================================*/
  11
  12 var fields = {
  13         red : 0,
  14         green : 0,
  15         blue : 0,
  16         hex : ''
  17 };
  18
  19 // ###################################################################
  20 // watches the three RGB fields to make sure they don't go over the limites
  21 function rgbwatcher(colour)
  22 {
  23         field = document.getElementById(colour + "inputf");
  24
  25         // sanitize the number
  26         var newval = field.value.replace(/[^0-9\-\.]*/g, "");
  27         newval = Math.floor(newval);
  28
  29         // make sure we don't go over 255
  30         if (newval > 255)
  31         {
  32                 newval = 255;
  33         }
  34         else if (newval < 0)
  35         {
  36                 newval = 0;
  37         }
  38
  39         // update the text field
  40         field.value = newval;
  41
  42         // set fields[]
  43         fields[colour] = newval;
  44
  45         // set hex
  46         update_hex();
  47
  48         // redraw the swatch
  49         update_swatch();
  50 }
  51
  52 // ###################################################################
  53 // watches the hex field for updates
  54 function hexwatcher()
  55 {
  56         field = document.getElementById("hexinputf");
  57
  58         // sanitize the hex
  59         var newval = field.value.replace(/[^0-9a-f]*/gi, "");
  60
  61         // get the length
  62         var length = newval.length;
  63
  64         // make sure we're always 6
  65         if (length > 6)
  66         {
  67                 newval = newval.substr(0, 6);
  68         }
  69         else if (length < 6)
  70         {
  71                 for (var i = length; i <= 6; i++)
  72                 {
  73                         newval = "" + newval + "0";
  74                 }
  75         }
  76
  77         // update the field
  78         field.value = newval;
  79
  80         // update fields[]
  81         fields['hex'] = newval;
  82
  83         // set RGB
  84         update_rgb();
  85
  86         // redraw the swatch
  87         update_swatch();
  88 }
  89
  90 // ###################################################################
  91 // update the hex value
  92 function update_hex()
  93 {
  94         var hexstr = dec2hex(fields['red']) + dec2hex(fields['green']) + dec2hex(fields['blue']);
  95         fields['hex'] = hexstr;
  96         document.getElementById("hexinputf").value = hexstr;
  97 }
  98
  99 // ###################################################################
 100 // update the RGB values
 101 function update_rgb()
 102 {
 103         // regex match the bits
 104         var bits = fields['hex'].match(/(..)(..)(..)/);
 105
 106         fields['red'] = hex2dec(bits[1]);
 107         fields['green'] = hex2dec(bits[2]);
 108         fields['blue'] = hex2dec(bits[3]);
 109
 110         // construct the hex values
 111         document.getElementById("redinputf").value = fields['red'];
 112         document.getElementById("greeninputf").value = fields['green'];
 113         document.getElementById("blueinputf").value = fields['blue'];
 114 }
 115
 116 // ###################################################################
 117 // update the colour swatch
 118 function update_swatch()
 119 {
 120         document.getElementById("swatch").style.backgroundColor = "#" + fields['hex'];
 121 }
 122
 123 // ###################################################################
 124 // convert a decimal to a hexidecimal
 125 function dec2hex(dec)
 126 {
 127         var hexstr = "0123456789ABCDEF";
 128         var low = dec % 16;
 129         var high = (dec - low) / 16;
 130         hex = "" + hexstr.charAt(high) + hexstr.charAt(low);
 131
 132         return hex.toString();
 133 }
 134
 135 // ###################################################################
 136 // converts a hexidecimal to a decimal
 137 function hex2dec(hex)
 138 {
 139         return parseInt(hex, 16);
 140 }
 141
 142 // ###################################################################
 143 // ###################################################################
 144 // ###################################################################
 145
 146 // flip data
 147
 148 function show_back()
 149 {
 150         var front = document.getElementById("front");
 151         var back = document.getElementById("back");
 152
 153         if (window.widget)
 154         {
 155                 widget.prepareForTransition("ToBack");
 156         }
 157
 158         front.style.display = "none";
 159         back.style.display = "block";
 160
 161         if (window.widget)
 162         {
 163                 setTimeout("widget.performTransition();", 0);
 164         }
 165
 166         document.getElementById("fliprollie").style.display = "none";
 167 }
 168
 169 function hide_back()
 170 {
 171         var front = document.getElementById("front");
 172         var back = document.getElementById("back");
 173
 174         if (window.widget)
 175         {
 176                 widget.prepareForTransition("ToFront");
 177         }
 178
 179         back.style.display = "none";
 180         front.style.display = "block";
 181
 182         if (window.widget)
 183         {
 184                 setTimeout("widget.performTransition();", 0);
 185         }
 186 }
 187
 188 var flipShown = false;
 189
 190 var animation = {
 191         duration : 0,
 192         starttime : 0,
 193         to : 1.0,
 194         now : 0.0,
 195         from : 0.0,
 196         firstElement : null,
 197         timer : null
 198 };
 199
 200 function mousemove(event)
 201 {
 202         if (!flipShown)
 203         {
 204                 if (animation.timer != null)
 205                 {
 206                         clearInterval(animation.timer);
 207                         animation.timer  = null;
 208                 }
 209
 210                 var starttime = (new Date).getTime() - 13;
 211
 212                 animation.duration = 500;
 213                 animation.starttime = starttime;
 214                 animation.firstElement = document.getElementById("flip");
 215                 animation.timer = setInterval("animate();", 13);
 216                 animation.from = animation.now;
 217                 animation.to = 1.0;
 218                 animate();
 219                 flipShown = true;
 220         }
 221 }
 222
 223 function mouseexit(event)
 224 {
 225         if (flipShown)
 226         {
 227                 // fade in the flip widget
 228                 if (animation.timer != null)
 229                 {
 230                         clearInterval (animation.timer);
 231                         animation.timer  = null;
 232                 }
 233
 234                 var starttime = (new Date).getTime() - 13;
 235
 236                 animation.duration = 500;
 237                 animation.starttime = starttime;
 238                 animation.firstElement = document.getElementById("flip");
 239                 animation.timer = setInterval("animate();", 13);
 240                 animation.from = animation.now;
 241                 animation.to = 0.0;
 242                 animate();
 243                 flipShown = false;
 244         }
 245 }
 246
 247
 248 function animate()
 249 {
 250         var T;
 251         var ease;
 252         var time = (new Date).getTime();
 253
 254         T = limit_3(time - animation.starttime, 0, animation.duration);
 255
 256         if (T >= animation.duration)
 257         {
 258                 clearInterval(animation.timer);
 259                 animation.timer = null;
 260                 animation.now = animation.to;
 261         }
 262         else
 263         {
 264                 ease = 0.5 - (0.5 * Math.cos(Math.PI * T / animation.duration));
 265                 animation.now = compute_next_float(animation.from, animation.to, ease);
 266         }
 267
 268         animation.firstElement.style.opacity = animation.now;
 269 }
 270
 271 function limit_3 (a, b, c)
 272 {
 273     return a < b ? b : (a > c ? c : a);
 274 }
 275
 276 function compute_next_float(from, to, ease)
 277 {
 278     return from + (to - from) * ease;
 279 }
 280
 281 function enterflip(event)
 282 {
 283         document.getElementById("fliprollie").style.display = "block";
 284 }
 285
 286 function exitflip(event)
 287 {
 288         document.getElementById("fliprollie").style.display = "none";
 289 }
 290
 291 /*=====================================================================*\
 292 || ###################################################################
 293 || # $HeadURL$
 294 || # $Id$
 295 || ###################################################################
 296 \*=====================================================================*/