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

/**
 * Hi-School Slide Manager Preview JavaScript
 * 
 * Handles interactions on the slide preview page
 * 
 * @package Hi_School_Slide_Manager
 * @since 1.0.0
 */

(function($) {
    'use strict';

    // Preview object
    const HSSMPreview = {
        
        // Initialize
        init: function() {
            this.bindEvents();
            this.initDatepicker();
        },

        // Initialize Datepicker
        initDatepicker: function() {
            if ($('#hssm_date').length === 0) return;

            $('#hssm_date').datepicker({
                dateFormat: 'yy-mm-dd',
                beforeShowDay: function(date) {
                    var y = date.getFullYear();
                    var m = date.getMonth() + 1;
                    var d = date.getDate();
                    
                    // Pad month and day
                    var dateString = y + '-' + (m < 10 ? '0' : '') + m + '-' + (d < 10 ? '0' : '') + d;
                    
                    if (typeof hssmEvents !== 'undefined' && hssmEvents[dateString]) {
                        var classes = [];
                        var events = hssmEvents[dateString];
                        
                        if (events.indexOf('start') !== -1) {
                            classes.push('hssm-datepicker-start');
                        }
                        if (events.indexOf('end') !== -1) {
                            classes.push('hssm-datepicker-end');
                        }
                        
                        return [true, classes.join(' '), ''];
                    }
                    
                    return [true, '', ''];
                },
                onSelect: function(dateText) {
                    // Trigger form submit
                    $(this).closest('form').submit();
                }
            });
        },

        // Bind event handlers
        bindEvents: function() {
            $(document).on('click', '#email-preview', this.emailPreview.bind(this));
            $(document).on('click', '#download-screenshot', this.downloadScreenshot.bind(this));
            $(document).on('click', '#copy-preview-link', this.copyPreviewLink.bind(this));
            $(document).on('click', '.hssm-approve-slide', this.approveSlide.bind(this));
        },

        // Email preview functionality
        emailPreview: function(e) {
            e.preventDefault();
            this.showMessage('Email preview functionality coming soon!', 'info');
        },

        // Download screenshot functionality
        downloadScreenshot: function(e) {
            e.preventDefault();
            this.showMessage('Screenshot download functionality coming soon!', 'info');
        },

        // Copy preview link
        copyPreviewLink: function(e) {
            e.preventDefault();
            
            const previewUrl = window.location.href;
            
            if (navigator.clipboard) {
                navigator.clipboard.writeText(previewUrl).then(() => {
                    this.showMessage('Preview link copied to clipboard!', 'success');
                });
            } else {
                this.showMessage('Preview link: ' + previewUrl, 'info');
            }
        },

        // Approve slide
        approveSlide: function(e) {
            e.preventDefault();
            const $btn = $(e.currentTarget);
            const slideId = $btn.data('id');

            if (!confirm(hssmPreview.strings.approve_confirm)) {
                return;
            }

            $btn.prop('disabled', true).addClass('hssm-loading');

            $.ajax({
                url: hssmPreview.ajaxurl,
                type: 'POST',
                data: {
                    action: 'hssm_approve_slide',
                    nonce: hssmPreview.nonce,
                    slide_id: slideId,
                    approve_action: 'schedule' // Smart approve: schedules if future date exists, otherwise publishes
                },
                success: (response) => {
                    if (response.success) {
                        this.showMessage(hssmPreview.strings.approve_success, 'success');
                        // Reload page to reflect changes
                        setTimeout(() => {
                            window.location.reload();
                        }, 1500);
                    } else {
                        this.showMessage(response.data.message || hssmPreview.strings.approve_error, 'error');
                        $btn.prop('disabled', false).removeClass('hssm-loading');
                    }
                },
                error: () => {
                    this.showMessage(hssmPreview.strings.approve_error, 'error');
                    $btn.prop('disabled', false).removeClass('hssm-loading');
                }
            });
        },

        // Show message to user
        showMessage: function(message, type = 'info') {
            // Create message container if it doesn't exist
            let $messages = $('#hssm-preview-messages');
            
            if ($messages.length === 0) {
                $messages = $('<div id="hssm-preview-messages" class="hssm-messages"></div>');
                $('.hssm-preview-actions').before($messages);
            }

            const messageHtml = `
                <div class="hssm-message ${type}">
                    ${message}
                </div>
            `;

            $messages.append(messageHtml);

            // Auto-remove after 5 seconds
            setTimeout(() => {
                $messages.find('.hssm-message').last().fadeOut(300, function() {
                    $(this).remove();
                });
            }, 5000);
        }
    };

    // Initialize when document is ready
    $(document).ready(function() {
        HSSMPreview.init();
    });

})(jQuery);