3:15 p.m.
Author: eallen
Date: 2009-03-26 16:15:51 -0400 (Thu, 26 Mar 2009)
New Revision: 3223
Modified:
mgmt/trunk/cumin/resources/app.css
mgmt/trunk/cumin/resources/app.js
Log:
Adding fullpage javascript and styles.
Modified: mgmt/trunk/cumin/resources/app.css
===================================================================
--- mgmt/trunk/cumin/resources/app.css 2009-03-26 20:14:46 UTC (rev 3222)
+++ mgmt/trunk/cumin/resources/app.css 2009-03-26 20:15:51 UTC (rev 3223)
@@ -468,3 +468,84 @@
content: "Example:";
padding-right: 0.25em;
}
+
+div.fullpageable {
+ position: relative;
+ background-color: transparent;
+ border: 0;
+ width: auto;
+ height: auto;
+ left: 0;
+ top: 0;
+}
+
+div.fullpaged {
+ background-color: white;
+ border: 10px solid white; /* instead of padding */
+ -moz-border-radius: 3px;
+ width: 96%;
+ height: 90%;
+ position: absolute;
+ left: 10px;
+ top: 10px;
+ z-index: 201;
+}
+
+div.fullpageTitle {
+ background-color: #E7E7F7;
+ height: 22px;
+ width: 100%;
+ position: absolute;
+ padding-top: 2px;
+ display: none;
+ overflow: hidden;
+ z-index: 0;
+}
+
+p.fullpageIcon {
+ background-color: white;
+ border-top: 2px solid #685B8A;
+ border-left: 1px solid #685B8A;
+ border-bottom: 1px solid #685B8A;
+ border-right: 1px solid #685B8A;
+ margin: 8px 4px;
+ padding: 0;
+ width: 8px;
+ height: 6px;
+ cursor: pointer;
+ float: right;
+ z-index: 4;
+ position: absolute;
+ right: 4px;
+ display: none;
+}
+div.fullpageable:hover div.fullpageTitle,
+div.fullpageable:hover p.fullpageIcon,
+div.fullpaged div.fullpageTitle,
+div.fullpaged p.fullpageIcon {
+ display: block;
+}
+
+div.fullpaged p.fullpageIcon {
+ border-top: 1px solid #cbb4ff;
+ border-left: 1px solid #cbb4ff;
+ border-bottom: 2px solid #685B8A;
+ border-right: 1px solid #cbb4ff;
+}
+
+div.widgetContainer {
+ position: relative;
+ z-index: 1;
+}
+div.fullpageBack {
+ background-color: black;
+ opacity: .8;
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ left: 0;
+ top: 0;
+ display: none;
+ z-index: 199;
+}
+
Modified: mgmt/trunk/cumin/resources/app.js
===================================================================
--- mgmt/trunk/cumin/resources/app.js 2009-03-26 20:14:46 UTC (rev 3222)
+++ mgmt/trunk/cumin/resources/app.js 2009-03-26 20:15:51 UTC (rev 3223)
@@ -24,11 +24,95 @@
}
}())
-// XXX move this
-function addEvent(obj, eventType, funct) {
- if (obj.addEventListener) {
- obj.addEventListener(eventType, funct, false);
- } else if (obj.attachEvent) {
- obj.attachEvent("on"+eventType, funct);
+/* surround all elements that have class 'fullpageable' with
+ supporting divs and add event behaviors */
+window.addEvent('domready', function () {
+ var elements = $$('.fullpageable');
+ for (var i=0; i<elements.length; i++) {
+ var element = elements[i];
+
+ element.removeClass('fullpageable');
+ var outer = new Element('div', {'class':
'fullpageable'});
+ var title = new Element('div', {'class':
'fullpageTitle'});
+ var icon = new Element('p', {'class': 'fullpageIcon',
+ 'title': 'Full Page',
+ 'events': {'click': function () {fullpage(this);}}});
+ var container = new Element('div', {'class':
'widgetContainer'});
+
+ outer.appendChild(title);
+ outer.appendChild(icon);
+ outer.appendChild(container);
+
+ var parent = element.parentNode;
+ outer.originalParent = parent;
+ container.appendChild(element);
+
+ parent.appendChild(outer);
+
+ var widgets = element.getElements('.fullpage_notify');
+ outer.widgetPaths = [];
+ widgets.each(function (widget) {
+ if (widget.get("id")) {
+ outer.widgetPaths.push(widget.get("id"));
+ }
+ });
}
+});
+
+/* called when the full page icon is clicked */
+function fullpage(oIcon) {
+ var oFullPage = null;
+ try {
+ oFullPage = oIcon.parentNode;
+ } catch (e) {}
+
+ if (!oFullPage || !oFullPage.hasClass("fullpageable")) {
+ oFullPage = $("fullpage");
+ }
+
+ if (oFullPage) {
+ var oBack = $("fullpageBack");
+ if (!oBack) {
+ oBack = new Element('div', {'class': 'fullpageBack',
'id': 'fullpageBack', 'events': {'click': fullpage}});
+ document.body.appendChild(oBack);
+ }
+ if (oFullPage.parentNode == document.body) {
+ // undo full page
+ oBack.style.display = "none";
+ oFullPage.id = "";
+ oFullPage.className = "fullpageable";
+
+ document.body.style.height = "auto";
+ oFullPage.originalParent.appendChild(oFullPage);
+
oFullPage.getElement("p.fullpageIcon").setProperty("title", "Full
Page");
+ setFullpageParam(false, oFullPage);
+ } else {
+ // make it full page
+ oBack.style.display = "block";
+ oFullPage.id = "fullpage";
+ oFullPage.className = "fullpaged";
+
+ document.body.style.height = "100%";
+ document.body.appendChild(oFullPage);
+
oFullPage.getElement("p.fullpageIcon").setProperty("title",
"Minimize");
+ setFullpageParam(true, oFullPage);
+ }
+ }
+
+ // sets/clears the fullpage parameter in the wooly background update url
+ function setFullpageParam(set, oFullPage) {
+ var branch = wooly.branchIntervalUpdate();
+ if (set) {
+ var width = $(oFullPage).getCoordinates().width + "";
+ oFullPage.widgetPaths.each(function (path) {
+ branch.session[path+".fullpage"] = width;
+ });
+ } else {
+ oFullPage.widgetPaths.each(function (path) {
+ delete branch.session[path+".fullpage"];
+ });
+ }
+ wooly.restartIntervalUpdate(branch.marshal());
+ }
}
+