[phpBB Debug] PHP Notice: in file /includes/bbcode.php on line 483: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead
[phpBB Debug] PHP Notice: in file /includes/bbcode.php on line 483: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead
[phpBB Debug] PHP Notice: in file /includes/bbcode.php on line 483: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead
[phpBB Debug] PHP Notice: in file /includes/bbcode.php on line 483: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead
[phpBB Debug] PHP Notice: in file /includes/bbcode.php on line 483: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead
[phpBB Debug] PHP Notice: in file /includes/bbcode.php on line 483: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead
[phpBB Debug] PHP Notice: in file /includes/bbcode.php on line 483: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead
[phpBB Debug] PHP Notice: in file /includes/bbcode.php on line 483: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead
[phpBB Debug] PHP Notice: in file /includes/bbcode.php on line 483: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead
[phpBB Debug] PHP Notice: in file /includes/bbcode.php on line 483: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead
[phpBB Debug] PHP Notice: in file /includes/bbcode.php on line 483: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead
[phpBB Debug] PHP Notice: in file /includes/bbcode.php on line 483: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead
[phpBB Debug] PHP Notice: in file /includes/bbcode.php on line 483: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead
[phpBB Debug] PHP Notice: in file /includes/bbcode.php on line 483: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead
[phpBB Debug] PHP Notice: in file /includes/bbcode.php on line 483: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead
[phpBB Debug] PHP Notice: in file /includes/bbcode.php on line 483: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead
[phpBB Debug] PHP Notice: in file /includes/bbcode.php on line 483: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead
[phpBB Debug] PHP Notice: in file /includes/bbcode.php on line 483: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead
[phpBB Debug] PHP Notice: in file /includes/bbcode.php on line 483: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead
[phpBB Debug] PHP Notice: in file /includes/bbcode.php on line 483: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead
[phpBB Debug] PHP Notice: in file /includes/bbcode.php on line 483: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead
[phpBB Debug] PHP Notice: in file /includes/bbcode.php on line 483: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead
[phpBB Debug] PHP Notice: in file /includes/bbcode.php on line 483: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead
[phpBB Debug] PHP Notice: in file /includes/bbcode.php on line 483: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead
[phpBB Debug] PHP Notice: in file /includes/bbcode.php on line 483: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead
[phpBB Debug] PHP Notice: in file /includes/bbcode.php on line 483: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead
[phpBB Debug] PHP Notice: in file /includes/bbcode.php on line 112: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead
[phpBB Debug] PHP Notice: in file /includes/bbcode.php on line 112: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead
[phpBB Debug] PHP Notice: in file /includes/bbcode.php on line 112: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead
[phpBB Debug] PHP Notice: in file /includes/bbcode.php on line 112: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead
[phpBB Debug] PHP Notice: in file /includes/functions.php on line 4284: Cannot modify header information - headers already sent by (output started at /includes/functions.php:3493)
[phpBB Debug] PHP Notice: in file /includes/functions.php on line 4286: Cannot modify header information - headers already sent by (output started at /includes/functions.php:3493)
[phpBB Debug] PHP Notice: in file /includes/functions.php on line 4287: Cannot modify header information - headers already sent by (output started at /includes/functions.php:3493)
[phpBB Debug] PHP Notice: in file /includes/functions.php on line 4288: Cannot modify header information - headers already sent by (output started at /includes/functions.php:3493)
www.dhtmlgoodies.com • View topic - Add Item
Advertisement

Add Item

Moderators: Calcifer, slothy

Add Item

Postby magnet » Thu Feb 28, 2008 12:04 pm

Hi,

i'm new in this forum.
I found the great drag and drop tree script on this page and i modified it.
I added a "add Item option" in the Context-menu.

It's not very good programmed, but it works (but not with ie)!
Please help to find, why it doesn't work with the ie!
The error must be in the puschItem_step2 function!

