/* 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;
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;
overflow: hidden;
}
-#package-contents .bottom {
+.panel .bottom {
height: 5px;
width: 334px;
margin: 0 -17px 0 -17px;
overflow: hidden;
}
+#package-contents {
+ float: right;
+ margin: -105px 1px 0 0;
+}
+
#package-contents-content {
margin: 13px 0 17px 0;
}
#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
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 {
// 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;
// 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) {
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) {
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 = "";
<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>» 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">
</div> <!-- /support-licensing -->
- <div id="package-contents">
+ <div id="package-contents" class="panel">
<div class="top"></div>
<h3>» Package contents</h3>