Added "Additional demos"-panel to index.html

svn changeset:3085/svn branch:trunk

diff --git a/build/package/WebContent/demo/css/ie.css b/build/package/WebContent/demo/css/ie.css
index 7deda93bd0019b065e5aedc104c8092b716d79d2..58d6ef84b388dd7f131273aebfa4717757cf7533 100644 (file)
--- a/build/package/WebContent/demo/css/ie.css
+++ b/build/package/WebContent/demo/css/ie.css
@@ -8,4 +8,13 @@
 
 a.more span {
        color: #5c666a;
+}
+
+
+* html #additional-demos {
+       margin-top: -3px;
+}
+
+*+html #additional-demos {
+       margin-top: -3px;
 }
\ No newline at end of file

diff --git a/build/package/WebContent/demo/css/styles.css b/build/package/WebContent/demo/css/styles.css
index 111fcff01e7828f14bd6d3a8f494a875f39c3753..a77dd73e6559452e9842511627012c558fabc203 100644 (file)
--- a/build/package/WebContent/demo/css/styles.css
+++ b/build/package/WebContent/demo/css/styles.css
@@ -191,20 +191,27 @@ a.more span {
 
 /* demo icons */
 
-#demos ul {
+#demo-buttons {
        list-style: none;
        margin: 0;
        padding: 0;
+       width: 100%;
 }
 
-#demos li {
+#demo-buttons li {
        float: left;
        width: 160px;
        height: 135px;
        margin-top: 14px;
 }
 
-#demos li a {
+#demo-buttons .clearer {
+       float: none;
+       height: 0;
+       margin: 0;
+}
+
+#demo-buttons li a {
        display: block;
        padding-top: 115px;
        height: 20px;
@@ -212,38 +219,36 @@ a.more span {
        text-align: center;
 }
 
-#demos #windowed-demos {
+#demo-buttons #windowed-demos {
        background: #fff url(../img/demos/windowed.png) no-repeat;
 }
 
-#demos #reservr {
+#demo-buttons #reservr {
        background: #fff url(../img/demos/reservr.png) no-repeat;
        margin-right: 15px;
 }
 
-#demos #feature-browser {
+#demo-buttons #feature-browser {
        background: #fff url(../img/demos/features.png) no-repeat;
        margin-right: 15px;
 }
 
-#demos #notifications {
+#demo-buttons #notifications {
        background: #fff url(../img/demos/notifications.png) no-repeat;
 }
 
 
 /* package contents */
 
-#package-contents {
+.panel {
        width: 300px;
-       float: right;
        padding: 0 17px 0 17px;
-       margin: -155px 0 0 0;
        background: #ecf0f3 url(../img/package-bg.png);
        overflow: hidden;
        font-size: 1.1em;
 }
 
-#package-contents .top {
+.panel .top {
        height: 5px;
        width: 334px;
        margin: 0 -17px 0 -17px;
@@ -251,7 +256,7 @@ a.more span {
        overflow: hidden;
 }
 
-#package-contents .bottom {
+.panel .bottom {
        height: 5px;
        width: 334px;
        margin: 0 -17px 0 -17px;
@@ -259,6 +264,11 @@ a.more span {
        overflow: hidden;
 }
 
+#package-contents {
+       float: right;
+       margin: -105px 1px 0 0;
+}
+
 #package-contents-content {
        margin: 13px 0 17px 0;
 }
@@ -307,4 +317,20 @@ a.more span {
 #package-contents .support {
        clear: left;
        padding-top: 1.5em;
+}
+
+
+
+/* additional demos */
+
+#additional-demos {
+       clear: left;
+       font-size: 1em;
+       margin-top: 10px;
+}
+
+#additional-demos h3 {
+       font-size: 1.1em;
+       margin: 4px 0 5px 0;
+       color: #5b7b93;
 }
\ No newline at end of file

diff --git a/build/package/WebContent/demo/img/demos/features.png b/build/package/WebContent/demo/img/demos/features.png
new file mode 100644 (file)
index 0000000..aaf8e5d
Binary files /dev/null and b/build/package/WebContent/demo/img/demos/features.png differ

diff --git a/build/package/WebContent/demos.html b/build/package/WebContent/demos.html
index ae5ca07b412dab774c78b1d433f9a6d10e8415cf..1c5c99ad515ee65ef98a9909b52d55fa0026a139 100644 (file)
--- a/build/package/WebContent/demos.html
+++ b/build/package/WebContent/demos.html
@@ -47,8 +47,6 @@
                                        }
                                        demoArea.onmouseout = this.blurDemos;
                                        
