show the file system as a tree

phpfreaks member · March 3, 2007

the below script will display the filesystem as a tree view. need to have ajax and currently work on firefox 2.0 only

only works on windows

still not completed.

welcome all suggestions

paste the below into a file

<?
function echoTree($dir)
{
if ($handle = opendir($dir))
{
	while (false !== ($file = readdir($handle)))
	{
		if ($file != "." && $file != ".." && is_dir($dir.$file))
		{
			echo "<dir name=\"$file\">";
			echoTree($dir.$file.'/');
			echo "</dir>";
		}
	}
	closedir($handle);

}

}



if(!$_GET[debug])
error_reporting(0);



if($_GET[action]=='dir')
{
header('Content-Type: text/xml; charset=utf-8');
echo "<api>";
if ($handle = opendir($_GET[dir]))
{
	chdir($_GET[dir]);
	while (false !== ($file = readdir($handle)))
	{
		if ($file != "." && $file != ".." && is_dir($file))
		{
			echo "<dir name=\"$file\" />\n";
		}
	}
	closedir($handle);

}
echo "</api>";
}
elseif($_GET[action]=='drive')
{
header('Content-Type: text/xml; charset=utf-8');
echo "<api>";
for ($i = 67; $i <= 90; $i++)
	if (is_dir(chr($i).':'))
		echo "<dir name=\"".chr($i).":\"/>\n";
echo "</api>";
}
elseif($_GET[action]=='tree')
{
header('Content-Type: text/xml; charset=utf-8');
echo "<api>";
echoTree($_GET[dir]);
echo "</api>";
}
elseif($_GET[action]=='list')
{

if ($handle = opendir($_GET[dir]))
{
	chdir($_GET[dir]);
	while (false !== ($file = readdir($handle)))
		if ($file != "." && $file != ".." && !is_dir($file))
			echo "$file\n";
	closedir($handle);

}
}
else
{
?>

<html>
<style type="text/css">
.node {
font-family: Lucida Console;
font-size: 12px;
margin-left: 2em;
}


.tree {
border-right: 1px solid;
white-space: nowrap;
overflow: auto;
height: 100%;
max-width: 50%;
white-space: nowrap;
}

.menu {
background-color: #f4f4f4;
border-color: #bbc1c8;
padding: 2px;
border-style: solid;
border-width: 1px;
position: absolute;
left: 100px;
top: 0px;
visibility: hidden;
}

.menuSeperator {
border-top: 1px #bbc1c8 solid;
margin: 3px 0px;
}
a.menuItem {
border: 1px solid #f4f4f4;
color: #181818;
cursor: default;
display: block;
padding: 3px 16px;
font-family: Lucida Console;
font-size: 8pt;
text-decoration: none;
}

a.menuItem:hover {
border: 1px solid #bfeffe;
background-color: #dbeffa;
}

</style>

<script type="text/javascript">

var menuTarget;
Element.prototype.getElementById = function(id)
{
for(var i=0;i<this.childNodes.length;i++)
	if(this.childNodes[i].id==id)
		return this.childNodes[i];
}

Element.prototype.isDescendant = function(e)
{
while(e.parentNode)
	if((e = e.parentNode) == this)
		return true;
return false;
}

function expandRoot()
{
var node = document.getElementById('root')
var expandLink = node.getElementById('expand');
if(expandLink.innerHTML=='+')
{
	var xmlobj = new XMLHttpRequest();
	xmlobj.open('GET','?action=drive',false);
	xmlobj.send(null);
	for(var i=0;i<xmlobj.responseXML.getElementsByTagName('dir').length;i++)
	{
		var e;
		var dirName = xmlobj.responseXML.getElementsByTagName('dir')[i].getAttribute('name');
		var pathName = dirName+'/';
		if(e=document.getElementById(pathName))
		{
			e.style.display=null;
		}
		else
		{
			e=document.createElement('div');
			e.setAttribute('class','node');
			e.setAttribute('id',pathName);
			e.innerHTML = '[<a id="expand" href="javascript:void(0);" onclick="expandNode(this.parentNode);">+</a>] <a href="javascript:void(0);" onclick="popupMenu(this.parentNode,event);">'+dirName+'</a>';
			node.appendChild(e);
		}


	}
	expandLink.innerHTML = '-';
}
else
{
	var e=node.getElementsByTagName('div');
	for(var i=0;i<e.length;i++)
		if(e[i].parentNode.id==node.id)
			e[i].style.display='none';
	expandLink.innerHTML = '+';
}

}


function expandNode(node, isRoot)
{
var expandLink = node.getElementById('expand');
if(expandLink.innerHTML=='+')
{
	var xmlobj = new XMLHttpRequest();
	xmlobj.open('GET','?action=dir&dir='+node.id,false);
	xmlobj.send(null);
	for(var i=0;i<xmlobj.responseXML.getElementsByTagName('dir').length;i++)
	{
		var e;
		var dirName = xmlobj.responseXML.getElementsByTagName('dir')[i].getAttribute('name');
		var pathName = node.id+dirName+'/';
		if(e=document.getElementById(pathName))
		{
			e.style.display=null;
		}
		else
		{
			e=document.createElement('div');
			e.setAttribute('class','node');
			e.setAttribute('id',pathName);
			e.innerHTML = '[<a id="expand" href="javascript:void(0);" onclick="expandNode(this.parentNode);">+</a>] <a href="javascript:void(0);" onclick="popupMenu(this.parentNode,event);">'+dirName+'</a>';
			node.appendChild(e);
		}

	}
	expandLink.innerHTML = '-';
}
else
{
	var e=node.getElementsByTagName('div');
	for(var i=0;i<e.length;i++)
		if(e[i].parentNode.id==node.id)
			e[i].style.display='none';
	expandLink.innerHTML = '+';
}

}

function addNode(parent,xml)
{

var e;
var dirName = xml.getAttribute('name');
var pathName = parent.id+dirName+'/';
if(e=document.getElementById(pathName))
{
	e.style.display=null;
}
else
{
	e=document.createElement('div');
	e.setAttribute('class','node');
	e.setAttribute('id',pathName);
	e.innerHTML = '[<a id="expand" href="javascript:void(0);" onclick="expandNode(this.parentNode);">-</a>] <a href="javascript:void(0);" onclick="popupMenu(this.parentNode,event);">'+dirName+'</a>';
	parent.appendChild(e);
	for(var i=0;i<xml.getElementsByTagName('dir').length;i++)
		addNode(e,xml.getElementsByTagName('dir')[i]);
}


}


function expandTree(node)
{
var xmlobj = new XMLHttpRequest();
xmlobj.open('GET','?action=tree&dir='+node.id,false)
xmlobj.send(null);
for(var i=0;i<xmlobj.responseXML.getElementsByTagName('dir').length;i++)
	addNode(node,xmlobj.responseXML.getElementsByTagName('dir')[i]);
node.getElementById('expand').innerHTML='-';ss
}



function popupMenu(node, event)
{
var e = document.getElementById('menu');
if((y = event.clientY + window.scrollY) + e.clientHeight > window.innerHeight)
e.style.top  = y - e.clientHeight;
else
e.style.top  = y;
e.style.left = event.clientX + window.scrollX;
e.getElementById('menuInfo').innerHTML=node.id;
if(node.getElementById('expand').innerHTML=='+')
{
//	e.getElementById('menuCollapse').style.display = 'none';
//	e.getElementById('menuExpand').style.display = null;
}
else
{
//	e.getElementById('menuExpand').style.display = 'none';
//	e.getElementById('menuCollapse').style.display = null;
}
e.style.visibility = 'visible';
menuTarget = node;
}

function hideMenu(event,auto)
{
if(event==0)
document.getElementById('menu').style.visibility = 'hidden';
else
if(!event.currentTarget.isDescendant(event.relatedTarget) && event.relatedTarget != menuTarget && event.relatedTarget != event.currentTarget)
document.getElementById('menu').style.visibility = 'hidden';
}

</script>

<body>
<div class="tree">
<div id="root" class="node" style="margin-left: 0em;">[<a id="expand" href="javascript:void(0);" onclick="expandRoot();">+</a>] My Computer</div>
</div>
<div id="menu" class="menu" onmouseout="hideMenu(event);">
<a id="menuInfo" class="menuItem">aa</a>
<div class="menuSeperator"></div>
<a id="menuExpand" class="menuItem" href="javascript:void(0);" onclick="hideMenu(0);expandNode(menuTarget);">Expand</a>
<a id="menuCollapse" class="menuItem" href="javascript:void(0);" onclick="hideMenu(0);expandNode(menuTarget);">Collapse</a>
<a id="menuExpandTree" class="menuItem" href="javascript:void(0);" onclick="hideMenu(0);expandTree(menuTarget);">Expand Tree</a>
</div>
</body>
</html>
<?
}
?>

Lumio · March 4, 2007

Do you got it online to test that script?

I also made for my own a little script that shows me all files and dirs and also reads files and so on.

Now I create a new one.

phpfreaks member · March 5, 2007

no i can't demo it, i don't feel like showing my files to everyone.

btw wanna join me in this script?

Lumio · March 5, 2007

you're using undefined variables and constants.

I don't want to join because I'll do it with OOP

Sign In

show the file system as a tree

Recommended Posts

phpfreaks member

Link to comment

Share on other sites

Lumio

Link to comment

Share on other sites

phpfreaks member

Link to comment

Share on other sites

Lumio

Link to comment

Share on other sites

Browse

Activity

Important Information