From e9c2c640c42b4c41f2df0320c6f9c0e6d15ddcca Mon Sep 17 00:00:00 2001
From: M_Viper <admin@m-viper.de>
Date: Wed, 7 Jan 2026 21:36:29 +0000
Subject: [PATCH] Dateien nach "mc-multiserver-gallery/assets/js" hochladen

---
 .../assets/js/gallery-pro.js                  | 620 ++++++++++++++++++
 1 file changed, 620 insertions(+)
 create mode 100644 mc-multiserver-gallery/assets/js/gallery-pro.js

diff --git a/mc-multiserver-gallery/assets/js/gallery-pro.js b/mc-multiserver-gallery/assets/js/gallery-pro.js
new file mode 100644
index 0000000..ae1624d
--- /dev/null
+++ b/mc-multiserver-gallery/assets/js/gallery-pro.js
@@ -0,0 +1,620 @@
+(function ($) {
+    'use strict';
+
+    if (typeof mcGalleryPro === 'undefined') {
+        console.error('MC Gallery Pro: Configuration not found.');
+        return;
+    }
+
+    const api = mcGalleryPro.restBase.replace(/\/?$/, '');
+    const ajaxUrl = mcGalleryPro.uploadUrl;
+    const maxUploads = mcGalleryPro.maxUploads || 5;
+    
+    let originalBodyPadding = '';
+    let scrollbarWidth = 0;
+
+    let sessionData = {
+        token: null,
+        username: null,
+        serverId: null,
+        verified: false
+    };
+    
+    let selectedFiles = [];
+    
+    function getScrollbarWidth() {
+        if (scrollbarWidth > 0) return scrollbarWidth;
+        const outer = document.createElement('div');
+        outer.style.visibility = 'hidden';
+        outer.style.width = '100px';
+        outer.style.msOverflowStyle = 'scrollbar'; 
+        document.body.appendChild(outer);
+
+        const widthNoScroll = outer.offsetWidth;
+        outer.style.overflow = 'scroll';
+
+        const inner = document.createElement('div');
+        inner.style.width = '100%';
+        outer.appendChild(inner);
+
+        const widthWithScroll = inner.offsetWidth;
+        outer.parentNode.removeChild(outer);
+
+        scrollbarWidth = widthNoScroll - widthWithScroll;
+        return scrollbarWidth;
+    }
+
+    function showFeedback(msg, type = 'info') {
+        const $fb = $('#mc-feedback-msg');
+        $fb.removeClass('mc-msg-success mc-msg-error');
+        
+        if (type === 'success') {
+            $fb.addClass('mc-msg-success');
+        } else if (type === 'error') {
+            $fb.addClass('mc-msg-error');
+        }
+        
+        $fb.html(msg).fadeIn(300);
+    }
+
+    function switchStep(stepNum) {
+        $('.mc-step').removeClass('active');
+        $(`.mc-step[data-step="${stepNum}"]`).addClass('active');
+    }
+
+    function resetModal() {
+        $('#mc-upload-username').val('');
+        $('#mc-token-text').text('Waiting...');
+        $('#mc-upload-file').val('');
+        $('#mc-file-name').text('Keine Bilder gewählt').css('color', '');
+        $('.mc-file-drop').css('border-color', '').css('background', '');
+        $('#mc-feedback-msg').hide().empty();
+        $('#mc-file-preview').empty();
+        $('#mc-upload-progress').hide();
+        $('#mc-btn-upload-more').hide();
+        $('#mc-btn-final-upload').show();
+        selectedFiles = [];
+        sessionData = {
+            token: null,
+            username: null,
+            serverId: null,
+            verified: false
+        };
+        switchStep(1);
+    }
+
+    function loadServers() {
+        const $select = $('#mc-upload-server');
+        if (!$select.length) return;
+
+        $select.html('<option>Lade Server...</option>').prop('disabled', true);
+
+        fetch(api + '/servers')
+            .then(response => {
+                if (!response.ok) throw new Error('Server response not OK');
+                return response.json();
+            })
+            .then(data => {
+                if (data.success && Array.isArray(data.data) && data.data.length > 0) {
+                    $select.empty().prop('disabled', false);
+                    data.data.forEach(server => {
+                        const displayText = server.host 
+                            ? `${server.title} (${server.host})` 
+                            : server.title;
+                        $select.append($('<option>')
+                            .val(server.id)
+                            .text(displayText)
+                        );
+                    });
+                } else {
+                    $select.html('<option>Keine aktiven Server</option>');
+                }
+            })
+            .catch(error => {
+                console.error('Failed to load servers:', error);
+                $select.html('<option>Fehler beim Laden</option>');
+            });
+    }
+    
+    function loadAlbums() {
+        const $select = $('#mc-upload-album');
+        $select.html('<option value="">Kein Album</option>').prop('disabled', true);
+        
+        if (!sessionData.token || !sessionData.verified) return;
+        
+        fetch(api + '/albums', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                token: sessionData.token,
+                username: sessionData.username,
+                server_id: sessionData.serverId
+            })
+        })
+        .then(response => response.json())
+        .then(data => {
+            if (data.success && data.data.albums) {
+                $select.prop('disabled', false);
+                data.data.albums.forEach(album => {
+                    $select.append($('<option>')
+                        .val(album.id)
+                        .text(album.title)
+                    );
+                });
+            }
+        })
+        .catch(error => {
+            console.error('Failed to load albums:', error);
+        });
+    }
+    
+    // FIX 1: View Counter Zähler erhöhen
+    function incrementViewCount(attachId, $badgeElement) {
+        $.post(ajaxUrl, {
+            action: 'mc_gallery_increment_view',
+            attach_id: attachId,
+            nonce: mcGalleryPro.nonce
+        }, function(response) {
+            if (response.success && response.data && typeof response.data.views !== 'undefined') {
+                // Badge sofort aktualisieren (Animation optional)
+                $badgeElement.find('.mc-views-count').text(response.data.views);
+            }
+        }).fail(function() {
+            console.error('Failed to increment view count');
+        });
+    }
+    
+    function renderFilePreview() {
+        const $preview = $('#mc-file-preview');
+        $preview.empty();
+        
+        if (selectedFiles.length === 0) return;
+        
+        selectedFiles.forEach((file, index) => {
+            const reader = new FileReader();
+            reader.onload = function(e) {
+                const $item = $(`
+                    <div class="mc-preview-item" data-index="${index}">
+                        <img src="${e.target.result}" alt="${file.name}">
+                        <button class="mc-preview-remove" data-index="${index}" title="Entfernen">×</button>
+                        <span class="mc-preview-name">${file.name}</span>
+                    </div>
+                `);
+                $preview.append($item);
+            };
+            reader.readAsDataURL(file);
+        });
+        
+        updateFileCount();
+    }
+    
+    function updateFileCount() {
+        const count = selectedFiles.length;
+        
+        $('#mc-file-name').css('color', '').removeClass('mc-msg-error-text');
+        $('#mc-btn-final-upload').prop('disabled', false).removeClass('mc-btn-disabled');
+        $('.mc-file-drop').css({
+            'border-color': '',
+            'background': ''
+        });
+
+        if (count === 0) {
+            $('#mc-file-name').text('Keine Bilder gewählt');
+        } else if (count > maxUploads) {
+            $('#mc-file-name')
+                .html(`<strong>${count} / ${maxUploads} Bilder</strong> (Zu viele!)`)
+                .css('color', 'var(--mc-error)')
+                .addClass('mc-msg-error-text');
+            $('#mc-btn-final-upload')
+                .prop('disabled', true)
+                .addClass('mc-btn-disabled');
+            $('.mc-file-drop').css({
+                'border-color': 'var(--mc-error)',
+                'background': 'rgba(239, 68, 68, 0.05)'
+            });
+        } else {
+            $('#mc-file-name')
+                .html(`<strong>${count} Bild${count > 1 ? 'er' : ''}</strong> ausgewählt`)
+                .css('color', 'var(--mc-text-main)');
+            $('.mc-file-drop').css({
+                'border-color': 'var(--mc-primary)',
+                'background': 'rgba(16, 185, 129, 0.05)'
+            });
+        }
+        
+        $('#mc-upload-btn-text').text(count > 0 ? `${count} Bild${count > 1 ? 'er' : ''} hochladen` : 'Bilder hochladen');
+    }
+
+    function openModal() {
+        $('#mc-upload-modal').addClass('open').attr('aria-hidden', 'false');
+        originalBodyPadding = $('body').css('padding-right');
+        const width = getScrollbarWidth();
+        
+        $('html').css('overflow', 'hidden');
+        $('body').css('padding-right', (parseInt(originalBodyPadding) || 0) + width + 'px');
+        
+        resetModal();
+        loadServers();
+    }
+
+    function closeModal() {
+        $('#mc-upload-modal').removeClass('open').attr('aria-hidden', 'true');
+        $('html').css('overflow', '');
+        $('body').css('padding-right', originalBodyPadding);
+        
+        setTimeout(resetModal, 300);
+    }
+
+    $(document).ready(function () {
+        
+        loadServers();
+
+        $('#mc-open-upload-modal').on('click', function(e) {
+            e.preventDefault();
+            openModal();
+        });
+
+        $('.mc-modal-close, .mc-modal-backdrop').on('click', function() {
+            closeModal();
+        });
+
+        $(document).on('keydown', function(e) {
+            if (e.key === 'Escape' && $('#mc-upload-modal').hasClass('open')) {
+                closeModal();
+            }
+        });
+
+        $('#mc-btn-generate').on('click', function () {
+            const username = $('#mc-upload-username').val().trim();
+            const serverId = $('#mc-upload-server').val();
+
+            if (!username) {
+                showFeedback('Bitte gib deinen Minecraft-Namen ein.', 'error');
+                $('#mc-upload-username').focus();
+                return;
+            }
+
+            if (!serverId || serverId === '') {
+                showFeedback('Bitte wähle einen Server aus.', 'error');
+                return;
+            }
+
+            const $btn = $(this);
+            const originalText = $btn.text();
+            $btn.prop('disabled', true).html('<span class="mc-loading"></span> Starte Session...');
+
+            fetch(api + '/request-token', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    username: username,
+                    server_id: parseInt(serverId, 10)
+                })
+            })
+            .then(response => response.json())
+            .then(data => {
+                $btn.prop('disabled', false).text(originalText);
+                
+                if (data.success && data.data && data.data.token) {
+                    sessionData.token = data.data.token;
+                    sessionData.username = username;
+                    sessionData.serverId = parseInt(serverId, 10);
+                    
+                    $('#mc-token-text').text(data.data.token);
+                    $('#mc_form_token').val(data.data.token);
+                    $('#mc_form_username').val(username);
+                    $('#mc_form_server').val(serverId);
+                    
+                    showFeedback('✓ Session-Token erstellt! Gültig für 1 Stunde.', 'success');
+                    setTimeout(() => switchStep(2), 600);
+                } else {
+                    showFeedback(data.message || 'Fehler beim Token-Erstellen', 'error');
+                }
+            })
+            .catch(error => {
+                console.error('Token generation error:', error);
+                $btn.prop('disabled', false).text(originalText);
+                showFeedback('Netzwerkfehler beim Token-Erstellen', 'error');
+            });
+        });
+
+        $('.mc-copy-btn').on('click', function() {
+            const text = $('#mc-token-text').text();
+            const $btn = $(this);
+            
+            if (text === 'Waiting...' || !text) {
+                showFeedback('Kein Token zum Kopieren verfügbar', 'error');
+                return;
+            }
+
+            navigator.clipboard.writeText(text)
+                .then(() => {
+                    const original = $btn.text();
+                    $btn.text('✓');
+                    setTimeout(() => $btn.text(original), 2000);
+                })
+                .catch(() => {
+                    showFeedback('Kopieren fehlgeschlagen', 'error');
+                });
+        });
+
+        $('#mc-btn-check').on('click', function () {
+            const token = $('#mc_form_token').val();
+
+            if (!token) {
+                showFeedback('Kein Token vorhanden', 'error');
+                return;
+            }
+
+            const $btn = $(this);
+            const originalText = $btn.text();
+            $btn.prop('disabled', true).html('<span class="mc-loading"></span> Prüfe...');
+
+            fetch(api + '/check-token', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ token: token })
+            })
+            .then(response => response.json().then(data => {
+                if (!response.ok) throw new Error(data.message || 'Verifizierung fehlgeschlagen.');
+                return data;
+            }))
+            .then(data => {
+                $btn.prop('disabled', false).text(originalText);
+
+                if (data.success && data.data && data.data.claimed) {
+                    sessionData.verified = true;
+                    $('#mc-session-user').text(data.data.claimed_by);
+                    showFeedback(`✓ Erfolgreich verifiziert als <strong>${data.data.claimed_by}</strong>!`, 'success');
+                    setTimeout(() => {
+                        switchStep(3);
+                        loadAlbums();
+                    }, 800);
+                } else {
+                    sessionData.verified = false;
+                    showFeedback('⚠ Noch nicht verifiziert. Gib <strong>/verify [Token]</strong> im Spiel ein.', 'error');
+                }
+            })
+            .catch(error => {
+                console.error('Check token error:', error);
+                $btn.prop('disabled', false).text(originalText);
+                sessionData.verified = false;
+                showFeedback(`❌ ${error.message}`, 'error');
+            });
+        });
+
+        $('#mc-upload-file').on('change', function() {
+            let files = Array.from(this.files);
+            
+            // FIX: NUR BILDER ZULASSEN (Client Side Filter)
+            files = files.filter(function(f) {
+                return f.type.startsWith('image/');
+            });
+
+            if (files.length > 0) {
+                // Wenn Dateien gefiltert wurden (User hat PDF ausgewählt), aktualisiere Input
+                if (files.length !== this.files.length) {
+                     const dataTransfer = new DataTransfer();
+                     files.forEach(file => dataTransfer.items.add(file));
+                     this.files = dataTransfer.files;
+                     showFeedback('❌ Nur Bilder sind erlaubt! PDFs/Zip wurden entfernt.', 'error');
+                }
+                selectedFiles = files;
+                renderFilePreview();
+            }
+        });
+        
+        $(document).on('click', '.mc-preview-remove', function() {
+            const index = $(this).data('index');
+            selectedFiles.splice(index, 1);
+            renderFilePreview();
+            
+            const dataTransfer = new DataTransfer();
+            selectedFiles.forEach(file => dataTransfer.items.add(file));
+            $('#mc-upload-file')[0].files = dataTransfer.files;
+        });
+        
+        $('#mc-btn-new-album').on('click', function() {
+            $('#mc-new-album-form').slideToggle();
+        });
+        
+        $('#mc-btn-create-album').on('click', function() {
+            const albumName = $('#mc-new-album-name').val().trim();
+            
+            if (!albumName) {
+                showFeedback('Bitte gib einen Album-Namen ein', 'error');
+                return;
+            }
+            
+            const $btn = $(this);
+            $btn.prop('disabled', true).html('<span class="mc-loading"></span> Erstelle...');
+            
+            const formData = new FormData();
+            formData.append('action', 'mc_gallery_create_album');
+            formData.append('mc_upload_nonce', mcGalleryPro.nonce);
+            formData.append('mc_token', sessionData.token);
+            formData.append('mc_username', sessionData.username);
+            formData.append('mc_server_id', sessionData.serverId);
+            formData.append('album_name', albumName);
+            
+            fetch(ajaxUrl, {
+                method: 'POST',
+                body: formData,
+                credentials: 'same-origin'
+            })
+            .then(response => response.json())
+            .then(data => {
+                if (data.success) {
+                    const $select = $('#mc-upload-album');
+                    $select.append($('<option>')
+                        .val(data.data.album.id)
+                        .text(data.data.album.title)
+                    );
+                    $select.val(data.data.album.id);
+                    $('#mc-new-album-name').val('');
+                    $('#mc-new-album-form').slideUp();
+                    showFeedback('✓ Album erfolgreich erstellt!', 'success');
+                } else {
+                    showFeedback('Fehler: ' + (data.data?.message || 'Unbekannt'), 'error');
+                }
+                $btn.prop('disabled', false).text('Album erstellen');
+            })
+            .catch(error => {
+                console.error('Create album error:', error);
+                $btn.prop('disabled', false).text('Album erstellen');
+                showFeedback('Netzwerkfehler', 'error');
+            });
+        });
+
+        $('#mc-btn-final-upload').on('click', function () {
+            if (selectedFiles.length === 0) {
+                showFeedback('Bitte wähle mindestens ein Bild aus', 'error');
+                return;
+            }
+
+            if (selectedFiles.length > maxUploads) {
+                showFeedback('Du kannst nur ' + maxUploads + ' Bilder gleichzeitig hochladen.', 'error');
+                return;
+            }
+
+            const formData = new FormData();
+            formData.append('action', 'mc_gallery_upload');
+            formData.append('mc_upload_nonce', mcGalleryPro.nonce);
+            formData.append('mc_token', sessionData.token);
+            formData.append('mc_username', sessionData.username);
+            formData.append('mc_server_id', sessionData.serverId);
+            formData.append('mc_album_id', $('#mc-upload-album').val() || '');
+            
+            selectedFiles.forEach((file) => {
+                formData.append('mc_images[]', file);
+            });
+
+            const $btn = $(this);
+            $btn.prop('disabled', true).hide();
+            $('#mc-upload-progress').show();
+            $('#mc-progress-text').text(`Lade ${selectedFiles.length} Bild${selectedFiles.length > 1 ? 'er' : ''} hoch...`);
+            
+            let progress = 0;
+            const progressInterval = setInterval(() => {
+                progress += 5;
+                if (progress > 90) progress = 90;
+                $('#mc-progress-fill').css('width', progress + '%');
+            }, 200);
+
+            fetch(ajaxUrl, {
+                method: 'POST',
+                body: formData,
+                credentials: 'same-origin'
+            })
+            .then(response => response.json())
+            .then(data => {
+                clearInterval(progressInterval);
+                $('#mc-progress-fill').css('width', '100%');
+                
+                if (data.success) {
+                    const uploaded = data.data.uploaded || [];
+                    const errors = data.data.errors || [];
+                    
+                    let msg = `✓ ${uploaded.length} Bild${uploaded.length > 1 ? 'er' : ''} erfolgreich hochgeladen!`;
+                    if (errors.length > 0) {
+                        msg += `<br>⚠ ${errors.length} Fehler: ${errors.join(', ')}`;
+                    }
+                    
+                    showFeedback(msg, 'success');
+                    
+                    setTimeout(() => {
+                        window.location.reload();
+                    }, 1500);
+                    
+                } else {
+                    throw new Error(data.data?.message || data.message || 'Upload fehlgeschlagen');
+                }
+            })
+            .catch(error => {
+                clearInterval(progressInterval);
+                console.error('Upload error:', error);
+                $('#mc-upload-progress').hide();
+                $('#mc-progress-fill').css('width', '0%');
+                $btn.show().prop('disabled', false);
+                showFeedback(`❌ Upload Fehler: ${error.message}`, 'error');
+            });
+        });
+        
+        $('#mc-btn-upload-more').on('click', function() {
+            $(this).hide();
+            $('#mc-feedback-msg').hide();
+            $('#mc-upload-file').click();
+        });
+
+        // === LIGHTBOX & VIEW COUNT ===
+        $(document).on('click', '.mc-gallery-item', function (e) {
+            e.preventDefault();
+            
+            const $item = $(this);
+            const href = $item.attr('href');
+            
+            if (!href) return;
+            
+            // View Count Trigger
+            // Wir lesen die ID aus data-attach (müssen wir im Shortcode hinzufügen) oder versuchen sie aus der URL zu ermitteln
+            // Besser: Wir übergeben die Attach-ID im data-Attribut
+            const attachId = $item.data('attach-id');
+            const $badge = $item.find('.mc-views-badge');
+            
+            if (attachId && $badge.length) {
+                incrementViewCount(attachId, $badge);
+            }
+
+            const player = $item.data('player') || $item.find('.mc-watermark').text().trim();
+            const date = $item.data('date') || '';
+            const album = $item.data('album') || '';
+            const views = $item.data('views') || 0;
+
+            const $lightbox = $('<div class="mc-lightbox active"></div>');
+            const $content = $('<div class="mc-lightbox-content"></div>');
+            const $img = $('<img>').attr({
+                'src': href,
+                'alt': player
+            });
+            const $close = $('<button class="mc-lightbox-close" aria-label="Schließen">&times;</button>');
+            
+            let infoHtml = '';
+            if (player) infoHtml += `👤 ${player}`;
+            if (date && player) infoHtml += ' • ';
+            if (date) infoHtml += `📅 ${date}`;
+            if (album) infoHtml += ` • 📁 ${album}`;
+            // Views auch in Lightbox zeigen
+            if (views) infoHtml += ' • 👁️ ' + views;
+            
+            if (infoHtml) {
+                const $info = $('<div class="mc-lightbox-info"></div>').html(infoHtml);
+                $content.append($info);
+            }
+
+            $content.append($close).append($img);
+            $lightbox.append($content).appendTo('body');
+
+            $lightbox.on('click', function(e) {
+                if (e.target === this) {
+                    $(this).removeClass('active');
+                    setTimeout(() => $(this).remove(), 300);
+                }
+            });
+
+            $close.on('click', function() {
+                $lightbox.removeClass('active');
+                setTimeout(() => $lightbox.remove(), 300);
+            });
+
+            $(document).on('keydown.lightbox', function(e) {
+                if (e.key === 'Escape') {
+                    $lightbox.removeClass('active');
+                    setTimeout(() => $lightbox.remove(), 300);
+                    $(document).off('keydown.lightbox');
+                }
+            });
+        });
+
+    });
+
+})(jQuery);
\ No newline at end of file