RGB Conveter $Revision$

- +

+ +

- +

diff --git a/RGB_Converter.wdgt/RGB_Converter.js b/RGB_Converter.wdgt/RGB_Converter.js index e620121..9734ea2 100644 --- a/RGB_Converter.wdgt/RGB_Converter.js +++ b/RGB_Converter.wdgt/RGB_Converter.js @@ -9,6 +9,164 @@ || ################################################################### || \*=====================================================================*/ +// ################################################################### +// flip data + +function showPrefs() +{ + var front = document.getElementById("front"); + var back = document.getElementById("back"); + + if (window.widget) + widget.prepareForTransition("ToBack"); // freezes the widget so that you can change it without the user noticing + + front.style.display="none"; // hide the front + back.style.display="block"; // show the back + + if (window.widget) + setTimeout ('widget.performTransition();', 0); // and flip the widget over + + document.getElementById('fliprollie').style.display = 'none'; // clean up the front side - hide the circle behind the info button + +} + + +// hidePrefs() is called by the done button on the back side of the widget. It performs the opposite transition +// as showPrefs() does. + +function hidePrefs() +{ + var front = document.getElementById("front"); + var back = document.getElementById("back"); + + if (window.widget) + widget.prepareForTransition("ToFront"); // freezes the widget and prepares it for the flip back to the front + + back.style.display="none"; // hide the back + front.style.display="block"; // show the front + + if (window.widget) + setTimeout ('widget.performTransition();', 0); // and flip the widget back to the front +} + + + + + +// PREFERENCE BUTTON ANIMATION (- the pref flipper fade in/out) + +var flipShown = false; // a flag used to signify if the flipper is currently shown or not. + + +// A structure that holds information that is needed for the animation to run. +var animation = {duration:0, starttime:0, to:1.0, now:0.0, from:0.0, firstElement:null, timer:null}; + + +// mousemove() is the event handle assigned to the onmousemove property on the front div of the widget. +// It is triggered whenever a mouse is moved within the bounds of your widget. It prepares the +// preference flipper fade and then calls animate() to performs the animation. + +function mousemove (event) +{ + if (!flipShown) // if the preferences flipper is not already showing... + { + if (animation.timer != null) // reset the animation timer value, in case a value was left behind + { + clearInterval (animation.timer); + animation.timer = null; + } + + var starttime = (new Date).getTime() - 13; // set it back one frame + + animation.duration = 500; // animation time, in ms + animation.starttime = starttime; // specify the start time + animation.firstElement = document.getElementById ('flip'); // specify the element to fade + animation.timer = setInterval ("animate();", 13); // set the animation function + animation.from = animation.now; // beginning opacity (not ness. 0) + animation.to = 1.0; // final opacity + animate(); // begin animation + flipShown = true; // mark the flipper as animated + } +} + +// mouseexit() is the opposite of mousemove() in that it preps the preferences flipper +// to disappear. It adds the appropriate values to the animation data structure and sets the animation in motion. + +function mouseexit (event) +{ + if (flipShown) + { + // fade in the flip widget + if (animation.timer != null) + { + clearInterval (animation.timer); + animation.timer = null; + } + + var starttime = (new Date).getTime() - 13; + + animation.duration = 500; + animation.starttime = starttime; + animation.firstElement = document.getElementById ('flip'); + animation.timer = setInterval ("animate();", 13); + animation.from = animation.now; + animation.to = 0.0; + animate(); + flipShown = false; + } +} + + +// animate() performs the fade animation for the preferences flipper. It uses the opacity CSS property to simulate a fade. + +function animate() +{ + var T; + var ease; + var time = (new Date).getTime(); + + + T = limit_3(time-animation.starttime, 0, animation.duration); + + if (T >= animation.duration) + { + clearInterval (animation.timer); + animation.timer = null; + animation.now = animation.to; + } + else + { + ease = 0.5 - (0.5 * Math.cos(Math.PI * T / animation.duration)); + animation.now = computeNextFloat (animation.from, animation.to, ease); + } + + animation.firstElement.style.opacity = animation.now; +} + + +// these functions are utilities used by animate() + +function limit_3 (a, b, c) +{ + return a < b ? b : (a > c ? c : a); +} + +function computeNextFloat (from, to, ease) +{ + return from + (to - from) * ease; +} + +// these functions are called when the info button itself receives onmouseover and onmouseout events + +function enterflip(event) +{ + document.getElementById('fliprollie').style.display = 'block'; +} + +function exitflip(event) +{ + document.getElementById('fliprollie').style.display = 'none'; +} /*=====================================================================*\ || ################################################################### -- 2.22.5