History support for demo-page

svn changeset:12481/svn branch:6.3

1 files changed, 162 insertions, 34 deletions

diff --git a/WebContent/index.html b/WebContent/index.html
index c8fb74b60e..55b179f673 100644
--- a/WebContent/index.html
+++ b/WebContent/index.html
@@ -82,11 +82,11 @@
 						<ul>
 							<li>
 								<h6>Hello World &ndash; The classic example</h6>
-								<a href="HelloWorld.java" title="View Source">HelloWorld.java</a> &nbsp;&bull;&nbsp; <a href="HelloWorld">Run the app &raquo;</a>
+								<a href="HelloWorld.java" title="View Source">HelloWorld.java</a> &nbsp;&bull;&nbsp; <a href="HelloWorld" class="demoapp">Run the app &raquo;</a>
 							</li>
 							<li>
 								<h6>Calculator &ndash; Simple logic &amp; event handling</h6>
-								<a href="Calc.java" title="View Source">Calc.java</a> &nbsp;&bull;&nbsp; <a href="Calc">Run the app &raquo;</a>
+								<a href="Calc.java" title="View Source">Calc.java</a> &nbsp;&bull;&nbsp; <a href="Calc" class="demoapp">Run the app &raquo;</a>
 							</li>
 						</ul>
 					</div>
@@ -129,7 +129,7 @@
 					<div class="newline col4">
 						<h5>Built-in Themes</h5>
 						<div class="col2">
-							<a class="thumb" href="ReindeerTheme">
+							<a class="thumb demoapp" href="ReindeerTheme">
 								<img src="demo/img/icons/reindeer.png" />
 								<span><strong>Reindeer</strong>One theme &ndash; multiple looks</span>
 							</a>
@@ -137,7 +137,7 @@
 						<div class="col2">
 							<span class="thumb">
 								<img class="thumb" src="demo/img/icons/runo.png" />
-								<span><strong>Runo</strong>Clean and easy to extend</span>
+								<span><strong>Runo</strong>Clean and easy to extend (no demo available)</span>
 							</span>
 						</div>
 					</div>
@@ -145,14 +145,14 @@
 					<div class="col4">
 						<h5>Additional Themes &amp; Demos</h5>
 						<div class="col2">
-							<a class="thumb" href="http://demo.vaadin.com/chameleontheme">
+							<a class="thumb demoapp" href="http://demo.vaadin.com/chameleontheme">
 								<img src="demo/img/icons/chameleon.png" />
 								<span><strong>Chameleon Theme</strong>Create your own theme in seconds</span>
 							</a>
 							<a class="thumb-rel" href="http://vaadin.com/directory#addon/106">Available in the Directory</a>
 						</div>
 						<div class="col2">
-							<a class="thumb" href="VaadinTunes">
+							<a class="thumb demoapp" href="VaadinTunes">
 								<img src="demo/img/icons/vaadintunes.png" />
 								<span><strong>VaadinTunes</strong>Advanced layout and theme example</span>
 							</a>
@@ -221,7 +221,7 @@
 				</li>
 				
 				<li id="deployment" class="tab">
-					<h4 title="Deployment">Easy deployment</h4>
+					<h4 title="Deployment">Easy Deployment</h4>
 					<div class="col2">
 						<h5>Single JAR</h5>
 						<p>Vaadin is a single JAR file without external dependencies. Deploy the JAR with your application and you are ready to go.</p>
@@ -259,12 +259,12 @@
 					</div>	
 				</li>
 				<li id="License" class="tab">
-					<h4 title="Open Source">Free for everybody</h4>
+					<h4 title="Open Source">Free for Everybody</h4>
 						<h5>Apache2</h5>
 						<p>Vaadin is licensed under the Apache2 license which means you can use it both for non-commercial and commercial projects free of charge.</p>
 				</li>
 				<li id="Community" class="tab">
-					<h4 title="Community">Be a part of the Vaadin community</h4>
+					<h4 title="Community">Be a Part of the Vaadin Community</h4>
 					<div class="col2">
 						<h5>Forums</h5>
 						<p>The forums are very active and a good place to ask questions, help others, discuss your latest ideas or just share what you have done.</p>
