/*============================================================= ************ Hide/show Toolbar/Navbar on scroll ************ =============================================================*/ app.initPageScrollToolbars = function (pageContainer) { pageContainer = $(pageContainer); var scrollContent = pageContainer.find('.page-content'); if (scrollContent.length === 0) return; var hideNavbar = (app.params.hideNavbarOnPageScroll || scrollContent.hasClass('hide-navbar-on-scroll') || scrollContent.hasClass('hide-bars-on-scroll')) && !(scrollContent.hasClass('keep-navbar-on-scroll') || scrollContent.hasClass('keep-bars-on-scroll')); var hideToolbar = (app.params.hideToolbarOnPageScroll || scrollContent.hasClass('hide-toolbar-on-scroll') || scrollContent.hasClass('hide-bars-on-scroll')) && !(scrollContent.hasClass('keep-toolbar-on-scroll') || scrollContent.hasClass('keep-bars-on-scroll')); var hideTabbar = (app.params.hideTabbarOnPageScroll || scrollContent.hasClass('hide-tabbar-on-scroll')) && !(scrollContent.hasClass('keep-tabbar-on-scroll')); if (!(hideNavbar || hideToolbar || hideTabbar)) return; var viewContainer = scrollContent.parents('.' + app.params.viewClass); if (viewContainer.length === 0) return; var navbar = viewContainer.find('.navbar'), toolbar = viewContainer.find('.toolbar'), tabbar; if (hideTabbar) { tabbar = viewContainer.find('.tabbar'); if (tabbar.length === 0) tabbar = viewContainer.parents('.' + app.params.viewsClass).find('.tabbar'); } var hasNavbar = navbar.length > 0, hasToolbar = toolbar.length > 0, hasTabbar = tabbar && tabbar.length > 0; var previousScroll, currentScroll; previousScroll = currentScroll = scrollContent[0].scrollTop; var scrollHeight, offsetHeight, reachEnd, action, navbarHidden, toolbarHidden, tabbarHidden; var toolbarHeight = (hasToolbar && hideToolbar) ? toolbar[0].offsetHeight : 0; var tabbarHeight = (hasTabbar && hideTabbar) ? tabbar[0].offsetHeight : 0; var bottomBarHeight = tabbarHeight || toolbarHeight; function handleScroll(e) { if (pageContainer.hasClass('page-on-left')) return; currentScroll = scrollContent[0].scrollTop; scrollHeight = scrollContent[0].scrollHeight; offsetHeight = scrollContent[0].offsetHeight; reachEnd = currentScroll + offsetHeight >= scrollHeight - bottomBarHeight; navbarHidden = navbar.hasClass('navbar-hidden'); toolbarHidden = toolbar.hasClass('toolbar-hidden'); tabbarHidden = tabbar && tabbar.hasClass('toolbar-hidden'); if (reachEnd) { if (app.params.showBarsOnPageScrollEnd) { action = 'show'; } } else if (previousScroll > currentScroll) { if (app.params.showBarsOnPageScrollTop || currentScroll <= 44) { action = 'show'; } else { action = 'hide'; } } else { if (currentScroll > 44) { action = 'hide'; } else { action = 'show'; } } if (action === 'show') { if (hasNavbar && hideNavbar && navbarHidden) { app.showNavbar(navbar); pageContainer.removeClass('no-navbar-by-scroll'); navbarHidden = false; } if (hasToolbar && hideToolbar && toolbarHidden) { app.showToolbar(toolbar); pageContainer.removeClass('no-toolbar-by-scroll'); toolbarHidden = false; } if (hasTabbar && hideTabbar && tabbarHidden) { app.showToolbar(tabbar); pageContainer.removeClass('no-tabbar-by-scroll'); tabbarHidden = false; } } else { if (hasNavbar && hideNavbar && !navbarHidden) { app.hideNavbar(navbar); pageContainer.addClass('no-navbar-by-scroll'); navbarHidden = true; } if (hasToolbar && hideToolbar && !toolbarHidden) { app.hideToolbar(toolbar); pageContainer.addClass('no-toolbar-by-scroll'); toolbarHidden = true; } if (hasTabbar && hideTabbar && !tabbarHidden) { app.hideToolbar(tabbar); pageContainer.addClass('no-tabbar-by-scroll'); tabbarHidden = true; } } previousScroll = currentScroll; } scrollContent.on('scroll', handleScroll); scrollContent[0].f7ScrollToolbarsHandler = handleScroll; }; app.destroyScrollToolbars = function (pageContainer) { pageContainer = $(pageContainer); var scrollContent = pageContainer.find('.page-content'); if (scrollContent.length === 0) return; var handler = scrollContent[0].f7ScrollToolbarsHandler; if (!handler) return; scrollContent.off('scroll', scrollContent[0].f7ScrollToolbarsHandler); };