amitwh/markdown-converter
1
0
Fork 0
mirror of https://github.com/amitwh/markdown-converter.git synced 2026-08-02 18:10:18 +05:30
Code Issues Packages Projects Releases Wiki Activity

feat: add custom print preview dialog with configurable options

Browse Source
This commit is contained in:
amitwh
2026-03-04 16:04:51 +05:30
parent 9348b2bd1d
commit ca0b250506
6 changed files with 357 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/index.html
+75
View File
@@ -331,6 +331,81 @@
</div>
</div>
<!-- Print Preview Dialog -->
<div class="export-dialog hidden" id="print-preview-overlay">
<div class="export-dialog-content print-preview-dialog">
<div class="export-dialog-header">
<h3>Print Preview</h3>
<button id="print-preview-close" title="Close" style="background:none;border:none;color:white;font-size:24px;cursor:pointer;">&times;</button>
</div>
<div class="print-preview-body">
<div class="print-preview-sidebar">
<div class="print-option-group">
<label>Paper Size</label>
<select id="print-paper-size">
<option value="A3">A3</option>
<option value="A4" selected>A4</option>
<option value="A5">A5</option>
<option value="Letter">Letter</option>
<option value="Legal">Legal</option>
<option value="Tabloid">Tabloid</option>
</select>
</div>
<div class="print-option-group">
<label>Orientation</label>
<select id="print-orientation">
<option value="portrait" selected>Portrait</option>
<option value="landscape">Landscape</option>
</select>
</div>
<div class="print-option-group">
<label>Margins</label>
<select id="print-margins">
<option value="default" selected>Default</option>
<option value="narrow">Narrow</option>
<option value="wide">Wide</option>
<option value="none">None</option>
</select>
</div>
<div class="print-option-group">
<label>Scale</label>
<div class="scale-control">
<input type="range" id="print-scale" min="50" max="200" value="100">
<span id="print-scale-value">100%</span>
</div>
</div>
<div class="print-option-group">
<label class="checkbox-label">
<input type="checkbox" id="print-headers" checked>
Headers &amp; Footers
</label>
</div>
<div class="print-option-group">
<label class="checkbox-label">
<input type="checkbox" id="print-background" checked>
Background Colors
</label>
</div>
<div class="print-option-group">
<label>Pages</label>
<select id="print-pages">
<option value="all" selected>All</option>
<option value="custom">Custom Range</option>
</select>
<input type="text" id="print-page-range" placeholder="e.g., 1-3, 5" class="hidden print-range-input">
</div>
<div class="print-actions">
<button class="btn-primary" id="print-execute">Print</button>
<button class="btn-secondary" id="print-cancel">Cancel</button>
</div>
</div>
<div class="print-preview-content">
<iframe id="print-preview-frame" style="width:100%;height:100%;border:none;background:white;"></iframe>
</div>
</div>
</div>
</div>
<!-- Command Palette -->
<div class="command-palette-overlay hidden" id="command-palette-overlay">
<div class="command-palette">