@@ -277,7 +277,7 @@
 						<h5>Vaadin Directory</h5>
 						<p>Add-ons for Vaadin are distributed through Vaadin Directory. See what others have done, get ideas or create and share your own.</p>
 						<ul><li><a href="http://vaadin.com/directory">Vaadin Directory</a></li></ul><br/>
-						<h5>Bug tracker</h5>
+						<h5>Bug Tracker</h5>
 						<p>Found a problem in Vaadin? Maybe you fixed it yourself already? Report it through the Vaadin bug tracker so everybody else also can benefit from your findings.</p>
 						<ul><li><a href="http://dev.vaadin.com/">Vaadin bug tracker</a></li></ul><br/>
 					</div>
@@ -286,8 +286,129 @@
 			</ul>
 		</div> <!-- /content -->
 	
+	<div style="height:0px; overflow:hidden;">
+		
+	<!-- start pre caching sampler icons  -->
+	
+	<img src="/VAADIN/themes/sampler/icons/sampleicons/75-AbsoluteLayoutBasic.gif">
+	<img src="/VAADIN/themes/sampler/icons/sampleicons/75-AccordionDisabled.gif">
+	<img src="/VAADIN/themes/sampler/icons/sampleicons/75-AccordionIcons.gif">
+	<img src="/VAADIN/themes/sampler/icons/sampleicons/75-ApplicationLayout.gif">
+	<img src="/VAADIN/themes/sampler/icons/sampleicons/75-BasicMenuBar.gif">
+	<img src="/VAADIN/themes/sampler/icons/sampleicons/75-BrowserInformation.gif">
+	<img src="/VAADIN/themes/sampler/icons/sampleicons/75-ButtonLink.gif">
+	<img src="/VAADIN/themes/sampler/icons/sampleicons/75-ButtonPush.gif">
+	<img src="/VAADIN/themes/sampler/icons/sampleicons/75-CheckBoxes.gif">
+	<img src="/VAADIN/themes/sampler/icons/sampleicons/75-ClickableLayoutBasic.gif">
+	<img src="/VAADIN/themes/sampler/icons/sampleicons/75-ComboBoxContains.gif">
+	<img src="/VAADIN/themes/sampler/icons/sampleicons/75-ComboBoxInputPrompt.gif">
+	<img src="/VAADIN/themes/sampler/icons/sampleicons/75-ComboBoxNewItems.gif">
+	<img src="/VAADIN/themes/sampler/icons/sampleicons/75-ComboBoxPlain.gif">
+	<img src="/VAADIN/themes/sampler/icons/sampleicons/75-ComboBoxStartsWith.gif">
+	<img src="/VAADIN/themes/sampler/icons/sampleicons/75-CssLayouts.gif">
+	<img src="/VAADIN/themes/sampler/icons/sampleicons/75-CustomLayouts.gif">
+	<img src="/VAADIN/themes/sampler/icons/sampleicons/75-DateInline.gif">
+	<img src="/VAADIN/themes/sampler/icons/sampleicons/75-DateLocale.gif">
+	<img src="/VAADIN/themes/sampler/icons/sampleicons/75-DatePopup.gif">
+	<img src="/VAADIN/themes/sampler/icons/sampleicons/75-DateResolution.gif">
+	<img src="/VAADIN/themes/sampler/icons/sampleicons/75-DragDropHtml5FromDesktop.gif">
+	<img src="/VAADIN/themes/sampler/icons/sampleicons/75-DragDropRearrangeComponents.gif">
+	<img src="/VAADIN/themes/sampler/icons/sampleicons/75-DragDropServerValidation.gif">
+	<img src="/VAADIN/themes/sampler/icons/sampleicons/75-DragDropTableTree.gif">
+	<img src="/VAADIN/themes/sampler/icons/sampleicons/75-DragDropTreeSorting.gif">
+	<img src="/VAADIN/themes/sampler/icons/sampleicons/75-Errors.gif">
+	<img src="/VAADIN/themes/sampler/icons/sampleicons/75-ExpandingComponent.gif">
+	<img src="/VAADIN/themes/sampler/icons/sampleicons/75-FlashEmbed.gif">
+	<img src="/VAADIN/themes/sampler/icons/sampleicons/75-FormAdvancedLayout.gif">
+	<img src="/VAADIN/themes/sampler/icons/sampleicons/75-FormBasic.gif">
+	<img src="/VAADIN/themes/sampler/icons/sampleicons/75-FormPojo.gif">
+	<img src="/VAADIN/themes/sampler/icons/sampleicons/75-GridLayoutBasic.gif">
+	<img src="/VAADIN/themes/sampler/icons/sampleicons/75-HorizontalLayoutBasic.gif">
+	<img src="/VAADIN/themes/sampler/icons/sampleicons/75-Icons.gif">
+	<img src="/VAADIN/themes/sampler/icons/sampleicons/75-ImageEmbed.gif">
+	<img src="/VAADIN/themes/sampler/icons/sampleicons/75-ImmediateUpload.gif">
+	<img src="/VAADIN/themes/sampler/icons/sampleicons/75-JSApi.gif">
+	<img src="/VAADIN/themes/sampler/icons/sampleicons/75-LabelPlain.gif">
+	<img src="/VAADIN/themes/sampler/icons/sampleicons/75-LabelPreformatted.gif">
+	<img src="/VAADIN/themes/sampler/icons/sampleicons/75-LabelRich.gif">
+	<img src="/VAADIN/themes/sampler/icons/sampleicons/75-LayoutAlignment.gif">
+	<img src="/VAADIN/themes/sampler/icons/sampleicons/75-LayoutMargin.gif">
+	<img src="/VAADIN/themes/sampler/icons/sampleicons/75-LayoutSpacing.gif">
+	<img src="/VAADIN/themes/sampler/icons/sampleicons/75-LinkCurrentWindow.gif">
+	<img src="/VAADIN/themes/sampler/icons/sampleicons/75-LinkNoDecorations.gif">
+	<img src="/VAADIN/themes/sampler/icons/sampleicons/75-LinkSizedWindow.gif">
+	<img src="/VAADIN/themes/sampler/icons/sampleicons/75-ListSelectMultiple.gif">
+	<img src="/VAADIN/themes/sampler/icons/sampleicons/75-ListSelectSingle.gif">
+	<img src="/VAADIN/themes/sampler/icons/sampleicons/75-LoginForm.gif">
+	<img src="/VAADIN/themes/sampler/icons/sampleicons/75-MenuBarCollapsing.gif">
+	<img src="/VAADIN/themes/sampler/icons/sampleicons/75-MenuBarHiddenItems.gif">
+	<img src="/VAADIN/themes/sampler/icons/sampleicons/75-MenuBarItemStyles.gif">
+	<img src="/VAADIN/themes/sampler/icons/sampleicons/75-MenuBarWithIcons.gif">
+	<img src="/VAADIN/themes/sampler/icons/sampleicons/75-NativeSelection.gif">
+	<img src="/VAADIN/themes/sampler/icons/sampleicons/75-NativeWindow.gif">
+	<img src="/VAADIN/themes/sampler/icons/sampleicons/75-NotificationCustom.gif">
+	<img src="/VAADIN/themes/sampler/icons/sampleicons/75-NotificationError.gif">
+	<img src="/VAADIN/themes/sampler/icons/sampleicons/75-NotificationHumanized.gif">
+	<img src="/VAADIN/themes/sampler/icons/sampleicons/75-NotificationTray.gif">
+	<img src="/VAADIN/themes/sampler/icons/sampleicons/75-NotificationWarning.gif">
+	<img src="/VAADIN/themes/sampler/icons/sampleicons/75-OptionGroups.gif">
+	<img src="/VAADIN/themes/sampler/icons/sampleicons/75-PackageIcons.gif">
+	<img src="/VAADIN/themes/sampler/icons/sampleicons/75-PanelBasic.gif">
+	<img src="/VAADIN/themes/sampler/icons/sampleicons/75-PanelLight.gif">
+	<img src="/VAADIN/themes/sampler/icons/sampleicons/75-PopupViewClosing.gif">
+	<img src="/VAADIN/themes/sampler/icons/sampleicons/75-PopupViewContents.gif">
+	<img src="/VAADIN/themes/sampler/icons/sampleicons/75-ProgressIndicators.gif">
+	<img src="/VAADIN/themes/sampler/icons/sampleicons/75-ProminentPrimaryAction.gif">
+	<img src="/VAADIN/themes/sampler/icons/sampleicons/75-RichTextEditor.gif">
+	<img src="/VAADIN/themes/sampler/icons/sampleicons/75-ShortcutBasics.gif">
+	<img src="/VAADIN/themes/sampler/icons/sampleicons/75-ShortcutScope.gif">
+	<img src="/VAADIN/themes/sampler/icons/sampleicons/75-SliderHorizontal.gif">
+	<img src="/VAADIN/themes/sampler/icons/sampleicons/75-SliderVertical.gif">
+	<img src="/VAADIN/themes/sampler/icons/sampleicons/75-SplitPanelBasic.gif">
+	<img src="/VAADIN/themes/sampler/icons/sampleicons/75-Subwindow.gif">
+	<img src="/VAADIN/themes/sampler/icons/sampleicons/75-SubwindowAutoSized.gif">
+	<img src="/VAADIN/themes/sampler/icons/sampleicons/75-SubwindowClose.gif">
+	<img src="/VAADIN/themes/sampler/icons/sampleicons/75-SubwindowModal.gif">
+	<img src="/VAADIN/themes/sampler/icons/sampleicons/75-SubwindowPositioned.gif">
+	<img src="/VAADIN/themes/sampler/icons/sampleicons/75-SubwindowSized.gif">
+	<img src="/VAADIN/themes/sampler/icons/sampleicons/75-TableActions.gif">
+	<img src="/VAADIN/themes/sampler/icons/sampleicons/75-TableCellStyling.gif">
+	<img src="/VAADIN/themes/sampler/icons/sampleicons/75-TableColumnAlignment.gif">
+	<img src="/VAADIN/themes/sampler/icons/sampleicons/75-TableColumnCollapsing.gif">
+	<img src="/VAADIN/themes/sampler/icons/sampleicons/75-TableColumnHeaders.gif">
+	<img src="/VAADIN/themes/sampler/icons/sampleicons/75-TableColumnReordering.gif">
+	<img src="/VAADIN/themes/sampler/icons/sampleicons/75-TableHeaderIcons.gif">
+	<img src="/VAADIN/themes/sampler/icons/sampleicons/75-TableLazyLoading.gif">
+	<img src="/VAADIN/themes/sampler/icons/sampleicons/75-TableMouseEvents.gif">
+	<img src="/VAADIN/themes/sampler/icons/sampleicons/75-TableRowHeaders.gif">
+	<img src="/VAADIN/themes/sampler/icons/sampleicons/75-TableRowStyling.gif">
+	<img src="/VAADIN/themes/sampler/icons/sampleicons/75-TableSorting.gif">
+	<img src="/VAADIN/themes/sampler/icons/sampleicons/75-TabSheetClosing.gif">
+	<img src="/VAADIN/themes/sampler/icons/sampleicons/75-TabSheetDisabled.gif">
+	<img src="/VAADIN/themes/sampler/icons/sampleicons/75-TabSheetIcons.gif">
+	<img src="/VAADIN/themes/sampler/icons/sampleicons/75-TabSheetScrolling.gif">
+	<img src="/VAADIN/themes/sampler/icons/sampleicons/75-TextArea.gif">
+	<img src="/VAADIN/themes/sampler/icons/sampleicons/75-TextFieldInputPrompt.gif">
+	<img src="/VAADIN/themes/sampler/icons/sampleicons/75-TextFieldSecret.gif">
+	<img src="/VAADIN/themes/sampler/icons/sampleicons/75-TextFieldSingle.gif">
+	<img src="/VAADIN/themes/sampler/icons/sampleicons/75-Tooltips.gif">
+	<img src="/VAADIN/themes/sampler/icons/sampleicons/75-TreeActions.gif">
+	<img src="/VAADIN/themes/sampler/icons/sampleicons/75-TreeMouseEvents.gif">
+	<img src="/VAADIN/themes/sampler/icons/sampleicons/75-TreeMultiSelect.gif">
+	<img src="/VAADIN/themes/sampler/icons/sampleicons/75-TreeSingleSelect.gif">
+	<img src="/VAADIN/themes/sampler/icons/sampleicons/75-TwinColumnSelect.gif">
+	<img src="/VAADIN/themes/sampler/icons/sampleicons/75-UploadBasic.gif">
+	<img src="/VAADIN/themes/sampler/icons/sampleicons/75-UploadWithProgressMonitoring.gif">
+	<img src="/VAADIN/themes/sampler/icons/sampleicons/75-Validation.gif">
+	<img src="/VAADIN/themes/sampler/icons/sampleicons/75-VerticalLayoutBasic.gif">
+	<img src="/VAADIN/themes/sampler/icons/sampleicons/75-WebEmbed.gif">
+	<img src="/VAADIN/themes/sampler/icons/sampleicons/75-WebLayout.gif">
+		
+	</div>
+	
 	
 	<script type="text/javascript" src="demo/js/jquery.min.js"></script>
