Broken widget crap
authorrsesek <rsesek@ad1dcce9-c9fe-0310-b82b-83ea1733dbb0>
Sun, 21 Aug 2005 02:44:41 +0000 (02:44 +0000)
committerrsesek <rsesek@ad1dcce9-c9fe-0310-b82b-83ea1733dbb0>
Sun, 21 Aug 2005 02:44:41 +0000 (02:44 +0000)
git-svn-id: svn://depot/macosx/trunk@4 ad1dcce9-c9fe-0310-b82b-83ea1733dbb0

RGB_Converter/RGB_Converter.wdgt/Info.plist
RGB_Converter/RGB_Converter.wdgt/RGB_Converter.css
RGB_Converter/RGB_Converter.wdgt/RGB_Converter.html
RGB_Converter/RGB_Converter.wdgt/RGB_Converter.js

index 0255558163353789b0ec7adb1c12139a7517ee2a..0a4ac072812fa1ada1d3c5eeb0e67ddc4a49e2e6 100644 (file)
@@ -5,7 +5,7 @@
        <key>CFBundleDisplayName</key>
        <string>RGB Converter</string>
        <key>CFBundleIdentifier</key>
-       <string>com.iris-studios.widget.rgb_converter</string>
+       <string>com.isi.widget.rgb_converter</string>
        <key>CFBundleName</key>
        <string>RGB_Converter</string>
        <key>CFBundleVersion</key>
index 22b2870983bc85f005a82735dd3b8f81f8e62da1..3168ee977004f44803f12c20e10114404b7dd099 100644 (file)
@@ -9,11 +9,58 @@
 || ################################################################### ||
 \*=====================================================================*/
 
+/* ################################################################### */
+/* Custom classes */
+
 body
 {
        margin: 0px;
 }
 
+/* ################################################################### */
+/* Flip insturments */
+
+.flip
+{
+    position: absolute;
+    bottom: 10px;
+    right: 10px;
+    width: 10px;
+    height: 10px;
+}
+
+#flip
+{
+    opacity: 0;
+    background: url(file:///System/Library/WidgetResources/ibutton/white_i.png) no-repeat top left;
+    z-index: 8000;
+}
+
+#fliprollie
+{
+    display: none;
+    opacity: 0.25;
+    background: url(file:///System/Library/WidgetResources/ibutton/white_rollie.png) no-repeat top left;
+    z-index: 7999;
+}
+
+#front
+{
+    display: block;
+} 
+
+#back
+{
+    display: none;
+} 
+
+.doneButton
+{
+    position: absolute;
+    bottom: 10px;
+    left: 10px;
+}
+
 /*=====================================================================*\
 || ###################################################################
 || # $HeadURL$
index 074fde042ec2711a11a5cb5f59e42fd23e36e772..b5cfd938c4770597b561067b7ce0a01213ede968 100644 (file)
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
-       <style type="text/css">
-               @import "RGB_Converter.css";
-       </style>
-       <script src="RGB_Converter.js" type="text/javascript"></script>
        <title>RGB Conveter $Revision$</title>
 </head>
+
+<style type="text/css">
+       @import "RGB_Converter.css";
+</style>
+<script src="RGB_Converter.js" type="text/javascript"></script>
+
 <body>
 
 
 <!-- front -->
-<div id="front">
-
+<div id="front" onmousemove="mousemove(event)" onmouseout="mouseexit(event)">
+       <img src="front.png" alt="" />
+       
+       <div class="flip" id="flip" onclick="showPrefs(event)" onmouseover="enterflip(event)" onmouseout="exitflip(event)"></div>
+       <div class="flip" id="fliprollie"></div>
 </div>
 <!-- / front -->
 
 <!-- back -->
 <div id="back">
-
+       <img src="back.png" alt="" />
 </div>
 <!-- / back -->
 
index e620121281a17b1ec6b125a126e4fe6b9e14d68b..9734ea23eb0777d2da122de048180c94ecfa8640 100644 (file)
@@ -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';
+}
 
 /*=====================================================================*\
 || ###################################################################