mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-03-16 22:10:25 +00:00
removed files for previous fixed toolbars implementation
This commit is contained in:
scottjehl
parent
c3b2d7963b
commit
a5fd5f235e
3 changed files with 0 additions and 457 deletions
|
|
@ -1,8 +0,0 @@
|
|||
/* fixed page header & footer configuration */
|
||||
.ui-header, .ui-footer, .ui-page-fullscreen .ui-header, .ui-page-fullscreen .ui-footer { position: absolute; overflow: hidden; width: 100%; border-left-width: 0; border-right-width: 0; }
|
||||
.ui-header-fixed, .ui-footer-fixed {
|
||||
z-index: 1000;
|
||||
-webkit-transform: translateZ(0); /* Force header/footer rendering to go through the same rendering pipeline as native page scrolling. */
|
||||
}
|
||||
.ui-footer-duplicate, .ui-page-fullscreen .ui-fixed-inline { display: none; }
|
||||
.ui-page-fullscreen .ui-header, .ui-page-fullscreen .ui-footer { opacity: .9; }
|
||||
|
|
@ -1,384 +0,0 @@
|
|||
/*
|
||||
* "fixHeaderFooter" plugin - on-demand positioning for headers,footers
|
||||
*/
|
||||
|
||||
//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
|
||||
//>>description: Fixed positioning polyfull (deprecated)
|
||||
//>>label: Fixed header/footer
|
||||
|
||||
define( [ "jquery", "jquery.mobile.core", "jquery.mobile.vmouse" ], function( $ ) {
|
||||
//>>excludeEnd("jqmBuildExclude");
|
||||
(function( $, undefined ) {
|
||||
|
||||
var slideDownClass = "ui-header-fixed ui-fixed-inline fade",
|
||||
slideUpClass = "ui-footer-fixed ui-fixed-inline fade",
|
||||
|
||||
slideDownSelector = ".ui-header:jqmData(position='fixed')",
|
||||
slideUpSelector = ".ui-footer:jqmData(position='fixed')";
|
||||
|
||||
$.fn.fixHeaderFooter = function( options ) {
|
||||
|
||||
if ( !$.support.scrollTop || ( $.support.touchOverflow && $.mobile.touchOverflowEnabled ) ) {
|
||||
return this;
|
||||
}
|
||||
|
||||
return this.each(function() {
|
||||
var $this = $( this );
|
||||
|
||||
if ( $this.jqmData( "fullscreen" ) ) {
|
||||
$this.addClass( "ui-page-fullscreen" );
|
||||
}
|
||||
|
||||
// Should be slidedown
|
||||
$this.find( slideDownSelector ).addClass( slideDownClass );
|
||||
|
||||
// Should be slideup
|
||||
$this.find( slideUpSelector ).addClass( slideUpClass );
|
||||
});
|
||||
};
|
||||
|
||||
// single controller for all showing,hiding,toggling
|
||||
$.mobile.fixedToolbars = (function() {
|
||||
|
||||
if ( !$.support.scrollTop || ( $.support.touchOverflow && $.mobile.touchOverflowEnabled ) ) {
|
||||
return;
|
||||
}
|
||||
|
||||
var stickyFooter, delayTimer,
|
||||
currentstate = "inline",
|
||||
autoHideMode = false,
|
||||
showDelay = 100,
|
||||
ignoreTargets = "a,input,textarea,select,button,label,.ui-header-fixed,.ui-footer-fixed",
|
||||
toolbarSelector = ".ui-header-fixed:first, .ui-footer-fixed:not(.ui-footer-duplicate):last",
|
||||
// for storing quick references to duplicate footers
|
||||
supportTouch = $.support.touch,
|
||||
touchStartEvent = supportTouch ? "touchstart" : "mousedown",
|
||||
touchStopEvent = supportTouch ? "touchend" : "mouseup",
|
||||
stateBefore = null,
|
||||
scrollTriggered = false,
|
||||
touchToggleEnabled = true;
|
||||
|
||||
function showEventCallback( event ) {
|
||||
// An event that affects the dimensions of the visual viewport has
|
||||
// been triggered. If the header and/or footer for the current page are in overlay
|
||||
// mode, we want to hide them, and then fire off a timer to show them at a later
|
||||
// point. Events like a resize can be triggered continuously during a scroll, on
|
||||
// some platforms, so the timer is used to delay the actual positioning until the
|
||||
// flood of events have subsided.
|
||||
//
|
||||
// If we are in autoHideMode, we don't do anything because we know the scroll
|
||||
// callbacks for the plugin will fire off a show when the scrolling has stopped.
|
||||
if ( !autoHideMode && currentstate === "overlay" ) {
|
||||
if ( !delayTimer ) {
|
||||
$.mobile.fixedToolbars.hide( true );
|
||||
}
|
||||
|
||||
$.mobile.fixedToolbars.startShowTimer();
|
||||
}
|
||||
}
|
||||
|
||||
$(function() {
|
||||
var $document = $( document ),
|
||||
$window = $( window );
|
||||
|
||||
$document
|
||||
.bind( "vmousedown", function( event ) {
|
||||
if ( touchToggleEnabled ) {
|
||||
stateBefore = currentstate;
|
||||
}
|
||||
})
|
||||
.bind( "vclick", function( event ) {
|
||||
if ( touchToggleEnabled ) {
|
||||
|
||||
if ( $(event.target).closest( ignoreTargets ).length ) {
|
||||
return;
|
||||
}
|
||||
|
||||
if ( !scrollTriggered ) {
|
||||
$.mobile.fixedToolbars.toggle( stateBefore );
|
||||
stateBefore = null;
|
||||
}
|
||||
}
|
||||
})
|
||||
.bind( "silentscroll", showEventCallback );
|
||||
|
||||
|
||||
// The below checks first for a $(document).scrollTop() value, and if zero, binds scroll events to $(window) instead.
|
||||
// If the scrollTop value is actually zero, both will return zero anyway.
|
||||
//
|
||||
// Works with $(document), not $(window) : Opera Mobile (WinMO phone; kinda broken anyway)
|
||||
// Works with $(window), not $(document) : IE 7/8
|
||||
// Works with either $(window) or $(document) : Chrome, FF 3.6/4, Android 1.6/2.1, iOS
|
||||
// Needs work either way : BB5, Opera Mobile (iOS)
|
||||
|
||||
( ( $document.scrollTop() === 0 ) ? $window : $document )
|
||||
.bind( "scrollstart", function( event ) {
|
||||
|
||||
scrollTriggered = true;
|
||||
|
||||
if ( stateBefore === null ) {
|
||||
stateBefore = currentstate;
|
||||
}
|
||||
|
||||
// We only enter autoHideMode if the headers/footers are in
|
||||
// an overlay state or the show timer was started. If the
|
||||
// show timer is set, clear it so the headers/footers don't
|
||||
// show up until after we're done scrolling.
|
||||
var isOverlayState = stateBefore == "overlay";
|
||||
|
||||
autoHideMode = isOverlayState || !!delayTimer;
|
||||
|
||||
if ( autoHideMode ) {
|
||||
$.mobile.fixedToolbars.clearShowTimer();
|
||||
|
||||
if ( isOverlayState ) {
|
||||
$.mobile.fixedToolbars.hide( true );
|
||||
}
|
||||
}
|
||||
})
|
||||
.bind( "scrollstop", function( event ) {
|
||||
|
||||
if ( $( event.target ).closest( ignoreTargets ).length ) {
|
||||
return;
|
||||
}
|
||||
|
||||
scrollTriggered = false;
|
||||
|
||||
if ( autoHideMode ) {
|
||||
$.mobile.fixedToolbars.startShowTimer();
|
||||
autoHideMode = false;
|
||||
}
|
||||
stateBefore = null;
|
||||
});
|
||||
|
||||
$window.bind( "resize updatelayout", showEventCallback );
|
||||
});
|
||||
|
||||
// 1. Before page is shown, check for duplicate footer
|
||||
// 2. After page is shown, append footer to new page
|
||||
$( document ).delegate( ".ui-page", "pagebeforeshow", function( event, ui ) {
|
||||
var page = $( event.target ),
|
||||
footer = page.find( ":jqmData(role='footer')" ),
|
||||
id = footer.data( "id" ),
|
||||
prevPage = ui.prevPage,
|
||||
prevFooter = prevPage && prevPage.find( ":jqmData(role='footer')" ),
|
||||
prevFooterMatches = prevFooter.length && prevFooter.jqmData( "id" ) === id;
|
||||
|
||||
if ( id && prevFooterMatches ) {
|
||||
stickyFooter = footer;
|
||||
setTop( stickyFooter.removeClass( "fade in out" ).appendTo( $.mobile.pageContainer ) );
|
||||
}
|
||||
})
|
||||
.delegate( ".ui-page", "pageshow", function( event, ui ) {
|
||||
var $this = $( this );
|
||||
|
||||
if ( stickyFooter && stickyFooter.length ) {
|
||||
setTimeout(function() {
|
||||
setTop( stickyFooter.appendTo( $this ).addClass( "fade" ) );
|
||||
stickyFooter = null;
|
||||
}, 500);
|
||||
}
|
||||
|
||||
$.mobile.fixedToolbars.show( true, this );
|
||||
});
|
||||
|
||||
// When a collapsible is hidden or shown we need to trigger the fixed toolbar to reposition itself (#1635)
|
||||
$( document ).delegate( ".ui-collapsible-contain", "collapse expand", showEventCallback );
|
||||
|
||||
// element.getBoundingClientRect() is broken in iOS 3.2.1 on the iPad. The
|
||||
// coordinates inside of the rect it returns don't have the page scroll position
|
||||
// factored out of it like the other platforms do. To get around this,
|
||||
// we'll just calculate the top offset the old fashioned way until core has
|
||||
// a chance to figure out how to handle this situation.
|
||||
//
|
||||
// TODO: We'll need to get rid of getOffsetTop() once a fix gets folded into core.
|
||||
|
||||
function getOffsetTop( ele ) {
|
||||
var top = 0,
|
||||
op, body;
|
||||
|
||||
if ( ele ) {
|
||||
body = document.body;
|
||||
op = ele.offsetParent;
|
||||
top = ele.offsetTop;
|
||||
|
||||
while ( ele && ele != body ) {
|
||||
top -= ele.scrollTop || 0;
|
||||
|
||||
if ( ele == op ) {
|
||||
top += op.offsetTop;
|
||||
op = ele.offsetParent;
|
||||
}
|
||||
|
||||
ele = ele.parentNode;
|
||||
}
|
||||
}
|
||||
return top;
|
||||
}
|
||||
|
||||
function setTop( el ) {
|
||||
var fromTop = $(window).scrollTop(),
|
||||
thisTop = getOffsetTop( el[ 0 ] ), // el.offset().top returns the wrong value on iPad iOS 3.2.1, call our workaround instead.
|
||||
thisCSStop = el.css( "top" ) == "auto" ? 0 : parseFloat(el.css( "top" )),
|
||||
screenHeight = window.innerHeight,
|
||||
thisHeight = el.outerHeight(),
|
||||
useRelative = el.parents( ".ui-page:not(.ui-page-fullscreen)" ).length,
|
||||
relval;
|
||||
|
||||
if ( el.is( ".ui-header-fixed" ) ) {
|
||||
|
||||
relval = fromTop - thisTop + thisCSStop;
|
||||
|
||||
if ( relval < thisTop ) {
|
||||
relval = 0;
|
||||
}
|
||||
|
||||
return el.css( "top", useRelative ? relval : fromTop );
|
||||
} else {
|
||||
// relval = -1 * (thisTop - (fromTop + screenHeight) + thisCSStop + thisHeight);
|
||||
// if ( relval > thisTop ) { relval = 0; }
|
||||
relval = fromTop + screenHeight - thisHeight - (thisTop - thisCSStop );
|
||||
|
||||
return el.css( "top", useRelative ? relval : fromTop + screenHeight - thisHeight );
|
||||
}
|
||||
}
|
||||
|
||||
// Exposed methods
|
||||
return {
|
||||
|
||||
show: function( immediately, page ) {
|
||||
|
||||
$.mobile.fixedToolbars.clearShowTimer();
|
||||
|
||||
currentstate = "overlay";
|
||||
|
||||
var $ap = page ? $( page ) :
|
||||
( $.mobile.activePage ? $.mobile.activePage :
|
||||
$( ".ui-page-active" ) );
|
||||
|
||||
return $ap.children( toolbarSelector ).each(function() {
|
||||
|
||||
var el = $( this ),
|
||||
fromTop = $( window ).scrollTop(),
|
||||
// el.offset().top returns the wrong value on iPad iOS 3.2.1, call our workaround instead.
|
||||
thisTop = getOffsetTop( el[ 0 ] ),
|
||||
screenHeight = window.innerHeight,
|
||||
thisHeight = el.outerHeight(),
|
||||
alreadyVisible = ( el.is( ".ui-header-fixed" ) && fromTop <= thisTop + thisHeight ) ||
|
||||
( el.is( ".ui-footer-fixed" ) && thisTop <= fromTop + screenHeight );
|
||||
|
||||
// Add state class
|
||||
el.addClass( "ui-fixed-overlay" ).removeClass( "ui-fixed-inline" );
|
||||
|
||||
if ( !alreadyVisible && !immediately ) {
|
||||
el.animationComplete(function() {
|
||||
el.removeClass( "in" );
|
||||
}).addClass( "in" );
|
||||
}
|
||||
setTop(el);
|
||||
});
|
||||
},
|
||||
|
||||
hide: function( immediately ) {
|
||||
|
||||
currentstate = "inline";
|
||||
|
||||
var $ap = $.mobile.activePage ? $.mobile.activePage :
|
||||
$( ".ui-page-active" );
|
||||
|
||||
return $ap.children( toolbarSelector ).each(function() {
|
||||
|
||||
var el = $(this),
|
||||
thisCSStop = el.css( "top" ),
|
||||
classes;
|
||||
|
||||
thisCSStop = thisCSStop == "auto" ? 0 :
|
||||
parseFloat(thisCSStop);
|
||||
|
||||
// Add state class
|
||||
el.addClass( "ui-fixed-inline" ).removeClass( "ui-fixed-overlay" );
|
||||
|
||||
if ( thisCSStop < 0 || ( el.is( ".ui-header-fixed" ) && thisCSStop !== 0 ) ) {
|
||||
|
||||
if ( immediately ) {
|
||||
el.css( "top", 0);
|
||||
} else {
|
||||
|
||||
if ( el.css( "top" ) !== "auto" && parseFloat( el.css( "top" ) ) !== 0 ) {
|
||||
|
||||
classes = "out reverse";
|
||||
|
||||
el.animationComplete(function() {
|
||||
el.removeClass( classes ).css( "top", 0 );
|
||||
}).addClass( classes );
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
startShowTimer: function() {
|
||||
|
||||
$.mobile.fixedToolbars.clearShowTimer();
|
||||
|
||||
var args = [].slice.call( arguments );
|
||||
|
||||
delayTimer = setTimeout(function() {
|
||||
delayTimer = undefined;
|
||||
$.mobile.fixedToolbars.show.apply( null, args );
|
||||
}, showDelay);
|
||||
},
|
||||
|
||||
clearShowTimer: function() {
|
||||
if ( delayTimer ) {
|
||||
clearTimeout( delayTimer );
|
||||
}
|
||||
delayTimer = undefined;
|
||||
},
|
||||
|
||||
toggle: function( from ) {
|
||||
if ( from ) {
|
||||
currentstate = from;
|
||||
}
|
||||
return ( currentstate === "overlay" ) ? $.mobile.fixedToolbars.hide() :
|
||||
$.mobile.fixedToolbars.show();
|
||||
},
|
||||
|
||||
setTouchToggleEnabled: function( enabled ) {
|
||||
touchToggleEnabled = enabled;
|
||||
}
|
||||
};
|
||||
})();
|
||||
|
||||
//auto self-init widgets
|
||||
$( document ).bind( "pagecreate create", function( event ) {
|
||||
|
||||
if ( $( ":jqmData(position='fixed')", event.target ).length ) {
|
||||
|
||||
$( event.target ).each(function() {
|
||||
|
||||
if ( !$.support.scrollTop || ( $.support.touchOverflow && $.mobile.touchOverflowEnabled ) ) {
|
||||
return this;
|
||||
}
|
||||
|
||||
var $this = $( this );
|
||||
|
||||
if ( $this.jqmData( "fullscreen" ) ) {
|
||||
$this.addClass( "ui-page-fullscreen" );
|
||||
}
|
||||
|
||||
// Should be slidedown
|
||||
$this.find( slideDownSelector ).addClass( slideDownClass );
|
||||
|
||||
// Should be slideup
|
||||
$this.find( slideUpSelector ).addClass( slideUpClass );
|
||||
|
||||
})
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
})( jQuery );
|
||||
//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
|
||||
});
|
||||
//>>excludeEnd("jqmBuildExclude");
|
||||
|
|
@ -1,65 +0,0 @@
|
|||
//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
|
||||
//>>description: Behavior for "fixed" headers,footers, and scrolling inner content
|
||||
//>>label: Fixed Toolbars
|
||||
|
||||
define( [ "jquery", "jquery.mobile.core" ], function( $ ) {
|
||||
//>>excludeEnd("jqmBuildExclude");
|
||||
(function( $, undefined ) {
|
||||
|
||||
// Enable touch overflow scrolling when it's natively supported
|
||||
$.mobile.touchOverflowEnabled = false;
|
||||
|
||||
// Enabled zoom when touch overflow is enabled. Can cause usability issues, unfortunately
|
||||
$.mobile.touchOverflowZoomEnabled = false;
|
||||
|
||||
$( document ).bind( "pagecreate", function( event ) {
|
||||
if( $.support.touchOverflow && $.mobile.touchOverflowEnabled ){
|
||||
|
||||
var $target = $( event.target ),
|
||||
scrollStartY = 0;
|
||||
|
||||
if( $target.is( ":jqmData(role='page')" ) ){
|
||||
|
||||
$target.each(function() {
|
||||
var $page = $( this ),
|
||||
$fixies = $page.find( ":jqmData(role='header'), :jqmData(role='footer')" ).filter( ":jqmData(position='fixed')" ),
|
||||
fullScreen = $page.jqmData( "fullscreen" ),
|
||||
$scrollElem = $fixies.length ? $page.find( ".ui-content" ) : $page;
|
||||
|
||||
$page.addClass( "ui-mobile-touch-overflow" );
|
||||
|
||||
$scrollElem.bind( "scrollstop", function(){
|
||||
if( $scrollElem.scrollTop() > 0 ){
|
||||
window.scrollTo( 0, $.mobile.defaultHomeScroll );
|
||||
}
|
||||
});
|
||||
|
||||
if( $fixies.length ){
|
||||
|
||||
$page.addClass( "ui-native-fixed" );
|
||||
|
||||
if( fullScreen ){
|
||||
|
||||
$page.addClass( "ui-native-fullscreen" );
|
||||
|
||||
$fixies.addClass( "fade in" );
|
||||
|
||||
$( document ).bind( "vclick", function(){
|
||||
$fixies
|
||||
.removeClass( "ui-native-bars-hidden" )
|
||||
.toggleClass( "in out" )
|
||||
.animationComplete(function(){
|
||||
$(this).not( ".in" ).addClass( "ui-native-bars-hidden" );
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
})( jQuery );
|
||||
//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
|
||||
});
|
||||
//>>excludeEnd("jqmBuildExclude");
|
||||
Loading…
Reference in a new issue