(options = {})
| 132 | * @returns {Object} Preview panel API |
| 133 | */ |
| 134 | export function initPreviewPanel(options = {}) { |
| 135 | const { |
| 136 | containerId = 'previewPanel', |
| 137 | title = 'GIF Preview', |
| 138 | dragHint = 'Drag & Drop GIF files here', |
| 139 | pasteHint = 'or paste with Ctrl+V', |
| 140 | downloadAllText = 'Download All as ZIP', |
| 141 | clearAllText = 'Clear All', |
| 142 | onTrayIconHover = null, |
| 143 | onTrayIconLeave = null |
| 144 | } = options |
| 145 | |
| 146 | let container = document.getElementById(containerId) |
| 147 | |
| 148 | // Create the container when it does not exist |
| 149 | if (!container) { |
| 150 | container = document.createElement('div') |
| 151 | container.id = containerId |
| 152 | document.body.appendChild(container) |
| 153 | } |
| 154 | |
| 155 | // Create the preview panel HTML (matching the original markup) |
| 156 | container.className = 'preview-panel' |
| 157 | container.style.display = 'none' |
| 158 | container.innerHTML = ` |
| 159 | <div class="preview-header"> |
| 160 | <div class="preview-header-left"> |
| 161 | <h3 id="previewPanelTitle">${title}</h3> |
| 162 | <div class="preview-header-actions" id="previewActions" style="display: none;"> |
| 163 | <button class="preview-header-btn" id="downloadAllBtn" title="${downloadAllText}"> |
| 164 | <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2"> |
| 165 | <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path> |
| 166 | <polyline points="7 10 12 15 17 10"></polyline> |
| 167 | <line x1="12" y1="15" x2="12" y2="3"></line> |
| 168 | </svg> |
| 169 | </button> |
| 170 | <button class="preview-header-btn" id="clearAllBtn" title="${clearAllText}"> |
| 171 | <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2"> |
| 172 | <path d="M3 6h18"></path> |
| 173 | <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path> |
| 174 | <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"></path> |
| 175 | </svg> |
| 176 | </button> |
| 177 | </div> |
| 178 | </div> |
| 179 | <button class="preview-close" id="previewClose" aria-label="Close Preview">×</button> |
| 180 | </div> |
| 181 | <div class="preview-upload-area" id="previewUploadArea"> |
| 182 | <div class="upload-hint"> |
| 183 | <svg viewBox="0 0 24 24" width="32" height="32" fill="none" stroke="currentColor" stroke-width="2"> |
| 184 | <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path> |
| 185 | <polyline points="17 8 12 3 7 8"></polyline> |
| 186 | <line x1="12" y1="3" x2="12" y2="15"></line> |
| 187 | </svg> |
| 188 | <p id="previewDragText">${dragHint}</p> |
| 189 | <p class="upload-hint-sub" id="previewPasteText">${pasteHint}</p> |
| 190 | </div> |
| 191 | </div> |
no test coverage detected