Skip to content

Commit 9593f3c

Browse files
nginx-jacknginx-jack
committed
Perform theme switch before first paint
1 parent b69aa30 commit 9593f3c

File tree

5 files changed

+162
-130
lines changed

5 files changed

+162
-130
lines changed

‎assets/js/product-selector.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@ document.addEventListener("DOMContentLoaded", function() {
22
const productSelectorContent = document.getElementById("product-selector");
33
const productSelectorButton = document.getElementById("product-selector-button");
44

5+
if (productSelectorButton === null || productSelectorButton == null) {
6+
return;
7+
}
8+
59
productSelectorButton.addEventListener("click", function() {
610
if (productSelectorContent.style.display === "block") {
711
productSelectorContent.style.display = "none";

‎assets/js/site-dropdown.js

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
$(document).ready(function () {
1+
document.addEventListener("DOMContentLoaded", function () {
22
const dropdownContent = document.getElementById("dropdown-content");
33
const navbarButton = document.getElementById("navbar-sites-button");
44
const chevronIcon = document.getElementById("navbar-sites-button-icon");
55

6-
$("#navbar-sites-button").on("click", () => {
6+
navbarButton.addEventListener("click", function () {
77
chevronIcon.classList.toggle('rotate-chevron');
88

99
if (dropdownContent.style.display === "block") {
@@ -15,13 +15,13 @@ $(document).ready(function () {
1515
}
1616
});
1717

18-
window.onclick = function(event) {
18+
window.addEventListener("click", function (event) {
1919
if (!event.target.matches('#navbar-sites-button') && !event.target.matches('#navbar-sites-button-icon')) {
20-
if(dropdownContent.style.display !== "none" && dropdownContent.style.display !== ""){
20+
if (dropdownContent.style.display !== "none" && dropdownContent.style.display !== "") {
2121
chevronIcon.classList.toggle('rotate-chevron');
2222
}
23-
dropdownContent.style.display = "none"
23+
dropdownContent.style.display = "none";
2424
navbarButton.classList.remove("remove-bottom-radius");
2525
}
26-
}
27-
})
26+
});
27+
});

‎assets/js/theme-switcher.js

Lines changed: 0 additions & 52 deletions
This file was deleted.

‎layouts/_default/baseof.html

Lines changed: 149 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -2,75 +2,158 @@
22
<html lang="{{ .Site.LanguageCode }}">
33

44
<head>
5-
{{ block "head" . }}
6-
7-
{{ partial "meta.html" . }}
8-
9-
{{ partial "favicon.html" . }}
10-
11-
{{ partial "styles.html" . }}
12-
13-
{{ if in .Params.doctypes "devportal" }}
14-
{{ partial "devportal/style.html" . }}
15-
{{ end }}
16-
17-
{{ if fileExists "/layouts/partials/head_custom.html" }}
18-
{{ partial "head_custom.html" . }}
19-
{{ end }}
20-
21-
{{ if or ( not hugo.IsServer ) ( not ( in .Site.Params.buildtype "package" ) ) }}
22-
23-
{{ partial "trustarc.html" . }}
24-
25-
{{ partial "tealium-profile.html" . }}
26-
27-
{{ end }}
28-
29-
{{ end }}
30-
31-
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
32-
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
33-
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
34-
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
35-
})(window,document,'script','dataLayer','GTM-K5HG9JT');</script>
36-
37-
</head>
38-
39-
<body>
5+
<style>
6+
body {
7+
/* Hide entire body for first paint. This suppresses flicker when theme is loading. */
8+
visibility: hidden;
9+
}
10+
</style>
11+
12+
<noscript>
13+
<style>
14+
/* Styles when JavaScript is disabled. Fallsback to old theme. */
15+
body {
16+
visibility: visible;
17+
}
18+
</style>
19+
</noscript>
20+
21+
22+
23+
<script>
24+
25+
function useNewTheme(isNewTheme) {
26+
localStorage.setItem("useNewTheme", `${isNewTheme}`);
27+
28+
// swap out v1 and v2 css style
29+
const v1cssIds = [
30+
"cssFA1",
31+
"cssFA2",
32+
"cssFA3",
33+
"cssBootstrap",
34+
"css1",
35+
"css2",
36+
"css3",
37+
"css4",
38+
"css5",
39+
"css6"
40+
];
41+
42+
v1cssIds.forEach((cssId) => {
43+
const element = document.getElementById(cssId);
44+
if (element !== null) {
45+
element.disabled = isNewTheme;
46+
}
47+
});
48+
49+
const v2cssIds = ["css7"];
50+
v2cssIds.forEach((cssId) => {
51+
const element = document.getElementById(cssId);
52+
if (element !== null) {
53+
element.disabled = !isNewTheme;
54+
}
55+
});
56+
57+
// swap out v1 and v2 elements
58+
const v1ElementIds = ["sidebar", "toc"]
59+
60+
v1ElementIds.forEach((elementId) => {
61+
const element = document.getElementById(elementId);
62+
if (element !== null) {
63+
element.style.display = isNewTheme ? "none" : "";
64+
}
65+
});
66+
67+
const mfElements = ['[data-mf="true"]'];
68+
mfElements.forEach((elementId) => {
69+
document
70+
.querySelectorAll(elementId)
71+
.forEach(
72+
(element) => (element.style.display = isNewTheme ? "" : "none")
73+
);
74+
});
75+
76+
document.getElementById("body").style.visibility = "visible";
77+
}
78+
79+
const mf = useNewTheme;
80+
81+
document.addEventListener("DOMContentLoaded", function () {
82+
useNewTheme(localStorage.getItem("useNewTheme") === "true");
83+
})
84+
85+
86+
</script>
87+
88+
{{ block "head" . }}
89+
90+
{{ partial "meta.html" . }}
91+
92+
{{ partial "favicon.html" . }}
93+
94+
{{ partial "styles.html" . }}
95+
96+
{{ if in .Params.doctypes "devportal" }}
97+
{{ partial "devportal/style.html" . }}
98+
{{ end }}
99+
100+
{{ if fileExists "/layouts/partials/head_custom.html" }}
101+
{{ partial "head_custom.html" . }}
102+
{{ end }}
103+
40104
{{ if or ( not hugo.IsServer ) ( not ( in .Site.Params.buildtype "package" ) ) }}
41-
{{ partial "universal-tag.html" . }}
105+
106+
{{ partial "trustarc.html" . }}
107+
108+
{{ partial "tealium-profile.html" . }}
109+
42110
{{ end }}
43-
44-
<header>
45-
{{ block "header" . }}{{end}}
46-
</header>
47-
48-
<section class="base-layout">
49-
<section class="breadcrumb-layout">
50-
<div data-mf="true" id="searchbox" style="display:none;">
51-
<div class="CoveoSearchbox" data-placeholder='Search NGINX Docs...'></div>
52-
</div>
53-
{{ if not .IsHome }}
54-
{{ if not (in .Params.display_breadcrumb "false" ) }}
55-
{{ partial "breadcrumb" .}}
111+
112+
{{ end }}
113+
114+
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
115+
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
116+
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
117+
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
118+
})(window,document,'script','dataLayer','GTM-K5HG9JT');</script>
119+
120+
</head>
121+
122+
<body id="body">
123+
{{ if or ( not hugo.IsServer ) ( not ( in .Site.Params.buildtype "package" ) ) }}
124+
{{ partial "universal-tag.html" . }}
125+
{{ end }}
126+
127+
<header>
128+
{{ block "header" . }}{{end}}
129+
</header>
130+
131+
<section class="base-layout">
132+
<section class="breadcrumb-layout">
133+
<div data-mf="true" id="searchbox" style="display:none;">
134+
<div class="CoveoSearchbox" data-placeholder='Search NGINX Docs...'></div>
135+
</div>
136+
{{ if not .IsHome }}
137+
{{ if not (in .Params.display_breadcrumb "false" ) }}
138+
{{ partial "breadcrumb" .}}
139+
{{ end }}
56140
{{ end }}
141+
</section>
142+
143+
<div class="main container-fluid min-page-height" data-menu-id="{{.RelPermalink}}">
144+
{{ block "main" . }}{{ end }}
145+
</div>
146+
</section>
147+
148+
<footer>
149+
150+
{{ block "footer" . }}
151+
{{ partial "footer.html" . }}
57152
{{ end }}
58-
</section>
59-
60-
<div class="main container-fluid min-page-height" data-menu-id="{{.RelPermalink}}">
61-
{{ block "main" . }}{{ end }}
62-
</div>
63-
</section>
64-
65-
<footer>
66-
67-
{{ block "footer" . }}
68-
{{ partial "footer.html" . }}
69-
{{ end }}
70-
71-
</footer>
72-
73-
{{ partial "scripts.html" . }}
74-
<div id="consent_blackbar"></div>
153+
154+
</footer>
155+
156+
{{ partial "scripts.html" . }}
157+
<div id="consent_blackbar"></div>
75158
</body>
76159
</html>

‎layouts/partials/scripts.html

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -52,14 +52,11 @@
5252

5353
{{ end }}
5454

55+
56+
5557
<!-- Load Sidebar javascript -->
5658
{{ $jsSidebar := resources.Get "js/sidebar.js" | minify | fingerprint "sha512" }}
5759
<script src="{{ $jsSidebar.RelPermalink }}" type="text/javascript" integrity="{{ $jsSidebar.Data.Integrity }}"></script>
58-
59-
<!-- Inline theme switcher -->
60-
{{ $jsThemeSwitcher := resources.Get "js/theme-switcher.js" | minify | fingerprint "sha512" }}
61-
<script src="{{ $jsThemeSwitcher.RelPermalink }}" type="text/javascript"
62-
integrity="{{ $jsThemeSwitcher.Data.Integrity }}"></script>
6360

6461
<!-- Load Site Dropdown javascript -->
6562
{{ $jsSiteDropdown := resources.Get "js/site-dropdown.js" | minify | fingerprint "sha512" }}

0 commit comments

Comments
 (0)