@xenknight/framework7 0.0.5 → 0.0.7

package/components/navbar-new/navbar.d.ts

@@ -0,0 +1,77 @@
+import Framework7, {
+  CSSSelector,
+  Framework7EventsClass,
+  Framework7Plugin,
+} from '../app/app-class.js';
+
+export namespace Navbar {
+  interface AppMethods {
+    navbar: {
+      /** Hide navbar */
+      hide(navbarEl: HTMLElement | CSSSelector, animate?: boolean, hideStatusbar?: boolean): void;
+      /** Show navbar */
+      show(navbarEl: HTMLElement | CSSSelector, animate?: boolean): void;
+      /** Recalculate positional styles for Navbar elements. It could be useful after you change some of Navbar elements dynamically. This will have effect only in iOS theme */
+      size(navbarEl: HTMLElement | CSSSelector): void;
+      /** Get navbar HTML element by specified page element. Useful only when dynamic navbar is enabled. In this case it is out of the page container. This will have effect only in iOS theme */
+      getElByPage(pageEl: HTMLElement | CSSSelector): HTMLElement;
+      /** Get page HTML element by specified Navbar element. Useful only when dynamic navbar is enabled. In this case it is out of the page container. This will have effect only in iOS theme */
+      getPageByEl(navbarEl: HTMLElement | CSSSelector): HTMLElement;
+      /** Collapse large navbar title */
+      collapseLargeTitle(navbarEl: HTMLElement | CSSSelector): void;
+      /** Expand large navbar title */
+      expandLargeTitle(navbarEl: HTMLElement | CSSSelector): void;
+      /** Toggle large navbar title */
+      toggleLargeTitle(navbarEl: HTMLElement | CSSSelector): void;
+    };
+  }
+  interface AppParams {
+    navbar?:
+      | {
+          /** Will hide Navbars on page scroll. (default false) */
+          hideOnPageScroll?: boolean;
+          /** Set to true to show hidden Navbar when scrolling reaches end of the page. (default true) */
+          showOnPageScrollEnd?: boolean;
+          /** Set to false and hidden Navbar will not become visible when you scroll page to top everytime. They will become visible only at the most top scroll position, in the beginning of the page. (default true) */
+          showOnPageScrollTop?: boolean;
+          /** When enabled then every click on navbar's title element will scroll related page to the top. (default true) */
+          scrollTopOnTitleClick?: boolean;
+          /** When enabled then it will position title at the center in iOS theme. This will have effect only in iOS theme. (default true) */
+          iosCenterTitle?: boolean;
+          /** When enabled then it will position title at the center in MD theme. This will have effect only in MD theme. (default false) */
+          mdCenterTitle?: boolean;
+          /** When enabled it will collapse large title on page scroll (default true) */
+          collapseLargeTitleOnScroll?: boolean;
+          /** When enabled it will snap page scroll to large title (default true) */
+          snapPageScrollToLargeTitle?: boolean;
+          /** When enabled it will snap page scroll to transparent title (default true) */
+          snapPageScrollToTransparentNavbar?: boolean;
+        }
+      | undefined;
+  }
+
+  interface DomEvents {
+    /** Event will be triggered when Navbar becomes hidden */
+    'navbar:hide': () => void;
+    /** Event will be triggered when Navbar becomes visible */
+    'navbar:show': () => void;
+    /** Event will be triggered when Navbar with large title collapsed (from large navbar to usual navbar) */
+    'navbar:collapse': () => void;
+    /** Event will be triggered when Navbar with large title expanded (from usual navbar to large navbar) */
+    'navbar:expand': () => void;
+  }
+  interface AppEvents {
+    /** Event will be triggered when Navbar becomes hidden */
+    navbarHide: (el: HTMLElement) => void;
+    /** Event will be triggered when Navbar becomes visible */
+    navbarShow: (el: HTMLElement) => void;
+    /** Event will be triggered when Navbar with large title collapsed (from large navbar to usual navbar) */
+    navbarCollapse: (el: HTMLElement) => void;
+    /** Event will be triggered when Navbar with large title expanded (from usual navbar to large navbar) */
+    navbarExpand: (el: HTMLElement) => void;
+  }
+}
+
+declare const NavbarComponent: Framework7Plugin;
+
+export default NavbarComponent;

