Reinstate aoColumns so that we have proper sorting in percent columns (#80)

* Reinstate aoColumns so that we have proper sorting in percent columns

Regression from first release.

See: bc11506#r36735556
Thanks @dmitry

Fixes #79

Sorry for the noise of the slight changes in the other parts of
the JS, VSCode made a decision and I was too lazy to go back
and make it a separate commit. :see-no-evil:

Relevant code is in layout.erb and the top of application.js
(where there's new code)

* expand comment on column and sorting handling

Author: PragTob

CHANGELOG.md

@@ -1,3 +1,9 @@
+0.11.0.beta2 (unreleased)
+=======
+
+## Bugfixes
+* Fixed sorting of percent column (regression in previous release)
+
 0.11.0.beta1 (2020-01-05)
 ========
 

assets/javascripts/application.js

@@ -2,25 +2,36 @@
 //= require_directory ./plugins/
 //= require_self
 
-$(document).ready(function() {
+$(document).ready(function () {
+  branchCoverageActivated = $("body").data("branch-coverage") == true;
+
   // Configuration for fancy sortable tables for source file groups
+  // For what these columns are, cecl out file_list.erb - null basically
+  // does normal/number style sorting which fine for hit/missed lines only
+  // percentages like "covered percent" need special sorting arguments.
+  lineColumns = [null, { "sType": "percent" }, null, null, null, null, null];
+  branchColumns = [{ "sType": "percent" }, null, null, null];
+
+  dataColumns = branchCoverageActivated ? lineColumns.concat(branchColumns) : lineColumns;
+
   $('.file_list').dataTable({
-    "aaSorting": [[ 1, "asc" ]],
+    "aaSorting": [[1, "asc"]],
     "bPaginate": false,
-    "bJQueryUI": true
+    "bJQueryUI": true,
+    "aoColumns": dataColumns
   });
 
   // Syntax highlight all files up front - deactivated
   // $('.source_table pre code').each(function(i, e) {hljs.highlightBlock(e, '  ')});
 
   // Syntax highlight source files on first toggle of the file view popup
-  $("a.src_link").click(function() {
+  $("a.src_link").click(function () {
     // Get the source file element that corresponds to the clicked element
     var source_table = $($(this).attr('href'));
 
     // If not highlighted yet, do it!
     if (!source_table.hasClass('highlighted')) {
-      source_table.find('pre code').each(function(i, e) {hljs.highlightBlock(e, '  ')});
+      source_table.find('pre code').each(function (i, e) { hljs.highlightBlock(e, '  ') });
       source_table.addClass('highlighted');
     };
   });
@@ -35,14 +46,14 @@ $(document).ready(function() {
     opacity: 1,
     width: "95%",
     height: "95%",
-    onLoad: function() {
+    onLoad: function () {
       prev_anchor = curr_anchor ? curr_anchor : jQuery.url.attr('anchor');
       curr_anchor = this.href.split('#')[1];
       window.location.hash = curr_anchor;
     },
-    onCleanup: function() {
+    onCleanup: function () {
       if (prev_anchor && prev_anchor != curr_anchor) {
-        $('a[href="#'+prev_anchor+'"]').click();
+        $('a[href="#' + prev_anchor + '"]').click();
         curr_anchor = prev_anchor;
       } else {
         $('.group_tabs a:first').click();
@@ -53,13 +64,13 @@ $(document).ready(function() {
     }
   });
 
-  window.onpopstate = function(event){
-    if (location.hash.substring(0,2) == "#_") {
+  window.onpopstate = function (event) {
+    if (location.hash.substring(0, 2) == "#_") {
       $.colorbox.close();
       curr_anchor = jQuery.url.attr('anchor');
     } else {
       if ($('#colorbox').is(':hidden')) {
-        $('a.src_link[href="'+location.hash+'"]').colorbox({ open: true });
+        $('a.src_link[href="' + location.hash + '"]').colorbox({ open: true });
       }
     }
   };
@@ -69,23 +80,23 @@ $(document).ready(function() {
   $('.file_list_container').hide();
 
   // Add tabs based upon existing file_list_containers
-  $('.file_list_container h2').each(function(){
+  $('.file_list_container h2').each(function () {
     var container_id = $(this).parent().attr('id');
     var group_name = $(this).find('.group_name').first().html();
     var covered_percent = $(this).find('.covered_percent').first().html();
 
-    $('.group_tabs').append('<li><a href="#' + container_id + '">' + group_name + ' ('+ covered_percent +')</a></li>');
+    $('.group_tabs').append('<li><a href="#' + container_id + '">' + group_name + ' (' + covered_percent + ')</a></li>');
   });
 
-  $('.group_tabs a').each( function() {
+  $('.group_tabs a').each(function () {
     $(this).addClass($(this).attr('href').replace('#', ''));
   });
 
   // Make sure tabs don't get ugly focus borders when active
-  $('.group_tabs a').live('focus', function() { $(this).blur(); });
+  $('.group_tabs a').live('focus', function () { $(this).blur(); });
 
   var favicon_path = $('link[rel="shortcut icon"]').attr('href');
-  $('.group_tabs a').live('click', function(){
+  $('.group_tabs a').live('click', function () {
     if (!$(this).parent().hasClass('active')) {
       $('.group_tabs a').parent().removeClass('active');
       $(this).parent().addClass('active');
@@ -96,7 +107,7 @@ $(document).ready(function() {
       // Force favicon reload - otherwise the location change containing anchor would drop the favicon...
       // Works only on firefox, but still... - Anyone know a better solution to force favicon on local file?
       $('link[rel="shortcut icon"]').remove();
-      $('head').append('<link rel="shortcut icon" type="image/png" href="'+ favicon_path +'" />');
+      $('head').append('<link rel="shortcut icon" type="image/png" href="' + favicon_path + '" />');
     };
     return false;
   });
@@ -106,7 +117,7 @@ $(document).ready(function() {
     if (anchor.length == 40) {
       $('a.src_link[href=#' + anchor + ']').click();
     } else {
-      $('.group_tabs a.'+anchor.replace('_', '')).click();
+      $('.group_tabs a.' + anchor.replace('_', '')).click();
     }
   } else {
     $('.group_tabs a:first').click();

public/application.js

@@ -3,13 +3,13 @@
   <head>
     <title>Code coverage for <%= SimpleCov.project_name %></title>
     <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-    <script src='<%= assets_path('application.js') %>' type='text/javascript'></script>    
+    <script src='<%= assets_path('application.js') %>' type='text/javascript'></script>
     <link href='<%= assets_path('application.css') %>' media='screen, projection, print' rel='stylesheet' type='text/css'>
     <link rel="shortcut icon" type="image/png" href="<%= assets_path("favicon_#{coverage_css_class(result.source_files.covered_percent)}.png") %>" />
     <link rel="icon" type="image/png" href="<%= assets_path('favicon.png') %>" />
   </head>
-  
-  <body>
+
+  <body<%= ' data-branch-coverage=true' if branchable_result? %>>
     <div id="loading">
       <img src="<%= assets_path('loading.gif') %>" alt="loading"/>
     </div>
@@ -24,13 +24,13 @@
           <%= formatted_file_list(name, files) %>
         <% end %>
       </div>
-    
+
       <div id="footer">
-        Generated by <a href="http://github.com/colszowka/simplecov">simplecov</a> v<%= SimpleCov::VERSION %> 
+        Generated by <a href="http://github.com/colszowka/simplecov">simplecov</a> v<%= SimpleCov::VERSION %>
         and simplecov-html v<%= SimpleCov::Formatter::HTMLFormatter::VERSION %><br/>
         using <%= result.command_name %>
       </div>
-    
+
       <div class="source_files">
       <% result.source_files.each do |source_file| %>
         <%= formatted_source_file(source_file) %>