117 lines
5 KiB
JavaScript
117 lines
5 KiB
JavaScript
/*=============================================================
|
|
************ 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);
|
|
}; |