feat: add full bleed option and enhance comic style layout for card variations
This commit is contained in:
Ross
@@ -35,7 +35,8 @@ class YotoCoversApp {
|
||||
backgroundStyle: 'comic',
|
||||
fontFamily: 'Comic Sans MS',
|
||||
fontWeight: 'bold',
|
||||
footerColor: '#ff6b6b'
|
||||
footerColor: '#ff6b6b',
|
||||
fullBleed: false
|
||||
},
|
||||
polaroid: {
|
||||
backgroundStyle: 'polaroid',
|
||||
@@ -551,7 +552,7 @@ class YotoCoversApp {
|
||||
// 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-y').value = variation.titleY !== undefined ? variation.titleY : 10;
|
||||
document.getElementById('card-title-draggable').checked = variation.titleDraggable === true;
|
||||
|
||||
// Set image options
|
||||
@@ -612,13 +613,13 @@ class YotoCoversApp {
|
||||
console.log('No iframe document');
|
||||
return;
|
||||
}
|
||||
const titles = iframeDoc.querySelectorAll('.title');
|
||||
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'
|
||||
if (title.style.cursor !== 'move') {
|
||||
// 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;
|
||||
}
|
||||
@@ -856,7 +857,7 @@ class YotoCoversApp {
|
||||
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;
|
||||
cardTitleY = variation && variation.titleY !== undefined ? variation.titleY : 10;
|
||||
cardTitleDraggable = variation && variation.titleDraggable !== undefined ? variation.titleDraggable : false;
|
||||
} else {
|
||||
// No variations - auto-assign images
|
||||
@@ -880,7 +881,7 @@ class YotoCoversApp {
|
||||
cardImagePosition = 'center';
|
||||
cardTitleFontSize = 20;
|
||||
cardTitleX = 50;
|
||||
cardTitleY = 20;
|
||||
cardTitleY = 10;
|
||||
cardTitleDraggable = false;
|
||||
}
|
||||
|
||||
@@ -932,7 +933,7 @@ class YotoCoversApp {
|
||||
imagePosition: 'center',
|
||||
titleFontSize: 20,
|
||||
titleX: 50,
|
||||
titleY: 20,
|
||||
titleY: 10,
|
||||
titleDraggable: false,
|
||||
isVisible: false
|
||||
});
|
||||
@@ -984,7 +985,7 @@ class YotoCoversApp {
|
||||
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: repeating-linear-gradient(45deg, #fff 0px, #fff 2px, #000 2px, #000 4px), radial-gradient(circle at 20% 30%, #ff4444, #ff8844, #ffff44, #44ff44, #4444ff, #8844ff); box-shadow: inset 0 0 20px rgba(0,0,0,0.3); border: 3px solid #000;' : ''}
|
||||
${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;' : ''}
|
||||
@@ -994,25 +995,102 @@ class YotoCoversApp {
|
||||
overflow: hidden;
|
||||
">
|
||||
${card.isVisible ? `
|
||||
${card.showTitle ? `<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%);
|
||||
${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};
|
||||
">${this.escapeHtml(card.footer)}</div>` : ''}
|
||||
${card.backgroundStyle === 'comic' ? `
|
||||
<!-- Comic Style Panels -->
|
||||
<div class="comic-panels">
|
||||
${card.showTitle ? `<div class="comic-panel comic-title-panel" style="
|
||||
position: absolute;
|
||||
left: 8%;
|
||||
top: 6%;
|
||||
width: 40%;
|
||||
height: 15%;
|
||||
border: 2px solid #000;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: 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(-2deg);
|
||||
box-shadow: 2px 2px 4px rgba(0,0,0,0.2);
|
||||
${card.titleDraggable && card.backgroundStyle !== 'comic' ? '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: 3px solid #000;
|
||||
background: ${card.fullBleed ? `url('${card.imageUrl}') no-repeat ${card.imagePosition}/${card.imageFit}` : '#f8f9fa'};
|
||||
transform: rotate(1deg);
|
||||
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: 2px 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(3deg);
|
||||
box-shadow: 2px 2px 4px rgba(0,0,0,0.2);
|
||||
text-align: center;
|
||||
padding: 2px;
|
||||
">${this.escapeHtml(card.footer)}</div>` : ''}
|
||||
</div>
|
||||
` : `
|
||||
<!-- Standard Layout -->
|
||||
${card.showTitle ? `<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%);
|
||||
${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};
|
||||
">${this.escapeHtml(card.footer)}</div>` : ''}
|
||||
`}
|
||||
` : ''}
|
||||
</div>
|
||||
`).join('')}
|
||||
|
||||
Reference in New Issue
Block a user