RGB_Converter.wdgt/RGB_Converter.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 // ###################################################################
  13 // flip data
  14
  15 function showPrefs()
  16 {
  17         var front = document.getElementById("front");
  18         var back = document.getElementById("back");
  19
  20         if (window.widget)
  21                 widget.prepareForTransition("ToBack");          // freezes the widget so that you can change it without the user noticing
  22
  23         front.style.display="none";             // hide the front
  24         back.style.display="block";             // show the back
  25
  26         if (window.widget)
  27                 setTimeout ('widget.performTransition();', 0);          // and flip the widget over
  28
  29         document.getElementById('fliprollie').style.display = 'none';  // clean up the front side - hide the circle behind the info button
  30
  31 }
  32
  33
  34 // hidePrefs() is called by the done button on the back side of the widget.  It performs the opposite transition
  35 // as showPrefs() does.
  36
  37 function hidePrefs()
  38 {
  39         var front = document.getElementById("front");
  40         var back = document.getElementById("back");
  41
  42         if (window.widget)
  43                 widget.prepareForTransition("ToFront");         // freezes the widget and prepares it for the flip back to the front
  44
  45         back.style.display="none";                      // hide the back
  46         front.style.display="block";            // show the front
  47
  48         if (window.widget)
  49                 setTimeout ('widget.performTransition();', 0);          // and flip the widget back to the front
  50 }
  51
  52
  53
  54
  55
  56 // PREFERENCE BUTTON ANIMATION (- the pref flipper fade in/out)
  57
  58 var flipShown = false;          // a flag used to signify if the flipper is currently shown or not.
  59
  60
  61 // A structure that holds information that is needed for the animation to run.
  62 var animation = {duration:0, starttime:0, to:1.0, now:0.0, from:0.0, firstElement:null, timer:null};
  63
  64
  65 // mousemove() is the event handle assigned to the onmousemove property on the front div of the widget.
  66 // It is triggered whenever a mouse is moved within the bounds of your widget.  It prepares the
  67 // preference flipper fade and then calls animate() to performs the animation.
  68
  69 function mousemove (event)
  70 {
  71         if (!flipShown)                 // if the preferences flipper is not already showing...
  72         {
  73                 if (animation.timer != null)                    // reset the animation timer value, in case a value was left behind
  74                 {
  75                         clearInterval (animation.timer);
  76                         animation.timer  = null;
  77                 }
  78
  79                 var starttime = (new Date).getTime() - 13;              // set it back one frame
  80
  81                 animation.duration = 500;                                                                                               // animation time, in ms
  82                 animation.starttime = starttime;                                                                                // specify the start time
  83                 animation.firstElement = document.getElementById ('flip');              // specify the element to fade
  84                 animation.timer = setInterval ("animate();", 13);                                               // set the animation function
  85                 animation.from = animation.now;                                                                                 // beginning opacity (not ness. 0)
  86                 animation.to = 1.0;                                                                                                             // final opacity
  87                 animate();                                                                                                                              // begin animation
  88                 flipShown = true;                                                                                                               // mark the flipper as animated
  89         }
  90 }
  91
  92 // mouseexit() is the opposite of mousemove() in that it preps the preferences flipper
  93 // to disappear.  It adds the appropriate values to the animation data structure and sets the animation in motion.
  94
  95 function mouseexit (event)
  96 {
  97         if (flipShown)
  98         {
  99                 // fade in the flip widget
 100                 if (animation.timer != null)
 101                 {
 102                         clearInterval (animation.timer);
 103                         animation.timer  = null;
 104                 }
 105
 106                 var starttime = (new Date).getTime() - 13;
 107
 108                 animation.duration = 500;
 109                 animation.starttime = starttime;
 110                 animation.firstElement = document.getElementById ('flip');
 111                 animation.timer = setInterval ("animate();", 13);
 112                 animation.from = animation.now;
 113                 animation.to = 0.0;
 114                 animate();
 115                 flipShown = false;
 116         }
 117 }
 118
 119
 120 // animate() performs the fade animation for the preferences flipper. It uses the opacity CSS property to simulate a fade.
 121
 122 function animate()
 123 {
 124         var T;
 125         var ease;
 126         var time = (new Date).getTime();
 127
 128
 129         T = limit_3(time-animation.starttime, 0, animation.duration);
 130
 131         if (T >= animation.duration)
 132         {
 133                 clearInterval (animation.timer);
 134                 animation.timer = null;
 135                 animation.now = animation.to;
 136         }
 137         else
 138         {
 139                 ease = 0.5 - (0.5 * Math.cos(Math.PI * T / animation.duration));
 140                 animation.now = computeNextFloat (animation.from, animation.to, ease);
 141         }
 142
 143         animation.firstElement.style.opacity = animation.now;
 144 }
 145
 146
 147 // these functions are utilities used by animate()
 148
 149 function limit_3 (a, b, c)
 150 {
 151     return a < b ? b : (a > c ? c : a);
 152 }
 153
 154 function computeNextFloat (from, to, ease)
 155 {
 156     return from + (to - from) * ease;
 157 }
 158
 159 // these functions are called when the info button itself receives onmouseover and onmouseout events
 160
 161 function enterflip(event)
 162 {
 163         document.getElementById('fliprollie').style.display = 'block';
 164 }
 165
 166 function exitflip(event)
 167 {
 168         document.getElementById('fliprollie').style.display = 'none';
 169 }
 170
 171 /*=====================================================================*\
 172 || ###################################################################
 173 || # $HeadURL$
 174 || # $Id$
 175 || ###################################################################
 176 \*=====================================================================*/