maverick/flex-template-web
1
0
Fork 0
mirror of https://github.com/kingomarnajjar/flex-template-web.git synced 2026-07-25 22:37:18 +10:00
Code Issues Projects Releases Packages Wiki Activity Actions

Font handling: let's use FOUT with FontFaceObserver

Browse source 
Check if Promise is available
This commit is contained in:
Vesa Luusua 2017-10-09 15:33:50 +03:00
parent bb0ba53083
commit 4d37790c6d
3 changed files with 95 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
public/500.html
View file

@ -160,6 +160,17 @@
}
</style>
<script>
(function(document){
// Optimization for repeated views
// Small script to check if fonts are already loaded
// Adding as little footprint as possible to <head> since that will slow down rendering.
if (document.fonts && sessionStorage.fontsLoaded) {
// Optimization for Repeated views - i.e. page refresh hits the same error
document.documentElement.classList.add("fontsLoaded");
}
})(document);
</script>
</head>
<body id="body">
<div class="content">
@ -175,8 +186,14 @@
// Browsers that don't support FontFaceSet, will show only system fonts
if (document.fonts) {
// Check if Promise exists in window
var hasFeaturePromise = typeof window.Promise !== 'undefined' &&
typeof window.Promise.reject !== 'undefined' &&
Object.prototype.toString.call(Promise.resolve()) === '[object Promise]';
// Optimization for Repeated views - i.e. page refresh hits the same error
if (sessionStorage.fontsLoaded) {
// If there's no Promise available, we also revert to @font-face loading
if (sessionStorage.fontsLoaded || !hasFeaturePromise) {
document.getElementById("body").classList.add("fontsLoaded");
return;
}

67
public/index.html
View file

@ -62,11 +62,76 @@
}
</style>
<script>
(function(document){
// Optimization for repeated views
// Small script to check if fonts are already loaded
// Adding as little footprint as possible to <head> since that will slow down rendering.
if (sessionStorage.fontsLoaded) {
document.documentElement.classList.add("fontsLoaded");
}
})(document);
</script>
<link rel="stylesheet" href="%PUBLIC_URL%/static/reactDates.css" />
</head>
<body>
<body id="body">
<div id="root"><!--!body--></div>
<script>
(function(document){
// Check if Promise exists in window
var hasFeaturePromise = typeof window.Promise !== 'undefined' &&
typeof window.Promise.reject !== 'undefined' &&
Object.prototype.toString.call(Promise.resolve()) === '[object Promise]';
// Optimization for repeated views
// No need to loading functionality if they are already loaded.
// If there's no Promise available, we also revert to @font-face loading
if (sessionStorage.fontsLoaded || !hasFeaturePromise) {
// Ensure that fontsLoaded class is added to <html> element
document.documentElement.classList.add('fontsLoaded');
return;
}
// Inlined Font Face Observer to speed up loading of fonts.
/* Font Face Observer v2.0.13 - © Bram Stein. License: BSD-3-Clause */
(function(){function l(a,b){document.addEventListener?a.addEventListener("scroll",b,!1):a.attachEvent("scroll",b)}function m(a){document.body?a():document.addEventListener?document.addEventListener("DOMContentLoaded",function c(){document.removeEventListener("DOMContentLoaded",c);a()}):document.attachEvent("onreadystatechange",function k(){if("interactive"==document.readyState||"complete"==document.readyState)document.detachEvent("onreadystatechange",k),a()})};function r(a){this.a=document.createElement("div");this.a.setAttribute("aria-hidden","true");this.a.appendChild(document.createTextNode(a));this.b=document.createElement("span");this.c=document.createElement("span");this.h=document.createElement("span");this.f=document.createElement("span");this.g=-1;this.b.style.cssText="max-width:none;display:inline-block;position:absolute;height:100%;width:100%;overflow:scroll;font-size:16px;";this.c.style.cssText="max-width:none;display:inline-block;position:absolute;height:100%;width:100%;overflow:scroll;font-size:16px;";
this.f.style.cssText="max-width:none;display:inline-block;position:absolute;height:100%;width:100%;overflow:scroll;font-size:16px;";this.h.style.cssText="display:inline-block;width:200%;height:200%;font-size:16px;max-width:none;";this.b.appendChild(this.h);this.c.appendChild(this.f);this.a.appendChild(this.b);this.a.appendChild(this.c)}
function t(a,b){a.a.style.cssText="max-width:none;min-width:20px;min-height:20px;display:inline-block;overflow:hidden;position:absolute;width:auto;margin:0;padding:0;top:-999px;white-space:nowrap;font-synthesis:none;font:"+b+";"}function y(a){var b=a.a.offsetWidth,c=b+100;a.f.style.width=c+"px";a.c.scrollLeft=c;a.b.scrollLeft=a.b.scrollWidth+100;return a.g!==b?(a.g=b,!0):!1}function z(a,b){function c(){var a=k;y(a)&&a.a.parentNode&&b(a.g)}var k=a;l(a.b,c);l(a.c,c);y(a)};function A(a,b){var c=b||{};this.family=a;this.style=c.style||"normal";this.weight=c.weight||"normal";this.stretch=c.stretch||"normal"}var B=null,C=null,E=null,F=null;function G(){if(null===C)if(J()&&/Apple/.test(window.navigator.vendor)){var a=/AppleWebKit\/([0-9]+)(?:\.([0-9]+))(?:\.([0-9]+))/.exec(window.navigator.userAgent);C=!!a&&603>parseInt(a[1],10)}else C=!1;return C}function J(){null===F&&(F=!!document.fonts);return F}
function K(){if(null===E){var a=document.createElement("div");try{a.style.font="condensed 100px sans-serif"}catch(b){}E=""!==a.style.font}return E}function L(a,b){return[a.style,a.weight,K()?a.stretch:"","100px",b].join(" ")}
A.prototype.load=function(a,b){var c=this,k=a||"BESbswy",q=0,D=b||3E3,H=(new Date).getTime();return new Promise(function(a,b){if(J()&&!G()){var M=new Promise(function(a,b){function e(){(new Date).getTime()-H>=D?b():document.fonts.load(L(c,'"'+c.family+'"'),k).then(function(c){1<=c.length?a():setTimeout(e,25)},function(){b()})}e()}),N=new Promise(function(a,c){q=setTimeout(c,D)});Promise.race([N,M]).then(function(){clearTimeout(q);a(c)},function(){b(c)})}else m(function(){function u(){var b;if(b=-1!=
f&&-1!=g||-1!=f&&-1!=h||-1!=g&&-1!=h)(b=f!=g&&f!=h&&g!=h)||(null===B&&(b=/AppleWebKit\/([0-9]+)(?:\.([0-9]+))/.exec(window.navigator.userAgent),B=!!b&&(536>parseInt(b[1],10)||536===parseInt(b[1],10)&&11>=parseInt(b[2],10))),b=B&&(f==v&&g==v&&h==v||f==w&&g==w&&h==w||f==x&&g==x&&h==x)),b=!b;b&&(d.parentNode&&d.parentNode.removeChild(d),clearTimeout(q),a(c))}function I(){if((new Date).getTime()-H>=D)d.parentNode&&d.parentNode.removeChild(d),b(c);else{var a=document.hidden;if(!0===a||void 0===a)f=e.a.offsetWidth,
g=n.a.offsetWidth,h=p.a.offsetWidth,u();q=setTimeout(I,50)}}var e=new r(k),n=new r(k),p=new r(k),f=-1,g=-1,h=-1,v=-1,w=-1,x=-1,d=document.createElement("div");d.dir="ltr";t(e,L(c,"sans-serif"));t(n,L(c,"serif"));t(p,L(c,"monospace"));d.appendChild(e.a);d.appendChild(n.a);d.appendChild(p.a);document.body.appendChild(d);v=e.a.offsetWidth;w=n.a.offsetWidth;x=p.a.offsetWidth;I();z(e,function(a){f=a;u()});t(e,L(c,'"'+c.family+'",sans-serif'));z(n,function(a){g=a;u()});t(n,L(c,'"'+c.family+'",serif'));
z(p,function(a){h=a;u()});t(p,L(c,'"'+c.family+'",monospace'))})})};"object"===typeof module?module.exports=A:(window.FontFaceObserver=A,window.FontFaceObserver.prototype.load=A.prototype.load);}());
// Fonts we use (Check font-face rules from <style> tag in <head> section)
var sofiaproRegular = new FontFaceObserver('sofiapro', { weight: 400 });
var sofiaproMedium = new FontFaceObserver('sofiapro', { weight: 500 });
var sofiaproSemibold = new FontFaceObserver('sofiapro', { weight: 600 });
var sofiaproBold = new FontFaceObserver('sofiapro', { weight: 700 });
var fontLoadingTimeout = 5000;
Promise.all([
sofiaproRegular.load(null, fontLoadingTimeout),
sofiaproMedium.load(null, fontLoadingTimeout),
sofiaproSemibold.load(null, fontLoadingTimeout),
sofiaproBold.load(null, fontLoadingTimeout)
])
.then(function () {
document.documentElement.classList.add("fontsLoaded");
// Optimization for repeated views
sessionStorage.fontsLoaded = true;
})
.catch(function () {
// If loading takes over 5 seconds, let's just show fallback fonts.
console.warn('Font loading took too long time - using system fonts instead.');
});
})(document);
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDZhsJGsRv0c9HykUHfnVAIVOb1tWtqrTg&libraries=places"></script>
<!--
Stripe script should be on every page, not just the pages that

13
src/marketplaceIndex.css
View file

@ -4,7 +4,7 @@
/* ================ Fonts ================ */
body {
font-family: "sofiapro", Helvetica, Arial, sans-serif;
font-family: Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased; /* http://szafranek.net/blog/2009/02/22/font-smoothing-explained/ */
-moz-osx-font-smoothing: grayscale; /* http://szafranek.net/blog/2009/02/22/font-smoothing-explained/ */
text-rendering: optimizeSpeed;
@ -75,7 +75,7 @@ label {
}
button {
font-family: "sofiapro", Helvetica, Arial, sans-serif;
font-family: Helvetica, Arial, sans-serif;
}
select {
@ -91,3 +91,12 @@ textarea {
min-height: 48px;
padding: 0 0 5px 0;
}
:global(.fontsLoaded) {
& body {
font-family: "sofiapro", Helvetica, Arial, sans-serif;
}
& button {
font-family: "sofiapro", Helvetica, Arial, sans-serif;
}
}