Randomize contributors on reload (#1107)

* Randomise contributors on reload * Remove ES2015 syntax * Remove ES2015 code * Remove debugging * Fix animation * Fix animation * Hanlde no JS * Review feedback * Review feedback * Revert changes and use try/catch instead * Remove !important * Review feedback
HTTPArchive · Jul 30, 2020 · 5a0f9b7 · 5a0f9b7
1 parent cc83ccb
commit 5a0f9b7
Showing 1 changed file with 44 additions and 8 deletions.
diff --git a/src/templates/base/2019/contributors.html b/src/templates/base/2019/contributors.html
@@ -74,7 +74,7 @@
 
 .contributor-grid:not([data-rendered='true']) .contributor {
   transform: translateY(30px);
-  opacity: 1;
+  opacity: 0;
   will-change: opacity;
 }
 
@@ -264,6 +264,14 @@
   }
 }
 </style>
+<noscript>
+  <style nonce="{{ csp_nonce() }}">
+    .contributor-grid:not([data-rendered='true']) .contributor {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  </style>
+</noscript>
 {% endblock %}
 
 {% block main %}
@@ -354,15 +362,31 @@ <h1 class="title title-lg">
 {% block scripts %}
   {{ super() }}
   <script nonce="{{ csp_nonce() }}">
-(function loaded() {
+
+  // Randomise the contributors on reload as server-side random will be cached at CDN.
+  // Only run this if the page is reloaded for performance reasons.
+
+  // Support both newer PerformanceNavigationTiming API for newer browsers
+  // and older Navigation Timing API for older browsers
+  if ((performance.getEntriesByType("navigation")[0] && performance.getEntriesByType("navigation")[0].type === "reload")
+      ||
+        (performance.navigation && performance.navigation.type === performance.navigation.TYPE_RELOAD)) {
+    var ul = document.querySelector('.contributor-grid');
+    for (var i = ul.children.length; i >= 1; i--) {
+        // Ensure position 1 is minimum to leave "Join the team" icon at beginning
+        ul.appendChild(ul.children[Math.floor(Math.random() * i) + 1]);
+    }
+  }
+
+  function loaded() {
     var teams = ['{{ "','".join(config.teams.keys()) | safe }}'];
     var buttons = document.querySelectorAll('.filter-container button');
     var contributors = document.querySelector('.contributors');
-    var contributorsGrid = document.querySelector('.contributor-grid');
     var counter = document.querySelector('#filtered-contributors');
     var totalText = document.querySelector('#contributors-total-text');
     var totalContributors = document.querySelector('#contributors-total');
     var shadowNode = document.createElement('div');
+
     var urlObject = new URL(document.location);
 
     function getFilteredContributorCount() {
@@ -424,14 +448,15 @@ <h1 class="title title-lg">
 
         event && event.preventDefault();
         var urlObject = new URL(document.location);
+
         if(urlObject.searchParams.has('teams')) {
 
             var hash = urlObject.searchParams.get('teams');
             var filterTeams = hash.split(',');
 
             if(teams.includes(filterTeams[0])) {
-                contributors.classList.remove(...teams);
-                contributors.classList.add(...filterTeams);
+                contributors.classList.remove.apply(contributors.classList,teams);
+                contributors.classList.add.apply(contributors.classList,filterTeams);
             }
 
             for (index = 0; index < buttons.length; ++index) {
@@ -440,12 +465,13 @@ <h1 class="title title-lg">
             }
 
         } else {
-            contributors.classList.add(...teams);
+            contributors.classList.add.apply(contributors.classList,teams);
             for (index = 0; index < buttons.length; ++index) {
               var button = buttons[index];
               button.setAttribute('aria-pressed',false);
             }
         }
+
         var filteredCount = getFilteredContributorCount();
         counter.innerText = filteredCount;
         if ( counter.innerText ===  totalContributors.innerText ) {
@@ -456,10 +482,20 @@ <h1 class="title title-lg">
     }
     window.addEventListener('popstate', handleFilterUrl);
     handleFilterUrl();
+  }
 
-    contributorsGrid.setAttribute('data-rendered', true);
-})();
+  try {
+    loaded() 
+  } catch(e) {
+    gtag('event', 'exception', {
+      'description': e,
+      'fatal': false
+    });
+  }
 
+  var contributorsGrid = document.querySelector('.contributor-grid');
+  contributorsGrid.setAttribute('data-rendered', true);
+
   </script>
   <!-- add chapter.js to handle print mode and avoid duplicating code -->
   <script src="/static/js/chapter.js?v=20200527181403" defer></script>