@andreyshpigunov/x 0.4.4 → 0.5.1

package/src/components/x/modal.css

@@ -28,241 +28,245 @@ All right reserved.
   --modal-overlay-background-color: #00000066;
 }
 
-html.modal--active body {
-  overflow: hidden;
-}
-
-/* !- Modal window content */
-[x-modal] {
-  display: none;
-}
-
-/* !- Modal wrapper */
-.modal {
-  position: fixed;
-  z-index: -10000;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  padding: 0;
-  pointer-events: none;
-  display: none;
-}
-.modal--ready {
-  z-index: 10000;
-  pointer-events: all;
-  display: block;
-}
-.modal--z1  { z-index: 10001 }
-.modal--z2  { z-index: 10002 }
-.modal--z3  { z-index: 10003 }
-.modal--z4  { z-index: 10004 }
-.modal--z5  { z-index: 10005 }
-.modal--z6  { z-index: 10006 }
-.modal--z7  { z-index: 10007 }
-.modal--z8  { z-index: 10008 }
-.modal--z9  { z-index: 10009 }
-.modal--z10 { z-index: 10010 }
-
-/* !- Overlay */
-.modal-overlay {
-  position: absolute;
-  z-index: 10010;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  background-color: var(--modal-overlay-background-color);
-}
-
-/* ! -Main structure */
-.modal-outer {
-  position: relative;
-  z-index: 10020;
-  width: 100%;
-  height: 100%;
-  padding-top: var(--modal-margin-top);
-  padding-bottom: var(--modal-margin-bottom);
-  padding-left: var(--modal-margin-left);
-  padding-right: var(--modal-margin-right);
-  overflow: auto;
-  overscroll-behavior: contain;
-  -webkit-overflow-scrolling: touch;
-}
-.modal-inner {
-  display: flex;
-  flex-direction: column;
-  min-height: 100%;
-}
+@layer modal {
 
-/* !- Modal window */
-.modal-window {
-  position: relative;
-  z-index: 10030;
-  width: 100%;
-  max-width: 80rem;
-  margin: auto;
-  padding-top: var(--modal-padding-top);
-  padding-bottom: var(--modal-padding-bottom);
-  padding-left: var(--modal-padding-left);
-  padding-right: var(--modal-padding-right);
-  text-align: left;
-  background: var(--modal-background);
-  box-shadow: var(--modal-box-shadow);
-  border-radius: var(--modal-border-radius);
-}
-
-/* !- Close cross */
-.modal-rail {
-  position: absolute;
-  top: var(--modal-closer-margin);
-  bottom: var(--modal-closer-margin);
-  right: var(--modal-closer-margin);
-  width: 0;
+  html.modal_active body {
+    overflow: hidden;
+  }
+  
+  /* !- Modal window content */
+  [x-modal] {
+    display: none;
+  }
   
-  .modal-close {
+  /* !- Modal wrapper */
+  .modal {
+    position: fixed;
+    z-index: -10000;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    padding: 0;
+    pointer-events: none;
+    display: none;
+  }
+  .modal_ready {
+    z-index: 10000;
+    pointer-events: all;
     display: block;
-    position: sticky;
-    z-index: 10040;
-    top: calc(var(--modal-closer-margin) - var(--modal-margin-top));
+  }
+  .modal_z1  { z-index: 10001 }
+  .modal_z2  { z-index: 10002 }
+  .modal_z3  { z-index: 10003 }
+  .modal_z4  { z-index: 10004 }
+  .modal_z5  { z-index: 10005 }
+  .modal_z6  { z-index: 10006 }
+  .modal_z7  { z-index: 10007 }
+  .modal_z8  { z-index: 10008 }
+  .modal_z9  { z-index: 10009 }
+  .modal_z10 { z-index: 10010 }
+  
+  /* !- Overlay */
+  .modal-overlay {
+    position: absolute;
+    z-index: 10010;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background-color: var(--modal-overlay-background-color);
+  }
+  
+  /* ! -Main structure */
+  .modal-outer {
+    position: relative;
+    z-index: 10020;
+    width: 100%;
+    height: 100%;
+    padding-top: var(--modal-margin-top);
+    padding-bottom: var(--modal-margin-bottom);
+    padding-left: var(--modal-margin-left);
+    padding-right: var(--modal-margin-right);
+    overflow: auto;
+    overscroll-behavior: contain;
+    -webkit-overflow-scrolling: touch;
+  }
+  .modal-inner {
+    display: flex;
+    flex-direction: column;
+    min-height: 100%;
+  }
+  
+  /* !- Modal window */
+  .modal-window {
+    position: relative;
+    z-index: 10030;
+    width: 100%;
+    max-width: 80rem;
+    margin: auto;
+    padding-top: var(--modal-padding-top);
+    padding-bottom: var(--modal-padding-bottom);
+    padding-left: var(--modal-padding-left);
+    padding-right: var(--modal-padding-right);
+    text-align: left;
     background: var(--modal-background);
-    width: var(--modal-closer-area);
-    height: var(--modal-closer-area);
-    margin-left: calc(-1 * var(--modal-closer-area));
-    font-weight: 200;
-    border: none;
+    box-shadow: var(--modal-box-shadow);
     border-radius: var(--modal-border-radius);
+  }
+  
+  /* !- Close cross */
+  .modal-rail {
+    position: absolute;
+    top: var(--modal-closer-margin);
+    bottom: var(--modal-closer-margin);
+    right: var(--modal-closer-margin);
+    width: 0;
     
-    will-change: opacity;
-    opacity: 0;
-    transition: opacity .15s ease-out;
-    
-    &:before,
-    &:after {
-      content: "";
+    .modal-close {
       display: block;
-      position: absolute;
-      top: calc(var(--modal-closer-area) / 2 - var(--modal-closer-width) / 2);
-      left: calc((var(--modal-closer-area) - var(--modal-closer-size)) / 2);
-      width: var(--modal-closer-size);
-      height: var(--modal-closer-width);
+      position: sticky;
+      z-index: 10040;
+      top: calc(var(--modal-closer-margin) - var(--modal-margin-top));
+      background: var(--modal-background);
+      width: var(--modal-closer-area);
+      height: var(--modal-closer-area);
+      margin-left: calc(-1 * var(--modal-closer-area));
+      font-weight: 200;
+      border: none;
+      border-radius: var(--modal-border-radius);
       
-      will-change: color;
-      background: var(--modal-closer-color);
-      transition: background .15s ease-out;
-      transform-origin: center;
-    }
-    &:before {
-      transform: rotate(-45deg);
-    }
-    &:after {
-      transform: rotate(45deg);
+      will-change: opacity;
+      opacity: 0;
+      transition: opacity .15s ease-out;
+      
+      &:before,
+      &:after {
+        content: "";
+        display: block;
+        position: absolute;
+        top: calc(var(--modal-closer-area) / 2 - var(--modal-closer-width) / 2);
+        left: calc((var(--modal-closer-area) - var(--modal-closer-size)) / 2);
+        width: var(--modal-closer-size);
+        height: var(--modal-closer-width);
+        
+        will-change: color;
+        background: var(--modal-closer-color);
+        transition: background .15s ease-out;
+        transform-origin: center;
+      }
+      &:before {
+        transform: rotate(-45deg);
+      }
+      &:after {
+        transform: rotate(45deg);
+      }
     }
   }
-}
-.modal--active .modal-rail {
-  
-  .modal-close {
-    opacity: 1;
+  .modal_active .modal-rail {
     
-    @media (any-hover: hover) {
-      &:hover:before,
-      &:hover:after,
-      &:active:before,
-      &:active:after {
-        background: var(--modal-closer-color-hover);
+    .modal-close {
+      opacity: 1;
+      
+      @media (any-hover: hover) {
+        &:hover:before,
+        &:hover:after,
+        &:active:before,
+        &:active:after {
+          background: var(--modal-closer-color-hover);
+        }
       }
     }
   }
-}
-
-/*
-  !- Effects
-  https://github.com/codrops/ModalWindowEffects
-*/
-.modal {
-  & .modal-overlay {
-    will-change: opacity;
-    opacity: 0;
-    transition: opacity .2s ease-out;
-  }
-  &.modal--active .modal-overlay {
-    opacity: 1;
-  }
-}
-
-/* !- Default */
-.modal {
-  & .modal-window {
-    will-change: visibility, opacity, transform;
-    opacity: 0;
-    transform: scale(.97);
-    transform-origin: center top;
-    transition: all .2s ease-out;
-  }
-  &.modal--active .modal-window {
-    transform: scale(1);
-    opacity: 1;
-  }
-}
-
-/* !- Zoom in */
-.modal--effect-in {
-  & .modal-window {
-    transform: scale(.9);
-  }
-  &.modal--active .modal-window {
-    transform: scale(1);
-  }
-}
-
-/* !- Zoom out */
-.modal--effect-out {
-  & .modal-window {
-    transform: scale(1.1);
+  
+  /*
+    !- Effects
+    https://github.com/codrops/ModalWindowEffects
+  */
+  .modal {
+    & .modal-overlay {
+      will-change: opacity;
+      opacity: 0;
+      transition: opacity .2s ease-out;
+    }
+    &.modal_active .modal-overlay {
+      opacity: 1;
+    }
   }
-  &.modal--active .modal-window {
-    transform: scale(1);
+  
+  /* !- Default */
+  .modal {
+    & .modal-window {
+      will-change: visibility, opacity, transform;
+      opacity: 0;
+      transform: scale(.97);
+      transform-origin: center top;
+      transition: all .2s ease-out;
+    }
+    &.modal_active .modal-window {
+      transform: scale(1);
+      opacity: 1;
+    }
   }
-}
-
-/* !- Slide up */
-.modal--effect-up {
-  & .modal-window {
-    transform: translateY(30px);
+  
+  /* !- Zoom in */
+  .modal_effect-in {
+    & .modal-window {
+      transform: scale(.9);
+    }
+    &.modal_active .modal-window {
+      transform: scale(1);
+    }
   }
-  &.modal--active .modal-window {
-    transform: translateY(0);
+  
+  /* !- Zoom out */
+  .modal_effect-out {
+    & .modal-window {
+      transform: scale(1.1);
+    }
+    &.modal_active .modal-window {
+      transform: scale(1);
+    }
   }
-}
-
-/* !- Slide down */
-.modal--effect-down {
-  & .modal-window {
-    transform: translateY(-30px);
+  
+  /* !- Slide up */
+  .modal_effect-up {
+    & .modal-window {
+      transform: translateY(30px);
+    }
+    &.modal_active .modal-window {
+      transform: translateY(0);
+    }
   }
-  &.modal--active .modal-window {
-    transform: translateY(0);
+  
+  /* !- Slide down */
+  .modal_effect-down {
+    & .modal-window {
+      transform: translateY(-30px);
+    }
+    &.modal_active .modal-window {
+      transform: translateY(0);
+    }
   }
-}
-
-/* !- Slide from left */
-.modal--effect-left {
-  & .modal-window {
-    transform: translateX(-30px);
+  
+  /* !- Slide from left */
+  .modal_effect-left {
+    & .modal-window {
+      transform: translateX(-30px);
+    }
+    &.modal_active .modal-window {
+      transform: translateX(0);
+    }
   }
-  &.modal--active .modal-window {
-    transform: translateX(0);
+  
+  /* !- Slide from right */
+  .modal_effect-right {
+    & .modal-window {
+      transform: translateX(30px);
+    }
+    &.modal_active .modal-window {
+      transform: translateX(0);
+    }
   }
-}
 
-/* !- Slide from right */
-.modal--effect-right {
-  & .modal-window {
-    transform: translateX(30px);
-  }
-  &.modal--active .modal-window {
-    transform: translateX(0);
-  }
 }

package/src/components/x/modal.js

@@ -13,7 +13,7 @@
  *   modal.init();
  *
  * HTML structure:
- *   <div x-modal="myModal" class="modal--hash" data-window-class="max800">
+ *   <div x-modal="myModal" class="modal_hash" data-window-class="max800">
  *     <h2>Modal Title</h2>
  *     <p>Modal content goes here</p>
  *     <button class="modal-close">Close</button>
@@ -92,8 +92,8 @@
  *
  * - `x-modal="id"` - Required attribute to define modal
  * - `x-modal-open="id"` - Attribute for links/buttons that open modal
- * - `modal--hash` - Class to enable URL hash integration (#id)
- * - `modal--uniq` - Class to close other modals when this one opens
+ * - `modal_hash` - Class to enable URL hash integration (#id)
+ * - `modal_uniq` - Class to close other modals when this one opens
  * - `data-window-class` - Attribute to add classes to modal window
  *
  * Features:
@@ -102,8 +102,8 @@
  * - ESC key to close topmost modal
  * - Click overlay to close
  * - Click .modal-close button to close
- * - URL hash integration (modal--hash class)
- * - Unique modal mode (modal--uniq class)
+ * - URL hash integration (modal_hash class)
+ * - Unique modal mode (modal_uniq class)
  * - Lock mechanism to prevent overlapping animations
  * - Global classes on <html> element
  *
@@ -136,7 +136,7 @@
  * @example
  * // Vanilla JS — plain HTML
  * // index.html:
- * // <div x-modal="myModal" class="modal--hash" data-window-class="max800">
+ * // <div x-modal="myModal" class="modal_hash" data-window-class="max800">
  * //   <h2>Title</h2>
  * //   <p>Content</p>
  * //   <button type="button" class="modal-close">Close</button>
@@ -291,7 +291,7 @@ class Modal {
 
       if (window.location.hash === '#' + id) {
         const el = lib.qs('#' + id);
-        if (el && el.classList.contains('modal--hash')) this.show(id);
+        if (el && el.classList.contains('modal_hash')) this.show(id);
       }
     }
   }
@@ -304,7 +304,7 @@ class Modal {
    */
   _setupGlobalListeners() {
     this._clickHandler = e => {
-      if (!lib.qs('.modal--active')) return;
+      if (!lib.qs('.modal_active')) return;
       const target = e.target;
       const isClose = target.classList && target.classList.contains('modal-close');
       const isOverlay = !target.closest || !target.closest('.modal-window');
@@ -317,7 +317,7 @@ class Modal {
 
     this._keydownHandler = e => {
       if (e.key !== 'Escape') return;
-      const modals = lib.qsa('.modal--active');
+      const modals = lib.qsa('.modal_active');
       const len = modals.length;
       if (!len) return;
       const id = modals[len - 1].getAttribute('id');
@@ -351,24 +351,24 @@ class Modal {
     const modal = lib.qs('#' + id);
     if (!modal) return;
 
-    if (modal.classList.contains('modal--uniq')) await this.hideAll();
+    if (modal.classList.contains('modal_uniq')) await this.hideAll();
 
     this.lockCount++;
     try {
-      await lib.addClass(modal, 'modal--ready');
+      await lib.addClass(modal, 'modal_ready');
       await lib.sleep(10);
       modal.dispatchEvent(new CustomEvent('modal:ready'));
 
-      if (modal.classList.contains('modal--hash')) history.replaceState(null, '', '#' + id);
+      if (modal.classList.contains('modal_hash')) history.replaceState(null, '', '#' + id);
 
       if (this.html) {
-        lib.addClass(this.html, 'modal--active');
-        lib.addClass(this.html, id + '--active');
+        lib.addClass(this.html, 'modal_active');
+        lib.addClass(this.html, id + '_active');
       }
       lib.addClass('[x-modal-open=' + id + ']', 'active');
       this.modalLevel++;
-      lib.addClass(modal, 'modal--z' + this.modalLevel);
-      await lib.addClass(modal, 'modal--active');
+      lib.addClass(modal, 'modal_z' + this.modalLevel);
+      await lib.addClass(modal, 'modal_active');
 
       const modalOuter = lib.qs('.modal-outer', modal);
       if (modalOuter) modalOuter.scrollTo(0, 1);
@@ -398,16 +398,16 @@ class Modal {
 
     this.lockCount++;
     try {
-      if (modal.classList.contains('modal--hash') && window.location.hash === '#' + id) {
+      if (modal.classList.contains('modal_hash') && window.location.hash === '#' + id) {
         history.replaceState(null, document.title, window.location.pathname + window.location.search);
       }
       lib.removeClass('[x-modal-open=' + id + ']', 'active');
-      await lib.removeClass(modal, 'modal--active', 200);
-      lib.removeClass(modal, 'modal--z' + this.modalLevel);
+      await lib.removeClass(modal, 'modal_active', 200);
+      lib.removeClass(modal, 'modal_z' + this.modalLevel);
       modal.dispatchEvent(new CustomEvent('modal:close'));
-      if (this.html) lib.removeClass(this.html, id + '--active');
+      if (this.html) lib.removeClass(this.html, id + '_active');
       this.modalLevel--;
-      if (this.modalLevel === 0 && this.html) lib.removeClass(this.html, 'modal--active');
+      if (this.modalLevel === 0 && this.html) lib.removeClass(this.html, 'modal_active');
     } catch (_) {
     } finally {
       this.lockCount--;
@@ -422,7 +422,7 @@ class Modal {
    */
   async hideAll() {
     if (typeof document === 'undefined') return;
-    const modals = lib.qsa('.modal--active');
+    const modals = lib.qsa('.modal_active');
     for (let i = 0; i < modals.length; i++) {
       const id = modals[i].getAttribute('id');
       if (id) await this.hide(id);
@@ -437,7 +437,7 @@ class Modal {
   isActive(id) {
     if (typeof document === 'undefined' || !id || typeof id !== 'string' || !this._isValidId(id)) return false;
     const modal = lib.qs('#' + id);
-    return modal ? modal.classList.contains('modal--active') : false;
+    return modal ? modal.classList.contains('modal_active') : false;
   }
 }