better show/hide transcripts

classes/WhatDidTheySayAdmin.inc

@@ -76,7 +76,9 @@ class WhatDidTheySayAdmin {
     add_filter('the_language_name', array(&$this, 'the_language_name'), 10, 2);
     add_filter('the_matching_transcript_excerpts', array(&$this, 'the_matching_transcript_excerpts'), 10, 3);
     add_filter('the_transcript_language_name', array(&$this, 'the_transcript_language_name'), 10, 3);
-    add_filter('the_transcript_format_string', array(&$this, 'the_transcript_format_string'), 10);
+    add_filter('the_transcript_format_string', array(&$this, 'the_transcript_format_string'));
+
+    add_filter('the_transcript_opener', array(&$this, 'the_transcript_opener'));
     
     add_filter('template_redirect', array(&$this, 'template_redirect'));
 
@@ -141,6 +143,15 @@ class WhatDidTheySayAdmin {
     return $content . ob_get_clean();
   }
 
+  function the_transcript_opener($content = '') {
+    ob_start(); ?>
+    <div class="wdts-transcript-opener"> [
+      <a href="#" class="wdts-opener"><?php _e('Show transcripts') ?></a>
+      <a href="#" class="wdts-closer"><?php _e('Hide transcripts') ?></a>
+    ] </div>
+    <?php return ob_get_clean();
+  }
+
   /**
    * Filter for WP_Query#get_posts to add searching for transcripts.
    */

js/toggle-transcript.js

@@ -60,25 +60,38 @@ WhatDidTheySay.build_bundle_header = function(bundle) {
   bundle.insert({ top: new_header })
 }
 
-$$('.wdts-transcript-bundle').each(function(d) {
-  if (d.hasClassName('wdts-hide-transcript')) {
-    d.hide();
+$$('.wdts-transcript-container').each(function(d) {
+  var bundle = d.select('.wdts-transcript-bundle').pop();
+  var opener_container = d.select('.wdts-transcript-opener').pop();
 
-    var opener = new Element("a", { 'href': '#', 'className': 'wdts-transcript-opener' }).update(WhatDidTheySay.messages.show_transcripts);
+  if (bundle && opener_container) {
+    WhatDidTheySay.build_bundle_header(bundle);
+
+    var opener = opener_container.select('.wdts-opener').pop();
+    var closer = opener_container.select('.wdts-closer').pop();
+
+    if (opener && closer) {
       opener.observe('click', function(e) {
-      Event.stop(e);
+        opener.hide();
+        closer.show();
+        bundle.show();
+      });
 
-      if (d.visible()) {
-        d.hide();
-        opener.update(WhatDidTheySay.messages.show_transcripts);
+      closer.observe('click', function(e) {
+        closer.hide();
+        opener.show();
+        bundle.hide();
+      });
+    }
+
+    if (d.hasClassName('wdts-start-hidden')) {
+      bundle.hide();
+      closer.hide();
+      opener.show();
     } else {
-        d.show();
-        opener.update(WhatDidTheySay.messages.hide_transcripts);
+      bundle.show();
+      closer.show();
+      opener.hide();
+    }
   }
 });
-
-    d.insert({before: opener});
-  }
-
-  WhatDidTheySay.build_bundle_header(d);
-});

what-did-they-say.php

@@ -156,6 +156,9 @@ function transcripts_display($language_format = null, $show_transcripts_string =
         }
       }
 
+      $output[] = '<div class="wdts-transcript-container' . ($do_hide ? " wdts-start-hidden" : "") . '">';
+        $output[] = apply_filters('the_transcript_opener', '');
+
         $output[] = '<div class="wdts-transcript-bundle' . ($do_hide ? ' wdts-hide-transcript' : '') . '">';
 
         foreach ($transcripts as $code => $transcript) {
@@ -166,7 +169,7 @@ function transcripts_display($language_format = null, $show_transcripts_string =
           $output[] = '<div class="transcript-holder ' . $code . '">' . $transcript . '</div>';
         }
         $output[] = '</div>';
-
+      $output[] = '</div>';
     }
   }