Replace the Code into the drag-drop-folder-tree.js (sorry for the long list, but i think it's easier to reconstruct):

var JSTreeObj;
var treeUlCounter = 0;
var nodeId = 1;
var menuModel;

/* Constructor */
function JSDragDropTree()
{
var idOfTree;
var imageFolder;
var folderImage;
var plusImage;
var minusImage;
var maximumDepth;
var dragNode_source;
var dragNode_parent;
var dragNode_sourceNextSib;
var dragNode_noSiblings;
var ajaxObjects;

var dragNode_destination;
var floatingContainer;
var dragDropTimer;
var dropTargetIndicator;
var insertAsSub;
var indicator_offsetX;
var indicator_offsetX_sub;
var indicator_offsetY;



this.imageFolder = 'images/';
this.folderImage = 'dhtmlgoodies_folder.gif';
this.plusImage = 'dhtmlgoodies_plus.gif';
this.minusImage = 'dhtmlgoodies_minus.gif';
this.maximumDepth = 6;
var messageMaximumDepthReached;
var filePathRenameItem;
var filePathDeleteItem;
var filePathAddItem;
var additionalRenameRequestParameters = {};
var additionalDeleteRequestParameters = {};
var additionalAddRequestParameters = {};

var renameAllowed;
var deleteAllowed;
var addAllowed;
var currentlyActiveItem;
var contextMenu;
var currentItemToEdit; // Reference to item currently being edited(example: renamed)
var helpObj;

this.contextMenu = false;
this.floatingContainer = document.createElement('UL');
this.floatingContainer.style.position = 'absolute';
this.floatingContainer.style.display='none';
this.floatingContainer.id = 'floatingContainer';
this.insertAsSub = false;
document.body.appendChild(this.floatingContainer);
this.dragDropTimer = -1;
this.dragNode_noSiblings = false;
this.currentItemToEdit = false;

if(document.all){
this.indicator_offsetX = 2; // Offset position of small black lines indicating where nodes would be dropped.
this.indicator_offsetX_sub = 4;
this.indicator_offsetY = 2;
}else{
this.indicator_offsetX = 1; // Offset position of small black lines indicating where nodes would be dropped.
this.indicator_offsetX_sub = 3;
this.indicator_offsetY = 2;
}
if(navigator.userAgent.indexOf('Opera')>=0){
this.indicator_offsetX = 2; // Offset position of small black lines indicating where nodes would be dropped.
this.indicator_offsetX_sub = 3;
this.indicator_offsetY = -7;
}

this.messageMaximumDepthReached = ''; // Use '' if you don't want to display a message

this.renameAllowed = true;
this.deleteAllowed = true;
this.addAllowed = true;
this.currentlyActiveItem = false;
this.filePathRenameItem = 'folderTree_updateItem.php';
this.filePathDeleteItem = 'folderTree_updateItem.php';
this.filePathAddItem = 'folderTree_updateItem.php';
this.ajaxObjects = new Array();
this.helpObj = false;

this.RENAME_STATE_BEGIN = 1;
this.RENAME_STATE_CANCELED = 2;
this.RENAME_STATE_REQUEST_SENDED = 3;
this.renameState = null;
}


/* JSDragDropTree class */
JSDragDropTree.prototype = {
// {{{ addEvent()
/**
*
* This function adds an event listener to an element on the page.
*
* @param Object whichObject = Reference to HTML element(Which object to assigne the event)
* @param String eventType = Which type of event, example "mousemove" or "mouseup"
* @param functionName = Name of function to execute.
*
* @public
*/
addEvent : function(whichObject,eventType,functionName)
{
if(whichObject.attachEvent){
whichObject['e'+eventType+functionName] = functionName;
whichObject[eventType+functionName] = function(){whichObject['e'+eventType+functionName]( window.event );}
whichObject.attachEvent( 'on'+eventType, whichObject[eventType+functionName] );
} else
whichObject.addEventListener(eventType,functionName,false);
}
// }}}
,
// {{{ removeEvent()
/**
*
* This function removes an event listener from an element on the page.
*
* @param Object whichObject = Reference to HTML element(Which object to assigne the event)
* @param String eventType = Which type of event, example "mousemove" or "mouseup"
* @param functionName = Name of function to execute.
*
* @public
*/
removeEvent : function(whichObject,eventType,functionName)
{
if(whichObject.detachEvent){
whichObject.detachEvent('on'+eventType, whichObject[eventType+functionName]);
whichObject[eventType+functionName] = null;
} else
whichObject.removeEventListener(eventType,functionName,false);
}
,
Get_Cookie : function(name) {
var start = document.cookie.indexOf(name+"=");
var len = start+name.length+1;
if ((!start) && (name != document.cookie.substring(0,name.length))) return null;
if (start == -1) return null;
var end = document.cookie.indexOf(";",len);
if (end == -1) end = document.cookie.length;
return unescape(document.cookie.substring(len,end));
}
,
// This function has been slightly modified
Set_Cookie : function(name,value,expires,path,domain,secure) {
expires = expires * 60*60*24*1000;
var today = new Date();
var expires_date = new Date( today.getTime() + (expires) );
var cookieString = name + "=" +escape(value) +
( (expires) ? ";expires=" + expires_date.toGMTString() : "") +
( (path) ? ";path=" + path : "") +
( (domain) ? ";domain=" + domain : "") +
( (secure) ? ";secure" : "");
document.cookie = cookieString;
}
,
setFileNameRename : function(newFileName)
{
this.filePathRenameItem = newFileName;
}
,
setFileNameDelete : function(newFileName)
{
this.filePathDeleteItem = newFileName;
}
,
setAddNameAdd : function(newFileName)
{
this.filePathAddItem = newFileName;
}
,
setAdditionalRenameRequestParameters : function(requestParameters)
{
this.additionalRenameRequestParameters = requestParameters;
}
,
setAdditionalDeleteRequestParameters : function(requestParameters)
{
this.additionalDeleteRequestParameters = requestParameters;
}
,
setAdditionalAddRequestParameters : function(requestParameters)
{
this.additionalAddRequestParameters = requestParameters;
}
,setRenameAllowed : function(renameAllowed)
{
this.renameAllowed = renameAllowed;
}
,setDeleteAllowed : function(deleteAllowed)
{
this.deleteAllowed = deleteAllowed;
}
,setAddAllowed : function(addAllowed)
{
this.addAllowed = addAllowed;
}
,setMaximumDepth : function(maxDepth)
{
this.maximumDepth = maxDepth;
}
,setMessageMaximumDepthReached : function(newMessage)
{
this.messageMaximumDepthReached = newMessage;
}
,
setImageFolder : function(path)
{
this.imageFolder = path;
}
,
setFolderImage : function(imagePath)
{
this.folderImage = imagePath;
}
,
setPlusImage : function(imagePath)
{
this.plusImage = imagePath;
}
,
setMinusImage : function(imagePath)
{
this.minusImage = imagePath;
}
,
setTreeId : function(idOfTree)
{
this.idOfTree = idOfTree;
}
,
expandAll : function()
{
var menuItems = document.getElementById(this.idOfTree).getElementsByTagName('LI');
for(var no=0;no<menuItems.length;no++){
var subItems = menuItems[no].getElementsByTagName('UL');
if(subItems.length>0 && subItems[0].style.display!='block'){
JSTreeObj.showHideNode(false,menuItems[no].id);
}
}
}
,
collapseAll : function()
{
var menuItems = document.getElementById(this.idOfTree).getElementsByTagName('LI');
for(var no=0;no<menuItems.length;no++){
var subItems = menuItems[no].getElementsByTagName('UL');
if(subItems.length>0 && subItems[0].style.display=='block'){
JSTreeObj.showHideNode(false,menuItems[no].id);
}
}
}
,
/*
Find top pos of a tree node
*/
getTopPos : function(obj){
var top = obj.offsetTop/1;
while((obj = obj.offsetParent) != null){
if(obj.tagName!='HTML')top += obj.offsetTop;
}
if(document.all)top = top/1 + 13; else top = top/1 + 4;
return top;
}
,
/*
Find left pos of a tree node
*/
getLeftPos : function(obj){
var left = obj.offsetLeft/1 + 1;
while((obj = obj.offsetParent) != null){
if(obj.tagName!='HTML')left += obj.offsetLeft;
}

if(document.all)left = left/1 - 2;
return left;
}

,
showHideNode : function(e,inputId)
{
if(inputId){
if(!document.getElementById(inputId))return;
thisNode = document.getElementById(inputId).getElementsByTagName('IMG')[0];
}else {
thisNode = this;
if(this.tagName=='A')thisNode = this.parentNode.getElementsByTagName('IMG')[0];

}
if(thisNode.style.visibility=='hidden')return;
var parentNode = thisNode.parentNode;
inputId = parentNode.id.replace(/[^0-9]/g,'');
if(thisNode.src.indexOf(JSTreeObj.plusImage)>=0){
thisNode.src = thisNode.src.replace(JSTreeObj.plusImage,JSTreeObj.minusImage);
var ul = parentNode.getElementsByTagName('UL')[0];
ul.style.display='block';
if(!initExpandedNodes)initExpandedNodes = ',';
if(initExpandedNodes.indexOf(',' + inputId + ',')<0) initExpandedNodes = initExpandedNodes + inputId + ',';
}else{
thisNode.src = thisNode.src.replace(JSTreeObj.minusImage,JSTreeObj.plusImage);
parentNode.getElementsByTagName('UL')[0].style.display='none';
initExpandedNodes = initExpandedNodes.replace(',' + inputId,'');
}
JSTreeObj.Set_Cookie('dhtmlgoodies_expandedNodes',initExpandedNodes,500);
return false;
}
,
/* Initialize drag */
initDrag : function(e)
{
if(document.all)e = event;

var subs = JSTreeObj.floatingContainer.getElementsByTagName('LI');
if(subs.length>0){
if(JSTreeObj.dragNode_sourceNextSib){
JSTreeObj.dragNode_parent.insertBefore(JSTreeObj.dragNode_source,JSTreeObj.dragNode_sourceNextSib);
}else{
JSTreeObj.dragNode_parent.appendChild(JSTreeObj.dragNode_source);
}
}

JSTreeObj.dragNode_source = this.parentNode;
JSTreeObj.dragNode_parent = this.parentNode.parentNode;
JSTreeObj.dragNode_sourceNextSib = false;


if(JSTreeObj.dragNode_source.nextSibling)JSTreeObj.dragNode_sourceNextSib = JSTreeObj.dragNode_source.nextSibling;
JSTreeObj.dragNode_destination = false;
JSTreeObj.dragDropTimer = 0;
JSTreeObj.timerDrag();
return false;
}
,
timerDrag : function()
{
if(this.dragDropTimer>=0 && this.dragDropTimer<10){
this.dragDropTimer = this.dragDropTimer + 1;
setTimeout('JSTreeObj.timerDrag()',20);
return;
}
if(this.dragDropTimer==10)
{
JSTreeObj.floatingContainer.style.display='block';
JSTreeObj.floatingContainer.appendChild(JSTreeObj.dragNode_source);
}
}
,
moveDragableNodes : function(e)
{
if(JSTreeObj.dragDropTimer<10)return;
if(document.all)e = event;
dragDrop_x = e.clientX/1 + 5 + document.body.scrollLeft;
dragDrop_y = e.clientY/1 + 5 + document.documentElement.scrollTop;

JSTreeObj.floatingContainer.style.left = dragDrop_x + 'px';
JSTreeObj.floatingContainer.style.top = dragDrop_y + 'px';

var thisObj = this;
if(thisObj.tagName=='A' || thisObj.tagName=='IMG')thisObj = thisObj.parentNode;

JSTreeObj.dragNode_noSiblings = false;
var tmpVar = thisObj.getAttribute('noSiblings');
if(!tmpVar)tmpVar = thisObj.noSiblings;
if(tmpVar=='true')JSTreeObj.dragNode_noSiblings=true;

if(thisObj && thisObj.id)
{
JSTreeObj.dragNode_destination = thisObj;
var img = thisObj.getElementsByTagName('IMG')[1];
var tmpObj= JSTreeObj.dropTargetIndicator;
tmpObj.style.display='block';

var eventSourceObj = this;
if(JSTreeObj.dragNode_noSiblings && eventSourceObj.tagName=='IMG')eventSourceObj = eventSourceObj.nextSibling;

var tmpImg = tmpObj.getElementsByTagName('IMG')[0];
if(this.tagName=='A' || JSTreeObj.dragNode_noSiblings){
tmpImg.src = tmpImg.src.replace('ind1','ind2');
JSTreeObj.insertAsSub = true;
tmpObj.style.left = (JSTreeObj.getLeftPos(eventSourceObj) + JSTreeObj.indicator_offsetX_sub) + 'px';
}else{
tmpImg.src = tmpImg.src.replace('ind2','ind1');
JSTreeObj.insertAsSub = false;
tmpObj.style.left = (JSTreeObj.getLeftPos(eventSourceObj) + JSTreeObj.indicator_offsetX) + 'px';
}


tmpObj.style.top = (JSTreeObj.getTopPos(thisObj) + JSTreeObj.indicator_offsetY) + 'px';
}

return false;

}
,
dropDragableNodes:function()
{
if(JSTreeObj.dragDropTimer<10){
JSTreeObj.dragDropTimer = -1;
return;
}
var showMessage = false;
if(JSTreeObj.dragNode_destination){ // Check depth
var countUp = JSTreeObj.dragDropCountLevels(JSTreeObj.dragNode_destination,'up');
var countDown = JSTreeObj.dragDropCountLevels(JSTreeObj.dragNode_source,'down');
var countLevels = countUp/1 + countDown/1 + (JSTreeObj.insertAsSub?1:0);

if(countLevels>JSTreeObj.maximumDepth){
JSTreeObj.dragNode_destination = false;
showMessage = true; // Used later down in this function
}
}


if(JSTreeObj.dragNode_destination){
if(JSTreeObj.insertAsSub){
var uls = JSTreeObj.dragNode_destination.getElementsByTagName('UL');
if(uls.length>0){
ul = uls[0];
ul.style.display='block';

var lis = ul.getElementsByTagName('LI');

if(lis.length>0){ // Sub elements exists - drop dragable node before the first one
ul.insertBefore(JSTreeObj.dragNode_source,lis[0]);
}else { // No sub exists - use the appendChild method - This line should not be executed unless there's something wrong in the HTML, i.e empty <ul>
ul.appendChild(JSTreeObj.dragNode_source);
}
}else{
var ul = document.createElement('UL');
ul.style.display='block';
JSTreeObj.dragNode_destination.appendChild(ul);
ul.appendChild(JSTreeObj.dragNode_source);
}
var img = JSTreeObj.dragNode_destination.getElementsByTagName('IMG')[0];
img.style.visibility='visible';
img.src = img.src.replace(JSTreeObj.plusImage,JSTreeObj.minusImage);


}else{
if(JSTreeObj.dragNode_destination.nextSibling){
var nextSib = JSTreeObj.dragNode_destination.nextSibling;
nextSib.parentNode.insertBefore(JSTreeObj.dragNode_source,nextSib);
}else{
JSTreeObj.dragNode_destination.parentNode.appendChild(JSTreeObj.dragNode_source);
}
}
/* Clear parent object */
var tmpObj = JSTreeObj.dragNode_parent;
var lis = tmpObj.getElementsByTagName('LI');
if(lis.length==0){
var img = tmpObj.parentNode.getElementsByTagName('IMG')[0];
img.style.visibility='hidden'; // Hide [+],[-] icon
tmpObj.parentNode.removeChild(tmpObj);
}

}else{
// Putting the item back to it's original location

if(JSTreeObj.dragNode_sourceNextSib){
JSTreeObj.dragNode_parent.insertBefore(JSTreeObj.dragNode_source,JSTreeObj.dragNode_sourceNextSib);
}else{
JSTreeObj.dragNode_parent.appendChild(JSTreeObj.dragNode_source);
}

}
JSTreeObj.dropTargetIndicator.style.display='none';
JSTreeObj.dragDropTimer = -1;
if(showMessage && JSTreeObj.messageMaximumDepthReached)alert(JSTreeObj.messageMaximumDepthReached);
}
,
createDropIndicator : function()
{
this.dropTargetIndicator = document.createElement('DIV');
this.dropTargetIndicator.style.position = 'absolute';
this.dropTargetIndicator.style.display='none';
var img = document.createElement('IMG');
img.src = this.imageFolder + 'dragDrop_ind1.gif';
img.id = 'dragDropIndicatorImage';
this.dropTargetIndicator.appendChild(img);
document.body.appendChild(this.dropTargetIndicator);

}
,
dragDropCountLevels : function(obj,direction,stopAtObject){
var countLevels = 0;
if(direction=='up'){
while(obj.parentNode && obj.parentNode!=stopAtObject){
obj = obj.parentNode;
if(obj.tagName=='UL')countLevels = countLevels/1 +1;
}
return countLevels;
}

if(direction=='down'){
var subObjects = obj.getElementsByTagName('LI');
for(var no=0;no<subObjects.length;no++){
countLevels = Math.max(countLevels,JSTreeObj.dragDropCountLevels(subObjects[no],"up",obj));
}
return countLevels;
}
}
,
cancelEvent : function()
{
return false;
}
,
cancelSelectionEvent : function()
{

if(JSTreeObj.dragDropTimer<10)return true;
return false;
}
,getNodeOrders : function(initObj,saveString)
{

if(!saveString)var saveString = '';
if(!initObj){
initObj = document.getElementById(this.idOfTree);

}
var lis = initObj.getElementsByTagName('LI');

if(lis.length>0){
var li = lis[0];
while(li){
if(li.id){
if(saveString.length>0)saveString = saveString + ',';
var numericID = li.id.replace(/[^0-9]/gi,'');
if(numericID.length==0)numericID='A';
var numericParentID = li.parentNode.parentNode.id.replace(/[^0-9]/gi,'');
if(numericID!='0'){
saveString = saveString + numericID;
saveString = saveString + '-';


if(li.parentNode.id!=this.idOfTree)saveString = saveString + numericParentID; else saveString = saveString + '0';
}
var ul = li.getElementsByTagName('UL');
if(ul.length>0){
saveString = this.getNodeOrders(ul[0],saveString);
}
}
li = li.nextSibling;
}
}

if(initObj.id == this.idOfTree){
return saveString;

}
return saveString;
}
,highlightItem : function(inputObj,e)
{
if(JSTreeObj.currentlyActiveItem)JSTreeObj.currentlyActiveItem.className = '';
this.className = 'highlightedNodeItem';
JSTreeObj.currentlyActiveItem = this;
}
,
removeHighlight : function()
{
if(JSTreeObj.currentlyActiveItem)JSTreeObj.currentlyActiveItem.className = '';
JSTreeObj.currentlyActiveItem = false;
}
,
hasSubNodes : function(obj)
{
var subs = obj.getElementsByTagName('LI');
if(subs.length>0)return true;
return false;
}
,
deleteItem : function(obj1,obj2)
{
var message = 'Click OK to delete item ' + obj2.innerHTML;
if(this.hasSubNodes(obj2.parentNode)) message = message + ' and it\'s sub nodes';
if(confirm(message)){
this.__deleteItem_step2(obj2.parentNode); // Sending <LI> tag to the __deleteItem_step2 method
}

}
,
pushItem : function(obj1,obj2)
{
var newnodename = prompt("Add a new node to " + obj2.innerHTML + "Please enter in the name of this new node", "Node Name");
if(newnodename != ''){
this.__pushItem_step2(obj2, newnodename);
}
},
__pushItem_step2 : function(obj, nodename)
{
// create elemnent and set local vars
var li = document.createElement('LI');
li.id = 'node'+nodeId; // No numeric id = new item
li.class = 'dhtmlgoodies_sheet.gif';

var img = document.createElement('IMG'); // Creating [+]/[-] icon
img.src = this.imageFolder + this.plusImage;
img.onclick = JSTreeObj.showHideNode;
img.style.visibility = 'hidden';
li.appendChild(img);

var folderImg = document.createElement('IMG'); // Creating folder image
folderImg.onmousedown = JSTreeObj.initDrag;
folderImg.onmousemove = JSTreeObj.moveDragableNodes;
folderImg.src = this.imageFolder + this.folderImage;
li.appendChild(folderImg);

var aTag = document.createElement('A'); // Creating <a> tag
aTag.innerHTML = nodename; // Text of a tag
aTag.href = '#';
aTag.id = 'nodeATag' + nodeId;
aTag.Target = 'mainFrame';
aTag.onmousedown = JSTreeObj.initDrag;
aTag.onmousemove = JSTreeObj.moveDragableNodes;

var curlistobj;

if(this.hasSubNodes(obj.parentNode)) {
curlistobj = obj.parentNode.getElementsByTagName('UL');
li.appendChild(aTag);
curlistobj[0].appendChild(li);
} else {
curlistobj = obj.parentNode;
var imgArray = curlistobj.getElementsByTagName('IMG');
imgArray[0].removeAttribute('STYLE');
imgArray[0].onclick = JSTreeObj.showHideNode;
var ul = document.createElement("UL");
li.appendChild(aTag);
ul.appendChild(li);
curlistobj.appendChild(ul);
}
var dhtmlgoodies_tree = document.getElementById(this.idOfTree);
var menuItems = dhtmlgoodies_tree.getElementsByTagName('LI'); // Get an array of all menu items
var noDelete = menuItems[menuItems.length - 1].getAttribute('noDelete');
noDelete = menuItems[menuItems.length -1].noDelete;
var noRename = menuItems[menuItems.length -1].getAttribute('noRename');
noRename = menuItems[menuItems.length -1].noRename;
var noAdd = menuItems[menuItems.length -1].getAttribute('noAdd');
noAdd = menuItems[menuItems.length -1].noAdd;
this.contextMenu.attachToElement(aTag,false,menuModel);
this.addEvent(aTag,'contextmenu',this.highlightItem);


nodeId = nodeId + 1;
//this.__refreshDisplay(obj.parentNode);
}
,
__pushComplete : function(ajaxIndex,obj)
{
if(this.ajaxObjects[ajaxIndex].response!='OK'){
alert('ERROR WHEN TRYING TO DELETE NODE: ' + this.ajaxObjects[ajaxIndex].response); // Rename failed
}else{
var parentRef = obj.parentNode.parentNode;
obj.parentNode.removeChild(obj);
this.__refreshDisplay(parentRef);

}

},
__refreshDisplay : function(obj)
{
if(this.hasSubNodes(obj))return;

var img = obj.getElementsByTagName('IMG')[0];
img.style.visibility = 'hidden';
}
,
__deleteItem_step2 : function(obj)
{

var saveString = obj.id.replace(/[^0-9]/gi,'');

var lis = obj.getElementsByTagName('LI');
for(var no=0;no<lis.length;no++){
saveString = saveString + ',' + lis[no].id.replace(/[^0-9]/gi,'');
}

// Creating ajax object and send items
var ajaxIndex = JSTreeObj.ajaxObjects.length;
JSTreeObj.ajaxObjects[ajaxIndex] = new sack();
JSTreeObj.ajaxObjects[ajaxIndex].method = "GET";
JSTreeObj.ajaxObjects[ajaxIndex].setVar("deleteIds", saveString);
JSTreeObj.__addAdditionalRequestParameters(JSTreeObj.ajaxObjects[ajaxIndex], JSTreeObj.additionalDeleteRequestParameters);
JSTreeObj.ajaxObjects[ajaxIndex].requestFile = JSTreeObj.filePathDeleteItem; // Specifying which file to get
JSTreeObj.ajaxObjects[ajaxIndex].onCompletion = function() { JSTreeObj.__deleteComplete(ajaxIndex,obj); } ; // Specify function that will be executed after file has been found
JSTreeObj.ajaxObjects[ajaxIndex].runAJAX(); // Execute AJAX function


}
,
__deleteComplete : function(ajaxIndex,obj)
{
if(this.ajaxObjects[ajaxIndex].response!='OK'){
alert('ERROR WHEN TRYING TO DELETE NODE: ' + this.ajaxObjects[ajaxIndex].response); // Rename failed
}else{
var parentRef = obj.parentNode.parentNode;
obj.parentNode.removeChild(obj);
this.__refreshDisplay(parentRef);

}

}
,
__renameComplete : function(ajaxIndex)
{
if(this.ajaxObjects[ajaxIndex].response!='OK'){
alert('ERROR WHEN TRYING TO RENAME NODE: ' + this.ajaxObjects[ajaxIndex].response); // Rename failed
}
}
,
__saveTextBoxChanges : function(e,inputObj)
{
if(!inputObj && this)inputObj = this;
if(document.all)e = event;
if(e.keyCode && e.keyCode==27){
JSTreeObj.__cancelRename(e,inputObj);
return;
}
inputObj.style.display='none';
inputObj.nextSibling.style.visibility='visible';
if(inputObj.value.length>0){
inputObj.nextSibling.innerHTML = inputObj.value;
// Send changes to the server.
if (JSTreeObj.renameState != JSTreeObj.RENAME_STATE_BEGIN) {
return;
}
JSTreeObj.renameState = JSTreeObj.RENAME_STATE_REQUEST_SENDED;

var ajaxIndex = JSTreeObj.ajaxObjects.length;
JSTreeObj.ajaxObjects[ajaxIndex] = new sack();
JSTreeObj.ajaxObjects[ajaxIndex].method = "GET";
JSTreeObj.ajaxObjects[ajaxIndex].setVar("renameId", inputObj.parentNode.id.replace(/[^0-9]/gi,''));
JSTreeObj.ajaxObjects[ajaxIndex].setVar("newName", inputObj.value);
JSTreeObj.__addAdditionalRequestParameters(JSTreeObj.ajaxObjects[ajaxIndex], JSTreeObj.additionalRenameRequestParameters);
JSTreeObj.ajaxObjects[ajaxIndex].requestFile = JSTreeObj.filePathRenameItem; // Specifying which file to get
JSTreeObj.ajaxObjects[ajaxIndex].onCompletion = function() { JSTreeObj.__renameComplete(ajaxIndex); } ; // Specify function that will be executed after file has been found
JSTreeObj.ajaxObjects[ajaxIndex].runAJAX(); // Execute AJAX function



}
}
,
__cancelRename : function(e,inputObj)
{
JSTreeObj.renameState = JSTreeObj.RENAME_STATE_CANCELD;
if(!inputObj && this)inputObj = this;
inputObj.value = JSTreeObj.helpObj.innerHTML;
inputObj.nextSibling.innerHTML = JSTreeObj.helpObj.innerHTML;
inputObj.style.display = 'none';
inputObj.nextSibling.style.visibility = 'visible';
}
,
__renameCheckKeyCode : function(e)
{
if(document.all)e = event;
if(e.keyCode==13){ // Enter pressed
JSTreeObj.__saveTextBoxChanges(false,this);
}
if(e.keyCode==27){ // ESC pressed
JSTreeObj.__cancelRename(false,this);
}
}
,
__createTextBox : function(obj)
{
var textBox = document.createElement('INPUT');
textBox.className = 'folderTreeTextBox';
textBox.value = obj.innerHTML;
obj.parentNode.insertBefore(textBox,obj);
textBox.id = 'textBox' + obj.parentNode.id.replace(/[^0-9]/gi,'');
textBox.onblur = this.__saveTextBoxChanges;
textBox.onkeydown = this.__renameCheckKeyCode;
this.__renameEnableTextBox(obj);
}
,
__renameEnableTextBox : function(obj)
{
JSTreeObj.renameState = JSTreeObj.RENAME_STATE_BEGIN;
obj.style.visibility = 'hidden';
obj.previousSibling.value = obj.innerHTML;
obj.previousSibling.style.display = 'inline';
obj.previousSibling.select();
}
,
renameItem : function(obj1,obj2)
{
currentItemToEdit = obj2.parentNode; // Reference to the <li> tag.
if(!obj2.previousSibling || obj2.previousSibling.tagName.toLowerCase()!='input'){
this.__createTextBox(obj2);
}else{
this.__renameEnableTextBox(obj2);
}
this.helpObj.innerHTML = obj2.innerHTML;

}
,
initTree : function()
{
JSTreeObj = this;
JSTreeObj.createDropIndicator();
document.documentElement.onselectstart = JSTreeObj.cancelSelectionEvent;
document.documentElement.ondragstart = JSTreeObj.cancelEvent;
document.documentElement.onmousedown = JSTreeObj.removeHighlight;

/* Creating help object for storage of values */
this.helpObj = document.createElement('DIV');
this.helpObj.style.display = 'none';
document.body.appendChild(this.helpObj);

/* Create context menu */
if(this.deleteAllowed || this.renameAllowed || this.addAllowed){
try{
/* Creating menu model for the context menu, i.e. the datasource */
menuModel = new DHTMLGoodies_menuModel();
if(this.deleteAllowed)menuModel.addItem(1,'delete button','','',false,'JSTreeObj.deleteItem');
if(this.renameAllowed)menuModel.addItem(2,'rename button','','',false,'JSTreeObj.renameItem');
if(this.addAllowed)menuModel.addItem(3,'add button','','',false,'JSTreeObj.pushItem');
menuModel.init();

var menuModelRenameOnly = new DHTMLGoodies_menuModel();
if(this.renameAllowed)menuModelRenameOnly.addItem(3,'rename button','','',false,'JSTreeObj.renameItem');
menuModelRenameOnly.init();

var menuModelDeleteOnly = new DHTMLGoodies_menuModel();
if(this.deleteAllowed)menuModelDeleteOnly.addItem(4,'delete button','','',false,'JSTreeObj.deleteItem');
menuModelDeleteOnly.init();

var menuModelAddOnly = new DHTMLGoodies_menuModel();
if(this.addAllowed)menuModelAddOnly.addItem(5,'add Button','','',false,'JSTreeObj.pushItem');
menuModelAddOnly.init();

window.refToDragDropTree = this;

this.contextMenu = new DHTMLGoodies_contextMenu();
this.contextMenu.setWidth(120);
referenceToDHTMLSuiteContextMenu = this.contextMenu;
}catch(e){

}
}


var dhtmlgoodies_tree = document.getElementById(this.idOfTree);
var menuItems = dhtmlgoodies_tree.getElementsByTagName('LI'); // Get an array of all menu items
for(var no=0;no<menuItems.length;no++){
// No children var set ?
var noChildren = false;
var tmpVar = menuItems[no].getAttribute('noChildren');
if(!tmpVar)tmpVar = menuItems[no].noChildren;
if(tmpVar=='true')noChildren=true;
// No drag var set ?
var noDrag = false;
var tmpVar = menuItems[no].getAttribute('noDrag');
if(!tmpVar)tmpVar = menuItems[no].noDrag;
if(tmpVar=='true')noDrag=true;

nodeId++;
var subItems = menuItems[no].getElementsByTagName('UL');
var img = document.createElement('IMG');
img.src = this.imageFolder + this.plusImage;
img.onclick = JSTreeObj.showHideNode;

if(subItems.length==0)img.style.visibility='hidden';else{
subItems[0].id = 'tree_ul_' + treeUlCounter;
treeUlCounter++;
}
var aTag = menuItems[no].getElementsByTagName('A')[0];
aTag.id = 'nodeATag' + menuItems[no].id.replace(/[^0-9]/gi,'');
//aTag.onclick = JSTreeObj.showHideNode;
if(!noDrag)aTag.onmousedown = JSTreeObj.initDrag;
if(!noChildren)aTag.onmousemove = JSTreeObj.moveDragableNodes;
menuItems[no].insertBefore(img,aTag);
//menuItems[no].id = 'dhtmlgoodies_treeNode' + nodeId;
var folderImg = document.createElement('IMG');
if(!noDrag)folderImg.onmousedown = JSTreeObj.initDrag;
folderImg.onmousemove = JSTreeObj.moveDragableNodes;
if(menuItems[no].className){
folderImg.src = this.imageFolder + menuItems[no].className;
}else{
folderImg.src = this.imageFolder + this.folderImage;
}
menuItems[no].insertBefore(folderImg,aTag);

if(this.contextMenu){
var noDelete = menuItems[no].getAttribute('noDelete');
if(!noDelete)noDelete = menuItems[no].noDelete;
var noRename = menuItems[no].getAttribute('noRename');
if(!noRename)noRename = menuItems[no].noRename;
var noAdd = menuItems[no].getAttribute('noAdd');
if(!noAdd)noAdd = menuItems[no].noAdd;

if(noRename=='true' && noDelete=='true'){
this.contextMenu.attachToElement(aTag,false,menuModelAddOnly);
} else {
this.contextMenu.attachToElement(aTag,false,menuModel);
}
}
this.addEvent(aTag,'contextmenu',this.highlightItem);
}


initExpandedNodes = this.Get_Cookie('dhtmlgoodies_expandedNodes');
if(initExpandedNodes){
var nodes = initExpandedNodes.split(',');
for(var no=0;no<nodes.length;no++){
if(nodes[no])this.showHideNode(false,nodes[no]);
}
}


document.documentElement.onmousemove = JSTreeObj.moveDragableNodes;
document.documentElement.onmouseup = JSTreeObj.dropDragableNodes;
}
,
__addAdditionalRequestParameters : function(ajax, parameters)
{
for (var parameter in parameters) {
ajax.setVar(parameter, parameters[parameter]);
}
}
}
magnet
 
Posts: 2
Joined: Thu Feb 28, 2008 11:47 am

ie problem

Postby magnet » Fri Feb 29, 2008 4:21 pm

I found the IE problem!

Replace the code:

pushItem : function(obj1,obj2)
{
this.__pushItem_step2(obj2, 'new button');
},
__pushItem_step2 : function(obj, nodename)
{

// create elemnent and set local vars

var li = document.createElement('LI');

li.id = 'node'+nodeId; // No numeric id = new item
//li.class = 'dhtmlgoodies_sheet.gif';

var img = document.createElement('IMG'); // Creating [+]/[-] icon
img.src = this.imageFolder + this.plusImage;
img.onclick = JSTreeObj.showHideNode;
img.style.visibility = 'hidden';
li.appendChild(img);

var folderImg = document.createElement('IMG'); // Creating folder image
folderImg.onmousedown = JSTreeObj.initDrag;
folderImg.onmousemove = JSTreeObj.moveDragableNodes;
folderImg.src = this.imageFolder + this.folderImage;
li.appendChild(folderImg);

var aTag = document.createElement('A'); // Creating <a> tag
aTag.innerHTML = nodename; // Text of a tag
aTag.href = '#';
aTag.id = 'nodeATag' + nodeId;
aTag.Target = 'mainFrame';
aTag.onmousedown = JSTreeObj.initDrag;
aTag.onmousemove = JSTreeObj.moveDragableNodes;

var curlistobj;

if(this.hasSubNodes(obj.parentNode)) {
curlistobj = obj.parentNode.getElementsByTagName('UL');
li.appendChild(aTag);
curlistobj[0].appendChild(li);
} else {
curlistobj = obj.parentNode;
var imgArray = curlistobj.getElementsByTagName('IMG');
imgArray[0].removeAttribute("style");
imgArray[0].onclick = JSTreeObj.showHideNode;
var ul = document.createElement("UL");
li.appendChild(aTag);
ul.appendChild(li);
curlistobj.appendChild(ul);
}
var dhtmlgoodies_tree = document.getElementById(this.idOfTree);
var menuItems = dhtmlgoodies_tree.getElementsByTagName('LI'); // Get an array of all menu items
var noDelete = menuItems[menuItems.length - 1].getAttribute('noDelete');
noDelete = menuItems[menuItems.length -1].noDelete;
var noRename = menuItems[menuItems.length -1].getAttribute('noRename');
noRename = menuItems[menuItems.length -1].noRename;
var noAdd = menuItems[menuItems.length -1].getAttribute('noAdd');
noAdd = menuItems[menuItems.length -1].noAdd;
this.contextMenu.attachToElement(aTag,false,menuModel);
this.addEvent(aTag,'contextmenu',this.highlightItem);

nodeId = nodeId + 1;
this.__refreshDisplay(obj.parentNode);
}
magnet
 
Posts: 2
Joined: Thu Feb 28, 2008 11:47 am

How to write the newly added folder to the database

Postby Kandi » Wed Sep 24, 2008 6:56 am

Kandi
 
Posts: 5
Joined: Wed Aug 27, 2008 3:41 am

Add Button

Postby heinetz » Wed Oct 08, 2008 4:47 pm

heinetz
 
Posts: 1
Joined: Wed Oct 08, 2008 4:39 pm

How do I get hold of the item that was added?

Postby Kandi » Thu Dec 11, 2008 8:05 am

I'm still trying to find out how to get hold of the item that I add. The code works just great and adds a new folder to the tree after I right-click and 'add button' but what function is fired off and how to I grab this new item so I can do stuff with it? There is no point adding a new item to the tree unless you can save it for next time. Very interested in any replies.
Kandi
 
Posts: 5
Joined: Wed Aug 27, 2008 3:41 am

hi

Postby pratikmehta9 » Sat Jan 24, 2009 3:02 pm

pratikmehta9
 
Posts: 15
Joined: Fri Oct 31, 2008 2:11 pm

Postby kimss » Wed Mar 04, 2009 4:41 am

Your code seems abit "shaky" to say the least! I just checked it out hoping it worked out of the box, however it never does! Good work however, since you are pretty much there! What you have forgot to take into consideration it seems is the sorting... You seem to inherit the ID from the parent.

Also I found no reference to your __pushComplete() part of the code, so unless you accually create some AJAX call to the server this is not needed. Also you already set alot of variables, like the filePathAddItem, however no use for it. Maby you came half the way, :)

I will look some more into this as I debug it further.

Kim Steinhaug
- -
kimss
 
Posts: 38
Joined: Wed Oct 26, 2005 12:04 am

Postby kimss » Wed Mar 04, 2009 5:15 am

kimss
 
Posts: 38
Joined: Wed Oct 26, 2005 12:04 am

Postby sona » Tue Mar 24, 2009 6:23 pm

kimss,

Can you post the full script or send an email to umathiyagu at yahoo, I am in need of a folder tree with Add, Rename, Delete, Drag and Drop functionality. Thanks.
sona
 
Posts: 3
Joined: Tue Mar 24, 2009 6:06 pm

Does anybody has a final solution for this ?

Postby axel » Sun May 24, 2009 5:46 pm

Hello everybody,

Doaes anybody has a final solution dor the add funcitonnality on a contextual menu and triggering a PHP funciton ?

I tried everything on this post and on the forum, didn' find any 100% really working solution on IE and FF.

Thank you for your help.
axel
 
Posts: 1
Joined: Sun May 24, 2009 5:40 pm


Return to Folder tree questions

Who is online

Users browsing this forum: No registered users and 0 guests