Widget now works in basic form
authorrsesek <rsesek@ad1dcce9-c9fe-0310-b82b-83ea1733dbb0>
Sun, 21 Aug 2005 03:06:07 +0000 (03:06 +0000)
committerrsesek <rsesek@ad1dcce9-c9fe-0310-b82b-83ea1733dbb0>
Sun, 21 Aug 2005 03:06:07 +0000 (03:06 +0000)
git-svn-id: svn://depot/macosx/trunk@6 ad1dcce9-c9fe-0310-b82b-83ea1733dbb0

RGB_Converter/RGB_Converter.wdgt/Alternate.png [moved from RGB_Converter/RGB_Converter.wdgt/back.png with 100% similarity]
RGB_Converter/RGB_Converter.wdgt/Default.png [moved from RGB_Converter/RGB_Converter.wdgt/front.png with 100% similarity]
RGB_Converter/RGB_Converter.wdgt/Info.plist
RGB_Converter/RGB_Converter.wdgt/Widget.html
RGB_Converter/RGB_Converter.wdgt/Widget.js

index 6756b53e8c88a4de158ce9d82502cb2c62f5588b..2f874c58b573bc859b39d9f230e27f9e44a802c3 100644 (file)
@@ -5,12 +5,18 @@
        <key>CFBundleDisplayName</key>
        <string>RGB Converter</string>
        <key>CFBundleIdentifier</key>
-       <string>com.isi.widget.rgb_converter</string>
+       <string>com.isi.widget.rgbconverter</string>
        <key>CFBundleName</key>
-       <string>RGB_Converter</string>
+       <string>RGB Converter</string>
+       <key>CFBundleShortVersionString</key>
+       <string>[#]version[#]</string>
        <key>CFBundleVersion</key>
        <string>[#]version[#]</string>
+       <key>CloseBoxInsetX</key>
+       <integer>14</integer>
+       <key>CloseBoxInsetY</key>
+       <integer>16</integer>
        <key>MainHTML</key>
        <string>Widget.html</string>
 </dict>
-</plist>
+</plist>
\ No newline at end of file
index 4af026f1c651c0e38d8b6b0fbece8ebd180f4ca1..30a79907ee43171aa62603f5f33c28747d48eba5 100644 (file)
 <style type="text/css">
        @import "Widget.css";
 </style>
-<script src="Widget.js" type="text/javascript"></script>
+<script src="Widget.js" type="text/javascript" />
 
 <body>
-
-
-<!-- front -->
-<div id="front" onmousemove="mousemove(event)" onmouseout="mouseexit(event)">
-       <img src="front.png" alt="" />
+       <!-- front -->
+    <div id="front" onmousemove="mousemove(event);" onmouseout="mouseexit(event);">
+               <img src="Default.png" alt="" />
+               
+               <div class="flip" id="fliprollie"></div>
+               <div class="flip" id="flip" onclick="show_back(event);" onmouseover="enterflip(event);" onmouseout="exitflip(event)";></div>
+       </div>
+       <!-- / front -->
        
-       <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 -->
+       <!-- back -->
+       <div id="back">
+               <img src="Alternate.png" alt="" />
+       </div>
+       <!-- / back -->
 
 </body>
 </html>
index 9734ea23eb0777d2da122de048180c94ecfa8640..5a9e6a263b74b626b7fd3a76db3296daa46c200a 100644 (file)
 // ###################################################################
 // flip data
 
-function showPrefs()
+function show_back()
 {
        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
+       {
+               widget.prepareForTransition("ToBack");
+       }
        
-       front.style.display="none";             // hide the front
-       back.style.display="block";             // show the back
+       front.style.display = "none";
+       back.style.display = "block";
        
        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
-
+       {
+               setTimeout("widget.performTransition();", 0);   
+       }
+       
+       document.getElementById("fliprollie").style.display = "none";
 }
 
 
-// hidePrefs() is called by the done button on the back side of the widget.  It performs the opposite transition
-// as showPrefs() does.
-
-function hidePrefs()
+function hide_back()
 {
        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
+       {
+               widget.prepareForTransition("ToFront");
+       }
        
-       back.style.display="none";                      // hide the back
-       front.style.display="block";            // show the front
+       back.style.display = "none";
+       front.style.display = "block";
        
        if (window.widget)
-               setTimeout ('widget.performTransition();', 0);          // and flip the widget back to the front
+       {
+               setTimeout("widget.performTransition();", 0);
+       }
 }
 
+var flipShown = false;
 
+var animation = {
+       duration : 0,
+       starttime : 0,
+       to : 1.0,
+       now : 0.0,
+       from : 0.0,
+       firstElement : null,
+       timer : null
+};
 
-
-
-// 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)
+function mousemove(event)
 {
-       if (!flipShown)                 // if the preferences flipper is not already showing...
+       if (!flipShown)
        {
-               if (animation.timer != null)                    // reset the animation timer value, in case a value was left behind
+               if (animation.timer != null)
                {
-                       clearInterval (animation.timer);
+                       clearInterval(animation.timer);
                        animation.timer  = null;
                }
                
-               var starttime = (new Date).getTime() - 13;              // set it back one frame
+               var starttime = (new Date).getTime() - 13;
                
-               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
+               animation.duration = 500;
+               animation.starttime = starttime;
+               animation.firstElement = document.getElementById("flip");
+               animation.timer = setInterval("animate();", 13);
+               animation.from = animation.now;
+               animation.to = 1.0;
+               animate();
+               flipShown = true;
        }
 }
 
-// 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)
+function mouseexit(event)
 {
        if (flipShown)
        {
@@ -107,8 +103,8 @@ function mouseexit (event)
                
                animation.duration = 500;
                animation.starttime = starttime;
-               animation.firstElement = document.getElementById ('flip');
-               animation.timer = setInterval ("animate();", 13);
+               animation.firstElement = document.getElementById("flip");
+               animation.timer = setInterval("animate();", 13);
                animation.from = animation.now;
                animation.to = 0.0;
                animate();
@@ -117,16 +113,13 @@ function mouseexit (event)
 }
 
 
-// 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);
+       T = limit_3(time - animation.starttime, 0, animation.duration);
        
        if (T >= animation.duration)
        {
@@ -137,35 +130,31 @@ function animate()
        else
        {
                ease = 0.5 - (0.5 * Math.cos(Math.PI * T / animation.duration));
-               animation.now = computeNextFloat (animation.from, animation.to, ease);
+               animation.now = compute_next_float(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)
+function compute_next_float(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';
+       document.getElementById("fliprollie").style.display = "block";
 }
 
 function exitflip(event)
 {
-       document.getElementById('fliprollie').style.display = 'none';
+       document.getElementById("fliprollie").style.display = "none";
 }
 
 /*=====================================================================*\