feat: toggle submit button based on unsaved changes

Signed-off-by: ernolf <raphael.gradenwitz@googlemail.com>
This commit is contained in:
ernolf 2024-11-11 22:28:57 +01:00
parent 816921e2e2
commit 41c29b90a2
No known key found for this signature in database
GPG key ID: 0B145139A170715C
2 changed files with 180 additions and 107 deletions

View file

@ -1,73 +1,60 @@
function makeOptionsFormSubmitVisible() {
let optionsFormSubmit = document.getElementById("options-form-submit");
optionsFormSubmit.style.display = 'block';
}
function handleTalkVisibility() {
let talk = document.getElementById("talk");
let talkRecording = document.getElementById("talk-recording")
if (talk.checked) {
talkRecording.disabled = false
} else {
talkRecording.checked = false
talkRecording.disabled = true
}
}
function handleDockerSocketProxyWarning() {
let dockerSocketProxy = document.getElementById("docker-socket-proxy");
if (dockerSocketProxy.checked) {
alert('⚠️ Warning! Enabling this container comes with possible Security problems since you are exposing the docker socket and all its privileges to the Nextcloud container. Enable this only if you are sure what you are doing!')
}
}
document.addEventListener("DOMContentLoaded", function(event) {
// handle submit button for options form
let optionsFormSubmit = document.getElementById("options-form-submit");
document.addEventListener("DOMContentLoaded", function () {
// Hide submit button initially
const optionsFormSubmit = document.getElementById("options-form-submit");
optionsFormSubmit.style.display = 'none';
// Clamav
let clamav = document.getElementById("clamav");
clamav.addEventListener('change', makeOptionsFormSubmitVisible);
// Store initial states for all checkboxes
const initialState = {};
const checkboxes = document.querySelectorAll("#options-form input[type='checkbox']");
// OnlyOffice
let onlyoffice = document.getElementById("onlyoffice");
if (onlyoffice) {
onlyoffice.addEventListener('change', makeOptionsFormSubmitVisible);
checkboxes.forEach(checkbox => {
initialState[checkbox.id] = checkbox.checked; // Use checked property to capture actual initial state
});
// Function to compare current states to initial states
function checkForChanges() {
let hasChanges = false;
checkboxes.forEach(checkbox => {
if (checkbox.checked !== initialState[checkbox.id]) {
hasChanges = true;
}
});
// Show or hide submit button based on changes
optionsFormSubmit.style.display = hasChanges ? 'block' : 'none';
}
// Collabora
let collabora = document.getElementById("collabora");
collabora.addEventListener('change', makeOptionsFormSubmitVisible);
// Event listener to trigger visibility check on each change
checkboxes.forEach(checkbox => {
checkbox.addEventListener("change", checkForChanges);
});
// Talk
let talk = document.getElementById("talk");
talk.addEventListener('change', makeOptionsFormSubmitVisible);
talk.addEventListener('change', handleTalkVisibility);
// Talk-recording
let talkRecording = document.getElementById("talk-recording");
talkRecording.addEventListener('change', makeOptionsFormSubmitVisible);
if (!talk.checked) {
talkRecording.disabled = true
// Custom behaviors for specific options
function handleTalkVisibility() {
const talkRecording = document.getElementById("talk-recording");
if (document.getElementById("talk").checked) {
talkRecording.disabled = false;
} else {
talkRecording.checked = false;
talkRecording.disabled = true;
}
checkForChanges(); // Check changes after toggling Talk Recording
}
// Imaginary
let imaginary = document.getElementById("imaginary");
imaginary.addEventListener('change', makeOptionsFormSubmitVisible);
// Fulltextsearch
let fulltextsearch = document.getElementById("fulltextsearch");
fulltextsearch.addEventListener('change', makeOptionsFormSubmitVisible);
// Docker socket proxy
let dockerSocketProxy = document.getElementById("docker-socket-proxy");
if (dockerSocketProxy) {
dockerSocketProxy.addEventListener('change', makeOptionsFormSubmitVisible);
// dockerSocketProxy.addEventListener('change', handleDockerSocketProxyWarning);
function handleDockerSocketProxyWarning() {
if (document.getElementById("docker-socket-proxy").checked) {
alert('⚠️ Warning! Enabling this container comes with possible Security problems since you are exposing the docker socket and all its privileges to the Nextcloud container. Enable this only if you are sure what you are doing!');
}
}
// Whiteboard
let whiteboard = document.getElementById("whiteboard");
whiteboard.addEventListener('change', makeOptionsFormSubmitVisible);
// Initialize event listeners for specific behaviors
document.getElementById("talk").addEventListener('change', handleTalkVisibility);
document.getElementById("docker-socket-proxy").addEventListener('change', handleDockerSocketProxyWarning);
// Initialize talk-recording visibility on page load
handleTalkVisibility(); // Ensure talk-recording is correctly initialized
// Initial call to check for changes
checkForChanges();
});