mirror of
https://github.com/ellite/Wallos.git
synced 2026-01-06 05:09:46 -06:00
feat: uniformize layout and styles (+ checkboxes and radios) (#423)
This commit is contained in:
Miguel Ribeiro
326
scripts/theme.js
326
scripts/theme.js
@@ -1,143 +1,143 @@
|
||||
function switchTheme() {
|
||||
const darkThemeCss = document.querySelector("#dark-theme");
|
||||
darkThemeCss.disabled = !darkThemeCss.disabled;
|
||||
const darkThemeCss = document.querySelector("#dark-theme");
|
||||
darkThemeCss.disabled = !darkThemeCss.disabled;
|
||||
|
||||
const themeChoice = darkThemeCss.disabled ? 'light' : 'dark';
|
||||
document.cookie = `theme=${themeChoice}; expires=Fri, 31 Dec 9999 23:59:59 GMT`;
|
||||
const themeChoice = darkThemeCss.disabled ? 'light' : 'dark';
|
||||
document.cookie = `theme=${themeChoice}; expires=Fri, 31 Dec 9999 23:59:59 GMT`;
|
||||
|
||||
document.body.className = themeChoice;
|
||||
document.body.className = themeChoice;
|
||||
|
||||
const button = document.getElementById("switchTheme");
|
||||
button.disabled = true;
|
||||
const button = document.getElementById("switchTheme");
|
||||
button.disabled = true;
|
||||
|
||||
fetch('endpoints/settings/theme.php', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({ theme: themeChoice === 'dark' })
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.success) {
|
||||
showSuccessMessage(data.message);
|
||||
} else {
|
||||
showErrorMessage(data.errorMessage);
|
||||
}
|
||||
button.disabled = false;
|
||||
}).catch(error => {
|
||||
button.disabled = false;
|
||||
});
|
||||
fetch('endpoints/settings/theme.php', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({ theme: themeChoice === 'dark' })
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.success) {
|
||||
showSuccessMessage(data.message);
|
||||
} else {
|
||||
showErrorMessage(data.errorMessage);
|
||||
}
|
||||
button.disabled = false;
|
||||
}).catch(error => {
|
||||
button.disabled = false;
|
||||
});
|
||||
}
|
||||
|
||||
function setDarkTheme(theme) {
|
||||
const darkThemeButton = document.querySelector("#theme-dark");
|
||||
const lightThemeButton = document.querySelector("#theme-light");
|
||||
const automaticThemeButton = document.querySelector("#theme-automatic");
|
||||
const darkThemeCss = document.querySelector("#dark-theme");
|
||||
const themes = { 0: 'light', 1: 'dark', 2: 'automatic' };
|
||||
const themeValue = themes[theme];
|
||||
const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||||
const darkThemeButton = document.querySelector("#theme-dark");
|
||||
const lightThemeButton = document.querySelector("#theme-light");
|
||||
const automaticThemeButton = document.querySelector("#theme-automatic");
|
||||
const darkThemeCss = document.querySelector("#dark-theme");
|
||||
const themes = { 0: 'light', 1: 'dark', 2: 'automatic' };
|
||||
const themeValue = themes[theme];
|
||||
const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||||
|
||||
darkThemeButton.disabled = true;
|
||||
lightThemeButton.disabled = true;
|
||||
automaticThemeButton.disabled = true;
|
||||
darkThemeButton.disabled = true;
|
||||
lightThemeButton.disabled = true;
|
||||
automaticThemeButton.disabled = true;
|
||||
|
||||
fetch('endpoints/settings/theme.php', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({ theme: theme })
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.success) {
|
||||
darkThemeButton.disabled = false;
|
||||
lightThemeButton.disabled = false;
|
||||
automaticThemeButton.disabled = false;
|
||||
darkThemeButton.classList.remove('selected');
|
||||
lightThemeButton.classList.remove('selected');
|
||||
automaticThemeButton.classList.remove('selected');
|
||||
fetch('endpoints/settings/theme.php', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({ theme: theme })
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.success) {
|
||||
darkThemeButton.disabled = false;
|
||||
lightThemeButton.disabled = false;
|
||||
automaticThemeButton.disabled = false;
|
||||
darkThemeButton.classList.remove('selected');
|
||||
lightThemeButton.classList.remove('selected');
|
||||
automaticThemeButton.classList.remove('selected');
|
||||
|
||||
document.cookie = `theme=${themeValue}; expires=Fri, 31 Dec 9999 23:59:59 GMT`;
|
||||
document.cookie = `theme=${themeValue}; expires=Fri, 31 Dec 9999 23:59:59 GMT`;
|
||||
|
||||
if (theme == 0) {
|
||||
darkThemeCss.disabled = true;
|
||||
document.body.className = 'light';
|
||||
lightThemeButton.classList.add('selected');
|
||||
}
|
||||
if (theme == 0) {
|
||||
darkThemeCss.disabled = true;
|
||||
document.body.className = 'light';
|
||||
lightThemeButton.classList.add('selected');
|
||||
}
|
||||
|
||||
if (theme == 1) {
|
||||
darkThemeCss.disabled = false;
|
||||
document.body.className = 'dark';
|
||||
darkThemeButton.classList.add('selected');
|
||||
}
|
||||
if (theme == 1) {
|
||||
darkThemeCss.disabled = false;
|
||||
document.body.className = 'dark';
|
||||
darkThemeButton.classList.add('selected');
|
||||
}
|
||||
|
||||
if (theme == 2) {
|
||||
darkThemeCss.disabled = !prefersDarkMode;
|
||||
document.body.className = prefersDarkMode ? 'dark' : 'light';
|
||||
automaticThemeButton.classList.add('selected');
|
||||
document.cookie = `inUseTheme=${prefersDarkMode ? 'dark' : 'light'}; expires=Fri, 31 Dec 9999 23:59:59 GMT`;
|
||||
}
|
||||
if (theme == 2) {
|
||||
darkThemeCss.disabled = !prefersDarkMode;
|
||||
document.body.className = prefersDarkMode ? 'dark' : 'light';
|
||||
automaticThemeButton.classList.add('selected');
|
||||
document.cookie = `inUseTheme=${prefersDarkMode ? 'dark' : 'light'}; expires=Fri, 31 Dec 9999 23:59:59 GMT`;
|
||||
}
|
||||
|
||||
showSuccessMessage(data.message);
|
||||
} else {
|
||||
showErrorMessage(data.errorMessage);
|
||||
darkThemeButton.disabled = false;
|
||||
lightThemeButton.disabled = false;
|
||||
automaticThemeButton.disabled = false;
|
||||
}
|
||||
}).catch(error => {
|
||||
darkThemeButton.disabled = false;
|
||||
lightThemeButton.disabled = false;
|
||||
automaticThemeButton.disabled = false;
|
||||
});
|
||||
showSuccessMessage(data.message);
|
||||
} else {
|
||||
showErrorMessage(data.errorMessage);
|
||||
darkThemeButton.disabled = false;
|
||||
lightThemeButton.disabled = false;
|
||||
automaticThemeButton.disabled = false;
|
||||
}
|
||||
}).catch(error => {
|
||||
darkThemeButton.disabled = false;
|
||||
lightThemeButton.disabled = false;
|
||||
automaticThemeButton.disabled = false;
|
||||
});
|
||||
}
|
||||
|
||||
function setTheme(themeColor) {
|
||||
var currentTheme = 'blue';
|
||||
var themeIds = ['red-theme', 'green-theme', 'yellow-theme', 'purple-theme'];
|
||||
|
||||
themeIds.forEach(function(id) {
|
||||
var themeStylesheet = document.getElementById(id);
|
||||
if (themeStylesheet && !themeStylesheet.disabled) {
|
||||
currentTheme = id.replace('-theme', '');
|
||||
themeStylesheet.disabled = true;
|
||||
}
|
||||
});
|
||||
|
||||
if (themeColor !== "blue") {
|
||||
var enableTheme = document.getElementById(themeColor + '-theme');
|
||||
enableTheme.disabled = false;
|
||||
var currentTheme = 'blue';
|
||||
var themeIds = ['red-theme', 'green-theme', 'yellow-theme', 'purple-theme'];
|
||||
|
||||
themeIds.forEach(function (id) {
|
||||
var themeStylesheet = document.getElementById(id);
|
||||
if (themeStylesheet && !themeStylesheet.disabled) {
|
||||
currentTheme = id.replace('-theme', '');
|
||||
themeStylesheet.disabled = true;
|
||||
}
|
||||
|
||||
var images = document.querySelectorAll('img');
|
||||
images.forEach(function(img) {
|
||||
if (img.src.includes('siteicons/' + currentTheme)) {
|
||||
img.src = img.src.replace(currentTheme, themeColor);
|
||||
}
|
||||
});
|
||||
|
||||
var labels = document.querySelectorAll('.theme-preview');
|
||||
labels.forEach(function(label) {
|
||||
label.classList.remove('is-selected');
|
||||
});
|
||||
|
||||
var targetLabel = document.querySelector(`.theme-preview.${themeColor}`);
|
||||
if (targetLabel) {
|
||||
targetLabel.classList.add('is-selected');
|
||||
});
|
||||
|
||||
if (themeColor !== "blue") {
|
||||
var enableTheme = document.getElementById(themeColor + '-theme');
|
||||
enableTheme.disabled = false;
|
||||
}
|
||||
|
||||
var images = document.querySelectorAll('img');
|
||||
images.forEach(function (img) {
|
||||
if (img.src.includes('siteicons/' + currentTheme)) {
|
||||
img.src = img.src.replace(currentTheme, themeColor);
|
||||
}
|
||||
|
||||
document.cookie = `colorTheme=${themeColor}; expires=Fri, 31 Dec 9999 23:59:59 GMT`;
|
||||
|
||||
fetch('endpoints/settings/colortheme.php', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({ color: themeColor })
|
||||
})
|
||||
});
|
||||
|
||||
var labels = document.querySelectorAll('.theme-preview');
|
||||
labels.forEach(function (label) {
|
||||
label.classList.remove('is-selected');
|
||||
});
|
||||
|
||||
var targetLabel = document.querySelector(`.theme-preview.${themeColor}`);
|
||||
if (targetLabel) {
|
||||
targetLabel.classList.add('is-selected');
|
||||
}
|
||||
|
||||
document.cookie = `colorTheme=${themeColor}; expires=Fri, 31 Dec 9999 23:59:59 GMT`;
|
||||
|
||||
fetch('endpoints/settings/colortheme.php', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({ color: themeColor })
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.success) {
|
||||
@@ -149,16 +149,16 @@ function setTheme(themeColor) {
|
||||
.catch(error => {
|
||||
showErrorMessage(translate('unknown_error'));
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
function resetCustomColors() {
|
||||
const button = document.getElementById("reset-colors");
|
||||
button.disabled = true;
|
||||
|
||||
fetch('endpoints/settings/resettheme.php', {
|
||||
method: 'DELETE',
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
function resetCustomColors() {
|
||||
const button = document.getElementById("reset-colors");
|
||||
button.disabled = true;
|
||||
|
||||
fetch('endpoints/settings/resettheme.php', {
|
||||
method: 'DELETE',
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.success) {
|
||||
@@ -182,23 +182,23 @@ function setTheme(themeColor) {
|
||||
showErrorMessage(translate('unknown_error'));
|
||||
button.disabled = false;
|
||||
});
|
||||
}
|
||||
|
||||
function saveCustomColors() {
|
||||
const button = document.getElementById("save-colors");
|
||||
button.disabled = true;
|
||||
|
||||
const mainColor = document.getElementById("mainColor").value;
|
||||
const accentColor = document.getElementById("accentColor").value;
|
||||
const hoverColor = document.getElementById("hoverColor").value;
|
||||
|
||||
fetch('endpoints/settings/customtheme.php', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({ mainColor: mainColor, accentColor: accentColor, hoverColor: hoverColor })
|
||||
})
|
||||
}
|
||||
|
||||
function saveCustomColors() {
|
||||
const button = document.getElementById("save-colors");
|
||||
button.disabled = true;
|
||||
|
||||
const mainColor = document.getElementById("mainColor").value;
|
||||
const accentColor = document.getElementById("accentColor").value;
|
||||
const hoverColor = document.getElementById("hoverColor").value;
|
||||
|
||||
fetch('endpoints/settings/customtheme.php', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({ mainColor: mainColor, accentColor: accentColor, hoverColor: hoverColor })
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.success) {
|
||||
@@ -215,22 +215,22 @@ function setTheme(themeColor) {
|
||||
showErrorMessage(translate('unknown_error'));
|
||||
button.disabled = false;
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
function saveCustomCss() {
|
||||
const button = document.getElementById("save-css");
|
||||
button.disabled = true;
|
||||
|
||||
const customCss = document.getElementById("customCss").value;
|
||||
|
||||
fetch('endpoints/settings/customcss.php', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({ customCss: customCss })
|
||||
})
|
||||
}
|
||||
|
||||
function saveCustomCss() {
|
||||
const button = document.getElementById("save-css");
|
||||
button.disabled = true;
|
||||
|
||||
const customCss = document.getElementById("customCss").value;
|
||||
|
||||
fetch('endpoints/settings/customcss.php', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({ customCss: customCss })
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.success) {
|
||||
@@ -244,4 +244,4 @@ function setTheme(themeColor) {
|
||||
showErrorMessage(translate('unknown_error'));
|
||||
button.disabled = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user