From 2c1f56a00930f5255a869448a939ab12de39a323 Mon Sep 17 00:00:00 2001 From: JT Smith Date: Thu, 26 Jul 2007 23:05:22 +0000 Subject: [PATCH] - rfe: Admin bar doesn't resize with the browser - fix: Left Admin Bar overlap problem --- docs/changelog/7.x.x.txt | 2 + lib/WebGUI/Macro/AdminBar.pm | 5 +- lib/WebGUI/Session/Style.pm | 1 + lib/WebGUI/Setup.pm | 3 +- www/extras/slidePanel/slidePanel.css | 170 ++++--- www/extras/slidePanel/slidePanel.html | 6 + www/extras/slidePanel/slidePanel.js | 635 ++++++++++++++++++-------- 7 files changed, 555 insertions(+), 267 deletions(-) diff --git a/docs/changelog/7.x.x.txt b/docs/changelog/7.x.x.txt index d903e7177..f88ce6540 100644 --- a/docs/changelog/7.x.x.txt +++ b/docs/changelog/7.x.x.txt @@ -13,6 +13,8 @@ - Graphics::Magick is now the standard graphics package in WebGUI, but Image::Magick will be supported for backwards compatibility. See gotcha.txt for details. + - rfe: Admin bar doesn't resize with the browser + - fix: Left Admin Bar overlap problem - fix: A bug where it was possible to delete a system page if it were made the child of a non-system page that you had edit rights to. - api: Added a unified contraints system for the file and image assets. diff --git a/lib/WebGUI/Macro/AdminBar.pm b/lib/WebGUI/Macro/AdminBar.pm index fc0ca4aec..ff08535c5 100644 --- a/lib/WebGUI/Macro/AdminBar.pm +++ b/lib/WebGUI/Macro/AdminBar.pm @@ -40,6 +40,10 @@ The ID for a template to use for formatting the link. The default template crea sub process { my $session = shift; return "" unless ($session->var->isAdminOn); + $session->style->setRawHeadTags(' + + + '); my @param = @_; my $templateId = $param[0] || "PBtmpl0000000000000090"; my $i18n = WebGUI::International->new($session,'Macro_AdminBar'); @@ -151,7 +155,6 @@ sub process { }); } return WebGUI::Asset::Template->new($session,$templateId)->process({adminbar_loop=>\@adminbar}); -# 'http://validator.w3.org/check?uri=referer'=>$i18n->get(399), } diff --git a/lib/WebGUI/Session/Style.pm b/lib/WebGUI/Session/Style.pm index cfdb8385f..b0388e3ea 100644 --- a/lib/WebGUI/Session/Style.pm +++ b/lib/WebGUI/Session/Style.pm @@ -184,6 +184,7 @@ return props[propName]; '; + if ($self->session->user->isInGroup(2) || $self->session->setting->get("preventProxyCache")) { # This "triple incantation" panders to the delicate tastes of various browsers for reliable cache suppression. $var{'head.tags'} .= ' diff --git a/lib/WebGUI/Setup.pm b/lib/WebGUI/Setup.pm index 65a9b33e1..192cd8567 100644 --- a/lib/WebGUI/Setup.pm +++ b/lib/WebGUI/Setup.pm @@ -235,7 +235,8 @@ a:visited { color: '.$form->get("visitedLinkColor").'; } isHidden => 1, mimeType => "text/css", }); - my $styleTemplate = ' + my $styleTemplate = ' + ^Page(title); - ^c; diff --git a/www/extras/slidePanel/slidePanel.css b/www/extras/slidePanel/slidePanel.css index f4c5739e6..8465722ae 100644 --- a/www/extras/slidePanel/slidePanel.css +++ b/www/extras/slidePanel/slidePanel.css @@ -1,79 +1,123 @@ -#slidePanel { - position:absolute; - font: bold 12px sans-serif; - line-height:20px; - text-align: left; - left:0px; - top:0px; +dl.accordion-menu { + margin: 0; + padding: 0; + width: 160px; + background: #eeeeee; + position:fixed; + _position:absolute; + top:0; + _top:expression(eval((document.documentElement && document.documentElement.scrollTop) ? document.documentElement.scrollTop : document.body.scrollTop)); + left:0; + z-index: 100; } -.slidePanelButton { - width:300px; - text-align:center; - font-family: sans-serif; - font-size:11px; - cursor: pointer; - border-width:1px; - border-color: #ACACAC; - background-color:#dddddd; - background-image: url(btn_bg.jpg); - position:absolute; - left:0px; - top: 0px; - border-style: solid; -} - -.slidePanelButton A, .slidePanelButton A:visited, .slidePanelButton A:link { - text-decoration: none; - color: black; +dl.accordion-menu dt.a-m-t { + margin: 0; + padding: 0; + background-color:#dddddd; + background-image: url(btn_bg.jpg); + font-weight: bold; + height: 20px; + color: #444444; + border: 1px solid #ACACAC; + line-height: 20px; + font-size: 12px; + text-align:center; + font-family: sans-serif; } -.scrollPanelUp { - position:absolute; - top: 40px; +dl.accordion-menu dt.a-m-t-hover{ + margin: 0; + padding: 0; + background:#cdcdcd; } -.scrollPanelDown { - position: absolute; + +dl.accordion-menu dt.a-m-t-down{ + margin: 0; + padding: 0; + border: solid 1px #222222; + border-right-color: #dfdfdf; + border-bottom-color: #dfdfdf; } -.slidePanel { - position:absolute; - background-color: #eeeeee; - z-index: 100; + +html.accordion-menu-js dt.a-m-t{ + margin: 0; + padding: 0; + cursor:pointer; + zoom:1; } -.panel, .panelLinkHolder { - position:absolute; - left:0px; - background-color: #eeeeee; - background-image: url(panel_bg.jpg); - background-repeat: repeat-x; - color: black; +dl.accordion-menu dd.a-m-d { + margin: 0; + padding: 0; + overflow: auto; + background-color: #eeeeee; + background-image: url(panel_bg.jpg); + background-repeat: repeat-x; } -.panelLinkOut { - position: absolute; - overflow: hidden; - height: 20px; - cursor: pointer; - left: 0px; - font-size: 11px; - color: black; - font-family: sans-serif; +dl.accordion-menu dd.a-m-d .link { + margin: 0; + padding: 0; + display: block; + width: 140px; + overflow: hidden; + white-space: nowrap; + text-decoration: none; + color: black; + height: 20px; + font-family: sans-serif; + cursor: pointer; + font-size: 12px; } -.panelLinkIn { - position:absolute; - cursor: pointer; - height: 20px; - overflow: hidden; - cursor: pointer; - left:0px; - border: 1px solid #DEDCDC; - font-size: 11px; - font-family: sans-serif; - color: black; - background-color: #F5F5F5; +dl.accordion-menu dd.a-m-d .link:hover { + margin: 0; + padding: 0; + color: black; + background-color: #F5F5F5; +} + +html.accordion-menu-js dd.a-m-d{ + margin: 0; + padding: 0; + display:none; +} + + +html.accordion-menu-js dd.a-m-d-expand { + margin: 0; + padding: 0; + display:block; +} + +html.accordion-menu-js dd.a-m-d-before-expand { + margin: 0; + padding: 0; + display:block; + position:relative; + z-index:-1; + opacity:0; + height:auto !important; + visibility:hidden; + overflow:visible; +} + + +html.accordion-menu-js dt.a-m-t-expand { + margin: 0; + padding: 0; + border-left-color:#222222; + color:black; + background:#c0c0c0; +} + +html.accordion-menu-js dd.a-m-d-anim { + margin: 0; + padding: 0; + overflow:hidden; + display:block; } diff --git a/www/extras/slidePanel/slidePanel.html b/www/extras/slidePanel/slidePanel.html index eb5c2e9a2..407a72a27 100644 --- a/www/extras/slidePanel/slidePanel.html +++ b/www/extras/slidePanel/slidePanel.html @@ -1,5 +1,11 @@ + + + + + + diff --git a/www/extras/slidePanel/slidePanel.js b/www/extras/slidePanel/slidePanel.js index df0678222..862a33558 100644 --- a/www/extras/slidePanel/slidePanel.js +++ b/www/extras/slidePanel/slidePanel.js @@ -1,77 +1,23 @@ -var slidePanelButtonHeight = 23; -var slidePanelLinkTop = slidePanelButtonHeight+2; +/* this is a freakesh hack that should only be in place until the new admin console goes in. If you want to see the + * real accorrdion look in the accordion folder */ //add one button to a panel function sp_addLink(img, label, action) { - this.img[this.img.length]=img; - this.lbl[this.lbl.length]=label; - this.act[this.act.length]=action; - this.sta[this.sta.length]=0; + this.img.push(img); + this.lbl.push(label); + this.act.push(action); return this } -//test if scroll buttons should be visible -function sp_testScroll() { - var i=parseInt(this.obj.style.height); - var j=parseInt(this.objf.style.height); - var k=parseInt(this.objf.style.top); - if (k==slidePanelLinkTop) - this.objm1.style.visibility='hidden'; - else - this.objm1.style.visibility='visible'; - if ((j+k)0) - setTimeout(this.v+'.up('+nr+');',10); - else - this.testScroll(); -} - -//scroll the panel content down -function sp_down(nr) { - this.ftop = this.ftop + 5; - if (this.ftop>=slidePanelLinkTop) { - this.ftop=slidePanelLinkTop; - nr=0; - } - this.objf.style.top=(this.ftop+'px'); - nr--; - if (nr>0) - setTimeout(this.v+'.down('+nr+');',10); - else - this.testScroll(); -} //create one panel function createPanel(name,caption) { this.name=name; // panel layer ID - this.ftop=slidePanelLinkTop; // actual panel scroll position - this.obj=null; // panel layer object - this.objc=null; // caption layer object - this.objf=null; // panel field layer object - this.objm1=null; // scroll button up - this.objm2=null; // scroll button down this.caption=caption; // panel caption - this.img=new Array(); // button images - this.lbl=new Array(); // button labels - this.act=new Array(); // button actions - this.sta=new Array(); // button status (internal) + this.img=new Array(); + this.lbl=new Array(); + this.act=new Array(); this.addLink=sp_addLink; // add one button to panel - this.testScroll=sp_testScroll; // test if scroll buttons should be visible - this.up=sp_up; // scroll panel buttons up - this.down=sp_down; // scroll panel buttons down - this.v = this.name + "var"; // global var of 'this' - eval(this.v + "=this"); return this } @@ -81,148 +27,34 @@ function sp_addPanel(panel) { this.panels[this.panels.length] = panel; } - +var lastAdminBarPanel = 0; // Draw the slider function sp_draw() { - document.body.style.marginLeft = this.width+'px'; - var i; - var j; - var t=0; - var h; - var c=3; + document.write('
'); + for (var i=0; i < this.panels.length; i++) { + document.write('
' + this.panels[i].caption + '
'); + document.write('
'); + lastAdminBarPanel = i; + for (var j=0; j < this.panels[i].img.length; j++) { + document.write(''); + document.write('icon'); + document.write(this.panels[i].lbl[j] + ''); + } + document.write('
'); + } + document.write('
'); +} - //slide panel - document.write('
'); - document.write('
'); - h=this.height-((this.panels.length-1)*slidePanelButtonHeight) - - //one layer for every panel... - for (i=0;i'); - t=t+slidePanelButtonHeight; - - //one layer to host the panel links - document.write('
'); - mtop=0 - - for (j=0;j'); - document.write('

icon'); - document.write(' '+this.panels[i].lbl[j]); - document.write('

'); - mtop=mtop+this.buttonspace; - } - - document.write('
'); - - document.write('') - - // scroll-up - document.write('
'); - document.write('scroll up'); - document.write('
'); - - // scroll-down - document.write('
'); - document.write('scroll down'); - document.write('
'); - - document.write('
') - - } - document.write('') - - for (i=0;inr) { - this.panels[i].obj.style.top=this.height-((l-i)*slidePanelButtonHeight)+"px"; - } else { - this.panels[i].obj.style.top=i*slidePanelButtonHeight+"px"; - } - - // Fix bug with bits of other panels showing through. - this.panels[i].objf.style.visibility = (i == nr)? 'visible' : 'hidden'; - } -} - function createSlidePanelBar(name) { //Added to allow support for xhtml transitional var docElement = document.documentElement; @@ -231,18 +63,9 @@ function createSlidePanelBar(name) { } this.aktPanel=0; // last open panel this.name=name; // name - this.xpos=0; // bar x-pos - this.ypos=0; // bar y-pos - this.width=160; // bar width - //this.height=((navigator.appVersion.indexOf("MSIE ") == -1)?innerHeight:document.body.offsetHeight)-10; // bar height - this.height=((navigator.appVersion.indexOf("MSIE ") == -1)?innerHeight:docElement.offsetHeight)*0.95; // bar height - this.buttonspace=slidePanelButtonHeight-1; // distance of panel buttons this.panels=new Array(); // panels this.addPanel=sp_addPanel; // add new panel to bar this.draw=sp_draw; // write HTML code of bar - this.showPanel=sp_showPanel; // make a panel visible - this.v = name + "var"; // global var of 'this' - eval(this.v + "=this"); return this; } @@ -275,3 +98,411 @@ function sp_eraseCookie(name) { } +var AccordionMenu = new function() +{ + var YUD = YAHOO.util.Dom; + var YUE = YAHOO.util.Event; + var oMenuSetting = {}; + var oMenuCache = {}; + var dLastHoverTitle ; + YUD.addClass(document.documentElement,'accordion-menu-js'); + + function getDT(e) + { + var dEl = e.srcElement || e.target; + + if( (e.tagName + '').toUpperCase()=='DD' ) + { + var dt = e.previousSibling ; + while(dt) + { + if(dt.tagName && dt.tagName.toUpperCase() == 'DT'){break;}; + dt = dt.previousSibling + }; + + if(!dt || dt.tagName.toUpperCase() != 'DT'){return;} + else{return dt}; + } + else if(e.clientX) + { + var found = false; + while( dEl.parentNode) + { + if(YUD.hasClass(dEl,'a-m-t')){ found = true ; break;}; + dEl = dEl.parentNode; + }; + if(!found){return null} + else{return dEl }; + }; + }; + + + + function getDD(dt) + { + if(!dt){return null;}; + var dd = dt.nextSibling ; + + while(dd) + { + if(dd.tagName && dd.tagName.toUpperCase() == 'DD'){break;}; + dd = dd.nextSibling; + + }; + if(!dd || dd.tagName.toUpperCase() != 'DD'){return;} + else{return dd}; + }; + + function expand(dl,dt,dd) + { + var bodyPanels = YUD.getElementsByClassName("a-m-d", "dd",dl); + var bodyPanelHeight = YUD.getViewportHeight() - (20 * bodyPanels.length) - 5; + + dl.hasAnimation +=1; + YUD.addClass(dd,'a-m-d-before-expand'); + var oAttr = {height:{from:0,to:bodyPanelHeight }}; + + YUD.removeClass(dd,'a-m-d-before-expand'); + + var onComplete = function() + { + oAnim.onComplete.unsubscribe(onComplete); + oAnim.stop(); + YUD.removeClass(dd,'a-m-d-anim'); + YUD.addClass(dd,'a-m-d-expand'); + onComplete = null; + dl.hasAnimation -=1; + var dt = getDT(dd); + YUD.addClass(dt,'a-m-t-expand'); + if( oMenuCache[ dl.id ] && oMenuCache[ dl.id ].onOpen && dd.style.height!=bodyPanelHeight + "px" ) + { + oMenuCache[ dl.id ].onOpen( {dl:dl,dt:dt,dd:dd} ); + }; + dd.style.height = bodyPanelHeight + "px"; + + }; + + var onTween = function() + { + if(dd.style.height) + { + YUD.addClass(dd,'a-m-d-anim'); + oAnim.onTween.unsubscribe(onTween); + onTween = null; + dd.oAnim = null; + }; + + }; + + if(dd.oAnim) + { + dd.oAnim.stop(); + dd.oAnim = null; + dl.hasAnimation -=1; + }; + var oEaseType = YAHOO.util.Easing.easeOut; + var seconds = 0.5; + if(oMenuCache[ dl.id ] ) + { + oEaseType = oMenuCache[ dl.id ]['easeOut']?oEaseType:YAHOO.util.Easing.easeIn; + seconds = oMenuCache[ dl.id ]['seconds']; + + if( !oMenuCache[ dl.id ]['animation'] ) + { + var oAnim = {onComplete:{unsubscribe:function(){}},stop:function(){}}; + onComplete(); + return; + }; + }; + + + var oAnim = new YAHOO.util.Anim(dd,oAttr,seconds ,oEaseType); + oAnim.onComplete.subscribe(onComplete); + oAnim.onTween.subscribe(onTween); + oAnim.animate(); + dd.oAnim = oAnim ; + + }; + + function collapse(dl,dt,dd) + { + dl.hasAnimation +=1; + YUD.addClass(dd,'a-m-d-anim'); + var oAttr = {height:{from:dd.offsetHeight,to:0}}; + + + var onComplete = function() + { + oAnim.onComplete.unsubscribe(onComplete); + YUD.removeClass(dd,'a-m-d-anim'); + YUD.removeClass(dd,'a-m-d-expand'); + dd.style.height = ''; + dd.oAnim = null; + onComplete = null; + dl.hasAnimation -=1; + var dt = getDT(dd); + YUD.removeClass(dt,'a-m-t-expand'); + if( oMenuCache[ dl.id ] && oMenuCache[ dl.id ].onOpen ) + { + oMenuCache[ dl.id ].onClose( {dl:dl,dt:dt,dd:dd} ); + }; + + }; + + if(dd.oAnim) + { + dd.oAnim.stop(); + dd.oAnim = null; + dl.hasAnimation -=1; + }; + + var oEaseType = YAHOO.util.Easing.easeOut; + var seconds = 0.5; + if(oMenuCache[ dl.id ] ) + { + oEaseType = oMenuCache[ dl.id ]['easeOut']?oEaseType:YAHOO.util.Easing.easeIn; + seconds = oMenuCache[ dl.id ]['seconds']; + if( !oMenuCache[ dl.id ]['animation'] ) + { + var oAnim = {onComplete:{unsubscribe:function(){}},stop:function(){}}; + onComplete(); + return; + }; + }; + + var oAnim = new YAHOO.util.Anim(dd,oAttr,seconds ,oEaseType); + oAnim.onComplete.subscribe(onComplete); + oAnim.animate(); + dd.oAnim = oAnim ; + }; + + function collapseAll(dl,dt,dd) + { + var aOtherDD = YUD.getElementsByClassName('a-m-d-expand','dd',dl); + for(var i=0;i 0 ){return;}; + YUD.removeClass(dt,'a-m-t-down'); + + if(YUD.hasClass(dd,'a-m-d-expand')) + { + collapse(dl,dt,dd); + } + else + { + if( oMenuCache[ dl.id ] && oMenuCache[ dl.id ].dependent == false ){} + else{collapseAll(dl,dt,dd);} + expand(dl,dt,dd); + }; + YUE.stopEvent(e); + return false; + }; + + + YUE.addListener( document,'mouseover',onMenuMouseover); + YUE.addListener( document,'mouseout',onMenuMouseout); + YUE.addListener( document,'mousedown',onMenuMousedown); + YUE.addListener( document,'click',onMenuClick); + + this.openDtById = function(sId) + { + var dt = document.getElementById(sId); + if(!dt){return;}; + if(!YUD.hasClass(dt,'a-m-t')){return;}; + var dl = dt.parentNode; + var dd = getDD(dt); + if(dl.hasAnimation==null){dl.hasAnimation = 0;}; + + if(dl.hasAnimation > 0 ){return;}; + if(YUD.hasClass(dd,'a-m-d-expand')){return;}; + if( oMenuCache[ dl.id ] && oMenuCache[ dl.id ].dependent == false ){} + else{collapseAll(dl,dt,dd);} + expand(dl,dt,dd); + }; + + this.closeDtById = function(sId) + { + var dt = document.getElementById(sId); + if(!dt){return;}; + if(!YUD.hasClass(dt,'a-m-t')){return;}; + var dl = dt.parentNode; + var dd = getDD(dt); + if(dl.hasAnimation==null){dl.hasAnimation = 0;}; + if(dl.hasAnimation > 0 ){return;}; + if(!YUD.hasClass(dd,'a-m-d-expand')){return;}; + collapse(dl,dt,dd); + }; + + + this.setting = function(id,oOptions) + { + if( !oOptions ){return;}; + + if( typeof(id)!='string' ){return;}; + + var setMunu = function(dl) + { + dl = dl || this; + dl.hasAnimation = 0; + oMenuCache[ dl.id ] = + { + element:dl, + dependent:true, + onOpen:function(){}, + onClose:function(){}, + seconds:0.5, + easeOut:true, + openedIds:[], + animation:true + }; + oMenu = oMenuCache[ dl.id ] ; + + if(typeof(oOptions['animation'])=='boolean') + { + oMenu['animation'] = !!oOptions['animation']; + + }; + + + if(typeof(oOptions['dependent'])=='boolean') + { + oMenu['dependent'] = !!oOptions['dependent']; + }; + + if(typeof(oOptions['easeOut'])=='boolean') + { + oMenu['easeOut'] = !!oOptions['easeOut']; + }; + + if(typeof(oOptions['seconds'])=='number') + { + oMenu['seconds'] = Math.max(0 , oOptions['seconds'] ); + }; + + if(typeof(oOptions['onOpen'])=='function') + { + oMenu['onOpen'] = oOptions['onOpen']; + }; + + if(typeof(oOptions['onClose'])=='function') + { + oMenu['onClose'] = oOptions['onClose']; + }; + + if(oOptions['openedIds'].shift) + { + oMenu['openedIds'] = oOptions['openedIds']; + }; + + + for(var i=0;i