adding app.js update

addyosmani · Oct 7, 2010 · 1864388 · 1864388
1 parent 82c4064
commit 1864388
Show file tree

Hide file tree

Showing 2 changed files with 160 additions and 160 deletions.
diff --git a/index.html b/index.html
@@ -4,172 +4,25 @@
 	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
 	<title>AddyOsmani.com - Roundrr Demo</title>
 
+	<!--First stylesheet configures Roundrr presentation, second is font-face-->
 	<link rel="stylesheet" type="text/css" href="css/style.css"></link>
 	<link rel="stylesheet" type="text/css" href="fonts/stylesheet.css"></link>
 
+    <!--Include jQuery and jQuery roundrr dependancies-->
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
     <script type='text/javascript' src='scripts/ui/jQuery.roundrr.js'></script>
-
+
-
+    <!-- Include Demo app code -->
-    <script type="text/javascript">
+    <script type='text/javascript' src='scripts/ui/app.js'></script>
-
+
-
+
-jQuery(document).ready(function()
-{
-
-         var currentImage = "";
-         var interfaceLock = false;
-
-	  	jQuery("#roundrr_container").roundrrwheel(
-	  	{
-
-			centerClass: 'roundrr_center',
-			listClass: 'list', 
-			itemClass: 'item', 
-			radius: 220, 
-			animSpeed:400, 
-			centerX: 29, 
-			centerY: 60, 
-			animationEffect: 1, //(1:off, 5:light,10:heavy, 15:subtle)
-			selectEvent: "click", 	
-			//on selecting/clicking an item on the wheel
-			onSelect: function($selected)
-			{  
-			showLargeImage($selected, 'noanim');
-			},
-			//on beginning to spin/animate the wheel
-			onNextBegin: function($m)
-			{
-
-			   interfaceLock = true;
-
-			},
-			onPrevBegin: function($m)
-			{
-
-			   interfaceLock = true;
-
-			},
-			//once an image has moved under the 'pick'
-			onImageFocus: function($item)
-			{
-
-            showLargeImage($item, 'none');
-
-
-			},
-			//once an image/image set is no longer under the 'pick'
-			onImageBlur:  function($item)
-			{
-
-			}, 
-			//once the animation has completed
-			onAnimationComplete: function($menu)
-			{
-
-			     jQuery('.centerImage').attr('src', currentImage);
-			     jQuery('.centerImage').load(function()
-			     {
-
-			        interfaceLock = false;
-			     });
-
-
-			},
-			angleOffset: Math.PI, 
-			onShow: function($menuitems)
-			{
-				$menuitems.each(function(i)
-				{
-					var $this = jQuery(this);
-					$this.delay(i*100).fadeIn(500);
-				});
-
-
-			}
-
-		});
-
-		jQuery("#roundrr_container").roundrrwheel("show");
-		$('#next').bind('click', spinMenuLeft);
-		$('#prev').bind('click', spinMenuRight);
-
-		function showLargeImage($i, mode)
-		{
-
-			interfaceLock = true;
-			var thisImage   = $i.find('img');
-			var focusedImage = thisImage.attr('src');
-            var largerImage = focusedImage.replace('_bigger', '');	
-            var imageCaption = thisImage.attr('alt');
-            var speechBubble =  jQuery('.roundrr_speech');
-            speechBubble.fadeIn();   
-
-            currentImage = largerImage;
-
-            jQuery('#roundrr_caption').fadeIn();
-			jQuery('#roundrr_caption').html(imageCaption);
-
-            if(mode=='noanim')
-            {
-
-                jQuery('.centerImage').attr('src', currentImage);
-			     jQuery('.centerImage').load(function()
-			     {
-			        interfaceLock = false;
-
-			     });
-            }
-
-		}
-
-
-		   /*Spin the menu to the left*/
-			function spinMenuLeft()
-			{
-			   if(!(interfaceLock))
-			  {
-			   jQuery("#roundrr_container").roundrrwheel("prev");
-			   }			   
-			}
-
-			/*Spin the menu to the right*/
-			function spinMenuRight()
-			{
-		      if(!(interfaceLock))
-			  {
-			   jQuery("#roundrr_container").roundrrwheel("next");
-			   } 
-			}
-
-			/*Keydown events*/
-			$(window).keydown(function(event) 
-			{
-				var keycode = event.keyCode;
-				switch(keycode)
-				{
-				  case 39:
-           		  spinMenuLeft();
-  				  break;
-  				  case 37:
-           		  spinMenuRight();
-  				   break;
-		     } });
-
-
-
-		//setInterval(spinMenuLeft, 5000);
-
-	  });
-	</script>
   </head>
   <body>
 
