oqapi/webgui
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

new, fully-javascript admin toolbars

Browse source
This commit is contained in:
Doug Bell 2011-04-18 16:46:30 -05:00
parent 9d6fa33e16
commit 5612871d85
7 changed files with 217 additions and 261 deletions
Download patch file Download diff file Expand all files Collapse all files

105
lib/WebGUI/Asset.pm
View file

@ -1617,113 +1617,14 @@ sub getTitle {
=head2 getToolbar ( )
Returns a toolbar with a set of icons that hyperlink to functions that delete, edit, promote, demote, cut, and copy.
Returns a toolbar placeholder, which can be filled in using the toolbar.js, located
in www/extras/admin/toolbar.js
=cut
sub getToolbar {
my $self = shift;
return undef unless $self->canEdit && $self->session->isAdminOn;
return $self->{_toolbar}
if (exists $self->{_toolbar});
my $userUiLevel = $self->session->user->get("uiLevel");
my $uiLevels = $self->session->config->get("assetToolbarUiLevel");
my $i18n = WebGUI::International->new($self->session, "Asset");
my $toolbar = "";
my $commit;
if ($self->canEditIfLocked) {
$toolbar .= $self->session->icon->delete('func=delete',$self->get("url"),$i18n->get(43))
if ($userUiLevel >= $uiLevels->{"delete"});
$toolbar .= $self->session->icon->edit('func=edit',$self->get("url"))
if ($userUiLevel >= $uiLevels->{"edit"});
}
else {
$toolbar .= $self->session->icon->locked('func=manageRevisions',$self->get("url"))
if ($userUiLevel >= $uiLevels->{"revisions"});
}
$toolbar .= $self->session->icon->cut('func=cut',$self->get("url"))
if ($userUiLevel >= $uiLevels->{"cut"});
if ($userUiLevel >= $uiLevels->{"copy"}) {
$toolbar .= $self->session->icon->copy('func=copy',$self->get("url"));
# if this asset has children, create a more full-featured menu for copying
if ($self->getChildCount) {
$toolbar
.= '<div class="yuimenu wg-contextmenu">'
. '<div class="bd">'
. '<ul class="first-of-type">'
. '<li class="yuimenuitem"><a class="yuimenuitemlabel" href="'
. $self->getUrl("func=copy") . '">' . $i18n->get("this asset only") . '</a></li>'
. '<li class="yuimenuitem"><a class="yuimenuitemlabel" href="'
. $self->getUrl("func=copy;with=children") . '">' . $i18n->get("with children") . '</a></li>'
. '<li class="yuimenuitem"><a class="yuimenuitemlabel" href="'
. $self->getUrl("func=copy;with=descendants") . '">' . $i18n->get("with descendants") . '</a></li>'
. '</ul></div></div>';
}
}
$toolbar .= $self->session->icon->shortcut('func=createShortcut',$self->get("url"))
if ($userUiLevel >= $uiLevels->{"shortcut"} && !$self->isa('WebGUI::Asset::Shortcut'));
$self->session->style->setCss($self->session->url->extras('assetToolbar/assetToolbar.css'));
$self->session->style->setCss($self->session->url->extras('yui/build/menu/assets/skins/sam/menu.css'));
$self->session->style->setScript($self->session->url->extras('yui/build/yahoo-dom-event/yahoo-dom-event.js'));
$self->session->style->setScript($self->session->url->extras('yui/build/container/container_core-min.js'));
$self->session->style->setScript($self->session->url->extras('yui/build/menu/menu-min.js'));
$self->session->style->setScript($self->session->url->extras('assetToolbar/assetToolbar.js'));
my $output
= '<div class="yui-skin-sam wg-toolbar">'
. '<img src="' . $self->getIcon(1) . '" title="' . $self->getName . '" alt="' . $self->getName . '" class="wg-toolbar-icon" />'
. '<div class="yuimenu wg-contextmenu">'
. '<div class="bd">'
. '<ul class="first-of-type">';
if ($userUiLevel >= $uiLevels->{"changeUrl"}) {
$output
.= '<li class="yuimenuitem"><a class="yuimenuitemlabel" href="'
. $self->getUrl("func=changeUrl") . '">' . $i18n->get("change url") . '</a></li>';
}
if ($userUiLevel >= $uiLevels->{"editBranch"}) {
$output
.= '<li class="yuimenuitem"><a class="yuimenuitemlabel" href="'
. $self->getUrl("func=editBranch") . '">' . $i18n->get("edit branch") . '</a></li>';
}
if ($userUiLevel >= $uiLevels->{"revisions"}) {
$output
.= '<li class="yuimenuitem"><a class="yuimenuitemlabel" href="'
. $self->getUrl("func=manageRevisions") . '">' . $i18n->get("revisions") . '</a></li>';
}
if ($userUiLevel >= $uiLevels->{"view"}) {
$output
.= '<li class="yuimenuitem"><a class="yuimenuitemlabel" href="'
. $self->getUrl . '">' . $i18n->get("view") . '</a></li>';
}
if ($userUiLevel >= $uiLevels->{"lock"} && !$self->isLocked) {
$output
.= '<li class="yuimenuitem"><a class="yuimenuitemlabel" href="'
. $self->getUrl('func=lock') . '">' . $i18n->get("lock") . '</a></li>';
}
if ($userUiLevel >= $uiLevels->{"export"} && $self->session->config->get("exportPath")) {
$output
.= '<li class="yuimenuitem"><a class="yuimenuitemlabel" href="'
. $self->getUrl('func=export') . '">' . $i18n->get('Export','Icon') . '</a></li>';
}
if ($userUiLevel >= $uiLevels->{"promote"}) {
$output
.= '<li class="yuimenuitem"><a class="yuimenuitemlabel" href="'
. $self->getUrl("func=promote") . '">' . $i18n->get("promote") . '</a></li>';
}
if ($userUiLevel >= $uiLevels->{"demote"}) {
$output
.= '<li class="yuimenuitem"><a class="yuimenuitemlabel" href="'
. $self->getUrl("func=demote") . '">' . $i18n->get("demote") . '</a></li>';
}
if ($userUiLevel >= $uiLevels->{"manage"}) {
$output
.= '<li class="yuimenuitem"><a class="yuimenuitemlabel" href="'
. $self->getManagerUrl . '">' . $i18n->get("manage") . '</a></li>';
}
$output .= '</ul></div></div>' . $toolbar . '</div>';
$self->{_toolbar} = $output;
return $output;
return sprintf '<div class="wg-admin-toolbar yui-skin-sam" id="wg-admin-toolbar-%s"></div>', $self->getId;
}
#-------------------------------------------------------------------

14
lib/WebGUI/Asset/File/Image.pm
View file

@ -216,20 +216,6 @@ sub getThumbnailUrl {
#-------------------------------------------------------------------
=head2 getToolbar ( )
Returns a toolbar with a set of icons that hyperlink to functions that delete, edit, promote, demote, cut, and copy.
=cut
override getToolbar => sub {
my $self = shift;
return undef if ($self->getToolbarState);
return super();
};
#-------------------------------------------------------------------
=head2 view
Renders this asset.

16
lib/WebGUI/Asset/RichEdit.pm
View file

@ -352,22 +352,6 @@ my $sql = "select asset.assetId, assetData.revisionDate from RichEdit left join
return \%richEditors;
}
#-------------------------------------------------------------------
=head2 getToolbar ( )
Returns a toolbar with a set of icons that hyperlink to functions that delete, edit, promote, demote, cut, and copy.
=cut
override getToolbar => sub {
my $self = shift;
return undef if ($self->getToolbarState);
return super();
};
#-------------------------------------------------------------------
=head2 getRichEditor ( $nameId )

14
lib/WebGUI/Asset/Snippet.pm
View file

@ -174,20 +174,6 @@ sub exportGetUrlAsPath {
#-------------------------------------------------------------------
=head2 getToolbar ( )
Returns a toolbar with a set of icons that hyperlink to functions that delete, edit, promote, demote, cut, and copy.
=cut
override getToolbar => sub {
my $self = shift;
return undef if ($self->getToolbarState);
return '<p>'.super().'</p>';
};
#-------------------------------------------------------------------
=head2 indexContent ( )
Indexing the content of the snippet. See WebGUI::Asset::indexContent() for additonal details.

51
lib/WebGUI/Asset/Wobject/Navigation.pm
View file

@ -293,57 +293,6 @@ override getEditForm => sub {
return $fb;
};
#-------------------------------------------------------------------
=head2 getToolbar ( )
Returns a toolbar with a set of icons that hyperlink to functions that delete, edit, promote, demote, cut, and copy.
=cut
override getToolbar => sub {
my $self = shift;
return undef
unless $self->canEdit && $self->session->isAdminOn;
if ($self->getToolbarState) {
my $toolbar = '';
if ($self->canEditIfLocked) {
my $userUiLevel = $self->session->user->get("uiLevel");
my $uiLevels = $self->session->config->get("assetToolbarUiLevel");
my $returnUrl = '';
if ($self->session->asset) {
$returnUrl = ";proceed=goBackToPage;returnUrl=".$self->session->url->escape($self->session->asset->getUrl);
}
$toolbar = $self->session->icon->edit('func=edit'.$returnUrl,$self->url)
if ($userUiLevel >= $uiLevels->{"edit"});
}
$self->session->style->setCss($self->session->url->extras('assetToolbar/assetToolbar.css'));
$self->session->style->setCss($self->session->url->extras('yui/build/menu/assets/skins/sam/menu.css'));
$self->session->style->setScript($self->session->url->extras('yui/build/yahoo-dom-event/yahoo-dom-event.js'));
$self->session->style->setScript($self->session->url->extras('yui/build/container/container_core-min.js'));
$self->session->style->setScript($self->session->url->extras('yui/build/menu/menu-min.js'));
$self->session->style->setScript($self->session->url->extras('assetToolbar/assetToolbar.js'));
my $i18n = WebGUI::International->new($self->session, "Asset");
return '<div class="yui-skin-sam wg-toolbar">'
. '<img src="' . $self->getIcon(1) . '" title="' . $self->getName . '" alt="' . $self->getName . '" class="wg-toolbar-icon" />'
. '<div class="yuimenu wg-contextmenu">'
. '<div class="bd">'
. '<ul class="first-of-type">'
. '<li class="yuimenuitem"><a class="yuimenuitemlabel" href="'
. $self->getUrl("func=copy") . '">' . $i18n->get("Copy") . '</a></li>'
. '<li class="yuimenuitem"><a class="yuimenuitemlabel" href="'
. $self->getUrl("op=assetManager") . '">' . $i18n->get("manage") . '</a></li>'
. '<li class="yuimenuitem"><a class="yuimenuitemlabel" href="'
. $self->getUrl . '">' . $i18n->get("view") . '</a></li>'
. "</ul></div></div>$toolbar</div>";
}
return super();
};
#-------------------------------------------------------------------
=head2 prepareView ( )

159
www/extras/admin/admin.js
View file

@ -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
View 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 );
};