Improved performance of rendering large index pages, by replacing images in the tables by spans

1 files changed, 27 insertions, 27 deletions

diff --git a/src/dynsections.js b/src/dynsections.js
index ed092c7..85e1836 100644
--- a/src/dynsections.js
+++ b/src/dynsections.js
@@ -24,19 +24,20 @@ function updateStripes()
   $('table.directory tr').
        removeClass('even').filter(':visible:even').addClass('even');
 }
+
 function toggleLevel(level)
 {
-  $('table.directory tr').each(function(){ 
+  $('table.directory tr').each(function() {
     var l = this.id.split('_').length-1;
     var i = $('#img'+this.id.substring(3));
     var a = $('#arr'+this.id.substring(3));
     if (l<level+1) {
-      i.attr('src','ftv2folderopen.png');
-      a.attr('src','ftv2mnode.png');
+      i.removeClass('iconfopen iconfclosed').addClass('iconfopen');
+      a.html('&#9660;');
       $(this).show();
     } else if (l==level+1) {
-      i.attr('src','ftv2folderclosed.png');
-      a.attr('src','ftv2pnode.png');
+      i.removeClass('iconfclosed iconfopen').addClass('iconfclosed');
+      a.html('&#9658;');
       $(this).show();
     } else {
       $(this).hide();
@@ -47,34 +48,33 @@ function toggleLevel(level)
 
 function toggleFolder(id)
 {
-  //The clicked row
+  // the clicked row
   var currentRow = $('#row_'+id);
-  var currentRowImages = currentRow.find("img");
 
-  //All rows after the clicked row
+  // all rows after the clicked row
   var rows = currentRow.nextAll("tr");
 
-  //Only match elements AFTER this one (can't hide elements before)
-  var childRows = rows.filter(function() {
-    var re = new RegExp('^row_'+id+'\\d+_$', "i"); //only one sub
-    return this.id.match(re);
-  });
+  var re = new RegExp('^row_'+id+'\\d+_$', "i"); //only one sub
 
-  //First row is visible we are HIDING
-  if (childRows.filter(':first').is(':visible')===true) {
-    currentRowImages.filter("[id^=arr]").attr('src', 'ftv2pnode.png');
-    currentRowImages.filter("[id^=img]").attr('src', 'ftv2folderclosed.png');
-    rows.filter("[id^=row_"+id+"]").hide();
-  } else { //We are SHOWING
-    //All sub images
-    var childImages = childRows.find("img");
-    var childImg = childImages.filter("[id^=img]");
-    var childArr = childImages.filter("[id^=arr]");
+  // only match elements AFTER this one (can't hide elements before)
+  var childRows = rows.filter(function() { return this.id.match(re); });
 
-    currentRow.find("[id^=arr]").attr('src', 'ftv2mnode.png'); //open row
-    currentRow.find("[id^=img]").attr('src', 'ftv2folderopen.png'); //open row
-    childImg.attr('src','ftv2folderclosed.png'); //children closed
-    childArr.attr('src','ftv2pnode.png'); //children closed
+  // first row is visible we are HIDING
+  if (childRows.filter(':first').is(':visible')===true) {
+    // replace down arrow by right arrow for current row
+    var currentRowSpans = currentRow.find("span");
+    currentRowSpans.filter(".iconfopen").removeClass("iconfopen").addClass("iconfclosed");
+    currentRowSpans.filter(".arrow").html('&#9658;');
+    rows.filter("[id^=row_"+id+"]").hide(); // hide all children
+  } else { // we are SHOWING
+    // replace right arrow by down arrow for current row
+    var currentRowSpans = currentRow.find("span");
+    currentRowSpans.filter(".iconfclosed").removeClass("iconfclosed").addClass("iconfopen");
+    currentRowSpans.filter(".arrow").html('&#9660;');
+    // replace down arrows by right arrows for child rows
+    var childRowsSpans = childRows.find("span");
+    childRowsSpans.filter(".iconfopen").removeClass("iconfopen").addClass("iconfclosed");
+    childRowsSpans.filter(".arrow").html('&#9658;');
     childRows.show(); //show all children
   }
   updateStripes();