Tiny File Manager

Back Back Up Advanced Editor

<?php if (!defined('ABSPATH')) exit;
// Template Image
require_once('templates-image.php');

// Template Data
require_once('templates-data.php');

$activatedTemplateId = get_option('activated_template_id');
$proTemplateIds = array(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 14, 15, 17, 18, 19, 20, 21, 22, 23, 24); // IDs of templates with "Pro" buttons
?>

<div class="ucsm-template-filter" style="text-align: center;">
    <div class="wpucs-radio-status-lite">
        <div class="wpucs-radio-box-lite">
            <div class="wpucs-radio-item-lite">
                <input type="radio" id="filter-all" name="template-filter" value="all" checked>
                <label for="filter-all">
                    <div class="wpucs-dot-icon-pro"></div>
                    <span><?php esc_html_e('All Templates', 'ultimate-coming-soon'); ?></span>
                </label>
            </div>
            <div class="wpucs-radio-item-lite">    
                <input type="radio" id="filter-available" name="template-filter" value="available">
                <label for="filter-available">
                    <div class="wpucs-dot-icon-pro"></div>
                    <span><?php esc_html_e('Free Templates', 'ultimate-coming-soon'); ?>
                    </span>
                </label>
            </div>
            <div class="wpucs-radio-item-lite">

<div class="ucsm-template-grid-lite">
    <?php foreach ($templateData as $template): ?>
        <?php
        $templateId = $template['id'];
        $templateName = $template['name'];
        $templateImage = $template['image'];
        $isActive = $activatedTemplateId === $templateId;
        $isProTemplate = in_array($templateId, $proTemplateIds);
        ?>
        <div class="ucsm-template-grid-lite-item <?php echo $isActive ? 'active' : ''; ?> <?php echo $isProTemplate ? 'pro' : ''; ?>">
            <div class="thumb">
                <img src="<?php echo esc_url($templateImage); ?>" alt="<?php echo esc_attr($templateName); ?>">
            </div>
            <div class="content">
                <h2><?php echo esc_html($templateName); ?></h2>
                <div class="buttons">
                    
                    <?php if ($isProTemplate): ?>
                        <a href="https://wpucs.com/" target="_blank" class="button-pro"><?php esc_html_e('Pro', 'ultimate-coming-soon'); ?></a>
                    <?php else: ?>
                        
                        <?php if (!$isActive): ?>
                            <a href="#" class="button-active" data-template="<?php echo esc_attr($templateId); ?>"
                               data-template-name="<?php echo esc_attr($templateName); ?>"><?php esc_html_e('Activate', 'ultimate-coming-soon'); ?></a>
                        <?php endif; ?>
                        
                        <a href="?page=ucsm-general-settings-lite&tab=dashboard-lite"
                           class="button-settings"><?php esc_html_e('Settings', 'ultimate-coming-soon'); ?></a>
                    <?php endif; ?>
                    <button class="button-preview"
                            data-image="<?php echo esc_url($templateImage); ?>"><?php esc_html_e('Preview', 'ultimate-coming-soon') ?></button>
                </div>
            </div>
        </div>
    <?php endforeach; ?>
</div>

<div id="template-modal" class="ucsm-modal">
    <div class="modal-content-lite">
        <span class="close">
            <svg class="svg-icon" style="vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
                <path d="M777.856 280.192l-33.92-33.952-231.872 231.872-231.84-231.872-33.984 33.888 231.872 231.904-231.84 231.84 33.888 33.984 231.904-231.904 231.84 231.872 33.952-33.888-231.872-231.904z" />
            </svg>
        </span>
        <img id="modal-image" src="" alt="Preview Image">
    </div>
</div>

activateButtons.forEach(button => {
            button.addEventListener('click', function(event) {
                event.preventDefault();
                const templateId = button.getAttribute('data-template');
                const clickedTemplateName = button.getAttribute('data-template-name');
                if (templateId) {
                    const activationUrl = <?php echo wp_json_encode(admin_url('admin-ajax.php')); ?> +
                        '?action=activate_template&templateId=' + templateId;

fetch(activationUrl)
                        .then(response => response.json())
                        .then(data => {
                            if (data.success) {
                                activateButtons.forEach(btn => {
                                    btn.classList.remove('active');
                                    btn.style.display = 'inline-block';
                                    const templateItem = btn.closest('.ucsm-template-grid-lite-item');
                                    const settingsButton = templateItem.querySelector('.button-settings');
                                    if (settingsButton) {
                                        settingsButton.style.display = 'none'; // Hide the Settings button
                                    }
                                });
                                button.classList.add('active');
                                button.style.display = 'none';
                                // Change the page's URL and reload it
                                const newURL = '?page=ucsm-general-settings-lite&tab=templates-lite';
                                window.location.href = newURL;

// Function to update template name using AJAX
        function updateTemplateName(templateId, templateName) {
            const updateTemplateNameUrl = <?php echo wp_json_encode(admin_url('admin-ajax.php')); ?> +
                '?action=update_template_name&templateId=' + templateId + '&templateName=' + encodeURIComponent(templateName);

fetch(updateTemplateNameUrl)
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        // Handle successful update if needed
                    } else {
                        // Handle update failure if needed
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                });
        }

const modal = document.getElementById('template-modal');
        const modalContent = document.querySelector('.modal-content-lite');
        const modalImage = document.getElementById('modal-image');
        const closeBtn = document.querySelector('.close');
        const previewButtons = document.querySelectorAll('.button-preview');

let scale = .5;
        let zoomedPixelX = 0;
        let zoomedPixelY = 0;
        let zoomEnabled = true;

previewButtons.forEach(button => {
            button.addEventListener('click', function(event) {
                event.preventDefault();
                const imageUrl = button.getAttribute('data-image');
                modalImage.src = imageUrl;
                scale = 1;
                zoomedPixelX = 0;
                zoomedPixelY = 0;
                zoomEnabled = true; // Enable zoom on image open
                updateImageScale();
                modal.style.display = 'block';
            });
        });

modalContent.addEventListener('wheel', function(event) {
            if (!zoomEnabled) return;
            event.preventDefault();
            if (event.deltaY < 0) {
                scale += 0.0; // Zoom in
            } else {
                scale -= -0.0; // Zoom out, with minimum scale limit
            }
            zoomEnabled = false; // Disable zoom after the first interaction
            updateImageScale();
        });

modalImage.addEventListener('click', function(event) {
            if (!zoomEnabled) return;
            const imageRect = modalImage.getBoundingClientRect();
            const offsetX = event.clientX - imageRect.left;
            const offsetY = event.clientY - imageRect.top;

zoomedPixelX = offsetX / scale;
            zoomedPixelY = offsetY / scale;

zoomEnabled = false; // Disable zoom after the first interaction
            updateImageScale();
        });

closeBtn.addEventListener('click', function() {
            modal.style.display = 'none';
        });

window.addEventListener('click', function(event) {
            if (event.target === modal) {
                modal.style.display = 'none';
            }
        });

// Filtering logic
        const filterAll = document.getElementById('filter-all');
        const filterAvailable = document.getElementById('filter-available');
        const filterPro = document.getElementById('filter-pro');
        const templateItems = document.querySelectorAll('.ucsm-template-grid-lite-item');

filterAll.addEventListener('change', filterTemplates);
        filterAvailable.addEventListener('change', filterTemplates);
        filterPro.addEventListener('change', filterTemplates);

filterTemplates(); // Initial call to set the correct filter state on page load
    });
</script>