`);
}
});
}
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 Popup Logic
let pendingSectionImport = null;
// Open Import Popup
$(document).on('click', '.import-section-btn', function(e) {
e.preventDefault();
e.stopPropagation();
let sectionKey = $(this).data('section-key');
let sectionPlan = $(this).data('section-plan');
let sectionTitle = $(this).closest('.section-item').find('h4').text();
// Check premium
let planActive = $('#install-template').attr('data-plan-active');
if (sectionPlan === 'premium' && planActive !== 'premium') {
$('#templates-catalog').addClass('kng-whole-overlay');
$('#premium-promo-popup').fadeIn();
return;
}
// Store pending import data
pendingSectionImport = {
key: sectionKey,
plan: sectionPlan
};
// Populate and show popup
$('#popup-section-name').text(sectionTitle);
$('#popup-section-plan').text(sectionPlan.charAt(0).toUpperCase() + sectionPlan.slice(1));
$('#section-import-popup').css('display', 'flex').hide().fadeIn(10, function() {
$(this).addClass('active');
});
});
// Live Preview Button - Stop Propagation
$(document).on('click', '.live-preview-btn', function(e) {
e.stopPropagation();
});
// Close Popup
function closeSectionPopup() {
$('#section-import-popup').removeClass('active');
setTimeout(function() {
$('#section-import-popup').fadeOut();
}, 300);
pendingSectionImport = null;
}
$(document).on('click', '#close-section-popup, #cancel-section-import', function(e) {
e.preventDefault();
closeSectionPopup();
});
// Confirm Import
$(document).on('click', '#confirm-section-import', function(e) {
e.preventDefault();
if (pendingSectionImport) {
importSection(pendingSectionImport.key, pendingSectionImport.plan);
closeSectionPopup();
}
});
// Close on click outside
$(document).on('click', '#section-import-popup', function(e) {
if ($(e.target).is('#section-import-popup')) {
closeSectionPopup();
}
});
// 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, .import-section-btn, .live-preview-btn').length) {
return;
}
var sectionKey = $(this).data('section-key');
var sectionPlan = $(this).data('section-plan');
var sectionTitle = $(this).find('h4').text();
// 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;
}
// Open the custom popup instead of confirm()
pendingSectionImport = {
key: sectionKey,
plan: sectionPlan
};
$('#popup-section-name').text(sectionTitle);
$('#popup-section-plan').text(sectionPlan.charAt(0).toUpperCase() + sectionPlan.slice(1));
$('#section-import-popup').css('display', 'flex').hide().fadeIn(10, function() {
$(this).addClass('active');
});
});
// 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',
nonce: window.kingAddonsData.nonce,
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);
}
});
}
// ===== COLLECTIONS (LIST VIEW ONLY) =====
window.collectionRowsLoaded = false;
window.collectionRowsData = null;
window.collectionRowsPage = 1;
window.collectionRowsSearch = '';
function loadCollectionRows(page = 1) {
$('.collections-rows-container').html('