changelog | [dw-free] Expand/Close all cut tags on a page

[commit: http://hg.dwscoalition.org/dw-free/rev/476e15fbfc76]

http://bugs.dwscoalition.org/show_bug.cgi?id=2882

Add an expand-all / collapse-all module to all core2 styles.

Patch by
allen.

Files modified:
bin/upgrading/en.dat
bin/upgrading/s2layers/bases/layout.s2
bin/upgrading/s2layers/blanket/layout.s2
bin/upgrading/s2layers/brittle/layout.s2
bin/upgrading/s2layers/core2.s2
bin/upgrading/s2layers/core2base/layout.s2
bin/upgrading/s2layers/drifting/layout.s2
bin/upgrading/s2layers/easyread/layout.s2
bin/upgrading/s2layers/negatives/layout.s2
bin/upgrading/s2layers/skittlishdreams/layout.s2
cgi-bin/LJ/S2/DayPage.pm
cgi-bin/LJ/S2/FriendsPage.pm
cgi-bin/LJ/S2/RecentPage.pm
htdocs/img/collapseAll.gif
htdocs/img/expandAll.gif
htdocs/js/cuttag-ajax.js
--------------------------------------------------------------------------------
diff -r 3b5231ceae25 -r 476e15fbfc76 bin/upgrading/en.dat
--- a/bin/upgrading/en.dat	Fri Apr 08 16:38:09 2011 +0800
+++ b/bin/upgrading/en.dat	Fri Apr 08 18:30:30 2011 +0800
@@ -4489,7 +4489,11 @@ widget.customizetheme.nav.style=Style
 
 widget.customizetheme.title=Customize Your Theme
 
+widget.cuttag.expandAll=Expand All Cut Tags
+
 widget.cuttag.expanded=Collapse
+
+widget.cuttag.collapseAll=Collapse All Cut Tags
 
 widget.cuttag.collapsed=Expand
 
diff -r 3b5231ceae25 -r 476e15fbfc76 bin/upgrading/s2layers/bases/layout.s2
--- a/bin/upgrading/s2layers/bases/layout.s2	Fri Apr 08 16:38:09 2011 +0800
+++ b/bin/upgrading/s2layers/bases/layout.s2	Fri Apr 08 18:30:30 2011 +0800
@@ -179,6 +179,7 @@ propgroup modules {
     property use module_poweredby_group;
     property use module_credit_group;
     property use module_search_group;
+    property use module_cuttagcontrols_group;
 }
 
 ##===============================
diff -r 3b5231ceae25 -r 476e15fbfc76 bin/upgrading/s2layers/blanket/layout.s2
--- a/bin/upgrading/s2layers/blanket/layout.s2	Fri Apr 08 16:38:09 2011 +0800
+++ b/bin/upgrading/s2layers/blanket/layout.s2	Fri Apr 08 18:30:30 2011 +0800
@@ -111,6 +111,7 @@ propgroup modules {
     property use module_poweredby_group;
     property use module_credit_group;
     property use module_search_group;
+    property use module_cuttagcontrols_group;
 
     property string module_navlinks_section_override {
        values = "none|(none)|two|Fixed";
diff -r 3b5231ceae25 -r 476e15fbfc76 bin/upgrading/s2layers/brittle/layout.s2
--- a/bin/upgrading/s2layers/brittle/layout.s2	Fri Apr 08 16:38:09 2011 +0800
+++ b/bin/upgrading/s2layers/brittle/layout.s2	Fri Apr 08 18:30:30 2011 +0800
@@ -202,6 +202,7 @@ propgroup modules {
     property use module_poweredby_group;
     property use module_credit_group;
     property use module_search_group;
+    property use module_cuttagcontrols_group;
 }
 
 # explicitly define what sections the layout has available
diff -r 3b5231ceae25 -r 476e15fbfc76 bin/upgrading/s2layers/core2.s2
--- a/bin/upgrading/s2layers/core2.s2	Fri Apr 08 16:38:09 2011 +0800
+++ b/bin/upgrading/s2layers/core2.s2	Fri Apr 08 18:30:30 2011 +0800
@@ -1607,6 +1607,20 @@ set module_search_order = 15;
 set module_search_order = 15;
 set module_search_section = "one";
 
+property string[] module_cuttagcontrols_group {
+    des = "Cut Tag Controls";
+    grouptype = "module";
+}
+set module_cuttagcontrols_group = ["module_cuttagcontrols_show", "module_cuttagcontrols_order", "module_cuttagcontrols_section"];
+property bool module_cuttagcontrols_show    { grouped = 1; }
+property int  module_cuttagcontrols_order   { grouped = 1; }
+property string module_cuttagcontrols_section { grouped = 1; }
+
+set module_cuttagcontrols_show = true;
+set module_cuttagcontrols_order = 16;
+set module_cuttagcontrols_section = "one";
+
+
 ##===============================
 ## Journal style - fonts
 ##===============================
@@ -2151,6 +2165,13 @@ set text_tags = "Tags:";
 ## Text - module headings
 ##===============================
 
+property string text_module_cuttagcontrols {
+    des = "Text used for the heading for the Cut Tag Controls section";
+    maxlength = 50;
+    size = 20;
+    example = "Expand Cut Tags";
+}
+
 property string text_module_links {
     des = "Text used  for the heading of the links list";
     maxlength = 50;
@@ -2221,6 +2242,7 @@ property string text_module_credit {
     example = "Style Credit";
 }
 
+set text_module_cuttagcontrols = "Expand Cut Tags";
 set text_module_links = "Links";
 set text_module_pagesummary = "Page Summary";
 set text_module_syndicate = "Syndicate";
@@ -2598,6 +2620,11 @@ property string text_calendar_num_entrie
     des = "Text to show how many entries were made on a particular day";
     format = "plurals";
     example = "1 entry // # entries";
+}
+
+property string text_cuttagcontrols_nocuttags {
+    des = "Text to show when there are no cuts on the page";
+    example = "No cut tags";
 }
 
 set text_linklist_manage = "Manage Links";
@@ -2613,6 +2640,7 @@ set text_nosubject = "(no subject)";
 set text_nosubject = "(no subject)";
 set text_nosubject_screenreader = "no subject";
 set text_calendar_num_entries = "1 entry // # entries";
+set text_cuttagcontrols_nocuttags = "No cut tags";
 
 property bool all_entrysubjects {
     des = "For all entries, display the replacement text when no subject is specified";
@@ -2944,6 +2972,7 @@ function modules_init()
     if ( $*module_customtext_show ) { $*module_sections{$*module_customtext_section}[$*module_customtext_order]=["customtext"]; }
     if ( $*module_credit_show ) { $*module_sections{$*module_credit_section}[$*module_credit_order]=["credit"]; }
     if ( $*module_search_show ) { $*module_sections{$*module_search_section}[$*module_search_order]=["search"]; }
+    if ( $*module_cuttagcontrols_show ) { $*module_sections{$*module_cuttagcontrols_section}[$*module_cuttagcontrols_order]=["cuttagcontrols"]; }
 
     #if ( $*module_%%mod%%_show ) { $*module_sections{$*module_%%mod%%_section }[$*module_%%mod%%_order]=["%%mod%%"]; }
 }
@@ -4341,6 +4370,17 @@ function print_module_credit() {
     }
 }
 
+function print_module_cuttagcontrols() {
+    var Page p = get_page();
+
+    open_module("cuttagcontrols", $*text_module_cuttagcontrols, "");
+
+    print safe """<span class=\"cutTagControls\"><span style=\"font-size: smaller;\">$*text_cuttagcontrols_nocuttags</span></span>""";
+
+    close_module();
+
+}
+
 function handle_module_group_array(string[][] list) {
     foreach var string[] item ($list) {
         var string module = $item[0];
@@ -4387,6 +4427,9 @@ function handle_module_group_array(strin
         }
         elseif ($module == "search") {
             print_module_search();
+        }
+        elseif ($module == "cuttagcontrols") {
+            print_module_cuttagcontrols();
         }
     }
 }
diff -r 3b5231ceae25 -r 476e15fbfc76 bin/upgrading/s2layers/core2base/layout.s2
--- a/bin/upgrading/s2layers/core2base/layout.s2	Fri Apr 08 16:38:09 2011 +0800
+++ b/bin/upgrading/s2layers/core2base/layout.s2	Fri Apr 08 18:30:30 2011 +0800
@@ -145,6 +145,7 @@ propgroup modules {
     property use module_poweredby_group;
     property use module_credit_group;
     property use module_search_group;
+    property use module_cuttagcontrols_group;
 }
 
 # explicitly define what sections the layout has available
diff -r 3b5231ceae25 -r 476e15fbfc76 bin/upgrading/s2layers/drifting/layout.s2
--- a/bin/upgrading/s2layers/drifting/layout.s2	Fri Apr 08 16:38:09 2011 +0800
+++ b/bin/upgrading/s2layers/drifting/layout.s2	Fri Apr 08 18:30:30 2011 +0800
@@ -161,6 +161,7 @@ propgroup modules
     property use module_time_group;
     property use module_credit_group;
     property use module_search_group;
+    property use module_cuttagcontrols_group;
 }
 
 set module_layout_sections     = "none|(none)|one|Sidebar|two|Footer";
diff -r 3b5231ceae25 -r 476e15fbfc76 bin/upgrading/s2layers/easyread/layout.s2
--- a/bin/upgrading/s2layers/easyread/layout.s2	Fri Apr 08 16:38:09 2011 +0800
+++ b/bin/upgrading/s2layers/easyread/layout.s2	Fri Apr 08 18:30:30 2011 +0800
@@ -108,6 +108,7 @@ propgroup modules {
     property use module_time_group;
     property use module_poweredby_group;
     property use module_credit_group;
+    property use module_cuttagcontrols_group;
 }
 
 # explicitly define what sections the layout has available
diff -r 3b5231ceae25 -r 476e15fbfc76 bin/upgrading/s2layers/negatives/layout.s2
--- a/bin/upgrading/s2layers/negatives/layout.s2	Fri Apr 08 16:38:09 2011 +0800
+++ b/bin/upgrading/s2layers/negatives/layout.s2	Fri Apr 08 18:30:30 2011 +0800
@@ -146,6 +146,7 @@ propgroup modules {
     property use module_poweredby_group;
     property use module_credit_group;
     property use module_search_group;
+    property use module_cuttagcontrols_group;
 }
 
 
diff -r 3b5231ceae25 -r 476e15fbfc76 bin/upgrading/s2layers/skittlishdreams/layout.s2
--- a/bin/upgrading/s2layers/skittlishdreams/layout.s2	Fri Apr 08 16:38:09 2011 +0800
+++ b/bin/upgrading/s2layers/skittlishdreams/layout.s2	Fri Apr 08 18:30:30 2011 +0800
@@ -215,6 +215,7 @@ propgroup modules {
     property use module_customtext_group;
     property use module_credit_group;
     property use module_search_group;
+    property use module_cuttagcontrols_group;
 
     property string module_navlinks_section_override {
        values = "none|(none)|one|Header|two|Sidebar";
diff -r 3b5231ceae25 -r 476e15fbfc76 cgi-bin/LJ/S2/DayPage.pm
--- a/cgi-bin/LJ/S2/DayPage.pm	Fri Apr 08 16:38:09 2011 +0800
+++ b/cgi-bin/LJ/S2/DayPage.pm	Fri Apr 08 18:30:30 2011 +0800
@@ -37,10 +37,14 @@ sub DayPage
     LJ::need_res( 'js/cuttag-ajax.js' );
     my $collapsed = BML::ml( 'widget.cuttag.collapsed' );
     my $expanded = BML::ml( 'widget.cuttag.expanded' );
+    my $collapseAll = BML::ml( 'widget.cuttag.collapseAll' );
+    my $expandAll = BML::ml( 'widget.cuttag.expandAll' );
     $p->{'head_content'} .= qq[
   <script type='text/javascript'>
   expanded = '$expanded';
   collapsed = '$collapsed';
+  collapseAll = '$collapseAll';
+  expandAll = '$expandAll';
   </script>
     ];
 
diff -r 3b5231ceae25 -r 476e15fbfc76 cgi-bin/LJ/S2/FriendsPage.pm
--- a/cgi-bin/LJ/S2/FriendsPage.pm	Fri Apr 08 16:38:09 2011 +0800
+++ b/cgi-bin/LJ/S2/FriendsPage.pm	Fri Apr 08 18:30:30 2011 +0800
@@ -40,10 +40,14 @@ sub FriendsPage
     LJ::need_res( 'js/cuttag-ajax.js' );
     my $collapsed = BML::ml( 'widget.cuttag.collapsed' );
     my $expanded = BML::ml( 'widget.cuttag.expanded' );
+    my $collapseAll = BML::ml( 'widget.cuttag.collapseAll' );
+    my $expandAll = BML::ml( 'widget.cuttag.expandAll' );
     $p->{'head_content'} .= qq[
   <script type='text/javascript'>
   expanded = '$expanded';
   collapsed = '$collapsed';
+  collapseAll = '$collapseAll';
+  expandAll = '$expandAll';
   </script>
     ];
 
diff -r 3b5231ceae25 -r 476e15fbfc76 cgi-bin/LJ/S2/RecentPage.pm
--- a/cgi-bin/LJ/S2/RecentPage.pm	Fri Apr 08 16:38:09 2011 +0800
+++ b/cgi-bin/LJ/S2/RecentPage.pm	Fri Apr 08 18:30:30 2011 +0800
@@ -92,10 +92,14 @@ sub RecentPage
     LJ::need_res( 'js/cuttag-ajax.js' );
     my $collapsed = BML::ml( 'widget.cuttag.collapsed' );
     my $expanded = BML::ml( 'widget.cuttag.expanded' );
+    my $collapseAll = BML::ml( 'widget.cuttag.collapseAll' );
+    my $expandAll = BML::ml( 'widget.cuttag.expandAll' );
     $p->{'head_content'} .= qq[
   <script type='text/javascript'>
   expanded = '$expanded';
   collapsed = '$collapsed';
+  collapseAll = '$collapseAll';
+  expandAll = '$expandAll';
   </script>
     ];
 
diff -r 3b5231ceae25 -r 476e15fbfc76 htdocs/img/collapseAll.gif
Binary file htdocs/img/collapseAll.gif has changed
diff -r 3b5231ceae25 -r 476e15fbfc76 htdocs/img/expandAll.gif
Binary file htdocs/img/expandAll.gif has changed
diff -r 3b5231ceae25 -r 476e15fbfc76 htdocs/js/cuttag-ajax.js
--- a/htdocs/js/cuttag-ajax.js	Fri Apr 08 16:38:09 2011 +0800
+++ b/htdocs/js/cuttag-ajax.js	Fri Apr 08 18:30:30 2011 +0800
@@ -36,16 +36,20 @@ CutTagHandler = new Class(Object, {
       DOM.removeClassName($("div-" + this.identifier), "cuttag-open");
       $('img-' + this.identifier).alt=collapsed;
       $('img-' + this.identifier).title=collapsed;
+
+      // update the expandAll/collapseAll links
+      CutTagHandler.writeExpandAllControls();
     },
 
     // opens the cut tag inline
-    open: function() {
+    // openNested if we want to open nested cuttags, too
+    open: function( openNested ) {
       var opts = {
         "async": true,
         "method": "GET",
         "url": this.ajaxUrl,
-        "onData": this.replaceCutTag.bindEventListener(this),
-        "onError": this.handleError.bindEventListener(this)
+        "onData": openNested ? this.replaceCutTagAndOpen.bindEventListener( this ) : this.replaceCutTag.bindEventListener( this ),
+        "onError": this.handleError.bindEventListener( this )
       };
 
       // ajax call.
@@ -60,7 +64,17 @@ CutTagHandler = new Class(Object, {
     // callback for the getJSON call.  if the response is an error, calls
     // handlerObj.handleError(responseObject.error).  otherwise replaces the
     // cut tag with the contents of the cut.
-    replaceCutTag: function(resObj) {
+
+    // wrapper for openNested=true
+    replaceCutTagAndOpen: function( resObj ) {
+      this.doReplaceCutTag( resObj, true );
+    },
+    // wrapper for openNested=false
+    replaceCutTag: function( resObj ) {
+      this.doReplaceCutTag( resObj, false );
+    },
+    // the actual callback
+    doReplaceCutTag: function( resObj, openNested ) {
       if (resObj.error) {
         this.handleError(resObj.error);
       } else {
@@ -80,6 +94,13 @@ CutTagHandler = new Class(Object, {
         CutTagHandler.initLinks(replaceDiv);
         LiveJournal.initPlaceholders(replaceDiv);
         LiveJournal.initPolls(replaceDiv);
+
+        // update the expandAll/collapseAll links
+        CutTagHandler.writeExpandAllControls();
+
+        if ( openNested ) {
+          CutTagHandler.openAll( replaceDiv );
+        }
       }
     }
   });
@@ -124,7 +145,97 @@ CutTagHandler.initLinks = function(paren
 // called at page load to initialize all <span> tags with the 'cuttag' class.
 CutTagHandler.initAllLinks = function() {
   CutTagHandler.initLinks(document);
+  CutTagHandler.writeExpandAllControls();
 }
 
 // calls CutTagHandler.initAllLinks on page load.
 LiveJournal.register_hook("page_load", CutTagHandler.initAllLinks);
+
+// creates a CutTagHandler for the provided span.cuttag tag
+CutTagHandler.getCutTagHandler = function( spanCutTag ) {
+  var spanid = spanCutTag.id;
+  var journal = spanid.replace( /^span-cuttag_(.*)_[0-9]+_[0-9]+/, "$1" );
+  var ditemid = spanid.replace( /^.*_([0-9]+)_[0-9]+/, "$1" );
+  var cutid = spanid.replace( /^.*_([0-9]+)/, "$1" );
+  return new CutTagHandler( journal, ditemid, cutid );
+}
+
+// returns a CutTagHandler for each cuttag span in the parent tag/document
+CutTagHandler.getAllHandlers = function( parentTag ) {
+  var returnValue = [];
+
+  var domObjects = parentTag.getElementsByTagName( "span" );
+  var items = DOM.filterElementsByClassName( domObjects, "cuttag" ) || [];
+
+  for ( var i = 0; i < items.length; i++ ) {
+    returnValue[i] = CutTagHandler.getCutTagHandler( items[i] );
+  }
+  return returnValue;
+}
+
+// Opens all cuttags in the given tag (call with document for the entire page)
+CutTagHandler.openAll = function( parentTag ) {
+  var cutTags = CutTagHandler.getAllHandlers( parentTag );
+
+  for ( var i = 0; i < cutTags.length; i++ ) {
+    if ( ! cutTags[i].isOpen() ) {
+      cutTags[i].open( true );
+    }
+  }
+}
+
+// Closes all cuttags in the given tag (call with document for the entire page)
+CutTagHandler.closeAll = function( parentTag ) {
+  var cutTags = CutTagHandler.getAllHandlers( parentTag );
+
+  for ( var i = 0; i < cutTags.length; i++ ) {
+    if ( cutTags[i].isOpen() ) {
+      cutTags[i].close();
+    }
+  }
+}
+
+// writes the expand all/close all controls
+CutTagHandler.writeExpandAllControls = function() {
+  // writes to each span.cutTagControls
+  var domObjects = document.getElementsByTagName( "span" );
+  var items = DOM.filterElementsByClassName( domObjects, "cutTagControls" ) || [];
+  if ( items != null && items.length > 0 ) {
+    var cutTags = CutTagHandler.getAllHandlers( document );
+    if ( cutTags.length > 0 ) {
+      var writeOpen = false;
+      var writeClosed = false;
+      var ariaOpen = "";
+      var ariaClose = "";
+      // see which links we should write
+      for ( var i = 0; i < cutTags.length; i++ ) {
+        if ( cutTags[i].isOpen() ) {
+          writeClosed = true;
+          ariaClose += " div-cuttag_" + cutTags[i].data.journal + "_" + cutTags[i].data.ditemid + "_" + cutTags[i].data.cutid;
+        } else {
+          writeOpen = true;
+          ariaOpen += " div-cuttag_" + cutTags[i].data.journal + "_" + cutTags[i].data.ditemid + "_" + cutTags[i].data.cutid;
+        }
+      }
+
+      var htmlString = "";
+      if ( writeOpen ) {
+        htmlString = '<a href = "javascript:CutTagHandler.openAll(document)"><img style="border: 0;" src="' + Site.imgprefix + '/collapseAll.gif" aria-controls="' + ariaOpen + '" alt="' + expandAll + '" title="' + expandAll + '"/></a> ';
+      } else {
+        htmlString = '<img style="border: 0; opacity: 0.4; filter: alpha(opacity=40); zoom: 1;" src="' + Site.imgprefix + '/collapseAll.gif" alt="' + expandAll + '" title="' + expandAll + '"/> ';
+      }
+      if ( writeClosed ) {
+        htmlString = htmlString + '<a href = "javascript:CutTagHandler.closeAll(document)"><img style="border: 0;" src="' + Site.imgprefix + '/expandAll.gif" aria-controls="' + ariaClose + '" alt="' + collapseAll + '" title="' + collapseAll + '"/></a>';
+      } else {
+        htmlString = htmlString + '<img style="border: 0; opacity: 0.4; filter: alpha(opacity=40); zoom: 1;" src="' + Site.imgprefix + '/expandAll.gif" alt="' + collapseAll + '" title="' + collapseAll + '"/>';
+      }
+      for ( itemCount = 0; itemCount < items.length; itemCount++ ) {
+        var controlsTag = items[itemCount];
+        if ( controlsTag != null ) {
+          controlsTag.innerHTML=htmlString;
+        }
+      }
+    }
+  }
+}
+
--------------------------------------------------------------------------------
Flat | Top-Level Comments Only
Noting here because I'm doing something else right now and I don't want to forget about it:

The module needs to be explicitly set to section two in Skittlish Dreams. It can't be in one (Core2 default) as it doesn't exist. This may be true of other styles as well.

Edit: had time to file this today.
Edited 2011-04-12 08:26 (UTC)