.
This commit is contained in:
Ross
@@ -10,7 +10,7 @@
|
||||
|
||||
<form id="print-form" method="post" action="{% url 'cards:print_preview' %}" target="_blank">
|
||||
{% csrf_token %}
|
||||
<div style="display:flex; gap:12px; align-items:center; margin-bottom:10px;">
|
||||
<div style="display:flex; gap:12px; align-items:flex-start; margin-bottom:10px;">
|
||||
<div>
|
||||
<label class="label">Design</label>
|
||||
<div class="select">
|
||||
@@ -40,6 +40,7 @@
|
||||
<div style="margin-left:auto">
|
||||
<button class="button is-primary" type="submit">Open printable view</button>
|
||||
</div>
|
||||
<!-- Sample preview placeholder (moved out of the form to avoid layout issues) -->
|
||||
</div>
|
||||
|
||||
<div style="display:flex; flex-direction:column; gap:8px;">
|
||||
@@ -61,5 +62,118 @@
|
||||
{% endfor %}
|
||||
</div>
|
||||
</form>
|
||||
{% if cards %}
|
||||
{% with sample_card=cards.0 %}
|
||||
<div id="sample-panel" style="position:fixed; right:16px; bottom:16px; width:720px; height:640px; z-index:1400; display:block;">
|
||||
<div id="sample-panel-inner" style="border:1px solid rgba(0,0,0,0.06); padding:10px; border-radius:10px; background:#fff; box-shadow:0 10px 30px rgba(0,0,0,0.12); width:100%; height:100%; box-sizing:border-box;">
|
||||
<div style="display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px;">
|
||||
<div style="font-weight:700">Sample</div>
|
||||
<button id="sample-hide-btn" type="button" style="border:0; background:transparent; cursor:pointer; font-weight:700">✕</button>
|
||||
</div>
|
||||
<div id="sample-preview" style="width:100%; height:calc(100% - 56px); overflow:auto; position:relative; display:flex; align-items:flex-start; justify-content:center; padding:8px; box-sizing:border-box;">
|
||||
{% comment %} Render all design fragments hidden and toggle via JS. Each fragment should contain a `.toptrump-card`. {% endcomment %}
|
||||
<div class="design-preview design-1" style="display:none">
|
||||
{% include 'cards/_card_inner_design1.html' with card=sample_card background=background %}
|
||||
</div>
|
||||
<div class="design-preview design-2" style="display:none">
|
||||
{% include 'cards/_card_inner_design2.html' with card=sample_card background=background %}
|
||||
</div>
|
||||
<div class="design-preview design-3" style="display:none">
|
||||
{% include 'cards/_card_inner_design3.html' with card=sample_card background=background %}
|
||||
</div>
|
||||
<div class="design-preview design-4" style="display:none">
|
||||
{% include 'cards/_card_inner_design4.html' with card=sample_card background=background %}
|
||||
</div>
|
||||
<div class="design-preview design-5" style="display:none">
|
||||
{% include 'cards/_card_inner_design5.html' with card=sample_card background=background %}
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top:8px; font-size:12px; color:#666">Design preview — not printed</div>
|
||||
</div>
|
||||
<button id="sample-show-tab" type="button" style="display:none; position:fixed; right:16px; bottom:16px; transform:none; background:#111; color:#fff; border-radius:4px 4px 0 0; padding:6px 8px; border:0; cursor:pointer; z-index:1500">Show sample</button>
|
||||
</div>
|
||||
{% endwith %}
|
||||
{% endif %}
|
||||
</div>
|
||||
<script>
|
||||
(function(){
|
||||
function qs(sel, ctx){ return (ctx||document).querySelector(sel); }
|
||||
function qsa(sel, ctx){ return Array.from((ctx||document).querySelectorAll(sel)); }
|
||||
function updatePreview(){
|
||||
var sel = qs('select[name="design"]');
|
||||
var scaleInput = qs('input[name="scale"]');
|
||||
if(!sel) return;
|
||||
var design = String(sel.value || '1');
|
||||
var scale = parseFloat(scaleInput && scaleInput.value) || 1;
|
||||
|
||||
// Hide all fragments and reset transforms
|
||||
qsa('#sample-preview .design-preview').forEach(function(el){
|
||||
el.style.display = 'none';
|
||||
var c = el.querySelector('.toptrump-card');
|
||||
if(c){ c.style.transform = ''; c.style.position = ''; c.style.margin = ''; }
|
||||
});
|
||||
|
||||
// Find the fragment whose classList contains the design class (robust against nested classes)
|
||||
var active = null;
|
||||
qsa('#sample-preview .design-preview').forEach(function(el){
|
||||
if(el.classList && el.classList.contains('design-' + design)){
|
||||
active = el;
|
||||
}
|
||||
});
|
||||
if(!active){
|
||||
// fallback: try selecting by class selector
|
||||
active = qs('#sample-preview .design-' + design);
|
||||
}
|
||||
if(active){
|
||||
// Use empty string to let element use its natural display (block/div)
|
||||
active.style.display = '';
|
||||
var card = active.querySelector('.toptrump-card');
|
||||
if(card){
|
||||
card.style.margin = '0 auto';
|
||||
card.style.display = 'block';
|
||||
card.style.transformOrigin = 'top center';
|
||||
card.style.transform = 'scale(' + scale + ')';
|
||||
card.style.position = 'relative';
|
||||
}
|
||||
}
|
||||
}
|
||||
document.addEventListener('DOMContentLoaded', function(){
|
||||
updatePreview();
|
||||
var sel = qs('select[name="design"]');
|
||||
var scaleInput = qs('input[name="scale"]');
|
||||
if(sel) sel.addEventListener('change', updatePreview);
|
||||
if(scaleInput) scaleInput.addEventListener('input', updatePreview);
|
||||
// Hide/show controls for the floating panel
|
||||
var hideBtn = qs('#sample-hide-btn');
|
||||
var panel = qs('#sample-panel');
|
||||
var showTab = qs('#sample-show-tab');
|
||||
if(hideBtn && panel && showTab){
|
||||
hideBtn.addEventListener('click', function(){
|
||||
panel.style.display = 'none';
|
||||
showTab.style.display = 'block';
|
||||
try{ localStorage.setItem('samplePanelHidden','1'); }catch(e){}
|
||||
console.log('Sample panel hidden');
|
||||
});
|
||||
showTab.addEventListener('click', function(){
|
||||
panel.style.display = 'block';
|
||||
showTab.style.display = 'none';
|
||||
try{ localStorage.removeItem('samplePanelHidden'); }catch(e){}
|
||||
// ensure preview updated when re-shown
|
||||
updatePreview();
|
||||
console.log('Sample panel shown');
|
||||
});
|
||||
// Restore state (default: visible)
|
||||
try{
|
||||
if(localStorage.getItem('samplePanelHidden')){
|
||||
panel.style.display = 'none';
|
||||
showTab.style.display = 'block';
|
||||
} else {
|
||||
panel.style.display = 'block';
|
||||
showTab.style.display = 'none';
|
||||
}
|
||||
}catch(e){}
|
||||
}
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user