From a8245c5ae3242f1c1e96d6c8549a324c89017ae1 Mon Sep 17 00:00:00 2001
From: Nathan J Xaxson <njxaxson@gmail.com>
Date: Tue, 4 Sep 2012 08:16:18 +0000
Subject: [PATCH 1/4] Fix for original 2624 problem

---
 .gitignore                                      |  1 +
 app/views/users/_sidebar.html.erb               | 11 +++++------
 public/javascripts/application.js               | 17 +++++++++++++++++
 public/stylesheets/site/2.0/07-interactions.css |  6 ++++++
 4 files changed, 29 insertions(+), 6 deletions(-)

diff --git a/.gitignore b/.gitignore
index e2f0b48ca9c..c063f955727 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,6 @@
 .DS_Store
 .bundle
+.idea
 # /
 /*.tmproj
 /sphinx
diff --git a/app/views/users/_sidebar.html.erb b/app/views/users/_sidebar.html.erb
index d3522bbb24e..679cd7e7c2b 100644
--- a/app/views/users/_sidebar.html.erb
+++ b/app/views/users/_sidebar.html.erb
@@ -3,15 +3,14 @@
 <ul class="navigation actions">
   <li><%= span_if_current ts("Dashboard"), @user %></li>
   <li><%= span_if_current ts("Profile"), user_profile_path(@user) %></li>
-  <% if @user.pseuds.size > 1 %>
+  <% if @user.pseuds.size > -999 %>
     <li class="pseud" aria-haspopup="true">
       <% pseud_link_text = ((current_page?(@user) ? ts("Pseuds") : (@author ? @author.name : @user.login)) + ' &#8595;').html_safe %>
-      <a class="pseud_switcher_open open" title="Pseuds" href="#"><%= pseud_link_text %></a>
-      <a class="pseud_switcher_close close" title="Pseuds" href="#"><%= pseud_link_text %></a>
-      <ul id="pseud_switcher" class="toggled secondary">
-          <%= print_pseud_selector(@user.pseuds) %>
+      <a title="<%= ts("Pseuds") %>" href="#"><%= pseud_link_text %></a>
+      <ul class="collapsed-pane secondary">
+        <%= print_pseud_selector(@user.pseuds) %>
         <li><%= span_if_current ts("All Pseuds (%{pseud_number})", :pseud_number => @user.pseuds.count), user_pseuds_path(@user) %></li>
-        <li><a class="pseud_switcher_close close action" style='cursor: pointer;' title="Close Pseud Switcher" href="#">X</a></li>
+        <li><a class="close action"  title="Close Pseud Switcher" href="#">X</a></li>
       </ul>
     </li>
 	<% end %>
diff --git a/public/javascripts/application.js b/public/javascripts/application.js
index 67b345f8c85..8ba062ef4f2 100644
--- a/public/javascripts/application.js
+++ b/public/javascripts/application.js
@@ -221,6 +221,7 @@ jQuery(function($) {
 // - You don't have to use div and a, those are just examples. anything you put the toggled and _open/_close classes on will work.
 // - If you want the toggled thing not to be visible to users without javascript by default, add the class "hidden" to the toggled item as well
 //   (and you can then add an alternative link for them using <noscript>)
+// UPDATE: For accordion-style collapsible widgets (like the pseud-switcher), use the collapsed-pane pattern instead (below).
 function setupToggled(){
   $j('.toggled').each(function(){
     var node = $j(this);
@@ -251,6 +252,22 @@ function setupToggled(){
   });
 }
 
+//new collapsed-pane widget
+$j(document).ready(function(){
+  var panes = $j(".collapsed-pane");
+  panes.hide().prev().click(function(e) {
+    var title = $j(this);
+    if(title.attr('href') == '#') {
+      e.preventDefault();
+    }
+    title.next().toggle();
+  });
+  //force-set via css here rather than just calling show(), because show() doesn't work on elements in a hidden parent
+  panes.find("a.close.action").css("display", "block").click(function(e) {
+    $j(this).parents(".collapsed-pane").hide();
+    e.preventDefault();  //always.
+  });
+});
 
 // Hides expandable fields if Javascript is enabled
 function hideExpandable() {
diff --git a/public/stylesheets/site/2.0/07-interactions.css b/public/stylesheets/site/2.0/07-interactions.css
index 5abb04a191f..74dec053274 100755
--- a/public/stylesheets/site/2.0/07-interactions.css
+++ b/public/stylesheets/site/2.0/07-interactions.css
@@ -410,4 +410,10 @@ div.dynamic {
   width: auto;
 }
 
+a.close.action, #dashboard a.close.action { /* Dashboard needs to be specifically mentioned or it will apply block display*/
+  cursor: pointer;
+  display: none; /* When javascript is disabled, this can't be visible. JavaScript will turn it on. */
+}
+
+
 /*END== */