-
-
   <div class="container">
 
 
+ <!-- Right-hand navigation -->
   <div id="roundrr_navigation"> 
 		<a href="#" id="next"></a>
   		<a href="#" id="prev"></a>
@@ -180,25 +33,25 @@
  </div>
 
 
-
+   <!-- central image -->
    <div class="roundrr_center">
-
    </div>
 
-
+   <!-- Speech bubble for captions -->
    <div class="roundrr_speech">
-
    </div>
 
 
-
+  <!-- actual caption text -->
   <div id="roundrr_caption">
    </div>
 
+  <!-- the pick which is displayed over the current image --> 
   <div id="roundrr_pick">
    </div>
 
 
+  <!-- the container of images -->
 	<div id='roundrr_container'>
 		<ul class='list'>
 

diff --git a/scripts/ui/app.js b/scripts/ui/app.js
@@ -0,0 +1,147 @@
+jQuery(document).ready(function()
+{
+
+         var currentImage = "";
+         var interfaceLock = false;
+
+	  	jQuery("#roundrr_container").roundrrwheel(
+	  	{
+
+			centerClass: 'roundrr_center',
+			listClass: 'list', 
+			itemClass: 'item', 
+			radius: 220, 
+			animSpeed:400, 
+			centerX: 29, 
+			centerY: 60, 
+			animationEffect: 1, //(1:off, 5:light,10:heavy, 15:subtle)
+			selectEvent: "click", 	
+			//on selecting/clicking an item on the wheel
+			onSelect: function($selected)
+			{  
+			showLargeImage($selected, 'noanim');
+			},
+			//on beginning to spin/animate the wheel
+			onNextBegin: function($m)
+			{
+
+			   interfaceLock = true;
+
+			},
+			onPrevBegin: function($m)
+			{
+
+			   interfaceLock = true;
+
+			},
+			//once an image has moved under the 'pick'
+			onImageFocus: function($item)
+			{
+
+            showLargeImage($item, 'none');
+
+
+			},
+			//once an image/image set is no longer under the 'pick'
+			onImageBlur:  function($item)
+			{
+
+			}, 
+			//once the animation has completed
+			onAnimationComplete: function($menu)
+			{
+
+			     jQuery('.centerImage').attr('src', currentImage);
+			     jQuery('.centerImage').load(function()
+			     {
+
+			        interfaceLock = false;
+			     });
+
+
+			},
+			angleOffset: Math.PI, 
+			onShow: function($menuitems)
+			{
+				$menuitems.each(function(i)
+				{
+					var $this = jQuery(this);
+					$this.delay(i*100).fadeIn(500);
+				});
+
+
+			}
+
+		});
+
+		jQuery("#roundrr_container").roundrrwheel("show");
+		$('#next').bind('click', spinMenuLeft);
+		$('#prev').bind('click', spinMenuRight);
+
+		function showLargeImage($i, mode)
+		{
+
+			interfaceLock = true;
+			var thisImage   = $i.find('img');
+			var focusedImage = thisImage.attr('src');
+            var largerImage = focusedImage.replace('_bigger', '');	
+            var imageCaption = thisImage.attr('alt');
+            var speechBubble =  jQuery('.roundrr_speech');
+            speechBubble.fadeIn();   
+
+            currentImage = largerImage;
+
+            jQuery('#roundrr_caption').fadeIn();
+			jQuery('#roundrr_caption').html(imageCaption);
+
+            if(mode=='noanim')
+            {
+
+                jQuery('.centerImage').attr('src', currentImage);
+			     jQuery('.centerImage').load(function()
+			     {
+			        interfaceLock = false;
+
+			     });
+            }
+
+		}
+
+
+		   /*Spin the menu to the left*/
+			function spinMenuLeft()
+			{
+			   if(!(interfaceLock))
+			  {
+			   jQuery("#roundrr_container").roundrrwheel("prev");
+			   }			   
+			}
+
+			/*Spin the menu to the right*/
+			function spinMenuRight()
+			{
+		      if(!(interfaceLock))
+			  {
+			   jQuery("#roundrr_container").roundrrwheel("next");
+			   } 
+			}
+
+			/*Keydown events*/
+			$(window).keydown(function(event) 
+			{
+				var keycode = event.keyCode;
+				switch(keycode)
+				{
+				  case 39:
+           		  spinMenuLeft();
+  				  break;
+  				  case 37:
+           		  spinMenuRight();
+  				   break;
+		     } });
+
+
+
+		//setInterval(spinMenuLeft, 5000);
+
+	  });