- 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 @@
				@@ -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 @@
				@@ -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/css/mocha.css
+++ b/src/webui/css/mocha.css
@ -892,36 +892,36 @@ div.mochaToolbarWrapper.bottom {
				@@ -892,36 +892,36 @@ div.mochaToolbarWrapper.bottom {
 	padding-bottom: 5px;	
 }

-/* Folder Tree */
-
-.tree {
-	font-size: 11px;
-	line-height: 15px;
-	margin: 0;
-}
-
-.tree ul {
-	margin: 0;
-}
-
-.tree li {
-	list-style-type: none;
-	white-space: nowrap;
-}
-
-.tree li a {
-	color: #3f3f3f;	
-}	
-
-.tree li img {
-	vertical-align: middle;
-	width: 18px;
-	height: 18px;
-	overflow: hidden;
-}
-
-.tree li span {
-	padding-left: 2px;
+/* Folder Tree */
+
+.tree {
+	font-size: 11px;
+	line-height: 15px;
+	margin: 0;
+}
+
+.tree ul {
+	margin: 0;
+}
+
+.tree li {
+	list-style-type: none;
+	white-space: nowrap;
+}
+
+.tree li a {
+	color: #3f3f3f;	
+}	
+
+.tree li img {
+	vertical-align: middle;
+	width: 18px;
+	height: 18px;
+	overflow: hidden;
+}
+
+.tree li span {
+	padding-left: 2px;
 }

 /* View Toggle */
--- a/src/webui/index.html
+++ b/src/webui/index.html
@ -16,6 +16,7 @@
				@@ -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 @@
				@@ -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 @@
				@@ -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');
+	});
+	
+}