From 7ce466b07d164da2c3f33a6a337327d83fce1dc0 Mon Sep 17 00:00:00 2001 From: Addison Schiller Date: Wed, 25 Oct 2017 14:27:12 -0400 Subject: [PATCH 1/2] Update default MFR loading spinner to follow OSF style Users prefer the pulsing ball to the COS-logo spinner. Please see https://centerforopenscience.github.io/osf-style/style.html#loader This doesn't really affect the iframe content served by MFR. Instead, this changes happens in the mfr.js and mfr.css files loaded from MFR by the site hosting the iframe. The fact that mfr.js is included in most iframe content templates is a development artifact and will be eventually removed. --- mfr/server/static/css/mfr.css | 94 +++++++++----------------- mfr/server/static/images/cos_logo.png | Bin 6088 -> 0 bytes mfr/server/static/js/mfr.js | 18 +++-- 3 files changed, 39 insertions(+), 73 deletions(-) delete mode 100644 mfr/server/static/images/cos_logo.png diff --git a/mfr/server/static/css/mfr.css b/mfr/server/static/css/mfr.css index 5c8cc2d2c..95ab2b4fc 100644 --- a/mfr/server/static/css/mfr.css +++ b/mfr/server/static/css/mfr.css @@ -1,72 +1,40 @@ -.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; -} -@-moz-keyframes mfr-spin { - from { - -moz-transform: rotate(0deg); - } - to { - -moz-transform: rotate(360deg); - } + +/*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); } -@-webkit-keyframes mfr-spin { - from { - -webkit-transform: rotate(0deg); - } - to { - -webkit-transform: rotate(360deg); - } +.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); } -@keyframes mfr-spin { - from { - -webkit-transform: rotate(0deg); - transform:rotate(0deg); - } - to { - -webkit-transform: rotate(360deg); - 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); } -@-moz-keyframes mfr-opacity { - 0% { - opacity : 0.1 - } - 50% { - opacity: 1 - } - 100% { - opacity: 0.1 - } +.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); } -@-webkit-keyframes mfr-opacity { - 0% { - opacity : 0.1 - } - 50% { - opacity: 1 - } - 100% { - opacity: 0.1 - } +.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; } -@keyframes mfr-opacity { - 0% { - opacity : 0.1 - } - 50% { - opacity: 1 - } - 100% { - opacity: 0.1 - } + + +.ball-dark > div { + background-color: #337AB7; } .embed-responsive-pdf { padding-bottom: 95%; -} \ No newline at end of file +} diff --git a/mfr/server/static/images/cos_logo.png b/mfr/server/static/images/cos_logo.png deleted file mode 100644 index 59ce60d9ffe112b3c83fe3eb13525110596913c2..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 6088 zcmZ`-2UHVV*A2ZYAYEE03J4~I(0h|2p@@JWAT>x&Ac2G`hNcveUZh$;dR3a#Ac!JW zdKaWhFG~Nx_rCY}yWTfz&CI>~?0wJKXXehz%42<9jSG~QDFFb$1uacAgR{HR`AJTC zcFlKmpFFz}pbRur0L5MGOJ@@bq^2nf03c33KMDNAoU_jce2#`DXcHZnj4i?yWNnAA zfrGHF$TKzoAcvJX8@j^L)nJdcTvK2R0m0SAhM z#6TiE3Y0(~P|m~7UdBL8{cri%OrFO9jYi6V!59n%gn@z(9{0fzX=!P&h$vW8^!gd& zI?CG(ZH>L|hT{Eek^iit21nU?I3m%G2shyQy4E%bPqaJ_&v~MMj=$)=y^DvIki5oO9ApX|99+9zUjXu_#OOBaNc?ueMci-*zux`ZaCh);upIbb*>Y!Zf{YHr&e7gm%^D3?5EX%l%ZP}{h>8Fq(DMOQ zN)G%7=eG*ZBdQ*7Yc#^c5P@(}_~pX&d#T58IMSb_;NDy-p+#NvG4Is}HFMFmT*bZ;{TK$MPQ2-?zT z_hNvjjU2bRGYz$WUku}2`}mqypkhU;HnO&>6jUcu`vfEtXvK|QC9{l`F62nK#-gFZVaKCcH z$k0$M1iDXZ=wHYk^%D6->2CHlr+ZoWOwaPXO;@vN0taH9DW92^rv(gM6;Zkg>#k}R zLuD$%t~d7gQ9eP(Ijd8(fScRfDCIfNT5HAa3Dz0Hh>(c7+98^qb%X^Vl(vGAJI((} zS|TB}p;pJvlI_806?ntRGLWDko{{l$-vzHLgXoJ2pbl?($)8Z4#KAj&^ zvjK$lj-f@SScSZtzr+wKJQ?Db7JWFz`@H@J++^R5KsG|}+SjGFwzm1LEss0S+e6*W z5=XqjiFAr@cXby-Xz6=TL(5*2)1*5%$=Pw=-1}}s6dn(1*^Bp-4h==s{ zHM@6GU>2y;m%%t49e(x5%ex^htx-5u)t&4Sf~i>k5XhblO+TJ8I@lX6s78!($j`X_ zS`<^OCvUQ(&yb+H(QQ0nh!7MM5FqIjfBNWp{pQX?`>OaDLDrO%5-~~1_Cz~5>iV%Y zLY<{0cwoxFvoEtTvB^LHSt4F9k2AFFLcuoVQ3wgskr+>yeVqxpL_wWWhb;Aeg4Ghw zow+^(3mVcV*J}4n1S ztJR4_O1m4$-*Y7aJYLvYjJZj|(p=k3nJy<6+*Ac&TB<%CiRw%UP45rjlonIYjGr>! z-)K+xlEfvSOd%U{BgWtXW#}`Tp>AVLTQ+ZP_+n*r; zOEpat2`2-UIz{wys?fclWGCg$VMcQDgKdw=t5YT*-hx29HFf5+B!;RkpkpjQR&uwT zYSF+=l)9e6$u8`L1{-xE_2*==unS`~{qn<25+<45cyme4r!ksjcWk>X%q_cuWz#zX zOK@+}u{X9p(DX_MA=T`=uEhJ76RJVq4YrXdJ)0$6+H@))c=P5>rgo6x2s6Qk<|9`6 z98a|dR6^Uv#fkUr8+{)Rne74qy+@iiXM>U6$vxwdvKCk$7XD0uMc>;_%b&>_GTCsP zSu_WP8V(0WmuL9K^O)l7J2HTr-w%c<17%t;zNBL_T+^pxGmtUZJXC}9DB?l0b#>Zc zEeRWhEXVrZ{7U$gr44b=r%3&2Pbsx^mYAlyu#J`ovp!~yYN^Jg1n(!rwIwZ6%jjzrcchNWruxH5+H%JVfY*ETzFRH1nJ%F(XTs(06^mrJa>`R_CzQS?YFrKY?jw)+Vy5~BXf@QPp z2+8yXS!ZYNZ(Zdo;qOFGr%<3fP38ENm3X=@w?c6WszaGlBB!{7#VJLw`b~)Ec1i;5 zwW5YitL+Fwsw68#dT6>yul`a%Vv$r>V`Y{V(`%F9rfQZA)lKErD+jHTZ-)X1)y{?G;cL4a zvlon58=u^17ia=JC^5^OgLl?tQtc|N^@s`!sdLLF|8PVod}ilzb;s+rUX{$i>AI5h zmUvruTI{MnA%4-`@!l(207{|Nf=i*%Yb@v8kc^fpd&@ptR~P8+qA@qYs;o$TuPq!D zMRdgbBRx@r5pxhkYI?fH52K9awQt$Aq#@%te4A6jm#P#;c33IP7xgJ5Vq2(mJ`PG# z0O}_V3mO`K+^VZL|5%Yiv57p4g?N)D$;~AN(j?d3qf@e&+-%fdzF7Pe*r7_#%b>B5 zI%c%gL7oXsg)q!V0{^dj9Ft}{talMe*0=SdZurG>uk>=7{ z8l@|uB#&q+Q31+4X&cIO8}1kV!qtxYBp3;TbfuefNxbH?~+s@#w_QZB|wL&)oK+RKZgQsDurLo8Yse6-_KIRW1nA?D_VpAj9RwR&{Cf z_4&{I_#CQKYL?&*WKRj()_@&ws*;m)P)J>XB@m+fgwn0tL4nRdp$MZr%IHG53Bti1 za5Xe%3^z>H6A5Z*6ySHeE+_k#w5n-xJNBEOx8I1KDG8y0fs$A zdOen?jwp_DMz1;ZGAqpVv!KPwI(W|z>*ESl5!mYx?@9 zZ^A<%#AL*7adW62^^h?9U!DfdDP7OcS0jKlg9`@7{QH8NrS$$$Y+fAjsfeK>PtqqfQ%O!K(XE$>h<>CQ%EBv?pDsJm^J^td$9ANHt~ck$$+ ztv9R9H#10YMNeV~Q3U$sd%jn#Et(c#xfb7SF2`oO3qpi>x#Hh$Ob-Md%yGer0!N|h zf)GjF@aHe}uL>|w%lvSo$g7j&z2emwgl5sWTgU<3XWX%sEj(;o&o3y5^jbU~GbSor zbS|(uTz4>I}`&oZ{+9L^2FO7_RBl3Q~Y$Z zScR%b>OsW`2t})PD_Dj4CtcGi$ebbe!Zd7>E;;2~r6sF%J{xN+PvdLK#Pzy9Giw}Y zyivTP_GtkmbFHHAAqiJHLxnM($$zS+L^RAkDQU_+iRNX41jvZtO^_glAiLw8xJfxb z+~$!Iv%!$QPHX!u5qP8v zvu9gpv#LA2zq$K((v?JCUti=BMY(TXmk*EF!m=hg<z86$ODma;H*M1X3BHi6z?6DMKe{f${$~AhH#9h~i=sb;hsj@T%%9p^vDN>6 zOYo<6>PeNkuBwkM3eGAT7W-I?>XRrmlPROiGz80w@L%`oZWjURQchLO@Z>us%Pz9+ z_8+{OU((B!U!rib3^K#Kl^do6JhNDCFLOr+`lsz25V1Dac*hwzR%Q-s2osMpk5HubtrN;MseSgs`tsKQM2y{Ba~L?taS5_G`3}p964PQJoHY?64WP$ z*p1Ey_s}m6-?aC+>s*Z&sZhf;XUzBRabn(mT22%{~&VdNP#prZt$M=LX+NVeu1eof#v+}lepBw=$rjBu%GK3 z2gBMe!t%G98=ff9JZ8&QYhAjUx$>qRzdTvQc>_h$TT^U$%972NJMy9eT3VElQ-0+c zF1DNzv>c6DpYR`l&f5#U67w~aO>+8e_gy|dvbdy#*F9M~5Bus{8NTi1=U;0ixpP=;7G1;LAyyVSbUZ)bA1ZA zyJ>$(MO3+mIID<+R-5)mqg(IO?~Vlo#<^`dIgNJFtWk1+%ty6U5OQpksEd5Bm$`?3 z!n~GQgKhg0P$Ki$4^#7EEit$gUfD?6bNCheWRbvWg~qK0sc`%ga*vD!75b)Jt#nrx zxdCkCV%FF~TrSL8n9YUbC{x=Gj<&EL98ixIjzVHC?|cTFl8kri={(IJW_TAj+z+(wPe>Oc({ zlS?%8)jINenkcQv=Hp;M*SCu^HLuER4~PQ!jQiIfZPe)zYW66;%8$jhNM?&u9bN<2 z1u`2B4%El>0gs8xCrAz+S7=CrMruT=G@Sdwy&RNJkDk61@RdkoCTOZSgc{!m8hNgW z*{yfi?2X#WYjF;z#z#&|a%`#H?q3*rp%HBmd{@){V{y-@#%A+};|XnWqhHHKFW_ib zG-;p#)~+$|*4S$+=0&@5vg7pK>M&d35J*G~ULHVJ`t_Xypf^HMfdpDnKG|ex{UQ4! z-uRVity1K(PVKi`VVjug49oAA`T<+1v_|=#M6DN2j1#fipm~)>62fYVd-M9lvgnNJ mw&|lHH_Y*YtlG!p6K14pid%vRThjU8>smK-)rwWDaQ_F(tLA+G diff --git a/mfr/server/static/js/mfr.js b/mfr/server/static/js/mfr.js index 6129495c4..3f1e0bce4 100644 --- a/mfr/server/static/js/mfr.js +++ b/mfr/server/static/js/mfr.js @@ -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; } @@ -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); From c2df4610d88d0f6125d75043309f675bff8eee7d Mon Sep 17 00:00:00 2001 From: Josh Bird Date: Mon, 19 Mar 2018 10:34:25 -0400 Subject: [PATCH 2/2] Please update the commit message based on the new diff [skip ci] Three commits that has been squashed: Anchor loader pulsar to avoid jumping around * Hide iframe until load message is received. * Use absolute positioning for loader. Fix iframe hiding to avoid breaking stl, pdb, and images * Switch to using `opacity: 0.0` instead of `display: none` to hide iframes that are still being built. Use of `display: none` was causing OpenGL-based renderers (pdb and 3D-object) to fail, and was disabling image zoom for large images. Only style the mfr loader' --- mfr/server/static/css/mfr.css | 33 ++++++++++++++++++++++++------- mfr/server/static/js/mfr.child.js | 2 +- mfr/server/static/js/mfr.js | 5 +++-- 3 files changed, 30 insertions(+), 10 deletions(-) diff --git a/mfr/server/static/css/mfr.css b/mfr/server/static/css/mfr.css index 95ab2b4fc..65cb526e3 100644 --- a/mfr/server/static/css/mfr.css +++ b/mfr/server/static/css/mfr.css @@ -3,23 +3,23 @@ This CSS was stripped out of base.css from the osf-style repo. */ -.ball-pulse > div:nth-child(0) { +#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); } -.ball-pulse > div:nth-child(1) { +#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); } -.ball-pulse > div:nth-child(2) { +#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); } -.ball-pulse > div:nth-child(3) { +#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); } -.ball-pulse > div { +#mfrIframe .ball-pulse > div { background-color: #fff; width: 15px; height: 15px; @@ -31,10 +31,29 @@ This CSS was stripped out of base.css from the osf-style repo. } -.ball-dark > div { +#mfrIframe .ball-dark > div { background-color: #337AB7; } -.embed-responsive-pdf { +#mfrIframe .ball-scale { + position: absolute; + display: flex; + justify-content: center; + align-items: center; + width: 100%; + height: 250px; + top: 0; + left: 0; +} + +#mfrIframe .embed-responsive-pdf { padding-bottom: 95%; } + +#mfrIframe iframe { + opacity: 0.0; +} + +#mfrIframe { + min-height: 250px; +} diff --git a/mfr/server/static/js/mfr.child.js b/mfr/server/static/js/mfr.child.js index 8b320037e..35e355163 100644 --- a/mfr/server/static/js/mfr.child.js +++ b/mfr/server/static/js/mfr.child.js @@ -17,7 +17,7 @@ } }); }); - }); + }, false); window.addEventListener('resize', function () { window.pymChild.sendHeight(); diff --git a/mfr/server/static/js/mfr.js b/mfr/server/static/js/mfr.js index 3f1e0bce4..cbf305a0a 100644 --- a/mfr/server/static/js/mfr.js +++ b/mfr/server/static/js/mfr.js @@ -80,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');