@massimo-cassandro/minimo 1.5.7 → 1.5.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@massimo-cassandro/minimo",
-  "version": "1.5.7",
+  "version": "1.5.9",
   "description": "Light css framework & utilities",
   "type": "module",
   "homepage": "https://github.com/massimo-cassandro/minimo#readme",

package/src/components/modal-alert/defaults.js

@@ -3,9 +3,10 @@ export const defaults = {
   // settings to be applied to all dialog types
   // can be reassigned on single types
   globals: {
+    extra_class: null,
     onOpen: null,
     onClose: null,
-    cssFile: null,    // css file to be automatically loaded
+    cssFile: null,    // css file to be automatically loaded // TODO remove
     animation: true,
     showMarks: true,
     callback: null,

package/src/components/modal-alert/modal-alert.js

@@ -65,7 +65,7 @@ export default function (params, custom_defaults = {}, marks = default_marks) {
     const closedByAny = ['success', 'info'].indexOf(params.type) !== -1? ' closedBy="any"' : '';
 
     document.body.insertAdjacentHTML('beforeend',
-      `<dialog class="modal-alert modal-alert-${params.type}${params.animation? ' modal-alert-animated' : ''}"${closedByAny}>
+      `<dialog class="modal-alert modal-alert-${params.type}${params.animation? ' modal-alert-animated' : ''} ${params.extra_class??''}"${closedByAny}>
         <div class="malert-inner">
           ${params.showMarks? `<div class="malert-mark">${icon}</div>` : ''}
           <div class="malert-body">

package/src/components/modal-popup/modal-popup.js

@@ -11,11 +11,11 @@ import * as styles from './modal-popup.module.css';
 
 let dialogEl, dialogContentEl;
 
-function closeDialog() {
-  dialogEl.classList.remove(styles.on);
+function closeDialog(el) {
+  el.classList.remove(styles.on);
 
-  dialogEl.addEventListener('transitionend', () => {
-    dialogEl.close();
+  el.addEventListener('transitionend', () => {
+    el.close();
   }, { once: true });
 }
 
@@ -165,39 +165,41 @@ export function modalPopup({
     }
   ], document.body);
 
+  // snapshot: dialogEl potrebbe essere sovrascritto da una seconda chiamata a modalPopup
+  const thisDialog = dialogEl;
 
   // listener sul pulsante di chiusura
-  dialogEl.querySelector(`.${styles.closeButton}`).addEventListener('click', () => {
-    closeDialog();
+  thisDialog.querySelector(`.${styles.closeButton}`).addEventListener('click', () => {
+    closeDialog(thisDialog);
   }, false);
 
   // // Esc e clic sul backdrop
-  // dialogEl.addEventListener('cancel', (e) => {
+  // thisDialog.addEventListener('cancel', (e) => {
   //   e.preventDefault();
-  //   closeDialog();
+  //   closeDialog(thisDialog);
   // }, false);
 
 
 
-  dialogEl.addEventListener('close', () => {
+  thisDialog.addEventListener('close', () => {
 
     document.body.classList.remove('overflow-hidden');
 
     if(closeCallback) {
-      closeCallback(dialogEl);
+      closeCallback(thisDialog);
     }
-    dialogEl.remove();
+    thisDialog.remove();
 
   }, false);
 
 
   document.body.classList.add('overflow-hidden');
-  dialogEl.showModal();
-  dialogEl.focus();
+  thisDialog.showModal();
+  thisDialog.focus();
 
-  dialogEl.classList.add(styles.on);
+  thisDialog.classList.add(styles.on);
 
 
-  return dialogEl;
+  return thisDialog;
 
 }