- Removed toggle dark mode button
- Implement browser auto-detection of dark-mode based on browser setting
- Moved cookies JS to it's own file
- Organised file structure
This commit is contained in:
ZanzyTHEbar 2022-06-04 21:18:07 +02:00
parent b89caf2fbf
commit 4fd6a2dd81
7 changed files with 93 additions and 54 deletions

View File

@ -29,33 +29,15 @@
}
}
</style>
<div id="cookie-notice"><span>I would like to use third party cookies and scripts to improve the functionality of this
website.</span><a id="cookie-notice-accept" class="btn btn-primary btn-sm">Approve</a><a
href="/EyeTrackVR/privacy" class="btn btn-primary btn-sm">More info</a></div>
<div id="cookie-notice">
<span>I would like to use third party cookies and scripts to improve the functionality of this
website.
</span>
<a id="cookie-notice-accept" class="btn btn-primary btn-sm">Approve</a>
<a href="/EyeTrackVR/privacy" class="btn btn-primary btn-sm">More info
</a>
</div>
<script>
function createCookie(name, value, days) {
var expires = "";
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toUTCString();
}
document.cookie = name + "=" + value + expires + "; path=/";
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
}
return null;
}
function eraseCookie(name) {
createCookie(name, "", -1);
}
if (readCookie('cookie-notice-dismissed') == 'true') {
{% include ga.js %}
} else {
@ -66,5 +48,4 @@
document.getElementById('cookie-notice').style.display = 'none';
location.reload();
});
</script>

View File

@ -12,7 +12,26 @@
<link rel="shortcut icon" href="{{ '/assets/images/favicon.ico' | relative_url }}" type="image/x-icon">
{% if false %}
<link rel="stylesheet" href="{{ '/assets/css/just-the-docs-default.css' | relative_url }}">
{% endif %}
<script>
/* If `prefers-color-scheme` is not supported, fall back to default mode */
if (window.matchMedia('(prefers-color-scheme: dark)').media === 'not all') {
/* document.documentElement.style.display = 'none'; */
document.head.insertAdjacentHTML(
'beforeend',
'<link rel="stylesheet" href="{{ ' / assets / css / just - the - docs -default.css' | relative_url }}" onload="document.documentElement.style.display = \'\'">',
);
}
</script>
<link rel="stylesheet" href="{{ '/assets/css/just-the-docs-eyetrackvr.css' | relative_url }}"
media="(prefers-color-scheme: dark)" />
<link rel="stylesheet" href="{{ '/assets/css/just-the-docs-light.css' | relative_url }}"
media="(prefers-color-scheme: light)" />
{% if site.ga_tracking != nil %}
<script async src="https://www.googletagmanager.com/gtag/js?id={{ site.ga_tracking }}"></script>

View File

@ -1,18 +1,5 @@
<ul>
<!-- Legacy Button -->
<!-- <ul>
<a href="javascript:toggleDetect()" title="Switching Schemes" class="btn btn-mode fs-2 mb-1 mb-md-0 mr-0"
id="switch-mode">Dark Mode</a>
</ul>
<script type="text/javascript">
const switch_scheme = document.getElementById("switch-mode");
var isClicked = false;
async function toggleDetect() {
if (isClicked == false) {
isClicked = true;
switch_scheme.textContent = "Light Mode";
} else {
isClicked = false;
switch_scheme.textContent = "Dark Mode";
}
await switchScheme(isClicked);
}
</script>
</ul> -->

View File

@ -1,11 +1 @@
async function switchScheme(isClicked) {
if (isClicked == true) {
jtd.setTheme("eyetrackvr");
var color_scheme = "dark";
} else {
jtd.setTheme("light");
var color_scheme = "light";
}
document.getElementById("discord-widget").src =
"https://discord.com/widget?id=946212245187199026&theme=" + color_scheme;
}

View File

@ -226,7 +226,10 @@ layout: table_wrappers
{% endif %}
</div>
<script src='{{ "/assets/js/custom/cookies/cookies.js" | absolute_url }}'></script>
{% include cookie_consent.html %}
<script src='{{ "/assets/js/custom/scheme/colorscheme.js" | absolute_url }}'></script>
</body>
</html>

View File

@ -0,0 +1,22 @@
function createCookie(name, value, days) {
var expires = "";
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toUTCString();
}
document.cookie = name + "=" + value + expires + "; path=/";
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
}
return null;
}
function eraseCookie(name) {
createCookie(name, "", -1);
}

View File

@ -0,0 +1,37 @@
const switch_scheme = document.getElementById("switch-mode");
var isClicked = false;
/* Legacy function */
async function toggleDetect() {
if (isClicked == false) {
isClicked = true;
createCookie("isClicked", true, 365);
switch_scheme.textContent = "Light Mode";
} else {
isClicked = false;
createCookie("isClicked", false, 365);
switch_scheme.textContent = "Dark Mode";
}
}
var url = window.location.pathname;
if (
window.matchMedia("(prefers-color-scheme: light)") &&
url == "/EyeTrackVR/contact/"
) {
var discord_scheme = "light";
document.getElementById("discord-widget").src =
"https://discord.com/widget?id=946212245187199026&theme=" + discord_scheme;
}
if (
window.matchMedia("(prefers-color-scheme: dark)") &&
url == "/EyeTrackVR/contact/"
) {
var discord_scheme = "dark";
document.getElementById("discord-widget").src =
"https://discord.com/widget?id=946212245187199026&theme=" + discord_scheme;
}