new, fully-javascript admin toolbars
This commit is contained in:
Doug Bell
parent
9d6fa33e16
commit
5612871d85
7 changed files with 217 additions and 261 deletions
|
|
@ -51,6 +51,41 @@ WebGUI.Admin = function(cfg){
|
|||
self.navigate( window.frames[viewframe.name].WG.currentAssetId );
|
||||
}
|
||||
} );
|
||||
this.afterNavigate.subscribe( function(){
|
||||
// Create the toolbars
|
||||
var viewframe = document.getElementById('adminViewFrame');
|
||||
var viewWin = window.frames[viewframe.name];
|
||||
// Inject some dependencies
|
||||
YAHOO.util.Get.css( [
|
||||
getWebguiProperty( 'extrasURL' ) + 'yui/build/menu/assets/skins/sam/menu.css',
|
||||
getWebguiProperty( 'extrasURL' ) + 'yui/build/button/assets/skins/sam/button.css'
|
||||
],
|
||||
{
|
||||
win : viewWin
|
||||
}
|
||||
);
|
||||
YAHOO.util.Get.script( [
|
||||
getWebguiProperty( 'extrasURL' ) + 'yui/build/yahoo-dom-event/yahoo-dom-event.js',
|
||||
getWebguiProperty( 'extrasURL' ) + 'yui/build/utilities/utilities.js',
|
||||
getWebguiProperty( 'extrasURL' ) + 'yui/build/element/element-min.js',
|
||||
getWebguiProperty( 'extrasURL' ) + 'yui/build/container/container-min.js',
|
||||
getWebguiProperty( 'extrasURL' ) + 'yui/build/animation/animation-min.js',
|
||||
getWebguiProperty( 'extrasURL' ) + 'yui/build/menu/menu-min.js',
|
||||
getWebguiProperty( 'extrasURL' ) + 'yui/build/json/json-min.js',
|
||||
getWebguiProperty( 'extrasURL' ) + 'yui/build/button/button-min.js',
|
||||
getWebguiProperty( 'extrasURL' ) + 'yui/build/selector/selector-min.js',
|
||||
getWebguiProperty( 'extrasURL' ) + 'admin/admin.js',
|
||||
getWebguiProperty( 'extrasURL' ) + 'admin/toolbar.js'
|
||||
],
|
||||
{
|
||||
win : viewWin,
|
||||
onSuccess : function(data) {
|
||||
// We have to create these menus within the correct window context
|
||||
data.win.WebGUI.Toolbar.createAll();
|
||||
}
|
||||
}
|
||||
);
|
||||
}, this );
|
||||
|
||||
// Private methods
|
||||
// Initialize these things AFTER the i18n is fetched
|
||||
|
|
@ -499,24 +534,26 @@ WebGUI.Admin.prototype.updateAssetHelpers
|
|||
var li = document.createElement('li');
|
||||
li.className = "clickable with_icon";
|
||||
li.appendChild( document.createTextNode( helper.label ) );
|
||||
this.addHelperHandler( li, helperId, helper );
|
||||
YAHOO.util.Event.on( li, "click", this.getHelperHandler( this.currentAssetId, helperId, helper ) );
|
||||
helperEl.appendChild( li );
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* addHelperHandler( elem, helperId, helper )
|
||||
* Add the click handler to activate the given helper
|
||||
* getHelperHandler( helperId, helper )
|
||||
* Get a function to handle the helper
|
||||
*/
|
||||
WebGUI.Admin.prototype.addHelperHandler
|
||||
= function ( elem, helperId, helper ) {
|
||||
var self = this;
|
||||
WebGUI.Admin.prototype.getHelperHandler
|
||||
= function ( assetId, helperId, helper ) {
|
||||
if ( helper.url ) {
|
||||
YAHOO.util.Event.on( elem, "click", function(){ self.gotoAsset( helper.url ) }, self, true );
|
||||
}
|
||||
else {
|
||||
YAHOO.util.Event.on( elem, "click", function(){ self.requestHelper( helperId, self.currentAssetId ) }, self, true );
|
||||
return bind( this, function(){
|
||||
this.gotoAsset( helper.url )
|
||||
} );
|
||||
}
|
||||
|
||||
return bind( this, function(){
|
||||
this.requestHelper( helperId, assetId )
|
||||
} );
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
@ -886,6 +923,54 @@ WebGUI.Admin.prototype.updateTabLabel
|
|||
tab.set( 'label', title );
|
||||
};
|
||||
|
||||
/**
|
||||
* getHelperMenuItems( assetId, helpers )
|
||||
* Get the items to create a menu for the given helpers
|
||||
*/
|
||||
WebGUI.Admin.prototype.getHelperMenuItems
|
||||
= function ( assetId, helpers ) {
|
||||
var items = [];
|
||||
|
||||
// Add all the items with appropriate onclick handlers
|
||||
for ( var i in helpers ) {
|
||||
var helper = helpers[i];
|
||||
var item = {
|
||||
onclick : {
|
||||
fn : this.getHelperHandler( assetId, i, helper ),
|
||||
scope : this
|
||||
},
|
||||
text : helper["label"],
|
||||
icon : helper["icon"]
|
||||
};
|
||||
items.push( item );
|
||||
}
|
||||
|
||||
return items;
|
||||
};
|
||||
|
||||
/**
|
||||
* showHelperMenu( elem, assetId, helpers )
|
||||
* Show a pop-up Helper menu for the given assetId with the given helpers
|
||||
*/
|
||||
WebGUI.Admin.prototype.showHelperMenu
|
||||
= function ( elem, assetId, helpers ) {
|
||||
if ( this.helperMenu ) {
|
||||
// destroy the old helper menu!
|
||||
this.helperMenu.destroy();
|
||||
}
|
||||
var helperMenu = new YAHOO.widget.Menu( document.createElement('div'), {
|
||||
position : "dynamic",
|
||||
clicktohide : true,
|
||||
constraintoviewport : true,
|
||||
items : this.getHelperMenuItems( assetId, helpers ),
|
||||
context : [ elem, 'tl', 'bl' ],
|
||||
effect: { effect: YAHOO.widget.ContainerEffect.FADE, duration:0.25 }
|
||||
} );
|
||||
this.helperMenu.render( document.body );
|
||||
this.helperMenu.show();
|
||||
this.helperMenu.focus();
|
||||
};
|
||||
|
||||
/****************************************************************************
|
||||
* WebGUI.Admin.LocationBar
|
||||
*/
|
||||
|
|
@ -1370,60 +1455,6 @@ WebGUI.Admin.AssetTable.prototype.addMenuOpenHandler
|
|||
} );
|
||||
};
|
||||
|
||||
/**
|
||||
* showHelperMenu( elem, assetId, helpers )
|
||||
* Show the Helper menu for the given assetId with the given helpers
|
||||
*/
|
||||
WebGUI.Admin.AssetTable.prototype.showHelperMenu
|
||||
= function ( elem, assetId, helpers ) {
|
||||
if ( this.helperMenu ) {
|
||||
// destroy the old helper menu!
|
||||
this.helperMenu.destroy();
|
||||
}
|
||||
this.helperMenu = new YAHOO.widget.Menu( document.createElement('div'), {
|
||||
position : "dynamic",
|
||||
clicktohide : true,
|
||||
constraintoviewport : true,
|
||||
context : [ elem, 'tl', 'bl' ],
|
||||
effect: { effect: YAHOO.widget.ContainerEffect.FADE, duration:0.25 }
|
||||
} );
|
||||
|
||||
// Add all the items with appropriate onclick handlers
|
||||
for ( var i = 0; i < helpers.length; i++ ) {
|
||||
var helper = helpers[i];
|
||||
var item = {
|
||||
text : helper["label"],
|
||||
icon : helper["icon"],
|
||||
onclick : {
|
||||
fn : this.clickHelper,
|
||||
obj : [ assetId, helper ],
|
||||
scope : this
|
||||
}
|
||||
};
|
||||
this.helperMenu.addItem( item );
|
||||
}
|
||||
|
||||
this.helperMenu.render( document.body );
|
||||
this.helperMenu.show();
|
||||
this.helperMenu.focus();
|
||||
};
|
||||
|
||||
/**
|
||||
* clickHelper( type, event, args, menuItem )
|
||||
* Request the helper. args is an array of [ assetId, helperData ]
|
||||
*/
|
||||
WebGUI.Admin.AssetTable.prototype.clickHelper
|
||||
= function ( type, e, args, menuItem ) {
|
||||
var assetId = args[0];
|
||||
var helper = args[1];
|
||||
if ( helper.url ) {
|
||||
this.admin.showView( helper.url );
|
||||
}
|
||||
else if ( helper['class'] ) {
|
||||
this.admin.requestHelper( helper['class'], assetId );
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* formatAssetIdCheckbox ( )
|
||||
* Format the checkbox for the asset ID.
|
||||
|
|
|
|||
119
www/extras/admin/toolbar.js
Normal file
119
www/extras/admin/toolbar.js
Normal file
|
|
@ -0,0 +1,119 @@
|
|||
|
||||
/**
|
||||
* WebGUI.Toolbar - the asset toolbars
|
||||
*/
|
||||
|
||||
bind = function ( scope, func ) {
|
||||
return function() { func.apply( scope, arguments ) }
|
||||
};
|
||||
|
||||
if ( typeof WebGUI == "undefined" ) {
|
||||
WebGUI = {};
|
||||
}
|
||||
|
||||
/**
|
||||
* WebGUI.Toolbar( assetId, cfg )
|
||||
* Create a toolbar for the given asset ID.
|
||||
* cfg is an option of configuration values:
|
||||
* parent : The parent element, can be an ID or an element
|
||||
* assetData : The data containing the asset's URL and helpers
|
||||
*/
|
||||
WebGUI.Toolbar = function( assetId, cfg ) {
|
||||
this.assetId = assetId;
|
||||
this.cfg = cfg;
|
||||
this.container = document.createElement('span');
|
||||
};
|
||||
|
||||
/**
|
||||
* WebGUI.Toolbar.createAll( )
|
||||
* Create all the toolbars from placeholders found in the current document
|
||||
*/
|
||||
WebGUI.Toolbar.createAll = function( ) {
|
||||
var holders = YAHOO.util.Selector.query( '.wg-admin-toolbar' );
|
||||
for ( var i = 0; i < holders.length; i++ ) {
|
||||
var holder = holders[i];
|
||||
var assetId = holder.id.match( /wg-admin-toolbar-(.+)/ )[1];
|
||||
var toolbar = new WebGUI.Toolbar( assetId, { "parent" : holder } );
|
||||
toolbar.getAssetData( assetId, bind( toolbar, toolbar.render ) );
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* getAssetData( assetId, callback )
|
||||
* Get the data for an asset.
|
||||
*/
|
||||
WebGUI.Toolbar.prototype.getAssetData
|
||||
= function ( assetId, callback ) {
|
||||
var connectCallback = {
|
||||
success : function (o) {
|
||||
var assetDef = YAHOO.lang.JSON.parse( o.responseText );
|
||||
this.cfg.assetData = assetDef;
|
||||
callback.call( this );
|
||||
},
|
||||
failure : function (o) {
|
||||
|
||||
},
|
||||
scope: this
|
||||
};
|
||||
|
||||
var url = '?op=admin;method=getAssetData;assetId=' + assetId;
|
||||
var ajax = YAHOO.util.Connect.asyncRequest( 'GET', url, connectCallback );
|
||||
};
|
||||
|
||||
/**
|
||||
* render( [parent] )
|
||||
* Render the toolbar on the given parent. If parent is not specified,
|
||||
* will use the parent from the configuration. If that is not specified, we
|
||||
* got problems.
|
||||
*
|
||||
* This should be called only AFTER the asset data has been populated. Otherwise
|
||||
* I cannot be held responsible for what happens to the universe.
|
||||
*/
|
||||
WebGUI.Toolbar.prototype.render
|
||||
= function ( parent ) {
|
||||
parent = parent ? parent : this.cfg.parent;
|
||||
if ( typeof parent == "string" ) {
|
||||
parent = document.getElementById( parent );
|
||||
}
|
||||
|
||||
var assetData = this.cfg.assetData;
|
||||
|
||||
// Create the buttons in our container
|
||||
// Menu button
|
||||
YAHOO.util.Dom.addClass( document.body, 'yui-skin-sam' );
|
||||
|
||||
var menu = new YAHOO.widget.Menu( document.createElement('div'), {
|
||||
clicktohide : true,
|
||||
constraintoviewport : true,
|
||||
effect: { effect: YAHOO.widget.ContainerEffect.FADE, duration:0.25 }
|
||||
});
|
||||
var items = window.parent.admin.getHelperMenuItems( this.assetId, assetData.helpers );
|
||||
menu.addItems( items );
|
||||
menu.render( document.body );
|
||||
|
||||
var menuButton = new YAHOO.widget.Button({
|
||||
"container" : this.container,
|
||||
"type" : "menu",
|
||||
"label" : '<img src="' + assetData.icon + '" style="border:none; position: relative; top: 2px; height: 14px" />',
|
||||
"menu" : menu
|
||||
});
|
||||
|
||||
// Edit button
|
||||
var editButton = new YAHOO.widget.Button({
|
||||
"container" : this.container,
|
||||
label : assetData.helpers["edit"].label
|
||||
});
|
||||
|
||||
// Add the container to our parent
|
||||
parent.appendChild( this.container );
|
||||
};
|
||||
|
||||
/**
|
||||
* destroy()
|
||||
* Destroy this toolbar
|
||||
*/
|
||||
WebGUI.Toolbar.prototype.destroy
|
||||
= function () {
|
||||
this.container.parentNode.removeChild( this.container );
|
||||
};
|
||||
|
||||
Loading…
Add table
Add a link
Reference in a new issue