New theme: Corner layout

dev/md/layout.md

@@ -2,11 +2,12 @@
 
 Layout could be customized with these provided options.
 
-| Description | Option | Buttons |
-|--|--|--|
-| Use custom layout on mobile | `hasMobileLayout: true` | [View popup](#popup-mobile) |
-| Display popup on the right side | `theme: "right-side"` | [View popup](#popup-right-side) |
-| Change the close button text | `closeButtonInnerText: "CLOSE"` | [View popup](#popup-custom-close) |
+| Description                     | Option                          | Buttons                                                                                                                                                           |
+|---------------------------------|---------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| Use custom layout on mobile     | `hasMobileLayout: true`         | [View popup](#popup-mobile)                                                                                                                                       |
+| Display popup on the right side | `theme: "right-side"`           | [View popup](#popup-right-side)                                                                                                                                   |
+| Change the close button text    | `closeButtonInnerText: "CLOSE"` | [View popup](#popup-custom-close)                                                                                                                                 |
+| Display the popup in the corner | `theme: "corner"`               | [Bottom right](#popup-corner-bottom-right) - [Bottom left](#popup-corner-bottom-left) - [Top right](#popup-corner-top-right) - [Top left](#popup-corner-top-left) |
 
 <div data-easy-popup='{"id": "popup-mobile", "hasMobileLayout": "true"}'>
     <!-- Popup content -->
@@ -75,6 +76,66 @@ nostra lorem libero curabitur.
 </p>
 </div>
 
+<div data-easy-popup='{"id": "popup-corner-bottom-right", "theme": "corner" }'>
+    <!-- Popup content -->
+<h2>Ac lectus interdum auctor praesent quis</h2>  
+<p>Elementum sollicitudin pharetra nascetur purus risus bibendum arcu fermentum vestibulum diam consequat. Senectus nam
+sodales ridiculus torquent et natoque commodo placerat adipiscing. Elementum donec faucibus nulla viverra letius porta
+sit. Tempor finibus si mi dictum molestie id pede hac proin curae. Vestibulum tortor parturient interdum litora
+adipiscing morbi lobortis bibendum aliquet platea sed. Velit fames ultricies tincidunt netus lectus lacinia nullam
+congue cubilia cursus.</p>
+</div>
+
+<div data-easy-popup='{"id": "popup-corner-bottom-left", "theme": "corner", "position":"bottom left" }'>
+    <!-- Popup content -->
+<h2>Ac lectus interdum auctor praesent quis</h2>  
+<p>Elementum sollicitudin pharetra nascetur purus risus bibendum arcu fermentum vestibulum diam consequat. Senectus nam
+sodales ridiculus torquent et natoque commodo placerat adipiscing. Elementum donec faucibus nulla viverra letius porta
+sit. Tempor finibus si mi dictum molestie id pede hac proin curae. Vestibulum tortor parturient interdum litora
+adipiscing morbi lobortis bibendum aliquet platea sed. Velit fames ultricies tincidunt netus lectus lacinia nullam
+congue cubilia cursus.</p>
+</div>
+
+<div data-easy-popup='{"id": "popup-corner-top-right", "theme": "corner", "position":"top right" }'>
+    <!-- Popup content -->
+<h2>Ac lectus interdum auctor praesent quis</h2>  
+<p>Elementum sollicitudin pharetra nascetur purus risus bibendum arcu fermentum vestibulum diam consequat. Senectus nam
+sodales ridiculus torquent et natoque commodo placerat adipiscing. Elementum donec faucibus nulla viverra letius porta
+sit. Tempor finibus si mi dictum molestie id pede hac proin curae. Vestibulum tortor parturient interdum litora
+adipiscing morbi lobortis bibendum aliquet platea sed. Velit fames ultricies tincidunt netus lectus lacinia nullam
+congue cubilia cursus.</p>
+</div>
+
+<div data-easy-popup='{"id": "popup-corner-top-left", "theme": "corner", "position":"top left" }'>
+    <!-- Popup content -->
+<h2>Ac lectus interdum auctor praesent quis</h2>  
+<p>Elementum sollicitudin pharetra nascetur purus risus bibendum arcu fermentum vestibulum diam consequat. Senectus nam
+sodales ridiculus torquent et natoque commodo placerat adipiscing. Elementum donec faucibus nulla viverra letius porta
+sit. Tempor finibus si mi dictum molestie id pede hac proin curae. Vestibulum tortor parturient interdum litora
+adipiscing morbi lobortis bibendum aliquet platea sed. Velit fames ultricies tincidunt netus lectus lacinia nullam
+congue cubilia cursus.</p>
+<p>Elementum sollicitudin pharetra nascetur purus risus bibendum arcu fermentum vestibulum diam consequat. Senectus nam
+sodales ridiculus torquent et natoque commodo placerat adipiscing. Elementum donec faucibus nulla viverra letius porta
+sit. Tempor finibus si mi dictum molestie id pede hac proin curae. Vestibulum tortor parturient interdum litora
+adipiscing morbi lobortis bibendum aliquet platea sed. Velit fames ultricies tincidunt netus lectus lacinia nullam
+congue cubilia cursus.</p>
+<p>Elementum sollicitudin pharetra nascetur purus risus bibendum arcu fermentum vestibulum diam consequat. Senectus nam
+sodales ridiculus torquent et natoque commodo placerat adipiscing. Elementum donec faucibus nulla viverra letius porta
+sit. Tempor finibus si mi dictum molestie id pede hac proin curae. Vestibulum tortor parturient interdum litora
+adipiscing morbi lobortis bibendum aliquet platea sed. Velit fames ultricies tincidunt netus lectus lacinia nullam
+congue cubilia cursus.</p>
+<p>Elementum sollicitudin pharetra nascetur purus risus bibendum arcu fermentum vestibulum diam consequat. Senectus nam
+sodales ridiculus torquent et natoque commodo placerat adipiscing. Elementum donec faucibus nulla viverra letius porta
+sit. Tempor finibus si mi dictum molestie id pede hac proin curae. Vestibulum tortor parturient interdum litora
+adipiscing morbi lobortis bibendum aliquet platea sed. Velit fames ultricies tincidunt netus lectus lacinia nullam
+congue cubilia cursus.</p>
+<p>Elementum sollicitudin pharetra nascetur purus risus bibendum arcu fermentum vestibulum diam consequat. Senectus nam
+sodales ridiculus torquent et natoque commodo placerat adipiscing. Elementum donec faucibus nulla viverra letius porta
+sit. Tempor finibus si mi dictum molestie id pede hac proin curae. Vestibulum tortor parturient interdum litora
+adipiscing morbi lobortis bibendum aliquet platea sed. Velit fames ultricies tincidunt netus lectus lacinia nullam
+congue cubilia cursus.</p>
+</div>
+
 <div data-easy-popup='{"id": "popup-custom-close", "closeButtonInnerText": "CLOSE"}'>
     <!-- Popup content -->
 <h2>Ac lectus interdum auctor praesent quis</h2>  

dev/md/options.md

@@ -5,7 +5,8 @@
 | Attribute              | Type                   | Default           | Description                                                                                                                                                                             | 
 |------------------------|------------------------|-------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
 | `id`                   | string                 | Auto-generated ID | Set an ID for this popup                                                                                                                                                                |
-| `theme`                | string                 | `default`         | Other layouts: `right-side`                                                                                                                                                             |
+| `theme`                | string                 | `default`         | Other layouts: `right-side`, `corner`                                                                                                                                                   |
+| `position`             | string                 | `bottom right`    | Requires `theme: "corner"`. All values: `top left`, `top right`, `bottom left`, `bottom right`                                                                                          |
 | `hasMobileLayout`      | boolean                | `false`           | Enable mobile layout (`theme` options will not work when mobile layout is active)                                                                                                       |
 | `mobileBreakpoint`     | number                 | `768`             | Activate mobile layout when the screen size is <=768px                                                                                                                                  |
 | `closeButtonInnerText` | string                 | `svg/icon`        | Custom `innerText` of the close button                                                                                                                                                  |

src/_index.js

@@ -71,6 +71,12 @@ class Popup{
 
         /** ------ **/
 
+        /** THEMES **/
+
+        // corner theme
+        this.isCornerTheme = this.options.theme === 'corner';
+
+
         /** COOKIE **/
 
         // cookie
@@ -137,6 +143,10 @@ class Popup{
 
         // prevent scroll > on
         if(this.options.preventScroll){
+
+            // "corner" theme will not prevent scroll
+            if(this.isCornerTheme) return;
+
             if(this.lenis.enabled()){
                 // prevent with Lenis
                 this.root.classList.add(CLASSES.preventScrollLenis);

src/_style.scss

@@ -8,6 +8,7 @@
 @import "./css/close-button";
 @import "./css/theme-right-side";
 @import "./css/layout-mobile";
+@import "./css/corner-layout";
 
 
 /* prevent scroll */

src/configs.js

@@ -50,6 +50,7 @@ export const DEFAULTS = {
 
     // theme
     theme: 'default', // right-side
+    position: 'bottom right', // position of the popup, e.g. 'top left', 'top right', 'bottom left', 'bottom right'
 
     keyboard: true, // option for closing the popup by keyboard (ESC)
 

src/css/corner-layout.scss

@@ -0,0 +1,131 @@
+html.easy-popup-open:has(.easy-popup-master-corner.open) .easy-popup-master {
+  opacity: 0;
+  visibility: hidden;
+}
+
+.easy-popup-master-corner {
+  transition: opacity .4s ease, visibility .4s ease, transform .4s ease;
+}
+
+.easy-popup-master-corner:not(.open) {
+  pointer-events: none;
+}
+
+.easy-popup-master-corner {
+  transform: translateX(0);
+}
+
+// Popup close button
+.easy-popup-master-corner .ep-close-button {
+  --ep-close-color: #000;
+  transform: translate(0);
+  position: fixed;
+}
+
+@media only screen and (min-width: 769px) {
+  // html.easy-popup-open:has(.easy-popup-master-corner).ep-prevent-scroll  {overflow:auto;}
+
+  .easy-popup-master-corner.easy-popup {
+
+  }
+
+  .easy-popup-master-corner {
+    --ep-max-width: 450px;
+    max-width: var(--ep-max-width);
+    position: fixed;
+    bottom: 0;
+    right: 0;
+
+    // Remove default CSS of easy popup
+    opacity: 1;
+    visibility: visible;
+    top: unset;
+    left: unset;
+    height: unset;
+    width: unset;
+    display: block;
+  }
+
+  // Popup container
+  .easy-popup-master-corner .easy-popup-container {
+    padding: 0 20px 20px 0;
+  }
+
+  // Animation
+  .easy-popup-master-corner[class*="right"]:not(.open) {
+    transform: translateX(100%);
+  }
+  .easy-popup-master-corner[class*="left"]:not(.open) {
+    transform: translateX(-100%);
+  }
+
+  // Popup position on the top left side
+  .easy-popup-master-corner.top-left {
+    top: 0;
+    left: 0;
+    bottom: unset;
+    right: unset;
+  }
+  .easy-popup-master-corner.top-left .easy-popup-container {
+    padding: 20px 0 0 20px;
+  }
+
+  // Popup position on the top right side
+  .easy-popup-master-corner.top-right {
+    top: 0;
+    right: 0;
+    bottom: unset;
+  }
+  .easy-popup-master-corner.top-right .easy-popup-container {
+    padding: 20px 20px 0 0;
+  }
+
+  // Popup position on the bottom left side
+  .easy-popup-master-corner.bottom-left {
+    left: 0;
+    right: unset;
+  }
+  .easy-popup-master-corner.bottom-left .easy-popup-container {
+    padding: 0 0 20px 20px;
+  }
+
+  // Popup inner
+  .easy-popup-master-corner .easy-popup-container .easy-popup-inner {
+    border: 1px solid #d0d7de;
+    max-height: calc(100vh - 20px * 2);
+    overflow-y: auto;
+  }
+  .easy-popup-master-corner .easy-popup-container .easy-popup-inner .easy-popup-content {
+    border-radius: 0;
+  }
+
+  // Popup close button
+  .easy-popup-master-corner.top-left .ep-close-button {
+    top: 20px;
+  }
+  .easy-popup-master-corner.bottom-right .ep-close-button {
+    right: 20px;
+  }
+  .easy-popup-master-corner.top-right .ep-close-button {
+    top: 20px;
+    right: 20px;
+  }
+}
+
+@media only screen and (max-width: 768px) {
+  .easy-popup-master-corner {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 9999;
+    width: 100%;
+    height: 100%;
+    background: var(--ep-bg);
+    backdrop-filter: blur(2px);
+  }
+
+  .easy-popup-master-corner:not(.open) {
+    opacity: 0;
+    visibility: hidden;
+  }
+}

src/css/master.scss

@@ -1,10 +1,4 @@
-/* master */
-html:not(.easy-popup-open) .easy-popup-master {
-  opacity: 0;
-  visibility: hidden;
-}
-
-.easy-popup-master {
+:root {
   --ep-bg: rgba(0, 0, 0, .4);
   --ep-padding: clamp(20px, 2vw, 40px);
   --ep-max-width: 915px;
@@ -14,7 +8,15 @@ html:not(.easy-popup-open) .easy-popup-master {
   --ep-close-color-hover: #ef1616;
 
   --ep-popup-bg: #fff;
+}
 
+/* master */
+html:not(.easy-popup-open) .easy-popup-master {
+  opacity: 0;
+  visibility: hidden;
+}
+
+.easy-popup-master {
   position: fixed;
   top: 0;
   left: 0;

src/html.js

@@ -13,13 +13,20 @@ export function generateHTML(context){
         context.masterContainer = document.createElement('div');
         context.masterContainer.classList.add(CLASSES.master);
     }
-    document.querySelector('body').appendChild(context.masterContainer);
-    context.masterContainer.appendChild(context.el);
+
+    if(!context.isCornerTheme){
+        document.querySelector('body').appendChild(context.masterContainer);
+        context.masterContainer.appendChild(context.el);
+    }
 
     // inner
     context.inner = wrapElement(context.el);
     context.inner.classList.add(CLASSES.inner);
 
+    if(context.isCornerTheme){
+        document.querySelector('body').appendChild(context.inner);
+    }
+
     // container
     context.container = wrapElement(context.inner);
     context.container.classList.add(CLASSES.container);
@@ -31,6 +38,12 @@ export function generateHTML(context){
     // outer
     context.outer = wrapElement(context.overflow);
     context.outer.classList.add(CLASSES.outer);
+
+    // theme: corner
+    if(context.isCornerTheme){
+        context.outer.classList.add(CLASSES.master + '-corner');
+    }
+
     if(context.options.outerClass){
         const classes = context.options.outerClass.trim().split(' ');
         for(let i = 0; i < classes.length; i++) context.outer.classList.add(classes[i])

src/layouts.js

@@ -57,6 +57,11 @@ function setTheme(context, removeTheme = false){
 
     // set theme
     context.outer.setAttribute(ATTRS.theme, context.options.theme);
+
+    if(context.isCornerTheme){
+        const formatPosition = context.options.position.trim().split(" ").join("-");
+        context.outer.classList.add(formatPosition);
+    }
 }