Instagram-Gallery-Sync-Pro/admin/js/admin-script.js

/**
 * Instagram Gallery Sync Pro - Admin Script
 * 
 * Handles admin UI interactions
 * 
 * @package Instagram_Gallery_Sync_Pro
 */

(function($) {
    'use strict';

    /**
     * Admin Controller
     */
    const IGSPAdmin = {
        
        /**
         * Initialize
         */
        init: function() {
            this.initColorPickers();
            this.initSliders();
            this.initLayoutSelector();
            this.initConditionalFields();
            this.initSyncButton();
            this.initToolButtons();
            this.initTabPersistence();
        },

        /**
         * Initialize color pickers
         */
        initColorPickers: function() {
            $('.igsp-color-picker').wpColorPicker({
                change: function(event, ui) {
                    // Update live preview
                    IGSPAdmin.updatePreview();
                }
            });
        },

        /**
         * Initialize range sliders
         */
        initSliders: function() {
            $('input[type="range"]').on('input change', function() {
                const $slider = $(this);
                const $value = $slider.siblings('.igsp-slider-value');
                let value = $slider.val();
                
                // Handle special cases
                const id = $slider.attr('id');
                
                if (id === 'igsp_auto_delete_days') {
                    value = value == 0 ? igspAdmin.strings.never || 'Never' : value + ' days';
                } else if (id === 'igsp_spacing' || id === 'igsp_padding' || 
                           id === 'igsp_border_radius' || id === 'igsp_caption_font_size') {
                    value += 'px';
                } else if (id === 'igsp_request_timeout') {
                    value += 's';
                }
                
                $value.text(value);
                
                // Update live preview if applicable
                if (id === 'igsp_caption_font_size') {
                    IGSPAdmin.updatePreview();
                }
            });
        },

        /**
         * Initialize layout selector
         */
        initLayoutSelector: function() {
            $('.igsp-layout-option input').on('change', function() {
                $('.igsp-layout-option').removeClass('selected');
                $(this).closest('.igsp-layout-option').addClass('selected');
            });
        },

        /**
         * Initialize conditional fields
         */
        initConditionalFields: function() {
            $('[data-depends-on]').each(function() {
                const $field = $(this);
                const dependsOn = $field.data('depends-on');
                const dependsValue = $field.data('depends-value');
                
                function checkVisibility() {
                    const $input = $('[name="' + dependsOn + '"]:checked, [name="' + dependsOn + '"]').filter(':checked, select');
                    const currentValue = $input.val();
                    
                    if (currentValue === dependsValue) {
                        $field.show();
                    } else {
                        $field.hide();
                    }
                }
                
                // Initial check
                checkVisibility();
                
                // Listen for changes
                $('[name="' + dependsOn + '"]').on('change', checkVisibility);
            });
        },

        /**
         * Initialize sync button
         */
        initSyncButton: function() {
            $('#igsp-sync-now').on('click', function() {
                const $button = $(this);
                const $progress = $('#igsp-sync-progress');
                const $result = $('#igsp-sync-result');
                
                // Disable button
                $button.prop('disabled', true);
                $progress.show();
                $result.hide();
                
                // Animate progress bar
                const $fill = $progress.find('.igsp-progress-fill');
                $fill.css('width', '0%');
                
                // Simulate progress
                let progress = 0;
                const progressInterval = setInterval(function() {
                    progress += Math.random() * 15;
                    if (progress > 90) progress = 90;
                    $fill.css('width', progress + '%');
                }, 500);
                
                // Make AJAX request
                $.ajax({
                    url: igspAdmin.ajaxUrl,
                    type: 'POST',
                    data: {
                        action: 'igsp_manual_sync',
                        nonce: igspAdmin.nonce
                    },
                    success: function(response) {
                        clearInterval(progressInterval);
                        $fill.css('width', '100%');
                        
                        setTimeout(function() {
                            $progress.hide();
                            $result.removeClass('success error');
                            
                            if (response.success) {
                                $result.addClass('success').html(response.data.message).show();
                                IGSPAdmin.updateSyncStatus();
                            } else {
                                $result.addClass('error').html(response.data.message || igspAdmin.strings.syncError).show();
                            }
                            
                            $button.prop('disabled', false);
                        }, 500);
                    },
                    error: function() {
                        clearInterval(progressInterval);
                        $progress.hide();
                        $result.addClass('error').html(igspAdmin.strings.syncError).show();
                        $button.prop('disabled', false);
                    }
                });
            });
        },

        /**
         * Initialize tool buttons
         */
        initToolButtons: function() {
            // Clear cache
            $('#igsp-clear-cache').on('click', function() {
                const $button = $(this);
                $button.prop('disabled', true).text(igspAdmin.strings.processing);
                
                $.post(igspAdmin.ajaxUrl, {
                    action: 'igsp_clear_cache',
                    nonce: igspAdmin.nonce
                }, function(response) {
                    if (response.success) {
                        $button.text(igspAdmin.strings.done);
                        setTimeout(function() {
                            $button.prop('disabled', false).html('<span class="dashicons dashicons-trash"></span> Clear Cache');
                        }, 2000);
                    }
                });
            });
            
            // Reset data
            $('#igsp-reset-data').on('click', function() {
                if (!confirm(igspAdmin.strings.confirmReset)) {
                    return;
                }
                
                const $button = $(this);
                $button.prop('disabled', true).text(igspAdmin.strings.processing);
                
                $.post(igspAdmin.ajaxUrl, {
                    action: 'igsp_reset_data',
                    nonce: igspAdmin.nonce
                }, function(response) {
                    if (response.success) {
                        location.reload();
                    }
                });
            });
            
            // Clear logs
            $('#igsp-clear-logs').on('click', function() {
                if (!confirm(igspAdmin.strings.confirmClearLogs)) {
                    return;
                }
                
                const $button = $(this);
                $button.prop('disabled', true);
                
                $.post(igspAdmin.ajaxUrl, {
                    action: 'igsp_clear_logs',
                    nonce: igspAdmin.nonce
                }, function(response) {
                    if (response.success) {
                        location.reload();
                    }
                });
            });
        },

        /**
         * Update sync status
         */
        updateSyncStatus: function() {
            $.post(igspAdmin.ajaxUrl, {
                action: 'igsp_get_sync_status',
                nonce: igspAdmin.nonce
            }, function(response) {
                if (response.success) {
                    $('#igsp-total-posts').text(response.data.total_posts);
                    $('#igsp-last-sync').text(response.data.last_sync);
                    $('#igsp-next-sync').text(response.data.next_sync);
                }
            });
        },

        /**
         * Update live preview
         */
        updatePreview: function() {
            const primaryColor = $('#igsp_primary_color').val() || '#e1306c';
            const hoverColor = $('#igsp_hover_color').val() || '#c13584';
            const textColor = $('#igsp_text_color').val() || '#ffffff';
            const fontSize = $('#igsp_caption_font_size').val() || 14;
            
            $('.igsp-preview-item').css({
                '--primary': primaryColor,
                '--hover': hoverColor,
                '--text': textColor
            });
            
            $('.igsp-preview-caption').css('font-size', fontSize + 'px');
        },

        /**
         * Tab persistence
         */
        initTabPersistence: function() {
            // Store current tab in localStorage
            $('.igsp-tab-link').on('click', function() {
                const tab = $(this).attr('href').split('tab=')[1];
                if (tab) {
                    localStorage.setItem('igsp_active_tab', tab);
                }
            });
        }
    };

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

})(jQuery);