Moodle block to display course files in a YUI TreeView widget. Includes a bunch of config settings that allow a teacher/admin to specify:
- which folder from their files directory should be displayed
- how deeply the folders should be crawled and made visible
- what the name of the block should be
Note: This block only displays files and folders from the course files area. It does not include course activities, other resources likes web links, and broader control panel or course topic/week type navigation. You should consider existing blocks like "YUI Course Menu" for that purpose.INSTALLATION:
This should be a standard block installation. The only external dependencies are the YUI and JSON libraries which will already be installed with Moodle versions 1.8 or later. YUI was available in Moodle v1.7 but the JSON lib was not.
- expand the archive into the /blocks/ folder of your Moodle root
- visit the notifications page as an admin and the block will install
The block should perform without problem in any browser supporting the YUI library. We have specifically tested the following combinations:
- Windows XP : Firefox 2, Firefox 3, IE7, IE6
- Windows Vista : Firefox 3, IE7
- Mac OS/X : Firefox 3, Safari 3
- Ubuntu Linux : Firefox 3
The YUI libs were first introduced to Moodle mid 2006 to support AJAX work with a major upgrade to them in Aug 2007. IMPLEMENTATION:
The block uses an OOP approach instantiating a dir_tree object through the class file included with this distribution.
After fetching the directory data from a method in the dir_tree class the data is echo'd out to the browser encoded in JSON format so that the client can invoke and render the tree using the YUI JS libraries. A static version of the tree is also written out to the client in case it doesn't support JS.
The browser needs to load dir_tree.js (url versioned so its not cached) and the YUI JS libs, and also needs a <DIV> element to pour the tree into. The browser also needs access to the css file which contains display styles for the tree.
The block class includes methods which handle generating all the HTML for these includes.
dir_tree.js is loaded with a 'defer' switch and boot-straps itself when the YAHOO.util.Event.onDOMReady event fires which then builds the tree in the browser.
When the tree is ready for display the <DIV> in the page that holds the static non-JS version is hidden and the new tree drawn in its place. A unique ID is generated for the DIVs so we can manipulate them without worrying about another instance of a dir_tree being on the same page.
One YUI feature that did change that affects the libs as shipped originally with Moodle v1.8 is the onDOMReady was not present, I've handled this by doing a try-catch and reverting to a window.load instead
The block uses a local lang folder for the interface strings, feel free to translate these and they will be included in future releases.
The dir_tree class functionality can be used by other blocks or modules. A sample use of it is included for modifying the mod/resource/type/directory class to also use the YUI tree. The class has been written in such a way that it is only loosely connected to Moodle internals and paths, after constructing the object you simply pass the wwwroot and dataroot locations into it. It should be usable outside of a Moodle environment with little effort.
Certain special folders are hidden from display, e.g. moddata & backupdata
Icons for the various file types displayed in the tree are sourced from the main /pix/f folder of Moodle and referenced in the included style.css file.