History support for demo-page

svn changeset:12481/svn branch:6.3

diff --git a/WebContent/index.html b/WebContent/index.html
index c8fb74b60eb548f3415fa631b147f45df99f98b9..55b179f67397ec09d0044c24c6d946b7063d48fe 100644 (file)
--- 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"});