Skip to content

Instantly share code, notes, and snippets.

@Xerkus

Xerkus/dirtree.html

Created September 30, 2012 19:32
Show Gist options
  • Save Xerkus/3808232 to your computer and use it in GitHub Desktop.
Save Xerkus/3808232 to your computer and use it in GitHub Desktop.
Download ZIP
Quick peek into dojo by example. Directory tree listing using cli command "tree" output in xml format as data source. Needs styling, code cleanup and improvements. May be i'll get back to it later.
Raw
dirtree.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>file tree</title>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.8.0/dijit/themes/claro/claro.css">
<style>
.fileIconPhp {background: url('https://raw.github.com/teambox/Free-file-icons/master/16px/php.png') top left}
</style>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.8.0/dojo/dojo.js"></script>
<script>
dojo.require("dijit.Tree");
dojo.require("dijit.tree.TreeStoreModel");
dojo.require("dojox.data.XmlStore");
dojo.require("dojox.xml.parser");
dojo.ready(function(){
hookXmlStore();
var myxml = '<?xml version="1.0" encoding="UTF-8"?> <tree> <directory name="."> <file name="autoload_classmap.php"></file> <file name="composer.json"></file> <directory name="config"> <file name="module.config.php"></file> <file name="README.md"></file> <file name="zfcuser.global.php.dist"></file> </directory> <directory name="data"> <file name="schema.sql"></file> <file name="schema.sqlite.sql"></file> </directory> <file name="Module.php"></file> <file name="README.md"></file> <directory name="src"> <directory name="ZfcUser"> <directory name="Authentication"> <directory name="Adapter"> <file name="AbstractAdapter.php"></file> <file name="AdapterChainEvent.php"></file> <file name="AdapterChain.php"></file> <file name="AdapterChainServiceFactory.php"></file> <file name="ChainableAdapter.php"></file> <file name="Db.php"></file> </directory> <directory name="Storage"> <file name="Db.php"></file> </directory> </directory> <directory name="Controller"> <directory name="Plugin"> <file name="ZfcUserAuthentication.php"></file> </directory> <file name="UserController.php"></file> </directory> <directory name="Entity"> <file name="UserInterface.php"></file> <file name="User.php"></file> </directory> <directory name="Form"> <file name="Base.php"></file> <file name="ChangeEmailFilter.php"></file> <file name="ChangeEmail.php"></file> <file name="ChangePasswordFilter.php"></file> <file name="ChangePassword.php"></file> <file name="LoginFilter.php"></file> <file name="Login.php"></file> <file name="RegisterFilter.php"></file> <file name="Register.php"></file> </directory> <directory name="Mapper"> <directory name="Exception"> <file name="ExceptionInterface.php"></file> <file name="InvalidArgumentException.php"></file> <file name="RuntimeException.php"></file> </directory> <file name="UserHydrator.php"></file> <file name="UserInterface.php"></file> <file name="User.php"></file> </directory> <directory name="Options"> <file name="AuthenticationOptionsInterface.php"></file> <file name="ModuleOptions.php"></file> <file name="PasswordOptionsInterface.php"></file> <file name="RegistrationOptionsInterface.php"></file> <file name="UserControllerOptionsInterface.php"></file> <file name="UserServiceOptionsInterface.php"></file> </directory> <directory name="Service"> <directory name="Exception"> <file name="ExceptionInterface.php"></file> <file name="InvalidArgumentException.php"></file> </directory> <file name="User.php"></file> </directory> <directory name="Validator"> <file name="AbstractRecord.php"></file> <directory name="Exception"> <file name="ExceptionInterface.php"></file> <file name="InvalidArgumentException.php"></file> </directory> <file name="NoRecordExists.php"></file> <file name="RecordExists.php"></file> </directory> <directory name="View"> <directory name="Helper"> <file name="ZfcUserDisplayName.php"></file> <file name="ZfcUserIdentity.php"></file> <file name="ZfcUserLoginWidget.php"></file> </directory> </directory> </directory> </directory> <directory name="view"> <directory name="zfc-user"> <directory name="user"> <file name="changeemail.phtml"></file> <file name="changepassword.phtml"></file> <file name="index.phtml"></file> <file name="login.phtml"></file> <file name="register.phtml"></file> </directory> </directory> </directory> </directory> <report> <directories>23</directories> <files>57</files> </report> </tree>';
var store = new xrks.data.XmlStringStore({
xmlstring: myxml,
label: '@name',
rootItem: 'tree>directory'
});
var model = new dijit.tree.TreeStoreModel({
store: store,
childrenAttrs: ["directory", 'file']
});
var tree = new xrks.Tree({
model: model,
showRoot: false
}, "tree");
});
hookXmlStore = function(){
dojo.declare("xrks.data.XmlStringStore", [dojox.data.XmlStore], {
constructor: function(args){
this.inherited("constructor", arguments);
this.xmlstring = args.xmlstring;
this.url = "dummy.xml";
},
_fetchItems: function(request, fetchHandler, errorHandler){
var url = this._getFetchUrl(request);
if(!url){
errorHandler(new Error("No URL specified."));
return;
}
var localRequest = (!this.sendQuery ? request : {});
var data = dojox.xml.parser.parse(this.xmlstring);
var items = this._getItems(data, localRequest);
if(items && items.length > 0){
fetchHandler(items, request);
}else{
fetchHandler([], request);
}
}
});
dojo.declare("xrks.Tree", [dijit.Tree], {
getIconClass: function(item, opened) {
if (!item || item.element.nodeName == "directory") {
return opened ? "dijitFolderOpened" : "dijitFolderClosed";
}
if (item.element.nodeName == "file") {
var ext = this.model.getLabel(item).split('.').pop();
if(ext.match(/^[a-z0-9]+$/gi)) {
return "dijitLeaf fileIcon" + ext.charAt(0).toUpperCase()+ ext.slice(1);
}
}
return "dijitLeaf";
}
});
};
</script>
</head>
<body class="claro">
<div id="tree"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment