`);
}
});
}
function renderSections() {
if (!window.sectionsData || !window.sectionsData.sections) {
$('.sections-grid').html(`
No sections found. Try adjusting your search or filters to find more sections.
`);
return;
}
var sectionsHtml = '';
var sections = window.sectionsData.sections;
sections.forEach(function(section) {
// Use the correct screenshot URL pattern with plan-based paths
var screenshotUrl = `https://thumbnails.kingaddons.com/sections/${section.plan}/${section.section_key}.png?v=4`;
sectionsHtml += `
`;
});
$('.sections-grid').html(sectionsHtml);
// Render pagination if available
if (window.sectionsData.pagination) {
renderSectionsPagination();
}
}
function renderSectionsPagination() {
var pagination = window.sectionsData.pagination;
var paginationHtml = '';
if (pagination.total_pages > 1) {
paginationHtml += '
';
var current = pagination.current_page;
var total = pagination.total_pages;
var endSize = 3; // Show 3 pages at beginning and end
var midSize = 2; // Show 2 pages around current
// Previous page
if (current > 1) {
paginationHtml += `← Previous`;
}
// Smart pagination logic with proper ellipsis
var pages = [];
// Always show first pages
for (var i = 1; i <= Math.min(endSize, total); i++) {
pages.push(i);
}
// Calculate middle range around current page
var start = Math.max(current - midSize, 1);
var end = Math.min(current + midSize, total);
// Add first ellipsis if there's a gap
if (start > endSize + 1) {
pages.push('...');
}
// Add middle pages around current (avoid duplicates with start/end)
for (var i = Math.max(start, endSize + 1); i <= Math.min(end, total - endSize); i++) {
if (pages.indexOf(i) === -1) {
pages.push(i);
}
}
// Add second ellipsis if there's a gap
if (end < total - endSize) {
pages.push('...');
}
// Always show last pages (avoid duplicates)
for (var i = Math.max(total - endSize + 1, endSize + 1); i <= total; i++) {
if (pages.indexOf(i) === -1) {
pages.push(i);
}
}
// Render pages
pages.forEach(function(page) {
if (page === '...') {
paginationHtml += `…`;
} else if (page === current) {
paginationHtml += `${page}`;
} else {
paginationHtml += `${page}`;
}
});
// Next page
if (current < total) {
paginationHtml += `Next →`;
}
paginationHtml += '
';
}
$('.sections-pagination').html(paginationHtml);
}
function updateSectionsFilters() {
if (!window.sectionsData) return;
// Update categories dropdown
var categoriesHtml = '';
if (window.sectionsData.categories) {
window.sectionsData.categories.forEach(function(category) {
var displayName = category.charAt(0).toUpperCase() + category.slice(1).replace(/-/g, ' ');
categoriesHtml += ``;
});
}
$('#sections-category').html(categoriesHtml);
// Update types dropdown
var typesHtml = '';
if (window.sectionsData.section_types) {
window.sectionsData.section_types.forEach(function(type) {
var displayName = type.charAt(0).toUpperCase() + type.slice(1).replace(/-/g, ' ');
typesHtml += ``;
});
}
$('#sections-type').html(typesHtml);
}
function updateSectionsCount() {
if (window.sectionsData && window.sectionsData.pagination) {
$('#sections-count').text(window.sectionsData.pagination.total_sections);
}
}
// Sections filters event handlers - Same logic as templates
var sectionsSearch = $('#sections-search');
var sectionsCategory = $('#sections-category');
var sectionsType = $('#sections-type');
var sectionsPlan = $('#sections-plan');
sectionsSearch.on('keyup', function() {
// Reset other filters when searching (same as templates)
sectionsCategory.val('');
sectionsType.val('');
sectionsPlan.val('');
clearTimeout(window.sectionsSearchTimeout);
window.sectionsSearchTimeout = setTimeout(function() {
loadSections(1);
}, 500);
});
sectionsCategory.on('change', function() {
// Reset search and other filters (same as templates)
sectionsSearch.val('');
sectionsType.val('');
sectionsPlan.val('');
loadSections(1);
});
sectionsType.on('change', function() {
// Reset search and other filters (same as templates)
sectionsSearch.val('');
sectionsCategory.val('');
sectionsPlan.val('');
loadSections(1);
});
sectionsPlan.on('change', function() {
// Reset search and other filters (same as templates)
sectionsSearch.val('');
sectionsCategory.val('');
sectionsType.val('');
loadSections(1);
});
$('#sections-reset-filters').on('click', function() {
sectionsSearch.val('');
sectionsCategory.val('');
sectionsType.val('');
sectionsPlan.val('');
loadSections(1);
});
// Sections pagination handler
$(document).on('click', '.sections-pagination .page-numbers', function(e) {
e.preventDefault();
var page = $(this).data('page');
if (page) {
loadSections(page);
}
});
// Section import button handler
$(document).on('click', '.section-import-btn', function(e) {
e.preventDefault();
e.stopPropagation(); // Prevent triggering parent click
var sectionKey = $(this).data('section-key');
var sectionPlan = $(this).data('section-plan');
// Check if this is a premium section and user doesn't have premium
var planActive = $('#install-template').attr('data-plan-active');
if (sectionPlan === 'premium' && planActive !== 'premium') {
// Show premium promo popup
$('#templates-catalog').addClass('kng-whole-overlay');
$('#premium-promo-popup').fadeIn();
return;
}
// For free sections or premium sections with premium license, trigger import
if (confirm('Import this section?\n\nSection: ' + sectionKey + '\nPlan: ' + sectionPlan + '\n\nNote: This will be added to your current page in Elementor.')) {
importSection(sectionKey, sectionPlan);
}
});
// Section preview button handler (handled by href, but we can add tracking here)
$(document).on('click', '.section-preview-btn', function(e) {
e.stopPropagation(); // Prevent triggering parent click
// The link will open in new tab automatically due to target="_blank"
});
// Section item click handler - now only for general clicks (not on buttons)
$(document).on('click', '.section-item', function(e) {
// Don't trigger if clicking on buttons or overlay
if ($(e.target).closest('.section-overlay, .section-import-btn, .section-preview-btn').length) {
return;
}
var sectionKey = $(this).data('section-key');
var sectionPlan = $(this).data('section-plan');
// Check if this is a premium section and user doesn't have premium
var planActive = $('#install-template').attr('data-plan-active');
if (sectionPlan === 'premium' && planActive !== 'premium') {
// Show premium promo popup
$('#templates-catalog').addClass('kng-whole-overlay');
$('#premium-promo-popup').fadeIn();
return;
}
// For free sections or premium sections with premium license, trigger import
if (confirm('Import this section?\n\nSection: ' + sectionKey + '\nPlan: ' + sectionPlan + '\n\nNote: This will be added to your current page in Elementor.')) {
importSection(sectionKey, sectionPlan);
}
});
// Function to import section from main catalog
function importSection(sectionKey, sectionPlan) {
// Show importing popup
$('#templates-catalog').addClass('kng-whole-overlay');
$('#template-installing-popup').fadeIn();
// Initialize progress
document.getElementById('progress').innerText = 'Loading section data...';
document.getElementById('progress-bar').style.width = '5%';
document.getElementById('progress-bar').innerText = '5%';
// Get section data
$.ajax({
url: window.kingAddonsData.ajaxUrl,
type: 'POST',
data: {
action: 'king_addons_import_section_admin',
nonce: window.kingAddonsData.nonce,
section_key: sectionKey,
section_plan: sectionPlan
},
success: function(response) {
if (response.success) {
var sectionData = response.data.section_data;
var imageCount = sectionData.images ? sectionData.images.length : 0;
document.getElementById('progress').innerText = 'Section loaded! Found ' + imageCount + ' images to process...';
document.getElementById('progress-bar').style.width = '25%';
document.getElementById('progress-bar').innerText = '25%';
// Process section import (use existing system)
processSectionImport(sectionData);
} else {
document.getElementById('progress').innerText = 'Error: ' + (response.data || 'Failed to load section');
$('#close-installing-popup').fadeIn();
}
},
error: function(xhr, status, error) {
document.getElementById('progress').innerText = 'Network error: ' + error;
$('#close-installing-popup').fadeIn();
}
});
}
// Process section import using existing Templates system
function processSectionImport(sectionData) {
document.getElementById('progress').innerText = 'Preparing section import...';
document.getElementById('progress-bar').style.width = '45%';
document.getElementById('progress-bar').innerText = '45%';
// Use existing Templates import system
var importData = {
content: sectionData.content,
images: sectionData.images || [],
title: sectionData.title || 'Imported Section',
elementor_version: sectionData.elementor_version || '3.0.0',
existing_page_id: 0,
create_new_page: true // Create new page for sections from main admin catalog
};
// Call Templates import system
$.ajax({
url: window.kingAddonsData.ajaxUrl,
type: 'POST',
data: {
action: 'import_elementor_page_with_images',
data: JSON.stringify(importData)
},
success: function(result) {
if (result.success) {
document.getElementById('progress').innerText = 'Section import initialized! Processing images...';
document.getElementById('progress-bar').style.width = '65%';
document.getElementById('progress-bar').innerText = '65%';
// Start processing images using existing system
processNextImage();
} else {
document.getElementById('progress').innerText = 'Error: ' + (result.data || 'Failed to initialize section import');
$('#close-installing-popup').fadeIn();
}
},
error: function(xhr, status, error) {
document.getElementById('progress').innerText = 'Import error: ' + error;
$('#close-installing-popup').fadeIn();
}
});
}
// Load sections count for tab
function loadSectionsCount() {
$.ajax({
url: window.kingAddonsData.ajaxUrl,
type: 'POST',
data: {
action: 'king_addons_get_sections_catalog',
nonce: window.kingAddonsData.nonce || '',
search: '',
category: '',
section_type: '',
plan: '',
page: 1
},
success: function(response) {
if (response.success && response.data.pagination) {
$('#sections-count').text(response.data.pagination.total_sections);
}
},
error: function(xhr, status, error) {
console.log('Failed to load sections count:', error);
}
});
}
});