new admin accordion
This commit is contained in:
Doug Bell
parent
4d9144989c
commit
aee59f22ea
3 changed files with 207 additions and 22 deletions
|
|
@ -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__
|
||||
<dl class="accordion-menu">
|
||||
<dt class="a-m-t">^International("admin console","AdminConsole");</dt>
|
||||
<dl id="adminBar" class="accordion-menu">
|
||||
<dt id="adminConsole" class="a-m-t">^International("admin console","AdminConsole");</dt>
|
||||
<dd class="a-m-d"><div class="bd">
|
||||
<TMPL_LOOP adminPlugins>
|
||||
<a class="link" target="view" href="<tmpl_var url>">
|
||||
|
|
@ -334,15 +333,15 @@ __DATA__
|
|||
</TMPL_LOOP>
|
||||
</div></dd>
|
||||
<!-- placeholder for version tags -->
|
||||
<dt class="a-m-t">Version Tags (i18n)</dt>
|
||||
<dt id="versionTags" class="a-m-t">Version Tags (i18n)</dt>
|
||||
<dd class="a-m-d"><div class="bd">
|
||||
</div></dd>
|
||||
<!-- placeholder for clipboard -->
|
||||
<dt class="a-m-t">Clipboard (i18n)</dt>
|
||||
<dt id="clipboard" class="a-m-t">Clipboard (i18n)</dt>
|
||||
<dd class="a-m-d"><div class="bd">
|
||||
</div></dd>
|
||||
<!-- placeholder for asset helpers -->
|
||||
<dt class="a-m-t">Asset Helpers (i18n)</dt>
|
||||
<dt id="assetHelpers" class="a-m-t">Asset Helpers (i18n)</dt>
|
||||
<dd class="a-m-d"><div class="bd">
|
||||
<h1 id="helper_asset_name">Asset</h1>
|
||||
<ul id="helper_list">
|
||||
|
|
@ -352,22 +351,35 @@ __DATA__
|
|||
</ul>
|
||||
</div></dd>
|
||||
<!-- placeholder for new content menu -->
|
||||
<dt class="a-m-t">New Content (i18n)</dt>
|
||||
<dd class="a-m-d"><div class="bd">
|
||||
<dt id="newContent" class="a-m-t">New Content (i18n)</dt>
|
||||
<dd class="a-m-d"><div class="bd" style="margin: 0; padding: 0">
|
||||
<dl id="newContentBar" class="accordion-menu" style="height: 500px">
|
||||
<dt class="a-m-t" id="newOne">One</dt>
|
||||
<dd class="a-m-d"><div class="bd">
|
||||
<p>One</p>
|
||||
</div></dd>
|
||||
<dt class="a-m-t" id="newTwo">Two</dt>
|
||||
<dd class="a-m-d"><div class="bd">
|
||||
<p>Two</p>
|
||||
</div></dd>
|
||||
</dl>
|
||||
</div></dd>
|
||||
</dl>
|
||||
|
||||
<div id="wrapper" class="yui-skin-sam">
|
||||
|
||||
<div id="versionTag" <TMPL_UNLESS tagName>style="display: none"</TMPL_UNLESS> >
|
||||
<div style="float: right">Publish | Leave</div>
|
||||
<a href="<tmpl_var tagEditUrl>" id="tagEditLink" target="view">
|
||||
<img src="^Extras(icon/tag_blue.png);" class="icon"/>
|
||||
<tmpl_var tagName>
|
||||
</a>
|
||||
<div id="versionTag" style="display: none">
|
||||
<div style="float: right">
|
||||
<span class="action" id="publishTag">Publish</span>
|
||||
| <span class="action" id="leaveTag">Leave</span>
|
||||
</div>
|
||||
<a href="#" id="editTag" target="view" style="background-image: ^Extras(icon/tag_blue.png);;"></a>
|
||||
</div>
|
||||
<div id="user">
|
||||
<div style="float: right">Back to Site | Log Out</div>
|
||||
<div style="float: right">
|
||||
<a href="<tmpl_var homeUrl>">Back to Site</a>
|
||||
| <a href="<tmpl_var logoutUrl>">Log Out</a>
|
||||
</div>
|
||||
<a href="<tmpl_var userEditUrl>" target="view">
|
||||
<img src="^Extras(icon/user.png);" class="icon" />
|
||||
<tmpl_var userName>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
};
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue