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 9cfd0c3c987e94381e588f75b1c699876b47db44..6e4026659d2bd546415c9594ed413ab4f5fe02dd 100644 (file)
--- 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 c33e06d73b8382afdd53c7c78eb1dcf662a429ed..1de28bcfa323becb315beea8c277489724ebb878 100644 (file)
--- 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 22856b0416abeba1fcbdebce7f1e8a457746507f..1f12d7c0ad188558cb11594053cb5d4735f31e5f 100644 (file)
--- 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>
+