From: Frank Lichtenheld <frank@lichtenheld.de>
Date: Sat, 9 Jun 2007 21:46:50 +0000 (+0200)
Subject: templates/html/show.tmpl: Add experimental tabbing for content
X-Git-Url: https://git.deb.at/?p=deb%2Fpackages.git;a=commitdiff_plain;h=53c5c42a5e402b991fd316fcec148f6e5e739f55;hp=f89e34b5d8363f58e5e42f98d781503a52eb0cbc

templates/html/show.tmpl: Add experimental tabbing for content

Since the content tends to get very long and confusing, let the
user switch between "Description" (which includes the list of
binaries for source packages and the list of tags), "Dependencies",
and "Download".
---

diff --git a/static/packages.css.sed.in b/static/packages.css.sed.in
index 9cfd0c3..6e40266 100644
--- a/static/packages.css.sed.in
+++ b/static/packages.css.sed.in
@@ -28,7 +28,7 @@ h1 {
 	clear: both;
 }
 
-#pdesc, #ptags, #pdeps, #pdownload {
+#pdesc, #pbinaries, #ptags, #pdeps, #pdownload {
 	margin-left: 1em;
 	margin-right: 1em;
 }
@@ -316,6 +316,18 @@ table#pdeplegend, #pdownload table {
 #pnavbar a:hover {
 }
 
+#ptablist ul {
+	display: inline;
+	list-style-type: none; 
+	padding-left:  0px;
+	line-height: 1.5em;
+}
+#ptablist ul li {
+	display: inline;
+	margin: 0 .25em;
+	white-space: nowrap;
+}
+
 .p_js_elem { 
              font-size: smaller;
 }
diff --git a/static/packages.js b/static/packages.js
index c33e06d..1de28bc 100644
--- a/static/packages.js
+++ b/static/packages.js
@@ -23,3 +23,127 @@ function toggleDisplay(obj) {
 	else
 		obj.style.display = "none";
 }
+
+function hide_tab(id) {
+	var tab = document.getElementById(id);
+	if (tab) {
+		tab.style.display = "none";
+	}
+	var item = document.getElementById(id+"link");
+	if (item) {
+		item.style.fontWeight = "normal";
+	}
+}
+
+function show_tab(id) {
+	var tab = document.getElementById(id);
+	if (tab) {
+		tab.style.display = "";
+	}
+	var item = document.getElementById(id+"link");
+	if (item) {
+		item.style.fontWeight = "bold";
+	}
+	var item = document.getElementById("palllink");
+	if (item) {
+		item.style.fontWeight = "normal";
+	}
+}
+
+function init_tab_list(id) {
+	hide_tab("pdeps");
+	hide_tab("pdownload");
+	show_tab("pdesctab");
+	show_tab("pbinaries");
+
+	var tablist = document.getElementById(id);
+	if (tablist) {
+		var list = document.createElement("ul");
+		if (document.getElementById("pdesctab")) {
+			var item = document.createElement("li");
+			item.setAttribute("id","pdesctablink");
+			var link = document.createElement("a");
+			link.setAttribute("href","javascript:go_to_tab(\"pdesctab\")");
+			var txt = document.createTextNode("[ Description ]");
+			link.appendChild(txt);
+			item.appendChild(link);
+			list.appendChild(item);
+		}
+		if (document.getElementById("pbinaries")) {
+			var item = document.createElement("li");
+			item.setAttribute("id","pbinarieslink");
+			var link = document.createElement("a");
+			link.setAttribute("href","javascript:go_to_tab(\"pbinaries\")");
+			var txt = document.createTextNode("[ Description ]");
+			link.appendChild(txt);
+			item.appendChild(link);
+			list.appendChild(item);
+		}
+		if (document.getElementById("pdeps")) {
+			var item = document.createElement("li");
+			item.setAttribute("id","pdepslink");
+			var link = document.createElement("a");
+			link.setAttribute("href","javascript:go_to_tab(\"pdeps\")");
+			var txt = document.createTextNode("[ Dependencies ]");
+			link.appendChild(txt);
+			item.appendChild(link);
+			list.appendChild(item);
+		}
+		if (document.getElementById("pdownload")) {
+			var item = document.createElement("li");
+			item.setAttribute("id","pdownloadlink");
+			var link = document.createElement("a");
+			link.setAttribute("href","javascript:go_to_tab(\"pdownload\")");
+			var txt = document.createTextNode("[ Download ]");
+			link.appendChild(txt);
+			item.appendChild(link);
+			list.appendChild(item);
+		}
+		if (list.childNodes.length > 0) {
+			var item = document.createElement("li");
+			item.setAttribute("id","palllink");
+			var link = document.createElement("a");
+			link.setAttribute("href","javascript:show_all_tabs()");
+			var txt = document.createTextNode("[ All ]");
+			link.appendChild(txt);
+			item.appendChild(link);
+			list.appendChild(item);
+			
+		}
+		tablist.appendChild(list);
+	}
+	show_tab("pdesctab");
+	show_tab("pbinaries");
+}
+
+function go_to_tab(id) {
+	if (id == "pdeps") {
+		hide_tab("pdesctab");
+		hide_tab("pbinaries");
+		hide_tab("pdownload");
+		show_tab("pdeps");
+	}
+	if (id == "pdesctab" || id == "pbinaries") {
+		hide_tab("pdeps");
+		hide_tab("pdownload");
+		show_tab("pdesctab");
+		show_tab("pbinaries");
+	}
+	if (id == "pdownload") {
+		hide_tab("pdesctab");
+		hide_tab("pbinaries");
+		hide_tab("pdeps");
+		show_tab("pdownload");
+	}
+}
+
+function show_all_tabs() {
+	show_tab("pdesctab");
+	show_tab("pbinaries");
+	show_tab("pdeps");
+	show_tab("pdownload");
+	var item = document.getElementById("palllink");
+	if (item) {
+		item.style.fontWeight = "bold";
+	}
+}
\ No newline at end of file
diff --git a/templates/html/show.tmpl b/templates/html/show.tmpl
index 22856b0..1f12d7c 100644
--- a/templates/html/show.tmpl
+++ b/templates/html/show.tmpl
@@ -144,6 +144,11 @@ Do not install it on a normal Debian system.</p>
 </div>
 [% END %]
 
+<div id="ptablist">
+</div>
+
+[% IF desc %]
+<div id="pdesctab">
 <div id="pdesc">
 [% UNLESS is_virtual %]
 	[% IF desc.short %]
@@ -184,9 +189,11 @@ Do not install it on a normal Debian system.</p>
     <dd>[% desc %]</dd>
   [% '</dl></div>' IF loop.last %]
 [% END %]
+</div> <!-- pdesctab -->
+[% END %]
 
 [% FOREACH binaries %]
-  [% IF loop.first %]<div class="pdesc">The following binary packages are built from this source package:<dl>[% END %]
+  [% IF loop.first %]<div id="pbinaries">The following binary packages are built from this source package:<dl>[% END %]
     <dt>[% IF available %]<a href="[% make_url(name,'','source','') %]">[% name %]</a>[% ELSE %][% name %][% END %]</dt>
     <dd>[% desc %]</dd>    
   [% '</dl></div>' IF loop.last %]
@@ -295,3 +302,5 @@ Do not install it on a normal Debian system.</p>
   [%- END %]
 [% END %]
 
+<script type="text/javascript">init_tab_list("ptablist")</script>
+