Merge branch 'feature/revert-spinner-changes' into develop

 * The fix to update MFR spinners to use pulsers was accidentally
   breaking the OSF's own use of pulsers.  The mfr.css file where the
   spinner code exists is included on the OSF-side of the iframe, not
   inside where MFR reigns.  As a result mfr.css was overriding some
   OSF-defined styles and causing weird behavior anywhere it was
   included (currently the file view and wiki pages).

   Revert the whole shebang, and head back to the drawing board for
   this ticket.

mfr/server/static/css/mfr.css

@@ -1,59 +1,72 @@
-
-/*The osf will ask for this file. It is never actually linked to anything specific in MFR.
-This CSS was stripped out of base.css from the osf-style repo.
-*/
-
-.ball-pulse > div:nth-child(0) {
-  -webkit-animation: scale 0.75s -0.36s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
-          animation: scale 0.75s -0.36s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
+.mfr-logo-spin {
+    -webkit-animation: mfr-spin 3s infinite linear, mfr-opacity 3s infinite linear;
+    -moz-animation: mfr-spin 3s infinite linear mfr-opacity 3s infinite linear;
+    animation: mfr-spin 3s infinite linear, mfr-opacity 3s infinite linear;
+    position: absolute;
+    top: 0;
+    left: 50%;
+    z-index: -1;
 }
-.ball-pulse > div:nth-child(1) {
-  -webkit-animation: scale 0.75s -0.24s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
-          animation: scale 0.75s -0.24s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
+@-moz-keyframes mfr-spin {
+    from {
+        -moz-transform: rotate(0deg);
+    }
+    to {
+        -moz-transform: rotate(360deg);
+    }
 }
-.ball-pulse > div:nth-child(2) {
-  -webkit-animation: scale 0.75s -0.12s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
-          animation: scale 0.75s -0.12s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
+@-webkit-keyframes mfr-spin {
+    from {
+        -webkit-transform: rotate(0deg);
+    }
+    to {
+        -webkit-transform: rotate(360deg);
+    }
 }
-.ball-pulse > div:nth-child(3) {
-  -webkit-animation: scale 0.75s 0s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
-          animation: scale 0.75s 0s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
+@keyframes mfr-spin {
+    from {
+        -webkit-transform: rotate(0deg);
+        transform:rotate(0deg);
+    }
+    to {
+        -webkit-transform: rotate(360deg);
+        transform:rotate(360deg);
+    }
 }
-.ball-pulse > div {
-  background-color: #fff;
-  width: 15px;
-  height: 15px;
-  border-radius: 100%;
-  margin: 2px;
-  -webkit-animation-fill-mode: both;
-          animation-fill-mode: both;
-  display: inline-block;
+@-moz-keyframes mfr-opacity {
+    0% {
+        opacity : 0.1
+    }
+    50% {
+        opacity: 1
+    }
+    100% {
+        opacity: 0.1
+    }
 }
-
-
-.ball-dark > div {
-  background-color: #337AB7;
+@-webkit-keyframes mfr-opacity {
+    0% {
+        opacity : 0.1
+    }
+    50% {
+        opacity: 1
+    }
+    100% {
+        opacity: 0.1
+    }
 }
-
-.ball-scale {
-    position: absolute;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-    height: 250px;
-    top: 0;
-    left: 0;
+@keyframes mfr-opacity {
+    0% {
+        opacity : 0.1
+    }
+    50% {
+        opacity: 1
+    }
+    100% {
+        opacity: 0.1
+    }
 }
 
 .embed-responsive-pdf {
     padding-bottom: 95%;
-}
-
-#mfrIframe iframe {
-    opacity: 0.0;
-}
-
-#mfrIframe {
-    min-height: 250px;
-}
+}

mfr/server/static/js/mfr.child.js

@@ -16,7 +16,7 @@
                 }
             });
         });
-    }, false);
+    });
 
     window.addEventListener('resize', function () {
         window.pymChild.sendHeight();

mfr/server/static/js/mfr.js

@@ -45,12 +45,16 @@
         return el;
     }
 
-    function _createSpinner() {
-        // The the OSF asks for the CSS for this spinner (/static/css/mfr)
-        // MFR itself does not use it anywhere
+    function _createSpinner(url, imgName) {
+        var parser = document.createElement('a');
+        parser.href = url;
+
         var spinner = document.createElement('div');
-        spinner.setAttribute('class', 'ball-scale ball-dark ball-scale-blue text-center');
-        spinner.appendChild(document.createElement('div'));
+        var img = document.createElement('img');
+        spinner.setAttribute('class', 'mfr-logo-spin text-center');
+        imgName = imgName || 'loading.png';
+        img.setAttribute('src', parser.protocol + '//' + parser.host + '/static/images/' + imgName);
+        spinner.appendChild(img);
         return spinner;
     }
 
@@ -64,13 +68,11 @@
      * @param {String} imgName The filename of an image in mfr/server/static/images/ to use as a loading spinner
      */
     lib.Render = function (id, url, config, imgName) {
-        // we no longer use this, but need to support it as an arg till the OSF side is fixed
-        imgName = undefined;
         var self = this;
         self.id = id;
         self.url = url;
         self.config = config;
-        self.spinner = _createSpinner();
+        self.spinner = _createSpinner(url, imgName);
 
         self.init = function () {
             self.pymParent = new pym.Parent(self.id, self.url, self.config);
@@ -80,10 +82,9 @@
             self.pymParent.iframe.setAttribute('sandbox', 'allow-scripts allow-popups allow-same-origin');
 
             self.pymParent.el.appendChild(self.spinner);
-            $(self.pymParent.iframe).on('load', function() {
+            $(self.pymParent.iframe).on('load', function () {
                 self.pymParent.el.removeChild(self.spinner);
-                this.style.opacity = "1.0"
-            })
+            });
 
             self.pymParent.onMessage('embed', function(message) {
                 _addClass(self.pymParent.el, 'embed-responsive');