var custom_folio = function(){ var custom_folio_items = new Array(); if ($.cookie('custom_folio')) { custom_folio_items = $.cookie('custom_folio').split(','); custom_folio_items = $.map(custom_folio_items, function(a){ return parseInt(a); }); } console.log("Custom folio items:", custom_folio_items); function init(){ // Initialize click handlers console.log("Initializing custom folio handlers"); // Handle individual image removal $('#custom-folio .remove').on('click', function(e) { e.preventDefault(); e.stopPropagation(); var $gridItem = $(this).closest('.grid-item'); var imageId = parseInt($gridItem.attr('id')); console.log("Removing image ID:", imageId); // Use Ajax to delete the image server-side $.ajax({ url: ajaxurl || '/wp-admin/admin-ajax.php', type: 'POST', data: { 'action': 'custom_folio_delete', 'image_id': imageId }, success: function(response) { console.log("Image deleted response:", response); if (response.success) { // Remove from local array delete_image(imageId); // Remove from DOM with animation $gridItem.fadeOut(300, function() { $(this).remove(); // If no images left, show empty message if ($('#custom-folio .grid-item').length === 0) { $('#custom-folio .galleries').html('You have no images in your folio'); } // Reinitialize grid layout if needed if ($.fn.masonry && $('#custom-folio .grid').length) { $('#custom-folio .grid').masonry('layout'); } }); } }, error: function(xhr, status, error) { console.error("Error deleting image:", error); // Still delete locally even if AJAX fails delete_image(imageId); // Remove from DOM $gridItem.fadeOut(300, function() { $(this).remove(); // If no images left, show empty message if ($('#custom-folio .grid-item').length === 0) { $('#custom-folio .galleries').html('You have no images in your folio'); } }); } }); }); // Handle clear all button $('#custom-folio .clear').on('click', function(e) { e.preventDefault(); if (confirm('Are you sure you want to clear all images from your folio?')) { console.log("Clearing all images"); // Use Ajax to clear all images server-side $.ajax({ url: ajaxurl || '/wp-admin/admin-ajax.php', type: 'POST', data: { 'action': 'custom_folio_clear' }, success: function(response) { console.log("Clear all response:", response); if (response.success) { // Clear local array clear_all(); // Remove all grid items with animation $('#custom-folio .grid-item').fadeOut(300, function() { $(this).remove(); }); // Show empty message after animations complete setTimeout(function() { $('#custom-folio .galleries').html('You have no images in your folio'); }, 350); } }, error: function(xhr, status, error) { console.error("Error clearing all images:", error); // Still clear locally even if AJAX fails clear_all(); // Remove all grid items with animation $('#custom-folio .grid-item').fadeOut(300, function() { $(this).remove(); }); // Show empty message after animations complete setTimeout(function() { $('#custom-folio .galleries').html('You have no images in your folio'); }, 350); } }); } }); // Initialize any Masonry grid if present if ($.fn.masonry && $('#custom-folio .grid').length) { $('#custom-folio .grid').masonry({ itemSelector: '.grid-item', percentPosition: true }); } } function add_image(id){ if(jQuery.inArray(id, custom_folio_items) == -1){ custom_folio_items.push(id); _updateData(); // Optional: Also update via AJAX $.ajax({ url: ajaxurl || '/wp-admin/admin-ajax.php', type: 'POST', data: { 'action': 'custom_folio_add', 'image_id': id }, success: function(response) { console.log("Image added response:", response); } }); } } function delete_image(id){ if(jQuery.inArray(id, custom_folio_items) != -1){ custom_folio_items = jQuery.grep(custom_folio_items, function(value) { return value != id; }); _updateData(); } } function clear_all(){ custom_folio_items = new Array(); _updateData(); } function _updateData(){ $.cookie('custom_folio', custom_folio_items, { expires: 30, path: '/'}); } // Initialize on load $(document).ready(function() { init(); }); return { add_image: add_image, delete_image: delete_image, clear_all: clear_all, init: init }; }; // Initialize the custom folio object jQuery(document).ready(function($) { // Define ajaxurl if not already defined if (typeof ajaxurl === 'undefined') { window.ajaxurl = '/wp-admin/admin-ajax.php'; } window.FCF = custom_folio(); });