Skip to content

Commit 8ae8b35

Browse files
nicomolletnicomollet
committed
* **Tweak** - Webfont prevent FOUT (again)
1 parent 18df70f commit 8ae8b35

10 files changed

+98
-35
lines changed

‎css/styles.css

+39-12
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎css/styles.css.map

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎css/styles.min.css

+2-2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎header.php

+1-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
<html <?php language_attributes(); ?> class="no-js ie7"> <![endif]-->
1616
<!--[if IE 8 ]>
1717
<html <?php language_attributes(); ?> class="no-js ie8"> <![endif]-->
18-
<!--[if (gte IE 9)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!--><html <?php language_attributes(); ?> class="no-js wf-start">
18+
<!--[if (gte IE 9)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!--><html <?php language_attributes(); ?> class="no-js wf-loading">
1919
<!--<![endif]-->
2020

2121
<head>

‎inc/front/webfonts.php

+25-9
Original file line numberDiff line numberDiff line change
@@ -14,27 +14,43 @@ function stormbringer_webfonts() {
1414
if($typekit_id)$typekit_id= 'typekit:{id:\''.$typekit_id.'\'},';
1515
$script = <<<EOS
1616
<script>
17-
WebFontConfig = {{$google_fonts}{$typekit_id}};
17+
WebFontConfig = {
18+
{$google_fonts}{$typekit_id}
19+
timeout: 2000,
20+
loading: function() {console.log('WF loading')},
21+
active: function() {console.log('WF active');
22+
sessionStorage.fonts = true;
23+
window.setTimeout (
24+
function(){
25+
console.log('WF active real')
26+
document.documentElement.className += ' wf-active-real';
27+
}
28+
,500);
29+
},
30+
inactive: function() {console.log('WF inactive')},
31+
};
1832
(function(d, t) {
1933
var wf = d.createElement(t),s = d.getElementsByTagName(t)[0];
2034
wf.src = '//ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
35+
wf.async = true;
2136
s.parentNode.insertBefore(wf, s);
2237
})( document, 'script')
2338
</script>
2439
EOS;
2540
endif;
2641
echo $script;
2742
}
28-
add_action( 'wp_footer', 'stormbringer_webfonts', -20 );
43+
add_action( 'wp_footer', 'stormbringer_webfonts', 20 );
2944

3045
/**
31-
* Webfont Nojs fallback
46+
* Webfont loader fallback
3247
*/
3348
function stormbringer_webfonts_nojs(){
34-
echo '<noscript><style>
35-
.wf-active *, .wf-inactive *{
36-
visibility: visible;
37-
}
38-
</style></noscript>';
49+
$script = <<<EOS
50+
<script>
51+
(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement)
52+
</script>
53+
EOS;
54+
echo $script;
3955
}
40-
add_action( 'stormbringer_footer_before', 'stormbringer_webfonts_nojs', 0 );
56+
add_action( 'wp_head', 'stormbringer_webfonts_nojs', 0 );

‎js/scripts.js

+17-5
Original file line numberDiff line numberDiff line change
@@ -1945,20 +1945,21 @@ jQuery(function($) { // DOM is now ready and jQuery's $ alias sandboxed
19451945
// Navbar stuck on scrolltop
19461946
if($('#navigation').hasClass('navbar-stuckonscrolltop')){
19471947
var lastScrollTop = 0;
1948-
var headerHeight = $('#navigation').height() + $('#header').height() + $('#header-above').height() + $('#header-below').height();
1949-
var navHeight = $('#navigation').height();
1948+
var navHeight = $('#navigation').height() + 100;
19501949
$(window).scroll(function(event){
19511950
var st = $(this).scrollTop();
1952-
if (st > headerHeight && st > lastScrollTop){
1951+
if (st > navHeight && st > lastScrollTop){
19531952
$('#navigation').addClass('navbar-outofview').addClass('navbar-stuck');
19541953
}
1955-
if(st <= (headerHeight)){
1954+
if(st <= (navHeight)){
19561955
$('#navigation').removeClass('navbar-stuck');
19571956
}
19581957
if (st > lastScrollTop){ // going down
19591958
//$('#navigation').addClass('navbar-outofview'); // nico 2017/05/23 testing without this line to check behaviour
19601959
} else { // going up
1961-
$('#navigation').removeClass('navbar-outofview'); //up
1960+
if(!$('body').hasClass('woocommerce-checkout')){ // on woocommerce-checkout does not display navbar
1961+
$('#navigation').removeClass('navbar-outofview');
1962+
}
19621963
}
19631964
lastScrollTop = st;
19641965
});
@@ -2162,6 +2163,7 @@ jQuery(function($) { // DOM is now ready and jQuery's $ alias sandboxed
21622163
// Woocommerce: handheld footer bar
21632164
$( '.stormbringer-handheld-footer-bar .search > a' ).click( function(e) {
21642165
$( this ).parent().toggleClass( 'active' );
2166+
$( this ).parent().find('.search-field').focus();
21652167
e.preventDefault();
21662168
});
21672169

@@ -2226,6 +2228,16 @@ jQuery(function($) { // DOM is now ready and jQuery's $ alias sandboxed
22262228
});
22272229
}
22282230

2231+
// Webfontloader: Timeout or after you know fonts should have loaded
2232+
window.setTimeout (
2233+
function(){
2234+
var htmlClass = document.documentElement.className;
2235+
if (htmlClass.indexOf('wf-') === -1) {
2236+
htmlClass = htmlClass.replace(/([.]*)/,'wf-error $1');
2237+
}
2238+
}
2239+
,1000);
2240+
22292241
});
22302242
jQuery(function($) { // DOM is now ready and jQuery's $ alias sandboxed
22312243

0 commit comments

Comments
 (0)