Plugins bloques
This commit is contained in:
Jose Ibáñez
@@ -0,0 +1,34 @@
|
||||
/**
|
||||
* Scripts del panel de administración - Bloques en Transición
|
||||
*/
|
||||
|
||||
(function($) {
|
||||
'use strict';
|
||||
|
||||
$(document).ready(function() {
|
||||
// Confirmación antes de cargar datos
|
||||
$('.bloques-seeder form').on('submit', function(e) {
|
||||
if (!confirm('¿Estás seguro de que quieres cargar los datos iniciales?')) {
|
||||
e.preventDefault();
|
||||
}
|
||||
});
|
||||
|
||||
// Copiar shortcode al portapapeles
|
||||
$('.bloques-dashboard-shortcodes code').on('click', function() {
|
||||
const text = $(this).text();
|
||||
navigator.clipboard.writeText(text).then(function() {
|
||||
// Feedback visual
|
||||
const $code = $(this);
|
||||
const originalBg = $code.css('background');
|
||||
$code.css('background', '#d4edda');
|
||||
setTimeout(function() {
|
||||
$code.css('background', originalBg);
|
||||
}, 500);
|
||||
}.bind(this));
|
||||
});
|
||||
|
||||
// Añadir cursor pointer a los shortcodes
|
||||
$('.bloques-dashboard-shortcodes code').css('cursor', 'pointer').attr('title', 'Clic para copiar');
|
||||
});
|
||||
|
||||
})(jQuery);
|
||||
@@ -0,0 +1,247 @@
|
||||
/**
|
||||
* Scripts del frontend - Bloques en Transición
|
||||
*/
|
||||
|
||||
(function($) {
|
||||
'use strict';
|
||||
|
||||
// Inicializar cuando el DOM esté listo
|
||||
$(document).ready(function() {
|
||||
initFilters();
|
||||
initLoadMore();
|
||||
initSearch();
|
||||
});
|
||||
|
||||
/**
|
||||
* Inicializar filtros tipo botonera
|
||||
*/
|
||||
function initFilters() {
|
||||
$('.bloques-filters').each(function() {
|
||||
const $filters = $(this);
|
||||
const containerId = $filters.data('container');
|
||||
const $container = $('#' + containerId);
|
||||
const $itemsContainer = $container.find('.bloques-items');
|
||||
|
||||
// Estado de filtros activos (incluye category para noticias)
|
||||
let activeFilters = {
|
||||
iniciativa: '',
|
||||
linea_trabajo: '',
|
||||
category: ''
|
||||
};
|
||||
|
||||
// Click en botones de filtro
|
||||
$filters.on('click', '.bloques-filter-btn', function() {
|
||||
const $btn = $(this);
|
||||
const taxonomy = $btn.data('taxonomy');
|
||||
const value = $btn.data('value');
|
||||
|
||||
// Actualizar estado activo en botones del mismo grupo
|
||||
$btn.closest('.bloques-filter-buttons')
|
||||
.find('.bloques-filter-btn')
|
||||
.removeClass('active');
|
||||
$btn.addClass('active');
|
||||
|
||||
// Actualizar filtros activos
|
||||
activeFilters[taxonomy] = value;
|
||||
|
||||
// Aplicar filtros
|
||||
applyFilters($container, $itemsContainer, activeFilters);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Aplicar filtros via AJAX
|
||||
*/
|
||||
function applyFilters($container, $itemsContainer, filters) {
|
||||
const type = $container.data('type');
|
||||
const widget = $container.data('widget');
|
||||
const upcoming = $container.data('upcoming');
|
||||
const search = $container.find('.bloques-search-input').val() || '';
|
||||
|
||||
// Mostrar loading
|
||||
$itemsContainer.addClass('bloques-loading');
|
||||
|
||||
$.ajax({
|
||||
url: bloquesData.ajaxUrl,
|
||||
type: 'POST',
|
||||
data: {
|
||||
action: 'bloques_filter',
|
||||
nonce: bloquesData.nonce,
|
||||
type: type,
|
||||
iniciativa: filters.iniciativa || '',
|
||||
linea_trabajo: filters.linea_trabajo || '',
|
||||
category: filters.category || '',
|
||||
search: search,
|
||||
widget: widget,
|
||||
upcoming: upcoming
|
||||
},
|
||||
success: function(response) {
|
||||
if (response.success) {
|
||||
$itemsContainer.html(response.data.html);
|
||||
|
||||
// Actualizar contador
|
||||
const $resultsNumber = $container.find('.bloques-results-number');
|
||||
const $resultsLabel = $container.find('.bloques-results-label');
|
||||
|
||||
if ($resultsNumber.length) {
|
||||
$resultsNumber.text(response.data.count);
|
||||
}
|
||||
if ($resultsLabel.length) {
|
||||
$resultsLabel.text(response.data.label);
|
||||
}
|
||||
|
||||
// Ocultar botón "Ver más" cuando hay filtros activos
|
||||
const hasActiveFilters = filters.iniciativa || filters.linea_trabajo || filters.category || search;
|
||||
$container.find('.bloques-load-more-wrapper').toggle(!hasActiveFilters);
|
||||
|
||||
// Resetear offset
|
||||
$container.data('offset', $container.data('limit'));
|
||||
|
||||
// Animar entrada
|
||||
animateItems($itemsContainer);
|
||||
}
|
||||
},
|
||||
error: function() {
|
||||
console.error('Error al filtrar contenido');
|
||||
},
|
||||
complete: function() {
|
||||
$itemsContainer.removeClass('bloques-loading');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Inicializar búsqueda con debounce
|
||||
*/
|
||||
function initSearch() {
|
||||
let searchTimeout;
|
||||
|
||||
$('.bloques-search-input').on('input', function() {
|
||||
const $input = $(this);
|
||||
const $filters = $input.closest('.bloques-filters');
|
||||
const containerId = $filters.data('container');
|
||||
const $container = $('#' + containerId);
|
||||
const $itemsContainer = $container.find('.bloques-items');
|
||||
|
||||
// Obtener filtros activos
|
||||
const activeFilters = {
|
||||
iniciativa: $filters.find('.bloques-filter-btn[data-taxonomy="iniciativa"].active').data('value') || '',
|
||||
linea_trabajo: $filters.find('.bloques-filter-btn[data-taxonomy="linea_trabajo"].active').data('value') || '',
|
||||
category: $filters.find('.bloques-filter-btn[data-taxonomy="category"].active').data('value') || ''
|
||||
};
|
||||
|
||||
// Debounce
|
||||
clearTimeout(searchTimeout);
|
||||
searchTimeout = setTimeout(function() {
|
||||
applyFilters($container, $itemsContainer, activeFilters);
|
||||
}, 300);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Inicializar botón "Ver más"
|
||||
*/
|
||||
function initLoadMore() {
|
||||
$(document).on('click', '.bloques-btn-load-more', function() {
|
||||
const $btn = $(this);
|
||||
const containerId = $btn.data('container');
|
||||
const $container = $('#' + containerId);
|
||||
const $itemsContainer = $container.find('.bloques-items');
|
||||
|
||||
const type = $container.data('type');
|
||||
const widget = $container.data('widget');
|
||||
const limit = parseInt($container.data('limit')) || 9;
|
||||
const offset = parseInt($container.data('offset')) || 0;
|
||||
const total = parseInt($container.data('total')) || 0;
|
||||
const upcoming = $container.data('upcoming');
|
||||
|
||||
// Obtener filtros activos si existen
|
||||
const $filters = $container.find('.bloques-filters');
|
||||
let iniciativa = '';
|
||||
let linea = '';
|
||||
let category = '';
|
||||
|
||||
if ($filters.length) {
|
||||
iniciativa = $filters.find('.bloques-filter-btn[data-taxonomy="iniciativa"].active').data('value') || '';
|
||||
linea = $filters.find('.bloques-filter-btn[data-taxonomy="linea_trabajo"].active').data('value') || '';
|
||||
category = $filters.find('.bloques-filter-btn[data-taxonomy="category"].active').data('value') || '';
|
||||
}
|
||||
|
||||
// Mostrar loading
|
||||
$btn.prop('disabled', true).text('Cargando...');
|
||||
|
||||
$.ajax({
|
||||
url: bloquesData.ajaxUrl,
|
||||
type: 'POST',
|
||||
data: {
|
||||
action: 'bloques_load_more',
|
||||
nonce: bloquesData.nonce,
|
||||
type: type,
|
||||
offset: offset,
|
||||
limit: limit,
|
||||
widget: widget,
|
||||
iniciativa: iniciativa,
|
||||
linea_trabajo: linea,
|
||||
category: category,
|
||||
upcoming: upcoming
|
||||
},
|
||||
success: function(response) {
|
||||
if (response.success) {
|
||||
// Añadir nuevos items
|
||||
$itemsContainer.append(response.data.html);
|
||||
|
||||
// Actualizar offset
|
||||
$container.data('offset', response.data.new_offset);
|
||||
|
||||
// Ocultar botón si no hay más
|
||||
if (!response.data.has_more) {
|
||||
$btn.closest('.bloques-load-more-wrapper').fadeOut();
|
||||
}
|
||||
|
||||
// Animar nuevos items
|
||||
animateItems($itemsContainer.find('.bloques-card:gt(' + (offset - 1) + '), .bloques-item:gt(' + (offset - 1) + ')'));
|
||||
}
|
||||
},
|
||||
error: function() {
|
||||
console.error('Error al cargar más contenido');
|
||||
},
|
||||
complete: function() {
|
||||
$btn.prop('disabled', false).html('Ver más <span class="bloques-arrow">→</span>');
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Animación de entrada para items
|
||||
*/
|
||||
function animateItems($container) {
|
||||
const $items = $container.find('.bloques-card, .bloques-item, .bloques-novedad-item, .bloques-agenda-item');
|
||||
|
||||
$items.each(function(index) {
|
||||
const $item = $(this);
|
||||
$item.css({
|
||||
'opacity': 0,
|
||||
'transform': 'translateY(20px)'
|
||||
});
|
||||
|
||||
setTimeout(function() {
|
||||
$item.css({
|
||||
'opacity': 1,
|
||||
'transform': 'translateY(0)',
|
||||
'transition': 'opacity 0.3s ease, transform 0.3s ease'
|
||||
});
|
||||
}, index * 50);
|
||||
});
|
||||
}
|
||||
|
||||
// Exponer funciones públicas
|
||||
window.BloquesTransicion = {
|
||||
initFilters: initFilters,
|
||||
initLoadMore: initLoadMore,
|
||||
applyFilters: applyFilters,
|
||||
animateItems: animateItems
|
||||
};
|
||||
|
||||
})(jQuery);
|
||||
Reference in New Issue
Block a user