domma-cms 0.1.0

package/admin/js/lib/card.js

@@ -0,0 +1,63 @@
+/**
+ * Card Builder — admin utility for creating Domma-styled card elements.
+ *
+ * Usage:
+ *   import { buildCard, wrapInCard } from '/admin/js/lib/card.js';
+ *
+ *   const card = buildCard({ title: 'My Card', content: '<p>Body</p>' });
+ *   document.getElementById('container').appendChild(card);
+ *
+ *   // Or wrap an existing element
+ *   wrapInCard(document.getElementById('my-table'), { title: 'Results' });
+ */
+
+/**
+ * Build a card element.
+ *
+ * @param {object}             [opts]
+ * @param {string}             [opts.title]     - Card header title (omit for no header)
+ * @param {string|HTMLElement} [opts.content]   - Body: HTML string (sanitised via Domma) or DOM element
+ * @param {string}             [opts.className] - Extra classes on the outer card div (default: 'mb-4')
+ * @param {string}             [opts.id]        - ID attribute on the outer card div
+ * @returns {HTMLElement}
+ */
+export function buildCard({ title = '', content = '', className = 'mb-4', id = '' } = {}) {
+    const card = document.createElement('div');
+    card.className = `card ${className}`.trim();
+    if (id) card.id = id;
+
+    if (title) {
+        const header = document.createElement('div');
+        header.className = 'card-header';
+        const h2 = document.createElement('h2');
+        h2.textContent = title;
+        header.appendChild(h2);
+        card.appendChild(header);
+    }
+
+    const body = document.createElement('div');
+    body.className = 'card-body';
+    if (content instanceof Node) {
+        body.appendChild(content);
+    } else if (typeof content === 'string' && content) {
+        // Use Domma's $(…).html() which passes content through DOMPurify
+        $(body).html(content);
+    }
+    card.appendChild(body);
+
+    return card;
+}
+
+/**
+ * Wrap an existing DOM element in a card, replacing it in the DOM.
+ *
+ * @param {HTMLElement} element
+ * @param {object}      [opts] - Same options as buildCard (excluding `content`)
+ * @returns {HTMLElement} the card element
+ */
+export function wrapInCard(element, opts = {}) {
+    const card = buildCard(opts);
+    element.parentNode?.insertBefore(card, element);
+    card.querySelector('.card-body').appendChild(element);
+    return card;
+}