fold/unfold threads with javascript
authorx2001corpet <x2001corpet@9869982d-c50d-0410-be91-f2a2ec7c7c7b>
Sat, 24 Mar 2007 14:19:54 +0000 (14:19 +0000)
committerFlorent Bruneau <florent.bruneau@polytechnique.org>
Fri, 4 Jan 2008 23:35:35 +0000 (00:35 +0100)
git-svn-id: svn+ssh://murphy/home/svn/banana/trunk@226 9869982d-c50d-0410-be91-f2a2ec7c7c7b

Makefile
banana/page.inc.php
banana/spool.inc.php
img/k3.gif [new file with mode: 0644]
javascript/spool_toggle.js [new file with mode: 0644]

index 85e8396..074f081 100644 (file)
--- a/Makefile
+++ b/Makefile
@@ -5,7 +5,7 @@ PKG_DIST = banana-$(VERSION)
 
 PKG_FILES = AUTHORS Changelog COPYING README Makefile TODO
 
-PKG_DIRS = banana po css examples img
+PKG_DIRS = banana po css examples img javascript
 
 VCS_FILTER = ! -name .svn
 
@@ -22,6 +22,7 @@ dist: clean pkg-dist
 
 clean:
        rm -rf locale banana/banana.inc.php
+       rm javascript/jquery.js
        make -C po clean
        make -C mbox-helper clean
 
@@ -29,13 +30,16 @@ clean:
        -rm $@
        sed -e 's,@VERSION@,$(VERSION) The Bearded Release,g' $< > $@
 
+javascript/jquery.js: 
+       wget "http://jquery.com/src/jquery-latest.pack.js" -O $@
+
 spool spool/templates_c:
        mkdir -p $@
        chmod o+w $@
 
 # banana package targets
 
-pkg-build: banana/banana.inc.php
+pkg-build: banana/banana.inc.php javascript/jquery.js
        make -C po
        make -C po clean
        make -C mbox-helper
index 1a064ff..630f1e3 100644 (file)
@@ -325,6 +325,25 @@ class BananaPage extends Smarty
         return '<img src="' . $url . '"' . $height . $width . ' alt="' . _b_($alt) . '" />';
     }
     
+    /** Build a link to one of the banana built-in javascript
+     * @param src STRING javascript name
+     * @return Javascript tag
+     */
+    public function makeJs(array $src)
+    {
+        if (function_exists('hook_makeJs')
+                && $res = hook_makeJs($src)) {
+            return $res;
+        }
+
+        $proto = empty($_SERVER['HTTPS']) ? 'http://' : 'https://';
+        $host  = $_SERVER['HTTP_HOST'];
+        $file  = dirname($_SERVER['PHP_SELF']) . '/javascript/' . $src . '.js';
+        $url   = $proto . $host . $file;
+
+        return '<script type="text/javascript" src="' . $url . '"/></script>';
+    }
+    
     /** Build a link with an image as text
      * @param params ARRAY image and location data
      * @param smarty OBJECT Smarty instance associated (null if none)
index a930c95..31f3ff6 100644 (file)
@@ -421,7 +421,7 @@ class BananaSpool
      *
      * If you want to analyse subject, you can define the function hook_formatDisplayHeader
      */
-    private function _to_html($_id, $_index, $_first=0, $_last=0, $_ref="", $_pfx_node="", $_pfx_end="", $_head=true)
+    private function _to_html($_id, $_index, $_first=0, $_last=0, $_ref="", $_pfx_node="", $_pfx_end="", $_head=true, $_pfx_id="")
     {
         static $spfx_f, $spfx_n, $spfx_Tnd, $spfx_Lnd, $spfx_snd, $spfx_T, $spfx_L, $spfx_s, $spfx_e, $spfx_I;
         if (!isset($spfx_f)) {
@@ -446,7 +446,7 @@ class BananaSpool
         if ($_index >= $_first) {
             $hc = empty($overview->children);
 
-            $res .= '<tr class="' . ($_index%2 ? 'pair' : 'impair') . ($overview->isread ? '' : ' new') . "\">\n";
+            $res .= '<tr id="'.$_pfx_id.$_id.'" class="' . ($_index%2 ? 'pair' : 'impair') . ($overview->isread ? '' : ' new') . "\">\n";
             $res .= '<td class="date">' . $this->formatDate($overview->date) . " </td>\n";
             $res .= '<td class="subj' . ($_index == $_ref ? ' cur' : '') . '"><div class="tree">'
                 . $_pfx_node .($hc ? ($_head ? $spfx_f : ($overview->parent_direct ? $spfx_s : $spfx_snd)) : $spfx_n)
@@ -484,11 +484,11 @@ class BananaSpool
                 if (sizeof($children)) {
                     $res .= $this->_to_html($child, $_index, $_first, $_last, $_ref,
                             $_pfx_end . ($overview->parent_direct ? $spfx_T : $spfx_Tnd),
-                            $_pfx_end . $spfx_I, false);
+                            $_pfx_end . $spfx_I, false,$_id.'_');
                 } else {
                     $res .= $this->_to_html($child, $_index, $_first, $_last, $_ref,
                             $_pfx_end . ($overview->parent_direct ? $spfx_L : $spfx_Lnd),
-                            $_pfx_end . $spfx_e, false);
+                            $_pfx_end . $spfx_e, false,$_id.'_');
                 }
             }
             $_index += $overview->desc;
