Removed GitHub Footer and added Loading Spinner (#1, #4)

Wiredcraft · Aug 10, 2016 · b59efda · b59efda
1 parent dd8d54c
commit b59efda
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 9 deletions.
diff --git a/contentscript.js b/contentscript.js
@@ -22,7 +22,7 @@ function appendButtonToNav () {
 function resize () {
   var pageHeight = window.document.documentElement.clientHeight;
   var iframeHeight = pageHeight - contentHeight - 5; // -5 extra padding/margin
-  iframe.style.cssText = 'width:100%;height:' + iframeHeight  + 'px;border:none';
+  iframe.style.cssText = 'width:100%;height:' + iframeHeight  + 'px;border:none;position:absolute;left:0;';
 }
 
 // Replace content with board
@@ -33,25 +33,35 @@ function appendContentToPage () {
   var repo = pathArray[1]
   var queryString = '?name=' + encodeURIComponent(name) + '&repo=' + encodeURIComponent(repo)
 
-  // Tab content element
+  // Remove GitHub body content
   contentElem = document.getElementsByClassName('repository-content')[0]
-
-  // Clear contentElem for our content
   while (contentElem.firstChild) {
     contentElem.removeChild(contentElem.firstChild);
   }
 
-  // Set content height (as only header & footer are left on page now)
+  // Remove GitHub Footer
+  pageFooter = document.getElementsByClassName('site-footer-container')[0]
+  while (pageFooter.firstChild) {
+    pageFooter.removeChild(pageFooter.firstChild)
+  }
+
+  // Zero-out uneeded margins
+  pageHeader = document.getElementsByClassName('pagehead')[0]
+  if (pageHeader) {
+    pageHeader.style.cssText = 'margin-bottom:0;'
+  }
+
+  // Set content height (as only header is left on page now)
   contentHeight = document.body.clientHeight;
 
-  // Calculate height for iframe
+  // Calculate height for iframe (viewport minus contentHeight)
   var pageHeight = document.documentElement.clientHeight;
   var iframeHeight = pageHeight - contentHeight - 5; // -5 extra padding/margin
 
   // Create our content
   iframe = document.createElement('iframe');
   iframe.src = chrome.runtime.getURL('frame/index.html' + queryString);
-  iframe.style.cssText = 'width:100%;height:' + iframeHeight + 'px;border:none';
+  iframe.style.cssText = 'width:100%;height:' + iframeHeight + 'px;border:none;position:absolute;left:0;';
 
   // Append our content to the content element
   contentElem.appendChild(iframe)

diff --git a/frame/index.html b/frame/index.html
@@ -1,4 +1,19 @@
+<style type='text/css'>
+  #loader {
+    background: rgba(255, 255, 255, 0.8) url(https://assets-cdn.github.com/images/spinners/octocat-spinner-64.gif) no-repeat center center;
+    bottom: 0;
+    left: 0;
+    position: fixed;
+    right: 0;
+    top: 0;
+  }
+  .hidden {
+    display: none;
+  }
+</style>
 <body style='margin: 0'>
-  <div id='fullpm'></div>
+  <div id='fullpm'>
+    <div id='loader'>
+  </div>
   <script src='script.js'></script>
 </body>
diff --git a/frame/script.js b/frame/script.js
@@ -13,12 +13,23 @@ function generateIframe(queryObj) {
   var iframe = document.createElement('iframe')
 
   var iframe = document.createElement('iframe');
+  iframe.id = 'fullpmIframe'
   iframe.src = 'https://staging-fullpm.wiredcraft.net/boards/' + queryObj.name + '/' + queryObj.repo;
-  iframe.style.cssText = 'width:100%;height:100%;border:none';
+  iframe.style.cssText = 'width:1110px;height:100%;border:none;margin:0 auto;display:block;';
+
+  iframe.onload = function () {
+    // Timeout to allow time for fullpm webpage in iframe to render it's
+    // own loading spinner. Prevents a flash of nothing being shown
+    // The time value may need further adjustment
+    setTimeout(function () {
+      document.getElementById('loader').classList.add('hidden')
+    }, 1000)
+  }
 
   return iframe
 };
 
 var iframe = generateIframe(getJsonFromUrl())
 var fullpm = document.getElementById('fullpm')
 fullpm.appendChild(iframe)
+// document.getElementById('fullpmIframe').onload = function ()