From 46af948c42ad440f62ad931eef65e33c7e863ff2 Mon Sep 17 00:00:00 2001
From: Dieter Hametner <dh (plus) vdr (at) gekrumbel (dot) de>
Date: Sat, 6 Jan 2007 21:48:26 +0000
Subject: Collapsable treeview of recordings working

---
 Makefile               |  5 ++--
 css/styles.css         | 51 ++++++++++----------------------
 javascript/treeview.js | 80 +++++++++++++++++++++++++++++++-------------------
 pages/recordings.ecpp  | 21 ++++++-------
 4 files changed, 79 insertions(+), 78 deletions(-)

diff --git a/Makefile b/Makefile
index 95bc4ca..364d8bb 100644
--- a/Makefile
+++ b/Makefile
@@ -1,7 +1,7 @@
 #
 # Makefile for a Video Disk Recorder plugin
 #
-# $Id: Makefile,v 1.25 2007/01/05 22:26:58 tadi Exp $
+# $Id: Makefile,v 1.26 2007/01/06 21:48:26 tadi Exp $
 
 # The official name of this plugin.
 # This name will be used in the '-P...' option of VDR to load the plugin.
@@ -61,7 +61,8 @@ SUBDIRS   = httpd pages css images javascript
 PLUGINOBJS = $(PLUGIN).o thread.o tntconfig.o setup.o i18n.o timers.o \
              tools.o recordings.o
 
-WEBLIBS    = pages/libpages.a css/libcss.a images/libimages.a
+WEBLIBS    = pages/libpages.a css/libcss.a images/libimages.a \
+	     javascript/libjavascript.a
 
 ### Default rules:
 
diff --git a/css/styles.css b/css/styles.css
index c6a31a7..d13ef79 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -134,11 +134,9 @@ table.timers tr td.head {
 	padding: 3px;
 }
 
