From 349703173ecca3dde6079fc87ec12d2c96c28ac1 Mon Sep 17 00:00:00 2001 From: JT Smith Date: Fri, 21 Jan 2005 19:17:50 +0000 Subject: [PATCH] asset manager fixes --- lib/WebGUI/Asset.pm | 7 +- www/extras/assetManager/Asset.js | 112 +++++++++++++++--- www/extras/assetManager/AssetManager.js | 130 ++++++++++++++------- www/extras/assetManager/ContextMenu.js | 13 ++- www/extras/assetManager/CrumbTrailAsset.js | 6 +- www/extras/assetManager/EventManager.js | 20 ++-- www/extras/assetManager/ManageClipboard.js | 4 + www/extras/assetManager/ManageTrash.js | 11 +- 8 files changed, 215 insertions(+), 88 deletions(-) diff --git a/lib/WebGUI/Asset.pm b/lib/WebGUI/Asset.pm index 5645bed87..d4f3da71c 100644 --- a/lib/WebGUI/Asset.pm +++ b/lib/WebGUI/Asset.pm @@ -714,6 +714,7 @@ sub getAssetManagerControl { my $self = shift; my $children = shift; my $controlType = shift; + my $removeRank = shift; WebGUI::Style::setLink($session{config}{extrasURL}.'/assetManager/assetManager.css', {rel=>"stylesheet",type=>"text/css"}); WebGUI::Style::setScript($session{config}{extrasURL}.'/assetManager/Tools.js', {type=>"text/javascript"}); WebGUI::Style::setScript($session{config}{extrasURL}.'/assetManager/ContextMenu.js', {type=>"text/javascript"}); @@ -768,7 +769,9 @@ sub getAssetManagerControl { $output .= "labels['editTree'] = 'Edit Tree';\n"; $output .= "var manager = new AssetManager(assets,columnHeadings,labels,crumbtrail);\n"; $output .= "manager.assetType='".$controlType."';\n" if (defined $controlType); - $output .= "manager.renderAssets();\n\n"; + $output .= "manager.disableDisplay(0);\n" if (defined $removeRank); + $output .= "manager.renderAssets();\n"; + $output .= "\n"; return $output; } @@ -2884,7 +2887,7 @@ sub www_manageTrash { foreach my $assetData (@{$self->getAssetsInTrash($limit)}) { push(@assets,WebGUI::Asset->newByDynamicClass($assetData->{assetId},$assetData->{className})); } - return $ac->render($self->getAssetManagerControl(\@assets,"ManageTrash"), $header); + return $ac->render($self->getAssetManagerControl(\@assets,"ManageTrash",1), $header); } diff --git a/www/extras/assetManager/Asset.js b/www/extras/assetManager/Asset.js index 6d01726cd..6a6b4d940 100644 --- a/www/extras/assetManager/Asset.js +++ b/www/extras/assetManager/Asset.js @@ -2,6 +2,42 @@ //--------Constructor-------------------- //Creates a new asset object. +/*********************Configuring Assets********************** + +To create a new asset, the Asset object must be extended. +The following example creates an asset with the same properties and methods as the Asset object. + +function MyNewAsset() { + var asset = new Asset(); return asset; +} +To change the new asset object, properties and methods can be added or overriden + +The following example overrides the getContextMenu method, adds a new retore method, and sets the dragEnabled property to false + +function MyNewAsset) { + var asset = new Asset(); asset.dragEnabled = false; + asset.getContextMenu = function () { + var arr = new Array(); arr[arr.length] = new ContextMenuItem(this.labels["cut"],"javascript:" + this.evalReference() + ".cut()"); + arr[arr.length] = new ContextMenuItem("",""); + arr[arr.length] = new ContextMenuItem(this.labels["purge"],"javascript:" + this.evalReference() + ".purge()"); + return arr; } asset.restore = function() { + location.href = this.parent.getWrappedURL() + "func=postList" + AssetManager_getManager().getSelectedAssetIds(); } + return asset; + } +*************availble asset properties ********************* + +dragEnabled - Enables or disables making the asset dragable. Defaults to true +allowMultiSelect - Enables or disables multiselection of the asset. Defaults to true; + + +***************Notes********************* + +1. The asset class contains a getWrappedURL() method that return the asset.url property wrapped in "http://hostname" and the paramenter delimiter +2. asset.parent will return the parent asset (on the crumbtrail) +3. The AssetManager_getManager().getSelectedAssetsIds() method will return a parameter string containing all the selected asset Id's +*/ + +//Constructor function Asset() { //properties this.url = ""; @@ -9,6 +45,7 @@ function Asset() { this.labels = new Array(); this.assetId = ""; this.type = ""; + this.parent = null; this.title = ""; this.size = 0; this.lastUpdate = ""; @@ -32,7 +69,7 @@ this.registerEvents = function() { //url + ?||& + func=setParent&assetId= + assetId this.setParent = function(asset) { //parentURL - location.href = "http://" + manager.tools.getHostName(location.href) + manager.tools.addParamDelimiter(this.url) + "func=setParent&assetId="+ asset.assetId; + location.href = this.getWrappedURL() + "func=setParent&assetId="+ asset.assetId; } @@ -41,14 +78,14 @@ this.setParent = function(asset) { //url + ?||& + func=setRank&rank= + newRank this.setRank = function(rank) { //to child - location.href = "http://" + manager.tools.getHostName(location.href) + manager.tools.addParamDelimiter(this.url) + "func=setRank&rank="+ rank; + location.href = this.getWrappedURL() + "func=setRank&rank="+ rank; } //url + ?||& + func=editTree this.editTree = function() { //parentURL - location.href = "http://" + manager.tools.getHostName(location.href) + manager.tools.addParamDelimiter(this.url) + "func=editTree"; + location.href = this.getWrappedURL() + "func=editTree"; } @@ -56,41 +93,46 @@ this.editTree = function() { //------------------------------- //url + ?||& + func=edit this.edit = function() { - location.href = "http://" + manager.tools.getHostName(location.href) + manager.tools.addParamDelimiter(this.url) + "func=edit&proceed=manageAssets"; + location.href = this.getWrappedURL() + "func=edit&proceed=manageAssets"; } //Edit the properties of an asset (edit) //------------------------------- //url + ?||& + func=edit this.go = function() { - location.href = "http://" + manager.tools.getHostName(location.href) + manager.tools.addParamDelimiter(this.url) + "func=manageAssets"; + location.href = this.getWrappedURL() + "func=manageAssets"; } //View an asset (view) //------------- //url + ?||& + func=view this.view = function() { - location.href = "http://" + manager.tools.getHostName(location.href) + this.url; + location.href = this.getWrappedURL(); +} + +//returns a string that returns a reference to the asset when evaled +this.evalReference = function() { + return "document.getElementById('" + this.div.id + "').asset"; } //displays the right click context menu this.getContextMenu = function () { var arr = new Array(); if (AssetManager_getManager().display.overObjects.length == 1) { - arr[arr.length] = new ContextMenuItem(this.labels["go"],"javascript:manager.display.contextMenu.owner.go()"); + arr[arr.length] = new ContextMenuItem(this.labels["go"],"javascript:" + this.evalReference() + ".go()"); arr[arr.length] = new ContextMenuItem("",""); - arr[arr.length] = new ContextMenuItem(this.labels["view"],"javascript:manager.display.contextMenu.owner.view()"); - arr[arr.length] = new ContextMenuItem(this.labels["edit"],"javascript:manager.display.contextMenu.owner.edit()"); + arr[arr.length] = new ContextMenuItem(this.labels["view"],"javascript:" + this.evalReference() + ".view()"); + arr[arr.length] = new ContextMenuItem(this.labels["edit"],"javascript:" + this.evalReference() + ".edit()"); } - arr[arr.length] = new ContextMenuItem(this.labels["delete"],"javascript:manager.remove()"); + arr[arr.length] = new ContextMenuItem(this.labels["delete"],"javascript:" + this.evalReference() + ".remove()"); arr[arr.length] = new ContextMenuItem("",""); - arr[arr.length] = new ContextMenuItem(this.labels["cut"],"javascript:AssetManager_getManager().cut()"); - arr[arr.length] = new ContextMenuItem(this.labels["copy"],"javascript:manager.copy()"); + arr[arr.length] = new ContextMenuItem(this.labels["cut"],"javascript:" + this.evalReference() + ".cut()"); + arr[arr.length] = new ContextMenuItem(this.labels["copy"],"javascript:" + this.evalReference() + ".copy()"); if (AssetManager_getManager().display.overObjects.length ==1) { arr[arr.length] = new ContextMenuItem("",""); - arr[arr.length] = new ContextMenuItem(this.labels["editTree"],"javascript:manager.display.contextMenu.owner.editTree()"); + arr[arr.length] = new ContextMenuItem(this.labels["editTree"],"javascript:" + this.evalReference() + ".editTree()"); } return arr; @@ -104,11 +146,42 @@ this.deselect = function() { this.div.className="am-grid-row"; } +//Copy an asset to the clipboard (copy) +//------------------------------ +//url + ?||& + func=copy +this.copy = function() { + location.href = this.parent.getWrappedURL() + "func=copyList" + AssetManager_getManager().getSelectedAssetIds(); +} + +//Cut an asset to the clipboard (cut) +//----------------------------- +//url + ?||& + func=cut +this.cut = function() { + location.href = this.parent.getWrappedURL() + "func=cutList" + AssetManager_getManager().getSelectedAssetIds(); +} + +//Delete an asset. (delete) +//---------------- +//url + ?||& + func=delete (do a javascript confirm on this) +this.remove = function() { + if (window.confirm("Are you sure you want to delete this asset? Click OK to continue, or Cancel if you made a mistake.")) { + location.href = this.parent.getWrappedURL() + "func=deleteList" + AssetManager_getManager().getSelectedAssetIds(); + } +} + +//adds http, the hostname, and a trailing parameter delimiter to the url +this.getWrappedURL = function() { + if (this.url.indexOf("?") == -1) { + return "http://" + AssetManager_getManager().tools.getHostName(location.href) + this.url + "?"; + }else { + return "http://" + AssetManager_getManager().tools.getHostName(location.href) + url + "&"; + } +} + }//end object //Staic Methods function Asset_doubleClick(e) { - alert("here"); var dom = document.getElementById&&!document.all; var e=dom? e : event; var obj =dom? e.target : e.srcElement @@ -125,12 +198,13 @@ function Asset_rightClick(e) { e.returnValue = false; } - obj =dom? e.target : e.srcElement + var asset = manager.getAsset(obj); + + if (asset) { + manager.display.contextMenu.owner = asset; + manager.displayContextMenu(e.clientX,e.clientY,asset); + } - var asset = AssetManager_getManager().getAsset(obj); - - manager.display.contextMenu.owner = asset; - manager.displayContextMenu(e.clientX,e.clientY,asset); return false; } diff --git a/www/extras/assetManager/AssetManager.js b/www/extras/assetManager/AssetManager.js index 7920e6ee7..687b5dd29 100644 --- a/www/extras/assetManager/AssetManager.js +++ b/www/extras/assetManager/AssetManager.js @@ -2,6 +2,52 @@ //Manages an array of assets. +//*****************Configuring the asset manager.***************** + +//to create a new asset manager +//var manager = new AssetManager(assets,columnHeadings,labels,crumbtrail); +//manager.renderAssets(); + +//available properties. Properties should be set prior to the render asset call. + +//********************************************************* +//assetType - defaults to "Asset" + +//The following example starts the asset manager with a different asset type. + +//var manager = new AssetManager(assets,columnHeadings,labels,crumbtrail); +//manager.assetType="MyNewAsset" +//manager.renderAssets(); + +//********************************************************* +//sortEnabled = true - enables or disables sorting of the grid. Defaults to true + +//The following example starts the asset manager with sorting disabled. + +//var manager = new AssetManager(assets,columnHeadings,labels,crumbtrail); +//manager.sortEnabled=false; +//manager.renderAssets(); + +//********************************************************* +//displayCrumbTrail = Enables or disables display of the crumbtrail. Defaults to true + +//The following example starts the asset manager with the crumb trail disabled + +//var manager = new AssetManager(assets,columnHeadings,labels,crumbtrail); +//manager.displayCrumbTrail=false; +//manager.renderAssets(); + +//********************************************************** +//To disable display item in the grid, the disableDisplay function can be called on the asset manager. The function takes the index of the item to disable from the columnHeadings array. + +//The following example disables the rank and title + +//var manager = new AssetManager(assets,columnHeadings,labels,crumbtrail); +//manager.disableDisplay(0); +//manager.disableDisplay(1); +//manager.renderAssets(); + +//Constructor function AssetManager(assetArrayData,headerArrayData,labels,crumbtrail) { //create all the objects used by the manager @@ -17,14 +63,12 @@ function AssetManager(assetArrayData,headerArrayData,labels,crumbtrail) { this.keys[3] = "lastUpdate"; this.keys[4] = "size"; - this.parentURL = ""; - this.assetType = "Asset"; - - + this.sortEnabled = true; + this.displayCrumbTrail = true; + this.labels = labels; this.crumbtrail = crumbtrail; - this.parentURL = "d"; this.renderAssets = AssetManager_renderAssets; this.assetArrayData = assetArrayData; this.columnHeadings = headerArrayData; @@ -32,11 +76,14 @@ function AssetManager(assetArrayData,headerArrayData,labels,crumbtrail) { this.getAsset= AssetManager_getAsset; this.buildCrumbTrail = AssetManager_buildCrumbTrail; this.displayContextMenu = AssetManager_displayContextMenu; - this.remove = AssetManager_remove; - this.cut = AssetManager_cut; - this.copy = AssetManager_copy; this.sortGrid = AssetManager_sortGrid; this.getSelectedAssetIds = AssetManager_getSelectedAssetIds; + this.disabledDisplayItems = new Array(); + + this.disableDisplay = function(headerIndex) { + this.disabledDisplayItems[this.disabledDisplayItems.length] = headerIndex; + } + } //returns a reference to the asset manager @@ -54,6 +101,15 @@ function AssetManager_renderAssets() { var id = ""; for (i=0;i' + this.columnHeadings[i] + ''; if (this.sortEnabled) { @@ -68,7 +124,7 @@ function AssetManager_renderAssets() { id = 'am_grid.row.'+ i; gridStr += ''; - asset = eval("new " + this.assetType + "()"); + asset = eval("new " + this.assetType + "()"); asset.rank = this.assetArrayData[i][0]; asset.title = this.assetArrayData[i][1]; asset.type = this.assetArrayData[i][2]; @@ -85,8 +141,17 @@ function AssetManager_renderAssets() { eventStr += 'document.getElementById("' + id + '").asset = AssetManager_getManager().assets[' + assetIndex + '];'; eventStr += 'AssetManager_getManager().assets[' + assetIndex + '].div = document.getElementById("' + id + '");'; - + for (k=0;k'; @@ -109,6 +174,8 @@ function AssetManager_renderAssets() { //builds the asset crumb trail function AssetManager_buildCrumbTrail() { + + var crumbtrail = document.getElementById("crumbtrail"); var contents = ''; @@ -120,13 +187,13 @@ function AssetManager_buildCrumbTrail() { contents += ""; } } - - this.parentURL = "http://" + this.tools.getHostName(location.href) + this.crumbtrail[this.crumbtrail.length -1][1]; - + contents += '
 / 
'; - crumbtrail.innerHTML = contents; - + if (this.displayCrumbTrail) { + crumbtrail.innerHTML = contents; + } + //build assets attach the div properties var lastAsset = null; for (i=0; i< this.crumbtrail.length; i++ ) { @@ -138,8 +205,10 @@ function AssetManager_buildCrumbTrail() { lastAsset = asset; asset.isParent = true; asset.labels = this.labels; - asset.div = document.getElementById(this.crumbtrail[i][0]); - document.getElementById(this.crumbtrail[i][0]).asset = asset; + if (this.displayCrumbTrail) { + asset.div = document.getElementById(this.crumbtrail[i][0]); + document.getElementById(this.crumbtrail[i][0]).asset = asset; + } this.assets[this.assets.length] = asset; } @@ -159,30 +228,6 @@ function AssetManager_displayContextMenu(x,y,asset) { manager.contextMenu.render(asset.getContextMenu(),x,y,asset); } - -//Copy an asset to the clipboard (copy) -//------------------------------ -//url + ?||& + func=copy -function AssetManager_copy() { - location.href = this.tools.addParamDelimiter(this.parentURL) + "func=copyList" + this.getSelectedAssetIds(); -} - -//Cut an asset to the clipboard (cut) -//----------------------------- -//url + ?||& + func=cut -function AssetManager_cut() { - location.href = this.tools.addParamDelimiter(this.parentURL) + "func=cutList" + this.getSelectedAssetIds(); -} - -//Delete an asset. (delete) -//---------------- -//url + ?||& + func=delete (do a javascript confirm on this) -function AssetManager_remove() { - if (window.confirm("Are you sure you want to delete this asset? Click OK to continue, or Cancel if you made a mistake.")) { - location.href = this.tools.addParamDelimiter(this.parentURL) + "func=deleteList" + this.getSelectedAssetIds(); - } -} - //returns the asset IDS of all selected assets function AssetManager_getSelectedAssetIds() { var assetIds = ""; @@ -194,14 +239,13 @@ function AssetManager_getSelectedAssetIds() { //Sorts the asset grid based on a column index function AssetManager_sortGrid(columnIndex) { - var prop = this.keys[columnIndex]; var tableBody = document.getElementById("am_grid_body"); //remove the arrows from the other column headers for (i=0;i< this.columnHeadings.length;i++) { - if (i != columnIndex) { + if (i != columnIndex && document.getElementById('am_grid.headers.' + i)) { document.getElementById('am_grid.headers.' + i).innerHTML = this.columnHeadings[i]; document.getElementById('am_grid.headers.' + i).sortOrder = "<"; } diff --git a/www/extras/assetManager/ContextMenu.js b/www/extras/assetManager/ContextMenu.js index 084ed1d92..923ad4170 100644 --- a/www/extras/assetManager/ContextMenu.js +++ b/www/extras/assetManager/ContextMenu.js @@ -6,6 +6,7 @@ //Constructor for a context menu function ContextMenu() { + this.render = ContextMenu_render; this.hide = ContextMenu_hide; this.owner = null; @@ -62,14 +63,14 @@ function ContextMenu_render(contextMenuItemArray,x,y,owner) { if (y > parseInt(this.contextMenu.offsetHeight)) { -// this.contextMenu.style.top = (y + document.body.scrollTop - this.contextMenu.offsetHeight -1) + "px"; - this.contextMenu.style.top = (y + window.scrollY - this.contextMenu.offsetHeight -1) + "px"; + this.contextMenu.style.top = (y + manager.display.documentElement.scrollTop - this.contextMenu.offsetHeight -1) + "px"; +// this.contextMenu.style.top = (y + window.scrollY - this.contextMenu.offsetHeight -1) + "px"; }else { - // this.contextMenu.style.top = (y + document.body.scrollTop + 3) + "px"; - this.contextMenu.style.top = (y + window.scrollY + 3) + "px"; + this.contextMenu.style.top = (y + manager.display.documentElement.scrollTop + 3) + "px"; + // this.contextMenu.style.top = (y + window.scrollY + 3) + "px"; } - //this.contextMenu.style.left= (x + document.body.scrollLeft) + "px"; - this.contextMenu.style.left= (x + window.scrollX) + "px"; + this.contextMenu.style.left= (x + manager.display.documentElement.scrollLeft) + "px"; +// this.contextMenu.style.left= (x + window.scrollX) + "px"; manager.display.bringToFront(this.contextMenu); diff --git a/www/extras/assetManager/CrumbTrailAsset.js b/www/extras/assetManager/CrumbTrailAsset.js index f1d3321d9..bd440473b 100644 --- a/www/extras/assetManager/CrumbTrailAsset.js +++ b/www/extras/assetManager/CrumbTrailAsset.js @@ -11,10 +11,10 @@ function CrumbTrailAsset() { //displays the right click context menu asset.getContextMenu = function () { var arr = new Array(); - arr[arr.length] = new ContextMenuItem(this.labels["go"],"javascript:manager.display.contextMenu.owner.go()"); + arr[arr.length] = new ContextMenuItem(this.labels["go"],"javascript:" + this.evalReference() + ".go()"); arr[arr.length] = new ContextMenuItem("",""); - arr[arr.length] = new ContextMenuItem(this.labels["view"],"javascript:manager.display.contextMenu.owner.view()"); - arr[arr.length] = new ContextMenuItem(this.labels["edit"],"javascript:manager.display.contextMenu.owner.edit()"); + arr[arr.length] = new ContextMenuItem(this.labels["view"],"javascript:" + this.evalReference() + ".view()"); + arr[arr.length] = new ContextMenuItem(this.labels["edit"],"javascript:" + this.evalReference() + ".edit()"); return arr; } diff --git a/www/extras/assetManager/EventManager.js b/www/extras/assetManager/EventManager.js index 87d808383..ccb3223ab 100644 --- a/www/extras/assetManager/EventManager.js +++ b/www/extras/assetManager/EventManager.js @@ -72,10 +72,6 @@ function EventManager_documentMouseDown(e) { manager.display.dragStart(asset.div,e.clientX,e.clientY); return; } - }else { - if (manager.display.contextMenu.owner == null) { - manager.display.clearSelectedAssets(); - } } if (e.button != 2) { @@ -88,19 +84,23 @@ function EventManager_documentMouseUp(e) { var dom = document.getElementById&&!document.all; e=dom? e : event; obj =dom? e.target : e.srcElement - //obj = manager.tools.getActivity(obj); - var asset = manager.getAsset(obj); + if (asset && e.button == 2) { + return false; + } + if (manager.display.contextMenu.owner && (!asset || asset.assetId != manager.display.contextMenu.owner.assetId)) { manager.display.contextMenu.hide(); }else { - if (!asset && manager.display.contextMenu.owner == null) { - manager.display.clearSelectedAssets(); - } - } + + if (!asset && obj.id.indexOf("contextMenuItem") == -1) { + manager.display.clearSelectedAssets(); + } + manager.display.dragStop(); + return false; } diff --git a/www/extras/assetManager/ManageClipboard.js b/www/extras/assetManager/ManageClipboard.js index 4d98f37c5..f6698a0ff 100644 --- a/www/extras/assetManager/ManageClipboard.js +++ b/www/extras/assetManager/ManageClipboard.js @@ -17,6 +17,10 @@ asset.getContextMenu = function () { return arr; } +asset.restore = function() { + location.href = this.parent.getWrappedURL() + "func=pasteList" + AssetManager_getManager().getSelectedAssetIds(); +} + return asset; } diff --git a/www/extras/assetManager/ManageTrash.js b/www/extras/assetManager/ManageTrash.js index ab733ef75..bd6c425c9 100644 --- a/www/extras/assetManager/ManageTrash.js +++ b/www/extras/assetManager/ManageTrash.js @@ -1,4 +1,3 @@ - //--------Constructor-------------------- //Creates a new asset object. @@ -6,17 +5,19 @@ function ManageTrash() { var asset = new Asset(); asset.dragEnabled = false; - asset.allowMultiSelect = true; - //displays the right click context menu asset.getContextMenu = function () { var arr = new Array(); - arr[arr.length] = new ContextMenuItem(this.labels["cut"],"javascript:manager.display.contextMenu.owner.cut()"); + arr[arr.length] = new ContextMenuItem(this.labels["cut"],"javascript:" + this.evalReference() + ".cut()"); arr[arr.length] = new ContextMenuItem("",""); - arr[arr.length] = new ContextMenuItem(this.labels["purge"],"javascript:manager.display.contextMenu.owner.purge()"); + arr[arr.length] = new ContextMenuItem(this.labels["purge"],"javascript:" + this.evalReference() + ".purge()"); return arr; } + +asset.purge = function() { + location.href = this.parent.getWrappedURL() + "func=purgeList" + AssetManager_getManager().getSelectedAssetIds(); +} return asset;