framework7 6.3.15 → 7.0.0-beta.11

package/{esm/components → components}/popup/popup-class.js

@@ -1,60 +1,51 @@
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
 import { getWindow, getDocument } from 'ssr-window';
-import $ from '../../shared/dom7';
-import { extend, now, nextTick } from '../../shared/utils';
-import { getSupport } from '../../shared/get-support';
-import { getDevice } from '../../shared/get-device';
-import Modal from '../modal/modal-class';
-
-var Popup = /*#__PURE__*/function (_Modal) {
-  _inheritsLoose(Popup, _Modal);
-
-  function Popup(app, params) {
-    var _this;
-
-    var extendedParams = extend({
+import $ from '../../shared/dom7.js';
+import { extend, now, nextTick } from '../../shared/utils.js';
+import { getSupport } from '../../shared/get-support.js';
+import { getDevice } from '../../shared/get-device.js';
+import Modal from '../modal/modal-class.js';
+
+class Popup extends Modal {
+  constructor(app, params) {
+    const extendedParams = extend({
       on: {}
     }, app.params.popup, params); // Extends with open/close Modal methods;
 
-    _this = _Modal.call(this, app, extendedParams) || this;
-
-    var popup = _assertThisInitialized(_this);
-
-    var window = getWindow();
-    var document = getDocument();
-    var support = getSupport();
-    var device = getDevice();
+    super(app, extendedParams);
+    const popup = this;
+    const window = getWindow();
+    const document = getDocument();
+    const support = getSupport();
+    const device = getDevice();
     popup.params = extendedParams; // Find Element
 
-    var $el;
+    let $el;
 
     if (!popup.params.el) {
-      $el = $(popup.params.content).filter(function (node) {
-        return node.nodeType === 1;
-      }).eq(0);
+      $el = $(popup.params.content).filter(node => node.nodeType === 1).eq(0);
     } else {
       $el = $(popup.params.el).eq(0);
     }
 
     if ($el && $el.length > 0 && $el[0].f7Modal) {
-      return $el[0].f7Modal || _assertThisInitialized(_this);
+      return $el[0].f7Modal;
     }
 
     if ($el.length === 0) {
-      return popup.destroy() || _assertThisInitialized(_this);
+      return popup.destroy();
     }
 
-    var $backdropEl;
+    let $backdropEl;
 
     if (popup.params.backdrop && popup.params.backdropEl) {
       $backdropEl = $(popup.params.backdropEl);
     } else if (popup.params.backdrop) {
-      $backdropEl = popup.$containerEl.children('.popup-backdrop');
+      if (popup.params.backdropUnique) {
+        $backdropEl = $('<div class="popup-backdrop popup-backdrop-unique"></div>');
+        popup.$containerEl.append($backdropEl);
+      } else {
+        $backdropEl = popup.$containerEl.children('.popup-backdrop');
+      }
 
       if ($backdropEl.length === 0) {
         $backdropEl = $('<div class="popup-backdrop"></div>');
@@ -63,11 +54,11 @@ var Popup = /*#__PURE__*/function (_Modal) {
     }
 
     extend(popup, {
-      app: app,
+      app,
       push: $el.hasClass('popup-push') || popup.params.push,
-      $el: $el,
+      $el,
       el: $el[0],
-      $backdropEl: $backdropEl,
+      $backdropEl,
       backdropEl: $backdropEl && $backdropEl[0],
       type: 'popup',
       $htmlEl: $('html')
@@ -78,16 +69,16 @@ var Popup = /*#__PURE__*/function (_Modal) {
     }
 
     function handleClick(e) {
-      var target = e.target;
-      var $target = $(target);
-      var keyboardOpened = !device.desktop && device.cordova && (window.Keyboard && window.Keyboard.isVisible || window.cordova.plugins && window.cordova.plugins.Keyboard && window.cordova.plugins.Keyboard.isVisible);
+      const target = e.target;
+      const $target = $(target);
+      const keyboardOpened = !device.desktop && device.cordova && (window.Keyboard && window.Keyboard.isVisible || window.cordova.plugins && window.cordova.plugins.Keyboard && window.cordova.plugins.Keyboard.isVisible);
       if (keyboardOpened) return;
 
       if ($target.closest(popup.el).length === 0) {
         if (popup.params && popup.params.closeByBackdropClick && popup.params.backdrop && popup.backdropEl && popup.backdropEl === target) {
-          var needToClose = true;
-          popup.$el.nextAll('.popup.modal-in').each(function (popupEl) {
-            var popupInstance = popupEl.f7Modal;
+          let needToClose = true;
+          popup.$el.nextAll('.popup.modal-in').each(popupEl => {
+            const popupInstance = popupEl.f7Modal;
             if (!popupInstance) return;
 
             if (popupInstance.params.closeByBackdropClick && popupInstance.params.backdrop && popupInstance.backdropEl === popup.backdropEl) {
@@ -103,34 +94,34 @@ var Popup = /*#__PURE__*/function (_Modal) {
     }
 
     function onKeyDown(e) {
-      var keyCode = e.keyCode;
+      const keyCode = e.keyCode;
 
       if (keyCode === 27 && popup.params.closeOnEscape) {
         popup.close();
       }
     }
 
-    var pushOffset;
-    var isPush;
+    let pushOffset;
+    let isPush;
 
     function pushViewScale(offset) {
       return (app.height - offset * 2) / app.height;
     }
 
-    var allowSwipeToClose = true;
-    var isTouched = false;
-    var startTouch;
-    var currentTouch;
-    var isScrolling;
-    var touchStartTime;
-    var touchesDiff;
-    var isMoved = false;
-    var pageContentEl;
-    var pageContentScrollTop;
-    var pageContentOffsetHeight;
-    var pageContentScrollHeight;
-    var popupHeight;
-    var $pushEl;
+    let allowSwipeToClose = true;
+    let isTouched = false;
+    let startTouch;
+    let currentTouch;
+    let isScrolling;
+    let touchStartTime;
+    let touchesDiff;
+    let isMoved = false;
+    let pageContentEl;
+    let pageContentScrollTop;
+    let pageContentOffsetHeight;
+    let pageContentScrollHeight;
+    let popupHeight;
+    let $pushEl;
 
     function handleTouchStart(e) {
       if (isTouched || !allowSwipeToClose || !popup.params.swipeToClose) return;
@@ -176,7 +167,7 @@ var Popup = /*#__PURE__*/function (_Modal) {
         touchesDiff = 0;
       }
 
-      var direction = touchesDiff < 0 ? 'to-bottom' : 'to-top';
+      const direction = touchesDiff < 0 ? 'to-bottom' : 'to-top';
       $el.transition(0);
 
       if (typeof popup.params.swipeToClose === 'string' && direction !== popup.params.swipeToClose) {
@@ -220,27 +211,27 @@ var Popup = /*#__PURE__*/function (_Modal) {
       e.preventDefault();
 
       if (isPush && pushOffset) {
-        var pushProgress = 1 - Math.abs(touchesDiff / popupHeight);
-        var scale = 1 - (1 - pushViewScale(pushOffset)) * pushProgress;
+        const pushProgress = 1 - Math.abs(touchesDiff / popupHeight);
+        const scale = 1 - (1 - pushViewScale(pushOffset)) * pushProgress;
 
         if ($pushEl.hasClass('popup')) {
           if ($pushEl.hasClass('popup-push')) {
-            $pushEl.transition(0).forEach(function (el) {
-              el.style.setProperty('transform', "translate3d(0, calc(-1 * " + pushProgress + " * (var(--f7-popup-push-offset) + 10px)) , 0px) scale(" + scale + ")", 'important');
+            $pushEl.transition(0).forEach(el => {
+              el.style.setProperty('transform', `translate3d(0, calc(-1 * ${pushProgress} * (var(--f7-popup-push-offset) + 10px)) , 0px) scale(${scale})`, 'important');
             });
           } else {
-            $pushEl.transition(0).forEach(function (el) {
-              el.style.setProperty('transform', "translate3d(0, 0px , 0px) scale(" + scale + ")", 'important');
+            $pushEl.transition(0).forEach(el => {
+              el.style.setProperty('transform', `translate3d(0, 0px , 0px) scale(${scale})`, 'important');
             });
           }
         } else {
-          $pushEl.transition(0).forEach(function (el) {
-            el.style.setProperty('transform', "translate3d(0,0,0) scale(" + scale + ")", 'important');
+          $pushEl.transition(0).forEach(el => {
+            el.style.setProperty('transform', `translate3d(0,0,0) scale(${scale})`, 'important');
           });
         }
       }
 
-      $el.transition(0).transform("translate3d(0," + -touchesDiff + "px,0)");
+      $el.transition(0).transform(`translate3d(0,${-touchesDiff}px,0)`);
     }
 
     function handleTouchEnd() {
@@ -260,7 +251,7 @@ var Popup = /*#__PURE__*/function (_Modal) {
         $pushEl.transition('').transform('');
       }
 
-      var direction = touchesDiff <= 0 ? 'to-bottom' : 'to-top';
+      const direction = touchesDiff <= 0 ? 'to-bottom' : 'to-top';
 
       if (typeof popup.params.swipeToClose === 'string' && direction !== popup.params.swipeToClose) {
         $el.transform('');
@@ -268,11 +259,11 @@ var Popup = /*#__PURE__*/function (_Modal) {
         return;
       }
 
-      var diff = Math.abs(touchesDiff);
-      var timeDiff = new Date().getTime() - touchStartTime;
+      const diff = Math.abs(touchesDiff);
+      const timeDiff = new Date().getTime() - touchStartTime;
 
       if (timeDiff < 300 && diff > 20 || timeDiff >= 300 && diff > 100) {
-        nextTick(function () {
+        nextTick(() => {
           if (direction === 'to-bottom') {
             $el.addClass('swipe-close-to-bottom');
           } else {
@@ -292,7 +283,7 @@ var Popup = /*#__PURE__*/function (_Modal) {
       $el.transform('');
     }
 
-    var passive = support.passiveListener ? {
+    const passive = support.passiveListener ? {
       passive: true
     } : false;
 
@@ -300,17 +291,17 @@ var Popup = /*#__PURE__*/function (_Modal) {
       $el.on(app.touchEvents.start, handleTouchStart, passive);
       app.on('touchmove', handleTouchMove);
       app.on('touchend:passive', handleTouchEnd);
-      popup.once('popupDestroy', function () {
+      popup.once('popupDestroy', () => {
         $el.off(app.touchEvents.start, handleTouchStart, passive);
         app.off('touchmove', handleTouchMove);
         app.off('touchend:passive', handleTouchEnd);
       });
     }
 
-    var hasPreviousPushPopup;
+    let hasPreviousPushPopup;
 
-    var updatePushOffset = function updatePushOffset() {
-      var wasPush = isPush;
+    const updatePushOffset = () => {
+      const wasPush = isPush;
 
       if (popup.push) {
         isPush = popup.push && (app.width < 630 || app.height < 630 || $el.hasClass('popup-tablet-fullscreen'));
@@ -327,7 +318,7 @@ var Popup = /*#__PURE__*/function (_Modal) {
       }
     };
 
-    var setPushOffset = function setPushOffset() {
+    const setPushOffset = () => {
       app.off('resize', updatePushOffset);
 
       if (popup.push) {
@@ -348,7 +339,7 @@ var Popup = /*#__PURE__*/function (_Modal) {
       app.on('resize', updatePushOffset);
     };
 
-    popup.on('open', function () {
+    popup.on('open', () => {
       hasPreviousPushPopup = false;
 
       if (popup.params.closeOnEscape) {
@@ -358,14 +349,14 @@ var Popup = /*#__PURE__*/function (_Modal) {
       $el.prevAll('.popup.modal-in').addClass('popup-behind');
       setPushOffset();
     });
-    popup.on('opened', function () {
+    popup.on('opened', () => {
       $el.removeClass('swipe-close-to-bottom swipe-close-to-top');
 
       if (popup.params.closeByBackdropClick) {
         app.on('click', handleClick);
       }
     });
-    popup.on('close', function () {
+    popup.on('close', () => {
       hasPreviousPushPopup = popup.$el.prevAll('.popup-push.modal-in').length > 0;
 
       if (popup.params.closeOnEscape) {
@@ -385,7 +376,7 @@ var Popup = /*#__PURE__*/function (_Modal) {
 
       app.off('resize', updatePushOffset);
     });
-    popup.on('closed', function () {
+    popup.on('closed', () => {
       $el.removeClass('popup-behind');
 
       if (isPush && pushOffset && !hasPreviousPushPopup) {
@@ -394,10 +385,9 @@ var Popup = /*#__PURE__*/function (_Modal) {
       }
     });
     $el[0].f7Modal = popup;
-    return popup || _assertThisInitialized(_this);
+    return popup;
   }
 
-  return Popup;
-}(Modal);
+}
 
 export default Popup;

package/components/popup/popup-rtl.css

@@ -1 +1 @@
-:root{--f7-popup-border-radius:0px;--f7-popup-tablet-width:630px;--f7-popup-tablet-height:630px;--f7-popup-transition-duration:400ms;--f7-popup-push-border-radius:10px;--f7-popup-push-offset:var(--f7-safe-area-top)}.ios{--f7-popup-tablet-border-radius:5px;--f7-popup-box-shadow:none}.md{--f7-popup-tablet-border-radius:4px;--f7-popup-box-shadow:0px 20px 44px rgba(0, 0, 0, 0.5)}.aurora{--f7-popup-tablet-border-radius:8px;--f7-popup-box-shadow:0px 20px 44px rgba(0, 0, 0, 0.5)}.popup-backdrop{z-index:10500}.popup{position:absolute;left:0;top:0px;width:100%;height:100%;display:none;box-sizing:border-box;transition-property:transform;transform:translate3d(0,100vh,0);background:#fff;z-index:11000;overflow:hidden;border-radius:var(--f7-popup-border-radius)}.popup.theme-dark,.theme-dark .popup{background:#000}.popup.modal-in,.popup.modal-out{transition-duration:var(--f7-popup-transition-duration)}.popup.not-animated{transition-duration:0s}.popup.modal-in{display:block;transform:translate3d(0,0,0)}.popup.modal-out{transform:translate3d(0,100vh,0)}.popup.swipe-close-to-top.modal-out{transform:translate3d(0,-100vh,0)}@media (min-width:630px) and (min-height:630px){.popup:not(.popup-tablet-fullscreen){--f7-safe-area-top:0px;--f7-safe-area-bottom:0px;width:var(--f7-popup-tablet-width);height:var(--f7-popup-tablet-height);left:50%;top:50%;margin-left:calc(-1 * var(--f7-popup-tablet-width)/ 2);margin-top:calc(-1 * var(--f7-popup-tablet-height)/ 2);transform:translate3d(0,100vh,0);box-shadow:var(--f7-popup-box-shadow);border-radius:var(--f7-popup-tablet-border-radius,var(--f7-popup-border-radius))}.popup:not(.popup-tablet-fullscreen).modal-in{transform:translate3d(0,0,0)}.popup:not(.popup-tablet-fullscreen).modal-out{transform:translate3d(0,100vh,0)}.popup:not(.popup-tablet-fullscreen).swipe-close-to-top.modal-out{transform:translate3d(0,-100vh,0)}.popup:not(.popup-tablet-fullscreen).popup-behind{transform:translate3d(0,0,0) scale(.9);pointer-events:none}.popup:not(.popup-tablet-fullscreen).popup-behind.modal-out{transform:translate3d(0,100vh,0) scale(.9)}}html.with-modal-popup .framework7-root>.panel .page-content,html.with-modal-popup .framework7-root>.view .page-content,html.with-modal-popup .framework7-root>.views .page-content{overflow:hidden;-webkit-overflow-scrolling:auto}html.with-modal-popup-push .popup-push,html.with-modal-popup-push-closing .popup-push{top:calc(var(--f7-popup-push-offset) + 10px);height:calc(100% - var(--f7-popup-push-offset) - 10px);border-radius:var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0;--f7-safe-area-top:0px}html.with-modal-popup-push .popup-push .page,html.with-modal-popup-push .popup-push .view,html.with-modal-popup-push-closing .popup-push .page,html.with-modal-popup-push-closing .popup-push .view{--f7-safe-area-top:0px}html.with-modal-popup-push .framework7-root,html.with-modal-popup-push-closing .framework7-root{background:#000}html.with-modal-popup-push .framework7-root>.view,html.with-modal-popup-push .framework7-root>.views,html.with-modal-popup-push-closing .framework7-root>.view,html.with-modal-popup-push-closing .framework7-root>.views{transition-duration:var(--f7-popup-transition-duration)}html.with-modal-popup-push .framework7-root>.view.theme-dark:after,html.with-modal-popup-push .framework7-root>.views.theme-dark:after,html.with-modal-popup-push .theme-dark .framework7-root>.view:after,html.with-modal-popup-push .theme-dark .framework7-root>.views:after,html.with-modal-popup-push .theme-dark.framework7-root>.view:after,html.with-modal-popup-push .theme-dark.framework7-root>.views:after,html.with-modal-popup-push-closing .framework7-root>.view.theme-dark:after,html.with-modal-popup-push-closing .framework7-root>.views.theme-dark:after,html.with-modal-popup-push-closing .theme-dark .framework7-root>.view:after,html.with-modal-popup-push-closing .theme-dark .framework7-root>.views:after,html.with-modal-popup-push-closing .theme-dark.framework7-root>.view:after,html.with-modal-popup-push-closing .theme-dark.framework7-root>.views:after,html.with-modal-popup-push-closing.theme-dark .framework7-root>.view:after,html.with-modal-popup-push-closing.theme-dark .framework7-root>.views:after,html.with-modal-popup-push.theme-dark .framework7-root>.view:after,html.with-modal-popup-push.theme-dark .framework7-root>.views:after{content:'';position:absolute;pointer-events:none;left:0;top:0;width:100%;height:100%;background:rgba(255,255,255,.1);z-index:13000;border-radius:var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0;opacity:1;animation:popup-dark-push-overlay-fade-in var(--f7-popup-transition-duration) forwards}html.with-modal-popup-push .framework7-root>.view,html.with-modal-popup-push .framework7-root>.views{border-radius:var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0;transform:translate3d(0,0,0px) scale(var(--f7-popup-push-scale,1))!important}html.with-modal-popup-push .popup:after{content:'';pointer-events:none;position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,.4);z-index:13000;transition-duration:var(--f7-popup-transition-duration);border-radius:var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0;opacity:0}html.with-modal-popup-push .theme-dark .popup:after,html.with-modal-popup-push .theme-dark.popup:after,html.with-modal-popup-push.theme-dark .popup:after{background:rgba(255,255,255,.05)}html.with-modal-popup-push .popup-behind{transform:translate3d(0,0px,0px) scale(var(--f7-popup-push-scale,1))}html.with-modal-popup-push .popup-behind.modal-out{transform:translate3d(0,100vh,0) scale(var(--f7-popup-push-scale,1))}html.with-modal-popup-push .popup-behind:not(.popup-push){border-radius:var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0}html.with-modal-popup-push .popup-behind.popup-push{transform:translate3d(0,calc(0px - var(--f7-popup-push-offset) - 10px),0px) scale(var(--f7-popup-push-scale,1))}html.with-modal-popup-push .popup-behind.popup-push.modal-out{transform:translate3d(0,calc(0px - var(--f7-popup-push-offset) - 10px + 100vh),0px) scale(var(--f7-popup-push-scale,1))}html.with-modal-popup-push .popup-behind:after{opacity:1;pointer-events:auto}html.with-modal-popup-push-closing .framework7-root>.view.theme-dark:after,html.with-modal-popup-push-closing .framework7-root>.views.theme-dark:after,html.with-modal-popup-push-closing .theme-dark .framework7-root>.view:after,html.with-modal-popup-push-closing .theme-dark .framework7-root>.views:after,html.with-modal-popup-push-closing .theme-dark.framework7-root>.view:after,html.with-modal-popup-push-closing .theme-dark.framework7-root>.views:after,html.with-modal-popup-push-closing.theme-dark .framework7-root>.view:after,html.with-modal-popup-push-closing.theme-dark .framework7-root>.views:after{animation:popup-dark-push-overlay-fade-out var(--f7-popup-transition-duration) forwards}@keyframes popup-dark-push-overlay-fade-in{from{opacity:0}to{opacity:1}}@keyframes popup-dark-push-overlay-fade-out{from{opacity:1}to{opacity:0}}
+:root{--f7-popup-border-radius:0px;--f7-popup-tablet-width:630px;--f7-popup-tablet-height:630px;--f7-popup-transition-duration:400ms;--f7-popup-push-border-radius:10px;--f7-popup-push-offset:var(--f7-safe-area-top)}.ios{--f7-popup-tablet-border-radius:5px;--f7-popup-box-shadow:none}.md{--f7-popup-tablet-border-radius:4px;--f7-popup-box-shadow:0px 20px 44px rgba(0, 0, 0, 0.5)}.aurora{--f7-popup-tablet-border-radius:8px;--f7-popup-box-shadow:0px 20px 44px rgba(0, 0, 0, 0.5)}.popup-backdrop{z-index:10500}.popup-backdrop-unique{z-index:11000}.popup{position:absolute;left:0;top:0px;width:100%;height:100%;display:none;box-sizing:border-box;transition-property:transform;transform:translate3d(0,100vh,0);background:#fff;z-index:11000;overflow:hidden;border-radius:var(--f7-popup-border-radius)}.dark .popup,.popup.dark{background:#000}.popup.modal-in,.popup.modal-out{transition-duration:var(--f7-popup-transition-duration)}.popup.not-animated{transition-duration:0s}.popup.modal-in{display:block;transform:translate3d(0,0,0)}.popup.modal-out{transform:translate3d(0,100vh,0)}.popup.swipe-close-to-top.modal-out{transform:translate3d(0,-100vh,0)}@media (min-width:630px) and (min-height:630px){.popup:not(.popup-tablet-fullscreen){--f7-safe-area-top:0px;--f7-safe-area-bottom:0px;width:var(--f7-popup-tablet-width);height:var(--f7-popup-tablet-height);left:50%;top:50%;margin-left:calc(-1 * var(--f7-popup-tablet-width)/ 2);margin-top:calc(-1 * var(--f7-popup-tablet-height)/ 2);transform:translate3d(0,100vh,0);box-shadow:var(--f7-popup-box-shadow);border-radius:var(--f7-popup-tablet-border-radius,var(--f7-popup-border-radius))}.popup:not(.popup-tablet-fullscreen).modal-in{transform:translate3d(0,0,0)}.popup:not(.popup-tablet-fullscreen).modal-out{transform:translate3d(0,100vh,0)}.popup:not(.popup-tablet-fullscreen).swipe-close-to-top.modal-out{transform:translate3d(0,-100vh,0)}.popup:not(.popup-tablet-fullscreen).popup-behind{transform:translate3d(0,0,0) scale(.9);pointer-events:none}.popup:not(.popup-tablet-fullscreen).popup-behind.modal-out{transform:translate3d(0,100vh,0) scale(.9)}}html.with-modal-popup .framework7-root>.panel .page-content,html.with-modal-popup .framework7-root>.view .page-content,html.with-modal-popup .framework7-root>.views .page-content{overflow:hidden;-webkit-overflow-scrolling:auto}html.with-modal-popup-push .popup-push,html.with-modal-popup-push-closing .popup-push{top:calc(var(--f7-popup-push-offset) + 10px);height:calc(100% - var(--f7-popup-push-offset) - 10px);border-radius:var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0;--f7-safe-area-top:0px}html.with-modal-popup-push .popup-push .page,html.with-modal-popup-push .popup-push .view,html.with-modal-popup-push-closing .popup-push .page,html.with-modal-popup-push-closing .popup-push .view{--f7-safe-area-top:0px}html.with-modal-popup-push .framework7-root,html.with-modal-popup-push-closing .framework7-root{background:#000}html.with-modal-popup-push .framework7-root>.view,html.with-modal-popup-push .framework7-root>.views,html.with-modal-popup-push-closing .framework7-root>.view,html.with-modal-popup-push-closing .framework7-root>.views{transition-duration:var(--f7-popup-transition-duration)}html.with-modal-popup-push .dark .framework7-root>.view:after,html.with-modal-popup-push .dark .framework7-root>.views:after,html.with-modal-popup-push .dark.framework7-root>.view:after,html.with-modal-popup-push .dark.framework7-root>.views:after,html.with-modal-popup-push .framework7-root>.view.dark:after,html.with-modal-popup-push .framework7-root>.views.dark:after,html.with-modal-popup-push-closing .dark .framework7-root>.view:after,html.with-modal-popup-push-closing .dark .framework7-root>.views:after,html.with-modal-popup-push-closing .dark.framework7-root>.view:after,html.with-modal-popup-push-closing .dark.framework7-root>.views:after,html.with-modal-popup-push-closing .framework7-root>.view.dark:after,html.with-modal-popup-push-closing .framework7-root>.views.dark:after,html.with-modal-popup-push-closing.dark .framework7-root>.view:after,html.with-modal-popup-push-closing.dark .framework7-root>.views:after,html.with-modal-popup-push.dark .framework7-root>.view:after,html.with-modal-popup-push.dark .framework7-root>.views:after{content:'';position:absolute;pointer-events:none;left:0;top:0;width:100%;height:100%;background:rgba(255,255,255,.1);z-index:13000;border-radius:var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0;opacity:1;animation:popup-dark-push-overlay-fade-in var(--f7-popup-transition-duration) forwards}html.with-modal-popup-push .framework7-root>.view,html.with-modal-popup-push .framework7-root>.views{border-radius:var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0;transform:translate3d(0,0,0px) scale(var(--f7-popup-push-scale,1))!important}html.with-modal-popup-push .popup:after{content:'';pointer-events:none;position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,.4);z-index:13000;transition-duration:var(--f7-popup-transition-duration);border-radius:var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0;opacity:0}html.with-modal-popup-push .dark .popup:after,html.with-modal-popup-push .dark.popup:after,html.with-modal-popup-push.dark .popup:after{background:rgba(255,255,255,.05)}html.with-modal-popup-push .popup-behind{transform:translate3d(0,0px,0px) scale(var(--f7-popup-push-scale,1))}html.with-modal-popup-push .popup-behind.modal-out{transform:translate3d(0,100vh,0) scale(var(--f7-popup-push-scale,1))}html.with-modal-popup-push .popup-behind:not(.popup-push){border-radius:var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0}html.with-modal-popup-push .popup-behind.popup-push{transform:translate3d(0,calc(0px - var(--f7-popup-push-offset) - 10px),0px) scale(var(--f7-popup-push-scale,1))}html.with-modal-popup-push .popup-behind.popup-push.modal-out{transform:translate3d(0,calc(0px - var(--f7-popup-push-offset) - 10px + 100vh),0px) scale(var(--f7-popup-push-scale,1))}html.with-modal-popup-push .popup-behind:after{opacity:1;pointer-events:auto}html.with-modal-popup-push-closing .dark .framework7-root>.view:after,html.with-modal-popup-push-closing .dark .framework7-root>.views:after,html.with-modal-popup-push-closing .dark.framework7-root>.view:after,html.with-modal-popup-push-closing .dark.framework7-root>.views:after,html.with-modal-popup-push-closing .framework7-root>.view.dark:after,html.with-modal-popup-push-closing .framework7-root>.views.dark:after,html.with-modal-popup-push-closing.dark .framework7-root>.view:after,html.with-modal-popup-push-closing.dark .framework7-root>.views:after{animation:popup-dark-push-overlay-fade-out var(--f7-popup-transition-duration) forwards}@keyframes popup-dark-push-overlay-fade-in{from{opacity:0}to{opacity:1}}@keyframes popup-dark-push-overlay-fade-out{from{opacity:1}to{opacity:0}}

package/components/popup/popup.css

@@ -1 +1 @@
-:root{--f7-popup-border-radius:0px;--f7-popup-tablet-width:630px;--f7-popup-tablet-height:630px;--f7-popup-transition-duration:400ms;--f7-popup-push-border-radius:10px;--f7-popup-push-offset:var(--f7-safe-area-top)}.ios{--f7-popup-tablet-border-radius:5px;--f7-popup-box-shadow:none}.md{--f7-popup-tablet-border-radius:4px;--f7-popup-box-shadow:0px 20px 44px rgba(0, 0, 0, 0.5)}.aurora{--f7-popup-tablet-border-radius:8px;--f7-popup-box-shadow:0px 20px 44px rgba(0, 0, 0, 0.5)}.popup-backdrop{z-index:10500}.popup{position:absolute;left:0;top:0px;width:100%;height:100%;display:none;box-sizing:border-box;transition-property:transform;transform:translate3d(0,100vh,0);background:#fff;z-index:11000;overflow:hidden;border-radius:var(--f7-popup-border-radius)}.popup.theme-dark,.theme-dark .popup{background:#000}.popup.modal-in,.popup.modal-out{transition-duration:var(--f7-popup-transition-duration)}.popup.not-animated{transition-duration:0s}.popup.modal-in{display:block;transform:translate3d(0,0,0)}.popup.modal-out{transform:translate3d(0,100vh,0)}.popup.swipe-close-to-top.modal-out{transform:translate3d(0,-100vh,0)}@media (min-width:630px) and (min-height:630px){.popup:not(.popup-tablet-fullscreen){--f7-safe-area-top:0px;--f7-safe-area-bottom:0px;width:var(--f7-popup-tablet-width);height:var(--f7-popup-tablet-height);left:50%;top:50%;margin-left:calc(-1 * var(--f7-popup-tablet-width)/ 2);margin-top:calc(-1 * var(--f7-popup-tablet-height)/ 2);transform:translate3d(0,100vh,0);box-shadow:var(--f7-popup-box-shadow);border-radius:var(--f7-popup-tablet-border-radius,var(--f7-popup-border-radius))}.popup:not(.popup-tablet-fullscreen).modal-in{transform:translate3d(0,0,0)}.popup:not(.popup-tablet-fullscreen).modal-out{transform:translate3d(0,100vh,0)}.popup:not(.popup-tablet-fullscreen).swipe-close-to-top.modal-out{transform:translate3d(0,-100vh,0)}.popup:not(.popup-tablet-fullscreen).popup-behind{transform:translate3d(0,0,0) scale(.9);pointer-events:none}.popup:not(.popup-tablet-fullscreen).popup-behind.modal-out{transform:translate3d(0,100vh,0) scale(.9)}}html.with-modal-popup .framework7-root>.panel .page-content,html.with-modal-popup .framework7-root>.view .page-content,html.with-modal-popup .framework7-root>.views .page-content{overflow:hidden;-webkit-overflow-scrolling:auto}html.with-modal-popup-push .popup-push,html.with-modal-popup-push-closing .popup-push{top:calc(var(--f7-popup-push-offset) + 10px);height:calc(100% - var(--f7-popup-push-offset) - 10px);border-radius:var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0;--f7-safe-area-top:0px}html.with-modal-popup-push .popup-push .page,html.with-modal-popup-push .popup-push .view,html.with-modal-popup-push-closing .popup-push .page,html.with-modal-popup-push-closing .popup-push .view{--f7-safe-area-top:0px}html.with-modal-popup-push .framework7-root,html.with-modal-popup-push-closing .framework7-root{background:#000}html.with-modal-popup-push .framework7-root>.view,html.with-modal-popup-push .framework7-root>.views,html.with-modal-popup-push-closing .framework7-root>.view,html.with-modal-popup-push-closing .framework7-root>.views{transition-duration:var(--f7-popup-transition-duration)}html.with-modal-popup-push .framework7-root>.view.theme-dark:after,html.with-modal-popup-push .framework7-root>.views.theme-dark:after,html.with-modal-popup-push .theme-dark .framework7-root>.view:after,html.with-modal-popup-push .theme-dark .framework7-root>.views:after,html.with-modal-popup-push .theme-dark.framework7-root>.view:after,html.with-modal-popup-push .theme-dark.framework7-root>.views:after,html.with-modal-popup-push-closing .framework7-root>.view.theme-dark:after,html.with-modal-popup-push-closing .framework7-root>.views.theme-dark:after,html.with-modal-popup-push-closing .theme-dark .framework7-root>.view:after,html.with-modal-popup-push-closing .theme-dark .framework7-root>.views:after,html.with-modal-popup-push-closing .theme-dark.framework7-root>.view:after,html.with-modal-popup-push-closing .theme-dark.framework7-root>.views:after,html.with-modal-popup-push-closing.theme-dark .framework7-root>.view:after,html.with-modal-popup-push-closing.theme-dark .framework7-root>.views:after,html.with-modal-popup-push.theme-dark .framework7-root>.view:after,html.with-modal-popup-push.theme-dark .framework7-root>.views:after{content:'';position:absolute;pointer-events:none;left:0;top:0;width:100%;height:100%;background:rgba(255,255,255,.1);z-index:13000;border-radius:var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0;opacity:1;animation:popup-dark-push-overlay-fade-in var(--f7-popup-transition-duration) forwards}html.with-modal-popup-push .framework7-root>.view,html.with-modal-popup-push .framework7-root>.views{border-radius:var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0;transform:translate3d(0,0,0px) scale(var(--f7-popup-push-scale,1))!important}html.with-modal-popup-push .popup:after{content:'';pointer-events:none;position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,.4);z-index:13000;transition-duration:var(--f7-popup-transition-duration);border-radius:var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0;opacity:0}html.with-modal-popup-push .theme-dark .popup:after,html.with-modal-popup-push .theme-dark.popup:after,html.with-modal-popup-push.theme-dark .popup:after{background:rgba(255,255,255,.05)}html.with-modal-popup-push .popup-behind{transform:translate3d(0,0px,0px) scale(var(--f7-popup-push-scale,1))}html.with-modal-popup-push .popup-behind.modal-out{transform:translate3d(0,100vh,0) scale(var(--f7-popup-push-scale,1))}html.with-modal-popup-push .popup-behind:not(.popup-push){border-radius:var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0}html.with-modal-popup-push .popup-behind.popup-push{transform:translate3d(0,calc(0px - var(--f7-popup-push-offset) - 10px),0px) scale(var(--f7-popup-push-scale,1))}html.with-modal-popup-push .popup-behind.popup-push.modal-out{transform:translate3d(0,calc(0px - var(--f7-popup-push-offset) - 10px + 100vh),0px) scale(var(--f7-popup-push-scale,1))}html.with-modal-popup-push .popup-behind:after{opacity:1;pointer-events:auto}html.with-modal-popup-push-closing .framework7-root>.view.theme-dark:after,html.with-modal-popup-push-closing .framework7-root>.views.theme-dark:after,html.with-modal-popup-push-closing .theme-dark .framework7-root>.view:after,html.with-modal-popup-push-closing .theme-dark .framework7-root>.views:after,html.with-modal-popup-push-closing .theme-dark.framework7-root>.view:after,html.with-modal-popup-push-closing .theme-dark.framework7-root>.views:after,html.with-modal-popup-push-closing.theme-dark .framework7-root>.view:after,html.with-modal-popup-push-closing.theme-dark .framework7-root>.views:after{animation:popup-dark-push-overlay-fade-out var(--f7-popup-transition-duration) forwards}@keyframes popup-dark-push-overlay-fade-in{from{opacity:0}to{opacity:1}}@keyframes popup-dark-push-overlay-fade-out{from{opacity:1}to{opacity:0}}
+:root{--f7-popup-border-radius:0px;--f7-popup-tablet-width:630px;--f7-popup-tablet-height:630px;--f7-popup-transition-duration:400ms;--f7-popup-push-border-radius:10px;--f7-popup-push-offset:var(--f7-safe-area-top)}.ios{--f7-popup-tablet-border-radius:5px;--f7-popup-box-shadow:none}.md{--f7-popup-tablet-border-radius:4px;--f7-popup-box-shadow:0px 20px 44px rgba(0, 0, 0, 0.5)}.aurora{--f7-popup-tablet-border-radius:8px;--f7-popup-box-shadow:0px 20px 44px rgba(0, 0, 0, 0.5)}.popup-backdrop{z-index:10500}.popup-backdrop-unique{z-index:11000}.popup{position:absolute;left:0;top:0px;width:100%;height:100%;display:none;box-sizing:border-box;transition-property:transform;transform:translate3d(0,100vh,0);background:#fff;z-index:11000;overflow:hidden;border-radius:var(--f7-popup-border-radius)}.dark .popup,.popup.dark{background:#000}.popup.modal-in,.popup.modal-out{transition-duration:var(--f7-popup-transition-duration)}.popup.not-animated{transition-duration:0s}.popup.modal-in{display:block;transform:translate3d(0,0,0)}.popup.modal-out{transform:translate3d(0,100vh,0)}.popup.swipe-close-to-top.modal-out{transform:translate3d(0,-100vh,0)}@media (min-width:630px) and (min-height:630px){.popup:not(.popup-tablet-fullscreen){--f7-safe-area-top:0px;--f7-safe-area-bottom:0px;width:var(--f7-popup-tablet-width);height:var(--f7-popup-tablet-height);left:50%;top:50%;margin-left:calc(-1 * var(--f7-popup-tablet-width)/ 2);margin-top:calc(-1 * var(--f7-popup-tablet-height)/ 2);transform:translate3d(0,100vh,0);box-shadow:var(--f7-popup-box-shadow);border-radius:var(--f7-popup-tablet-border-radius,var(--f7-popup-border-radius))}.popup:not(.popup-tablet-fullscreen).modal-in{transform:translate3d(0,0,0)}.popup:not(.popup-tablet-fullscreen).modal-out{transform:translate3d(0,100vh,0)}.popup:not(.popup-tablet-fullscreen).swipe-close-to-top.modal-out{transform:translate3d(0,-100vh,0)}.popup:not(.popup-tablet-fullscreen).popup-behind{transform:translate3d(0,0,0) scale(.9);pointer-events:none}.popup:not(.popup-tablet-fullscreen).popup-behind.modal-out{transform:translate3d(0,100vh,0) scale(.9)}}html.with-modal-popup .framework7-root>.panel .page-content,html.with-modal-popup .framework7-root>.view .page-content,html.with-modal-popup .framework7-root>.views .page-content{overflow:hidden;-webkit-overflow-scrolling:auto}html.with-modal-popup-push .popup-push,html.with-modal-popup-push-closing .popup-push{top:calc(var(--f7-popup-push-offset) + 10px);height:calc(100% - var(--f7-popup-push-offset) - 10px);border-radius:var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0;--f7-safe-area-top:0px}html.with-modal-popup-push .popup-push .page,html.with-modal-popup-push .popup-push .view,html.with-modal-popup-push-closing .popup-push .page,html.with-modal-popup-push-closing .popup-push .view{--f7-safe-area-top:0px}html.with-modal-popup-push .framework7-root,html.with-modal-popup-push-closing .framework7-root{background:#000}html.with-modal-popup-push .framework7-root>.view,html.with-modal-popup-push .framework7-root>.views,html.with-modal-popup-push-closing .framework7-root>.view,html.with-modal-popup-push-closing .framework7-root>.views{transition-duration:var(--f7-popup-transition-duration)}html.with-modal-popup-push .dark .framework7-root>.view:after,html.with-modal-popup-push .dark .framework7-root>.views:after,html.with-modal-popup-push .dark.framework7-root>.view:after,html.with-modal-popup-push .dark.framework7-root>.views:after,html.with-modal-popup-push .framework7-root>.view.dark:after,html.with-modal-popup-push .framework7-root>.views.dark:after,html.with-modal-popup-push-closing .dark .framework7-root>.view:after,html.with-modal-popup-push-closing .dark .framework7-root>.views:after,html.with-modal-popup-push-closing .dark.framework7-root>.view:after,html.with-modal-popup-push-closing .dark.framework7-root>.views:after,html.with-modal-popup-push-closing .framework7-root>.view.dark:after,html.with-modal-popup-push-closing .framework7-root>.views.dark:after,html.with-modal-popup-push-closing.dark .framework7-root>.view:after,html.with-modal-popup-push-closing.dark .framework7-root>.views:after,html.with-modal-popup-push.dark .framework7-root>.view:after,html.with-modal-popup-push.dark .framework7-root>.views:after{content:'';position:absolute;pointer-events:none;left:0;top:0;width:100%;height:100%;background:rgba(255,255,255,.1);z-index:13000;border-radius:var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0;opacity:1;animation:popup-dark-push-overlay-fade-in var(--f7-popup-transition-duration) forwards}html.with-modal-popup-push .framework7-root>.view,html.with-modal-popup-push .framework7-root>.views{border-radius:var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0;transform:translate3d(0,0,0px) scale(var(--f7-popup-push-scale,1))!important}html.with-modal-popup-push .popup:after{content:'';pointer-events:none;position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,.4);z-index:13000;transition-duration:var(--f7-popup-transition-duration);border-radius:var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0;opacity:0}html.with-modal-popup-push .dark .popup:after,html.with-modal-popup-push .dark.popup:after,html.with-modal-popup-push.dark .popup:after{background:rgba(255,255,255,.05)}html.with-modal-popup-push .popup-behind{transform:translate3d(0,0px,0px) scale(var(--f7-popup-push-scale,1))}html.with-modal-popup-push .popup-behind.modal-out{transform:translate3d(0,100vh,0) scale(var(--f7-popup-push-scale,1))}html.with-modal-popup-push .popup-behind:not(.popup-push){border-radius:var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0}html.with-modal-popup-push .popup-behind.popup-push{transform:translate3d(0,calc(0px - var(--f7-popup-push-offset) - 10px),0px) scale(var(--f7-popup-push-scale,1))}html.with-modal-popup-push .popup-behind.popup-push.modal-out{transform:translate3d(0,calc(0px - var(--f7-popup-push-offset) - 10px + 100vh),0px) scale(var(--f7-popup-push-scale,1))}html.with-modal-popup-push .popup-behind:after{opacity:1;pointer-events:auto}html.with-modal-popup-push-closing .dark .framework7-root>.view:after,html.with-modal-popup-push-closing .dark .framework7-root>.views:after,html.with-modal-popup-push-closing .dark.framework7-root>.view:after,html.with-modal-popup-push-closing .dark.framework7-root>.views:after,html.with-modal-popup-push-closing .framework7-root>.view.dark:after,html.with-modal-popup-push-closing .framework7-root>.views.dark:after,html.with-modal-popup-push-closing.dark .framework7-root>.view:after,html.with-modal-popup-push-closing.dark .framework7-root>.views:after{animation:popup-dark-push-overlay-fade-out var(--f7-popup-transition-duration) forwards}@keyframes popup-dark-push-overlay-fade-in{from{opacity:0}to{opacity:1}}@keyframes popup-dark-push-overlay-fade-out{from{opacity:1}to{opacity:0}}

package/components/popup/popup.d.ts

@@ -31,6 +31,8 @@ export namespace Popup {
     backdrop?: boolean;
     /** Backdrop element to share across instances */
     backdropEl?: HTMLElement | CSSSelector;
+    /** If enabled it creates unique backdrop element exclusively for this modal (default false) */
+    backdropUnique?: boolean;
     /** When enabled, popup will be closed on backdrop click. (default true) */
     closeByBackdropClick?: boolean;
     /** When enabled, popup will be closed on ESC keyboard key press (default false) */
@@ -43,6 +45,8 @@ export namespace Popup {
     swipeHandler?: HTMLElement | CSSSelector;
     /** When enabled it will push view behind on open. Works only when top safe area is in place. It can also be enabled by adding `popup-push` class to Popup element. (default false) */
     push?: boolean;
+    /** Element to mount modal to. (default app.el) */
+    containerEl?: HTMLElement | CSSSelector;
 
     /** Object with events handlers.. */
     on?: {

package/components/popup/popup.js

@@ -1 +1,42 @@
-(function framework7ComponentLoader(o,e){void 0===e&&(e=!0);var t=o.$,p=o.utils,s=o.getDevice,r=o.getSupport,a=(o.Class,o.Modal),n=(o.ConstructorMethods,o.ModalMethods);function i(o){this.wrapped=o}function l(o){var e,t;function p(e,t){try{var r=o[e](t),a=r.value,n=a instanceof i;Promise.resolve(n?a.wrapped:a).then((function(o){n?p("return"===e?"return":"next",o):s(r.done?"return":"normal",o)}),(function(o){p("throw",o)}))}catch(o){s("throw",o)}}function s(o,s){switch(o){case"return":e.resolve({value:s,done:!0});break;case"throw":e.reject(s);break;default:e.resolve({value:s,done:!1})}(e=e.next)?p(e.key,e.arg):t=null}this._invoke=function(o,s){return new Promise((function(r,a){var n={key:o,arg:s,resolve:r,reject:a,next:null};t?t=t.next=n:(e=t=n,p(o,s))}))},"function"!=typeof o.return&&(this.return=void 0)}function u(o,e){return(u=Object.setPrototypeOf||function(o,e){return o.__proto__=e,o})(o,e)}function c(o){if(void 0===o)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return o}l.prototype["function"==typeof Symbol&&Symbol.asyncIterator||"@@asyncIterator"]=function(){return this},l.prototype.next=function(o){return this._invoke("next",o)},l.prototype.throw=function(o){return this._invoke("throw",o)},l.prototype.return=function(o){return this._invoke("return",o)};var d=p.extend,h=p.now,f=p.nextTick,m=function(o){var e,p;function a(e,p){var a,n,i,l,u,m=d({on:{}},e.params.popup,p),v=c(a=o.call(this,e,m)||this),w=r(),y=s();if(v.params=m,(n=v.params.el?t(v.params.el).eq(0):t(v.params.content).filter((function(o){return 1===o.nodeType})).eq(0))&&n.length>0&&n[0].f7Modal)return n[0].f7Modal||c(a);if(0===n.length)return v.destroy()||c(a);function g(o){var e=o.target,p=t(e);if(!(!y.desktop&&y.cordova&&(window.Keyboard&&window.Keyboard.isVisible||window.cordova.plugins&&window.cordova.plugins.Keyboard&&window.cordova.plugins.Keyboard.isVisible))&&0===p.closest(v.el).length&&v.params&&v.params.closeByBackdropClick&&v.params.backdrop&&v.backdropEl&&v.backdropEl===e){var s=!0;v.$el.nextAll(".popup.modal-in").each((function(o){var e=o.f7Modal;e&&e.params.closeByBackdropClick&&e.params.backdrop&&e.backdropEl===v.backdropEl&&(s=!1)})),s&&v.close()}}function b(o){27===o.keyCode&&v.params.closeOnEscape&&v.close()}function k(o){return(e.height-2*o)/e.height}v.params.backdrop&&v.params.backdropEl?i=t(v.params.backdropEl):v.params.backdrop&&0===(i=v.$containerEl.children(".popup-backdrop")).length&&(i=t('<div class="popup-backdrop"></div>'),v.$containerEl.append(i)),d(v,{app:e,push:n.hasClass("popup-push")||v.params.push,$el:n,el:n[0],$backdropEl:i,backdropEl:i&&i[0],type:"popup",$htmlEl:t("html")}),v.params.push&&n.addClass("popup-push");var C,E,$,x,M,T,P,S,B,_,H,O=!0,A=!1,j=!1;function q(o){!A&&O&&v.params.swipeToClose&&(v.params.swipeHandler&&0===t(o.target).closest(v.params.swipeHandler).length||(A=!0,j=!1,C={x:"touchstart"===o.type?o.targetTouches[0].pageX:o.pageX,y:"touchstart"===o.type?o.targetTouches[0].pageY:o.pageY},x=h(),$=void 0,v.params.swipeHandler||"touchstart"!==o.type||(T=t(o.target).closest(".page-content")[0])))}function D(o){if(A){if(E={x:"touchmove"===o.type?o.targetTouches[0].pageX:o.pageX,y:"touchmove"===o.type?o.targetTouches[0].pageY:o.pageY},void 0===$&&($=!!($||Math.abs(E.x-C.x)>Math.abs(E.y-C.y))),$)return A=!1,void(j=!1);M=C.y-E.y,u&&l&&M>0&&(M=0);var t=M<0?"to-bottom":"to-top";if(n.transition(0),"string"==typeof v.params.swipeToClose&&t!==v.params.swipeToClose)return n.transform(""),void n.transition("");if(j)v.emit("local::swipeMove popupSwipeMove",v),v.$el.trigger("popup:swipemove");else{if(u&&l&&(_=n[0].offsetHeight,0===(H=n.prevAll(".popup.modal-in").eq(0)).length&&(H=e.$el.children(".view, .views"))),T&&(P=T.scrollTop,B=T.scrollHeight,S=T.offsetHeight,!(B===S||"to-bottom"===t&&0===P||"to-top"===t&&P===B-S)))return n.transform(""),n.transition(""),A=!1,void(j=!1);j=!0,v.emit("local::swipeStart popupSwipeStart",v),v.$el.trigger("popup:swipestart")}if(o.preventDefault(),u&&l){var p=1-Math.abs(M/_),s=1-(1-k(l))*p;H.hasClass("popup")?H.hasClass("popup-push")?H.transition(0).forEach((function(o){o.style.setProperty("transform","translate3d(0, calc(-1 * "+p+" * (var(--f7-popup-push-offset) + 10px)) , 0px) scale("+s+")","important")})):H.transition(0).forEach((function(o){o.style.setProperty("transform","translate3d(0, 0px , 0px) scale("+s+")","important")})):H.transition(0).forEach((function(o){o.style.setProperty("transform","translate3d(0,0,0) scale("+s+")","important")}))}n.transition(0).transform("translate3d(0,"+-M+"px,0)")}}function K(){if(A=!1,j){v.emit("local::swipeEnd popupSwipeEnd",v),v.$el.trigger("popup:swipeend"),j=!1,O=!1,n.transition(""),u&&l&&H.transition("").transform("");var o=M<=0?"to-bottom":"to-top";if("string"==typeof v.params.swipeToClose&&o!==v.params.swipeToClose)return n.transform(""),void(O=!0);var e=Math.abs(M),t=(new Date).getTime()-x;t<300&&e>20||t>=300&&e>100?f((function(){"to-bottom"===o?n.addClass("swipe-close-to-bottom"):n.addClass("swipe-close-to-top"),n.transform(""),v.emit("local::swipeclose popupSwipeClose",v),v.$el.trigger("popup:swipeclose"),v.close(),O=!0})):(O=!0,n.transform(""))}}var X,Y=!!w.passiveListener&&{passive:!0};v.params.swipeToClose&&(n.on(e.touchEvents.start,q,Y),e.on("touchmove",D),e.on("touchend:passive",K),v.once("popupDestroy",(function(){n.off(e.touchEvents.start,q,Y),e.off("touchmove",D),e.off("touchend:passive",K)})));var z=function(){var o=u;v.push&&(u=v.push&&(e.width<630||e.height<630||n.hasClass("popup-tablet-fullscreen"))),u&&!o?I():u&&o?v.$htmlEl[0].style.setProperty("--f7-popup-push-scale",k(l)):!u&&o&&(v.$htmlEl.removeClass("with-modal-popup-push"),v.$htmlEl[0].style.removeProperty("--f7-popup-push-scale"))},I=function(){e.off("resize",z),v.push&&(u=v.push&&(e.width<630||e.height<630||n.hasClass("popup-tablet-fullscreen"))),u&&(l=parseInt(n.css("--f7-popup-push-offset"),10),Number.isNaN(l)&&(l=0),l&&(n.addClass("popup-push"),v.$htmlEl.addClass("with-modal-popup-push"),v.$htmlEl[0].style.setProperty("--f7-popup-push-scale",k(l)))),e.on("resize",z)};return v.on("open",(function(){X=!1,v.params.closeOnEscape&&t(document).on("keydown",b),n.prevAll(".popup.modal-in").addClass("popup-behind"),I()})),v.on("opened",(function(){n.removeClass("swipe-close-to-bottom swipe-close-to-top"),v.params.closeByBackdropClick&&e.on("click",g)})),v.on("close",(function(){X=v.$el.prevAll(".popup-push.modal-in").length>0,v.params.closeOnEscape&&t(document).off("keydown",b),v.params.closeByBackdropClick&&e.off("click",g),n.prevAll(".popup.modal-in").eq(0).removeClass("popup-behind"),u&&l&&!X&&(v.$htmlEl.removeClass("with-modal-popup-push"),v.$htmlEl.addClass("with-modal-popup-push-closing")),e.off("resize",z)})),v.on("closed",(function(){n.removeClass("popup-behind"),u&&l&&!X&&(v.$htmlEl.removeClass("with-modal-popup-push-closing"),v.$htmlEl[0].style.removeProperty("--f7-popup-push-scale"))})),n[0].f7Modal=v,v||c(a)}return p=o,(e=a).prototype=Object.create(p.prototype),e.prototype.constructor=e,u(e,p),a}(a),v={name:"popup",params:{popup:{backdrop:!0,backdropEl:void 0,closeByBackdropClick:!0,closeOnEscape:!1,swipeToClose:!1,swipeHandler:null,push:!1,containerEl:null}},static:{Popup:m},create:function(){this.popup=n({app:this,constructor:m,defaultSelector:".popup.modal-in",parentSelector:".popup"})},clicks:{".popup-open":function(o,e){void 0===e&&(e={});this.popup.open(e.popup,e.animate,o)},".popup-close":function(o,e){void 0===e&&(e={});this.popup.close(e.popup,e.animate,o)}}};if(e){if(o.prototype.modules&&o.prototype.modules[v.name])return;o.use(v),o.instance&&(o.instance.useModuleParams(v,o.instance.params),o.instance.useModule(v))}return v}(Framework7, typeof Framework7AutoInstallComponent === 'undefined' ? undefined : Framework7AutoInstallComponent))
+import Popup from './popup-class.js';
+import ModalMethods from '../../shared/modal-methods.js';
+export default {
+  name: 'popup',
+  params: {
+    popup: {
+      backdrop: true,
+      backdropEl: undefined,
+      backdropUnique: false,
+      closeByBackdropClick: true,
+      closeOnEscape: false,
+      swipeToClose: false,
+      swipeHandler: null,
+      push: false,
+      containerEl: null
+    }
+  },
+  static: {
+    Popup
+  },
+
+  create() {
+    const app = this;
+    app.popup = ModalMethods({
+      app,
+      constructor: Popup,
+      defaultSelector: '.popup.modal-in',
+      parentSelector: '.popup'
+    });
+  },
+
+  clicks: {
+    '.popup-open': function openPopup($clickedEl, data = {}) {
+      const app = this;
+      app.popup.open(data.popup, data.animate, $clickedEl);
+    },
+    '.popup-close': function closePopup($clickedEl, data = {}) {
+      const app = this;
+      app.popup.close(data.popup, data.animate, $clickedEl);
+    }
+  }
+};

package/components/popup/popup.lazy.js

@@ -0,0 +1 @@
+(function framework7ComponentLoader(p,o){void 0===o&&(o=!0);var e=p.$,s=p.utils,t=p.getDevice,a=p.getSupport,r=(p.Class,p.Modal),l=(p.ConstructorMethods,p.ModalMethods),n=s.extend,i=s.now,c=s.nextTick;class u extends r{constructor(p,o){const s=n({on:{}},p.params.popup,o);super(p,s);const r=this,l=getWindow(),u=getDocument(),d=a(),m=t();let h,f,g,v;if(r.params=s,h=r.params.el?e(r.params.el).eq(0):e(r.params.content).filter((p=>1===p.nodeType)).eq(0),h&&h.length>0&&h[0].f7Modal)return h[0].f7Modal;if(0===h.length)return r.destroy();function y(p){const o=p.target,s=e(o);if(!(!m.desktop&&m.cordova&&(l.Keyboard&&l.Keyboard.isVisible||l.cordova.plugins&&l.cordova.plugins.Keyboard&&l.cordova.plugins.Keyboard.isVisible))&&0===s.closest(r.el).length&&r.params&&r.params.closeByBackdropClick&&r.params.backdrop&&r.backdropEl&&r.backdropEl===o){let p=!0;r.$el.nextAll(".popup.modal-in").each((o=>{const e=o.f7Modal;e&&e.params.closeByBackdropClick&&e.params.backdrop&&e.backdropEl===r.backdropEl&&(p=!1)})),p&&r.close()}}function b(p){27===p.keyCode&&r.params.closeOnEscape&&r.close()}function w(o){return(p.height-2*o)/p.height}r.params.backdrop&&r.params.backdropEl?f=e(r.params.backdropEl):r.params.backdrop&&(r.params.backdropUnique?(f=e('<div class="popup-backdrop popup-backdrop-unique"></div>'),r.$containerEl.append(f)):f=r.$containerEl.children(".popup-backdrop"),0===f.length&&(f=e('<div class="popup-backdrop"></div>'),r.$containerEl.append(f))),n(r,{app:p,push:h.hasClass("popup-push")||r.params.push,$el:h,el:h[0],$backdropEl:f,backdropEl:f&&f[0],type:"popup",$htmlEl:e("html")}),r.params.push&&h.addClass("popup-push");let k,C,E,$,M,T,x,B,P,S,q,H=!0,A=!1,D=!1;function K(p){!A&&H&&r.params.swipeToClose&&(r.params.swipeHandler&&0===e(p.target).closest(r.params.swipeHandler).length||(A=!0,D=!1,k={x:"touchstart"===p.type?p.targetTouches[0].pageX:p.pageX,y:"touchstart"===p.type?p.targetTouches[0].pageY:p.pageY},$=i(),E=void 0,r.params.swipeHandler||"touchstart"!==p.type||(T=e(p.target).closest(".page-content")[0])))}function O(o){if(!A)return;if(C={x:"touchmove"===o.type?o.targetTouches[0].pageX:o.pageX,y:"touchmove"===o.type?o.targetTouches[0].pageY:o.pageY},void 0===E&&(E=!!(E||Math.abs(C.x-k.x)>Math.abs(C.y-k.y))),E)return A=!1,void(D=!1);M=k.y-C.y,v&&g&&M>0&&(M=0);const e=M<0?"to-bottom":"to-top";if(h.transition(0),"string"==typeof r.params.swipeToClose&&e!==r.params.swipeToClose)return h.transform(""),void h.transition("");if(D)r.emit("local::swipeMove popupSwipeMove",r),r.$el.trigger("popup:swipemove");else{if(v&&g&&(S=h[0].offsetHeight,q=h.prevAll(".popup.modal-in").eq(0),0===q.length&&(q=p.$el.children(".view, .views"))),T&&(x=T.scrollTop,P=T.scrollHeight,B=T.offsetHeight,!(P===B||"to-bottom"===e&&0===x||"to-top"===e&&x===P-B)))return h.transform(""),h.transition(""),A=!1,void(D=!1);D=!0,r.emit("local::swipeStart popupSwipeStart",r),r.$el.trigger("popup:swipestart")}if(o.preventDefault(),v&&g){const p=1-Math.abs(M/S),o=1-(1-w(g))*p;q.hasClass("popup")?q.hasClass("popup-push")?q.transition(0).forEach((e=>{e.style.setProperty("transform",`translate3d(0, calc(-1 * ${p} * (var(--f7-popup-push-offset) + 10px)) , 0px) scale(${o})`,"important")})):q.transition(0).forEach((p=>{p.style.setProperty("transform",`translate3d(0, 0px , 0px) scale(${o})`,"important")})):q.transition(0).forEach((p=>{p.style.setProperty("transform",`translate3d(0,0,0) scale(${o})`,"important")}))}h.transition(0).transform(`translate3d(0,${-M}px,0)`)}function X(){if(A=!1,!D)return;r.emit("local::swipeEnd popupSwipeEnd",r),r.$el.trigger("popup:swipeend"),D=!1,H=!1,h.transition(""),v&&g&&q.transition("").transform("");const p=M<=0?"to-bottom":"to-top";if("string"==typeof r.params.swipeToClose&&p!==r.params.swipeToClose)return h.transform(""),void(H=!0);const o=Math.abs(M),e=(new Date).getTime()-$;e<300&&o>20||e>=300&&o>100?c((()=>{"to-bottom"===p?h.addClass("swipe-close-to-bottom"):h.addClass("swipe-close-to-top"),h.transform(""),r.emit("local::swipeclose popupSwipeClose",r),r.$el.trigger("popup:swipeclose"),r.close(),H=!0})):(H=!0,h.transform(""))}const Y=!!d.passiveListener&&{passive:!0};let z;r.params.swipeToClose&&(h.on(p.touchEvents.start,K,Y),p.on("touchmove",O),p.on("touchend:passive",X),r.once("popupDestroy",(()=>{h.off(p.touchEvents.start,K,Y),p.off("touchmove",O),p.off("touchend:passive",X)})));const N=()=>{const o=v;r.push&&(v=r.push&&(p.width<630||p.height<630||h.hasClass("popup-tablet-fullscreen"))),v&&!o?L():v&&o?r.$htmlEl[0].style.setProperty("--f7-popup-push-scale",w(g)):!v&&o&&(r.$htmlEl.removeClass("with-modal-popup-push"),r.$htmlEl[0].style.removeProperty("--f7-popup-push-scale"))},L=()=>{p.off("resize",N),r.push&&(v=r.push&&(p.width<630||p.height<630||h.hasClass("popup-tablet-fullscreen"))),v&&(g=parseInt(h.css("--f7-popup-push-offset"),10),Number.isNaN(g)&&(g=0),g&&(h.addClass("popup-push"),r.$htmlEl.addClass("with-modal-popup-push"),r.$htmlEl[0].style.setProperty("--f7-popup-push-scale",w(g)))),p.on("resize",N)};return r.on("open",(()=>{z=!1,r.params.closeOnEscape&&e(u).on("keydown",b),h.prevAll(".popup.modal-in").addClass("popup-behind"),L()})),r.on("opened",(()=>{h.removeClass("swipe-close-to-bottom swipe-close-to-top"),r.params.closeByBackdropClick&&p.on("click",y)})),r.on("close",(()=>{z=r.$el.prevAll(".popup-push.modal-in").length>0,r.params.closeOnEscape&&e(u).off("keydown",b),r.params.closeByBackdropClick&&p.off("click",y),h.prevAll(".popup.modal-in").eq(0).removeClass("popup-behind"),v&&g&&!z&&(r.$htmlEl.removeClass("with-modal-popup-push"),r.$htmlEl.addClass("with-modal-popup-push-closing")),p.off("resize",N)})),r.on("closed",(()=>{h.removeClass("popup-behind"),v&&g&&!z&&(r.$htmlEl.removeClass("with-modal-popup-push-closing"),r.$htmlEl[0].style.removeProperty("--f7-popup-push-scale"))})),h[0].f7Modal=r,r}}var d={name:"popup",params:{popup:{backdrop:!0,backdropEl:void 0,backdropUnique:!1,closeByBackdropClick:!0,closeOnEscape:!1,swipeToClose:!1,swipeHandler:null,push:!1,containerEl:null}},static:{Popup:u},create(){this.popup=l({app:this,constructor:u,defaultSelector:".popup.modal-in",parentSelector:".popup"})},clicks:{".popup-open":function(p,o={}){this.popup.open(o.popup,o.animate,p)},".popup-close":function(p,o={}){this.popup.close(o.popup,o.animate,p)}}};if(o){if(p.prototype.modules&&p.prototype.modules[d.name])return;p.use(d),p.instance&&(p.instance.useModuleParams(d,p.instance.params),p.instance.useModule(d))}return d}(Framework7, typeof Framework7AutoInstallComponent === 'undefined' ? undefined : Framework7AutoInstallComponent))

package/components/popup/popup.less

@@ -3,6 +3,9 @@
 
 .popup-backdrop {
   z-index: 10500;
+  &-unique {
+    z-index: 11000;
+  }
 }
 .popup {
   position: absolute;
@@ -18,8 +21,8 @@
   z-index: 11000;
   overflow: hidden;
   border-radius: var(--f7-popup-border-radius);
-  .theme-dark &,
-  &.theme-dark {
+  .dark &,
+  &.dark {
     background: #000;
   }
   &.modal-in,
@@ -106,14 +109,14 @@ html.with-modal-popup-push-closing {
   }
 
   .if-dark-theme({
-    &.theme-dark .framework7-root > .views,
-    &.theme-dark .framework7-root > .view,
-    .theme-dark .framework7-root > .views,
-    .theme-dark .framework7-root > .view,
-    .theme-dark.framework7-root > .views,
-    .theme-dark.framework7-root > .view,
-    .framework7-root > .views.theme-dark,
-    .framework7-root > .view.theme-dark {
+    &.dark .framework7-root > .views,
+    &.dark .framework7-root > .view,
+    .dark .framework7-root > .views,
+    .dark .framework7-root > .view,
+    .dark.framework7-root > .views,
+    .dark.framework7-root > .view,
+    .framework7-root > .views.dark,
+    .framework7-root > .view.dark {
       &:after {
         content: '';
         position: absolute;
@@ -156,9 +159,9 @@ html.with-modal-popup-push {
     opacity: 0;
   }
   .if-dark-theme({
-    &.theme-dark .popup:after,
-    .theme-dark .popup:after,
-    .theme-dark.popup:after {
+    &.dark .popup:after,
+    .dark .popup:after,
+    .dark.popup:after {
       background: rgba(255,255,255,0.05);
     }
   });
@@ -188,14 +191,14 @@ html.with-modal-popup-push {
 
 .if-dark-theme({
   html.with-modal-popup-push-closing {
-    &.theme-dark .framework7-root > .views,
-    &.theme-dark .framework7-root > .view,
-    .theme-dark .framework7-root > .views,
-    .theme-dark .framework7-root > .view,
-    .theme-dark.framework7-root > .views,
-    .theme-dark.framework7-root > .view,
-    .framework7-root > .views.theme-dark,
-    .framework7-root > .view.theme-dark {
+    &.dark .framework7-root > .views,
+    &.dark .framework7-root > .view,
+    .dark .framework7-root > .views,
+    .dark .framework7-root > .view,
+    .dark.framework7-root > .views,
+    .dark.framework7-root > .view,
+    .framework7-root > .views.dark,
+    .framework7-root > .view.dark {
       &:after {
         animation: popup-dark-push-overlay-fade-out var(--f7-popup-transition-duration) forwards;
       }