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>
<?
}
?>