framework7 6.3.16 → 7.0.0-beta.12

package/{esm/components → components}/navbar/navbar.js

@@ -1,29 +1,29 @@
-import $ from '../../shared/dom7';
-import { bindMethods } from '../../shared/utils';
-import { getSupport } from '../../shared/get-support';
-var Navbar = {
-  size: function size(el) {
-    var app = this;
-    var $el = $(el);
+import $ from '../../shared/dom7.js';
+import { bindMethods } from '../../shared/utils.js';
+import { getSupport } from '../../shared/get-support.js';
+const Navbar = {
+  size(el) {
+    const app = this;
+    let $el = $(el);
 
     if ($el.hasClass('navbars')) {
-      $el = $el.children('.navbar').each(function (navbarEl) {
+      $el = $el.children('.navbar').each(navbarEl => {
         app.navbar.size(navbarEl);
       });
       return;
     }
 
-    var $innerEl = $el.children('.navbar-inner');
+    const $innerEl = $el.children('.navbar-inner');
     if (!$innerEl.length) return;
-    var needCenterTitle = $innerEl.hasClass('navbar-inner-centered-title') || app.params.navbar[app.theme + "CenterTitle"];
-    var needLeftTitle = app.theme === 'ios' && !app.params.navbar[app.theme + "CenterTitle"];
+    const needCenterTitle = $innerEl.hasClass('navbar-inner-centered-title') || app.params.navbar[`${app.theme}CenterTitle`];
+    const needLeftTitle = app.theme === 'ios' && !app.params.navbar[`${app.theme}CenterTitle`];
     if (!needCenterTitle && !needLeftTitle) return;
 
     if ($el.hasClass('stacked') || $el.parents('.stacked').length > 0 || $el.parents('.tab:not(.tab-active)').length > 0 || $el.parents('.popup:not(.modal-in)').length > 0) {
       return;
     }
 
-    if (app.theme !== 'ios' && app.params.navbar[app.theme + "CenterTitle"]) {
+    if (app.theme !== 'ios' && app.params.navbar[`${app.theme}CenterTitle`]) {
       $innerEl.addClass('navbar-inner-centered-title');
     }
 
@@ -31,31 +31,31 @@ var Navbar = {
       $innerEl.addClass('navbar-inner-left-title');
     }
 
-    var $viewEl = $el.parents('.view').eq(0);
-    var left = app.rtl ? $innerEl.children('.right') : $innerEl.children('.left');
-    var right = app.rtl ? $innerEl.children('.left') : $innerEl.children('.right');
-    var title = $innerEl.children('.title');
-    var subnavbar = $innerEl.children('.subnavbar');
-    var noLeft = left.length === 0;
-    var noRight = right.length === 0;
-    var leftWidth = noLeft ? 0 : left.outerWidth(true);
-    var rightWidth = noRight ? 0 : right.outerWidth(true);
-    var titleWidth = title.outerWidth(true);
-    var navbarStyles = $innerEl.styles();
-    var navbarWidth = $innerEl[0].offsetWidth;
-    var navbarInnerWidth = navbarWidth - parseInt(navbarStyles.paddingLeft, 10) - parseInt(navbarStyles.paddingRight, 10);
-    var isPrevious = $el.hasClass('navbar-previous');
-    var sliding = $innerEl.hasClass('sliding');
-    var router;
-    var dynamicNavbar;
+    const $viewEl = $el.parents('.view').eq(0);
+    const left = app.rtl ? $innerEl.children('.right') : $innerEl.children('.left');
+    const right = app.rtl ? $innerEl.children('.left') : $innerEl.children('.right');
+    const title = $innerEl.children('.title');
+    const subnavbar = $innerEl.children('.subnavbar');
+    const noLeft = left.length === 0;
+    const noRight = right.length === 0;
+    const leftWidth = noLeft ? 0 : left.outerWidth(true);
+    const rightWidth = noRight ? 0 : right.outerWidth(true);
+    const titleWidth = title.outerWidth(true);
+    const navbarStyles = $innerEl.styles();
+    const navbarWidth = $innerEl[0].offsetWidth;
+    const navbarInnerWidth = navbarWidth - parseInt(navbarStyles.paddingLeft, 10) - parseInt(navbarStyles.paddingRight, 10);
+    const isPrevious = $el.hasClass('navbar-previous');
+    const sliding = $innerEl.hasClass('sliding');
+    let router;
+    let dynamicNavbar;
 
     if ($viewEl.length > 0 && $viewEl[0].f7View) {
       router = $viewEl[0].f7View.router;
       dynamicNavbar = router && router.dynamicNavbar;
     }
 
-    var currLeft;
-    var diff;
+    let currLeft;
+    let diff;
 
     if (noRight) {
       currLeft = navbarInnerWidth - titleWidth;
@@ -69,7 +69,7 @@ var Navbar = {
       currLeft = (navbarInnerWidth - rightWidth - titleWidth + leftWidth) / 2;
     }
 
-    var requiredLeft = (navbarInnerWidth - titleWidth) / 2;
+    let requiredLeft = (navbarInnerWidth - titleWidth) / 2;
 
     if (navbarInnerWidth - leftWidth - rightWidth > titleWidth) {
       if (requiredLeft < leftWidth) {
@@ -86,16 +86,16 @@ var Navbar = {
     } // RTL inverter
 
 
-    var inverter = app.rtl ? -1 : 1;
+    const inverter = app.rtl ? -1 : 1;
 
     if (dynamicNavbar && app.theme === 'ios') {
       if (title.hasClass('sliding') || title.length > 0 && sliding) {
-        var titleLeftOffset = -(currLeft + diff) * inverter;
-        var titleRightOffset = (navbarInnerWidth - currLeft - diff - titleWidth) * inverter;
+        let titleLeftOffset = -(currLeft + diff) * inverter;
+        const titleRightOffset = (navbarInnerWidth - currLeft - diff - titleWidth) * inverter;
 
         if (isPrevious) {
           if (router && router.params.iosAnimateNavbarBackIcon) {
-            var activeNavbarBackLink = $el.parent().find('.navbar-current').children('.left.sliding').find('.back .icon ~ span');
+            const activeNavbarBackLink = $el.parent().find('.navbar-current').children('.left.sliding').find('.back .icon ~ span');
 
             if (activeNavbarBackLink.length > 0) {
               titleLeftOffset += activeNavbarBackLink[0].offsetLeft;
@@ -117,8 +117,8 @@ var Navbar = {
 
           if (router && router.params.iosAnimateNavbarBackIcon && left.find('.back .icon').length > 0) {
             if (left.find('.back .icon ~ span').length) {
-              var leftOffset = left[0].f7NavbarLeftOffset;
-              var rightOffset = left[0].f7NavbarRightOffset;
+              const leftOffset = left[0].f7NavbarLeftOffset;
+              const rightOffset = left[0].f7NavbarRightOffset;
               left[0].f7NavbarLeftOffset = 0;
               left[0].f7NavbarRightOffset = 0;
               left.find('.back .icon ~ span')[0].f7NavbarLeftOffset = leftOffset;
@@ -146,34 +146,23 @@ var Navbar = {
 
 
     if (needCenterTitle) {
-      var titleLeft = diff;
+      let titleLeft = diff;
       if (app.rtl && noLeft && noRight && title.length > 0) titleLeft = -titleLeft;
       title.css({
-        left: titleLeft + "px"
+        left: `${titleLeft}px`
       });
     }
   },
-  hide: function hide(el, animate, hideStatusbar, hideOnlyCurrent) {
-    if (animate === void 0) {
-      animate = true;
-    }
-
-    if (hideStatusbar === void 0) {
-      hideStatusbar = false;
-    }
 
-    if (hideOnlyCurrent === void 0) {
-      hideOnlyCurrent = false;
-    }
-
-    var app = this;
-    var $el = $(el);
-    var isDynamic = $el.hasClass('navbar') && $el.parent('.navbars').length && !hideOnlyCurrent;
+  hide(el, animate = true, hideStatusbar = false, hideOnlyCurrent = false) {
+    const app = this;
+    let $el = $(el);
+    const isDynamic = $el.hasClass('navbar') && $el.parent('.navbars').length && !hideOnlyCurrent;
     if (isDynamic) $el = $el.parents('.navbars');
     if (!$el.length) return;
     if ($el.hasClass('navbar-hidden')) return;
-    var className = "navbar-hidden" + (animate ? ' navbar-transitioning' : '');
-    var currentIsLarge = isDynamic ? $el.find('.navbar-current .title-large').length : $el.find('.title-large').length;
+    let className = `navbar-hidden${animate ? ' navbar-transitioning' : ''}`;
+    const currentIsLarge = isDynamic ? $el.find('.navbar-current .title-large').length : $el.find('.title-large').length;
 
     if (currentIsLarge) {
       className += ' navbar-large-hidden';
@@ -183,13 +172,13 @@ var Navbar = {
       className += ' navbar-hidden-statusbar';
     }
 
-    $el.transitionEnd(function () {
+    $el.transitionEnd(() => {
       $el.removeClass('navbar-transitioning');
     });
     $el.addClass(className);
 
     if (isDynamic) {
-      $el.children('.navbar').each(function (subEl) {
+      $el.children('.navbar').each(subEl => {
         $(subEl).trigger('navbar:hide');
         app.emit('navbarHide', subEl);
       });
@@ -198,29 +187,18 @@ var Navbar = {
       app.emit('navbarHide', $el[0]);
     }
   },
-  show: function show(el, animate, hideOnlyCurrent) {
-    if (el === void 0) {
-      el = '.navbar-hidden';
-    }
-
-    if (animate === void 0) {
-      animate = true;
-    }
-
-    if (hideOnlyCurrent === void 0) {
-      hideOnlyCurrent = false;
-    }
 
-    var app = this;
-    var $el = $(el);
-    var isDynamic = $el.hasClass('navbar') && $el.parent('.navbars').length && !hideOnlyCurrent;
+  show(el = '.navbar-hidden', animate = true, hideOnlyCurrent = false) {
+    const app = this;
+    let $el = $(el);
+    const isDynamic = $el.hasClass('navbar') && $el.parent('.navbars').length && !hideOnlyCurrent;
     if (isDynamic) $el = $el.parents('.navbars');
     if (!$el.length) return;
     if (!$el.hasClass('navbar-hidden')) return;
 
     if (animate) {
       $el.addClass('navbar-transitioning');
-      $el.transitionEnd(function () {
+      $el.transitionEnd(() => {
         $el.removeClass('navbar-transitioning');
       });
     }
@@ -228,7 +206,7 @@ var Navbar = {
     $el.removeClass('navbar-hidden navbar-large-hidden navbar-hidden-statusbar');
 
     if (isDynamic) {
-      $el.children('.navbar').each(function (subEl) {
+      $el.children('.navbar').each(subEl => {
         $(subEl).trigger('navbar:show');
         app.emit('navbarShow', subEl);
       });
@@ -237,10 +215,11 @@ var Navbar = {
       app.emit('navbarShow', $el[0]);
     }
   },
-  getElByPage: function getElByPage(page) {
-    var $pageEl;
-    var $navbarEl;
-    var pageData;
+
+  getElByPage(page) {
+    let $pageEl;
+    let $navbarEl;
+    let pageData;
 
     if (page.$navbarEl || page.$el) {
       pageData = page;
@@ -259,24 +238,26 @@ var Navbar = {
     if (!$navbarEl || $navbarEl && $navbarEl.length === 0) return undefined;
     return $navbarEl[0];
   },
-  getPageByEl: function getPageByEl(navbarEl) {
-    var $navbarEl = $(navbarEl);
+
+  getPageByEl(navbarEl) {
+    const $navbarEl = $(navbarEl);
 
     if ($navbarEl.parents('.page').length) {
       return $navbarEl.parents('.page')[0];
     }
 
-    var pageEl;
-    $navbarEl.parents('.view').find('.page').each(function (el) {
+    let pageEl;
+    $navbarEl.parents('.view').find('.page').each(el => {
       if (el && el.f7Page && el.f7Page.navbarEl && $navbarEl[0] === el.f7Page.navbarEl) {
         pageEl = el;
       }
     });
     return pageEl;
   },
-  collapseLargeTitle: function collapseLargeTitle(navbarEl) {
-    var app = this;
-    var $navbarEl = $(navbarEl);
+
+  collapseLargeTitle(navbarEl) {
+    const app = this;
+    let $navbarEl = $(navbarEl);
 
     if ($navbarEl.hasClass('navbars')) {
       $navbarEl = $navbarEl.find('.navbar');
@@ -290,16 +271,17 @@ var Navbar = {
       }
     }
 
-    var $pageEl = $(app.navbar.getPageByEl($navbarEl));
+    const $pageEl = $(app.navbar.getPageByEl($navbarEl));
     $navbarEl.addClass('navbar-large-collapsed');
     $pageEl.eq(0).addClass('page-with-navbar-large-collapsed').trigger('page:navbarlargecollapsed');
     app.emit('pageNavbarLargeCollapsed', $pageEl[0]);
     $navbarEl.trigger('navbar:collapse');
     app.emit('navbarCollapse', $navbarEl[0]);
   },
-  expandLargeTitle: function expandLargeTitle(navbarEl) {
-    var app = this;
-    var $navbarEl = $(navbarEl);
+
+  expandLargeTitle(navbarEl) {
+    const app = this;
+    let $navbarEl = $(navbarEl);
 
     if ($navbarEl.hasClass('navbars')) {
       $navbarEl = $navbarEl.find('.navbar-large');
@@ -313,16 +295,17 @@ var Navbar = {
       }
     }
 
-    var $pageEl = $(app.navbar.getPageByEl($navbarEl));
+    const $pageEl = $(app.navbar.getPageByEl($navbarEl));
     $navbarEl.removeClass('navbar-large-collapsed');
     $pageEl.eq(0).removeClass('page-with-navbar-large-collapsed').trigger('page:navbarlargeexpanded');
     app.emit('pageNavbarLargeExpanded', $pageEl[0]);
     $navbarEl.trigger('navbar:expand');
     app.emit('navbarExpand', $navbarEl[0]);
   },
-  toggleLargeTitle: function toggleLargeTitle(navbarEl) {
-    var app = this;
-    var $navbarEl = $(navbarEl);
+
+  toggleLargeTitle(navbarEl) {
+    const app = this;
+    let $navbarEl = $(navbarEl);
 
     if ($navbarEl.hasClass('navbars')) {
       $navbarEl = $navbarEl.find('.navbar-large');
@@ -342,26 +325,27 @@ var Navbar = {
       app.navbar.collapseLargeTitle($navbarEl);
     }
   },
-  initNavbarOnScroll: function initNavbarOnScroll(pageEl, navbarEl, needHide, needCollapse, needTransparent) {
-    var app = this;
-    var support = getSupport();
-    var $pageEl = $(pageEl);
-    var $navbarEl = $(navbarEl);
-    var $titleLargeEl = $navbarEl.find('.title-large');
-    var isLarge = $titleLargeEl.length || $navbarEl.hasClass('.navbar-large');
-    var navbarHideHeight = 44;
-    var snapPageScrollToLargeTitle = app.params.navbar.snapPageScrollToLargeTitle;
-    var snapPageScrollToTransparentNavbar = app.params.navbar.snapPageScrollToTransparentNavbar;
-    var previousScrollTop;
-    var currentScrollTop;
-    var scrollHeight;
-    var offsetHeight;
-    var reachEnd;
-    var action;
-    var navbarHidden;
-    var navbarCollapsed;
-    var navbarTitleLargeHeight;
-    var navbarOffsetHeight;
+
+  initNavbarOnScroll(pageEl, navbarEl, needHide, needCollapse, needTransparent) {
+    const app = this;
+    const support = getSupport();
+    const $pageEl = $(pageEl);
+    const $navbarEl = $(navbarEl);
+    const $titleLargeEl = $navbarEl.find('.title-large');
+    const isLarge = $titleLargeEl.length || $navbarEl.hasClass('.navbar-large');
+    let navbarHideHeight = 44;
+    const snapPageScrollToLargeTitle = app.params.navbar.snapPageScrollToLargeTitle;
+    const snapPageScrollToTransparentNavbar = app.params.navbar.snapPageScrollToTransparentNavbar;
+    let previousScrollTop;
+    let currentScrollTop;
+    let scrollHeight;
+    let offsetHeight;
+    let reachEnd;
+    let action;
+    let navbarHidden;
+    let navbarCollapsed;
+    let navbarTitleLargeHeight;
+    let navbarOffsetHeight;
 
     if (needCollapse || needHide && isLarge) {
       navbarTitleLargeHeight = $navbarEl.css('--f7-navbar-large-title-height');
@@ -386,21 +370,21 @@ var Navbar = {
       navbarHideHeight += navbarTitleLargeHeight;
     }
 
-    var scrollChanged;
-    var scrollContent;
-    var scrollTimeoutId;
-    var touchEndTimeoutId;
-    var touchSnapTimeout = 70;
-    var desktopSnapTimeout = 300;
+    let scrollChanged;
+    let scrollContent;
+    let scrollTimeoutId;
+    let touchEndTimeoutId;
+    const touchSnapTimeout = 70;
+    const desktopSnapTimeout = 300;
 
     function calcScrollableDistance() {
-      $pageEl.find('.page-content').each(function (pageContentEl) {
+      $pageEl.find('.page-content').each(pageContentEl => {
         pageContentEl.f7ScrollableDistance = pageContentEl.scrollHeight - pageContentEl.offsetHeight;
       });
     }
 
     function snapLargeNavbar() {
-      var inSearchbarExpanded = $navbarEl.hasClass('with-searchbar-expandable-enabled');
+      const inSearchbarExpanded = $navbarEl.hasClass('with-searchbar-expandable-enabled');
       if (inSearchbarExpanded) return;
       if (!scrollContent || currentScrollTop < 0) return;
 
@@ -412,7 +396,7 @@ var Navbar = {
     }
 
     function snapTransparentNavbar() {
-      var inSearchbarExpanded = $navbarEl.hasClass('with-searchbar-expandable-enabled');
+      const inSearchbarExpanded = $navbarEl.hasClass('with-searchbar-expandable-enabled');
       if (inSearchbarExpanded) return;
       if (!scrollContent || currentScrollTop < 0) return;
 
@@ -424,16 +408,16 @@ var Navbar = {
     }
 
     function handleNavbarTransparent() {
-      var isHidden = $navbarEl.hasClass('navbar-hidden') || $navbarEl.parent('.navbars').hasClass('navbar-hidden');
-      var inSearchbarExpanded = $navbarEl.hasClass('with-searchbar-expandable-enabled');
+      const isHidden = $navbarEl.hasClass('navbar-hidden') || $navbarEl.parent('.navbars').hasClass('navbar-hidden');
+      const inSearchbarExpanded = $navbarEl.hasClass('with-searchbar-expandable-enabled');
       if (inSearchbarExpanded || isHidden) return;
 
       if (!navbarOffsetHeight) {
         navbarOffsetHeight = navbarEl.offsetHeight;
       }
 
-      var opacity = currentScrollTop / navbarOffsetHeight;
-      var notTransparent = $navbarEl.hasClass('navbar-transparent-visible');
+      let opacity = currentScrollTop / navbarOffsetHeight;
+      const notTransparent = $navbarEl.hasClass('navbar-transparent-visible');
       opacity = Math.max(Math.min(opacity, 1), 0);
 
       if (notTransparent && opacity === 1 || !notTransparent && opacity === 0) {
@@ -462,13 +446,13 @@ var Navbar = {
       if (snapPageScrollToTransparentNavbar) {
         if (!support.touch) {
           clearTimeout(scrollTimeoutId);
-          scrollTimeoutId = setTimeout(function () {
+          scrollTimeoutId = setTimeout(() => {
             snapTransparentNavbar();
           }, desktopSnapTimeout);
         } else if (touchEndTimeoutId) {
           clearTimeout(touchEndTimeoutId);
           touchEndTimeoutId = null;
-          touchEndTimeoutId = setTimeout(function () {
+          touchEndTimeoutId = setTimeout(() => {
             snapTransparentNavbar();
             clearTimeout(touchEndTimeoutId);
             touchEndTimeoutId = null;
@@ -477,18 +461,18 @@ var Navbar = {
       }
     }
 
-    var previousCollapseProgress = null;
-    var collapseProgress = null;
+    let previousCollapseProgress = null;
+    let collapseProgress = null;
 
     function handleLargeNavbarCollapse(pageContentEl) {
-      var isHidden = $navbarEl.hasClass('navbar-hidden') || $navbarEl.parent('.navbars').hasClass('navbar-hidden');
+      const isHidden = $navbarEl.hasClass('navbar-hidden') || $navbarEl.parent('.navbars').hasClass('navbar-hidden');
       if (isHidden) return;
-      var isLargeTransparent = $navbarEl.hasClass('navbar-large-transparent') || $navbarEl.hasClass('navbar-large') && $navbarEl.hasClass('navbar-transparent');
+      const isLargeTransparent = $navbarEl.hasClass('navbar-large-transparent') || $navbarEl.hasClass('navbar-large') && $navbarEl.hasClass('navbar-transparent');
       previousCollapseProgress = collapseProgress;
-      var scrollableDistance = Math.min(navbarTitleLargeHeight, pageContentEl.f7ScrollableDistance || navbarTitleLargeHeight);
+      const scrollableDistance = Math.min(navbarTitleLargeHeight, pageContentEl.f7ScrollableDistance || navbarTitleLargeHeight);
       collapseProgress = Math.min(Math.max(currentScrollTop / scrollableDistance, 0), 1);
-      var previousCollapseWasInMiddle = previousCollapseProgress > 0 && previousCollapseProgress < 1;
-      var inSearchbarExpanded = $navbarEl.hasClass('with-searchbar-expandable-enabled');
+      const previousCollapseWasInMiddle = previousCollapseProgress > 0 && previousCollapseProgress < 1;
+      const inSearchbarExpanded = $navbarEl.hasClass('with-searchbar-expandable-enabled');
       if (inSearchbarExpanded) return;
       navbarCollapsed = $navbarEl.hasClass('navbar-large-collapsed');
 
@@ -517,25 +501,25 @@ var Navbar = {
         }
 
         $navbarEl.find('.title').css('opacity', collapseProgress);
-        $navbarEl.find('.title-large-text, .subnavbar').css('transform', "translate3d(0px, " + -1 * collapseProgress * navbarTitleLargeHeight + "px, 0)");
+        $navbarEl.find('.title-large-text, .subnavbar').css('transform', `translate3d(0px, ${-1 * collapseProgress * navbarTitleLargeHeight}px, 0)`);
 
         if (isLargeTransparent) {
           $navbarEl.find('.navbar-bg').css('opacity', collapseProgress);
         } else {
-          $navbarEl.find('.navbar-bg').css('transform', "translate3d(0px, " + -1 * collapseProgress * navbarTitleLargeHeight + "px, 0)");
+          $navbarEl.find('.navbar-bg').css('transform', `translate3d(0px, ${-1 * collapseProgress * navbarTitleLargeHeight}px, 0)`);
         }
       }
 
       if (snapPageScrollToLargeTitle) {
         if (!support.touch) {
           clearTimeout(scrollTimeoutId);
-          scrollTimeoutId = setTimeout(function () {
+          scrollTimeoutId = setTimeout(() => {
             snapLargeNavbar();
           }, desktopSnapTimeout);
         } else if (touchEndTimeoutId) {
           clearTimeout(touchEndTimeoutId);
           touchEndTimeoutId = null;
-          touchEndTimeoutId = setTimeout(function () {
+          touchEndTimeoutId = setTimeout(() => {
             snapLargeNavbar();
             clearTimeout(touchEndTimeoutId);
             touchEndTimeoutId = null;
@@ -608,7 +592,7 @@ var Navbar = {
     function handleTouchEnd() {
       clearTimeout(touchEndTimeoutId);
       touchEndTimeoutId = null;
-      touchEndTimeoutId = setTimeout(function () {
+      touchEndTimeoutId = setTimeout(() => {
         if (scrollChanged !== false) {
           if (needTransparent && !needCollapse) {
             snapTransparentNavbar();
@@ -632,7 +616,7 @@ var Navbar = {
     calcScrollableDistance();
 
     if (needCollapse || needTransparent) {
-      $pageEl.find('.page-content').each(function (pageContentEl) {
+      $pageEl.find('.page-content').each(pageContentEl => {
         if (pageContentEl.scrollTop > 0) handleScroll.call(pageContentEl);
       });
     }
@@ -650,15 +634,18 @@ var Navbar = {
       }
     };
   }
+
 };
 export default {
   name: 'navbar',
-  create: function create() {
-    var app = this;
+
+  create() {
+    const app = this;
     bindMethods(app, {
       navbar: Navbar
     });
   },
+
   params: {
     navbar: {
       scrollTopOnTitleClick: true,
@@ -675,22 +662,24 @@ export default {
   },
   on: {
     'panelBreakpoint panelCollapsedBreakpoint panelResize viewResize resize viewMasterDetailBreakpoint': function onPanelResize() {
-      var app = this;
-      $('.navbar').each(function (navbarEl) {
+      const app = this;
+      $('.navbar').each(navbarEl => {
         app.navbar.size(navbarEl);
       });
     },
-    pageBeforeRemove: function pageBeforeRemove(page) {
+
+    pageBeforeRemove(page) {
       if (page.$el[0].f7DetachNavbarScrollHandlers) {
         page.$el[0].f7DetachNavbarScrollHandlers();
       }
     },
-    pageBeforeIn: function pageBeforeIn(page) {
-      var app = this;
+
+    pageBeforeIn(page) {
+      const app = this;
       if (app.theme !== 'ios') return;
-      var $navbarsEl;
-      var view = page.$el.parents('.view')[0].f7View;
-      var navbarEl = app.navbar.getElByPage(page);
+      let $navbarsEl;
+      const view = page.$el.parents('.view')[0].f7View;
+      const navbarEl = app.navbar.getElByPage(page);
 
       if (!navbarEl) {
         $navbarsEl = page.$el.parents('.view').children('.navbars');
@@ -699,26 +688,28 @@ export default {
       }
 
       if (page.$el.hasClass('no-navbar') || view.router.dynamicNavbar && !navbarEl) {
-        var animate = !!(page.pageFrom && page.router.history.length > 0);
+        const animate = !!(page.pageFrom && page.router.history.length > 0);
         app.navbar.hide($navbarsEl, animate);
       } else {
         app.navbar.show($navbarsEl);
       }
     },
-    pageReinit: function pageReinit(page) {
-      var app = this;
-      var $navbarEl = $(app.navbar.getElByPage(page));
+
+    pageReinit(page) {
+      const app = this;
+      const $navbarEl = $(app.navbar.getElByPage(page));
       if (!$navbarEl || $navbarEl.length === 0) return;
       app.navbar.size($navbarEl);
     },
-    pageInit: function pageInit(page) {
-      var app = this;
-      var $navbarEl = $(app.navbar.getElByPage(page));
+
+    pageInit(page) {
+      const app = this;
+      const $navbarEl = $(app.navbar.getElByPage(page));
       if (!$navbarEl || $navbarEl.length === 0) return; // Size
 
       app.navbar.size($navbarEl); // Need Collapse On Scroll
 
-      var needCollapseOnScrollHandler;
+      let needCollapseOnScrollHandler;
 
       if ($navbarEl.find('.title-large').length > 0) {
         $navbarEl.addClass('navbar-large');
@@ -730,14 +721,14 @@ export default {
       } // Need transparent on scroll
 
 
-      var needTransparentOnScroll;
+      let needTransparentOnScroll;
 
       if (!needCollapseOnScrollHandler && $navbarEl.hasClass('navbar-transparent')) {
         needTransparentOnScroll = true;
       } // Need Hide On Scroll
 
 
-      var needHideOnScrollHandler;
+      let needHideOnScrollHandler;
 
       if (app.params.navbar.hideOnPageScroll || page.$el.find('.hide-navbar-on-scroll').length || page.$el.hasClass('hide-navbar-on-scroll') || page.$el.find('.hide-bars-on-scroll').length || page.$el.hasClass('hide-bars-on-scroll')) {
         if (page.$el.find('.keep-navbar-on-scroll').length || page.$el.hasClass('keep-navbar-on-scroll') || page.$el.find('.keep-bars-on-scroll').length || page.$el.hasClass('keep-bars-on-scroll')) {
@@ -751,32 +742,35 @@ export default {
         app.navbar.initNavbarOnScroll(page.el, $navbarEl[0], needHideOnScrollHandler, needCollapseOnScrollHandler, needTransparentOnScroll);
       }
     },
+
     'panelOpen panelSwipeOpen modalOpen': function onPanelModalOpen(instance) {
-      var app = this;
-      instance.$el.find('.navbar:not(.navbar-previous):not(.stacked)').each(function (navbarEl) {
+      const app = this;
+      instance.$el.find('.navbar:not(.navbar-previous):not(.stacked)').each(navbarEl => {
         app.navbar.size(navbarEl);
       });
     },
-    tabShow: function tabShow(tabEl) {
-      var app = this;
-      $(tabEl).find('.navbar:not(.navbar-previous):not(.stacked)').each(function (navbarEl) {
+
+    tabShow(tabEl) {
+      const app = this;
+      $(tabEl).find('.navbar:not(.navbar-previous):not(.stacked)').each(navbarEl => {
         app.navbar.size(navbarEl);
       });
     }
+
   },
   clicks: {
     '.navbar .title': function onTitleClick($clickedEl, clickedData, e) {
-      var app = this;
+      const app = this;
       if (!app.params.navbar.scrollTopOnTitleClick) return;
 
       if ($(e.target).closest('a, button').length > 0) {
         return;
       }
 
-      var $pageContentEl; // Find active page
+      let $pageContentEl; // Find active page
 
-      var $navbarEl = $clickedEl.parents('.navbar');
-      var $navbarsEl = $navbarEl.parents('.navbars'); // Static Layout
+      const $navbarEl = $clickedEl.parents('.navbar');
+      const $navbarsEl = $navbarEl.parents('.navbars'); // Static Layout
 
       $pageContentEl = $navbarEl.parents('.page-content');
 
@@ -813,10 +807,11 @@ export default {
   },
   vnode: {
     navbar: {
-      postpatch: function postpatch(vnode) {
-        var app = this;
+      postpatch(vnode) {
+        const app = this;
         app.navbar.size(vnode.elm);
       }
+
     }
   }
 };