+	<script src="demo/js/jquery.history.js" type="text/javascript"></script>
 	<script src="demo/js/fonts.js" type="text/javascript"></script>
 	<script src="demo/js/zoombox.js" type="text/javascript"></script>
 	<script type="text/javascript">
@@ -326,7 +447,8 @@
 					li.hide();
 				}
 				var caption = li.find("h4");
-				var tab = tabs.append('<div class="tab">'+caption[0].title+'<span>&#9658;</span></div>').find(".tab:last-child");
+				var hash = li[0].id.toLowerCase();
+				var tab = tabs.append('<div class="tab" id="tab_'+hash+'"><a href="#'+hash+'">'+caption[0].title+'<span>&#9658;</span></a></div>').find(".tab:last-child");
 				if(i==0) {
 					jQuery.data(tabs[0], "selected", tab);
 					jQuery.data(content[0], "open", li);
@@ -334,30 +456,39 @@
 					tab.addClass("selected");
 				}
 				jQuery.data(tab[0], "content", li);
-				tab.click(function() {
-					if(jQuery.data(tabs[0], "selected")[0] == this)
-						return;
-						
-					// Hide previous
-					jQuery.data(tabs[0], "selected").removeClass("selected");
-					//jQuery.data(content[0], "open").fadeOut("fast");
-					jQuery.data(content[0], "open").hide();
-					
-					var tab = $(this);
-					var tabContent = jQuery.data(this, "content");
-					
-					// Show new
-					jQuery.data(tabs[0], "selected", tab);
-					tab.addClass("selected");
-					jQuery.data(content[0], "open", tabContent);
-					tabContent.css({"opacity":""});
-					//tabContent.fadeIn("fast");
-					tabContent.show();
-				});
 			});
 			content.height(height);
 		}
 		
