From aee59f22eaf73e1216e3d5e30c3b5c49edb18141 Mon Sep 17 00:00:00 2001 From: Doug Bell Date: Wed, 14 Jul 2010 13:59:52 -0500 Subject: [PATCH] new admin accordion --- lib/WebGUI/Admin.pm | 46 ++++--- www/extras/admin/admin.js | 168 +++++++++++++++++++++++ www/extras/macro/AdminBar/slidePanel.css | 15 +- 3 files changed, 207 insertions(+), 22 deletions(-) diff --git a/lib/WebGUI/Admin.pm b/lib/WebGUI/Admin.pm index 2e4ea1c6d..2800ba73f 100644 --- a/lib/WebGUI/Admin.pm +++ b/lib/WebGUI/Admin.pm @@ -297,19 +297,18 @@ sub www_view { $style->setLink( $url->extras('admin/admin.css'), { type=>'text/css', rel=>'stylesheet'} ); $style->setScript($url->extras('yui/build/yahoo-dom-event/yahoo-dom-event.js')); $style->setScript($url->extras('yui/build/utilities/utilities.js')); - $style->setScript($url->extras('accordion/accordion.js')); - $style->setScript($url->extras('admin/admin.js')); $style->setScript($url->extras('yui/build/element/element-min.js')); $style->setScript( $url->extras( 'yui/build/paginator/paginator-min.js ' ) ); + $style->setScript($url->extras('yui/build/animation/animation-min.js')); $style->setScript( $url->extras( 'yui/build/datasource/datasource-min.js ' ) ); $style->setScript( $url->extras( 'yui/build/datatable/datatable-min.js ' ) ); $style->setScript( $url->extras( 'yui/build/container/container-min.js' ) ); $style->setScript($url->extras('yui/build/tabview/tabview-min.js')); $style->setScript($url->extras('yui/build/menu/menu-min.js')); $style->setScript($url->extras('yui/build/button/button-min.js')); - $style->setScript( $url->extras( 'yui/build/json/json-min.js' ) ); $style->setScript( $url->extras( 'yui-webgui/build/i18n/i18n.js' ) ); + $style->setScript($url->extras('admin/admin.js')); # Use the template in our __DATA__ block my $tmpl = WebGUI::Asset::Template::HTMLTemplate->new( $session ); @@ -323,8 +322,8 @@ sub www_view { 1; __DATA__ -
-
^International("admin console","AdminConsole");
+
+
^International("admin console","AdminConsole");
@@ -334,15 +333,15 @@ __DATA__
-
Version Tags (i18n)
+
Version Tags (i18n)
-
Clipboard (i18n)
+
Clipboard (i18n)
-
Asset Helpers (i18n)
+
Asset Helpers (i18n)

Asset

    @@ -352,22 +351,35 @@ __DATA__
-
New Content (i18n)
-
+
New Content (i18n)
+
+
+
One
+
+

One

+
+
Two
+
+

Two

+
+
-
style="display: none" > -
Publish | Leave
- - - - +
-
Back to Site | Log Out
+ diff --git a/www/extras/admin/admin.js b/www/extras/admin/admin.js index 32fda07cb..08ef843ef 100644 --- a/www/extras/admin/admin.js +++ b/www/extras/admin/admin.js @@ -21,11 +21,17 @@ WebGUI.Admin = function(cfg){ if ( !this.cfg.tabBarId ) { this.cfg.tabBarId = "tabBar"; } + if ( !this.cfg.adminBarId ) { + this.cfg.adminBarId = "adminBar"; + } // Private methods var self = this; // Initialize these things AFTER the i18n is fetched var _init = function () { + self.adminBar = new WebGUI.Admin.AdminBar( self.cfg.adminBarId ); + YAHOO.util.Event.on( window, 'load', function(){ self.adminBar.show( self.adminBar.dt[0].id ) } ); + self.newContentBar = new WebGUI.Admin.AdminBar( "newContentBar" ); self.locationBar = new WebGUI.Admin.LocationBar( self.cfg.locationBarId ); self.tree = new WebGUI.Admin.Tree(); self.tabBar = new YAHOO.widget.TabView( self.cfg.tabBarId ); @@ -930,4 +936,166 @@ WebGUI.Admin.Tree.prototype.toggleRow = function ( child ) { } }; +/**************************************************************************** + * WebGUI.Admin.AdminBar( id ) + * Initialize an adminBar with the given ID. + */ +WebGUI.Admin.AdminBar += function ( id ) { + this.id = id; + this.animDuration = 0.25; + this.dl = document.getElementById( id ); + this.dt = []; + this.dd = []; + + // Get all the DT and DD + // -- Using childNodes so we can nest another accordion inside + for ( var i = 0; i < this.dl.childNodes.length; i++ ) { + var node = this.dl.childNodes[i]; + if ( node.nodeName == "DT" ) { + this.dt.push( node ); + } + else if ( node.nodeName == "DD" ) { + this.dd.push( node ); + } + } + + // Add click handlers to DT to open corresponding DD + this.dtById = {}; + this.ddById = {}; + for ( var i = 0; i < this.dt.length; i++ ) { + var dt = this.dt[i]; + var dd = this.dd[i]; + + // Make sure dd is hidden + dd.style.display = "none"; + + // Save references by ID + this.dtById[ dt.id ] = dt; + this.ddById[ dt.id ] = dd; + + this.addClickHandler( dt, dd ); + } + + // Precalculate dtHeight and maxHeight + this.dtHeight = this.getRealHeight( this.dt[0] ) * this.dt.length; + this.maxHeight = YAHOO.util.Dom.getViewportHeight() - this.dtHeight; +}; + +WebGUI.Admin.AdminBar.prototype.addClickHandler += function ( dt, dd ) { + var self = this; + YAHOO.util.Event.on( dt, "click", function(){ self.show.call( self, dt.id ) } ); +}; + +/** + * getAnim( elem ) + * Get an Animation object for the given element to use for the transition. + */ +WebGUI.Admin.AdminBar.prototype.getAnim += function ( elem ) { + var anim = new YAHOO.util.Anim( elem ); + anim.duration = this.animDuration; + anim.method = YAHOO.util.Easing.easeOut; + return anim; +}; + +/** + * getExpandHeight( elem ) + * Get the height to expand the element to. + */ +WebGUI.Admin.AdminBar.prototype.getExpandHeight += function ( elem ) { + var height = this.getRealHeight( elem ); + + // Make sure not more than maxHeight + if ( height > this.maxHeight ) { + return this.maxHeight; + } + return height; +}; + +/** + * getRealHeight( elem ) + * Get the real height of the given element. + */ +WebGUI.Admin.AdminBar.prototype.getRealHeight += function ( elem ) { + var D = YAHOO.util.Dom; + var clipped = false; + // We don't want 0 height! + if ( parseInt( elem.style.height ) == 0 ) { + elem.style.display = "none"; + elem.style.height = "" + } + if (elem.style.display == 'none') { + clipped = true; + var _pos = D.getStyle(elem, 'position'); + var _vis = D.getStyle(elem, 'visiblity'); + D.setStyle(elem, 'position', 'absolute'); + D.setStyle(elem, 'visiblity', 'hidden'); + D.setStyle(elem, 'display', 'block'); + } + var height = elem.offsetHeight; + if (height == 'auto') { + //This is IE, let's fool it + D.setStyle(elem, 'zoom', '1'); + height = elem.clientHeight; + } + if (clipped) { + D.setStyle(elem, 'display', 'none'); + D.setStyle(elem, 'visiblity', _vis); + D.setStyle(elem, 'position', _pos); + } + //Strip the px from the style + return parseInt(height); + +}; + +/** + * show( id ) + * Show the pane with the given ID. The ID is from the DT element. + */ +WebGUI.Admin.AdminBar.prototype.show += function ( id ) { + if ( this.currentId ) { + // Close the current + var old = this.ddById[ this.currentId ]; + var oldHeight = this.getExpandHeight( old ); + if ( !old.anim ) { + old.anim = this.getAnim(this.current); + } + var hideContent = function() { + // Hide old and restore height for next open + old.style.display = "none"; + old.style.height = oldHeight + 'px'; + old.anim.onComplete.unsubscribe( hideContent ); + }; + old.anim.onComplete.subscribe( hideContent, this, true ); + old.anim.attributes.height = { to : 0 }; + old.anim.animate(); + + // Let user close by clicking again + if ( this.currentId == id ) { + this.currentId = null; + return; + } + } + + var dd = this.ddById[ id ]; + + if ( !dd.anim ) { + dd.anim = this.getAnim(dd); + } + dd.anim.attributes.height = { from: 0, to : this.getExpandHeight( dd ) }; + dd.style.height = "0px"; + dd.style.display = "block"; + dd.anim.animate(); + this.currentId = id; + + // TODO: If we're nested inside another accordion-menu, fix + // the parent's height as we fix our own to avoid having to set + // explicit height on parent +}; + diff --git a/www/extras/macro/AdminBar/slidePanel.css b/www/extras/macro/AdminBar/slidePanel.css index 9279bd996..fd39c5dcc 100644 --- a/www/extras/macro/AdminBar/slidePanel.css +++ b/www/extras/macro/AdminBar/slidePanel.css @@ -9,10 +9,12 @@ dl.accordion-menu dd.a-m-d div.ncmct { } dl.accordion-menu { - margin: 0; - padding: 0; - width: 160px; - background: #eeeeee; + margin: 0; + padding: 0; + background: #eeeeee; +} + +dl#adminBar { position:fixed; _position:absolute; top:0; @@ -21,6 +23,7 @@ dl.accordion-menu { _top:expression(eval((document.documentElement && document.documentElement.scrollTop) ? document.documentElement.scrollTop : document.body.scrollTop)); */ left:0; z-index: 100; + width: 160px; } dl.accordion-menu dt.a-m-t { @@ -155,7 +158,9 @@ html.accordion-menu-js dd.a-m-d-anim { } - +dl.accordion-menu dl.accordion-menu dt.a-m-t { + background: #aaa; +}