- Started work on Torrent Files display (Web UI)
BIN
src/Icons/tree/I.gif
Normal file
After Width: | Height: | Size: 66 B |
BIN
src/Icons/tree/L.gif
Normal file
After Width: | Height: | Size: 66 B |
BIN
src/Icons/tree/Lminus.gif
Normal file
After Width: | Height: | Size: 92 B |
BIN
src/Icons/tree/Lplus.gif
Normal file
After Width: | Height: | Size: 96 B |
BIN
src/Icons/tree/Rminus.gif
Normal file
After Width: | Height: | Size: 89 B |
BIN
src/Icons/tree/Rplus.gif
Normal file
After Width: | Height: | Size: 91 B |
BIN
src/Icons/tree/T.gif
Normal file
After Width: | Height: | Size: 69 B |
BIN
src/Icons/tree/Tminus.gif
Normal file
After Width: | Height: | Size: 109 B |
BIN
src/Icons/tree/Tplus.gif
Normal file
After Width: | Height: | Size: 97 B |
BIN
src/Icons/tree/_closed.gif
Normal file
After Width: | Height: | Size: 242 B |
BIN
src/Icons/tree/_doc.gif
Normal file
After Width: | Height: | Size: 193 B |
BIN
src/Icons/tree/_open.gif
Normal file
After Width: | Height: | Size: 351 B |
BIN
src/Icons/tree/minus.gif
Normal file
After Width: | Height: | Size: 98 B |
BIN
src/Icons/tree/plus.gif
Normal file
After Width: | Height: | Size: 88 B |
@ -114,6 +114,20 @@
|
|||||||
<file>Icons/flags/japan.png</file>
|
<file>Icons/flags/japan.png</file>
|
||||||
<file>Icons/flags/malaysia.png</file>
|
<file>Icons/flags/malaysia.png</file>
|
||||||
<file>Icons/flags/philippines.png</file>
|
<file>Icons/flags/philippines.png</file>
|
||||||
|
<file>Icons/tree/Lplus.gif</file>
|
||||||
|
<file>Icons/tree/Tminus.gif</file>
|
||||||
|
<file>Icons/tree/Tplus.gif</file>
|
||||||
|
<file>Icons/tree/_open.gif</file>
|
||||||
|
<file>Icons/tree/plus.gif</file>
|
||||||
|
<file>Icons/tree/Rminus.gif</file>
|
||||||
|
<file>Icons/tree/Lminus.gif</file>
|
||||||
|
<file>Icons/tree/T.gif</file>
|
||||||
|
<file>Icons/tree/_closed.gif</file>
|
||||||
|
<file>Icons/tree/L.gif</file>
|
||||||
|
<file>Icons/tree/_doc.gif</file>
|
||||||
|
<file>Icons/tree/I.gif</file>
|
||||||
|
<file>Icons/tree/minus.gif</file>
|
||||||
|
<file>Icons/tree/Rplus.gif</file>
|
||||||
<file>Icons/oxygen/mail-queue.png</file>
|
<file>Icons/oxygen/mail-queue.png</file>
|
||||||
<file>Icons/oxygen/view-refresh.png</file>
|
<file>Icons/oxygen/view-refresh.png</file>
|
||||||
<file>Icons/oxygen/file.png</file>
|
<file>Icons/oxygen/file.png</file>
|
||||||
|
@ -18,6 +18,7 @@
|
|||||||
<file>webui/scripts/excanvas-compressed.js</file>
|
<file>webui/scripts/excanvas-compressed.js</file>
|
||||||
<file>webui/scripts/mocha.js</file>
|
<file>webui/scripts/mocha.js</file>
|
||||||
<file>webui/scripts/mocha-init.js</file>
|
<file>webui/scripts/mocha-init.js</file>
|
||||||
|
<file>webui/scripts/tree.js</file>
|
||||||
<file>webui/scripts/mootools-1.2-core-yc.js</file>
|
<file>webui/scripts/mootools-1.2-core-yc.js</file>
|
||||||
<file>webui/scripts/mootools-1.2-more.js</file>
|
<file>webui/scripts/mootools-1.2-more.js</file>
|
||||||
<file>webui/scripts/dynamicTable.js</file>
|
<file>webui/scripts/dynamicTable.js</file>
|
||||||
|
@ -892,36 +892,36 @@ div.mochaToolbarWrapper.bottom {
|
|||||||
padding-bottom: 5px;
|
padding-bottom: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Folder Tree */
|
/* Folder Tree */
|
||||||
|
|
||||||
.tree {
|
.tree {
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
line-height: 15px;
|
line-height: 15px;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tree ul {
|
.tree ul {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tree li {
|
.tree li {
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tree li a {
|
.tree li a {
|
||||||
color: #3f3f3f;
|
color: #3f3f3f;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tree li img {
|
.tree li img {
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
width: 18px;
|
width: 18px;
|
||||||
height: 18px;
|
height: 18px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tree li span {
|
.tree li span {
|
||||||
padding-left: 2px;
|
padding-left: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* View Toggle */
|
/* View Toggle */
|
||||||
|
@ -16,6 +16,7 @@
|
|||||||
<script type="text/javascript" src="scripts/progressbar.js"></script>
|
<script type="text/javascript" src="scripts/progressbar.js"></script>
|
||||||
<script type="text/javascript" src="scripts/dynamicTable.js" charset="utf-8"></script>
|
<script type="text/javascript" src="scripts/dynamicTable.js" charset="utf-8"></script>
|
||||||
<script type="text/javascript" src="scripts/client.js" charset="utf-8"></script>
|
<script type="text/javascript" src="scripts/client.js" charset="utf-8"></script>
|
||||||
|
<script type="text/javascript" src="scripts/tree.js" charset="utf-8"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="desktop">
|
<div id="desktop">
|
||||||
|
@ -1 +1,12 @@
|
|||||||
CONTENT
|
<ul id="fileTree" class="tree">
|
||||||
|
<li class="folder f-open root"><span>Examples</span>
|
||||||
|
<ul>
|
||||||
|
<li class="doc"><span><a>Lorem Ipsum</a></span></li>
|
||||||
|
<li class="doc"><span><a>Zero7 - Crosses</a></span></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<script type="text/javascript">
|
||||||
|
buildTree('fileTree');
|
||||||
|
</script>
|
124
src/webui/scripts/tree.js
Normal file
@ -0,0 +1,124 @@
|
|||||||
|
/*
|
||||||
|
|
||||||
|
Script: Tree.js
|
||||||
|
Create folder trees.
|
||||||
|
|
||||||
|
Copyright:
|
||||||
|
Copyright (c) 2007-2008 Greg Houston, <http://greghoustondesign.com/>.
|
||||||
|
|
||||||
|
License:
|
||||||
|
MIT-style license.
|
||||||
|
|
||||||
|
*/
|
||||||
|
|
||||||
|
function buildTree(treeID){
|
||||||
|
|
||||||
|
$$('#'+treeID+' li.folder').each(function(folder){
|
||||||
|
var folderContents = folder.getChildren('ul');
|
||||||
|
var folderImage = new Element('img', {
|
||||||
|
'src': '../images/tree/_open.gif',
|
||||||
|
'width': 18,
|
||||||
|
'height': 18
|
||||||
|
}).inject(folder, 'top');
|
||||||
|
|
||||||
|
// Determine which open and close graphic each folder gets
|
||||||
|
|
||||||
|
if (folder.hasClass('root')) {
|
||||||
|
folder.minus = '../images/tree/Rminus.gif'
|
||||||
|
folder.plus = '../images/tree/Rplus.gif'
|
||||||
|
}
|
||||||
|
else
|
||||||
|
if (folder.getNext()) {
|
||||||
|
folder.minus = '../images/tree/Tminus.gif'
|
||||||
|
folder.plus = '../images/tree/Tplus.gif'
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
folder.minus = '../images/tree/Lminus.gif'
|
||||||
|
folder.plus = '../images/tree/Lplus.gif'
|
||||||
|
}
|
||||||
|
|
||||||
|
var image = new Element('img', {
|
||||||
|
'src': folder.minus,
|
||||||
|
'width': 18,
|
||||||
|
'height': 18
|
||||||
|
}).addEvent('click', function(){
|
||||||
|
if (folder.hasClass('f-open')) {
|
||||||
|
image.setProperty('src', folder.plus);
|
||||||
|
folderImage.setProperty('src', '../images/tree/_closed.gif');
|
||||||
|
folderContents.each(function(el){
|
||||||
|
el.setStyle('display', 'none');
|
||||||
|
});
|
||||||
|
folder.removeClass('f-open');
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
image.setProperty('src', folder.minus);
|
||||||
|
folderImage.setProperty('src', '../images/tree/_open.gif');
|
||||||
|
folderContents.each(function(el){
|
||||||
|
el.setStyle('display', 'block');
|
||||||
|
});
|
||||||
|
folder.addClass('f-open');
|
||||||
|
}
|
||||||
|
}).inject(folder, 'top');
|
||||||
|
|
||||||
|
if (!folder.hasClass('f-open')) {
|
||||||
|
image.setProperty('src', folder.plus);
|
||||||
|
folderContents.each(function(el){
|
||||||
|
el.setStyle('display', 'none');
|
||||||
|
});
|
||||||
|
folder.removeClass('f-open');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add connecting branches to each file node
|
||||||
|
|
||||||
|
folderContents.each(function(element){
|
||||||
|
var docs = element.getChildren('li.doc');
|
||||||
|
docs.each(function(el){
|
||||||
|
if (el == docs.getLast() && !el.getNext()) {
|
||||||
|
new Element('img', {
|
||||||
|
'src': '../images/tree/L.gif',
|
||||||
|
'width': 18,
|
||||||
|
'height': 18
|
||||||
|
}).inject(el.getElement('span'), 'before');
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
new Element('img', {
|
||||||
|
'src': '../images/tree/T.gif',
|
||||||
|
'width': 18,
|
||||||
|
'height': 18
|
||||||
|
}).inject(el.getElement('span'), 'before');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
// Add connecting branches to each node
|
||||||
|
|
||||||
|
$$('#'+treeID+' li').each(function(node){
|
||||||
|
node.getParents('li').each(function(parent){
|
||||||
|
if (parent.getNext()) {
|
||||||
|
new Element('img', {
|
||||||
|
'src': '../images/tree/I.gif',
|
||||||
|
'width': 18,
|
||||||
|
'height': 18
|
||||||
|
}).inject(node, 'top');
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
new Element('img', {
|
||||||
|
'src': 'images/spacer.gif',
|
||||||
|
'width': 18,
|
||||||
|
'height': 18
|
||||||
|
}).inject(node, 'top');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
$$('#'+treeID+' li.doc').each(function(el){
|
||||||
|
new Element('img', {
|
||||||
|
'src': '../images/tree/_doc.gif',
|
||||||
|
'width': 18,
|
||||||
|
'height': 18
|
||||||
|
}).inject(el.getElement('span'), 'before');
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|