Merge pull request #39 from viivue/staging-dev-logs

Add dev mode
viivue · Oct 20, 2024 · 72b57c8 · 72b57c8
2 parents 9681fb8 + 623365a
commit 72b57c8
Show file tree

Hide file tree

Showing 5 changed files with 66 additions and 12 deletions.
diff --git a/dev/md/methods.md b/dev/md/methods.md
@@ -4,10 +4,11 @@
 
 #### Global methods
 
-| Name                                | Description          | 
-|-------------------------------------|----------------------|
-| `EasyPopup.init(selector, options)` | Init a popup         |
-| `EasyPopup.get(popupId)`            | Get a popup instance |
+| Name                                | Description                                  | 
+|-------------------------------------|----------------------------------------------|
+| `EasyPopup.init(selector, options)` | Init a popup                                 |
+| `EasyPopup.get(popupId)`            | Get a popup instance                         |
+| `EasyPopup.setDev(isDev)`           | Enable/disable dev mode to see console logs. |
 
 #### Instance methods
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/src/_index.js b/src/_index.js
@@ -13,6 +13,7 @@ class Popup{
     constructor(el, options){
         if(!el){
             console.warn('Init popup fail due to empty input!');
+            this.id = -1;
             return;
         }
 
@@ -25,11 +26,15 @@ class Popup{
         this.idType = 'auto-id';
 
         // skip double init
-        if(this.el.classList.contains(CLASSES.processed)) return;
+        if(this.el.classList.contains(CLASSES.processed)){
+            // if(EasyPopupData.dev) console.log('Popup already processed:', this.id);
+            this.id = -1;
+            return;
+        }
 
         // init events manager
         this.events = new EventsManager(this, {
-            names: ['onClose', 'onOpen']
+            names: ['onClose', 'onOpen', 'onInit']
         });
 
         // get options id from attribute
@@ -62,15 +67,23 @@ class Popup{
             console.warn(`Popup ID should be a string, consider adding a prefix to your ID to avoid unexpected issue, your ID:`, this.id);
         }
 
+        /** DONE GETTING OPTIONS **/
+
+        /** ------ **/
+
+        /** COOKIE **/
+
         // cookie
         this.cookie = this.options.cookie ? new PiaEasyPopup(this) : null;
 
+        /** HTML **/
         this.masterContainer = document.querySelector(`.${CLASSES.master}`);
 
         // generate html
         this.outer = undefined;
         generateHTML(this);
 
+        /** AUTO SHOW **/
         // auto show
         if(this.options.autoShow !== false){
             // if Pia exists, check showing status from Pia
@@ -85,8 +98,14 @@ class Popup{
             }
         }
 
+        /** LENIS **/
         // lenis integrate
         this.lenis = new LenisEasyPopup(this);
+
+
+        /** INIT COMPLETE **/
+        if(EasyPopupData.dev) console.log('Popup initialized:', this.id);
+        this.events.fire('onInit');
     }
 
     /******************************
@@ -122,10 +141,14 @@ class Popup{
                 // prevent with Lenis
                 this.root.classList.add(CLASSES.preventScrollLenis);
                 this.lenis.stop();
+
+                if(EasyPopupData.dev) console.log('Disable scroll with Lenis');
             }else{
                 // prevent via CSS
                 this.root.classList.add(CLASSES.preventScroll);
                 this.root.style.setProperty('--ep-scroll-bar-w', `${getScrollbarWidth(this)}px`);
+
+                if(EasyPopupData.dev) console.log('Disable scroll with CSS');
             }
         }
 
@@ -134,6 +157,7 @@ class Popup{
         this.cookie?.onPopupOpen();
 
         // event
+        if(EasyPopupData.dev) console.log('Popup opened:', this.id);
         this.events.fire('onOpen');
     }
 
@@ -161,10 +185,13 @@ class Popup{
                         // prevent via CSS
                         this.root.classList.remove(CLASSES.preventScroll);
                     }
+
+                    if(EasyPopupData.dev) console.log('Enable scroll.');
                 }
             }
 
             // event
+            if(EasyPopupData.dev) console.log('Popup closed:', this.id);
             this.events.fire('onClose');
         }, 300);
     }
@@ -183,15 +210,36 @@ class PopupController{
     constructor(){
         this.active = '';
         this.popups = [];
+        this.nodeEnv = process.env.NODE_ENV; // 'development' or 'production'
+        this.dev = this.getDev();
     }
 
     add(popup){
-        this.popups.push(popup);
+        if(popup.id !== -1) this.popups.push(popup);
     }
 
     get(id){
         return this.popups.filter(popup => popup.id === id)[0];
     }
+
+    setDev(isDev){
+        // save the dev status to session storage
+        sessionStorage.setItem('easy-popup-dev', isDev);
+
+        this.dev = isDev;
+
+        console.info(`EasyPopup: Dev mode is ${isDev ? 'enabled' : 'disabled'} for this session. Please refresh the page to take full effect.`);
+    }
+
+    getDev(){
+        // if session storage is not available, check dev mode from NODE_ENV
+        if(sessionStorage.getItem('easy-popup-dev') === null){
+            // by default, true for development, false for production
+            return this.nodeEnv === 'development';
+        }
+
+        return sessionStorage.getItem('easy-popup-dev') === 'true';
+    }
 }
 
 
@@ -211,7 +259,10 @@ window.EasyPopup = {
         document.querySelectorAll(selector).forEach(el => window.EasyPopupData.add(new Popup(el, options)));
     },
     // Get instance object by ID
-    get: id => window.EasyPopupData.get(id)
+    get: id => window.EasyPopupData.get(id),
+
+    // Set global default options
+    setDev: isDev => window.EasyPopupData.setDev(isDev),
 };
 
 // init

diff --git a/src/configs.js b/src/configs.js
@@ -33,8 +33,6 @@ export const ATTRS = {
  * Defaults
  * */
 export const DEFAULTS = {
-    // set dev to true when run production
-    dev: process.env.NODE_ENV === 'development', // development mode
     version: packageInfo.version,
 
     outerClass: '',

diff --git a/src/pia-easy-popup.js b/src/pia-easy-popup.js
@@ -55,20 +55,24 @@ class PiaEasyPopup{
     }
 
     getVal(){
+        if(EasyPopupData.dev) console.log('Cookie get:', this.popupId, this.key, Pia.get(this.key));
         return Pia.get(this.key);
     }
 
     setVal(val){
         // save the new record
         Pia.set(this.key, val, this.piaOptions);
+        if(EasyPopupData.dev) console.log('Cookie set:', this.popupId, this.key, val);
     }
 
     updateVal(val){
         Pia.update(this.key, val);
+        if(EasyPopupData.dev) console.log('Cookie updated:', this.popupId, this.key, val);
     }
 
     remove(){
         Pia.remove(this.key);
+        if(EasyPopupData.dev) console.log('Cookie removed:', this.popupId, this.key);
     }
 }