|
7 | 7 | background: #0f172a; |
8 | 8 | } |
9 | 9 |
|
10 | | - html.dcg-theme-loading body { |
11 | | - visibility: hidden; |
12 | | - } |
13 | | - |
14 | 10 | .md-toggle { |
15 | 11 | position: absolute; |
16 | 12 | width: 0; |
|
42 | 38 | } |
43 | 39 | </style> |
44 | 40 | <script> |
45 | | - const isPlaygroundLink = link => { |
46 | | - const url = new URL(link.href); |
47 | | - return url.origin === window.location.origin && ( |
48 | | - url.pathname.endsWith("/playground/") || |
49 | | - url.pathname.endsWith("/assets/playground/index.html") |
50 | | - ); |
51 | | - }; |
52 | | - |
53 | | - document.documentElement.classList.add("dcg-theme-loading"); |
54 | | - window.setTimeout(() => { |
55 | | - document.documentElement.classList.remove("dcg-theme-loading"); |
56 | | - }, 3000); |
57 | | - window.addEventListener("DOMContentLoaded", () => { |
58 | | - for (const link of document.querySelectorAll("a[href]")) { |
59 | | - if (isPlaygroundLink(link)) { |
60 | | - link.target = "_self"; |
| 41 | + (() => { |
| 42 | + const html = document.documentElement; |
| 43 | + const revealPage = () => html.classList.remove("dcg-theme-loading"); |
| 44 | + const getPlaygroundUrl = link => { |
| 45 | + try { |
| 46 | + const url = new URL(link.getAttribute("href") || "", window.location.href); |
| 47 | + const isPlayground = url.origin === window.location.origin && ( |
| 48 | + url.pathname.endsWith("/playground/") || |
| 49 | + url.pathname.endsWith("/assets/playground/index.html") |
| 50 | + ); |
| 51 | + return isPlayground ? url : null; |
| 52 | + } catch { |
| 53 | + return null; |
61 | 54 | } |
| 55 | + }; |
| 56 | + const initPage = () => { |
| 57 | + for (const link of document.querySelectorAll("a[href]")) { |
| 58 | + if (getPlaygroundUrl(link)) { |
| 59 | + link.setAttribute("target", "_self"); |
| 60 | + } |
| 61 | + } |
| 62 | + window.requestAnimationFrame(revealPage); |
| 63 | + }; |
| 64 | + |
| 65 | + html.classList.add("dcg-theme-loading"); |
| 66 | + window.setTimeout(revealPage, 3000); |
| 67 | + if (document.readyState === "loading") { |
| 68 | + window.addEventListener("DOMContentLoaded", initPage, { once: true }); |
| 69 | + } else { |
| 70 | + initPage(); |
62 | 71 | } |
63 | | - window.requestAnimationFrame(() => { |
64 | | - document.documentElement.classList.remove("dcg-theme-loading"); |
65 | | - }); |
66 | | - }); |
67 | | - document.addEventListener("click", event => { |
68 | | - if (event.defaultPrevented || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) { |
69 | | - return; |
70 | | - } |
71 | | - const target = event.target instanceof Element ? event.target : event.target.parentElement; |
72 | | - const link = target ? target.closest("a[href]") : null; |
73 | | - if (!link || !isPlaygroundLink(link)) { |
74 | | - return; |
75 | | - } |
76 | | - event.preventDefault(); |
77 | | - window.location.assign(link.href); |
78 | | - }, true); |
| 72 | + document.addEventListener("click", event => { |
| 73 | + if (event.defaultPrevented || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) { |
| 74 | + return; |
| 75 | + } |
| 76 | + const target = event.target instanceof Element ? event.target : event.target.parentElement; |
| 77 | + const link = target ? target.closest("a[href]") : null; |
| 78 | + const url = link ? getPlaygroundUrl(link) : null; |
| 79 | + if (!url) { |
| 80 | + return; |
| 81 | + } |
| 82 | + event.preventDefault(); |
| 83 | + window.location.assign(url.href); |
| 84 | + }, true); |
| 85 | + })(); |
79 | 86 | </script> |
80 | 87 | {% endblock %} |
81 | 88 |
|
|
0 commit comments