@@ -504,7 +504,8 @@ class BananaSpool
      */
     public function toHtml($first = 0, $overview = false)
     {
-        $res = '';
+        $res = Banana::$page->makeJs('jquery');
+        $res .= Banana::$page->makeJs('spool_toggle');
 
         if (!$overview) {
             $_first = $first;
diff --git a/img/k3.gif b/img/k3.gif
new file mode 100644 (file)
index 0000000..5397861
Binary files /dev/null and b/img/k3.gif differ
diff --git a/javascript/spool_toggle.js b/javascript/spool_toggle.js
new file mode 100644 (file)
index 0000000..264773d
--- /dev/null
@@ -0,0 +1,113 @@
+/********************************************************************************
+* javascript/spool_toggle : script for folding/unfolding threads in spool
+* ------------------------
+*
+* This file is part of the banana distribution
+* Copyright: See COPYING files that comes with this distribution
+********************************************************************************/
+
+/** prevent IE from launching two opposite toggle actions at the same time
+ * Usual parameters are:
+ *  - 0 : no action is running
+ *  - 1 : folding
+ *  - 2 : unfolding  
+ */
+var banana_toggle = 0;
+
+/** Release banana_toggle a little time after action is done
+ *  called with : setTimeout(banana_release_toggle, 10);
+ */
+function banna_release_toggle() {
+  banana_toggle = 0;
+}
+
+/** Unfold a thread by showing all its sons
+ * called on the img element of the thread
+ */ 
+function banana_unfold_thread() {
+  // don't unfold if already folding somewhere
+  if (banana_toggle == 1) {
+    return;
+  }
+  banana_toggle = 2;
+  var myid = $(this).parent().parent().parent().attr("id").replace(/[0-9]+_/,"");
+  // show all sons
+  $("tr[@id^="+myid+"_]").each(banana_subunfold_thread);
+  // change tree icon and prepare for folding
+  $(this).
+    attr("src",this.src.replace(/k3/,"k2")).
+    attr("alt","*").
+    unbind("click",banana_unfold_thread).
+    click(banana_fold_thread);
+  setTimeout(banna_release_toggle, 10);
+}
+
+/** Fold a thread by hiding all its sons
+ * called on the img element of the thread
+ */ 
+function banana_fold_thread() {
+  // don't fold if already unfolding somewhere
+  if (banana_toggle == 2) {
+    return;
+  }
+  banana_toggle = 1;
+  var myid = $(this).parent().parent().parent().attr("id").replace(/[0-9]+_/,"");
+  // hide all sons
+  $("tr[@id^="+myid+"_]").each(banana_subfold_thread);
+  // change tree icon and prepare for unfolding
+  $(this).
+    attr("src",this.src.replace(/k2/,"k3")).
+    attr("alt","+").
+    unbind("click",banana_fold_thread).
+    click(banana_unfold_thread);
+  setTimeout(banna_release_toggle, 10);
+}
+
+/** Show a son of a thread when unfolding
+ * called on the tr element of the son
+ */ 
+function banana_subunfold_thread() {
+  // show the element before working on sons
+  // otherwise they could be hidden and not managed
+  $(this).show();
+  // if this son has subsons and is unfold
+  if ($("img[@alt='*']", this).size()) {
+    // show subsons
+    var myid = $(this).attr("id").replace(/[0-9]+_/,"");
+    $("tr[@id^="+myid+"_]").each(banana_subunfold_thread);
+  }
+}
+
+/** Hide a son of a thread when folding
+ * called on the tr element of the son
+ */ 
+function banana_subfold_thread() {
+  // if this son has subsons and is unfold
+  if ($("img[@alt='*']", this).size()) {
+    // hide subsons
+    var myid = $(this).attr("id").replace(/[0-9]+_/,"");
+    $("tr[@id^="+myid+"_]").each(banana_subfold_thread);
+  }
+  // hide element only after working on sons
+  // otherwise they could be hidden and not managed  
+  $(this).hide();
+}
+
+/** Fold all threads in page
+ */
+function banana_fold_all() {
+  $("tr img[alt='*'][@src*=k2]").each(banana_fold_thread);
+}
+
+/** Unfold all threads in page
+ */
+function banana_unfold_all() {
+  $("tr img[alt='+'][@src*=k3]").each(banana_unfold_thread);
+}
+
+// prepare for folding
+$(document).ready( function() {
+ $("tr img[@alt='*'][@src*='k2']").
+  css("cursor","pointer").
+  click(banana_fold_thread);
+});