\ No newline at end of file

From c514bb247a7e25b53ff370f9c58ce458072785e4 Mon Sep 17 00:00:00 2001
From: Nathan J Xaxson <njxaxson@gmail.com>
Date: Tue, 4 Sep 2012 08:48:35 +0000
Subject: [PATCH 2/4] Apply new collapsed pane widget to works page for chapter
 index and downloads

---
 app/views/works/_work_header_navigation.html.erb | 14 ++++++--------
 public/javascripts/application.js                |  4 ++--
 2 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/app/views/works/_work_header_navigation.html.erb b/app/views/works/_work_header_navigation.html.erb
index 439120a1a89..7fcda5cb78d 100644
--- a/app/views/works/_work_header_navigation.html.erb
+++ b/app/views/works/_work_header_navigation.html.erb
@@ -25,9 +25,8 @@
       <noscript>
         <%= link_to ts('Chapter Index'), navigate_work_path(@work) %>
       </noscript>
-      <a class="chapter_index_open open hidden"><%= ts('Chapter Index') %></a>
-      <a class="chapter_index_close close hidden"><%= ts('Chapter Index') %></a>
-      <ul id="chapter_index" class="toggled hidden secondary">
+      <a class="hidden"><%= ts('Chapter Index') %></a>
+      <ul id="chapter_index" class="collapsed-pane secondary hidden">
         <li>
           <%= form_tag url_for({:controller => :chapters, :action => :show, :work_id => @work}), :method => :get do %>
             <p>
@@ -38,7 +37,7 @@
           <% end %>
         </li>
         <li><%= link_to ts("Full-page index"), navigate_work_path(@work) %></li>
-        <li><a class="chapter_index_close close" style="cursor: pointer;" title="Close Chapter Index">X</a></li>
+        <li><a class="close action" title="<%= ts("Close Chapter Index") %>">X</a></li>
       </ul>
     </li>
   <% elsif @chapters %>
@@ -98,14 +97,13 @@
   <% end %>
 
   <li class="download" aria-haspopup="true">
-    <a title="Download" class="downloads_open open"><%= ts("Download") %> &#8595;</a>
-    <a title="Download Close" class="downloads_close close hidden"><%= ts("Download") %> &#8595;</a>
-    <ul id="downloads" class="toggled secondary">
+    <a title="<%= ts("Download") %>"><%= ts("Download") %> &#8595;</a>
+    <ul id="downloads" class="collapsed-pane secondary">
       <li><%= link_to ts("MOBI"), download_url_for_work(@work, "mobi") %></li>
       <li><%= link_to ts("EPUB"), download_url_for_work(@work, "epub") %></li>
       <li><%= link_to ts("PDF"), download_url_for_work(@work, "pdf") %></li>
       <li><%= link_to ts("HTML"), download_url_for_work(@work, "html") %></li>
-      <li><a class="downloads_close close hidden" style="cursor: pointer;" title="Close Download Options">X</a></li>
+      <li><a class="close action" title="<%= ts("Close Download Options") %>">X</a></li>
     </ul>
   </li>
 </ul>
