Hi-School-Slide-Manager/assets/js/admin.js

/**
 * Hi-School Slide Manager - Admin JavaScript
 */

jQuery(document).ready(function($) {
    'use strict';
    
    // Initialize admin functionality
    initializeAdmin();
    
    /**
     * Initialize admin functionality
     */
    function initializeAdmin() {
        // Handle form submissions
        $('.hssm-settings-form').on('submit', handleFormSubmission);
        
        // Handle media upload buttons
        $('.hssm-upload-button').on('click', handleMediaUpload);
        
        // Handle slide preview
        $('.hssm-preview-button').on('click', handleSlidePreview);
        
        // Initialize sortable slides if library is available
        if (typeof $.fn.sortable !== 'undefined') {
            initializeSortable();
        }
    }
    
    /**
     * Handle form submission
     */
    function handleFormSubmission(e) {
        e.preventDefault();
        
        var $form = $(this);
        var $submitBtn = $form.find('[type="submit"]');
        var originalText = $submitBtn.text();
        
        // Show loading state
        $submitBtn.text('Saving...').prop('disabled', true);
        
        // Simulate form processing (replace with actual AJAX call)
        setTimeout(function() {
            $submitBtn.text('Saved!').removeClass('hssm-btn').addClass('hssm-btn-success');
            
            setTimeout(function() {
                $submitBtn.text(originalText).removeClass('hssm-btn-success').addClass('hssm-btn').prop('disabled', false);
            }, 2000);
        }, 1000);
    }
    
    /**
     * Handle media upload
     */
    function handleMediaUpload(e) {
        e.preventDefault();
        
        var $button = $(this);
        var $input = $button.siblings('input[type="hidden"]');
        var $preview = $button.siblings('.hssm-image-preview');
        
        // WordPress media uploader
        if (typeof wp !== 'undefined' && wp.media) {
            var mediaUploader = wp.media({
                title: 'Choose Slide Image',
                button: {
                    text: 'Use this image'
                },
                multiple: false
            });
            
            mediaUploader.on('select', function() {
                var attachment = mediaUploader.state().get('selection').first().toJSON();
                $input.val(attachment.id);
                $preview.html('<img src="' + attachment.url + '" style="max-width: 200px; height: auto;">');
            });
            
            mediaUploader.open();
        }
    }
    
    /**
     * Handle slide preview
     */
    function handleSlidePreview(e) {
        e.preventDefault();
        
        var $button = $(this);
        var slideData = gatherSlideData($button.closest('.hssm-slide-form'));
        
        // Create preview modal
        var $modal = $('<div class="hssm-modal">');
        var $modalContent = $('<div class="hssm-modal-content">');
        var $closeBtn = $('<span class="hssm-modal-close">&times;</span>');
        
        $modalContent.append($closeBtn);
        $modalContent.append('<h3>Slide Preview</h3>');
        $modalContent.append('<div class="hssm-slide-preview">' + generateSlideHTML(slideData) + '</div>');
        
        $modal.append($modalContent);
        $('body').append($modal);
        
        // Show modal
        $modal.fadeIn();
        
        // Close modal handlers
        $closeBtn.on('click', function() {
            $modal.fadeOut(function() {
                $modal.remove();
            });
        });
        
        $modal.on('click', function(e) {
            if (e.target === this) {
                $modal.fadeOut(function() {
                    $modal.remove();
                });
            }
        });
    }
    
    /**
     * Initialize sortable slides
     */
    function initializeSortable() {
        $('.hssm-slides-list').sortable({
            handle: '.hssm-slide-handle',
            placeholder: 'hssm-slide-placeholder',
            update: function(event, ui) {
                // Handle slide reordering
                updateSlideOrder();
            }
        });
    }
    
    /**
     * Gather slide data from form
     */
    function gatherSlideData($form) {
        return {
            title: $form.find('[name="slide_title"]').val(),
            content: $form.find('[name="slide_content"]').val(),
            image: $form.find('[name="slide_image"]').val()
        };
    }
    
    /**
     * Generate slide HTML for preview
     */
    function generateSlideHTML(data) {
        var html = '<div class="hssm-slide">';
        html += '<h3>' + (data.title || 'Untitled Slide') + '</h3>';
        html += '<div class="hssm-slide-content">' + (data.content || 'No content') + '</div>';
        if (data.image) {
            html += '<div class="hssm-slide-image"><img src="' + data.image + '" alt="Slide Image"></div>';
        }
        html += '</div>';
        return html;
    }
    
    /**
     * Update slide order after sorting
     */
    function updateSlideOrder() {
        var order = [];
        $('.hssm-slides-list .hssm-slide-item').each(function() {
            order.push($(this).data('slide-id'));
        });
        
        // Send order to server (implement AJAX call)
        console.log('New slide order:', order);
    }
});

// Add modal styles
document.addEventListener('DOMContentLoaded', function() {
    var style = document.createElement('style');
    style.textContent = `
        .hssm-modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
        }
        
        .hssm-modal-content {
            background-color: #fff;
            margin: 5% auto;
            padding: 20px;
            border-radius: 8px;
            width: 80%;
            max-width: 600px;
            position: relative;
            max-height: 80vh;
            overflow-y: auto;
        }
        
        .hssm-modal-close {
            position: absolute;
            top: 10px;
            right: 15px;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
            color: #aaa;
        }
        
        .hssm-modal-close:hover,
        .hssm-modal-close:focus {
            color: #000;
        }
        
        .hssm-btn-success {
            background: #46b450 !important;
        }
    `;
    document.head.appendChild(style);
});