Improve the creations list page (lingonsaft#2344)

* Add my project and me to contributors.html * Only load iframe when user hovers over link (performance issue) * Shuffle creations
ramkrishn123 · Oct 26, 2018 · 0f50c89 · 0f50c89
1 parent 515a594
commit 0f50c89
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 6 deletions.
diff --git a/contributors.html b/contributors.html
@@ -431,6 +431,7 @@ <h1 class="animated rubberBand delay-4s">Contributors</h1>
       	<a class="box-item different-color" href="https://github.com/srajan96">Srajan Soni</a>
         <a class="box-item" href="https://github.com/allenshaji">Allen Shaji</a>
         <a class="box-item" href="https://github.com/rbrandonwest">Ray West</a>
+        <a class="box-item" href="https://github.com/kylejlin">Kyle Lin</a>
         <a class="box-item" href="https://github.com/amanagarwal-sopho">Aman Agarwal</a>
         <!--
         Add here
@@ -483,6 +484,7 @@ <h3 class="mb-5">Check available pages</h3>
               <li><a href="cmatrix.html">C Matrix</a></li>
               <li><a href="hello.html">Hello</a></li>
               <li><a href="goforhack.html">Go Hacking</a></li>
+              <li><a href="creations.html">List of all creations</a></li>
           </ul>
       </div>
   </div>
@@ -507,7 +509,7 @@ <h3 class="mb-5">Check available pages</h3>
                 </div>
             </div>
     </div>
-	
+
 <button id="backToTop" type="button" title="Back to Top">
     <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px"
       y="0px" width="512px" height="512px" viewBox="0 0 284.929 284.929" style="enable-background:new 0 0 284.929 284.929;"

diff --git a/creations.html b/creations.html
@@ -44,9 +44,11 @@
         background-color: #444;
       }
 
-      iframe {
+      iframe, .placeholder {
         width: 40vw;
         height: 40vh;
+        display: inline-block;
+        border: 1px solid white;
       }
 
       .overlay {
@@ -73,25 +75,40 @@ <h1>All Hacktoberfest creations:</h1>
         var nonIndexHtmlFiles = files.filter(
           f => /\.html$/.test(f.name) && f.name !== 'index.html'
         );
-        nonIndexHtmlFiles.forEach(file => {
+        shuffle(nonIndexHtmlFiles).forEach(file => {
           createLink(file.path);
         });
       }
 
+      function shuffle(array) {
+        var i = 2048;
+        while (i--) {
+          array.sort(() => Math.random() - 0.5);
+        }
+        return array;
+      }
+
       function createLink(path) {
         var li = document.createElement('li');
         var header = document.createElement('h3');
-        var iframe = document.createElement('iframe');
+        var placeholder = document.createElement('div');
         var overlay = document.createElement('div');
         var url = 'https://hacktoberfest.lingonsaft.com/' + path;
         header.innerHTML = path.split('.html')[0];
-        iframe.src = url;
+        placeholder.classList.add('placeholder');
         overlay.addEventListener('click', () => {
           window.open(url);
         });
+        function onMouseOver() {
+          var iframe = document.createElement('iframe');
+          iframe.src = url;
+          li.replaceChild(iframe, placeholder);
+          overlay.removeEventListener('mouseover', onMouseOver);
+        }
+        overlay.addEventListener('mouseover', onMouseOver);
         overlay.classList.add('overlay');
         li.appendChild(header);
-        li.appendChild(iframe);
+        li.appendChild(placeholder);
         li.appendChild(overlay);
         ul.appendChild(li);
       }