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