- Started work on Torrent Files display (Web UI)

15 years ago · 33d77ccf39
20 changed files with 182 additions and 31 deletions
--- a/src/Icons/tree/I.gif
+++ b/src/Icons/tree/I.gif
--- a/src/Icons/tree/L.gif
+++ b/src/Icons/tree/L.gif
--- a/src/Icons/tree/Lminus.gif
+++ b/src/Icons/tree/Lminus.gif
--- a/src/Icons/tree/Lplus.gif
+++ b/src/Icons/tree/Lplus.gif
--- a/src/Icons/tree/Rminus.gif
+++ b/src/Icons/tree/Rminus.gif
--- a/src/Icons/tree/Rplus.gif
+++ b/src/Icons/tree/Rplus.gif
--- a/src/Icons/tree/T.gif
+++ b/src/Icons/tree/T.gif
--- a/src/Icons/tree/Tminus.gif
+++ b/src/Icons/tree/Tminus.gif
--- a/src/Icons/tree/Tplus.gif
+++ b/src/Icons/tree/Tplus.gif
--- a/src/Icons/tree/_closed.gif
+++ b/src/Icons/tree/_closed.gif
--- a/src/Icons/tree/_doc.gif
+++ b/src/Icons/tree/_doc.gif
--- a/src/Icons/tree/_open.gif
+++ b/src/Icons/tree/_open.gif
--- a/src/Icons/tree/minus.gif
+++ b/src/Icons/tree/minus.gif
--- a/src/Icons/tree/plus.gif
+++ b/src/Icons/tree/plus.gif
--- a/src/icons.qrc
+++ b/src/icons.qrc
@ -114,6 +114,20 @@
  <file>Icons/flags/japan.png</file>
  <file>Icons/flags/malaysia.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/view-refresh.png</file>
  <file>Icons/oxygen/file.png</file>
--- a/src/webui.qrc
+++ b/src/webui.qrc
@ -18,6 +18,7 @@
  <file>webui/scripts/excanvas-compressed.js</file>
  <file>webui/scripts/mocha.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-more.js</file>
  <file>webui/scripts/dynamicTable.js</file>
--- a/src/webui/index.html
+++ b/src/webui/index.html
@ -16,6 +16,7 @@
 	<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/client.js" charset="utf-8"></script>
 	<script type="text/javascript" src="scripts/tree.js" charset="utf-8"></script>
 </head>
 <body>
 	<div id="desktop">
--- a/src/webui/prop-files.html
+++ b/src/webui/prop-files.html
@ -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>
--- a/src/webui/scripts/tree.js
+++ b/src/webui/scripts/tree.js
@ -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');
 	});
 }