script.js aktualisiert

Icon hinzugefügt, Verschiebbarkeit auf Icon reduziert.
This commit is contained in:
simonpipe 2024-12-20 13:19:22 +00:00
parent 8dcfeeb708
commit e498ba8b08

View file

@ -12,9 +12,11 @@ document.addEventListener('DOMContentLoaded', function() {
loadExistingPresets();
// Initialisierung von Sortable für den gesamten Container und das Verschieben mit dem Verschieben-Symbol
new Sortable(presetContainer, {
animation: 250,
ghostClass: 'ghost',
handle: '.move-button', // Nur das Verschieben-Symbol erlaubt das Verschieben
onEnd: () => {
savePresetOrder();
}
@ -49,8 +51,15 @@ document.addEventListener('DOMContentLoaded', function() {
presetItem.innerHTML = `
<h3>${name}</h3>
<div class="button-container">
<button class="edit-button">Bearbeiten</button>
<button class="delete-button">Löschen</button>
<button class="move-button">
<i class="fas fa-arrows-alt"></i> <!-- Verschieben-Symbol -->
</button>
<button class="edit-button">
<i class="fas fa-edit"></i> <!-- Stift-Symbol für Bearbeiten -->
</button>
<button class="delete-button">
<i class="fas fa-trash-alt"></i> <!-- Papierkorb-Symbol für Löschen -->
</button>
</div>
`;
@ -64,9 +73,15 @@ document.addEventListener('DOMContentLoaded', function() {
deletePreset(presetItem);
});
presetItem.querySelector('.move-button').addEventListener('click', (event) => {
event.stopPropagation(); // Verhindert, dass das Verschieben-Symbol das gesamte Preset aktiviert
});
presetItem.addEventListener('click', (event) => {
if (event.target !== presetItem.querySelector('.edit-button') && event.target !== presetItem.querySelector('.delete-button')) {
playStream(url, presetItem); // Übergabe des presetItem
if (event.target !== presetItem.querySelector('.edit-button') &&
event.target !== presetItem.querySelector('.delete-button') &&
event.target !== presetItem.querySelector('.move-button')) {
playStream(url, presetItem);
}
});