+		function pageload(hash) {
+			var tabs = $("#tabs");
+			var content = $("#reasons");
+			
+			// Hide previous
+			jQuery.data(tabs[0], "selected").removeClass("selected");
+			//jQuery.data(content[0], "open").fadeOut("fast");
+			jQuery.data(content[0], "open").hide();
+			
+			hash = hash.replace(/^.*#/, '');
+			var tab = $("#tab_"+hash);
+			var tabContent = jQuery.data(tab[0], "content");
+			
+			// Show new
+			jQuery.data(tabs[0], "selected", tab);
+			tab.addClass("selected");
+			jQuery.data(content[0], "open", tabContent);
+			//tabContent.fadeIn("fast");
+			tabContent.show();
+		}
+		
+		$(document).ready(function(){
+			doTabs();
+			// Initialize history plugin.
+			// The callback is called at once by present location.hash. 
+			$.historyInit(pageload, "");
+			setInterval( "slideSwitch()", 2200 );
+		});
+		
 		window.onload = function() {
 			try {
 				if(window.location.search && (window.location.search.indexOf('gwt.hosted') != -1 || window.location.search.indexOf('gwt.codesvr') != -1)) {
@@ -372,9 +503,6 @@
 					}
 				}
 			} catch(e) {}
-			
-			setInterval( "slideSwitch()", 2200 );
-			doTabs();
 		}
 		
 		Cufon.replace(["h2","h4","#sampler .start"], {fontFamily: "HelveticaRounded"});