RGB Converter.wdgt/Widget.js

   1 /*=====================================================================*\
   2 || ###################################################################
   3 || # RGB Converter [#]version[#]
   4 || # Copyright ©2002-[#]year[#] Blue Static
   5 || #
   6 || # This program is free software; you can redistribute it and/or modify
   7 || # it under the terms of the GNU General Public License as published by
   8 || # the Free Software Foundation; version [#]gpl[#] of the License.
   9 || #
  10 || # This program is distributed in the hope that it will be useful, but
  11 || # WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY
  12 || # or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
  13 || # more details.
  14 || #
  15 || # You should have received a copy of the GNU General Public License along
  16 || # with this program; if not, write to the Free Software Foundation, Inc.,
  17 || # 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA
  18 || ###################################################################
  19 \*=====================================================================*/
  20
  21 var fields = {
  22         red : 60,
  23         green : 60,
  24         blue : 60,
  25         hex : '3C3C3C'
  26 };
  27
  28 // ###################################################################
  29 // widget init
  30 function setup()
  31 {
  32         createGenericButton(document.getElementById("backbutton"), "Done", hide_back, 0);
  33         document.getElementById("revision").innerHTML = "(r" + document.getElementById("revision").innerHTML.replace(/[^0-9]/g, "") + ")";
  34 }
  35
  36 // ###################################################################
  37 // watches the three RGB fields to make sure they don't go over the limites
  38 function rgbwatcher(colour)
  39 {
  40         field = document.getElementById(colour + "inputf");
  41
  42         // handle RGB triads
  43         if (triad = field.value.match(/(rgb)?\(?([0-9]{1,3}),\s?([0-9]{1,3}),\s?([0-9]{1,3})\)?/))
  44         {
  45                 document.getElementById("redinputf").value = triad[2];
  46                 document.getElementById("greeninputf").value = triad[3];
  47                 document.getElementById("blueinputf").value = triad[4];
  48
  49                 rgbwatcher("red");
  50                 rgbwatcher("green");
  51                 rgbwatcher("blue");
  52                 return;
  53         }
  54
  55         // sanitize the number
  56         var newval = field.value.replace(/[^0-9\-\.]*/g, "");
  57         newval = Math.floor(newval);
  58
  59         // make sure we don't go over 255
  60         if (newval > 255)
  61         {
  62                 newval = 255;
  63         }
  64         else if (newval < 0)
  65         {
  66                 newval = 0;
  67         }
  68
  69         // update the text field
  70         field.value = newval;
  71
  72         // set fields[]
  73         fields[colour] = newval;
  74
  75         // set hex
  76         update_hex();
  77
  78         // redraw the swatch
  79         update_swatch();
  80 }
  81
  82 // ###################################################################
  83 // watches the hex field for updates
  84 function hexwatcher()
  85 {
  86         field = document.getElementById("hexinputf");
  87
  88         // sanitize the hex
  89         var newval = field.value.replace(/[^0-9a-f]*/gi, "");
  90
  91         // get the length
  92         var length = newval.length;
  93
  94         // make sure we're always 6
  95         if (length > 6)
  96         {
  97                 newval = newval.substr(0, 6);
  98         }
  99         else if (length == 3)
 100         {
 101                 newval = newval.substr(0, 1) + newval.substr(0, 1) + newval.substr(1, 1) + newval.substr(1, 1) + newval.substr(2, 1) + newval.substr(2, 1);
 102         }
 103         else if (length < 6)
 104         {
 105                 for (var i = length; i <= 6; i++)
 106                 {
 107                         newval = "" + newval + "0";
 108                 }
 109         }
 110
 111         // update the field
 112         field.value = newval;
 113
 114         // update fields[]
 115         fields['hex'] = newval;
 116
 117         // set RGB
 118         update_rgb();
 119
 120         // redraw the swatch
 121         update_swatch();
 122 }
 123
 124 // ###################################################################
 125 // update the hex value
 126 function update_hex()
 127 {
 128         var hexstr = dec2hex(fields['red']) + dec2hex(fields['green']) + dec2hex(fields['blue']);
 129         fields['hex'] = hexstr;
 130         document.getElementById("hexinputf").value = hexstr;
 131 }
 132
 133 // ###################################################################
 134 // update the RGB values
 135 function update_rgb()
 136 {
 137         // regex match the bits
 138         var bits = fields['hex'].match(/(..)(..)(..)/);
 139
 140         fields['red'] = hex2dec(bits[1]);
 141         fields['green'] = hex2dec(bits[2]);
 142         fields['blue'] = hex2dec(bits[3]);
 143
 144         // construct the hex values
 145         document.getElementById("redinputf").value = fields['red'];
 146         document.getElementById("greeninputf").value = fields['green'];
 147         document.getElementById("blueinputf").value = fields['blue'];
 148 }
 149
 150 // ###################################################################
 151 // update the colour swatch
 152 function update_swatch()
 153 {
 154         document.getElementById("hexinputf").value = document.getElementById("hexinputf").value.toUpperCase();
 155         document.getElementById("swatch").style.backgroundColor = "rgb(" + fields['red'] + ", " + fields['green'] + ", " + fields['blue'] + ")";
 156         document.getElementById("swatch-red").style.backgroundColor = "rgb(" + fields['red'] + ", 0, 0)";
 157         document.getElementById("swatch-green").style.backgroundColor = "rgb(0, " + fields['green'] + ", 0)";
 158         document.getElementById("swatch-blue").style.backgroundColor = "rgb(0, 0, " + fields['blue'] + ")";
 159 }
 160
 161 // ###################################################################
 162 // convert a decimal to a hexidecimal
 163 function dec2hex(dec)
 164 {
 165         var hexstr = "0123456789ABCDEF";
 166         var low = dec % 16;
 167         var high = (dec - low) / 16;
 168         hex = "" + hexstr.charAt(high) + hexstr.charAt(low);
 169
 170         return hex.toString();
 171 }
 172
 173 // ###################################################################
 174 // converts a hexidecimal to a decimal
 175 function hex2dec(hex)
 176 {
 177         return parseInt(hex, 16);
 178 }
 179
 180 // ###################################################################
 181 // ###################################################################
 182 // ###################################################################
 183
 184 // flip data
 185
 186 function show_back()
 187 {
 188         var front = document.getElementById("front");
 189         var back = document.getElementById("back");
 190
 191         if (window.widget)
 192         {
 193                 widget.prepareForTransition("ToBack");
 194         }
 195
 196         front.style.display = "none";
 197         back.style.display = "block";
 198
 199         if (window.widget)
 200         {
 201                 setTimeout("widget.performTransition();", 0);
 202         }
 203
 204         document.getElementById("fliprollie").style.display = "none";
 205 }
 206
 207 function hide_back()
 208 {
 209         var front = document.getElementById("front");
 210         var back = document.getElementById("back");
 211
 212         if (window.widget)
 213         {
 214                 widget.prepareForTransition("ToFront");
 215         }
 216
 217         back.style.display = "none";
 218         front.style.display = "block";
 219
 220         if (window.widget)
 221         {
 222                 setTimeout("widget.performTransition();", 0);
 223         }
 224 }
 225
 226 var flipShown = false;
 227
 228 var animation = {
 229         duration : 0,
 230         starttime : 0,
 231         to : 1.0,
 232         now : 0.0,
 233         from : 0.0,
 234         firstElement : null,
 235         timer : null
 236 };
 237
 238 function mousemove(event)
 239 {
 240         if (!flipShown)
 241         {
 242                 if (animation.timer != null)
 243                 {
 244                         clearInterval(animation.timer);
 245                         animation.timer  = null;
 246                 }
 247
 248                 var starttime = (new Date).getTime() - 13;
 249
 250                 animation.duration = 500;
 251                 animation.starttime = starttime;
 252                 animation.firstElement = document.getElementById("flip");
 253                 animation.timer = setInterval("animate();", 13);
 254                 animation.from = animation.now;
 255                 animation.to = 1.0;
 256                 animate();
 257                 flipShown = true;
 258         }
 259 }
 260
 261 function mouseexit(event)
 262 {
 263         if (flipShown)
 264         {
 265                 // fade in the flip widget
 266                 if (animation.timer != null)
 267                 {
 268                         clearInterval (animation.timer);
 269                         animation.timer  = null;
 270                 }
 271
 272                 var starttime = (new Date).getTime() - 13;
 273
 274                 animation.duration = 500;
 275                 animation.starttime = starttime;
 276                 animation.firstElement = document.getElementById("flip");
 277                 animation.timer = setInterval("animate();", 13);
 278                 animation.from = animation.now;
 279                 animation.to = 0.0;
 280                 animate();
 281                 flipShown = false;
 282         }
 283 }
 284
 285
 286 function animate()
 287 {
 288         var T;
 289         var ease;
 290         var time = (new Date).getTime();
 291
 292         T = limit_3(time - animation.starttime, 0, animation.duration);
 293
 294         if (T >= animation.duration)
 295         {
 296                 clearInterval(animation.timer);
 297                 animation.timer = null;
 298                 animation.now = animation.to;
 299         }
 300         else
 301         {
 302                 ease = 0.5 - (0.5 * Math.cos(Math.PI * T / animation.duration));
 303                 animation.now = compute_next_float(animation.from, animation.to, ease);
 304         }
 305
 306         animation.firstElement.style.opacity = animation.now;
 307 }
 308
 309 function limit_3 (a, b, c)
 310 {
 311     return a < b ? b : (a > c ? c : a);
 312 }
 313
 314 function compute_next_float(from, to, ease)
 315 {
 316     return from + (to - from) * ease;
 317 }
 318
 319 function enterflip(event)
 320 {
 321         document.getElementById("fliprollie").style.display = "block";
 322 }
 323
 324 function exitflip(event)
 325 {
 326         document.getElementById("fliprollie").style.display = "none";
 327 }
 328
 329 /*=====================================================================*\
 330 || ###################################################################
 331 || # $HeadURL$
 332 || # $Id$
 333 || ###################################################################
 334 \*=====================================================================*/