(container: HTMLElement, config: CardConfig)
| 265 | * Creates a deduplicated card component |
| 266 | */ |
| 267 | export function createCard(container: HTMLElement, config: CardConfig): HTMLElement { |
| 268 | const card = container.createDiv("tasknotes-settings__card"); |
| 269 | |
| 270 | if (config.id) { |
| 271 | card.setAttribute("data-card-id", config.id); |
| 272 | } |
| 273 | |
| 274 | if (config.draggable) { |
| 275 | card.addClass("tasknotes-settings__card--draggable"); |
| 276 | } |
| 277 | |
| 278 | if (config.collapsible) { |
| 279 | card.addClass("tasknotes-settings__card--collapsible"); |
| 280 | if (config.defaultCollapsed) { |
| 281 | card.addClass("tasknotes-settings__card--collapsed"); |
| 282 | } |
| 283 | } |
| 284 | |
| 285 | // Create header |
| 286 | const header = card.createDiv("tasknotes-settings__card-header"); |
| 287 | |
| 288 | // Create drag handle if draggable - place it in the header |
| 289 | let dragHandle: HTMLElement | null = null; |
| 290 | if (config.draggable) { |
| 291 | header.addClass("tasknotes-settings__card-header--with-drag-handle"); |
| 292 | dragHandle = header.createDiv("tasknotes-settings__card-drag-handle"); |
| 293 | dragHandle.textContent = "⋮⋮"; |
| 294 | dragHandle.draggable = true; |
| 295 | dragHandle.title = "Drag to reorder"; |
| 296 | } |
| 297 | |
| 298 | // Left side of header with color indicator and info |
| 299 | const headerLeft = header.createDiv(); |
| 300 | headerLeft.classList.remove( |
| 301 | "tn-static-display-block-2a1b75c9", |
| 302 | "tn-static-display-flex-4d51fc62", |
| 303 | "tn-static-display-flex-8bb39979", |
| 304 | "tn-static-display-inline-block-60e32dcb", |
| 305 | "tn-static-display-inline-cccfa456", |
| 306 | "tn-static-display-inline-flex-f984c520", |
| 307 | "tn-static-display-none-6b99de8b", |
| 308 | "tn-static-min-height-800px-997b4c8c" |
| 309 | ); |
| 310 | headerLeft.classList.add("tn-static-display-flex-75816cae"); |
| 311 | headerLeft.classList.remove( |
| 312 | "tn-static-align-items-baseline-4b95b5c7", |
| 313 | "tn-static-align-items-flex-start-0486f781" |
| 314 | ); |
| 315 | headerLeft.classList.add("tn-static-align-items-center-7c619740"); |
| 316 | headerLeft.classList.remove("tn-static-flex-1-14e3b769", "tn-static-margin-top-12px-91e0f558"); |
| 317 | headerLeft.classList.add("tn-static-flex-1-97445a8d"); |
| 318 | headerLeft.classList.remove("tn-static-min-width-2px-709d7da0"); |
| 319 | headerLeft.classList.add("tn-static-min-width-0-3922d326"); |
| 320 | |
| 321 | // Color indicator |
| 322 | if (config.colorIndicator) { |
| 323 | const colorIndicator = headerLeft.createDiv("tasknotes-settings__card-color-indicator"); |
| 324 | colorIndicator.style.backgroundColor = normalizeThemeColor(config.colorIndicator.color); |
no test coverage detected