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