constants.js (2.3 KB)
1 // Zine page dimensions in inches 2 export const PAGE_WIDTH_IN = 2.75; 3 export const PAGE_HEIGHT_IN = 4.25; 4 export const PAGE_PADDING_IN = 0.2; 5 6 // All page IDs for selectors 7 export const PAGE_IDS = ['front-cover', 'page1', 'page2', 'page3', 'page4', 'page5', 'page6', 'back-cover']; 8 export const ALL_PAGES_SELECTOR = PAGE_IDS.map(id => `#${id}`).join(', '); 9 export const RIGHT_PAGES_SELECTOR = '#front-cover, #page2, #page4, #page6'; 10 export const LEFT_PAGES_SELECTOR = '#back-cover, #page1, #page3, #page5'; 11 12 // Spread definitions 13 export const SPREADS = [ 14 { left: null, right: 'front-cover', label: 'Front Cover' }, 15 { left: 'page1', right: 'page2', label: 'Pages 1-2' }, 16 { left: 'page3', right: 'page4', label: 'Pages 3-4' }, 17 { left: 'page5', right: 'page6', label: 'Pages 5-6' }, 18 { left: 'back-cover', right: null, label: 'Back Cover' } 19 ]; 20 21 // Height of nav bar for layout calculations 22 export const NAV_HEIGHT = 60; 23 24 // Shared navigation button CSS (used by both editor spread-nav and exported viewer zine-nav) 25 export const NAV_BUTTON_CSS = ` 26 display: flex; 27 align-items: center; 28 justify-content: center; 29 gap: 16px; 30 padding: 12px 20px; 31 `; 32 33 export const NAV_BUTTON_STYLES = ` 34 background: rgba(255,255,255,0.15); 35 color: white; 36 border: none; 37 border-radius: 50%; 38 width: 36px; 39 height: 36px; 40 cursor: pointer; 41 font-size: 18px; 42 display: flex; 43 align-items: center; 44 justify-content: center; 45 `; 46 47 // Zine HTML boilerplate template 48 export const ZINE_BOILERPLATE = `<!DOCTYPE html> 49 <html> 50 <head> 51 <style> 52 \t\t\t 53 </style> 54 </head> 55 <body> 56 <div class="page" id="front-cover"> 57 \t\t\t 58 </div> 59 <div class="page" id="page1"> 60 \t\t\t 61 </div> 62 <div class="page" id="page2"> 63 \t\t\t 64 </div> 65 <div class="page" id="page3"> 66 \t\t\t 67 </div> 68 <div class="page" id="page4"> 69 \t\t\t 70 </div> 71 <div class="page" id="page5"> 72 \t\t\t 73 </div> 74 <div class="page" id="page6"> 75 \t\t\t 76 </div> 77 <div class="page" id="back-cover"> 78 \t\t\t 79 </div> 80 </body> 81 </html> 82 `; 83 84 // Get cursor position for boilerplate (inside front-cover div) 85 export function getBoilerplateCursorPos(startPos = 0) { 86 return startPos + ZINE_BOILERPLATE.indexOf('<div class="page" id="front-cover">') + 39; 87 } 88 89 // Storage key 90 export const STORAGE_KEY = 'zine-editor-content';