From 2eef9f4e5d2f39beae424045f34ad4de25ac5443 Mon Sep 17 00:00:00 2001 From: scottjehl Date: Sun, 12 Sep 2010 08:39:32 -0400 Subject: [PATCH] attempts to make the header footer transitions work better with multiple pages --- js/jQuery.fixHeaderFooter.js | 125 ++++++++++++++++++++--------------- js/jQuery.mobile.js | 8 +-- 2 files changed, 77 insertions(+), 56 deletions(-) diff --git a/js/jQuery.fixHeaderFooter.js b/js/jQuery.fixHeaderFooter.js index a90bf484..6c5f3bc3 100644 --- a/js/jQuery.fixHeaderFooter.js +++ b/js/jQuery.fixHeaderFooter.js @@ -7,7 +7,8 @@ (function($){ $.fn.fixHeaderFooter = function(options){ return $(this).each(function(){ - var el = $(this); + if($(this).data('fixedapplied')){ return; } + var el = $uipage = $(this).data('fixedapplied',true); var o = $.extend({ ignoreTargets: 'a,input,textarea,select,button,label,.ui-headfoot-placehold', transition: el.find('[data-headfoottransition]').attr('data-headfoottransition') || ['slidedown','slideup'], @@ -16,8 +17,8 @@ $.fn.fixHeaderFooter = function(options){ },options); var els = el.find('.ui-header,.ui-footer').wrap('
'), - //posLoop = setInterval(function(){ els.trigger('setTop'); }, 20), - tIsArray = $.isArray(o.transition); + tIsArray = $.isArray(o.transition), + currentstate = 'inline'; //add transition types els.filter('.ui-header').addClass(tIsArray ? o.transition[0] : o.transition); @@ -53,83 +54,103 @@ $.fn.fixHeaderFooter = function(options){ thisHeight = $(this).parent().outerHeight(); return $(this).parent().css('top', ($(this).is('.ui-header')) ? fromTop : fromTop + screenHeight - thisHeight); }) + .bind('click tap mousedown',function(e){ + e.stopImmediatePropagation(); + return false; + }); + + $uipage .bind('overlayIn',function(){ - var el = $(this); - el.parent().addClass('ui-fixpos'); - //only animate if placeholder is out of view - if( placeHolderOutofView(el) ){ - el.addClass('in').animationComplete(function(){ - el.removeClass('in'); - }); - } - if(o.overlayOnly){ - el.parent().parent().removeClass('ui-headfoot-hidden'); - } - return $(this).trigger('setTop'); + console.log('out') + currentstate = 'overlay'; + return els.each(function(){ + var el = $(this); + el.parent().addClass('ui-fixpos'); + //only animate if placeholder is out of view + if( placeHolderOutofView(el) ){ + el.addClass('in').animationComplete(function(){ + el.removeClass('in'); + }); + } + if(o.overlayOnly){ + el.parent().parent().removeClass('ui-headfoot-hidden'); + } + el.trigger('setTop'); + }); }) .bind('overlayOut',function(e,immediately){ - var el = $(this); - if(immediately || !placeHolderOutofView(el)){ - el.parent().removeClass('ui-fixpos'); - addOverlayOnlyClass(); - } - else{ - var classes = 'out'; - //if it's one of these, we'll need to add the reverse class too - if(el.is('.slidedown,.slideup, .swap, .pop, .flip')){ - classes += ' reverse'; - } - el.addClass(classes).animationComplete(function(){ - el.removeClass(classes); + console.log('in') + currentstate = 'inline'; + return els.each(function(){ + var el = $(this); + if(immediately || !placeHolderOutofView(el)){ el.parent().removeClass('ui-fixpos'); addOverlayOnlyClass(); - }); - } - function addOverlayOnlyClass(){ - if(o.overlayOnly){ - el.parent().parent().addClass('ui-headfoot-hidden'); } - } - return $(this); + else{ + var classes = 'out'; + //if it's one of these, we'll need to add the reverse class too + if(el.is('.slidedown,.slideup, .swap, .pop, .flip')){ + classes += ' reverse'; + } + el.addClass(classes).animationComplete(function(){ + el.removeClass(classes); + el.parent().removeClass('ui-fixpos'); + addOverlayOnlyClass(); + }); + } + function addOverlayOnlyClass(){ + if(o.overlayOnly){ + el.parent().parent().addClass('ui-headfoot-hidden'); + } + } + }); }) .bind('overlayToggle',function(){ - return $(this).parent().is('.ui-fixpos') ? $(this).trigger('overlayOut') : $(this).trigger('overlayIn'); - }) - .bind('mousedown',function(e){ - return false; - }) - .bind('click tap',function(e){ - e.stopImmediatePropagation(); - }); + return (currentstate == 'overlay') ? $(this).trigger('overlayOut') : $(this).trigger('overlayIn'); + }); + + - $(document) + $uipage .bind('tap',function(e){ if( !$(e.target).closest(o.ignoreTargets).length ){ - els.trigger('overlayToggle'); + $(this).trigger('overlayToggle'); } }) .bind('scrollstart',function(){ - if(els.parent().is('.ui-fixpos')){ - els.data('visiblebeforescroll', true); + if(currentstate == 'overlay'){ + $uipage.data('visiblebeforescroll', true); } - els.trigger('overlayOut',[true]); + $uipage.trigger('overlayOut',[true]); + return false; }) .bind('scrollstop',function(){ - if(els.data('visiblebeforescroll')){ - els.removeData('visiblebeforescroll').trigger('overlayIn'); + if($uipage.data('visiblebeforescroll')){ + $uipage.removeData('visiblebeforescroll').trigger('overlayIn'); } + return false; }); + + + $('body').scrollstart(function(){ + $uipage.trigger('scrollstart'); + }) + .scrollstop(function(){ + $uipage.trigger('scrollstop'); + }); + $(window) .bind('load',function(){ - els.trigger('overlayIn'); + $uipage.trigger('overlayIn'); if(o.overlayOnly){ //to-do...for a photo-viewer or something full-screen els.parents('.ui-headfoot-placehold:eq(0)').addClass('ui-headfoot-overlayonly'); } }) - .resize(function(){ els.trigger('overlayOut'); }); + .resize(function(){ $uipage.trigger('overlayOut',[true]); }); }); }; })(jQuery); \ No newline at end of file diff --git a/js/jQuery.mobile.js b/js/jQuery.mobile.js index 44e78a3d..9d80baeb 100644 --- a/js/jQuery.mobile.js +++ b/js/jQuery.mobile.js @@ -180,7 +180,7 @@ .scroll(function(e){ var prevscroll = $.scrollY(); function checkscrollstop(){ - if(prevscroll === $.scrollY()){ + if(prevscroll === $.scrollY() && scrolling){ $body.trigger('scrollstop'); scrolling = false; } @@ -323,7 +323,7 @@ to.animationComplete(function(){ from.add(to).removeClass(' out in reverse '+ transitions); from.removeClass(activePageClass); - to.find('.ui-header,.ui-footer').trigger('overlayIn'); + to.trigger('overlayIn'); pageLoading(true); }); if(back){ currentTransition = 'slide'; } @@ -343,7 +343,7 @@ function hideToolbarsAfterDelay(){ setTimeout(function(){ - $('.ui-header,.ui-footer').trigger('overlayOut'); + $('.ui-page-active').trigger('overlayOut'); }, 2000); } @@ -435,7 +435,7 @@ } else{ startPage.addClass(activePageClass); - startPage.find('.ui-header,.ui-footer').trigger('overlayIn'); + startPage.trigger('overlayIn'); pageLoading(true); } }