-<#
-  ##########################
-  #  Schedule
-  ##########################
-#>
+/*
+ * Schedule
+ */
 
 table.schedule {
 	margin-top: 10px;
@@ -163,42 +161,23 @@ table.schedule tr.active {
 	background: #DEE6EE;
 }
 
-<#
-  ##########################
-  #  Recordings
-  ##########################
-#>
+/*
+ *  Recordings
+ */
 
-table.recording {
-	margin-top: 10px;
-	border: 1px solid #6D96A9; 
+.recordings ul {
+	list-style-type: none;
+        /* padding: 0px; */
+        margin: 0px;
 }
 
-table.recording tr td.head {
-	background: #6D96A9;
-	color: white;
-	font-weight: bold;
-	margin: 0;
-	padding: 3px;
+.recordings img {
+        border: 0px solid white;
 }
 
-table.recording tr td {
-	vertical-align: top;
-	padding: 3px 7px 3px 3px;
-}
-
-
-table.recording tr.active {
-	background: #DEE6EE;
-}
-
-
-
-<#
-  ##########################
-  #  Remote Control Keypad
-  ##########################
-#>
+/*
+ *  Remote Control Keypad
+ */
 
 table.keypad {
 	margin-top: 10px;
diff --git a/javascript/treeview.js b/javascript/treeview.js
index d0041a8..7adbc5b 100644
--- a/javascript/treeview.js
+++ b/javascript/treeview.js
@@ -4,43 +4,63 @@
 // --- Adapted: Dieter Hametner		      --
 // --- Version: 0.2          Date: 13-6-2001  --
 // ---------------------------------------------
-function Toggle(node)
+
+function findSibling(node, name)
 {
-	// Unfold the branch if it isn't visible
-	if (node.nextSibling.style.display == 'none')
-	{
-		// Change the image (if there is an image)
-		if (node.childNodes.length > 0)
-		{
-			if (node.childNodes.item(0).nodeName == "IMG")
-			{
-				node.childNodes.item(0).src = "minus.png";
-			}
-			if (node.childNodes.item(1).nodeName == "IMG")
-			{
-				node.childNodes.item(1).src = "folder_open.png";
+	while ((node.nextSibling.nodeType != Node.ELEMENT_NODE)
+	       || (node.nextSibling.nodeName != name)) {
+		node = node.nextSibling;
+	}
+	if (node.nextSibling.nodeName == name)
+		return node.nextSibling;
+
+	return null;
+}
+
+function findImageNode(node, className)
+{
+	for (var idx = 0; idx < node.childNodes.length; idx++) {
+		var n = node.childNodes.item(idx);
+		if ((n.nodeType == Node.ELEMENT_NODE) && (n.nodeName == "IMG")) {
+			attr = n.getAttributeNode("class");
+			if ((attr != null) && (attr.nodeValue == className)) {
+				return n;
 			}
 		}
+	}
+	return null;
+}
 
-		node.nextSibling.style.display = 'block';
+function setImages(node, expand, folder)
+{
+	// Change the image (if there is an image)
+	if (node.childNodes.length > 0)
+	{
+		expandNode = findImageNode(node, "recording_expander");
+		if (expandNode != null)
+			expandNode.src = expand;
+		folderNode = findImageNode(node, "recording_folder");
+		if (folderNode != null)
+			folderNode.src = folder;
+	}
+}
+
+function Toggle(node)
+{
+	// Unfold the branch if it isn't visible
+	sibling = findSibling(node, "UL");
+	if (sibling == null)
+		return;
+
+	if (sibling.style.display == 'none')
+	{
+		setImages(node, "minus.png", "folder_open.png");
+		sibling.style.display = 'block';
 	}
 	// Collapse the branch if it IS visible
 	else
 	{
-		// Change the image (if there is an image)
-		if (node.childNodes.length > 0)
-		{
-			if (node.childNodes.item(0).nodeName == "IMG")
-			{
-				node.childNodes.item(0).src = "plus.png";
-			}
-			if (node.childNodes.item(1).nodeName == "IMG")
-			{
-				node.childNodes.item(1).src = "folder_closed.png";
-			}
-		}
-
-		node.nextSibling.style.display = 'none';
+		setImages(node, "plus.png", "folder_closed.png");
+		sibling.style.display = 'none';
 	}
-
 }
diff --git a/pages/recordings.ecpp b/pages/recordings.ecpp
index 97ef983..e307bed 100644
--- a/pages/recordings.ecpp
+++ b/pages/recordings.ecpp
@@ -19,8 +19,8 @@ RecordingsTree recordingsTree;
 <html>
 	<head>
 		<title>VDR-Live - <$ tr("Recordings") $></title>
-		<link rel="stylesheet" type="text/css" href="/styles.css" />
-		<script src="treetoggle.js" type="text/javascript" />
+		<link rel="stylesheet" type="text/css" href="styles.css" />
+		<script src="treeview.js" type="text/javascript" />
 	</head>
 	<body>
 		<div class="left_area">
@@ -67,11 +67,12 @@ for (iter = recordingsTree.begin(path); iter != end; iter++) {
 }>
 	<li class="recording">
 %	if (recItem->IsDir()) {
+		<a onClick="Toggle(this)" href="#">
 %		// Die folgenden img-Tags muessen direkt auf einander folgen
-%		// wegen dem etwas 'beschraenkten' treetoggle.js.
-		<a onClick="Toggle(this)" href="#"><img src="/<$ collapseimg $>" alt="" /><img src="/<$ folderimg $>" alt="" />
-		<span class="recordingname"><$ recItem->Name() $></span>
-		</a><{
+		<img class="recording_expander" src="<$ collapseimg $>" alt="" /><img class="recording_folder" src="<$ folderimg $>" alt="" />
+		<span class="recording_name"><$ recItem->Name() $></span>
+		</a>
+<{
 		cxxtools::QueryParams recItemParams(qparam, false);
 		for (path_type::const_iterator i = path.begin(); i != path.end(); ++i) {
 			recItemParams.add("path", *i);
@@ -83,10 +84,10 @@ for (iter = recordingsTree.begin(path); iter != end; iter++) {
 		callComp("recordings.recordings_item", request, reply, recItemParams);
 	} else {
 }>
-		<img src="/transparent.png" alt="" width="16" height="16" /><img src="/file.png" alt="file" />
-		<span class="recordingdate"><$ FormatDateTime(tr("%a, %b %d"), recItem->StartTime()) $></span>
-		<span class="recordingtime"><$ FormatDateTime(tr("%I:%M %p"), recItem->StartTime()) $></span>
-		<span class="recordingname"><$ recItem->Name() $></span>
+		<img src="transparent.png" alt="" width="16" height="16" /><img src="file.png" alt="file" />
+		<span class="recording_date"><$ FormatDateTime(tr("%a, %b %d"), recItem->StartTime()) $></span>
+		<span class="recording_time"><$ FormatDateTime(tr("%I:%M %p"), recItem->StartTime()) $></span>
+		<span class="recording_name"><$ recItem->Name() $></span>
 %	}
 	</li>
 <{
-- 
cgit v1.2.3