Render collapse/expand buttons using CSS instead of JS

Fix #1354
Also clean up some dependent JS unused since c64e1bc

app/assets/javascripts/tracks.js

@@ -328,51 +328,24 @@ var TodoItemsContainer = {
     ensureVisibleWithEffectAppear: function(elemId){
         $('#'+elemId).fadeIn(500);
     },
-    expandNextActionListing: function(itemsElem, skipAnimation) {
-        itemsElem = $(itemsElem);
-        if(skipAnimation == true) {
-            itemsElem.show();
-        }
-        else {
-            itemsElem.show('blind', 400);
-        }
-        TodoItems.showContainer(itemsElem.parentNode);
-    },
-    collapseNextActionListing: function(itemsElem, skipAnimation) {
-        itemsElem = $(itemsElem);
-        if(skipAnimation == true) {
-            itemsElem.hide();
-        }
-        else {
-            itemsElem.hide('blind', 400);
-        }
-        TodoItems.hideContainer(itemsElem.parentNode);
-    },
     ensureContainerHeight: function(itemsElem) {
         $(itemsElem).css({
             height: '',
             overflow: ''
         });
     },
-    expandNextActionListingByContext: function(itemsElemId, skipAnimation){
-        TodoItems.expandNextActionListing($('#'+itemsElemId).get(), skipAnimation);
-    },
     setup_container_toggles: function(){
         // bind handlers
         $('.container_toggle').click(function(evt){
             var toggle_target = $(this.parentNode.parentNode).find('.toggle_target');
             if(toggle_target.is(':visible')){
                 // hide it
-                var imgSrc = $(this).find('img').attr('src');
-                $(this).find('img').attr('src', imgSrc.replace('collapse', 'expand'));
                 $.cookie(TodoItemsContainer.buildCookieName(this.parentNode.parentNode), true);
                 toggle_target.slideUp(500);
                 // set parent class to 'context_collapsed' so we can hide/unhide all collapsed contexts
                 toggle_target.parent().addClass("context_collapsed");
             } else {
                 // show it
-                imgSrc = $(this).find('img').attr('src');
-                $(this).find('img').attr('src', imgSrc.replace('expand', 'collapse'));
                 $.cookie(TodoItemsContainer.buildCookieName(this.parentNode.parentNode), null);
                 toggle_target.slideDown(500);
                 // remove class 'context_collapsed' from parent class
@@ -383,12 +356,8 @@ var TodoItemsContainer = {
         // set to cookied state
         $('.container.context').each(function(){
             if($.cookie(TodoItemsContainer.buildCookieName(this))=="true"){
-                var imgSrc = $(this).find('.container_toggle img').attr('src');
+                $(this).find('.toggle_target').hide();
-                if (imgSrc) {
+                $(this).find('.toggle_target').parent().addClass("context_collapsed");
-                    $(this).find('.container_toggle img').attr('src', imgSrc.replace('collapse', 'expand'));
-                    $(this).find('.toggle_target').hide();
-                    $(this).find('.toggle_target').parent().addClass("context_collapsed");
-                }
             }
         });
     },
@@ -397,14 +366,6 @@ var TodoItemsContainer = {
     buildCookieName: function(containerElem) {
         var tracks_login = $.cookie('tracks_login');
         return 'tracks_'+tracks_login+'_context_' + containerElem.id + '_collapsed';
-    },
-    showContainer: function(containerElem) {
-        var imgSrc = $(containerElem).find('.container_toggle img').attr('src');
-        $(containerElem).find('.container_toggle img').attr('src', imgSrc.replace('expand', 'collapse'));
-    },
-    hideContainer: function (containerElem) {
-        var imgSrc = $(containerElem).find('.container_toggle img').attr('src');
-        $(containerElem).find('.container_toggle img').attr('src', imgSrc.replace('collapse', 'expand'));
     }
 }
 

app/assets/stylesheets/tracks.css.scss

@@ -337,9 +337,12 @@ a.show_successors:hover, a.link_to_successors:hover {background-image: image-url
 }
 
 .container_toggle img {
-    height:14px;
+    height: 14px;
-    width:14px;
+    width: 14px;
-    border:0px;
+    border: 0px;
+    background: image-url('collapse_expand.png') no-repeat left top;
+    	
+    .context_collapsed & { background-position: left bottom; }
 }
 
 h2 {

app/views/contexts/_context.html.erb

@@ -7,7 +7,7 @@ cache [context, @source_view, current_user.date.strftime("%Y%m%d")] do
   <div id="c<%= context.id %>" class="container context" style="display:<%= (collapsible && @not_done.empty?) ? "none" : "block" %>">
     <h2>
       <% if collapsible -%>
-        <a href="#" class="container_toggle" id="toggle_c<%= context.id %>"><%= image_tag("collapse.png") %></a>
+        <a href="#" class="container_toggle" id="toggle_c<%= context.id %>"><%= image_tag("blank.png", :alt => t('common.collapse_expand')) %></a>
       <% end -%>
       <% if source_view_is :context %>
         <span id="context_name"><%= context.name %></span>
@@ -23,4 +23,4 @@ cache [context, @source_view, current_user.date.strftime("%Y%m%d")] do
       <%= render :partial => "todos/todo", :collection => @not_done, :locals => { :parent_container_type => "context" } %>
     </div>
   </div>
-<% end %>
+<% end %>

app/views/projects/_project.html.erb

@@ -5,7 +5,7 @@ cache [project, current_user.date.strftime("%Y%m%d")] do %>
   <div class="container">
     <h2 id="project_name_container">
       <% if collapsible -%>
-        <a href="#" class="container_toggle" id="toggle_p<%= project.id %>"><%= image_tag("collapse.png") %></a>
+        <a href="#" class="container_toggle" id="toggle_p<%= project.id %>"><%= image_tag("blank.png", :alt => t('common.collapse_expand')) %></a>
       <% end -%>
       <div id="project_name" style="width: 100%;"><%= project.name -%></div>
     </h2>
@@ -23,4 +23,4 @@ cache [project, current_user.date.strftime("%Y%m%d")] do %>
       <%= render :partial => "todos/todo", :collection => @not_done, :locals => { :parent_container_type => "project" } %>
     </div>
   </div>
-<% end %>
+<% end %>

app/views/todos/_completed.html.erb

@@ -6,7 +6,7 @@
   <div class=add_note_link><%= link_to t('common.show_all'), determine_done_path%></div>
   <h2>
       <% if collapsible %>
-      <a href="#" class="container_toggle" id="toggle_completed"><%= image_tag("collapse.png") %></a>
+      <a href="#" class="container_toggle" id="toggle_completed"><%= image_tag("blank.png", :alt => t('common.collapse_expand')) %></a>
       <% end %>
       <%= t('todos.completed_actions') %> <%= raw suffix %>
   </h2>
@@ -18,4 +18,4 @@
 
       <%= render :partial => "todos/todo", :collection => completed, :locals => { :parent_container_type => "completed", :suppress_context => suppress_context, :suppress_project => suppress_project } %>
   </div>
-</div>
+</div>

app/views/todos/_deferred.html.erb

@@ -1,7 +1,7 @@
 <div class="container tickler" id="tickler">
   <h2>
       <% if collapsible %>
-      <a href="#" class="container_toggle" id="toggle_deferred"><%= image_tag("collapse.png") %></a>
+      <a href="#" class="container_toggle" id="toggle_deferred"><%= image_tag("blank.png", :alt => t('common.collapse_expand')) %></a>
       <% end %>
       <%= t('todos.deferred_pending_actions') %> <%= raw(append_descriptor ? append_descriptor : '') %>
   </h2>

app/views/todos/_hidden.html.erb

@@ -1,7 +1,7 @@
 <div class="container hidden" id="hidden">
   <h2>
       <% if collapsible %>
-      <a href="#" class="container_toggle" id="toggle_deferred"><%= image_tag("collapse.png") %></a>
+      <a href="#" class="container_toggle" id="toggle_deferred"><%= image_tag("blank.png", :alt => t('common.collapse_expand')) %></a>
       <% end %>
       <%= t('todos.hidden_actions') %> <%= raw(append_descriptor ? append_descriptor : '') %>
   </h2>
@@ -14,4 +14,4 @@
     <%= render :partial => "todos/todo", :collection => hidden, :locals => { :parent_container_type => 'tag' } %>
 
   </div><!-- [end:items] -->
-</div><!-- [end:tickler] -->
+</div><!-- [end:tickler] -->

config/locales/en.yml

@@ -158,6 +158,7 @@ en:
       other: days
     deferred: deferred
     not_available_abbr: "n/a"
+    collapse_expand: Collapse/expand
   data:
     import_successful: Import was successful.
     import_errors: Some errors occurred during import