Merge pull request #926 from IIIF/fix-flashing-top-bar

fixed flashing by switching out jquery maps for native filters+maps. …
ProjectMirador · May 19, 2016 · ae060e8 · ae060e8
2 parents fb5e7df + 8a9aa98
commit ae060e8
Showing 1 changed file with 57 additions and 50 deletions.
diff --git a/js/src/widgets/toc.js b/js/src/widgets/toc.js
@@ -38,11 +38,11 @@
     },
 
     tabStateUpdated: function(data) {
-        if (data.tabs[data.selectedTabIndex].options.id === 'tocTab') {
-            this.element.show();
-        } else {
-            this.element.hide();
-        }
+      if (data.tabs[data.selectedTabIndex].options.id === 'tocTab') {
+        this.element.show();
+      } else {
+        this.element.hide();
+      }
     },
 
     getTplData: function() {
@@ -60,8 +60,8 @@
       case '2':
         ranges = _this.extractV2RangeTrees(_this.structures);
         break;
-      // case '2.1':
-      //   _this.extractV21RangeTrees(_this.structures);
+        // case '2.1':
+        //   _this.extractV21RangeTrees(_this.structures);
       }
 
       if (ranges.length < 2) {
@@ -73,11 +73,11 @@
 
     initTocData: function() {
       var _this = this,
-      tocData = {};
+          tocData = {};
 
       _this.structures.forEach(function(structure) {
         var rangeID = structure['@id'],
-        attrString = '[data-rangeid="' + rangeID +'"]';
+            attrString = '[data-rangeid="' + rangeID +'"]';
 
         tocData[structure['@id']] = {
           element: _this.element.find(attrString).closest('li')
@@ -189,36 +189,44 @@
 
     render: function() {
       var _this = this,
-      toDeselect = jQuery.map(_this.previousSelectedElements, function(rangeID) {
-            return _this.tocData[rangeID].element.toArray();
-      }),
-      toSelect = jQuery.map(_this.selectedElements, function(rangeID) {
-            return _this.tocData[rangeID].element.toArray();
-      }),
-      toOpen = jQuery.map(_this.selectedElements, function(rangeID) {
-          if ((jQuery.inArray(rangeID, _this.openElements) < 0) && (jQuery.inArray(rangeID, _this.previousSelectedElements) < 0)) {
-            return _this.tocData[rangeID].element.toArray();
-          } else { return false; }
-      }),
-      toClose = jQuery.map(_this.previousSelectedElements, function(rangeID) {
-          if ((jQuery.inArray(rangeID, _this.openElements) < 0) && (jQuery.inArray(rangeID, _this.selectedElements) < 0)) {
-            return _this.tocData[rangeID].element.toArray();
-          } else { return false; }
-      });
+          toDeselect = _this.previousSelectedElements.map(function(rangeID) {
+            return _this.tocData[rangeID].element;
+          }),
+          toSelect = _this.selectedElements.map(function(rangeID) {
+            return _this.tocData[rangeID].element;
+          }),
+          toOpen = _this.selectedElements.filter(function(rangeID) {
+            return (jQuery.inArray(rangeID, _this.openElements) < 0) && (jQuery.inArray(rangeID, _this.previousSelectedElements) < 0);
+          }).map(function(rangeID) {
+            return _this.tocData[rangeID].element;
+          }),
+          toClose = _this.previousSelectedElements.filter(function(rangeID) {
+            return (jQuery.inArray(rangeID, _this.openElements) < 0) && (jQuery.inArray(rangeID, _this.selectedElements) < 0);
+          }).map(function(rangeID) {
+            return _this.tocData[rangeID].element;
+          });
 
       // Deselect elements
-      jQuery(toDeselect).removeClass('selected');
+      toDeselect.forEach(function(element) {
+          element.removeClass('selected');
+      });
 
       // Select new elements
-      jQuery(toSelect).addClass('selected');
-
+      toSelect.forEach(function(element) {
+        element.addClass('selected');
+      });
       // Scroll to new elements
       scroll();
 
-      // Open new ones
-      jQuery(toOpen).toggleClass('open').find('ul:first').slideFadeToggle();
-      // Close old ones (find way to keep scroll position).
-      jQuery(toClose).toggleClass('open').find('ul:first').slideFadeToggle(400, 'swing', scroll);
+      // Open newly opened sections
+      toOpen.forEach(function(element) {
+        element.addClass('open').find('ul:first').slideFadeToggle();
+      });
+
+      // Close previously opened selections (find way to keep scroll position).
+      toClose.forEach(function(element) {
+        element.removeClass('open').find('ul:first').slideFadeToggle(400, 'swing', scroll);
+      });
 
       // Get the sum of the outer height of all elements to be removed.
       // Subtract from current parent height to retreive the new height.
@@ -268,8 +276,7 @@
 
         var rangeID = jQuery(this).parent().data().rangeid;
         _this.setOpenItem(rangeID);
-
-        jQuery(this).closest('li').toggleClass('open').find('ul:first').slideFadeToggle();
+        _this.render();
       });
     },
 
@@ -304,26 +311,26 @@
     },
 
     emptyTemplate: Handlebars.compile([
-            '<ul class="toc">',
-            '<li class="leaf-item open">',
-            '<h2><span>No index available</span></h2>',
-            '</ul>',
-        ].join('')),
+      '<ul class="toc">',
+      '<li class="leaf-item open">',
+      '<h2><span>No index available</span></h2>',
+      '</ul>',
+    ].join('')),
 
     template: function(tplData) {
 
       var template = Handlebars.compile([
         '<ul class="toc">',
-          '{{#nestedRangeLevel ranges}}',
-            '<li class="{{#if children}}has-child{{else}}leaf-item{{/if}}"">',
-              '{{{tocLevel id label level children}}}',
-              '{{#if children}}',
-                '<ul>',
-                '{{{nestedRangeLevel children}}}',
-                '</ul>',
-              '{{/if}}',
-            '<li>',
-          '{{/nestedRangeLevel}}',
+        '{{#nestedRangeLevel ranges}}',
+        '<li class="{{#if children}}has-child{{else}}leaf-item{{/if}}">',
+        '{{{tocLevel id label level children}}}',
+        '{{#if children}}',
+        '<ul>',
+        '{{{nestedRangeLevel children}}}',
+        '</ul>',
+        '{{/if}}',
+        '<li>',
+        '{{/nestedRangeLevel}}',
         '</ul>'
       ].join(''));
 
@@ -345,7 +352,7 @@
 
       Handlebars.registerHelper('tocLevel', function(id, label, level, children) {
         var caret = '<i class="fa fa-caret-right toc-caret"></i>',
-        cert = '<i class="fa fa-certificate star"></i>';
+            cert = '<i class="fa fa-certificate star"></i>';
         return '<h' + (level+1) + '><a class="toc-link" data-rangeID="' + id + '">' + caret + cert + '<span>' + label + '</span></a></h' + (level+1) + '>';
       });