build: v1.0.0

viivue · Oct 17, 2023 · ac0d365 · ac0d365
1 parent 9711136
commit ac0d365
Show file tree

Hide file tree

Showing 4 changed files with 158 additions and 152 deletions.
diff --git a/dist/easy-popup.css b/dist/easy-popup.css
@@ -186,25 +186,25 @@ html:not(.easy-popup-open) .easy-popup-master {
     transform: scale(0.98) translate(0, 50px);
   }
   .easy-popup.ep-mobile-layout .easy-popup-overflow {
-      overflow:hidden;
-      display:flex;
+    overflow: hidden;
+    display: flex;
+  }
+  .easy-popup.ep-mobile-layout .easy-popup-container {
+    padding: 0;
+    overflow: auto;
+    max-width: 100%;
+    height: var(--ep-mobile-height);
+    background: var(--ep-popup-bg);
+  }
+  .easy-popup.ep-mobile-layout .ep-close-button:not(.for-mobile-layout) {
+    display: none;
+  }
+  .easy-popup.ep-mobile-layout .ep-close-button.for-mobile-layout {
+    --ep-close-color: #000;
+    position: absolute;
+    top: 0;
+    transform: none;
   }
-    .easy-popup.ep-mobile-layout .easy-popup-container {
-        padding:0;
-        overflow:auto;
-        max-width:100%;
-        height:var(--ep-mobile-height);
-        background:var(--ep-popup-bg);
-    }
-    .easy-popup.ep-mobile-layout .ep-close-button:not(.for-mobile-layout) {
-        display:none;
-    }
-    .easy-popup.ep-mobile-layout .ep-close-button.for-mobile-layout {
-        --ep-close-color:#000;
-        position:absolute;
-        top:0;
-        transform:none;
-    }
 }
 /* prevent scroll */
 .ep-prevent-scroll {

diff --git a/dist/easy-popup.js b/dist/easy-popup.js
@@ -421,6 +421,106 @@ class LenisEasyPopup{
 }
 
 /* harmony default export */ const lenis_easy_popup = (LenisEasyPopup);
+;// CONCATENATED MODULE: ./src/helpers.js
+
+
+function initToggleTrigger(context){
+    // assign triggers via a[href="#id"], [toggle="id"]
+    let triggerSelector = `a[href="#${context.id}"], [${ATTRS.toggle}="${context.id}"]`;
+
+    // custom triggers
+    if(context.options.triggerSelector && context.options.triggerSelector.length){
+        triggerSelector += `, ${context.options.triggerSelector}`;
+    }
+
+    // look for triggers that link with this popup by id
+    assignToggle(context, document.querySelectorAll(triggerSelector));
+
+    // any triggers without id inside this popup will also toggle this popup
+    assignToggle(context, context.outer.querySelectorAll(`[${ATTRS.toggle}]`));
+}
+
+function assignToggle(context, triggers){
+    triggers.forEach(trigger => {
+        // avoid duplicate assign
+        if(trigger.classList.contains(CLASSES.triggerEnabled)) return;
+
+        trigger.addEventListener('click', e => {
+            e.preventDefault();
+            context.toggle();
+        });
+
+        trigger.classList.add(CLASSES.triggerEnabled);
+    });
+}
+
+
+/**
+ * Wrap element
+ * @param innerEl
+ * @param outerEl
+ * @returns {HTMLDivElement}
+ */
+function wrapElement(innerEl, outerEl = document.createElement('div')){
+    innerEl.parentNode.insertBefore(outerEl, innerEl);
+    outerEl.appendChild(innerEl);
+    return outerEl;
+}
+
+
+/**
+ * Get scrollbar width
+ * https://stackoverflow.com/a/986977/6453822
+ * @returns {number}
+ */
+function getScrollbarWidth(){
+    // Creating invisible container
+    const outer = document.createElement('div');
+    outer.style.visibility = 'hidden';
+    outer.style.overflow = 'scroll'; // forcing scrollbar to appear
+    outer.style.msOverflowStyle = 'scrollbar'; // needed for WinJS apps
+    document.body.appendChild(outer);
+
+    // Creating inner element and placing it in the container
+    const inner = document.createElement('div');
+    outer.appendChild(inner);
+
+    // Calculating difference between container's full width and the child width
+    const scrollbarWidth = (outer.offsetWidth - inner.offsetWidth);
+
+    // Removing temporary elements from the DOM
+    outer.parentNode.removeChild(outer);
+
+    return scrollbarWidth;
+}
+;// CONCATENATED MODULE: ./src/outside-click.js
+function initOutsideClick(context){
+    // detect outside click
+    context.outer.addEventListener('click', e => {
+        if(isClickOutsideContent(context, e)){
+            // is close
+            if(context.options.clickOutsideToClose){
+                context.close();
+            }
+        }
+    });
+}
+
+function isClickOutsideContent(context, event){
+    return !context.inner.contains(event.target);
+}
+
+;// CONCATENATED MODULE: ./src/keyboard.js
+function initKeyboard(context){
+    if(!context.options.keyboard) return;
+
+    // add event listener when press ESC
+    document.addEventListener('keyup', (e) => {
+        if(context.isOpen && e.key === 'Escape'){
+            context.close();
+        }
+    });
+}
 ;// CONCATENATED MODULE: ./node_modules/match-media-screen/dist/match-media-screen.module.js
 /**!
  * Match Media Screen v0.0.3
@@ -512,106 +612,53 @@ function addCloseButton(context){
     // sticky mobile close button
     context.container.insertAdjacentHTML('beforebegin', getButtonHtml(CLASSES.closeButton + ' for-mobile-layout'));
 }
-;// CONCATENATED MODULE: ./src/helpers.js
+;// CONCATENATED MODULE: ./src/html.js
 
 
-function initToggleTrigger(context){
-    // assign triggers via a[href="#id"], [toggle="id"]
-    let triggerSelector = `a[href="#${context.id}"], [${ATTRS.toggle}="${context.id}"]`;
 
-    // custom triggers
-    if(context.options.triggerSelector && context.options.triggerSelector.length){
-        triggerSelector += `, ${context.options.triggerSelector}`;
-    }
 
-    // look for triggers that link with this popup by id
-    assignToggle(context, document.querySelectorAll(triggerSelector));
 
-    // any triggers without id inside this popup will also toggle this popup
-    assignToggle(context, context.outer.querySelectorAll(`[${ATTRS.toggle}]`));
-}
-
-function assignToggle(context, triggers){
-    triggers.forEach(trigger => {
-        // avoid duplicate assign
-        if(trigger.classList.contains(CLASSES.triggerEnabled)) return;
 
-        trigger.addEventListener('click', e => {
-            e.preventDefault();
-            context.toggle();
-        });
+function generateHTML(context){
+    // check flag
+    if(context.el.classList.contains(CLASSES.processed)) return;
 
-        trigger.classList.add(CLASSES.triggerEnabled);
-    });
-}
-
-
-/**
- * Wrap element
- * @param innerEl
- * @param outerEl
- * @returns {HTMLDivElement}
- */
-function wrapElement(innerEl, outerEl = document.createElement('div')){
-    innerEl.parentNode.insertBefore(outerEl, innerEl);
-    outerEl.appendChild(innerEl);
-    return outerEl;
-}
-
-
-/**
- * Get scrollbar width
- * https://stackoverflow.com/a/986977/6453822
- * @returns {number}
- */
-function getScrollbarWidth(){
-    // Creating invisible container
-    const outer = document.createElement('div');
-    outer.style.visibility = 'hidden';
-    outer.style.overflow = 'scroll'; // forcing scrollbar to appear
-    outer.style.msOverflowStyle = 'scrollbar'; // needed for WinJS apps
-    document.body.appendChild(outer);
+    // relocate HTML to body tag
+    if(!context.masterContainer){
+        context.masterContainer = document.createElement('div');
+        context.masterContainer.classList.add(CLASSES.master);
+    }
+    document.querySelector('body').appendChild(context.masterContainer);
+    context.masterContainer.appendChild(context.el);
 
-    // Creating inner element and placing it in the container
-    const inner = document.createElement('div');
-    outer.appendChild(inner);
+    // inner
+    context.inner = wrapElement(context.el);
+    context.inner.classList.add(CLASSES.inner);
 
-    // Calculating difference between container's full width and the child width
-    const scrollbarWidth = (outer.offsetWidth - inner.offsetWidth);
+    // container
+    context.container = wrapElement(context.inner);
+    context.container.classList.add(CLASSES.container);
 
-    // Removing temporary elements from the DOM
-    outer.parentNode.removeChild(outer);
+    // overflow
+    context.overflow = wrapElement(context.container);
+    context.overflow.classList.add(CLASSES.overflow);
 
-    return scrollbarWidth;
-}
-;// CONCATENATED MODULE: ./src/keyboard.js
-function initKeyboard(context){
-    if(!context.options.keyboard) return;
+    // outer
+    context.outer = wrapElement(context.overflow);
+    context.outer.classList.add(CLASSES.outer);
+    if(context.options.outerClass) context.outer.classList.add(context.options.outerClass);
+    context.outer.setAttribute(ATTRS.id, context.id);
 
-    // add event listener when press ESC
-    document.addEventListener('keyup', (e) => {
-        if(context.isOpen && e.key === 'Escape'){
-            context.close();
-        }
-    });
-}
-;// CONCATENATED MODULE: ./src/outside-click.js
-function initOutsideClick(context){
-    // detect outside click
-    context.outer.addEventListener('click', e => {
-        if(isClickOutsideContent(context, e)){
-            // is close
-            if(context.options.clickOutsideToClose){
-                context.close();
-            }
-        }
-    });
-}
+    initOutsideClick(context);
+    initKeyboard(context);
+    initTheme(context);
+    initMobileLayout(context); // must call after initTheme()
+    addCloseButton(context);
+    initToggleTrigger(context); // call at last
 
-function isClickOutsideContent(context, event){
-    return !context.inner.contains(event.target);
+    // done init
+    context.el.classList.add(CLASSES.processed, CLASSES.content);
 }
-
 ;// CONCATENATED MODULE: ./src/_index.js
 
 
@@ -621,8 +668,6 @@ function isClickOutsideContent(context, event){
 
 
 
-
-
 /**
  * Private class
  */
@@ -684,7 +729,9 @@ class Popup{
 
         this.masterContainer = document.querySelector(`.${CLASSES.master}`);
 
-        this.generateHTML();
+        // generate html
+        this.outer = undefined;
+        generateHTML(this);
 
         // auto show
         if(this.options.autoShow !== false){
@@ -714,47 +761,6 @@ class Popup{
         this.events.add(eventName, callback);
     }
 
-    generateHTML(){
-        // check flag
-        if(this.el.classList.contains(CLASSES.processed)) return;
-
-        // relocate HTML to body tag
-        if(!this.masterContainer){
-            this.masterContainer = document.createElement('div');
-            this.masterContainer.classList.add(CLASSES.master);
-        }
-        document.querySelector('body').appendChild(this.masterContainer);
-        this.masterContainer.appendChild(this.el);
-
-        // inner
-        this.inner = wrapElement(this.el);
-        this.inner.classList.add(CLASSES.inner);
-
-        // container
-        this.container = wrapElement(this.inner);
-        this.container.classList.add(CLASSES.container);
-
-        // overflow
-        this.overflow = wrapElement(this.container);
-        this.overflow.classList.add(CLASSES.overflow);
-
-        // outer
-        this.outer = wrapElement(this.overflow);
-        this.outer.classList.add(CLASSES.outer);
-        if(this.options.outerClass) this.outer.classList.add(this.options.outerClass);
-        this.outer.setAttribute(ATTRS.id, this.id);
-
-        initOutsideClick(this);
-        initKeyboard(this);
-        initTheme(this);
-        initMobileLayout(this); // must call after initTheme()
-        addCloseButton(this);
-        initToggleTrigger(this); // call at last
-
-        // done init
-        this.el.classList.add(CLASSES.processed, CLASSES.content);
-    }
-
 
     open(){
         // only open when is close