-                                       
-                                       // TODO implement feedback popup
                                },
                                
                                togglePackage : function() {

diff --git a/build/package/WebContent/index.html b/build/package/WebContent/index.html
index 27c4e24bb519bacca510440a3f5fcf696c9d0e9f..e605412db62db51b2fd2ad697de91f7a2af84d47 100644 (file)
--- a/build/package/WebContent/index.html
+++ b/build/package/WebContent/index.html
@@ -16,10 +16,12 @@
                var itmill = function() {
                
                        var isIE = /MSIE/.test(navigator.userAgent) && !window.opera;
-                       var packageOpen = false;
                        var packageContent;
                        var package;
                        var demoArea;
+                       var demos;
+                       var additionalDemos;
+                       var additionalDemosContent;
                
                        return {
                        
@@ -27,23 +29,32 @@
                                        // Fetch references
                                        packageContent = document.getElementById("package-contents-content");
                                        package = document.getElementById("package-contents");
-                                       demoArea = document.getElementById("demos");
+                                       demoArea = document.getElementById("demo-buttons");
+                                       demos = demoArea.getElementsByTagName("li");
+                                       additionalDemos = document.getElementById("additional-demos");
+                                       additionalDemosContent = document.getElementById("additional-demos-content");
                                        
-                                       // Hide package contents initially
+                                       // Hide panel initially
                                        packageContent.style.display = "none";
+                                       additionalDemosContent.style.display = "none";
+                                       
+                                       // Enable additional demos panel hiding/showing
+                                       var toggle = additionalDemos.getElementsByTagName("h3")[0];
+                                       toggle.style.cursor = "pointer";
+                                       toggle.title = "Show/hide additional demos";
+                                       // Use the quick-n-dirty way to attach event listeners
+                                       toggle.onclick = function() {itmill.togglePanel(additionalDemosContent)};
                                        
                                        // Enable package contents panel hiding/showing
-                                       var toggle = package.getElementsByTagName("h3")[0];
+                                       toggle = package.getElementsByTagName("h3")[0];
                                        toggle.style.cursor = "pointer";
                                        toggle.title = "Show/hide package contents";
                                        // Use the quick-n-dirty way to attach event listeners
-                                       toggle.onclick = this.togglePackage;                                    
+                                       toggle.onclick = function() {itmill.togglePanel(packageContent)};
                                        
-                                       // TODO enable demo button hovers
-                                       var demos = demoArea.getElementsByTagName("li");
+                                       // enable demo button hovers
                                        for(var i=0; i < demos.length; i++) {
                                                demos[i].onmouseover = this.focusDemo;
-                                               //demos[i].onmouseout = this.blurDemos;
                                        }
                                        demoArea.onmouseout = this.blurDemos;
                                        
@@ -51,14 +62,25 @@
                                        // TODO implement feedback popup
                                },
                                
-                               togglePackage : function() {
-                                       if(packageOpen) {
-                                                       packageContent.style.display = "none";
-                                                       packageOpen = false;
+                               togglePanel : function(which) {
+                                       if(which._open) {
+                                               which.style.display = "none";
+                                               which._open = false;
+                                       } else {
+                                               which.style.display = "block";
+                                               which._open = true;
+                                       }
+                                       // Dirty fix to reposition package-content panel
+                                       if(which == additionalDemosContent) {
+                                               var current = package.style.marginTop ? parseInt(package.style.marginTop) : -105;
+                                               if(which._open) {
+                                                       if(!which._height)
+                                                               which._height = additionalDemos.offsetHeight - package.offsetHeight;
+                                                       package.style.marginTop = (current + which._height) + "px";
                                                } else {
-                                                       packageContent.style.display = "block";
-                                                       packageOpen = true;
+                                                       package.style.marginTop = (current - which._height) + "px";
                                                }
+                                       }
                                },
                                
                                focusDemo : function(e) {
@@ -67,7 +89,6 @@
                                        if(target.nodeType != 1 || target.nodeName != "LI")
                                                return;
                                                
-                                       var demos = document.getElementById("demos").getElementsByTagName("li");
                                        for(var i=0; i < demos.length; i++) {
                                                var demo = demos[i];
                                                if(demo != target) {
@@ -88,9 +109,8 @@
                                blurDemos : function(e) {
                                        var evt = e ? e : window.event;
                                        var target = evt.toElement || evt.relatedTarget;
-                                       if((target == demoArea || target.parentNode == demoArea || target.parentNode.parentNode == demoArea) && target.nodeName != "H2")
+                                       if(target == demoArea || target.parentNode == demoArea || target.parentNode.parentNode == demoArea)
                                                return;
-                                       var demos = document.getElementById("demos").getElementsByTagName("li");
                                        for(var i=0; i < demos.length; i++) {
                                                if(isIE)
                                                        demos[i].style.filter = "";
@@ -118,12 +138,30 @@
                
                        <div id="demos">
                                <h2>Demos</h2>
-                               <ul>
+                               <ul id="demo-buttons">
                                        <li id="feature-browser"><a href="FeaturesApplication/">Feature browser</a></li>
                                        <li id="notifications"><a href="NotificationDemo/">Notifications</a></li>
                                        <li id="reservr"><a href="reservr.html">Reservation application</a></li>
                                        <li id="windowed-demos"><a href="WindowedDemos">Windowed demos</a></li>
-                               </ul>                   
+                                       <li class="clearer"></li> <!-- // simplifies things in JavaScipt -->
+                               </ul>
+                               
+                               <div class="clearer"></div>
+                               
+                               <div id="additional-demos" class="panel">
+                                       <div class="top"></div>
+                                       
+                                       <h3>&raquo; Additional demos</h3>
+                                       
+                                       <div id="additional-demos-content"> <!-- For JavaScript hooking -->
+                                       <ul>
+                                               <li><a href="table-demo">Table Demo</a></li>
+                                               <li><a href="select-demo">Select Demo</a></li>
+                                       </ul>
+                                       </div>
+                               
+                                       <div class="bottom"></div>
+                               </div> <!-- /additional-demos -->
                        </div> <!-- /demos -->
                        
                        <div id="getting-started">
@@ -158,7 +196,7 @@
                                
                        </div> <!-- /support-licensing -->
                        
-                       <div id="package-contents">
+                       <div id="package-contents" class="panel">
                                <div class="top"></div>
                                
                                <h3>&raquo; Package contents</h3>