framework7 7.1.5 → 8.0.0-beta.2

package/components/panel/panel-class.js

@@ -4,13 +4,11 @@ import { extend, deleteProps } from '../../shared/utils.js';
 import Framework7Class from '../../shared/class.js';
 import swipePanel from './swipe-panel.js';
 import resizablePanel from './resizable-panel.js';
-
 class Panel extends Framework7Class {
   constructor(app, params) {
     if (params === void 0) {
       params = {};
     }
-
     const extendedParams = extend({
       on: {}
     }, app.params.panel, params);
@@ -19,20 +17,16 @@ class Panel extends Framework7Class {
     panel.params = extendedParams;
     panel.$containerEl = panel.params.containerEl ? $(panel.params.containerEl).eq(0) : app.$el;
     panel.containerEl = panel.$containerEl[0];
-
     if (!panel.containerEl) {
       panel.$containerEl = app.$el;
       panel.containerEl = app.$el[0];
     }
-
     let $el;
-
     if (panel.params.el) {
       $el = $(panel.params.el).eq(0);
     } else if (panel.params.content) {
       $el = $(panel.params.content).filter(node => node.nodeType === 1).eq(0);
     }
-
     if ($el.length === 0) return panel;
     if ($el[0].f7Panel) return $el[0].f7Panel;
     $el[0].f7Panel = panel;
@@ -42,22 +36,20 @@ class Panel extends Framework7Class {
       resizable
     } = panel.params;
     if (typeof side === 'undefined') side = $el.hasClass('panel-left') ? 'left' : 'right';
-    if (typeof effect === 'undefined') // eslint-disable-next-line
-      effect = $el.hasClass('panel-cover') ? 'cover' : $el.hasClass('panel-push') ? 'push' : 'reveal';
+    if (typeof effect === 'undefined')
+      // eslint-disable-next-line
+      effect = $el.hasClass('panel-cover') ? 'cover' : $el.hasClass('panel-push') ? 'push' : $el.hasClass('panel-floating') ? 'floating' : 'reveal';
     if (typeof resizable === 'undefined') resizable = $el.hasClass('panel-resizable');
     let $backdropEl;
-
     if (panel.params.backdrop && panel.params.backdropEl) {
       $backdropEl = $(panel.params.backdropEl);
     } else if (panel.params.backdrop) {
       $backdropEl = panel.$containerEl.children('.panel-backdrop');
-
       if ($backdropEl.length === 0) {
         $backdropEl = $('<div class="panel-backdrop"></div>');
         panel.$containerEl.prepend($backdropEl);
       }
     }
-
     extend(panel, {
       app,
       side,
@@ -68,96 +60,82 @@ class Panel extends Framework7Class {
       opened: false,
       $backdropEl,
       backdropEl: $backdropEl && $backdropEl[0]
-    }); // Install Modules
+    });
 
-    panel.useModules(); // Init
+    // Install Modules
+    panel.useModules();
 
+    // Init
     panel.init();
     return panel;
   }
-
   getViewEl() {
     const panel = this;
     let viewEl;
-
     if (panel.$containerEl.children('.views').length > 0) {
       viewEl = panel.$containerEl.children('.views')[0];
     } else {
       viewEl = panel.$containerEl.children('.view')[0];
     }
-
     return viewEl;
   }
-
   setStateClasses(state) {
     const panel = this;
     const {
       side,
-      el
+      el,
+      effect
     } = panel;
     const viewEl = panel.getViewEl();
     const panelInView = viewEl && viewEl.contains(el);
     const $targetEl = !viewEl || panelInView ? panel.$containerEl : $('html');
-
     if (state === 'open') {
       $targetEl.addClass(`with-panel with-panel-${panel.side}-${panel.effect}`);
     }
-
     if (state === 'before-closing') {
       $targetEl.addClass('with-panel-closing');
     }
-
     if (state === 'closing') {
       $targetEl.addClass('with-panel-closing');
       $targetEl.removeClass(`with-panel with-panel-${panel.side}-${panel.effect}`);
     }
-
     if (state === 'after-closing') {
       $targetEl.removeClass('with-panel-closing');
     }
-
     if (state === 'closed') {
-      $targetEl.removeClass(`with-panel-${side}-reveal with-panel-${side}-cover with-panel-${side}-push with-panel`);
+      $targetEl.removeClass(`with-panel-${side}-${effect}`);
     }
   }
-
   enableVisibleBreakpoint() {
     const panel = this;
     panel.visibleBreakpointDisabled = false;
     panel.setVisibleBreakpoint();
     return panel;
   }
-
   disableVisibleBreakpoint() {
     const panel = this;
     panel.visibleBreakpointDisabled = true;
     panel.setVisibleBreakpoint();
     return panel;
   }
-
   toggleVisibleBreakpoint() {
     const panel = this;
     panel.visibleBreakpointDisabled = !panel.visibleBreakpointDisabled;
     panel.setVisibleBreakpoint();
     return panel;
   }
-
   setVisibleBreakpoint(emitEvents) {
     if (emitEvents === void 0) {
       emitEvents = true;
     }
-
     const panel = this;
     const app = panel.app;
-
     if (!panel.visibleBreakpointResizeHandler) {
       panel.visibleBreakpointResizeHandler = function visibleBreakpointResizeHandler() {
         panel.setVisibleBreakpoint();
       };
-
       app.on('resize', panel.visibleBreakpointResizeHandler);
     }
-
     const {
       side,
       $el,
@@ -168,11 +146,9 @@ class Panel extends Framework7Class {
     const breakpoint = params.visibleBreakpoint;
     const $viewEl = $(panel.getViewEl());
     const wasVisible = $el.hasClass('panel-in-breakpoint');
-
     if ($containerEl && $containerEl.hasClass('page')) {
       $viewEl.add($containerEl.children('.page-content, .tabs, .fab'));
     }
-
     if (app.width >= breakpoint && typeof breakpoint !== 'undefined' && breakpoint !== null && !visibleBreakpointDisabled) {
       if (!wasVisible) {
         panel.setStateClasses('closed');
@@ -183,7 +159,6 @@ class Panel extends Framework7Class {
           [`margin-${side}`]: `${$el.width()}px`
         });
         app.allowPanelOpen = true;
-
         if (emitEvents) {
           panel.emit('local::breakpoint panelBreakpoint', panel);
           panel.$el.trigger('panel:breakpoint');
@@ -200,51 +175,42 @@ class Panel extends Framework7Class {
       $viewEl.css({
         [`margin-${side}`]: ''
       });
-
       if (emitEvents) {
         panel.emit('local::breakpoint panelBreakpoint', panel);
         panel.$el.trigger('panel:breakpoint');
       }
     }
   }
-
   enableCollapsedBreakpoint() {
     const panel = this;
     panel.collapsedBreakpointDisabled = false;
     panel.setCollapsedBreakpoint();
     return panel;
   }
-
   disableCollapsedBreakpoint() {
     const panel = this;
     panel.collapsedBreakpointDisabled = true;
     panel.setCollapsedBreakpoint();
     return panel;
   }
-
   toggleCollapsedBreakpoint() {
     const panel = this;
     panel.collapsedBreakpointDisabled = !panel.collapsedBreakpointDisabled;
     panel.setCollapsedBreakpoint();
     return panel;
   }
-
   setCollapsedBreakpoint(emitEvents) {
     if (emitEvents === void 0) {
       emitEvents = true;
     }
-
     const panel = this;
     const app = panel.app;
-
     if (!panel.collapsedBreakpointResizeHandler) {
       panel.collapsedBreakpointResizeHandler = function collapsedBreakpointResizeHandler() {
         panel.setCollapsedBreakpoint();
       };
-
       app.on('resize', panel.collapsedBreakpointResizeHandler);
     }
-
     const {
       $el,
       params,
@@ -253,14 +219,12 @@ class Panel extends Framework7Class {
     if ($el.hasClass('panel-in-breakpoint')) return;
     const breakpoint = params.collapsedBreakpoint;
     const wasVisible = $el.hasClass('panel-in-collapsed');
-
     if (app.width >= breakpoint && typeof breakpoint !== 'undefined' && breakpoint !== null && !collapsedBreakpointDisabled) {
       if (!wasVisible) {
         panel.setStateClasses('closed');
         $el.addClass('panel-in-collapsed').removeClass('panel-in');
         panel.collapsed = true;
         app.allowPanelOpen = true;
-
         if (emitEvents) {
           panel.emit('local::collapsedBreakpoint panelCollapsedBreakpoint', panel);
           panel.$el.trigger('panel:collapsedbreakpoint');
@@ -269,74 +233,60 @@ class Panel extends Framework7Class {
     } else if (wasVisible) {
       $el.removeClass('panel-in-collapsed panel-in');
       panel.collapsed = false;
-
       if (emitEvents) {
         panel.emit('local::collapsedBreakpoint panelCollapsedBreakpoint', panel);
         panel.$el.trigger('panel:collapsedbreakpoint');
       }
     }
   }
-
   enableResizable() {
     const panel = this;
-
     if (panel.resizableInitialized) {
       panel.resizable = true;
       panel.$el.addClass('panel-resizable');
     } else {
       resizablePanel(panel);
     }
-
     return panel;
   }
-
   disableResizable() {
     const panel = this;
     panel.resizable = false;
     panel.$el.removeClass('panel-resizable');
     return panel;
   }
-
   enableSwipe() {
     const panel = this;
-
     if (panel.swipeInitialized) {
       panel.swipeable = true;
     } else {
       swipePanel(panel);
     }
-
     return panel;
   }
-
   disableSwipe() {
     const panel = this;
     panel.swipeable = false;
     return panel;
   }
-
   onOpen(modifyHtmlClasses) {
     if (modifyHtmlClasses === void 0) {
       modifyHtmlClasses = true;
     }
-
-    const panel = this; // eslint-disable-next-line
-
+    const panel = this;
+    // eslint-disable-next-line
     panel._openTransitionStarted = false;
     const app = panel.app;
     panel.opened = true;
     app.panel.allowOpen = false;
     panel.$el.trigger('panel:beforeopen');
     panel.emit('local::beforeOpen panelBeforeOpen', panel);
-
     if (modifyHtmlClasses) {
       panel.setStateClasses('open');
     }
-
     panel.$el.trigger('panel:open');
     panel.emit('local::open panelOpen', panel);
   }
-
   onOpened() {
     const panel = this;
     const app = panel.app;
@@ -344,7 +294,6 @@ class Panel extends Framework7Class {
     panel.$el.trigger('panel:opened');
     panel.emit('local::opened panelOpened', panel);
   }
-
   onClose() {
     const panel = this;
     const app = panel.app;
@@ -356,44 +305,35 @@ class Panel extends Framework7Class {
     panel.$el.trigger('panel:close');
     panel.emit('local::close panelClose', panel);
   }
-
   onClosed() {
     const panel = this;
     const app = panel.app;
     app.panel.allowOpen = true;
     panel.setStateClasses('after-closing');
     panel.$el.removeClass('panel-out');
-
     if (panel.$backdropEl) {
       const otherPanel = app.panel.get('.panel-in');
       const shouldHideBackdrop = !otherPanel || otherPanel && !otherPanel.$backdropEl;
-
       if (shouldHideBackdrop) {
         panel.$backdropEl.removeClass('panel-backdrop-in');
       }
     }
-
     panel.$el.trigger('panel:closed');
     panel.emit('local::closed panelClosed', panel);
   }
-
   toggle(animate) {
     if (animate === void 0) {
       animate = true;
     }
-
     const panel = this;
     const breakpoint = panel.params.visibleBreakpoint;
     const app = panel.app;
-
     if (app.width >= breakpoint && typeof breakpoint !== 'undefined' && breakpoint !== null) {
       return panel.toggleVisibleBreakpoint();
     }
-
     if (panel.opened) panel.close(animate);else panel.open(animate);
     return panel;
   }
-
   insertToRoot() {
     const panel = this;
     const document = getDocument();
@@ -404,11 +344,9 @@ class Panel extends Framework7Class {
     } = panel;
     const $panelParentEl = $el.parent();
     const wasInDom = $el.parents(document).length > 0;
-
     if (!$panelParentEl.is($containerEl) || $el.prevAll('.views, .view').length) {
       const $insertBeforeEl = $containerEl.children('.panel, .views, .view').eq(0);
       const $insertAfterEl = $containerEl.children('.panel-backdrop').eq(0);
-
       if ($insertBeforeEl.length) {
         $el.insertBefore($insertBeforeEl);
       } else if ($insertAfterEl) {
@@ -416,11 +354,9 @@ class Panel extends Framework7Class {
       } else {
         $containerEl.prepend($el);
       }
-
       if ($backdropEl && $backdropEl.length && (!$backdropEl.parent().is($containerEl) && $backdropEl.nextAll('.panel').length === 0 || $backdropEl.parent().is($containerEl) && $backdropEl.nextAll('.panel').length === 0)) {
         $backdropEl.insertBefore($el);
       }
-
       panel.once('panelClosed', () => {
         if (wasInDom) {
           $panelParentEl.append($el);
@@ -430,12 +366,10 @@ class Panel extends Framework7Class {
       });
     }
   }
-
   open(animate) {
     if (animate === void 0) {
       animate = true;
     }
-
     const panel = this;
     const app = panel.app;
     if (!app.panel.allowOpen) return false;
@@ -446,50 +380,42 @@ class Panel extends Framework7Class {
       opened,
       $containerEl
     } = panel;
-
     if (!$el || $el.hasClass('panel-in')) {
       return panel;
     }
+    panel.insertToRoot();
 
-    panel.insertToRoot(); // Ignore if opened
-
-    if (opened || $el.hasClass('panel-in-breakpoint') || $el.hasClass('panel-in')) return false; // Close if some panel is opened
+    // Ignore if opened
+    if (opened || $el.hasClass('panel-in-breakpoint') || $el.hasClass('panel-in')) return false;
 
+    // Close if some panel is opened
     const otherOpenedPanel = app.panel.get('.panel-in');
-
     if (otherOpenedPanel && otherOpenedPanel !== panel) {
       otherOpenedPanel.close(animate);
     }
-
     $el[animate ? 'removeClass' : 'addClass']('not-animated');
     $el.addClass('panel-in');
-
     if ($backdropEl) {
       $backdropEl.addClass('panel-backdrop-in');
       $backdropEl[animate ? 'removeClass' : 'addClass']('not-animated');
     }
-
-    if (panel.effect === 'cover' || panel.effect === 'push') {
+    if (['cover', 'push', 'floating'].includes(panel.effect)) {
       /* eslint no-underscore-dangle: ["error", { "allow": ["_clientLeft"] }] */
       panel._clientLeft = $el[0].clientLeft;
-    } // Transitionend
-
+    }
 
+    // Transitionend
     const $viewEl = $(panel.getViewEl());
-
     if ($containerEl && $containerEl.hasClass('page')) {
       $viewEl.add($containerEl.children('.page-content, .tabs'));
     }
-
     const transitionEndTarget = effect === 'reveal' ? $viewEl : $el;
-
     function panelTransitionStart() {
       transitionEndTarget.transitionStart(() => {
         // eslint-disable-next-line
         panel._openTransitionStarted = true;
       });
     }
-
     function panelTransitionEnd() {
       transitionEndTarget.transitionEnd(e => {
         if ($(e.target).is(transitionEndTarget)) {
@@ -501,12 +427,10 @@ class Panel extends Framework7Class {
         } else panelTransitionEnd();
       });
     }
-
     if (animate) {
       if ($backdropEl) {
         $backdropEl.removeClass('not-animated');
       }
-
       panelTransitionStart();
       panelTransitionEnd();
       $el.removeClass('panel-out not-animated').addClass('panel-in');
@@ -515,20 +439,16 @@ class Panel extends Framework7Class {
       if ($backdropEl) {
         $backdropEl.addClass('not-animated');
       }
-
       $el.removeClass('panel-out').addClass('panel-in not-animated');
       panel.onOpen();
       panel.onOpened();
     }
-
     return true;
   }
-
   close(animate) {
     if (animate === void 0) {
       animate = true;
     }
-
     const panel = this;
     const {
       effect,
@@ -539,101 +459,81 @@ class Panel extends Framework7Class {
     } = panel;
     if (!opened || $el.hasClass('panel-in-breakpoint') || !$el.hasClass('panel-in')) return panel;
     $el[animate ? 'removeClass' : 'addClass']('not-animated');
-
     if ($backdropEl) {
       $backdropEl[animate ? 'removeClass' : 'addClass']('not-animated');
     }
-
     const $viewEl = $(panel.getViewEl());
-
     if ($containerEl && $containerEl.hasClass('page')) {
       $viewEl.add($containerEl.children('.page-content, .tabs'));
     }
-
-    const transitionEndTarget = effect === 'reveal' ? $viewEl : $el; // eslint-disable-next-line
-
+    const transitionEndTarget = effect === 'reveal' ? $viewEl : $el;
+    // eslint-disable-next-line
     if (!panel._openTransitionStarted) {
       // eslint-disable-next-line
       animate = false;
     }
-
     function transitionEnd() {
       if ($el.hasClass('panel-out')) {
         panel.onClosed();
       } else if ($el.hasClass('panel-in')) {
         panel.onOpened();
       }
-
       panel.setStateClasses('after-closing');
     }
-
     if (animate) {
       transitionEndTarget.transitionEnd(() => {
         transitionEnd();
       });
-      $el.removeClass('panel-in').addClass('panel-out'); // Emit close
-
+      $el.removeClass('panel-in').addClass('panel-out');
+      // Emit close
       panel.onClose();
     } else {
-      $el.addClass('not-animated').removeClass('panel-in').addClass('panel-out'); // Emit close
-
+      $el.addClass('not-animated').removeClass('panel-in').addClass('panel-out');
+      // Emit close
       panel.onClose();
       panel.onClosed();
     }
-
     return panel;
   }
-
   init() {
-    const panel = this; // const app = panel.app;
-
+    const panel = this;
+    // const app = panel.app;
     if (typeof panel.params.visibleBreakpoint !== 'undefined') {
       panel.setVisibleBreakpoint();
     }
-
     if (typeof panel.params.collapsedBreakpoint !== 'undefined') {
       panel.setCollapsedBreakpoint();
     }
-
     if (panel.params.swipe) {
       panel.enableSwipe();
     }
-
     if (panel.resizable) {
       panel.enableResizable();
     }
   }
-
   destroy() {
     let panel = this;
     const app = panel.app;
     const {
       $containerEl
     } = panel;
-
     if (!panel.$el) {
       // Panel already destroyed
       return;
     }
-
     panel.emit('local::beforeDestroy panelBeforeDestroy', panel);
     panel.$el.trigger('panel:beforedestroy');
-
     if (panel.visibleBreakpointResizeHandler) {
       app.off('resize', panel.visibleBreakpointResizeHandler);
     }
-
     if (panel.collapsedBreakpointResizeHandler) {
       app.off('resize', panel.collapsedBreakpointResizeHandler);
     }
-
     if (panel.$el.hasClass('panel-in-breakpoint') || panel.$el.hasClass('panel-in-collapsed')) {
       const $viewEl = $(panel.getViewEl());
-
       if ($containerEl && $containerEl.hasClass('page')) {
         $viewEl.add($containerEl.children('.page-content, .tabs'));
       }
-
       panel.$el.removeClass('panel-in-breakpoint panel-in-collapsed panel-in');
       $viewEl.css({
         [`margin-${panel.side}`]: ''
@@ -641,19 +541,14 @@ class Panel extends Framework7Class {
       panel.emit('local::breakpoint panelBreakpoint', panel);
       panel.$el.trigger('panel:breakpoint');
     }
-
     panel.$el.trigger('panel:destroy');
     panel.emit('local::destroy panelDestroy', panel);
-
     if (panel.el) {
       panel.el.f7Panel = null;
       delete panel.el.f7Panel;
     }
-
     deleteProps(panel);
     panel = null;
   }
-
 }
-
 export default Panel;

package/components/panel/panel-md.less

@@ -1,2 +1,11 @@
 .md {
+  .panel-cover {
+    overflow: hidden;
+    &.panel-left {
+      border-radius: 0 16px 16px 0;
+    }
+    &.panel-right {
+      border-radius: 16px 0 0 16px;
+    }
+  }
 }