webcimes-modal 2.0.2 → 2.2.0

package/src/ts/webcimes-modal.d.ts

@@ -29,14 +29,22 @@ export interface Options {
     width: string;
     /** height (specify unit), default "auto" */
     height: string;
+    /** html for header (overrides titleHtml), default "null" */
+    headerHtml: string | HTMLElement | (() => HTMLElement) | null;
     /** html for title, default "null" */
-    titleHtml: string | null;
+    titleHtml: string | HTMLElement | (() => HTMLElement) | null;
     /** html for body, default "null" */
-    bodyHtml: string | null;
+    bodyHtml: string | HTMLElement | (() => HTMLElement) | null;
+    /** html for footer (overrides buttonCancelHtml and buttonConfirmHtml), default "null" */
+    footerHtml: string | HTMLElement | (() => HTMLElement) | null;
     /** html for cancel button, default "null" */
-    buttonCancelHtml: string | null;
+    buttonCancelHtml: string | HTMLElement | (() => HTMLElement) | null;
     /** html for confirm button, default "null" */
-    buttonConfirmHtml: string | null;
+    buttonConfirmHtml: string | HTMLElement | (() => HTMLElement) | null;
+    /** add extra css classes to cancel button, default "[]" */
+    buttonCancelClass: string[];
+    /** add extra css classes to confirm button, default "[]" */
+    buttonConfirmClass: string[];
     /** close modal after trigger cancel button, default "true" */
     closeOnCancelButton: boolean;
     /** close modal after trigger confirm button, default "true" */
@@ -53,10 +61,6 @@ export interface Options {
     moveFromBody: boolean;
     /** if allowMovement is set to "true", ability to move modal from footer, default "true" */
     moveFromFooter: boolean;
-    /** keep header sticky (visible) when scrolling, default "true" */
-    stickyHeader: boolean;
-    /** keep footer sticky (visible) when scrolling, default "true" */
-    stickyFooter: boolean;
     /** add extra css style to modal, default null */
     style: string | null;
     /** "animDropDown" or "animFadeIn" for show animation, default "animDropDown" */

package/src/ts/webcimes-modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"webcimes-modal.d.ts","sourceRoot":"","sources":["webcimes-modal.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAIH;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IACX,aAAa;IACb,UAAU,2BAA2B;QACjC,UAAU,EAAE,WAAW,CAAC;QACxB,SAAS,EAAE,WAAW,CAAC;QACvB,aAAa,EAAE,WAAW,CAAC;QAC3B,YAAY,EAAE,WAAW,CAAC;QAC1B,cAAc,EAAE,WAAW,CAAC;QAC5B,eAAe,EAAE,WAAW,CAAC;KAChC;CACJ;AAED;;GAEG;AACH,MAAM,WAAW,OAAO;IACpB,qDAAqD;IACrD,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,wDAAwD;IACxD,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,2CAA2C;IAC3C,KAAK,EAAE,MAAM,CAAC;IACd,4CAA4C;IAC5C,MAAM,EAAE,MAAM,CAAC;IACf,qCAAqC;IACrC,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,oCAAoC;IACpC,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,6CAA6C;IAC7C,gBAAgB,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,8CAA8C;IAC9C,iBAAiB,EAAE,MAAM,GAAG,IAAI,CAAC;IACjC,8DAA8D;IAC9D,mBAAmB,EAAE,OAAO,CAAC;IAC7B,+DAA+D;IAC/D,oBAAoB,EAAE,OAAO,CAAC;IAC9B,wCAAwC;IACxC,eAAe,EAAE,OAAO,CAAC;IACzB,oEAAoE;IACpE,iBAAiB,EAAE,OAAO,CAAC;IAC3B,4CAA4C;IAC5C,aAAa,EAAE,OAAO,CAAC;IACvB,2FAA2F;IAC3F,cAAc,EAAE,OAAO,CAAC;IACxB,0FAA0F;IAC1F,YAAY,EAAE,OAAO,CAAC;IACtB,2FAA2F;IAC3F,cAAc,EAAE,OAAO,CAAC;IACxB,kEAAkE;IAClE,YAAY,EAAE,OAAO,CAAC;IACtB,kEAAkE;IAClE,YAAY,EAAE,OAAO,CAAC;IACtB,iDAAiD;IACjD,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,gFAAgF;IAChF,eAAe,EAAE,cAAc,GAAG,YAAY,CAAC;IAC/C,gFAAgF;IAChF,kBAAkB,EAAE,YAAY,GAAG,aAAa,CAAC;IACjD,8CAA8C;IAC9C,iBAAiB,EAAE,MAAM,CAAC;IAC1B,iCAAiC;IACjC,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,gCAAgC;IAChC,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,oCAAoC;IACpC,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,mCAAmC;IACnC,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,8CAA8C;IAC9C,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,+CAA+C;IAC/C,eAAe,EAAE,MAAM,IAAI,CAAC;CAC/B;AAED;;;GAGG;AACH,MAAM,WAAW,aAAa;IAC1B,gDAAgD;IAChD,MAAM,EAAE,WAAW,CAAC;IACpB,+CAA+C;IAC/C,KAAK,EAAE,WAAW,CAAC;IACnB,gCAAgC;IAChC,OAAO,IAAI,IAAI,CAAC;CACnB;AA8eD;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,OAAO,EAAE,OAAO,CAAC,OAAO,CAAC,GAAG,aAAa,CAE5E"}
+{"version":3,"file":"webcimes-modal.d.ts","sourceRoot":"","sources":["webcimes-modal.ts"],"names":[],"mappings":"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"}

package/src/ts/webcimes-modal.ts

@@ -33,14 +33,22 @@ export interface Options {
     width: string;
     /** height (specify unit), default "auto" */
     height: string;
+    /** html for header (overrides titleHtml), default "null" */
+    headerHtml: string | HTMLElement | (() => HTMLElement) | null;
     /** html for title, default "null" */
-    titleHtml: string | null;
+    titleHtml: string | HTMLElement | (() => HTMLElement) | null;
     /** html for body, default "null" */
-    bodyHtml: string | null;
+    bodyHtml: string | HTMLElement | (() => HTMLElement) | null;
+    /** html for footer (overrides buttonCancelHtml and buttonConfirmHtml), default "null" */
+    footerHtml: string | HTMLElement | (() => HTMLElement) | null;
     /** html for cancel button, default "null" */
-    buttonCancelHtml: string | null;
+    buttonCancelHtml: string | HTMLElement | (() => HTMLElement) | null;
     /** html for confirm button, default "null" */
-    buttonConfirmHtml: string | null;
+    buttonConfirmHtml: string | HTMLElement | (() => HTMLElement) | null;
+    /** add extra css classes to cancel button, default "[]" */
+    buttonCancelClass: string[];
+    /** add extra css classes to confirm button, default "[]" */
+    buttonConfirmClass: string[];
     /** close modal after trigger cancel button, default "true" */
     closeOnCancelButton: boolean;
     /** close modal after trigger confirm button, default "true" */
@@ -57,10 +65,6 @@ export interface Options {
     moveFromBody: boolean;
     /** if allowMovement is set to "true", ability to move modal from footer, default "true" */
     moveFromFooter: boolean;
-    /** keep header sticky (visible) when scrolling, default "true" */
-    stickyHeader: boolean;
-    /** keep footer sticky (visible) when scrolling, default "true" */
-    stickyFooter: boolean;
     /** add extra css style to modal, default null */
     style: string | null;
     /** "animDropDown" or "animFadeIn" for show animation, default "animDropDown" */
@@ -228,6 +232,194 @@ class WebcimesModalImpl implements WebcimesModal {
         this.modal.style.removeProperty('top');
     };
 
+    /**
+     * Helper method to set content on an element (string, HTMLElement, or function)
+     */
+    private setElementContent(
+        element: HTMLElement,
+        content: string | HTMLElement | (() => HTMLElement),
+    ): void {
+        if (typeof content === 'string') {
+            element.innerHTML = content;
+        } else if (typeof content === 'function') {
+            element.appendChild(content());
+        } else {
+            element.appendChild(content);
+        }
+    }
+
+    /**
+     * Build modal header with content
+     */
+    private buildHeader(): HTMLElement | null {
+        // Check if header should be created
+        if (!this.options.headerHtml && !this.options.titleHtml) {
+            return null;
+        }
+
+        // Create header element with common classes
+        const header = document.createElement('div');
+        header.className = 'webcimes-modal__header';
+
+        if (this.options.moveFromHeader) {
+            header.classList.add('webcimes-modal__header--is-movable');
+        }
+
+        // If headerHtml is provided, use it directly (full control)
+        if (this.options.headerHtml) {
+            this.setElementContent(header, this.options.headerHtml);
+            return header;
+        }
+
+        // Otherwise, create title and/or close button
+        if (this.options.titleHtml) {
+            const title = document.createElement('div');
+            title.className = 'webcimes-modal__title';
+            this.setElementContent(title, this.options.titleHtml);
+            header.appendChild(title);
+        }
+
+        return header;
+    }
+
+    /**
+     * Build modal body with content
+     */
+    private buildBody(): HTMLElement | null {
+        if (!this.options.bodyHtml) {
+            return null;
+        }
+
+        const body = document.createElement('div');
+        body.className = 'webcimes-modal__body';
+
+        if (this.options.moveFromBody) {
+            body.classList.add('webcimes-modal__body--is-movable');
+        }
+
+        this.setElementContent(body, this.options.bodyHtml);
+
+        return body;
+    }
+
+    /**
+     * Build modal footer with content
+     */
+    private buildFooter(): HTMLElement | null {
+        // Check if footer should be created
+        if (
+            !this.options.footerHtml &&
+            !this.options.buttonCancelHtml &&
+            !this.options.buttonConfirmHtml
+        ) {
+            return null;
+        }
+
+        // Create footer element with common classes
+        const footer = document.createElement('div');
+        footer.className = 'webcimes-modal__footer';
+
+        if (this.options.moveFromFooter) {
+            footer.classList.add('webcimes-modal__footer--is-movable');
+        }
+
+        // If footerHtml is provided, use it directly (full control)
+        if (this.options.footerHtml) {
+            this.setElementContent(footer, this.options.footerHtml);
+            return footer;
+        }
+
+        // Otherwise, create buttons wrapper
+        const buttonsWrapper = document.createElement('div');
+        buttonsWrapper.className = 'webcimes-modal__footer-buttons';
+
+        if (this.options.buttonCancelHtml) {
+            const cancelButton = document.createElement('button');
+            cancelButton.className =
+                'webcimes-modal__button webcimes-modal__footer-button webcimes-modal__footer-button--cancel';
+            if (this.options.buttonCancelClass.length > 0) {
+                cancelButton.classList.add(...this.options.buttonCancelClass);
+            }
+            if (this.options.closeOnCancelButton) {
+                cancelButton.classList.add('webcimes-modal__close');
+            }
+            this.setElementContent(cancelButton, this.options.buttonCancelHtml);
+            buttonsWrapper.appendChild(cancelButton);
+        }
+
+        if (this.options.buttonConfirmHtml) {
+            const confirmButton = document.createElement('button');
+            confirmButton.className =
+                'webcimes-modal__button webcimes-modal__footer-button webcimes-modal__footer-button--confirm';
+            if (this.options.buttonConfirmClass.length > 0) {
+                confirmButton.classList.add(...this.options.buttonConfirmClass);
+            }
+            if (this.options.closeOnConfirmButton) {
+                confirmButton.classList.add('webcimes-modal__close');
+            }
+            this.setElementContent(confirmButton, this.options.buttonConfirmHtml);
+            buttonsWrapper.appendChild(confirmButton);
+        }
+
+        footer.appendChild(buttonsWrapper);
+
+        return footer;
+    }
+
+    /**
+     * Build close button
+     */
+    private buildCloseButton(): HTMLElement {
+        const closeButton = document.createElement('button');
+        closeButton.className =
+            'webcimes-modal__button webcimes-modal__close-button webcimes-modal__close';
+        closeButton.setAttribute('aria-label', 'Close modal');
+        closeButton.innerHTML =
+            '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M193.94 256L296.5 153.44l21.15-21.15c3.12-3.12 3.12-8.19 0-11.31l-22.63-22.63c-3.12-3.12-8.19-3.12-11.31 0L160 222.06 36.29 98.34c-3.12-3.12-8.19-3.12-11.31 0L2.34 120.97c-3.12 3.12-3.12 8.19 0 11.31L126.06 256 2.34 379.71c-3.12 3.12-3.12 8.19 0 11.31l22.63 22.63c3.12 3.12 8.19 3.12 11.31 0L160 289.94 262.56 392.5l21.15 21.15c3.12 3.12 8.19 3.12 11.31 0l22.63-22.63c3.12-3.12 3.12-8.19 0-11.31L193.94 256z"/></svg>';
+        return closeButton;
+    }
+
+    /**
+     * Build complete modal with content
+     */
+    private buildModal(): HTMLElement {
+        const modal = document.createElement('div');
+        modal.className = `webcimes-modal ${this.options.animationOnShow}`;
+
+        // ARIA attributes for accessibility
+        modal.setAttribute('role', 'dialog');
+        modal.setAttribute('aria-modal', 'true');
+
+        if (this.options.setClass) {
+            modal.classList.add(this.options.setClass);
+        }
+        if (this.options.setId) {
+            modal.id = this.options.setId;
+        }
+
+        const header = this.buildHeader();
+        if (header) {
+            modal.appendChild(header);
+        }
+
+        const body = this.buildBody();
+        if (body) {
+            modal.appendChild(body);
+        }
+
+        const footer = this.buildFooter();
+        if (footer) {
+            modal.appendChild(footer);
+        }
+
+        // Add close button at modal level (always present and independent)
+        if (this.options.showCloseButton) {
+            modal.appendChild(this.buildCloseButton());
+        }
+
+        return modal;
+    }
+
     /**
      * Create modal
      */
@@ -238,10 +430,14 @@ class WebcimesModalImpl implements WebcimesModal {
             setClass: null,
             width: 'auto',
             height: 'auto',
+            headerHtml: null,
             titleHtml: null,
             bodyHtml: null,
+            footerHtml: null,
             buttonCancelHtml: null,
             buttonConfirmHtml: null,
+            buttonCancelClass: [],
+            buttonConfirmClass: [],
             closeOnCancelButton: true,
             closeOnConfirmButton: true,
             showCloseButton: true,
@@ -250,8 +446,6 @@ class WebcimesModalImpl implements WebcimesModal {
             moveFromHeader: true,
             moveFromBody: false,
             moveFromFooter: true,
-            stickyHeader: true,
-            stickyFooter: true,
             style: null,
             animationOnShow: 'animDropDown',
             animationOnDestroy: 'animDropUp',
@@ -273,14 +467,10 @@ class WebcimesModalImpl implements WebcimesModal {
      * Initialization of the current modal
      */
     private init() {
-        // Create modals
+        // Create modals container
         if (!document.querySelector('.webcimes-modals')) {
-            // Create modals
-            document.body.insertAdjacentHTML(
-                'beforeend',
-                '<div class="webcimes-modals animFadeIn"></div>',
-            );
-            this.modals = <HTMLElement>document.querySelector('.webcimes-modals');
+            this.modals = document.createElement('div');
+            this.modals.className = 'webcimes-modals animFadeIn';
 
             // Set animation duration for modals
             this.modals.style.setProperty(
@@ -288,6 +478,8 @@ class WebcimesModalImpl implements WebcimesModal {
                 this.options.animationDuration + 'ms',
             );
 
+            document.body.appendChild(this.modals);
+
             // Delete enter animation after animation delay
             setTimeout(() => {
                 this.modals.classList.remove('animFadeIn');
@@ -300,80 +492,9 @@ class WebcimesModalImpl implements WebcimesModal {
             this.modals.classList.remove('animFadeOut');
         }
 
-        // Create modal
-        this.modals.insertAdjacentHTML(
-            'beforeend',
-            `<div class="webcimes-modal ` +
-                (this.options.setClass ? this.options.setClass : '') +
-                ` ` +
-                this.options.animationOnShow +
-                `" ` +
-                (this.options.setId ? 'id="' + this.options.setId + '"' : '') +
-                `>
-				` +
-                (this.options.titleHtml || this.options.showCloseButton
-                    ? `<div class="webcimes-modal__header ` +
-                      (this.options.stickyHeader ? 'webcimes-modal__header--is-sticky' : '') +
-                      ` ` +
-                      (this.options.moveFromHeader ? 'webcimes-modal__header--is-movable' : '') +
-                      `">
-						` +
-                      (this.options.titleHtml
-                          ? '<div class="webcimes-modal__title">' +
-                            this.options.titleHtml +
-                            '</div>'
-                          : '') +
-                      `
-						` +
-                      (this.options.showCloseButton
-                          ? '<button class="webcimes-modal__button webcimes-modal__header-close webcimes-modal__close"></button>'
-                          : '') +
-                      `
-					</div>`
-                    : '') +
-                `
-				` +
-                (this.options.bodyHtml
-                    ? `<div class="webcimes-modal__body ` +
-                      (this.options.moveFromBody ? '.webcimes-modal__body--is-movable' : '') +
-                      `">
-						` +
-                      this.options.bodyHtml +
-                      `
-					</div>`
-                    : '') +
-                `
-				` +
-                (this.options.buttonCancelHtml || this.options.buttonConfirmHtml
-                    ? `<div class="webcimes-modal__footer ` +
-                      (this.options.stickyFooter ? '.webcimes-modal__footer--is-sticky' : '') +
-                      ` ` +
-                      (this.options.moveFromFooter ? 'webcimes-modal__footer--is-movable' : '') +
-                      `">
-						` +
-                      (this.options.buttonCancelHtml
-                          ? '<button class="webcimes-modal__button webcimes-modal__footer-button webcimes-modal__footer-button--cancel ' +
-                            (this.options.closeOnCancelButton ? 'webcimes-modal__close' : '') +
-                            '">' +
-                            this.options.buttonCancelHtml +
-                            '</button>'
-                          : '') +
-                      `
-						` +
-                      (this.options.buttonConfirmHtml
-                          ? '<button class="webcimes-modal__button webcimes-modal__footer-button webcimes-modal__footer-button--confirm ' +
-                            (this.options.closeOnConfirmButton ? 'webcimes-modal__close' : '') +
-                            '">' +
-                            this.options.buttonConfirmHtml +
-                            '</button>'
-                          : '') +
-                      `
-					</div>`
-                    : '') +
-                `
-			</div>`,
-        );
-        this.modal = <HTMLElement>this.modals.lastElementChild;
+        // Create modal with content
+        this.modal = this.buildModal();
+        this.modals.appendChild(this.modal);
 
         // Callback before show modal (set a timeout of zero, to wait for some dom to load)
         setTimeout(() => {
@@ -398,7 +519,6 @@ class WebcimesModalImpl implements WebcimesModal {
         }, this.options.animationDuration);
 
         // Width of modal
-        this.modal.style.setProperty('max-width', '90%');
         if (this.options.width != 'auto' && this.options.width) {
             this.modal.style.setProperty('width', this.options.width);
         } else {
@@ -407,7 +527,6 @@ class WebcimesModalImpl implements WebcimesModal {
         }
 
         // Height of modal
-        this.modal.style.setProperty('max-height', '90%');
         if (this.options.height != 'auto' && this.options.height) {
             this.modal.style.setProperty('height', this.options.height);
         } else {

package/test/script.js

@@ -3,9 +3,10 @@ import { createWebcimesModal } from '../dist/js/webcimes-modal.esm.js';
 
 // Wait for dom content loaded
 document.addEventListener('DOMContentLoaded', function () {
+    // Example 1: Simple modal with string content
     let modal1 = createWebcimesModal({
         titleHtml: 'My title',
-        bodyHtml: 'My Body',
+        bodyHtml: 'My Body - Click on body to open modal 2',
         afterDestroy: () => {
             console.log('destroy modal 1');
         },
@@ -16,12 +17,40 @@ document.addEventListener('DOMContentLoaded', function () {
             console.log('event');
         });
 
+        // Example 2: Modal with HTMLElement
+        const bodyElement = document.createElement('div');
+        bodyElement.innerHTML = '<strong>My Body 2</strong><br>This uses an HTMLElement';
+
         createWebcimesModal({
             titleHtml: 'My title 2',
-            bodyHtml: 'My Body 2',
+            bodyHtml: bodyElement,
+            buttonCancelHtml: 'Cancel',
+            buttonConfirmHtml: 'Confirm',
             afterDestroy: () => {
                 console.log('after destroy modal 2');
             },
         });
     });
+
+    // Example 3: Modal with custom header and footer
+    createWebcimesModal({
+        headerHtml: () => {
+            const header = document.createElement('div');
+            header.innerHTML =
+                '<h2>Custom Header</h2><p style="font-size: 12px;">With subtitle</p>';
+            return header;
+        },
+        bodyHtml: 'Body with custom header and footer',
+        footerHtml: () => {
+            const footer = document.createElement('div');
+            footer.style.textAlign = 'center';
+            footer.innerHTML =
+                '<button class="webcimes-modal__close" style="padding: 10px 20px;">Close Me</button>';
+            return footer;
+        },
+        showCloseButton: true, // Close button still appears
+    });
+    createWebcimesModal({
+        bodyHtml: 'This modal has no header and footer, only body content.',
+    });
 });