42 lines
1.7 KiB
JavaScript
42 lines
1.7 KiB
JavaScript
|
(function (window, document) {
|
|||
|
|
'use strict';
|
|||
|
|
|
|||
|
|
var labels = { light: 'Açık', dark: 'Karanlık', system: 'Sistem' };
|
|||
|
|
var icons = { light: '☀', dark: '☾', system: '◐' };
|
|||
|
|
|
|||
|
|
function updateThemeControls(event) {
|
|||
|
|
var state = event && event.detail ? event.detail : {
|
|||
|
|
preference: window.ThemeManager.getPreference(),
|
|||
|
|
resolved: window.ThemeManager.getResolvedTheme()
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
document.querySelectorAll('[data-theme-value]').forEach(function (button) {
|
|||
|
|
var active = button.dataset.themeValue === state.preference;
|
|||
|
|
button.classList.toggle('active', active);
|
|||
|
|
button.setAttribute('aria-pressed', String(active));
|
|||
|
|
});
|
|||
|
|
document.querySelectorAll('[data-theme-current-label]').forEach(function (node) {
|
|||
|
|
node.textContent = labels[state.preference];
|
|||
|
|
});
|
|||
|
|
document.querySelectorAll('[data-theme-current-icon]').forEach(function (node) {
|
|||
|
|
node.textContent = icons[state.preference];
|
|||
|
|
});
|
|||
|
|
document.querySelectorAll('[data-theme-preference]').forEach(function (node) {
|
|||
|
|
node.textContent = labels[state.preference];
|
|||
|
|
});
|
|||
|
|
document.querySelectorAll('[data-theme-resolved]').forEach(function (node) {
|
|||
|
|
node.textContent = labels[state.resolved];
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
document.addEventListener('click', function (event) {
|
|||
|
|
var button = event.target.closest('[data-theme-value]');
|
|||
|
|
if (button) {
|
|||
|
|
window.ThemeManager.setPreference(button.dataset.themeValue);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
window.addEventListener('trafficpumper:theme-change', updateThemeControls);
|
|||
|
|
updateThemeControls();
|
|||
|
|
}(window, document));
|