package/components/navbar-new/navbar.js

@@ -0,0 +1,568 @@
+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;
+    const $el = $(el);
+    const $innerEl = $el.children('.navbar-new-inner');
+    if (!$innerEl.length) return;
+    const navbarNewParams = app.params.navbarNew || {};
+    const needCenterTitle = $innerEl.hasClass('navbar-new-inner-centered-title') || navbarNewParams[`${app.theme}CenterTitle`];
+    const needLeftTitle = app.theme === 'ios' && !navbarNewParams[`${app.theme}CenterTitle`];
+    if (!needCenterTitle && !needLeftTitle) return;
+    if ($el.parents('.tab:not(.tab-active)').length > 0 || $el.parents('.popup:not(.modal-in)').length > 0) {
+      return;
+    }
+    if (app.theme !== 'ios' && navbarNewParams[`${app.theme}CenterTitle`]) {
+      $innerEl.addClass('navbar-new-inner-centered-title');
+    }
+    if (app.theme === 'ios' && !navbarNewParams.iosCenterTitle) {
+      $innerEl.addClass('navbar-new-inner-left-title');
+    }
+    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 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);
+    let currLeft;
+    let diff;
+    if (noRight) {
+      currLeft = navbarInnerWidth - titleWidth;
+    }
+    if (noLeft) {
+      currLeft = 0;
+    }
+    if (!noLeft && !noRight) {
+      currLeft = (navbarInnerWidth - rightWidth - titleWidth + leftWidth) / 2;
+    }
+    let requiredLeft = (navbarInnerWidth - titleWidth) / 2;
+    if (navbarInnerWidth - leftWidth - rightWidth > titleWidth) {
+      if (requiredLeft < leftWidth) {
+        requiredLeft = leftWidth;
+      }
+      if (requiredLeft + titleWidth > navbarInnerWidth - rightWidth) {
+        requiredLeft = navbarInnerWidth - rightWidth - titleWidth;
+      }
+      diff = requiredLeft - currLeft;
+    } else {
+      diff = 0;
+    }
+
+    // Center title
+    if (needCenterTitle) {
+      let titleLeft = diff;
+      if (app.rtl && noLeft && noRight && title.length > 0) titleLeft = -titleLeft;
+      title.css({
+        left: `${titleLeft}px`
+      });
+    }
+  },
+  hide(el, animate, hideStatusbar) {
+    if (animate === void 0) {
+      animate = true;
+    }
+    if (hideStatusbar === void 0) {
+      hideStatusbar = false;
+    }
+    const app = this;
+    const $el = $(el);
+    if (!$el.length) return;
+    if ($el.hasClass('navbar-new-hidden')) return;
+    let className = `navbar-new-hidden${animate ? ' navbar-new-transitioning' : ''}`;
+    const currentIsLarge = $el.find('.title-large').length;
+    if (currentIsLarge) {
+      className += ' navbar-new-large-hidden';
+    }
+    if (hideStatusbar) {
+      className += ' navbar-new-hidden-statusbar';
+    }
+    $el.transitionEnd(() => {
+      $el.removeClass('navbar-new-transitioning');
+    });
+    $el.addClass(className);
+    $el.trigger('navbar-new:hide');
+    app.emit('navbarNewHide', $el[0]);
+  },
+  show(el, animate) {
+    if (el === void 0) {
+      el = '.navbar-new-hidden';
+    }
+    if (animate === void 0) {
+      animate = true;
+    }
+    const app = this;
+    const $el = $(el);
+    if (!$el.length) return;
+    if (!$el.hasClass('navbar-new-hidden')) return;
+    if (animate) {
+      $el.addClass('navbar-new-transitioning');
+      $el.transitionEnd(() => {
+        $el.removeClass('navbar-new-transitioning');
+      });
+    }
+    $el.removeClass('navbar-new-hidden navbar-new-large-hidden navbar-new-hidden-statusbar');
+    $el.trigger('navbar-new:show');
+    app.emit('navbarNewShow', $el[0]);
+  },
+  getElByPage(page) {
+    let $pageEl;
+    let $navbarEl;
+    let pageData;
+    if (page.$navbarNewEl || page.$el) {
+      pageData = page;
+      $pageEl = page.$el;
+    } else {
+      $pageEl = $(page);
+      if ($pageEl.length > 0) pageData = $pageEl[0].f7Page;
+    }
+    if (pageData && pageData.$navbarNewEl && pageData.$navbarNewEl.length > 0) {
+      $navbarEl = pageData.$navbarNewEl;
+    } else if ($pageEl) {
+      $navbarEl = $pageEl.children('.navbar-new');
+    }
+    if (!$navbarEl || $navbarEl && $navbarEl.length === 0) return undefined;
+    return $navbarEl[0];
+  },
+  getPageByEl(navbarEl) {
+    const $navbarEl = $(navbarEl);
+    if ($navbarEl.parents('.page').length) {
+      return $navbarEl.parents('.page')[0];
+    }
+    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(navbarEl) {
+    const app = this;
+    const $navbarEl = $(navbarEl);
+    const $pageEl = $(app.navbarNew.getPageByEl($navbarEl));
+    $navbarEl.addClass('navbar-new-large-collapsed');
+    $pageEl.eq(0).addClass('page-with-navbar-new-large-collapsed').trigger('page:navbarlargecollapsed');
+    app.emit('pageNavbarLargeCollapsed', $pageEl[0]);
+    $navbarEl.trigger('navbar-new:collapse');
+    app.emit('navbarNewCollapse', $navbarEl[0]);
+  },
+  expandLargeTitle(navbarEl) {
+    const app = this;
+    const $navbarEl = $(navbarEl);
+    const $pageEl = $(app.navbarNew.getPageByEl($navbarEl));
+    $navbarEl.removeClass('navbar-new-large-collapsed');
+    $pageEl.eq(0).removeClass('page-with-navbar-new-large-collapsed').trigger('page:navbarlargeexpanded');
+    app.emit('pageNavbarLargeExpanded', $pageEl[0]);
+    $navbarEl.trigger('navbar-new:expand');
+    app.emit('navbarNewExpand', $navbarEl[0]);
+  },
+  toggleLargeTitle(navbarEl) {
+    const app = this;
+    const $navbarEl = $(navbarEl);
+    if ($navbarEl.hasClass('navbar-new-large-collapsed')) {
+      app.navbarNew.expandLargeTitle($navbarEl);
+    } else {
+      app.navbarNew.collapseLargeTitle($navbarEl);
+    }
+  },
+  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-new-large');
+    let navbarHideHeight = 44;
+    const snapPageScrollToLargeTitle = app.params.navbarNew.snapPageScrollToLargeTitle;
+    const snapPageScrollToTransparentNavbar = app.params.navbarNew.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-new-large-title-height');
+      if (navbarTitleLargeHeight && navbarTitleLargeHeight.indexOf('px') >= 0) {
+        navbarTitleLargeHeight = parseInt(navbarTitleLargeHeight, 10);
+        if (Number.isNaN(navbarTitleLargeHeight) && $titleLargeEl.length) {
+          navbarTitleLargeHeight = $titleLargeEl[0].offsetHeight;
+        } else if (Number.isNaN(navbarTitleLargeHeight)) {
+          if (app.theme === 'ios') navbarTitleLargeHeight = 52;else if (app.theme === 'md') navbarTitleLargeHeight = 88;
+        }
+      } else if ($titleLargeEl.length) {
+        navbarTitleLargeHeight = $titleLargeEl[0].offsetHeight;
+      } else {
+        // eslint-disable-next-line
+        if (app.theme === 'ios') navbarTitleLargeHeight = 52;else if (app.theme === 'md') navbarTitleLargeHeight = 88;
+      }
+    }
+    if (needHide && isLarge) {
+      navbarHideHeight += navbarTitleLargeHeight;
+    }
+    let scrollChanged;
+    let scrollContent;
+    let scrollTimeoutId;
+    let touchEndTimeoutId;
+    const touchSnapTimeout = 70;
+    const desktopSnapTimeout = 300;
+    function calcScrollableDistance() {
+      $pageEl.find('.page-content').each(pageContentEl => {
+        pageContentEl.f7ScrollableDistance = pageContentEl.scrollHeight - pageContentEl.offsetHeight;
+      });
+    }
+    function snapLargeNavbar() {
+      const inSearchbarExpanded = $navbarEl.hasClass('with-searchbar-expandable-enabled');
+      if (inSearchbarExpanded) return;
+      if (!scrollContent || currentScrollTop < 0) return;
+      if (currentScrollTop >= navbarTitleLargeHeight / 2 && currentScrollTop < navbarTitleLargeHeight) {
+        $(scrollContent).scrollTop(navbarTitleLargeHeight, 100);
+      } else if (currentScrollTop < navbarTitleLargeHeight) {
+        $(scrollContent).scrollTop(0, 200);
+      }
+    }
+    function snapTransparentNavbar() {
+      const inSearchbarExpanded = $navbarEl.hasClass('with-searchbar-expandable-enabled');
+      if (inSearchbarExpanded) return;
+      if (!scrollContent || currentScrollTop < 0) return;
+      if (currentScrollTop >= navbarOffsetHeight / 2 && currentScrollTop < navbarOffsetHeight) {
+        $(scrollContent).scrollTop(navbarOffsetHeight, 100);
+      } else if (currentScrollTop < navbarOffsetHeight) {
+        $(scrollContent).scrollTop(0, 200);
+      }
+    }
+    function handleNavbarTransparent() {
+      const isHidden = $navbarEl.hasClass('navbar-new-hidden');
+      const inSearchbarExpanded = $navbarEl.hasClass('with-searchbar-expandable-enabled');
+      if (inSearchbarExpanded || isHidden) return;
+      if (!navbarOffsetHeight) {
+        navbarOffsetHeight = navbarEl.offsetHeight;
+      }
+      let opacity = currentScrollTop / navbarOffsetHeight;
+      const notTransparent = $navbarEl.hasClass('navbar-new-transparent-visible');
+      opacity = Math.max(Math.min(opacity, 1), 0);
+      if (notTransparent && opacity === 1 || !notTransparent && opacity === 0) {
+        $navbarEl.find('.navbar-new-bg, .title').css('opacity', '');
+        return;
+      }
+      if (notTransparent && opacity === 0) {
+        $navbarEl.trigger('navbar-new:transparenthide');
+        app.emit('navbarNewTransparentHide', $navbarEl[0]);
+        $navbarEl.removeClass('navbar-new-transparent-visible');
+        $navbarEl.find('.navbar-new-bg, .title').css('opacity', '');
+        return;
+      }
+      if (!notTransparent && opacity === 1) {
+        $navbarEl.trigger('navbar-new:transparentshow');
+        app.emit('navbarNewTransparentShow', $navbarEl[0]);
+        $navbarEl.addClass('navbar-new-transparent-visible');
+        $navbarEl.find('.navbar-new-bg, .title').css('opacity', '');
+        return;
+      }
+      $navbarEl.find('.navbar-new-bg, .title').css('opacity', opacity);
+      if (snapPageScrollToTransparentNavbar) {
+        if (!support.touch) {
+          clearTimeout(scrollTimeoutId);
+          scrollTimeoutId = setTimeout(() => {
+            snapTransparentNavbar();
+          }, desktopSnapTimeout);
+        } else if (touchEndTimeoutId) {
+          clearTimeout(touchEndTimeoutId);
+          touchEndTimeoutId = null;
+          touchEndTimeoutId = setTimeout(() => {
+            snapTransparentNavbar();
+            clearTimeout(touchEndTimeoutId);
+            touchEndTimeoutId = null;
+          }, touchSnapTimeout);
+        }
+      }
+    }
+    let previousCollapseProgress = null;
+    let collapseProgress = null;
+    function handleLargeNavbarCollapse(pageContentEl) {
+      const isHidden = $navbarEl.hasClass('navbar-new-hidden');
+      if (isHidden) return;
+      const isLargeTransparent = $navbarEl.hasClass('navbar-new-large-transparent') || $navbarEl.hasClass('navbar-new-large') && $navbarEl.hasClass('navbar-new-transparent');
+      previousCollapseProgress = collapseProgress;
+      const scrollableDistance = Math.min(navbarTitleLargeHeight, pageContentEl.f7ScrollableDistance || navbarTitleLargeHeight);
+      collapseProgress = Math.min(Math.max(currentScrollTop / scrollableDistance, 0), 1);
+      const previousCollapseWasInMiddle = previousCollapseProgress > 0 && previousCollapseProgress < 1;
+      const inSearchbarExpanded = $navbarEl.hasClass('with-searchbar-expandable-enabled');
+      if (inSearchbarExpanded) return;
+      navbarCollapsed = $navbarEl.hasClass('navbar-new-large-collapsed');
+      const $bgEl = $navbarEl.find('.navbar-new-bg');
+      if (collapseProgress === 0 && navbarCollapsed) {
+        app.navbarNew.expandLargeTitle($navbarEl[0]);
+      } else if (collapseProgress === 1 && !navbarCollapsed) {
+        app.navbarNew.collapseLargeTitle($navbarEl[0]);
+      }
+      if (collapseProgress === 0 && navbarCollapsed || collapseProgress === 0 && previousCollapseWasInMiddle || collapseProgress === 1 && !navbarCollapsed || collapseProgress === 1 && previousCollapseWasInMiddle) {
+        if (app.theme === 'md') {
+          $navbarEl.find('.navbar-new-inner').css('overflow', '');
+        }
+        $navbarEl.find('.title').css('opacity', '');
+        $navbarEl.find('.title-large-text, .subnavbar').css('transform', '');
+        $navbarEl.find('.title-large-text').css('opacity', '');
+        if (app.theme === 'md') {
+          if (isLargeTransparent) {
+            $bgEl.css('opacity', '');
+          }
+          $bgEl.css('transform', '');
+        }
+      } else if (collapseProgress > 0 && collapseProgress < 1) {
+        if (app.theme === 'md') {
+          $navbarEl.find('.navbar-new-inner').css('overflow', 'visible');
+        }
+        $navbarEl.find('.title').css('opacity', -0.5 + collapseProgress * 1.5);
+        $navbarEl.find('.title-large-text, .subnavbar').css('transform', `translate3d(0px, ${-1 * collapseProgress * navbarTitleLargeHeight}px, 0)`);
+        $navbarEl.find('.title-large-text').css('opacity', 1 - collapseProgress * 2);
+        if (app.theme === 'md') {
+          if (isLargeTransparent) {
+            $bgEl.css('opacity', collapseProgress);
+          }
+          $bgEl.css('transform', `translate3d(0px, ${-1 * collapseProgress * navbarTitleLargeHeight}px, 0)`);
+        }
+      }
+      if (snapPageScrollToLargeTitle) {
+        if (!support.touch) {
+          clearTimeout(scrollTimeoutId);
+          scrollTimeoutId = setTimeout(() => {
+            snapLargeNavbar();
+          }, desktopSnapTimeout);
+        } else if (touchEndTimeoutId) {
+          clearTimeout(touchEndTimeoutId);
+          touchEndTimeoutId = null;
+          touchEndTimeoutId = setTimeout(() => {
+            snapLargeNavbar();
+            clearTimeout(touchEndTimeoutId);
+            touchEndTimeoutId = null;
+          }, touchSnapTimeout);
+        }
+      }
+    }
+    function handleTitleHideShow() {
+      if ($pageEl.hasClass('page-with-card-opened')) return;
+      scrollHeight = scrollContent.scrollHeight;
+      offsetHeight = scrollContent.offsetHeight;
+      reachEnd = currentScrollTop + offsetHeight >= scrollHeight;
+      navbarHidden = $navbarEl.hasClass('navbar-new-hidden');
+      if (reachEnd) {
+        if (app.params.navbarNew.showOnPageScrollEnd) {
+          action = 'show';
+        }
+      } else if (previousScrollTop > currentScrollTop) {
+        if (app.params.navbarNew.showOnPageScrollTop || currentScrollTop <= navbarHideHeight) {
+          action = 'show';
+        } else {
+          action = 'hide';
+        }
+      } else if (currentScrollTop > navbarHideHeight) {
+        action = 'hide';
+      } else {
+        action = 'show';
+      }
+      if (action === 'show' && navbarHidden) {
+        app.navbarNew.show($navbarEl, true, true);
+        navbarHidden = false;
+      } else if (action === 'hide' && !navbarHidden) {
+        app.navbarNew.hide($navbarEl, true, false, true);
+        navbarHidden = true;
+      }
+      previousScrollTop = currentScrollTop;
+    }
+    function handleScroll(e) {
+      scrollContent = this;
+      if (e && e.target && e.target !== scrollContent) {
+        return;
+      }
+      currentScrollTop = scrollContent.scrollTop;
+      scrollChanged = currentScrollTop;
+      if (needCollapse) {
+        handleLargeNavbarCollapse(scrollContent);
+      } else if (needTransparent) {
+        handleNavbarTransparent();
+      }
+      if ($pageEl.hasClass('page-previous')) return;
+      if (needHide) {
+        handleTitleHideShow();
+      }
+    }
+    function handeTouchStart() {
+      scrollChanged = false;
+    }
+    function handleTouchEnd() {
+      clearTimeout(touchEndTimeoutId);
+      touchEndTimeoutId = null;
+      touchEndTimeoutId = setTimeout(() => {
+        if (scrollChanged !== false) {
+          if (needTransparent && !needCollapse) {
+            snapTransparentNavbar();
+          } else {
+            snapLargeNavbar();
+          }
+          clearTimeout(touchEndTimeoutId);
+          touchEndTimeoutId = null;
+        }
+      }, touchSnapTimeout);
+    }
+    $pageEl.on('scroll', '.page-content', handleScroll, true);
+    if (support.touch && (needCollapse && snapPageScrollToLargeTitle || needTransparent && snapPageScrollToTransparentNavbar)) {
+      app.on('touchstart:passive', handeTouchStart);
+      app.on('touchend:passive', handleTouchEnd);
+    }
+    calcScrollableDistance();
+    if (needCollapse || needTransparent) {
+      $pageEl.find('.page-content').each(pageContentEl => {
+        if (pageContentEl.scrollTop > 0) handleScroll.call(pageContentEl);
+      });
+    }
+    app.on('resize', calcScrollableDistance);
+    $pageEl[0].f7DetachNavbarNewScrollHandlers = function f7DetachNavbarNewScrollHandlers() {
+      app.off('resize', calcScrollableDistance);
+      delete $pageEl[0].f7DetachNavbarNewScrollHandlers;
+      $pageEl.off('scroll', '.page-content', handleScroll, true);
+      if (support.touch && (needCollapse && snapPageScrollToLargeTitle || needTransparent && snapPageScrollToTransparentNavbar)) {
+        app.off('touchstart:passive', handeTouchStart);
+        app.off('touchend:passive', handleTouchEnd);
+      }
+    };
+  }
+};
+export default {
+  name: 'navbar-new',
+  create() {
+    const app = this;
+    bindMethods(app, {
+      navbarNew: Navbar
+    });
+  },
+  params: {
+    navbarNew: {
+      scrollTopOnTitleClick: true,
+      iosCenterTitle: true,
+      mdCenterTitle: false,
+      hideOnPageScroll: false,
+      showOnPageScrollEnd: true,
+      showOnPageScrollTop: true,
+      collapseLargeTitleOnScroll: true,
+      snapPageScrollToLargeTitle: true,
+      snapPageScrollToTransparentNavbar: true
+    }
+  },
+  on: {
+    'panelBreakpoint panelCollapsedBreakpoint panelResize viewResize resize viewMasterDetailBreakpoint': function onPanelResize() {
+      const app = this;
+      $('.navbar-new').each(navbarEl => {
+        app.navbarNew.size(navbarEl);
+      });
+    },
+    pageBeforeRemove(page) {
+      if (page.$el[0].f7DetachNavbarNewScrollHandlers) {
+        page.$el[0].f7DetachNavbarNewScrollHandlers();
+      }
+    },
+    pageReinit(page) {
+      const app = this;
+      const $navbarEl = $(app.navbarNew.getElByPage(page));
+      if (!$navbarEl || $navbarEl.length === 0) return;
+      app.navbarNew.size($navbarEl);
+    },
+    pageInit(page) {
+      const app = this;
+      const $navbarEl = $(app.navbarNew.getElByPage(page));
+      if (!$navbarEl || $navbarEl.length === 0) return;
+
+      // Size
+      app.navbarNew.size($navbarEl);
+
+      // Need Collapse On Scroll
+      let needCollapseOnScrollHandler;
+      if ($navbarEl.find('.title-large').length > 0) {
+        $navbarEl.addClass('navbar-new-large');
+      }
+      if ($navbarEl.hasClass('navbar-new-large')) {
+        if (app.params.navbarNew.collapseLargeTitleOnScroll) needCollapseOnScrollHandler = true;
+        page.$el.addClass('page-with-navbar-new-large');
+      }
+
+      // Need transparent on scroll
+      let needTransparentOnScroll;
+      if (!needCollapseOnScrollHandler && $navbarEl.hasClass('navbar-new-transparent')) {
+        needTransparentOnScroll = true;
+      }
+
+      // Need Hide On Scroll
+      let needHideOnScrollHandler;
+      if (app.params.navbarNew.hideOnPageScroll || page.$el.find('.hide-navbar-new-on-scroll').length || page.$el.hasClass('hide-navbar-new-on-scroll') || page.$el.find('.hide-bars-on-scroll').length || page.$el.hasClass('hide-bars-on-scroll')) {
+        if (page.$el.find('.keep-navbar-new-on-scroll').length || page.$el.hasClass('keep-navbar-new-on-scroll') || page.$el.find('.keep-bars-on-scroll').length || page.$el.hasClass('keep-bars-on-scroll')) {
+          needHideOnScrollHandler = false;
+        } else {
+          needHideOnScrollHandler = true;
+        }
+      }
+      if (needCollapseOnScrollHandler || needHideOnScrollHandler || needTransparentOnScroll) {
+        app.navbarNew.initNavbarOnScroll(page.el, $navbarEl[0], needHideOnScrollHandler, needCollapseOnScrollHandler, needTransparentOnScroll);
+      }
+    },
+    'panelOpen panelSwipeOpen modalOpen': function onPanelModalOpen(instance) {
+      const app = this;
+      instance.$el.find('.navbar-new').each(navbarEl => {
+        app.navbarNew.size(navbarEl);
+      });
+    },
+    tabShow(tabEl) {
+      const app = this;
+      $(tabEl).find('.navbar-new').each(navbarEl => {
+        app.navbarNew.size(navbarEl);
+      });
+    }
+  },
+  clicks: {
+    '.navbar-new .title': function onTitleClick($clickedEl, clickedData, e) {
+      const app = this;
+      if (!app.params.navbarNew.scrollTopOnTitleClick) return;
+      if ($(e.target).closest('a, button').length > 0) {
+        return;
+      }
+      let $pageContentEl;
+
+      // Find active page
+      const $navbarEl = $clickedEl.parents('.navbar-new');
+
+      // Static Layout
+      $pageContentEl = $navbarEl.parents('.page-content');
+      if ($pageContentEl.length === 0) {
+        // Fixed Layout
+        if ($navbarEl.parents('.page').length > 0) {
+          $pageContentEl = $navbarEl.parents('.page').find('.page-content');
+        }
+      }
+      if ($pageContentEl && $pageContentEl.length > 0) {
+        // Check for tab
+        if ($pageContentEl.hasClass('tab')) {
+          $pageContentEl = $pageContentEl.parent('.tabs').children('.page-content.tab-active');
+        }
+        if ($pageContentEl.length > 0) $pageContentEl.scrollTop(0, 300);
+      }
+    }
+  },
+  vnode: {
+    'navbar-new': {
+      postpatch(vnode) {
+        const app = this;
+        app.navbarNew.size(vnode.elm);
+      }
+    }
+  }
+};