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()); + } } +