first commit
This commit is contained in:
@@ -0,0 +1,169 @@
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
var config = window.blcLdt || {};
|
||||
var btn = document.getElementById('blc-ldt-toggle');
|
||||
if (!btn) return;
|
||||
|
||||
var storageKey = config.storageKey || 'blc_ldt_scheme';
|
||||
var cookieName = config.cookieName || 'blc_ldt_scheme';
|
||||
var blocksyKeys = config.blocksyStorageKeys || ['blocksyColorMode', 'blocksy_color_mode', 'theme'];
|
||||
var allKeys = [storageKey].concat(blocksyKeys);
|
||||
var respectOs = config.respectOsPreference !== false;
|
||||
var enableAnimation = config.enableAnimation !== false;
|
||||
var prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
|
||||
|
||||
function getStoredScheme() {
|
||||
var i, stored;
|
||||
|
||||
try {
|
||||
for (i = 0; i < allKeys.length; i++) {
|
||||
stored = localStorage.getItem(allKeys[i]);
|
||||
if (stored === 'light' || stored === 'dark') {
|
||||
return stored;
|
||||
}
|
||||
}
|
||||
} catch (e) {}
|
||||
|
||||
var match = document.cookie.match(
|
||||
new RegExp('(?:^|; )' + cookieName.replace(/[.*+?^${}()|[\]\\]/g, '\\$&') + '=([^;]*)')
|
||||
);
|
||||
if (match) {
|
||||
var cookieVal = decodeURIComponent(match[1]);
|
||||
if (cookieVal === 'light' || cookieVal === 'dark') {
|
||||
return cookieVal;
|
||||
}
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
function getScheme() {
|
||||
var stored = getStoredScheme();
|
||||
if (stored) {
|
||||
return stored;
|
||||
}
|
||||
return document.documentElement.classList.contains('theme-dark') ? 'dark' : 'light';
|
||||
}
|
||||
|
||||
function isDark() {
|
||||
return getScheme() === 'dark';
|
||||
}
|
||||
|
||||
function setCookie(scheme) {
|
||||
var path = config.cookiePath || '/';
|
||||
var domain = config.cookieDomain ? '; domain=' + config.cookieDomain : '';
|
||||
var maxAge = 60 * 60 * 24 * 365;
|
||||
document.cookie =
|
||||
cookieName +
|
||||
'=' +
|
||||
encodeURIComponent(scheme) +
|
||||
';path=' +
|
||||
path +
|
||||
domain +
|
||||
';max-age=' +
|
||||
maxAge +
|
||||
';SameSite=Lax';
|
||||
}
|
||||
|
||||
function persistScheme(scheme) {
|
||||
var i;
|
||||
|
||||
try {
|
||||
localStorage.setItem(storageKey, scheme);
|
||||
for (i = 0; i < blocksyKeys.length; i++) {
|
||||
localStorage.setItem(blocksyKeys[i], scheme);
|
||||
}
|
||||
} catch (e) {}
|
||||
|
||||
setCookie(scheme);
|
||||
}
|
||||
|
||||
function applyScheme(scheme, animate) {
|
||||
var root = document.documentElement;
|
||||
var isDarkMode = scheme === 'dark';
|
||||
var shouldAnimate = animate && enableAnimation;
|
||||
|
||||
if (shouldAnimate) {
|
||||
root.classList.add('blc-ldt-animate');
|
||||
window.setTimeout(function () {
|
||||
root.classList.remove('blc-ldt-animate');
|
||||
}, 300);
|
||||
}
|
||||
|
||||
root.classList.remove('theme-dark', 'theme-light');
|
||||
root.classList.add(isDarkMode ? 'theme-dark' : 'theme-light');
|
||||
root.setAttribute('data-blc-scheme', scheme);
|
||||
root.style.colorScheme = scheme;
|
||||
|
||||
persistScheme(scheme);
|
||||
updateButton(isDarkMode);
|
||||
|
||||
try {
|
||||
document.dispatchEvent(
|
||||
new CustomEvent('ct:color-mode:changed', {
|
||||
bubbles: true,
|
||||
detail: { mode: scheme },
|
||||
})
|
||||
);
|
||||
} catch (e) {}
|
||||
|
||||
if (config.isLoggedIn && config.ajaxUrl && config.nonce) {
|
||||
var body = new FormData();
|
||||
body.append('action', 'blc_ldt_save_scheme');
|
||||
body.append('nonce', config.nonce);
|
||||
body.append('scheme', scheme);
|
||||
fetch(config.ajaxUrl, { method: 'POST', body: body, credentials: 'same-origin' });
|
||||
}
|
||||
}
|
||||
|
||||
function updateButton(dark) {
|
||||
var i18n = config.i18n || {};
|
||||
btn.setAttribute('aria-pressed', dark ? 'true' : 'false');
|
||||
btn.setAttribute(
|
||||
'aria-label',
|
||||
dark ? i18n.light || 'Switch to light mode' : i18n.dark || 'Switch to dark mode'
|
||||
);
|
||||
btn.setAttribute(
|
||||
'title',
|
||||
dark ? i18n.lightLabel || 'Light mode' : i18n.darkLabel || 'Dark mode'
|
||||
);
|
||||
btn.classList.toggle('blc-ldt-toggle--dark', dark);
|
||||
}
|
||||
|
||||
function defaultScheme() {
|
||||
if (respectOs && prefersDark.matches) {
|
||||
return 'dark';
|
||||
}
|
||||
return 'light';
|
||||
}
|
||||
|
||||
btn.addEventListener('click', function () {
|
||||
applyScheme(isDark() ? 'light' : 'dark', true);
|
||||
});
|
||||
|
||||
document.addEventListener('ct:color-mode:changed', function (event) {
|
||||
if (!event.detail || !event.detail.mode) {
|
||||
return;
|
||||
}
|
||||
if (event.detail.mode !== 'light' && event.detail.mode !== 'dark') {
|
||||
return;
|
||||
}
|
||||
updateButton(event.detail.mode === 'dark');
|
||||
});
|
||||
|
||||
if (!getStoredScheme() && !document.documentElement.getAttribute('data-blc-scheme')) {
|
||||
applyScheme(defaultScheme(), false);
|
||||
} else {
|
||||
updateButton(document.documentElement.classList.contains('theme-dark'));
|
||||
}
|
||||
|
||||
if (respectOs) {
|
||||
prefersDark.addEventListener('change', function (event) {
|
||||
if (getStoredScheme()) {
|
||||
return;
|
||||
}
|
||||
applyScheme(event.matches ? 'dark' : 'light', true);
|
||||
});
|
||||
}
|
||||
})();
|
||||
Reference in New Issue
Block a user