diff --git a/public/javascripts/application.js b/public/javascripts/application.js
index 8ba062ef4f2..25cb78c7259 100644
--- a/public/javascripts/application.js
+++ b/public/javascripts/application.js
@@ -255,7 +255,7 @@ function setupToggled(){
 //new collapsed-pane widget
 $j(document).ready(function(){
   var panes = $j(".collapsed-pane");
-  panes.hide().prev().click(function(e) {
+  panes.hide().prev().removeClass("hidden").click(function(e) {
     var title = $j(this);
     if(title.attr('href') == '#') {
       e.preventDefault();
@@ -263,7 +263,7 @@ $j(document).ready(function(){
     title.next().toggle();
   });
   //force-set via css here rather than just calling show(), because show() doesn't work on elements in a hidden parent
-  panes.find("a.close.action").css("display", "block").click(function(e) {
+  panes.find("a.close.action").css("display", "inline-block").click(function(e) {
     $j(this).parents(".collapsed-pane").hide();
     e.preventDefault();  //always.
   });

From 03b4ed3a6ced10a2ca16b7f9e0f90e52ac653511 Mon Sep 17 00:00:00 2001
From: Nathan J Xaxson <njxaxson@gmail.com>
Date: Tue, 4 Sep 2012 08:57:21 +0000
Subject: [PATCH 3/4] Apply collapsible pane pattern to footer's skin chooser

---
 app/views/layouts/_footer.html.erb | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/app/views/layouts/_footer.html.erb b/app/views/layouts/_footer.html.erb
index c216ad957e3..939c092147f 100644
--- a/app/views/layouts/_footer.html.erb
+++ b/app/views/layouts/_footer.html.erb
@@ -9,9 +9,8 @@
   <ul class="navigation actions" role="navigation">
     <% unless !(logged_in? || logged_in_as_admin?) || Skin.in_chooser.empty?%>
       <li>
-        <a href="#" class="skin_chooser_open"><%= ts("Choose Skin") %> &#8595;</a>
-        <a href="#" class="skin_chooser_close"><%= ts("Close") %> &#8593;</a>
-        <ul id="skin_chooser" class="toggled secondary">
+        <a href="#"><%= ts("Choose Skin") %> &#8595;</a>
+        <ul id="skin_chooser" class="collapsed-pane secondary">
           <li><%= link_to ts("Default"), unset_skins_path %></li>
           <% Skin.in_chooser.order(:title).each do |s| %>
             <li><%= link_to s.title, set_skin_path(s) %></li>

From cf9b409cdd10e7d23f79a3186fea3991d054e56b Mon Sep 17 00:00:00 2001
From: Nathan J Xaxson <njxaxson@gmail.com>
Date: Tue, 4 Sep 2012 09:04:13 +0000
Subject: [PATCH 4/4] Show pseud-switcher only when necessary (was always
 showing for testing)

---
 app/views/users/_sidebar.html.erb | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/views/users/_sidebar.html.erb b/app/views/users/_sidebar.html.erb
index 679cd7e7c2b..b6d7728833b 100644
--- a/app/views/users/_sidebar.html.erb
+++ b/app/views/users/_sidebar.html.erb
@@ -3,7 +3,7 @@
 <ul class="navigation actions">
   <li><%= span_if_current ts("Dashboard"), @user %></li>
   <li><%= span_if_current ts("Profile"), user_profile_path(@user) %></li>
-  <% if @user.pseuds.size > -999 %>
+  <% if @user.pseuds.size > 1 %>
     <li class="pseud" aria-haspopup="true">
       <% pseud_link_text = ((current_page?(@user) ? ts("Pseuds") : (@author ? @author.name : @user.login)) + ' &#8595;').html_safe %>
       <a title="<%= ts("Pseuds") %>" href="#"><%= pseud_link_text %></a>