// Función de debounce para optimizar el rendimiento
function debounce(func, wait) {
let timeout;
return function executedFunction(...args) {
const later = () => {
clearTimeout(timeout);
func(...args);
};
clearTimeout(timeout);
timeout = setTimeout(later, wait);
};
}
jQuery(document).ready(function($) {
// Initialize color pickers
$('.color-picker').wpColorPicker({
change: function(event, ui) {
updateStyles();
}
});
// Initialize html2canvas
var script = document.createElement('script');
script.src = 'https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js';
document.head.appendChild(script);
script.onload = function() {
console.log('html2canvas loaded');
$('.download-jpg').prop('disabled', false);
};
// Optimized zoom handling
const handleZoom = debounce(function(target, value) {
const zoomValue = value/100;
const template = $(target).closest('.preview-box').find('.sunset-template');
template.css('transform', `scale(${zoomValue})`);
}, 16);
// Zoom control event listener
$('.zoom-range').on('input', function() {
const value = $(this).val();
$(this).siblings('.zoom-value').text(value + '%');
handleZoom(this, value);
});
// Toggle excerpt position field visibility
$('#cwpai_show_excerpt').on('change', function() {
$('#excerpt_position').toggle(this.checked);
updateStyles();
});
// Update styles function
function updateStyles() {
const lineColor = $('#cwpai_line_color').val();
const lineWidth = $('#cwpai_line_width').val() + 'px';
const marginTop = $('#cwpai_line_margin_top').val() + 'px';
const marginBottom = $('#cwpai_line_margin_bottom').val() + 'px';
const marginLeft = $('#cwpai_line_margin_left').val() + 'px';
const marginRight = $('#cwpai_line_margin_right').val() + 'px';
const categoryTop = $('#cwpai_category_position_top').val() + 'px';
const websiteTop = $('#cwpai_website_position_top').val() + 'px';
const titleTop = $('#cwpai_title_position_top').val() + 'px';
const excerptTop = $('#cwpai_excerpt_position_top').val() + 'px';
const categoryLeft = $('#cwpai_category_position_left').val() + 'px';
const websiteLeft = $('#cwpai_website_position_left').val() + 'px';
const titleLeft = $('#cwpai_title_position_left').val() + 'px';
const titleSize = $('#cwpai_title_font_size').val() + 'px';
const categorySize = $('#cwpai_category_font_size').val() + 'px';
const websiteSize = $('#cwpai_website_font_size').val() + 'px';
// Update visibility states
const showCategory = $('#cwpai_show_category').prop('checked');
const showWebsite = $('#cwpai_show_website').prop('checked');
const showTitle = $('#cwpai_show_title').prop('checked');
const showExcerpt = $('#cwpai_show_excerpt').prop('checked');
$('.vertical-line').css({
'background-color': lineColor,
'width': lineWidth,
'top': marginTop,
'height': `calc(100% - (${marginTop} + ${marginBottom}))`,
'left': marginLeft,
'margin-right': marginRight
});
$('.category-tag').css({
'display': showCategory ? 'block' : 'none',
'top': categoryTop,
'left': categoryLeft,
'font-size': categorySize
});
$('.website-link').css({
'display': showWebsite ? 'block' : 'none',
'top': websiteTop,
'left': websiteLeft,
'font-size': websiteSize
});
$('.title').css({
'display': showTitle ? 'block' : 'none',
'top': titleTop,
'left': titleLeft,
'font-size': titleSize
});
$('.excerpt-preview').css({
'display': showExcerpt ? 'block' : 'none',
'top': excerptTop,
'left': titleLeft
});
}
// Copy buttons functionality with improved feedback
$('.copy-excerpt, .copy-hashtags').on('click', function() {
const button = $(this);
const content = button.data('content');
const originalText = button.text();
// Create temporary textarea
const textarea = document.createElement('textarea');
textarea.value = content;
textarea.style.position = 'absolute';
textarea.style.left = '-9999px';
document.body.appendChild(textarea);
try {
// Select and copy text
textarea.select();
document.execCommand('copy');
// Visual feedback
button.text('¡Copiado!');
button.css('background-color', '#4CAF50');
// Reset button after delay
setTimeout(() => {
button.text(originalText);
button.css('background-color', '');
}, 2000);
} catch(err) {
console.error('Error al copiar:', err);
button.text('Error al copiar');
button.css('background-color', '#f44336');
setTimeout(() => {
button.text(originalText);
button.css('background-color', '');
}, 2000);
} finally {
document.body.removeChild(textarea);
}
});
// Canvas optimization function
function optimizeCanvas(canvas, format) {
const ctx = canvas.getContext('2d');
// Enable image smoothing
ctx.imageSmoothingEnabled = true;
ctx.imageSmoothingQuality = 'high';
// Set dimensions based on format
switch(format) {
case 'rectangular':
canvas.width = 1200;
canvas.height = 630;
break;
case 'vertical':
canvas.width = 500;
canvas.height = 890;
break;
case 'horizontal':
canvas.width = 864;
canvas.height = 864;
break;
}
return canvas;
}
// Image download functionality with improved error handling
$('.download-jpg').on('click', function() {
const button = $(this);
const format = button.data('format');
const template = button.closest('.preview-box').find('.sunset-template')[0];
// Disable button and show loading state
button.text('Generando...').prop('disabled', true);
const options = {
scale: 2, // Higher quality
useCORS: true,
allowTaint: true,
backgroundColor: '#000000',
logging: false, // Disable logging in production
onclone: function(clonedDoc) {
const clonedElement = clonedDoc.querySelector('.sunset-template');
if (clonedElement) {
// Reset zoom for export
clonedElement.style.transform = 'scale(1)';
// Set dimensions based on format
switch(format) {
case 'rectangular':
clonedElement.style.width = '1200px';
clonedElement.style.height = '630px';
break;
case 'vertical':
clonedElement.style.width = '500px';
clonedElement.style.height = '890px';
break;
case 'horizontal':
clonedElement.style.width = '864px';
clonedElement.style.height = '864px';
break;
}
}
}
};
// Wait for all images to load
Promise.all(Array.from(template.getElementsByTagName('img')).map(img => {
return new Promise((resolve, reject) => {
if (img.complete) {
resolve();
} else {
img.onload = resolve;
img.onerror = reject;
}
});
}))
.then(() => {
return html2canvas(template, options);
})
.then(canvas => {
// Optimize canvas
canvas = optimizeCanvas(canvas, format);
// Convert to blob
return new Promise((resolve, reject) => {
canvas.toBlob(resolve, 'image/jpeg', 0.95);
});
})
.then(blob => {
// Generate filename
const postTitle = template.dataset.title;
const timestamp = new Date().getTime();
const fileName = `${postTitle}-${format}-${timestamp}.jpg`;
// Save file
saveAs(blob, fileName);
// Reset button
button.text('Descargar ' + (
format === 'vertical' ? 'Vertical' :
format === 'horizontal' ? 'Horizontal' :
'Rectangular'
)).prop('disabled', false);
})
.catch(error => {
console.error('Error:', error);
button.text('Error - Intentar de nuevo').prop('disabled', false)
.css('background-color', '#f44336');
setTimeout(() => {
button.css('background-color', '');
button.text('Descargar ' + (
format === 'vertical' ? 'Vertical' :
format === 'horizontal' ? 'Horizontal' :
'Rectangular'
));
}, 3000);
});
});
// Line and position controls
$('#cwpai_line_width, #cwpai_line_margin_top, #cwpai_line_margin_bottom, #cwpai_line_margin_left, #cwpai_line_margin_right, #cwpai_category_position_top, #cwpai_website_position_top, #cwpai_title_position_top, #cwpai_excerpt_position_top, #cwpai_category_position_left, #cwpai_website_position_left, #cwpai_title_position_left, #cwpai_title_font_size, #cwpai_category_font_size, #cwpai_website_font_size')
.on('change input', debounce(updateStyles, 100));
// Visibility controls
$('#cwpai_show_category, #cwpai_show_website, #cwpai_show_title, #cwpai_show_excerpt')
.on('change', updateStyles);
// Global error handler
window.onerror = function(msg, url, lineNo, columnNo, error) {
console.error('Error: ', {
message: msg,
url: url,
lineNumber: lineNo,
columnNumber: columnNo,
error: error
});
return false;
};
// Initial styles update
updateStyles();
});
Warning: Cannot modify header information - headers already sent by (output started at /var/www/vhosts/diariocosta.com/httpdocs/wp-content/plugins/social-media-stories/social-media-stories.php:1) in /var/www/vhosts/diariocosta.com/httpdocs/wp-includes/rest-api/class-wp-rest-server.php on line 1893
Warning: Cannot modify header information - headers already sent by (output started at /var/www/vhosts/diariocosta.com/httpdocs/wp-content/plugins/social-media-stories/social-media-stories.php:1) in /var/www/vhosts/diariocosta.com/httpdocs/wp-includes/rest-api/class-wp-rest-server.php on line 1893
Warning: Cannot modify header information - headers already sent by (output started at /var/www/vhosts/diariocosta.com/httpdocs/wp-content/plugins/social-media-stories/social-media-stories.php:1) in /var/www/vhosts/diariocosta.com/httpdocs/wp-includes/rest-api/class-wp-rest-server.php on line 1893
Warning: Cannot modify header information - headers already sent by (output started at /var/www/vhosts/diariocosta.com/httpdocs/wp-content/plugins/social-media-stories/social-media-stories.php:1) in /var/www/vhosts/diariocosta.com/httpdocs/wp-includes/rest-api/class-wp-rest-server.php on line 1893
Warning: Cannot modify header information - headers already sent by (output started at /var/www/vhosts/diariocosta.com/httpdocs/wp-content/plugins/social-media-stories/social-media-stories.php:1) in /var/www/vhosts/diariocosta.com/httpdocs/wp-includes/rest-api/class-wp-rest-server.php on line 1893
Warning: Cannot modify header information - headers already sent by (output started at /var/www/vhosts/diariocosta.com/httpdocs/wp-content/plugins/social-media-stories/social-media-stories.php:1) in /var/www/vhosts/diariocosta.com/httpdocs/wp-includes/rest-api/class-wp-rest-server.php on line 1893
Warning: Cannot modify header information - headers already sent by (output started at /var/www/vhosts/diariocosta.com/httpdocs/wp-content/plugins/social-media-stories/social-media-stories.php:1) in /var/www/vhosts/diariocosta.com/httpdocs/wp-includes/rest-api/class-wp-rest-server.php on line 1893
{"version":"1.0","provider_name":"Diario Costa - Digital de la Costa del Sol","provider_url":"https:\/\/diariocosta.com","author_name":"Redacci\u00f3n","author_url":"https:\/\/diariocosta.com\/author\/antonio\/","title":"Feria de Casares del 1 al 4 de agosto","type":"rich","width":600,"height":338,"html":"Feria de Casares del 1 al 4 de agosto<\/a><\/blockquote>