diff --git a/script.js b/script.js
index 8057bd6..4fadd18 100644
--- a/script.js
+++ b/script.js
@@ -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 = `
${name}
-
-
+
+
+
`;
@@ -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);
}
});
@@ -107,7 +122,7 @@ document.addEventListener('DOMContentLoaded', function() {
}
function playStream(url, item) {
- // Stoppe den aktuell laufenden Stream (falls vorhanden)
+ // Stoppe den aktuell laufenden Stream (falls vorhanden)
if (currentPlayingItem) {
const currentAudio = currentPlayingItem.querySelector('audio');
if (currentAudio) {
@@ -126,9 +141,9 @@ document.addEventListener('DOMContentLoaded', function() {
};
item.appendChild(audioElement); // Füge das Audio-Element zum Preset-Item hinzu
item.classList.add('playing');
-
+
currentPlayingItem = item; // Aktualisiere das aktuell spielende Element
- currentStationName.textContent = item.querySelector('h3').textContent;
+ currentStationName.textContent = item.querySelector('h3').textContent;
}
function exportPresets() {
@@ -145,7 +160,7 @@ document.addEventListener('DOMContentLoaded', function() {
URL.revokeObjectURL(url);
}
-
+
function importPresets() {
const input = document.createElement('input');
input.type = 'file';
@@ -174,21 +189,21 @@ document.addEventListener('DOMContentLoaded', function() {
};
input.click();
}
-
- const stopButton = document.querySelector('.stop-button');
+
+ const stopButton = document.querySelector('.stop-button');
const progressBar = document.getElementById('progress-bar');
const currentStationName = document.getElementById('current-station-name');
- stopButton.addEventListener('click', () => {
- // Stoppe den aktuellen Stream und setze currentPlayingItem zurück
- if (currentPlayingItem) {
- const audioElement = currentPlayingItem.querySelector('audio');
- audioElement.pause();
- audioElement.currentTime = 0;
- currentPlayingItem.classList.remove('playing');
- currentPlayingItem = null;
- currentStationName.textContent = 'Kein Sender ausgewählt.';
- }
- });
+ stopButton.addEventListener('click', () => {
+ // Stoppe den aktuellen Stream und setze currentPlayingItem zurück
+ if (currentPlayingItem) {
+ const audioElement = currentPlayingItem.querySelector('audio');
+ audioElement.pause();
+ audioElement.currentTime = 0;
+ currentPlayingItem.classList.remove('playing');
+ currentPlayingItem = null;
+ currentStationName.textContent = 'Kein Sender ausgewählt.';
+ }
+ });
-});
\ No newline at end of file
+});