From 5612871d85eb71a9e462975fd37df3460c218242 Mon Sep 17 00:00:00 2001 From: Doug Bell Date: Mon, 18 Apr 2011 16:46:30 -0500 Subject: [PATCH] new, fully-javascript admin toolbars --- lib/WebGUI/Asset.pm | 105 +--------------- lib/WebGUI/Asset/File/Image.pm | 14 --- lib/WebGUI/Asset/RichEdit.pm | 16 --- lib/WebGUI/Asset/Snippet.pm | 14 --- lib/WebGUI/Asset/Wobject/Navigation.pm | 51 -------- www/extras/admin/admin.js | 159 +++++++++++++++---------- www/extras/admin/toolbar.js | 119 ++++++++++++++++++ 7 files changed, 217 insertions(+), 261 deletions(-) create mode 100644 www/extras/admin/toolbar.js diff --git a/lib/WebGUI/Asset.pm b/lib/WebGUI/Asset.pm index 027a23a83..d818b0a84 100644 --- a/lib/WebGUI/Asset.pm +++ b/lib/WebGUI/Asset.pm @@ -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 - .= '
' - . '
' - . '
'; - } - } - $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 - = '
' - . '' . $self->getName . '' - . '
' - . '
' - . '
' . $toolbar . '
'; - $self->{_toolbar} = $output; - return $output; + return sprintf '
', $self->getId; } #------------------------------------------------------------------- diff --git a/lib/WebGUI/Asset/File/Image.pm b/lib/WebGUI/Asset/File/Image.pm index e94bd685a..6f350b24a 100644 --- a/lib/WebGUI/Asset/File/Image.pm +++ b/lib/WebGUI/Asset/File/Image.pm @@ -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. diff --git a/lib/WebGUI/Asset/RichEdit.pm b/lib/WebGUI/Asset/RichEdit.pm index dd5d9c26a..011e149dd 100644 --- a/lib/WebGUI/Asset/RichEdit.pm +++ b/lib/WebGUI/Asset/RichEdit.pm @@ -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 ) diff --git a/lib/WebGUI/Asset/Snippet.pm b/lib/WebGUI/Asset/Snippet.pm index fb4f74b01..9dc81cda4 100644 --- a/lib/WebGUI/Asset/Snippet.pm +++ b/lib/WebGUI/Asset/Snippet.pm @@ -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 '

'.super().'

'; -}; - -#------------------------------------------------------------------- - =head2 indexContent ( ) Indexing the content of the snippet. See WebGUI::Asset::indexContent() for additonal details. diff --git a/lib/WebGUI/Asset/Wobject/Navigation.pm b/lib/WebGUI/Asset/Wobject/Navigation.pm index 5efdb9689..fb83edbb9 100644 --- a/lib/WebGUI/Asset/Wobject/Navigation.pm +++ b/lib/WebGUI/Asset/Wobject/Navigation.pm @@ -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 '
' - . '' . $self->getName . '' - . '
' - . '
' - . '
$toolbar
"; - } - return super(); -}; - - - #------------------------------------------------------------------- =head2 prepareView ( ) diff --git a/www/extras/admin/admin.js b/www/extras/admin/admin.js index 34aecf5d2..8d3443be6 100644 --- a/www/extras/admin/admin.js +++ b/www/extras/admin/admin.js @@ -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. diff --git a/www/extras/admin/toolbar.js b/www/extras/admin/toolbar.js new file mode 100644 index 000000000..ff8f25931 --- /dev/null +++ b/www/extras/admin/toolbar.js @@ -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" : '', + "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 ); +}; +