Update
This commit is contained in:
@@ -13,7 +13,6 @@ const SPECIAL_CARD_ORDER = {
|
||||
'☕': 3,
|
||||
};
|
||||
|
||||
const themeToggleBtn = document.getElementById('theme-toggle');
|
||||
const roomConfigForm = document.getElementById('room-config-form');
|
||||
const statusLine = document.getElementById('config-status');
|
||||
const scaleSelect = document.getElementById('estimation-scale');
|
||||
@@ -29,14 +28,14 @@ const usernameInput = document.getElementById('username');
|
||||
const savePresetButton = document.getElementById('save-preset');
|
||||
const pickerToggleButton = document.getElementById('preset-picker-toggle');
|
||||
const shareDeckButton = document.getElementById('share-deck');
|
||||
const presetPicker = document.getElementById('preset-picker');
|
||||
const presetModalOverlay = document.getElementById('preset-modal-overlay');
|
||||
const presetModalCloseButton = document.getElementById('preset-modal-close');
|
||||
const presetModalDoneButton = document.getElementById('preset-modal-done');
|
||||
const presetList = document.getElementById('preset-list');
|
||||
const importToggleButton = document.getElementById('import-toggle');
|
||||
const importPane = document.getElementById('import-pane');
|
||||
const importInput = document.getElementById('import-b64');
|
||||
const importApplyButton = document.getElementById('import-apply');
|
||||
|
||||
let isDarkMode = false;
|
||||
let nextCardID = 1;
|
||||
let currentCards = [];
|
||||
let draggingCardID = '';
|
||||
@@ -48,17 +47,6 @@ if (savedUsername && !usernameInput.value) {
|
||||
usernameInput.value = savedUsername;
|
||||
}
|
||||
|
||||
themeToggleBtn.addEventListener('click', () => {
|
||||
isDarkMode = !isDarkMode;
|
||||
if (isDarkMode) {
|
||||
document.documentElement.setAttribute('data-theme', 'dark');
|
||||
themeToggleBtn.textContent = 'Light Mode';
|
||||
return;
|
||||
}
|
||||
|
||||
document.documentElement.removeAttribute('data-theme');
|
||||
themeToggleBtn.textContent = 'Dark Mode';
|
||||
});
|
||||
|
||||
function parseNumericCard(value) {
|
||||
if (!/^-?\d+(\.\d+)?$/.test(value)) {
|
||||
@@ -341,13 +329,13 @@ function renderPresetList() {
|
||||
}
|
||||
|
||||
function showPresetPicker() {
|
||||
presetPicker.classList.remove('hidden');
|
||||
presetModalOverlay.classList.remove('hidden');
|
||||
pickerToggleButton.setAttribute('aria-expanded', 'true');
|
||||
renderPresetList();
|
||||
}
|
||||
|
||||
function hidePresetPicker() {
|
||||
presetPicker.classList.add('hidden');
|
||||
presetModalOverlay.classList.add('hidden');
|
||||
pickerToggleButton.setAttribute('aria-expanded', 'false');
|
||||
}
|
||||
|
||||
@@ -414,7 +402,7 @@ savePresetButton.addEventListener('click', () => {
|
||||
});
|
||||
|
||||
pickerToggleButton.addEventListener('click', () => {
|
||||
if (presetPicker.classList.contains('hidden')) {
|
||||
if (presetModalOverlay.classList.contains('hidden')) {
|
||||
showPresetPicker();
|
||||
return;
|
||||
}
|
||||
@@ -464,20 +452,15 @@ importApplyButton.addEventListener('click', () => {
|
||||
}
|
||||
});
|
||||
|
||||
document.addEventListener('click', (event) => {
|
||||
const target = event.target;
|
||||
if (!(target instanceof Element)) {
|
||||
return;
|
||||
presetModalOverlay.addEventListener('click', (event) => {
|
||||
if (event.target === presetModalOverlay) {
|
||||
hidePresetPicker();
|
||||
}
|
||||
if (presetPicker.classList.contains('hidden')) {
|
||||
return;
|
||||
}
|
||||
if (presetPicker.contains(target) || pickerToggleButton.contains(target)) {
|
||||
return;
|
||||
}
|
||||
hidePresetPicker();
|
||||
});
|
||||
|
||||
presetModalCloseButton.addEventListener('click', hidePresetPicker);
|
||||
presetModalDoneButton.addEventListener('click', hidePresetPicker);
|
||||
|
||||
customCardInput.addEventListener('keydown', (event) => {
|
||||
if (event.key === 'Enter') {
|
||||
event.preventDefault();
|
||||
|
||||
@@ -3,7 +3,6 @@ const USERNAME_KEY = 'scrumPoker.username';
|
||||
const roomID = document.body.dataset.roomId;
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
|
||||
const themeToggleBtn = document.getElementById('theme-toggle');
|
||||
const roomSkeleton = document.getElementById('room-skeleton');
|
||||
const roomGrid = document.getElementById('room-grid');
|
||||
const roomTitle = document.getElementById('room-title');
|
||||
@@ -28,8 +27,6 @@ const joinRoleInput = document.getElementById('join-role');
|
||||
const joinPasswordInput = document.getElementById('join-password');
|
||||
const joinAdminTokenInput = document.getElementById('join-admin-token');
|
||||
const joinError = document.getElementById('join-error');
|
||||
|
||||
let isDarkMode = false;
|
||||
let participantID = params.get('participantId') || '';
|
||||
let adminToken = params.get('adminToken') || '';
|
||||
let eventSource = null;
|
||||
@@ -38,17 +35,6 @@ const savedUsername = localStorage.getItem(USERNAME_KEY) || '';
|
||||
joinUsernameInput.value = savedUsername;
|
||||
joinAdminTokenInput.value = adminToken;
|
||||
|
||||
themeToggleBtn.addEventListener('click', () => {
|
||||
isDarkMode = !isDarkMode;
|
||||
if (isDarkMode) {
|
||||
document.documentElement.setAttribute('data-theme', 'dark');
|
||||
themeToggleBtn.textContent = 'Light Mode';
|
||||
return;
|
||||
}
|
||||
|
||||
document.documentElement.removeAttribute('data-theme');
|
||||
themeToggleBtn.textContent = 'Dark Mode';
|
||||
});
|
||||
|
||||
function setJoinError(message) {
|
||||
if (!message) {
|
||||
|
||||
75
static/js/ui-controls.js
Normal file
75
static/js/ui-controls.js
Normal file
@@ -0,0 +1,75 @@
|
||||
(() => {
|
||||
const THEME_KEY = 'scrumPoker.ui.theme';
|
||||
const MODE_KEY = 'scrumPoker.ui.mode';
|
||||
const DEFAULT_THEME = 'win98';
|
||||
|
||||
function applyTheme(theme) {
|
||||
const normalized = theme || DEFAULT_THEME;
|
||||
document.documentElement.setAttribute('data-ui-theme', normalized);
|
||||
}
|
||||
|
||||
function applyMode(mode) {
|
||||
if (mode === 'dark') {
|
||||
document.documentElement.setAttribute('data-theme', 'dark');
|
||||
return;
|
||||
}
|
||||
document.documentElement.removeAttribute('data-theme');
|
||||
}
|
||||
|
||||
function getCurrentMode() {
|
||||
return document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light';
|
||||
}
|
||||
|
||||
function syncControls() {
|
||||
const theme = document.documentElement.getAttribute('data-ui-theme') || DEFAULT_THEME;
|
||||
const mode = getCurrentMode();
|
||||
|
||||
document.querySelectorAll('[data-role="theme-picker"]').forEach((el) => {
|
||||
el.value = theme;
|
||||
});
|
||||
|
||||
document.querySelectorAll('[data-role="mode-toggle"]').forEach((el) => {
|
||||
el.textContent = mode === 'dark' ? 'Light Mode' : 'Dark Mode';
|
||||
});
|
||||
}
|
||||
|
||||
function initUIControls() {
|
||||
if (window.__uiControlsInitialized) {
|
||||
syncControls();
|
||||
return;
|
||||
}
|
||||
window.__uiControlsInitialized = true;
|
||||
|
||||
const savedTheme = localStorage.getItem(THEME_KEY) || DEFAULT_THEME;
|
||||
const savedMode = localStorage.getItem(MODE_KEY) || 'light';
|
||||
applyTheme(savedTheme);
|
||||
applyMode(savedMode);
|
||||
syncControls();
|
||||
|
||||
document.querySelectorAll('[data-role="theme-picker"]').forEach((picker) => {
|
||||
picker.addEventListener('change', (event) => {
|
||||
const value = event.target.value || DEFAULT_THEME;
|
||||
localStorage.setItem(THEME_KEY, value);
|
||||
applyTheme(value);
|
||||
syncControls();
|
||||
});
|
||||
});
|
||||
|
||||
document.querySelectorAll('[data-role="mode-toggle"]').forEach((button) => {
|
||||
button.addEventListener('click', () => {
|
||||
const next = getCurrentMode() === 'dark' ? 'light' : 'dark';
|
||||
localStorage.setItem(MODE_KEY, next);
|
||||
applyMode(next);
|
||||
syncControls();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
window.initUIControls = initUIControls;
|
||||
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', initUIControls, { once: true });
|
||||
} else {
|
||||
initUIControls();
|
||||
}
|
||||
})();
|
||||
Reference in New Issue
Block a user