fix: resolve DOMContentLoaded crash + wire kanban/pagination

- Fix lt.clipboard.init() → initCopyButtons() (crashed init handler
  before context menu, split pane, lightbox, theme btn could register)
- Add lt.pagination module (Module 55) with ellipsis rendering,
  prev/next, onChange callback; wire demo-pagination nav
- Upgrade lt.sortable for cross-list group dragging (shared module-level
  drag state enables kanban card movement between columns)
- Wire kanban columns (open/pending/inprogress/closed) to lt.sortable
  with group:'kanban' for drag-and-drop between columns

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-25 23:19:49 -04:00
parent 0c2e136cae
commit 3847513594
2 changed files with 126 additions and 66 deletions
+18 -14
View File
@@ -415,7 +415,7 @@
<span class="lt-frame-bl"></span>
<span class="lt-frame-br"></span>
<div class="lt-section-header">Open</div>
<div class="lt-section-body">
<div class="lt-section-body" id="kanban-col-open" style="min-height:60px">
<div class="lt-card lt-mb-md lt-row-p1">
<div class="lt-flex lt-flex-between lt-mb-md">
@@ -443,7 +443,7 @@
<span class="lt-frame-bl"></span>
<span class="lt-frame-br"></span>
<div class="lt-section-header">Pending</div>
<div class="lt-section-body">
<div class="lt-section-body" id="kanban-col-pending" style="min-height:60px">
<div class="lt-card lt-row-p2">
<div class="lt-flex lt-flex-between lt-mb-md">
<span class="lt-p2">P2</span>
@@ -460,7 +460,7 @@
<span class="lt-frame-bl"></span>
<span class="lt-frame-br"></span>
<div class="lt-section-header">In Progress</div>
<div class="lt-section-body">
<div class="lt-section-body" id="kanban-col-inprogress" style="min-height:60px">
<div class="lt-card lt-row-p2 lt-item-running">
<div class="lt-flex lt-flex-between lt-mb-md">
<span class="lt-p2">P2</span>
@@ -477,7 +477,7 @@
<span class="lt-frame-bl"></span>
<span class="lt-frame-br"></span>
<div class="lt-section-header">Closed</div>
<div class="lt-section-body">
<div class="lt-section-body" id="kanban-col-closed" style="min-height:60px">
<div class="lt-card lt-row-p4" style="opacity:0.6">
<div class="lt-flex lt-flex-between lt-mb-md">
<span class="lt-p4">P4</span>
@@ -724,15 +724,7 @@
<div class="lt-breadcrumb-sep"></div>
<div class="lt-breadcrumb-item active">NODE-07</div>
</nav>
<nav class="lt-pagination" aria-label="pagination">
<button class="lt-page-btn" disabled>&laquo;</button>
<button class="lt-page-btn" disabled>1</button>
<button class="lt-page-btn active">2</button>
<button class="lt-page-btn">3</button>
<button class="lt-page-btn">4</button>
<button class="lt-page-btn">5</button>
<button class="lt-page-btn">&raquo;</button>
</nav>
<nav class="lt-pagination" id="demo-pagination" aria-label="pagination"></nav>
</div>
<!-- ACCORDION -->
@@ -1573,7 +1565,7 @@ Storage array link-down on `compute-storage-01`.
lt.tooltip.init();
// Clipboard copy buttons ([data-copy])
lt.clipboard.init();
lt.clipboard.initCopyButtons();
// Alert dismiss buttons
lt.alerts.init();
@@ -1691,6 +1683,18 @@ Storage array link-down on `compute-storage-01`.
},
});
// Kanban drag-and-drop — all four columns share group "kanban"
['kanban-col-open','kanban-col-pending','kanban-col-inprogress','kanban-col-closed'].forEach(id => {
const col = document.getElementById(id);
if (col) lt.sortable.init(col, { group: 'kanban', onSort: () => {} });
});
// Pagination demo (50 items, 10 per page)
lt.pagination.init('#demo-pagination', {
total: 50, perPage: 10, page: 2,
onChange: p => lt.toast.info('Page ' + p),
});
// Countdown demo — SLA expires 2 hours from now
const slaTarget = new Date(Date.now() + 2 * 60 * 60 * 1000);
lt.timer.countdown(document.getElementById('demo-countdown'), slaTarget, {