Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[SVCS-566]Update MFR Loading Spinner To Follow OSF Style Guide #324

Open
wants to merge 2 commits into
base: develop
Choose a base branch
from
Open

[SVCS-566]Update MFR Loading Spinner To Follow OSF Style Guide #324

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7ce466b
Update default MFR loading spinner to follow OSF style
AddisonSchiller Oct 25, 2017
c2df461
Please update the commit message based on the new diff
NyanHelsing Mar 19, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
113 changes: 50 additions & 63 deletions mfr/server/static/css/mfr.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,72 +1,59 @@
.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;

/*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.
*/

#mfrIframe .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);
}
@-moz-keyframes mfr-spin {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
#mfrIframe .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);
}
@-webkit-keyframes mfr-spin {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
#mfrIframe .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);
}
@keyframes mfr-spin {
from {
-webkit-transform: rotate(0deg);
transform:rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
transform:rotate(360deg);
}
#mfrIframe .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);
}
@-moz-keyframes mfr-opacity {
0% {
opacity : 0.1
}
50% {
opacity: 1
}
100% {
opacity: 0.1
}
#mfrIframe .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;
}
@-webkit-keyframes mfr-opacity {
0% {
opacity : 0.1
}
50% {
opacity: 1
}
100% {
opacity: 0.1
}


#mfrIframe .ball-dark > div {
background-color: #337AB7;
}
@keyframes mfr-opacity {
0% {
opacity : 0.1
}
50% {
opacity: 1
}
100% {
opacity: 0.1
}

#mfrIframe .ball-scale {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 250px;
top: 0;
left: 0;
}

.embed-responsive-pdf {
#mfrIframe .embed-responsive-pdf {
padding-bottom: 95%;
}
}

#mfrIframe iframe {
opacity: 0.0;
}

#mfrIframe {
min-height: 250px;
}
Binary file removed mfr/server/static/images/cos_logo.png
View file
Open in desktop
Binary file not shown.
2 changes: 1 addition & 1 deletion mfr/server/static/js/mfr.child.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
}
});
});
});
}, false);

window.addEventListener('resize', function () {
window.pymChild.sendHeight();
Expand Down
23 changes: 11 additions & 12 deletions mfr/server/static/js/mfr.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,16 +45,12 @@
return el;
}

function _createSpinner(url, imgName) {
var parser = document.createElement('a');
parser.href = url;

function _createSpinner() {
// The the OSF asks for the CSS for this spinner (/static/css/mfr)
// MFR itself does not use it anywhere
var spinner = 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);
spinner.setAttribute('class', 'ball-scale ball-dark ball-scale-blue text-center');
spinner.appendChild(document.createElement('div'));
return spinner;
}

Expand All @@ -68,11 +64,13 @@
* @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(url, imgName);
self.spinner = _createSpinner();

self.init = function () {
self.pymParent = new pym.Parent(self.id, self.url, self.config);
Expand All @@ -82,9 +80,10 @@
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');
Expand Down