Ross
1803 lines
84 KiB
JavaScript
1803 lines
84 KiB
JavaScript
// Yoto Up Covers Web App
|
||
class YotoCoversApp {
|
||
constructor() {
|
||
this.images = [];
|
||
this.currentTemplate = 'classic';
|
||
this.currentTitleStyle = 'folded';
|
||
|
||
// Template presets - each defines a set of feature defaults
|
||
this.templates = {
|
||
classic: {
|
||
backgroundStyle: 'solid',
|
||
fontFamily: 'Arial',
|
||
fontWeight: 'normal',
|
||
footerColor: '#666666'
|
||
},
|
||
frozen: {
|
||
backgroundStyle: 'gradient',
|
||
fontFamily: 'Arial',
|
||
fontWeight: 'normal',
|
||
footerColor: '#4a90e2'
|
||
},
|
||
minimal: {
|
||
backgroundStyle: 'solid',
|
||
fontFamily: 'Arial',
|
||
fontWeight: 'normal',
|
||
footerColor: '#999999'
|
||
},
|
||
vintage: {
|
||
backgroundStyle: 'gradient',
|
||
fontFamily: 'Georgia',
|
||
fontWeight: 'normal',
|
||
footerColor: '#654321'
|
||
},
|
||
comic: {
|
||
backgroundStyle: 'comic',
|
||
fontFamily: 'Comic Sans MS',
|
||
fontWeight: 'bold',
|
||
footerColor: '#ff6b6b',
|
||
fullBleed: false,
|
||
panelMode: true,
|
||
titlePanel: { borderWidth: 2, rotation: -2, expand: true },
|
||
imagePanel: { borderWidth: 3, rotation: 1 },
|
||
footerPanel: { borderWidth: 2, rotation: 3 }
|
||
},
|
||
polaroid: {
|
||
backgroundStyle: 'polaroid',
|
||
fontFamily: 'Arial',
|
||
fontWeight: 'normal',
|
||
footerColor: '#666666',
|
||
fullBleed: false,
|
||
showFooter: false,
|
||
imagePosition: 'center'
|
||
}
|
||
};
|
||
|
||
this.printLayout = {
|
||
cardsPerRow: 2,
|
||
cardsPerColumn: 5,
|
||
pageMargin: 10,
|
||
cardSpacing: 5,
|
||
cardFit: 0
|
||
};
|
||
this.templateSettings = {
|
||
title: '',
|
||
footer: '',
|
||
accentColor: '#f1c40f',
|
||
titleColor: '#111111',
|
||
fullBleed: true,
|
||
titleShadow: false,
|
||
titleFontSize: null,
|
||
footerFontSize: null
|
||
};
|
||
|
||
this.previewZoom = {
|
||
level: 1.0,
|
||
min: 0.25,
|
||
max: 3.0,
|
||
step: 0.25
|
||
};
|
||
|
||
this.isFullscreen = false;
|
||
|
||
this.cardVariations = [];
|
||
this.activeCardIndex = -1; // Currently selected card for editing
|
||
this.init();
|
||
}
|
||
|
||
init() {
|
||
this.bindEvents();
|
||
this.updateUI();
|
||
this.updateCardList();
|
||
}
|
||
|
||
bindEvents() {
|
||
// Print layout settings
|
||
document.getElementById('cards-per-row').addEventListener('change', (e) => {
|
||
this.printLayout.cardsPerRow = parseInt(e.target.value);
|
||
this.generatePreview();
|
||
});
|
||
|
||
document.getElementById('cards-per-column').addEventListener('change', (e) => {
|
||
this.printLayout.cardsPerColumn = parseInt(e.target.value);
|
||
this.generatePreview();
|
||
});
|
||
|
||
document.getElementById('page-margin').addEventListener('input', (e) => {
|
||
this.printLayout.pageMargin = parseInt(e.target.value);
|
||
this.generatePreview();
|
||
});
|
||
|
||
document.getElementById('card-spacing').addEventListener('input', (e) => {
|
||
this.printLayout.cardSpacing = parseInt(e.target.value);
|
||
this.generatePreview();
|
||
});
|
||
|
||
document.getElementById('global-card-fit').addEventListener('change', (e) => {
|
||
this.printLayout.cardFit = parseFloat(e.target.value);
|
||
this.generatePreview();
|
||
});
|
||
|
||
// Template settings - REMOVED: Now per-card only
|
||
// document.getElementById('template-select').addEventListener('change', (e) => {
|
||
// this.currentTemplate = e.target.value;
|
||
// this.generatePreview();
|
||
// });
|
||
|
||
// document.getElementById('title-input').addEventListener('input', (e) => {
|
||
// this.templateSettings.title = e.target.value;
|
||
// this.generatePreview();
|
||
// });
|
||
|
||
// document.getElementById('footer-input').addEventListener('input', (e) => {
|
||
// this.templateSettings.footer = e.target.value;
|
||
// this.generatePreview();
|
||
// });
|
||
|
||
// Title style selection - REMOVED: Now per-card only
|
||
// document.querySelectorAll('.title-style-option').forEach(option => {
|
||
// option.addEventListener('click', () => {
|
||
// document.querySelectorAll('.title-style-option').forEach(opt => opt.classList.remove('selected'));
|
||
// option.classList.add('selected');
|
||
// this.currentTitleStyle = option.dataset.style;
|
||
// this.generatePreview();
|
||
// });
|
||
// });
|
||
|
||
// Color pickers - REMOVED: Now per-card only
|
||
// document.getElementById('accent-color').addEventListener('input', (e) => {
|
||
// this.templateSettings.accentColor = e.target.value;
|
||
// document.getElementById('accent-color-text').value = e.target.value;
|
||
// this.generatePreview();
|
||
// });
|
||
|
||
// document.getElementById('title-color').addEventListener('input', (e) => {
|
||
// this.templateSettings.titleColor = e.target.value;
|
||
// document.getElementById('title-color-text').value = e.target.value;
|
||
// this.generatePreview();
|
||
// });
|
||
|
||
// Checkboxes - REMOVED: Now per-card only
|
||
// document.getElementById('full-bleed').addEventListener('change', (e) => {
|
||
// this.templateSettings.fullBleed = e.target.checked;
|
||
// this.generatePreview();
|
||
// });
|
||
|
||
// document.getElementById('title-shadow').addEventListener('change', (e) => {
|
||
// this.templateSettings.titleShadow = e.target.checked;
|
||
// this.generatePreview();
|
||
// });
|
||
|
||
// Image upload
|
||
const imageUpload = document.getElementById('image-upload');
|
||
const fileInputLabel = document.querySelector('.file-input-label');
|
||
|
||
imageUpload.addEventListener('change', (e) => this.handleImageUpload(e.target.files));
|
||
imageUpload.addEventListener('dragover', (e) => {
|
||
e.preventDefault();
|
||
fileInputLabel.classList.add('dragover');
|
||
});
|
||
imageUpload.addEventListener('dragleave', (e) => {
|
||
e.preventDefault();
|
||
fileInputLabel.classList.remove('dragover');
|
||
});
|
||
imageUpload.addEventListener('drop', (e) => {
|
||
e.preventDefault();
|
||
fileInputLabel.classList.remove('dragover');
|
||
this.handleImageUpload(e.dataTransfer.files);
|
||
});
|
||
|
||
// Image management
|
||
document.getElementById('clear-images').addEventListener('click', () => this.clearAllImages());
|
||
|
||
// Actions
|
||
document.getElementById('generate-preview').addEventListener('click', () => this.generatePreview());
|
||
document.getElementById('download-html').addEventListener('click', () => this.downloadHTML());
|
||
document.getElementById('open-preview').addEventListener('click', () => this.openPreviewInNewTab());
|
||
document.getElementById('print-preview').addEventListener('click', () => this.printPreview());
|
||
|
||
// Preview zoom and fullscreen
|
||
document.getElementById('zoom-in').addEventListener('click', () => this.zoomIn());
|
||
document.getElementById('zoom-out').addEventListener('click', () => this.zoomOut());
|
||
document.getElementById('zoom-reset').addEventListener('click', () => this.resetZoom());
|
||
document.getElementById('fullscreen-btn').addEventListener('click', () => this.toggleFullscreen());
|
||
|
||
// ESC key to exit fullscreen
|
||
document.addEventListener('keydown', (e) => {
|
||
if (e.key === 'Escape' && this.isFullscreen) {
|
||
this.toggleFullscreen();
|
||
}
|
||
});
|
||
|
||
// Click on preview container close button area to exit fullscreen
|
||
document.querySelector('.preview-container').addEventListener('click', (e) => {
|
||
if (this.isFullscreen) {
|
||
const rect = e.currentTarget.getBoundingClientRect();
|
||
const closeButtonArea = {
|
||
left: rect.right - 200,
|
||
right: rect.right - 20,
|
||
top: rect.top + 20,
|
||
bottom: rect.top + 60
|
||
};
|
||
if (e.clientX >= closeButtonArea.left && e.clientX <= closeButtonArea.right &&
|
||
e.clientY >= closeButtonArea.top && e.clientY <= closeButtonArea.bottom) {
|
||
this.toggleFullscreen();
|
||
}
|
||
}
|
||
});
|
||
|
||
// Card management
|
||
document.getElementById('add-card').addEventListener('click', () => this.addCardVariation());
|
||
document.getElementById('active-card-select').addEventListener('change', (e) => {
|
||
const index = parseInt(e.target.value);
|
||
if (index >= 0) {
|
||
this.selectCard(index);
|
||
} else {
|
||
this.activeCardIndex = -1;
|
||
this.updateCardList();
|
||
this.showCardEditor();
|
||
}
|
||
});
|
||
document.getElementById('update-card').addEventListener('click', () => this.updateActiveCard());
|
||
document.getElementById('delete-card').addEventListener('click', () => this.deleteActiveCard());
|
||
|
||
// Card editor auto-update
|
||
document.getElementById('card-title-input').addEventListener('input', () => this.updateActiveCard());
|
||
document.getElementById('card-footer-input').addEventListener('input', () => this.updateActiveCard());
|
||
document.getElementById('card-template-preset').addEventListener('change', (e) => {
|
||
const templateName = e.target.value;
|
||
if (templateName) {
|
||
this.applyTemplatePreset(templateName);
|
||
}
|
||
});
|
||
document.getElementById('card-background-style').addEventListener('change', () => this.updateActiveCard());
|
||
document.getElementById('card-font-family').addEventListener('change', () => this.updateActiveCard());
|
||
document.getElementById('card-font-weight').addEventListener('change', () => this.updateActiveCard());
|
||
document.getElementById('card-accent-color').addEventListener('input', (e) => {
|
||
document.getElementById('card-accent-color-text').value = e.target.value;
|
||
this.updateActiveCard();
|
||
});
|
||
document.getElementById('card-title-color').addEventListener('input', (e) => {
|
||
document.getElementById('card-title-color-text').value = e.target.value;
|
||
this.updateActiveCard();
|
||
});
|
||
document.getElementById('card-footer-color').addEventListener('input', (e) => {
|
||
document.getElementById('card-footer-color-text').value = e.target.value;
|
||
this.updateActiveCard();
|
||
});
|
||
document.getElementById('card-full-bleed').addEventListener('change', () => this.updateActiveCard());
|
||
document.getElementById('card-show-accent').addEventListener('change', (e) => {
|
||
const accentGroup = document.getElementById('accent-color-group');
|
||
accentGroup.style.display = e.target.checked ? 'block' : 'none';
|
||
this.updateActiveCard();
|
||
});
|
||
document.getElementById('card-title-shadow').addEventListener('change', () => this.updateActiveCard());
|
||
document.getElementById('card-show-title').addEventListener('change', () => {
|
||
this.updateActiveCard();
|
||
this.updateSectionVisibility();
|
||
});
|
||
document.getElementById('card-show-footer').addEventListener('change', () => {
|
||
this.updateActiveCard();
|
||
this.updateSectionVisibility();
|
||
});
|
||
document.getElementById('card-title-font-size').addEventListener('input', () => this.updateActiveCard());
|
||
document.getElementById('card-title-x').addEventListener('input', () => this.updateActiveCard());
|
||
document.getElementById('card-title-y').addEventListener('input', () => this.updateActiveCard());
|
||
document.getElementById('card-title-draggable').addEventListener('change', () => this.updateActiveCard());
|
||
document.getElementById('card-footer-font-size').addEventListener('input', () => this.updateActiveCard());
|
||
document.getElementById('card-footer-x').addEventListener('input', () => this.updateActiveCard());
|
||
document.getElementById('card-footer-y').addEventListener('input', () => this.updateActiveCard());
|
||
document.getElementById('card-footer-draggable').addEventListener('change', () => this.updateActiveCard());
|
||
document.getElementById('card-image-fit').addEventListener('change', () => this.updateActiveCard());
|
||
document.getElementById('card-image-position').addEventListener('change', () => this.updateActiveCard());
|
||
document.getElementById('card-image-select').addEventListener('change', () => this.updateActiveCard());
|
||
|
||
// Panel settings
|
||
document.getElementById('card-panel-mode').addEventListener('change', () => {
|
||
this.updateActiveCard();
|
||
this.updateSectionVisibility();
|
||
});
|
||
document.getElementById('card-title-panel-border').addEventListener('input', () => this.updateActiveCard());
|
||
document.getElementById('card-title-panel-rotation').addEventListener('input', () => this.updateActiveCard());
|
||
document.getElementById('card-title-panel-expand').addEventListener('change', () => this.updateActiveCard());
|
||
document.getElementById('card-image-panel-border').addEventListener('input', () => this.updateActiveCard());
|
||
document.getElementById('card-image-panel-rotation').addEventListener('input', () => this.updateActiveCard());
|
||
document.getElementById('card-footer-panel-border').addEventListener('input', () => this.updateActiveCard());
|
||
document.getElementById('card-footer-panel-rotation').addEventListener('input', () => this.updateActiveCard());
|
||
|
||
// Title style selection auto-update
|
||
document.querySelectorAll('.title-style-option').forEach(option => {
|
||
option.addEventListener('click', () => {
|
||
document.querySelectorAll('.title-style-option').forEach(opt => opt.classList.remove('selected'));
|
||
option.classList.add('selected');
|
||
this.updateActiveCard();
|
||
});
|
||
});
|
||
|
||
// Global title font size
|
||
// document.getElementById('global-title-font-size').addEventListener('input', (e) => {
|
||
// this.globalTitleFontSize = parseInt(e.target.value);
|
||
// this.generatePreview();
|
||
// });
|
||
|
||
// Mobile toggles
|
||
document.getElementById('toggle-settings').addEventListener('click', () => {
|
||
const panel = document.querySelector('.settings-panel');
|
||
panel.style.display = panel.style.display === 'none' ? 'block' : 'none';
|
||
});
|
||
|
||
document.getElementById('toggle-editor').addEventListener('click', () => {
|
||
const panel = document.querySelector('.edit-panel');
|
||
panel.style.display = panel.style.display === 'none' ? 'block' : 'none';
|
||
});
|
||
|
||
// Section header click handlers for collapsing/expanding
|
||
document.querySelectorAll('.config-section h4').forEach(header => {
|
||
header.addEventListener('click', () => {
|
||
const section = header.parentElement;
|
||
section.classList.toggle('collapsed');
|
||
});
|
||
});
|
||
}
|
||
|
||
async handleImageUpload(files) {
|
||
const initialImageCount = this.images.length;
|
||
|
||
for (const file of files) {
|
||
if (file.type.startsWith('image/')) {
|
||
try {
|
||
const imageData = await this.readFileAsDataURL(file);
|
||
const coverImage = new CoverImage(file.name, imageData);
|
||
this.images.push(coverImage);
|
||
|
||
// Automatically create a card variation for this image
|
||
const variation = {
|
||
title: '',
|
||
footer: '',
|
||
imageIndex: this.images.length - 1, // Use the index of the newly added image
|
||
template: this.currentTemplate
|
||
};
|
||
this.cardVariations.push(variation);
|
||
|
||
} catch (error) {
|
||
this.showStatusMessage(`Error loading ${file.name}: ${error.message}`, 'error');
|
||
}
|
||
}
|
||
}
|
||
|
||
// If no images were uploaded before and we now have images, remove the default single card
|
||
if (initialImageCount === 0 && this.images.length > 0 && this.cardVariations.length === 1 &&
|
||
!this.cardVariations[0].title && !this.cardVariations[0].footer && this.cardVariations[0].imageIndex === -1) {
|
||
this.cardVariations = []; // Clear the default empty variation
|
||
}
|
||
|
||
this.updateImageList();
|
||
this.updateCardList();
|
||
this.generatePreview();
|
||
}
|
||
|
||
readFileAsDataURL(file) {
|
||
return new Promise((resolve, reject) => {
|
||
const reader = new FileReader();
|
||
reader.onload = () => resolve(reader.result);
|
||
reader.onerror = () => reject(new Error('Failed to read file'));
|
||
reader.readAsDataURL(file);
|
||
});
|
||
}
|
||
|
||
updateImageList() {
|
||
const imageList = document.getElementById('image-list');
|
||
imageList.innerHTML = '';
|
||
|
||
this.images.forEach((image, index) => {
|
||
const item = document.createElement('div');
|
||
item.className = 'image-item';
|
||
item.innerHTML = `
|
||
<div class="image-info">
|
||
<div class="image-name">${image.name}</div>
|
||
<div class="image-meta">${image.width || 0} × ${image.height || 0}px</div>
|
||
</div>
|
||
<div class="image-actions">
|
||
<button class="btn btn-danger" onclick="app.removeImage(${index})">×</button>
|
||
</div>
|
||
`;
|
||
imageList.appendChild(item);
|
||
});
|
||
}
|
||
|
||
removeImage(index) {
|
||
this.images.splice(index, 1);
|
||
this.updateImageList();
|
||
this.updateCardList();
|
||
this.generatePreview();
|
||
}
|
||
|
||
clearAllImages() {
|
||
this.images = [];
|
||
this.updateImageList();
|
||
this.updateCardList();
|
||
this.generatePreview();
|
||
}
|
||
|
||
applyTemplatePreset(templateName) {
|
||
if (!this.templates[templateName]) return;
|
||
|
||
const preset = this.templates[templateName];
|
||
document.getElementById('card-background-style').value = preset.backgroundStyle;
|
||
document.getElementById('card-font-family').value = preset.fontFamily;
|
||
document.getElementById('card-font-weight').value = preset.fontWeight;
|
||
document.getElementById('card-footer-color').value = preset.footerColor;
|
||
document.getElementById('card-footer-color-text').value = preset.footerColor;
|
||
|
||
// Set additional properties if defined in preset
|
||
if (preset.fullBleed !== undefined) {
|
||
document.getElementById('card-full-bleed').checked = preset.fullBleed;
|
||
}
|
||
if (preset.showFooter !== undefined) {
|
||
document.getElementById('card-show-footer').checked = preset.showFooter;
|
||
}
|
||
if (preset.imagePosition !== undefined) {
|
||
document.getElementById('card-image-position').value = preset.imagePosition;
|
||
}
|
||
|
||
// Set panel properties if defined in preset
|
||
document.getElementById('card-panel-mode').checked = preset.panelMode === true;
|
||
if (preset.titlePanel !== undefined) {
|
||
document.getElementById('card-title-panel-border').value = preset.titlePanel.borderWidth;
|
||
document.getElementById('card-title-panel-rotation').value = preset.titlePanel.rotation;
|
||
document.getElementById('card-title-panel-expand').checked = preset.titlePanel.expand;
|
||
}
|
||
if (preset.imagePanel !== undefined) {
|
||
document.getElementById('card-image-panel-border').value = preset.imagePanel.borderWidth;
|
||
document.getElementById('card-image-panel-rotation').value = preset.imagePanel.rotation;
|
||
}
|
||
if (preset.footerPanel !== undefined) {
|
||
document.getElementById('card-footer-panel-border').value = preset.footerPanel.borderWidth;
|
||
document.getElementById('card-footer-panel-rotation').value = preset.footerPanel.rotation;
|
||
}
|
||
|
||
this.updateActiveCard();
|
||
}
|
||
|
||
addCardVariation() {
|
||
const variation = {
|
||
title: '',
|
||
footer: '',
|
||
imageIndex: -1,
|
||
backgroundStyle: 'solid',
|
||
fontFamily: 'Arial',
|
||
fontWeight: 'normal',
|
||
footerColor: '#111111',
|
||
titleStyle: 'classic',
|
||
accentColor: '#f1c40f',
|
||
showAccent: false,
|
||
titleColor: '#111111',
|
||
fullBleed: true,
|
||
titleShadow: false,
|
||
showTitle: true,
|
||
showFooter: true,
|
||
imageFit: 'cover',
|
||
imagePosition: 'center',
|
||
titleFontSize: 20,
|
||
footerFontSize: 12,
|
||
titleX: 50,
|
||
titleY: 20,
|
||
footerX: 50,
|
||
footerY: 90,
|
||
titleDraggable: false,
|
||
footerDraggable: false,
|
||
panelMode: false,
|
||
titlePanel: { borderWidth: 0, rotation: 0, expand: false },
|
||
imagePanel: { borderWidth: 0, rotation: 0 },
|
||
footerPanel: { borderWidth: 0, rotation: 0 }
|
||
};
|
||
this.cardVariations.push(variation);
|
||
this.updateCardList();
|
||
this.generatePreview();
|
||
}
|
||
|
||
updateCardVariation(index, field, value) {
|
||
this.cardVariations[index][field] = value;
|
||
this.generatePreview();
|
||
}
|
||
|
||
removeCardVariation(index) {
|
||
this.cardVariations.splice(index, 1);
|
||
this.updateCardVariations();
|
||
this.generatePreview();
|
||
}
|
||
|
||
updateCardVariations() {
|
||
// This method is now replaced by updateCardList
|
||
this.updateCardList();
|
||
}
|
||
|
||
updateCardList() {
|
||
const container = document.getElementById('card-list');
|
||
container.innerHTML = '';
|
||
|
||
if (this.cardVariations.length === 0) {
|
||
container.innerHTML = '<p style="color: #999999; text-align: center; padding: 20px;">No cards yet. Upload images or click "Add Card".</p>';
|
||
return;
|
||
}
|
||
|
||
this.cardVariations.forEach((variation, index) => {
|
||
const cardItem = document.createElement('div');
|
||
cardItem.className = `card-list-item ${index === this.activeCardIndex ? 'active' : ''}`;
|
||
cardItem.onclick = () => this.selectCard(index);
|
||
cardItem.innerHTML = `
|
||
<div style="display: flex; align-items: center; justify-content: space-between;">
|
||
<div>
|
||
<strong>Card ${index + 1}</strong>
|
||
<span style="color: #666666; margin-left: 10px;">
|
||
${variation.title || 'No title'} •
|
||
${(() => {
|
||
for (const [presetName, preset] of Object.entries(this.templates)) {
|
||
if (variation.backgroundStyle === preset.backgroundStyle &&
|
||
variation.fontFamily === preset.fontFamily &&
|
||
variation.fontWeight === preset.fontWeight &&
|
||
variation.footerColor === preset.footerColor) {
|
||
return presetName;
|
||
}
|
||
}
|
||
return 'Custom';
|
||
})()} •
|
||
${variation.imageIndex >= 0 ? `Image ${variation.imageIndex + 1}` : 'Default image'}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
`;
|
||
container.appendChild(cardItem);
|
||
});
|
||
|
||
this.updateActiveCardSelector();
|
||
}
|
||
|
||
updateActiveCardSelector() {
|
||
const selector = document.getElementById('active-card-select');
|
||
selector.innerHTML = '<option value="-1">No card selected</option>';
|
||
|
||
this.cardVariations.forEach((variation, index) => {
|
||
const option = document.createElement('option');
|
||
option.value = index;
|
||
option.textContent = `Card ${index + 1}: ${variation.title || 'Untitled'}`;
|
||
if (index === this.activeCardIndex) option.selected = true;
|
||
selector.appendChild(option);
|
||
});
|
||
}
|
||
|
||
selectCard(index) {
|
||
this.activeCardIndex = index;
|
||
this.updateCardList();
|
||
this.showCardEditor();
|
||
}
|
||
|
||
selectCardFromPreview(index) {
|
||
// Called from iframe when clicking on a card in the preview
|
||
this.selectCard(index);
|
||
}
|
||
|
||
showCardEditor() {
|
||
const editor = document.getElementById('card-editor');
|
||
if (this.activeCardIndex === -1) {
|
||
editor.style.display = 'none';
|
||
return;
|
||
}
|
||
|
||
const variation = this.cardVariations[this.activeCardIndex];
|
||
if (!variation) return;
|
||
|
||
// Populate card settings
|
||
document.getElementById('card-editor-title').textContent = `Edit Card ${this.activeCardIndex + 1}`;
|
||
|
||
// Set template preset (detect which preset matches current features)
|
||
let matchingPreset = '';
|
||
for (const [presetName, preset] of Object.entries(this.templates)) {
|
||
let matches = variation.backgroundStyle === preset.backgroundStyle &&
|
||
variation.fontFamily === preset.fontFamily &&
|
||
variation.fontWeight === preset.fontWeight &&
|
||
variation.footerColor === preset.footerColor;
|
||
|
||
// Check additional properties if defined in preset
|
||
if (preset.fullBleed !== undefined && variation.fullBleed !== preset.fullBleed) matches = false;
|
||
if (preset.showFooter !== undefined && variation.showFooter !== preset.showFooter) matches = false;
|
||
if (preset.imagePosition !== undefined && variation.imagePosition !== preset.imagePosition) matches = false;
|
||
if (preset.panelMode !== undefined && variation.panelMode !== preset.panelMode) matches = false;
|
||
if (preset.titlePanel !== undefined) {
|
||
if (variation.titlePanel?.borderWidth !== preset.titlePanel.borderWidth ||
|
||
variation.titlePanel?.rotation !== preset.titlePanel.rotation ||
|
||
variation.titlePanel?.expand !== preset.titlePanel.expand) matches = false;
|
||
}
|
||
if (preset.imagePanel !== undefined) {
|
||
if (variation.imagePanel?.borderWidth !== preset.imagePanel.borderWidth ||
|
||
variation.imagePanel?.rotation !== preset.imagePanel.rotation) matches = false;
|
||
}
|
||
if (preset.footerPanel !== undefined) {
|
||
if (variation.footerPanel?.borderWidth !== preset.footerPanel.borderWidth ||
|
||
variation.footerPanel?.rotation !== preset.footerPanel.rotation) matches = false;
|
||
}
|
||
|
||
if (matches) {
|
||
matchingPreset = presetName;
|
||
break;
|
||
}
|
||
}
|
||
document.getElementById('card-template-preset').value = matchingPreset;
|
||
|
||
// Set individual features
|
||
document.getElementById('card-background-style').value = variation.backgroundStyle || 'solid';
|
||
document.getElementById('card-font-family').value = variation.fontFamily || 'Arial';
|
||
document.getElementById('card-font-weight').value = variation.fontWeight || 'normal';
|
||
document.getElementById('card-footer-color').value = variation.footerColor || '#111111';
|
||
document.getElementById('card-footer-color-text').value = variation.footerColor || '#111111';
|
||
|
||
// Set title
|
||
document.getElementById('card-title-input').value = variation.title || '';
|
||
|
||
// Set footer
|
||
document.getElementById('card-footer-input').value = variation.footer || '';
|
||
|
||
// Set title style
|
||
document.querySelectorAll('.title-style-option').forEach(option => {
|
||
option.classList.toggle('selected', option.dataset.style === (variation.titleStyle || 'classic'));
|
||
});
|
||
|
||
// Set colors
|
||
document.getElementById('card-accent-color').value = variation.accentColor || '#f1c40f';
|
||
document.getElementById('card-accent-color-text').value = variation.accentColor || '#f1c40f';
|
||
document.getElementById('card-show-accent').checked = variation.showAccent === true;
|
||
const accentGroup = document.getElementById('accent-color-group');
|
||
accentGroup.style.display = variation.showAccent ? 'block' : 'none';
|
||
document.getElementById('card-title-color').value = variation.titleColor || '#111111';
|
||
document.getElementById('card-title-color-text').value = variation.titleColor || '#111111';
|
||
|
||
// Set checkboxes
|
||
document.getElementById('card-full-bleed').checked = variation.fullBleed !== false;
|
||
document.getElementById('card-title-shadow').checked = variation.titleShadow === true;
|
||
document.getElementById('card-show-title').checked = variation.showTitle !== false;
|
||
document.getElementById('card-show-footer').checked = variation.showFooter !== false;
|
||
|
||
// Set title options
|
||
document.getElementById('card-title-font-size').value = variation.titleFontSize || 20;
|
||
document.getElementById('card-title-x').value = variation.titleX !== undefined ? variation.titleX : 50;
|
||
document.getElementById('card-title-y').value = variation.titleY !== undefined ? variation.titleY : 20;
|
||
document.getElementById('card-title-draggable').checked = variation.titleDraggable === true;
|
||
|
||
// Set footer options
|
||
document.getElementById('card-footer-font-size').value = variation.footerFontSize || 12;
|
||
document.getElementById('card-footer-x').value = variation.footerX !== undefined ? variation.footerX : 50;
|
||
document.getElementById('card-footer-y').value = variation.footerY !== undefined ? variation.footerY : 90;
|
||
document.getElementById('card-footer-draggable').checked = variation.footerDraggable === true;
|
||
|
||
// Set image options
|
||
document.getElementById('card-image-fit').value = variation.imageFit || 'cover';
|
||
document.getElementById('card-image-position').value = variation.imagePosition || 'center';
|
||
|
||
// Set panel options
|
||
document.getElementById('card-panel-mode').checked = variation.panelMode === true;
|
||
document.getElementById('card-title-panel-border').value = variation.titlePanel?.borderWidth || 0;
|
||
document.getElementById('card-title-panel-rotation').value = variation.titlePanel?.rotation || 0;
|
||
document.getElementById('card-title-panel-expand').checked = variation.titlePanel?.expand === true;
|
||
document.getElementById('card-image-panel-border').value = variation.imagePanel?.borderWidth || 0;
|
||
document.getElementById('card-image-panel-rotation').value = variation.imagePanel?.rotation || 0;
|
||
document.getElementById('card-footer-panel-border').value = variation.footerPanel?.borderWidth || 0;
|
||
document.getElementById('card-footer-panel-rotation').value = variation.footerPanel?.rotation || 0;
|
||
|
||
// Set card fit
|
||
document.getElementById('card-fit').value = variation.cardFit !== undefined ? variation.cardFit : '';
|
||
|
||
// Populate image options
|
||
const imageSelect = document.getElementById('card-image-select');
|
||
imageSelect.innerHTML = '<option value="-1">Use default image</option>';
|
||
this.images.forEach((img, imgIndex) => {
|
||
const option = document.createElement('option');
|
||
option.value = imgIndex;
|
||
option.textContent = img.name;
|
||
if (variation.imageIndex === imgIndex) option.selected = true;
|
||
imageSelect.appendChild(option);
|
||
});
|
||
|
||
editor.style.display = 'block';
|
||
|
||
// Update section visibility based on show/hide toggles
|
||
this.updateSectionVisibility();
|
||
}
|
||
|
||
updateSectionVisibility() {
|
||
const showTitle = document.getElementById('card-show-title').checked;
|
||
const showFooter = document.getElementById('card-show-footer').checked;
|
||
const panelMode = document.getElementById('card-panel-mode').checked;
|
||
|
||
const titleSection = document.getElementById('title-section');
|
||
const footerSection = document.getElementById('footer-section');
|
||
const panelSection = document.getElementById('panel-section');
|
||
|
||
if (showTitle) {
|
||
titleSection.classList.remove('collapsed');
|
||
} else {
|
||
titleSection.classList.add('collapsed');
|
||
}
|
||
|
||
if (showFooter) {
|
||
footerSection.classList.remove('collapsed');
|
||
} else {
|
||
footerSection.classList.add('collapsed');
|
||
}
|
||
|
||
if (panelMode) {
|
||
panelSection.classList.remove('collapsed');
|
||
} else {
|
||
panelSection.classList.add('collapsed');
|
||
}
|
||
}
|
||
|
||
initDragFunctionality() {
|
||
console.log('initDragFunctionality called');
|
||
// This will be called when the preview iframe loads
|
||
const iframe = document.getElementById('preview-iframe');
|
||
if (!iframe) {
|
||
console.log('No iframe found');
|
||
return;
|
||
}
|
||
|
||
const initializeDrag = () => {
|
||
console.log('initializeDrag called');
|
||
try {
|
||
const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
|
||
if (!iframeDoc) {
|
||
console.log('No iframe document');
|
||
return;
|
||
}
|
||
const titles = iframeDoc.querySelectorAll('.title, .comic-title-panel');
|
||
console.log('Found titles:', titles.length);
|
||
|
||
titles.forEach((title, index) => {
|
||
console.log(`Title ${index} cursor:`, title.style.cursor);
|
||
// Only make draggable if cursor is set to 'move' and not a comic panel
|
||
if (title.style.cursor !== 'move' || title.classList.contains('comic-title-panel')) {
|
||
console.log(`Title ${index} not draggable, skipping`);
|
||
return;
|
||
}
|
||
|
||
let isDragging = false;
|
||
let startX, startY, initialLeft, initialTop;
|
||
|
||
title.addEventListener('mousedown', (e) => {
|
||
console.log('Title mousedown fired');
|
||
if (title.style.cursor !== 'move') return;
|
||
|
||
isDragging = true;
|
||
|
||
// Get iframe position and convert mouse coordinates to iframe-relative
|
||
const iframeRect = iframe.getBoundingClientRect();
|
||
startX = e.clientX - iframeRect.left;
|
||
startY = e.clientY - iframeRect.top;
|
||
|
||
// Store initial position
|
||
initialLeft = parseFloat(title.style.left) || 50;
|
||
initialTop = parseFloat(title.style.top) || 20;
|
||
|
||
title.style.zIndex = '1000';
|
||
title.style.userSelect = 'none';
|
||
e.preventDefault();
|
||
});
|
||
|
||
const handleMouseMove = (e) => {
|
||
if (!isDragging) return;
|
||
|
||
// Get iframe position in main document
|
||
const iframeRect = iframe.getBoundingClientRect();
|
||
|
||
// Convert mouse coordinates to be relative to iframe viewport
|
||
const mouseX = e.clientX - iframeRect.left;
|
||
const mouseY = e.clientY - iframeRect.top;
|
||
|
||
const card = title.closest('.card');
|
||
const cardRect = card.getBoundingClientRect();
|
||
|
||
// Convert card position to be relative to iframe
|
||
const cardLeftRelative = cardRect.left - iframeRect.left;
|
||
const cardTopRelative = cardRect.top - iframeRect.top;
|
||
|
||
// Calculate mouse position relative to the card (within iframe)
|
||
const relativeMouseX = mouseX - cardLeftRelative;
|
||
const relativeMouseY = mouseY - cardTopRelative;
|
||
|
||
// Convert to percentage
|
||
const newLeft = Math.max(0, Math.min(100, (relativeMouseX / cardRect.width) * 100));
|
||
const newTop = Math.max(0, Math.min(100, (relativeMouseY / cardRect.height) * 100));
|
||
|
||
console.log('Drag debug:', { mouseX, mouseY, iframeRect, cardRect, cardLeftRelative, cardTopRelative, relativeMouseX, relativeMouseY, newLeft, newTop });
|
||
|
||
title.style.left = `${newLeft}%`;
|
||
title.style.top = `${newTop}%`;
|
||
|
||
console.log('Title style set to:', title.style.left, title.style.top);
|
||
|
||
// Update the form values if this card is currently selected
|
||
const cardIndex = parseInt(card.getAttribute('data-card-index'));
|
||
if (cardIndex === this.activeCardIndex && this.cardVariations[cardIndex]) {
|
||
document.getElementById('card-title-x').value = Math.round(newLeft);
|
||
document.getElementById('card-title-y').value = Math.round(newTop);
|
||
|
||
// Update the variation data
|
||
this.cardVariations[cardIndex].titleX = Math.round(newLeft);
|
||
this.cardVariations[cardIndex].titleY = Math.round(newTop);
|
||
}
|
||
};
|
||
|
||
const handleMouseUp = () => {
|
||
if (isDragging) {
|
||
isDragging = false;
|
||
title.style.zIndex = '';
|
||
title.style.userSelect = '';
|
||
}
|
||
};
|
||
|
||
// Add event listeners to both iframe document and main document
|
||
// to handle mouse events that might occur outside the iframe
|
||
iframeDoc.addEventListener('mousemove', handleMouseMove);
|
||
iframeDoc.addEventListener('mouseup', handleMouseUp);
|
||
document.addEventListener('mousemove', handleMouseMove);
|
||
document.addEventListener('mouseup', handleMouseUp);
|
||
});
|
||
|
||
// Initialize footer drag functionality
|
||
const footers = iframeDoc.querySelectorAll('.footer, .comic-footer-panel');
|
||
console.log('Found footers:', footers.length);
|
||
|
||
footers.forEach((footer, index) => {
|
||
console.log(`Footer ${index} cursor:`, footer.style.cursor);
|
||
// Only make draggable if cursor is set to 'move' and not a comic panel
|
||
if (footer.style.cursor !== 'move' || footer.classList.contains('comic-footer-panel')) {
|
||
console.log(`Footer ${index} not draggable, skipping`);
|
||
return;
|
||
}
|
||
|
||
let isDragging = false;
|
||
let startX, startY, initialLeft, initialBottom;
|
||
|
||
footer.addEventListener('mousedown', (e) => {
|
||
console.log('Footer mousedown fired');
|
||
if (footer.style.cursor !== 'move') return;
|
||
|
||
isDragging = true;
|
||
|
||
// Get iframe position and convert mouse coordinates to iframe-relative
|
||
const iframeRect = iframe.getBoundingClientRect();
|
||
startX = e.clientX - iframeRect.left;
|
||
startY = e.clientY - iframeRect.top;
|
||
|
||
// Store initial position
|
||
initialLeft = parseFloat(footer.style.left) || 50;
|
||
initialBottom = parseFloat(footer.style.bottom) || 10;
|
||
|
||
footer.style.zIndex = '1000';
|
||
footer.style.userSelect = 'none';
|
||
e.preventDefault();
|
||
});
|
||
|
||
const handleMouseMove = (e) => {
|
||
if (!isDragging) return;
|
||
|
||
// Get iframe position in main document
|
||
const iframeRect = iframe.getBoundingClientRect();
|
||
|
||
// Convert mouse coordinates to be relative to iframe viewport
|
||
const mouseX = e.clientX - iframeRect.left;
|
||
const mouseY = e.clientY - iframeRect.top;
|
||
|
||
const card = footer.closest('.card');
|
||
const cardRect = card.getBoundingClientRect();
|
||
|
||
// Calculate new position as percentage
|
||
const deltaX = mouseX - startX;
|
||
const deltaY = mouseY - startY;
|
||
|
||
const newLeftPercent = Math.max(0, Math.min(100, initialLeft + (deltaX / cardRect.width) * 100));
|
||
const newBottomPercent = Math.max(0, Math.min(100, initialBottom - (deltaY / cardRect.height) * 100));
|
||
|
||
footer.style.left = `${newLeftPercent}%`;
|
||
footer.style.bottom = `${newBottomPercent}%`;
|
||
|
||
// Update the card data
|
||
const cardIndex = Array.from(card.parentElement.children).indexOf(card);
|
||
if (this.cardVariations[cardIndex]) {
|
||
this.cardVariations[cardIndex].footerX = Math.round(newLeftPercent);
|
||
this.cardVariations[cardIndex].footerY = Math.round(100 - newBottomPercent);
|
||
this.updateUI();
|
||
}
|
||
};
|
||
|
||
const handleMouseUp = () => {
|
||
if (isDragging) {
|
||
isDragging = false;
|
||
footer.style.zIndex = '';
|
||
footer.style.userSelect = '';
|
||
}
|
||
};
|
||
|
||
// Add event listeners to both iframe document and main document
|
||
// to handle mouse events that might occur outside the iframe
|
||
iframeDoc.addEventListener('mousemove', handleMouseMove);
|
||
iframeDoc.addEventListener('mouseup', handleMouseUp);
|
||
document.addEventListener('mousemove', handleMouseMove);
|
||
document.addEventListener('mouseup', handleMouseUp);
|
||
});
|
||
} catch (e) {
|
||
// Ignore cross-origin errors
|
||
console.log('Drag functionality initialization failed:', e);
|
||
}
|
||
};
|
||
|
||
// Try to initialize immediately if the iframe is already loaded
|
||
if (iframe.contentDocument && (iframe.contentDocument.readyState === 'complete' || iframe.contentDocument.readyState === 'interactive')) {
|
||
console.log('Iframe already loaded, initializing immediately');
|
||
initializeDrag();
|
||
} else {
|
||
console.log('Setting iframe onload');
|
||
iframe.onload = () => {
|
||
console.log('iframe onload fired');
|
||
initializeDrag();
|
||
};
|
||
}
|
||
}
|
||
|
||
updateActiveCard() {
|
||
if (this.activeCardIndex === -1) return;
|
||
|
||
const variation = this.cardVariations[this.activeCardIndex];
|
||
variation.backgroundStyle = document.getElementById('card-background-style').value;
|
||
variation.fontFamily = document.getElementById('card-font-family').value;
|
||
variation.fontWeight = document.getElementById('card-font-weight').value;
|
||
variation.footerColor = document.getElementById('card-footer-color').value;
|
||
variation.title = document.getElementById('card-title-input').value;
|
||
variation.footer = document.getElementById('card-footer-input').value;
|
||
variation.titleStyle = document.querySelector('.title-style-option.selected')?.dataset.style || 'classic';
|
||
variation.accentColor = document.getElementById('card-accent-color').value;
|
||
variation.showAccent = document.getElementById('card-show-accent').checked;
|
||
variation.titleColor = document.getElementById('card-title-color').value;
|
||
variation.fullBleed = document.getElementById('card-full-bleed').checked;
|
||
variation.titleShadow = document.getElementById('card-title-shadow').checked;
|
||
variation.showTitle = document.getElementById('card-show-title').checked;
|
||
variation.showFooter = document.getElementById('card-show-footer').checked;
|
||
variation.titleFontSize = parseInt(document.getElementById('card-title-font-size').value);
|
||
variation.titleX = parseInt(document.getElementById('card-title-x').value);
|
||
variation.titleY = parseInt(document.getElementById('card-title-y').value);
|
||
variation.titleDraggable = document.getElementById('card-title-draggable').checked;
|
||
variation.footerFontSize = parseInt(document.getElementById('card-footer-font-size').value);
|
||
variation.footerX = parseInt(document.getElementById('card-footer-x').value);
|
||
variation.footerY = parseInt(document.getElementById('card-footer-y').value);
|
||
variation.footerDraggable = document.getElementById('card-footer-draggable').checked;
|
||
variation.imageFit = document.getElementById('card-image-fit').value;
|
||
variation.imagePosition = document.getElementById('card-image-position').value;
|
||
variation.imageIndex = parseInt(document.getElementById('card-image-select').value);
|
||
|
||
// Panel settings
|
||
variation.panelMode = document.getElementById('card-panel-mode').checked;
|
||
variation.titlePanel = {
|
||
borderWidth: parseInt(document.getElementById('card-title-panel-border').value),
|
||
rotation: parseInt(document.getElementById('card-title-panel-rotation').value),
|
||
expand: document.getElementById('card-title-panel-expand').checked
|
||
};
|
||
variation.imagePanel = {
|
||
borderWidth: parseInt(document.getElementById('card-image-panel-border').value),
|
||
rotation: parseInt(document.getElementById('card-image-panel-rotation').value)
|
||
};
|
||
variation.footerPanel = {
|
||
borderWidth: parseInt(document.getElementById('card-footer-panel-border').value),
|
||
rotation: parseInt(document.getElementById('card-footer-panel-rotation').value)
|
||
};
|
||
|
||
// Update card fit
|
||
const cardFitValue = document.getElementById('card-fit').value;
|
||
if (cardFitValue === '') {
|
||
delete variation.cardFit;
|
||
} else {
|
||
variation.cardFit = parseFloat(cardFitValue);
|
||
}
|
||
|
||
this.updateCardList();
|
||
this.generatePreview();
|
||
}
|
||
|
||
deleteActiveCard() {
|
||
if (this.activeCardIndex === -1) return;
|
||
|
||
if (confirm(`Delete Card ${this.activeCardIndex + 1}?`)) {
|
||
this.cardVariations.splice(this.activeCardIndex, 1);
|
||
this.activeCardIndex = -1;
|
||
this.updateCardList();
|
||
this.showCardEditor();
|
||
this.generatePreview();
|
||
}
|
||
}
|
||
|
||
async generatePreview() {
|
||
const placeholder = document.getElementById('preview-placeholder');
|
||
const iframe = document.getElementById('preview-iframe');
|
||
|
||
if (this.images.length === 0 && !this.templateSettings.title) {
|
||
placeholder.textContent = 'Add an image or enter a title to generate preview';
|
||
placeholder.style.display = 'flex';
|
||
iframe.style.display = 'none';
|
||
return;
|
||
}
|
||
|
||
placeholder.innerHTML = '<div class="loading"></div> Generating preview...';
|
||
placeholder.style.display = 'flex';
|
||
iframe.style.display = 'none';
|
||
|
||
try {
|
||
const html = await this.generateHTML();
|
||
const blob = new Blob([html], { type: 'text/html' });
|
||
const url = URL.createObjectURL(blob);
|
||
|
||
iframe.src = url;
|
||
iframe.style.display = 'block';
|
||
placeholder.style.display = 'none';
|
||
|
||
// Apply zoom after iframe loads
|
||
iframe.onload = () => {
|
||
this.initDragFunctionality();
|
||
this.updateZoom();
|
||
};
|
||
|
||
// Clean up the previous blob URL
|
||
if (iframe.dataset.previousUrl) {
|
||
URL.revokeObjectURL(iframe.dataset.previousUrl);
|
||
}
|
||
iframe.dataset.previousUrl = url;
|
||
|
||
} catch (error) {
|
||
placeholder.textContent = `Error generating preview: ${error.message}`;
|
||
this.showStatusMessage(`Preview generation failed: ${error.message}`, 'error');
|
||
}
|
||
}
|
||
|
||
async generateHTML() {
|
||
// Determine number of cards to generate
|
||
let totalCards;
|
||
if (this.cardVariations.length > 0) {
|
||
totalCards = this.cardVariations.length;
|
||
} else if (this.images.length > 0) {
|
||
totalCards = this.images.length; // Create one card per image if no variations
|
||
} else {
|
||
totalCards = 1; // Single card if no images or variations
|
||
}
|
||
|
||
// For print sheet, arrange cards in grid, but don't exceed available space
|
||
const cardsPerPage = this.printLayout.cardsPerRow * this.printLayout.cardsPerColumn;
|
||
const pagesNeeded = Math.ceil(totalCards / cardsPerPage);
|
||
const totalCardsToGenerate = pagesNeeded * cardsPerPage; // Fill pages completely, but we'll hide empty slots
|
||
|
||
const cards = [];
|
||
|
||
// Generate cards
|
||
for (let i = 0; i < totalCardsToGenerate; i++) {
|
||
if (i < totalCards) {
|
||
let imageIndex, cardTitle, cardFooter, cardTitleStyle, cardAccentColor, cardTitleColor, cardFullBleed, cardTitleShadow;
|
||
let cardBackgroundStyle, cardFontFamily, cardFontWeight, cardFooterColor, cardShowTitle, cardShowFooter;
|
||
let cardImageFit, cardImagePosition, cardTitleFontSize, cardTitleX, cardTitleY, cardTitleDraggable;
|
||
let cardFooterFontSize, cardFooterX, cardFooterY, cardFooterDraggable;
|
||
let cardShowAccent;
|
||
let cardPanelMode, cardTitlePanel, cardImagePanel, cardFooterPanel;
|
||
let cardFit;
|
||
|
||
if (this.cardVariations.length > 0) {
|
||
// Use variation settings
|
||
const variation = this.cardVariations[i];
|
||
imageIndex = variation && variation.imageIndex >= 0 ? variation.imageIndex : 0;
|
||
cardTitle = (variation && variation.title) || `Card ${i + 1}`;
|
||
cardFooter = (variation && variation.footer) || '';
|
||
cardTitleStyle = (variation && variation.titleStyle) || 'classic';
|
||
cardAccentColor = (variation && variation.accentColor) || '#f1c40f';
|
||
cardShowAccent = variation && variation.showAccent !== undefined ? variation.showAccent : false;
|
||
cardTitleColor = (variation && variation.titleColor) || '#111111';
|
||
cardFullBleed = variation && variation.fullBleed !== undefined ? variation.fullBleed : true;
|
||
cardTitleShadow = variation && variation.titleShadow !== undefined ? variation.titleShadow : false;
|
||
// Individual features
|
||
cardBackgroundStyle = (variation && variation.backgroundStyle) || 'solid';
|
||
cardFontFamily = (variation && variation.fontFamily) || 'Arial';
|
||
cardFontWeight = (variation && variation.fontWeight) || 'normal';
|
||
cardFooterColor = (variation && variation.footerColor) || '#111111';
|
||
cardShowTitle = variation && variation.showTitle !== undefined ? variation.showTitle : true;
|
||
cardShowFooter = variation && variation.showFooter !== undefined ? variation.showFooter : true;
|
||
cardImageFit = (variation && variation.imageFit) || 'cover';
|
||
cardImagePosition = (variation && variation.imagePosition) || 'center';
|
||
cardTitleFontSize = (variation && variation.titleFontSize) || 20;
|
||
cardTitleX = variation && variation.titleX !== undefined ? variation.titleX : 50;
|
||
cardTitleY = variation && variation.titleY !== undefined ? variation.titleY : 20;
|
||
cardTitleDraggable = variation && variation.titleDraggable !== undefined ? variation.titleDraggable : false;
|
||
cardFooterFontSize = (variation && variation.footerFontSize) || 12;
|
||
cardFooterX = variation && variation.footerX !== undefined ? variation.footerX : 50;
|
||
cardFooterY = variation && variation.footerY !== undefined ? variation.footerY : 90;
|
||
cardFooterDraggable = variation && variation.footerDraggable !== undefined ? variation.footerDraggable : false;
|
||
cardPanelMode = variation && variation.panelMode !== undefined ? variation.panelMode : false;
|
||
cardTitlePanel = variation && variation.titlePanel ? variation.titlePanel : { borderWidth: 0, rotation: 0, expand: false };
|
||
cardImagePanel = variation && variation.imagePanel ? variation.imagePanel : { borderWidth: 0, rotation: 0 };
|
||
cardFooterPanel = variation && variation.footerPanel ? variation.footerPanel : { borderWidth: 0, rotation: 0 };
|
||
cardFit = variation && variation.cardFit !== undefined ? variation.cardFit : this.printLayout.cardFit;
|
||
} else {
|
||
// No variations - auto-assign images
|
||
imageIndex = i < this.images.length ? i : 0;
|
||
cardTitle = `Card ${i + 1}`;
|
||
cardFooter = '';
|
||
cardTitleStyle = 'classic';
|
||
cardAccentColor = '#f1c40f';
|
||
cardShowAccent = false;
|
||
cardTitleColor = '#111111';
|
||
cardFullBleed = true;
|
||
cardTitleShadow = false;
|
||
// Default features
|
||
cardBackgroundStyle = 'solid';
|
||
cardFontFamily = 'Arial';
|
||
cardFontWeight = 'normal';
|
||
cardFooterColor = '#111111';
|
||
cardShowTitle = true;
|
||
cardShowFooter = true;
|
||
cardImageFit = 'cover';
|
||
cardImagePosition = 'center';
|
||
cardTitleFontSize = 20;
|
||
cardTitleX = 50;
|
||
cardTitleY = 20;
|
||
cardTitleDraggable = false;
|
||
cardFooterFontSize = 12;
|
||
cardFooterX = 50;
|
||
cardFooterY = 90;
|
||
cardFooterDraggable = false;
|
||
cardPanelMode = false;
|
||
cardTitlePanel = { borderWidth: 0, rotation: 0, expand: false };
|
||
cardImagePanel = { borderWidth: 0, rotation: 0 };
|
||
cardFooterPanel = { borderWidth: 0, rotation: 0 };
|
||
cardFit = this.printLayout.cardFit;
|
||
}
|
||
|
||
const imageUrl = this.images.length > 0 ? this.images[imageIndex].dataUrl : 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==';
|
||
|
||
cards.push({
|
||
imageUrl,
|
||
title: cardTitle,
|
||
footer: cardFooter,
|
||
backgroundStyle: cardBackgroundStyle,
|
||
fontFamily: cardFontFamily,
|
||
fontWeight: cardFontWeight,
|
||
footerColor: cardFooterColor,
|
||
titleStyle: cardTitleStyle,
|
||
accentColor: cardAccentColor,
|
||
showAccent: cardShowAccent,
|
||
titleColor: cardTitleColor,
|
||
fullBleed: cardFullBleed,
|
||
titleShadow: cardTitleShadow,
|
||
showTitle: cardShowTitle,
|
||
showFooter: cardShowFooter,
|
||
imageFit: cardImageFit,
|
||
imagePosition: cardImagePosition,
|
||
titleFontSize: cardTitleFontSize,
|
||
titleX: cardTitleX,
|
||
titleY: cardTitleY,
|
||
titleDraggable: cardTitleDraggable,
|
||
footerFontSize: cardFooterFontSize,
|
||
footerX: cardFooterX,
|
||
footerY: cardFooterY,
|
||
footerDraggable: cardFooterDraggable,
|
||
panelMode: cardPanelMode,
|
||
titlePanel: cardTitlePanel,
|
||
imagePanel: cardImagePanel,
|
||
footerPanel: cardFooterPanel,
|
||
cardFit: cardFit,
|
||
isVisible: true
|
||
});
|
||
} else {
|
||
// Empty card for filling the grid
|
||
cards.push({
|
||
imageUrl: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==',
|
||
title: '',
|
||
footer: '',
|
||
backgroundStyle: 'solid',
|
||
fontFamily: 'Arial',
|
||
fontWeight: 'normal',
|
||
footerColor: '#111111',
|
||
titleStyle: 'folded',
|
||
accentColor: '#f1c40f',
|
||
showAccent: false,
|
||
titleColor: '#111111',
|
||
fullBleed: true,
|
||
titleShadow: false,
|
||
showTitle: false,
|
||
showFooter: false,
|
||
imageFit: 'cover',
|
||
imagePosition: 'center',
|
||
titleFontSize: 20,
|
||
titleX: 50,
|
||
titleY: 10,
|
||
titleDraggable: false,
|
||
panelMode: false,
|
||
titlePanel: { borderWidth: 0, rotation: 0, expand: false },
|
||
imagePanel: { borderWidth: 0, rotation: 0 },
|
||
footerPanel: { borderWidth: 0, rotation: 0 },
|
||
cardFit: this.printLayout.cardFit,
|
||
isVisible: false
|
||
});
|
||
}
|
||
}
|
||
|
||
// Fixed card dimensions: 54mm x 85.6mm
|
||
const baseCardWidthMm = 54;
|
||
const baseCardHeightMm = 85.6;
|
||
const cardWidthMm = baseCardWidthMm;
|
||
const cardHeightMm = baseCardHeightMm;
|
||
|
||
// Calculate grid layout
|
||
const pageWidthMm = 210; // A4 width
|
||
const pageHeightMm = 297; // A4 height
|
||
|
||
// For multiple pages, we'll create multiple print-sheet divs
|
||
let htmlContent = '';
|
||
|
||
for (let page = 0; page < pagesNeeded; page++) {
|
||
const startIndex = page * cardsPerPage;
|
||
const endIndex = Math.min(startIndex + cardsPerPage, totalCardsToGenerate);
|
||
const pageCards = cards.slice(startIndex, endIndex);
|
||
|
||
// Calculate positions for this page's grid
|
||
const gridCols = this.printLayout.cardsPerRow;
|
||
const gridRows = this.printLayout.cardsPerColumn;
|
||
|
||
const pageBreak = page < pagesNeeded - 1 ? "always" : "auto";
|
||
const gridColsValue = gridCols;
|
||
const cardWidthValue = cardWidthMm;
|
||
const cardHeightValue = cardHeightMm;
|
||
const spacingValue = this.printLayout.cardSpacing;
|
||
const widthValue = gridCols * cardWidthMm + (gridCols - 1) * this.printLayout.cardSpacing;
|
||
const heightValue = gridRows * cardHeightMm + (gridRows - 1) * this.printLayout.cardSpacing;
|
||
|
||
htmlContent += `<div class="print-page" style="page-break-after: ${pageBreak}; width: ${pageWidthMm}mm; padding: ${this.printLayout.pageMargin}mm; box-sizing: border-box;">
|
||
<div class="print-sheet" style="
|
||
display: grid;
|
||
grid-template-columns: repeat(${gridColsValue}, ${cardWidthValue}mm);
|
||
grid-template-rows: repeat(${gridRows}, ${cardHeightValue}mm);
|
||
gap: ${spacingValue}mm;
|
||
width: ${widthValue}mm;
|
||
height: ${heightValue}mm;
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
">
|
||
${pageCards.map((card, index) => {
|
||
const cardFitFactor = card.cardFit || 0;
|
||
return `
|
||
<div class="card card-${startIndex + index} ${card.isVisible ? '' : 'empty-card'}"
|
||
data-card-index="${startIndex + index}"
|
||
data-background-style="${card.backgroundStyle}"
|
||
data-card-fit="${cardFitFactor}"
|
||
onclick="if (window.parent && window.parent.selectCardFromPreview) { window.parent.selectCardFromPreview(${startIndex + index}); }"
|
||
style="cursor: pointer;
|
||
width: ${cardWidthMm}mm;
|
||
height: ${cardHeightMm}mm;
|
||
box-sizing: border-box;
|
||
font-family: 'DejaVuSans', serif;
|
||
${card.isVisible && card.backgroundStyle === 'gradient' ? 'background: linear-gradient(135deg, #e8f4fd 0%, #d1e8f0 100%);' : ''}
|
||
${card.isVisible && card.backgroundStyle === 'pattern' ? 'background: linear-gradient(45deg, #f5f5dc 0%, #deb887 100%);' : ''}
|
||
${card.isVisible && card.backgroundStyle === 'comic' ? 'background: #f9f9f9; border: 1px solid #ccc;' : ''}
|
||
${card.isVisible && card.backgroundStyle === 'polaroid' ? 'border: 8px solid #fff; border-bottom: 24px solid #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.3); position: relative;' : ''}
|
||
${card.isVisible && card.backgroundStyle === 'polaroid' && !card.fullBleed ? 'background: #f8f9fa;' : ''}
|
||
${card.isVisible && card.backgroundStyle === 'solid' ? 'background: #f8f9fa;' : ''}
|
||
${card.isVisible && card.fullBleed ? `background: url('${card.imageUrl}') no-repeat ${card.imagePosition}/${card.imageFit};` : ''}
|
||
position: relative;
|
||
border: ${card.isVisible ? 'none' : '1px dashed #ccc'};
|
||
overflow: hidden;
|
||
">
|
||
${card.isVisible ? `
|
||
${card.panelMode ? `
|
||
<!-- Comic Style Panels -->
|
||
<div class="comic-panels">
|
||
${card.showTitle ? (card.titleStyle === 'split' ? `
|
||
<style>
|
||
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
|
||
.comic-panel.comic-title-panel.split {
|
||
--s: 4px;
|
||
--o: calc(0.5 * var(--s));
|
||
--sl: calc(50% - 0.5px), #0000 calc(50% + 0.5px);
|
||
position: absolute;
|
||
left: 8%;
|
||
top: 6%;
|
||
${card.titlePanel.expand ? 'width: auto; min-width: 30%; max-width: 60%;' : 'width: 40%;'}
|
||
height: ${card.titlePanel.expand ? 'auto' : '15%'};
|
||
border: ${card.titlePanel.borderWidth}px solid #000;
|
||
place-self: center;
|
||
place-content: center;
|
||
padding: calc(0.1em) 0.05em 0 0;
|
||
background:
|
||
linear-gradient(22.5deg, #fff var(--sl)) text,
|
||
linear-gradient(22.5deg, #000 var(--sl)),
|
||
linear-gradient(${card.titleColor} 50%, #0000 0)
|
||
0 0/ 1% var(--s);
|
||
color: #0000;
|
||
-webkit-text-stroke: #fff calc(var(--o));
|
||
text-transform: uppercase;
|
||
mix-blend-mode: screen;
|
||
font: ${card.titleFontSize * 0.8}px/ 0.75 'Bebas Neue', sans-serif;
|
||
transform: rotate(${card.titlePanel.rotation}deg);
|
||
box-shadow: 2px 2px 4px rgba(0,0,0,0.2);
|
||
@supports (line-height: 1cap) { line-height: 1cap; }
|
||
}
|
||
@media (min-width: 480px) and (min-height: 320px) {
|
||
.comic-panel.comic-title-panel.split { --s: 6px; }
|
||
}
|
||
</style>
|
||
<div class="comic-panel comic-title-panel split">${this.escapeHtml(card.title)}</div>
|
||
` : `<div class="comic-panel comic-title-panel" style="
|
||
position: absolute;
|
||
left: 8%;
|
||
top: 6%;
|
||
${card.titlePanel.expand ? 'width: auto; min-width: 30%; max-width: 60%;' : 'width: 40%;'}
|
||
height: ${card.titlePanel.expand ? 'auto' : '15%'};
|
||
border: ${card.titlePanel.borderWidth}px solid #000;
|
||
background: #fff;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
white-space: pre-line;
|
||
text-align: center;
|
||
font-size: ${card.titleFontSize * 0.8}px;
|
||
font-weight: ${card.fontWeight === 'bold' ? '700' : '400'};
|
||
font-family: '${card.fontFamily}', serif;
|
||
color: ${card.titleColor};
|
||
${card.titleShadow ? 'text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);' : ''}
|
||
transform: rotate(${card.titlePanel.rotation}deg);
|
||
box-shadow: 2px 2px 4px rgba(0,0,0,0.2);
|
||
${card.titleDraggable && !card.panelMode ? 'cursor: move; user-select: none;' : ''}
|
||
" data-panel-type="title">${this.escapeHtml(card.title)}</div>`) : ''}
|
||
|
||
<div class="comic-panel comic-image-panel" style="
|
||
position: absolute;
|
||
left: 15%;
|
||
top: 25%;
|
||
right: 15%;
|
||
bottom: ${card.showFooter ? '35%' : '15%'};
|
||
border: ${card.imagePanel.borderWidth}px solid #000;
|
||
background: ${card.fullBleed ? `url('${card.imageUrl}') no-repeat ${card.imagePosition}/${card.imageFit}` : '#f8f9fa'};
|
||
transform: rotate(${card.imagePanel.rotation}deg);
|
||
box-shadow: 3px 3px 6px rgba(0,0,0,0.3);
|
||
overflow: hidden;
|
||
">
|
||
${!card.fullBleed ? `<img src="${card.imageUrl}" alt="cover" style="
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: ${card.imageFit};
|
||
object-position: ${card.imagePosition};
|
||
"/>` : ''}
|
||
${card.showAccent ? `<div class="overlay" style="
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: ${card.accentColor}40;
|
||
pointer-events: none;
|
||
"></div>` : ''}
|
||
</div>
|
||
|
||
${card.showFooter ? `<div class="comic-panel comic-footer-panel" style="
|
||
position: absolute;
|
||
right: 8%;
|
||
bottom: 6%;
|
||
width: 35%;
|
||
height: 12%;
|
||
border: ${card.footerPanel.borderWidth}px solid #000;
|
||
background: #fff;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 10px;
|
||
font-weight: ${card.fontWeight};
|
||
font-family: '${card.fontFamily}', serif;
|
||
color: ${card.footerColor};
|
||
transform: rotate(${card.footerPanel.rotation}deg);
|
||
box-shadow: 2px 2px 4px rgba(0,0,0,0.2);
|
||
text-align: center;
|
||
padding: 2px;
|
||
white-space: pre-line;
|
||
">${this.escapeHtml(card.footer)}</div>` : ''}
|
||
</div>
|
||
` : `
|
||
<!-- Standard Layout -->
|
||
${card.showTitle ? (card.titleStyle === 'split' ? `
|
||
<style>
|
||
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
|
||
.title.split {
|
||
--s: 4px;
|
||
--o: calc(0.5 * var(--s));
|
||
--sl: calc(50% - 0.5px), #0000 calc(50% + 0.5px);
|
||
position: absolute;
|
||
left: ${card.titleX}%;
|
||
top: ${card.titleY}%;
|
||
transform: translate(-50%, -50%);
|
||
place-self: center;
|
||
place-content: center;
|
||
padding: calc(0.1em) 0.05em 0 0;
|
||
height: calc(1lh - var(--o));
|
||
background:
|
||
linear-gradient(22.5deg, #fff var(--sl)) text,
|
||
linear-gradient(22.5deg, #000 var(--sl)),
|
||
linear-gradient(${card.titleColor} 50%, #0000 0)
|
||
0 0/ 1% var(--s);
|
||
color: #0000;
|
||
-webkit-text-stroke: #fff calc(var(--o));
|
||
text-transform: uppercase;
|
||
mix-blend-mode: screen;
|
||
font: ${card.titleFontSize}px/ 0.75 'Bebas Neue', sans-serif;
|
||
${card.titleDraggable ? 'cursor: move; user-select: none;' : ''}
|
||
@supports (line-height: 1cap) { line-height: 1cap; }
|
||
}
|
||
@media (min-width: 480px) and (min-height: 320px) {
|
||
.title.split { --s: 6px; }
|
||
}
|
||
</style>
|
||
<div class="title split">${this.escapeHtml(card.title)}</div>
|
||
` : `<div class="title ${card.titleStyle}" data-heading="${this.escapeHtml(card.title)}" style="
|
||
color: ${card.titleColor};
|
||
font-weight: ${card.fontWeight === 'bold' ? '700' : '400'};
|
||
font-family: '${card.fontFamily}', serif;
|
||
font-size: ${card.titleFontSize}px;
|
||
${card.titleShadow ? 'text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);' : ''}
|
||
position: absolute;
|
||
left: ${card.titleX}%;
|
||
top: ${card.titleY}%;
|
||
transform: translate(-50%, -50%);
|
||
white-space: pre-line;
|
||
text-align: center;
|
||
${card.titleDraggable ? 'cursor: move; user-select: none;' : ''}
|
||
">${this.escapeHtml(card.title)}</div>`) : ''}
|
||
${!card.fullBleed ? `<div class="hero"><img src="${card.imageUrl}" alt="cover" style="object-fit: ${card.imageFit}; object-position: ${card.imagePosition};"/></div>` : ''}
|
||
${card.showAccent ? `<div class="overlay" style="background: ${card.accentColor}40;"></div>` : `<div class="overlay" style="background: rgba(0,0,0,0);"></div>`}
|
||
${card.showFooter ? `<div class="footer" style="
|
||
color: ${card.footerColor};
|
||
font-family: '${card.fontFamily}', serif;
|
||
font-weight: ${card.fontWeight};
|
||
font-size: ${card.footerFontSize}px;
|
||
position: absolute;
|
||
left: ${card.footerX}%;
|
||
bottom: ${100 - card.footerY}%;
|
||
transform: translate(-50%, 50%);
|
||
white-space: pre-line;
|
||
text-align: center;
|
||
${card.footerDraggable ? 'cursor: move; user-select: none;' : ''}
|
||
">${this.escapeHtml(card.footer)}</div>` : ''}
|
||
`}
|
||
` : ''}
|
||
</div>
|
||
`;}).join('')}
|
||
</div>
|
||
</div>`;
|
||
}
|
||
|
||
// Generate HTML for print sheet
|
||
const html = `
|
||
<!doctype html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<title>Yoto Covers Print Sheet</title>
|
||
<style>
|
||
@font-face { font-family: 'DejaVuSans'; src: local('DejaVu Sans'); }
|
||
@media screen {
|
||
html, body { margin: 0; padding: 20px; background: #f5f5f5; }
|
||
.print-page { border: 2px dashed #ccc; margin: 20px auto; background: white; page-break-after: always; width: 210mm; max-width: 100%; }
|
||
.print-page:last-child { page-break-after: auto; }
|
||
.print-sheet { max-width: 100%; height: auto !important; }
|
||
}
|
||
@media print {
|
||
html, body { margin: 0; padding: 0; background: white; }
|
||
.print-page { border: none; margin: 0; page-break-after: always; }
|
||
.print-page:last-child { page-break-after: auto; }
|
||
@page { margin: 0; size: A4; }
|
||
}
|
||
.card {
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
}
|
||
.empty-card {
|
||
background: #f9f9f9;
|
||
}
|
||
@media print {
|
||
${cards.map((card, index) => {
|
||
const fitFactor = card.cardFit || 0;
|
||
const widthMm = 54 * (1 + fitFactor);
|
||
const heightMm = 85.6 * (1 + fitFactor);
|
||
return `.card-${index} { width: ${widthMm}mm !important; height: ${heightMm}mm !important; }`;
|
||
}).join('\n ')}
|
||
}
|
||
${cards.map((card, index) => `
|
||
.card-${index} .title {
|
||
color: ${card.titleColor};
|
||
font-family: '${card.fontFamily}', serif;
|
||
font-weight: ${card.fontWeight === 'bold' ? '700' : '400'};
|
||
}
|
||
.card-${index} .footer {
|
||
color: ${card.footerColor};
|
||
}
|
||
`).join('')}
|
||
.title {
|
||
position: absolute;
|
||
top: 6%;
|
||
left: 6%;
|
||
right: 6%;
|
||
text-align: center;
|
||
font-size: calc(108px + 0.5rem);
|
||
color: ${this.templateSettings.titleColor};
|
||
font-weight: 900;
|
||
text-transform: uppercase;
|
||
z-index: 10;
|
||
${this.templateSettings.titleShadow ? 'text-shadow: 1px 4px 6px rgba(0,0,0,0.3);' : ''}
|
||
}
|
||
.title.classic {
|
||
/* Default classic style - already defined above */
|
||
}
|
||
.title.condensed {
|
||
font-size: calc(96px + 0.5rem);
|
||
font-weight: 900;
|
||
letter-spacing: -2px;
|
||
font-stretch: condensed;
|
||
}
|
||
.title.outlined {
|
||
-webkit-text-stroke: 2px white;
|
||
text-stroke: 2px white;
|
||
color: transparent;
|
||
}
|
||
.title.folded {
|
||
position: absolute;
|
||
left: 6%;
|
||
right: 6%;
|
||
top: 6%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-family: 'Source Code Pro', monospace;
|
||
font-weight: 900;
|
||
white-space: nowrap;
|
||
color: lch(76 39.21 9.23 / 0.5);
|
||
text-transform: uppercase;
|
||
transform: skew(10deg) rotate(-10deg);
|
||
text-shadow: 1px 4px 6px lch(90 2.22 62.5), 0 0 0 lch(28 26.21 12.27), 1px 4px 6px lch(90 2.22 62.5);
|
||
z-index: 10;
|
||
}
|
||
.title.folded::before {
|
||
content: attr(data-heading);
|
||
position: absolute;
|
||
left: 0;
|
||
top: -4.8%;
|
||
overflow: hidden;
|
||
height: 50%;
|
||
color: lch(97 2.19 62.49);
|
||
transform: translate(0.15em, 0) skew(-13deg) scale(1, 1.2);
|
||
text-shadow: 2px -1px 6px rgba(0,0,0,0.2);
|
||
}
|
||
.title.folded::after {
|
||
content: attr(data-heading);
|
||
position: absolute;
|
||
left: 0;
|
||
color: lch(83 2.26 62.51);
|
||
transform: translate(0, 0) skew(13deg) scale(1, 0.8);
|
||
clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
|
||
text-shadow: 2px -1px 6px lch(0 0 0 / 0.3);
|
||
}
|
||
.hero {
|
||
position: absolute;
|
||
top: 18%;
|
||
left: 6%;
|
||
right: 6%;
|
||
bottom: 18%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
${cards.some(card => card.backgroundStyle === 'polaroid') ? `
|
||
.card[data-background-style="polaroid"] .hero {
|
||
top: 12%;
|
||
left: 8%;
|
||
right: 8%;
|
||
bottom: 25%;
|
||
}
|
||
` : ''}
|
||
.hero img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
border-radius: 8px;
|
||
}
|
||
.overlay {
|
||
position: absolute;
|
||
top: 18%;
|
||
left: 6%;
|
||
right: 6%;
|
||
bottom: 18%;
|
||
border-radius: 8px;
|
||
pointer-events: none;
|
||
background: rgba(0,0,0,0);
|
||
}
|
||
${cards.some(card => card.backgroundStyle === 'polaroid') ? `
|
||
.card[data-background-style="polaroid"] .overlay {
|
||
top: 12%;
|
||
left: 8%;
|
||
right: 8%;
|
||
bottom: 25%;
|
||
}
|
||
` : ''}
|
||
.footer {
|
||
position: absolute;
|
||
bottom: 4%;
|
||
left: 6%;
|
||
right: 6%;
|
||
height: 10%;
|
||
background: ${this.templateSettings.accentColor};
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-weight: 700;
|
||
color: #000;
|
||
border-radius: 6px;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
${htmlContent}
|
||
</body>
|
||
</html>`;
|
||
|
||
return html;
|
||
}
|
||
|
||
escapeHtml(text) {
|
||
const div = document.createElement('div');
|
||
div.textContent = text;
|
||
return div.innerHTML.replace(/\n/g, '<br>');
|
||
}
|
||
|
||
openPreviewInNewTab() {
|
||
const iframe = document.getElementById('preview-iframe');
|
||
if (iframe.src) {
|
||
window.open(iframe.src, '_blank');
|
||
} else {
|
||
this.showStatusMessage('No preview available. Generate a preview first.', 'error');
|
||
}
|
||
}
|
||
|
||
printPreview() {
|
||
const iframe = document.getElementById('preview-iframe');
|
||
if (iframe.contentWindow) {
|
||
iframe.contentWindow.print();
|
||
} else {
|
||
this.showStatusMessage('No preview available to print.', 'error');
|
||
}
|
||
}
|
||
|
||
downloadHTML() {
|
||
if (!this.templateSettings.title && this.images.length === 0) {
|
||
this.showStatusMessage('Add content before downloading.', 'error');
|
||
return;
|
||
}
|
||
|
||
this.generateHTML().then(html => {
|
||
const blob = new Blob([html], { type: 'text/html' });
|
||
const url = URL.createObjectURL(blob);
|
||
const a = document.createElement('a');
|
||
a.href = url;
|
||
a.download = `yoto-cover-${Date.now()}.html`;
|
||
document.body.appendChild(a);
|
||
a.click();
|
||
document.body.removeChild(a);
|
||
URL.revokeObjectURL(url);
|
||
this.showStatusMessage('HTML file downloaded successfully!', 'success');
|
||
}).catch(error => {
|
||
this.showStatusMessage(`Download failed: ${error.message}`, 'error');
|
||
});
|
||
}
|
||
|
||
showStatusMessage(message, type = 'info') {
|
||
const statusDiv = document.getElementById('status-message');
|
||
statusDiv.textContent = message;
|
||
statusDiv.className = `status-message status-${type}`;
|
||
statusDiv.style.display = 'block';
|
||
|
||
setTimeout(() => {
|
||
statusDiv.style.display = 'none';
|
||
}, 5000);
|
||
}
|
||
|
||
zoomIn() {
|
||
if (this.previewZoom.level < this.previewZoom.max) {
|
||
this.previewZoom.level = Math.min(this.previewZoom.max, this.previewZoom.level + this.previewZoom.step);
|
||
this.updateZoom();
|
||
}
|
||
}
|
||
|
||
zoomOut() {
|
||
if (this.previewZoom.level > this.previewZoom.min) {
|
||
this.previewZoom.level = Math.max(this.previewZoom.min, this.previewZoom.level - this.previewZoom.step);
|
||
this.updateZoom();
|
||
}
|
||
}
|
||
|
||
resetZoom() {
|
||
this.previewZoom.level = 1.0;
|
||
this.updateZoom();
|
||
}
|
||
|
||
updateZoom() {
|
||
const iframe = document.getElementById('preview-iframe');
|
||
const zoomLevel = document.getElementById('zoom-level');
|
||
|
||
if (iframe) {
|
||
iframe.style.transform = `scale(${this.previewZoom.level})`;
|
||
iframe.style.transformOrigin = 'top left';
|
||
}
|
||
|
||
if (zoomLevel) {
|
||
zoomLevel.textContent = Math.round(this.previewZoom.level * 100) + '%';
|
||
}
|
||
}
|
||
|
||
toggleFullscreen() {
|
||
const container = document.querySelector('.preview-container');
|
||
const overlay = document.getElementById('fullscreen-overlay');
|
||
const btn = document.getElementById('fullscreen-btn');
|
||
|
||
if (this.isFullscreen) {
|
||
// Exit fullscreen
|
||
container.classList.remove('fullscreen');
|
||
overlay.classList.remove('active');
|
||
btn.textContent = '⛶ Full Screen';
|
||
this.isFullscreen = false;
|
||
} else {
|
||
// Enter fullscreen
|
||
container.classList.add('fullscreen');
|
||
overlay.classList.add('active');
|
||
btn.textContent = '⛶ Exit Full Screen';
|
||
this.isFullscreen = true;
|
||
|
||
// Add click handler to overlay to exit fullscreen
|
||
overlay.onclick = () => this.toggleFullscreen();
|
||
}
|
||
}
|
||
|
||
updateUI() {
|
||
// Initialize print layout controls
|
||
document.getElementById('cards-per-row').value = this.printLayout.cardsPerRow;
|
||
document.getElementById('cards-per-column').value = this.printLayout.cardsPerColumn;
|
||
document.getElementById('page-margin').value = this.printLayout.pageMargin;
|
||
document.getElementById('card-spacing').value = this.printLayout.cardSpacing;
|
||
document.getElementById('global-card-fit').value = this.printLayout.cardFit;
|
||
}
|
||
}
|
||
|
||
class CoverImage {
|
||
constructor(name, dataUrl) {
|
||
this.name = name;
|
||
this.dataUrl = dataUrl;
|
||
this.width = 0;
|
||
this.height = 0;
|
||
|
||
// Get image dimensions
|
||
this.getImageDimensions();
|
||
}
|
||
|
||
async getImageDimensions() {
|
||
return new Promise((resolve) => {
|
||
const img = new Image();
|
||
img.onload = () => {
|
||
this.width = img.naturalWidth;
|
||
this.height = img.naturalHeight;
|
||
resolve();
|
||
};
|
||
img.src = this.dataUrl;
|
||
});
|
||
}
|
||
}
|
||
|
||
// Initialize the app when DOM is ready
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
window.app = new YotoCoversApp();
|
||
window.selectCardFromPreview = (index) => window.app.selectCardFromPreview(index);
|
||
}); |