mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-04-19 05:41:00 +00:00
Created a new loader that has a circle baked into the animated gif so there's less of a chance of artifacts in bad browsers. The edge is chunky because it's a gif but then added 1px of padding to the loader parent and that the border-radius can smooth this out in iOS. Actually looks sharp in Android too because of interaction effects between these rounded corners. Loader spin is faster and more compressed (16 colors). Removed the body-a class on the spinner since we're just setting this to flat black = one less gradient to render.
148 lines
5.3 KiB
JavaScript
148 lines
5.3 KiB
JavaScript
//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
|
|
//>>description: Applies classes for grid styling.
|
|
//>>label: CSS Grid Tool
|
|
|
|
define( [ "jquery.mobile.core", "jquery.mobile.navigation", "jquery.mobile.navigation.pushstate" ], function() {
|
|
//>>excludeEnd("jqmBuildExclude");
|
|
( function( $, window, undefined ) {
|
|
var $html = $( "html" ),
|
|
$head = $( "head" ),
|
|
$window = $( window );
|
|
|
|
// trigger mobileinit event - useful hook for configuring $.mobile settings before they're used
|
|
$( window.document ).trigger( "mobileinit" );
|
|
|
|
// support conditions
|
|
// if device support condition(s) aren't met, leave things as they are -> a basic, usable experience,
|
|
// otherwise, proceed with the enhancements
|
|
if ( !$.mobile.gradeA() ) {
|
|
return;
|
|
}
|
|
|
|
// override ajaxEnabled on platforms that have known conflicts with hash history updates
|
|
// or generally work better browsing in regular http for full page refreshes (BB5, Opera Mini)
|
|
if ( $.mobile.ajaxBlacklist ) {
|
|
$.mobile.ajaxEnabled = false;
|
|
}
|
|
|
|
// add mobile, initial load "rendering" classes to docEl
|
|
$html.addClass( "ui-mobile ui-mobile-rendering" );
|
|
|
|
// loading div which appears during Ajax requests
|
|
// will not appear if $.mobile.loadingMessage is false
|
|
var $loader = $( "<div class='ui-loader '><span class='ui-icon ui-icon-loading'></span><h1></h1></div>" );
|
|
|
|
$.extend($.mobile, {
|
|
// turn on/off page loading message.
|
|
showPageLoadingMsg: function() {
|
|
if ( $.mobile.loadingMessage ) {
|
|
var activeBtn = $( "." + $.mobile.activeBtnClass ).first();
|
|
|
|
$loader
|
|
.find( "h1" )
|
|
.text( $.mobile.loadingMessage )
|
|
.end()
|
|
.appendTo( $.mobile.pageContainer )
|
|
// position at y center (if scrollTop supported), above the activeBtn (if defined), or just 100px from top
|
|
.css({
|
|
top: $.support.scrollTop && $window.scrollTop() + $window.height() / 2 ||
|
|
activeBtn.length && activeBtn.offset().top || 100
|
|
});
|
|
}
|
|
|
|
$html.addClass( "ui-loading" );
|
|
},
|
|
|
|
hidePageLoadingMsg: function() {
|
|
$html.removeClass( "ui-loading" );
|
|
},
|
|
|
|
// find and enhance the pages in the dom and transition to the first page.
|
|
initializePage: function() {
|
|
// find present pages
|
|
var $pages = $( ":jqmData(role='page')" );
|
|
|
|
// if no pages are found, create one with body's inner html
|
|
if ( !$pages.length ) {
|
|
$pages = $( "body" ).wrapInner( "<div data-" + $.mobile.ns + "role='page'></div>" ).children( 0 );
|
|
}
|
|
|
|
// add dialogs, set data-url attrs
|
|
$pages.add( ":jqmData(role='dialog')" ).each(function() {
|
|
var $this = $(this);
|
|
|
|
// unless the data url is already set set it to the pathname
|
|
if ( !$this.jqmData("url") ) {
|
|
$this.attr( "data-" + $.mobile.ns + "url", $this.attr( "id" ) || location.pathname + location.search );
|
|
}
|
|
});
|
|
|
|
// define first page in dom case one backs out to the directory root (not always the first page visited, but defined as fallback)
|
|
$.mobile.firstPage = $pages.first();
|
|
|
|
// define page container
|
|
$.mobile.pageContainer = $pages.first().parent().addClass( "ui-mobile-viewport" );
|
|
|
|
// alert listeners that the pagecontainer has been determined for binding
|
|
// to events triggered on it
|
|
$window.trigger( "pagecontainercreate" );
|
|
|
|
// cue page loading message
|
|
$.mobile.showPageLoadingMsg();
|
|
|
|
// if hashchange listening is disabled or there's no hash deeplink, change to the first page in the DOM
|
|
if ( !$.mobile.hashListeningEnabled || !$.mobile.path.stripHash( location.hash ) ) {
|
|
$.mobile.changePage( $.mobile.firstPage, { transition: "none", reverse: true, changeHash: false, fromHashChange: true } );
|
|
}
|
|
// otherwise, trigger a hashchange to load a deeplink
|
|
else {
|
|
$window.trigger( "hashchange", [ true ] );
|
|
}
|
|
}
|
|
});
|
|
|
|
// This function injects a meta viewport tag to prevent scaling. Off by default, on by default when touchOverflow scrolling is enabled
|
|
function disableZoom() {
|
|
var cont = "user-scalable=no",
|
|
meta = $( "meta[name='viewport']" );
|
|
|
|
if( meta.length ){
|
|
meta.attr( "content", meta.attr( "content" ) + ", " + cont );
|
|
}
|
|
else{
|
|
$( "head" ).prepend( "<meta>", { "name": "viewport", "content": cont } );
|
|
}
|
|
}
|
|
|
|
// if touch-overflow is enabled, disable user scaling, as it creates usability issues
|
|
if( $.support.touchOverflow && $.mobile.touchOverflowEnabled && !$.mobile.touchOverflowZoomEnabled ){
|
|
disableZoom();
|
|
}
|
|
|
|
// initialize events now, after mobileinit has occurred
|
|
$.mobile._registerInternalEvents();
|
|
|
|
// check which scrollTop value should be used by scrolling to 1 immediately at domready
|
|
// then check what the scroll top is. Android will report 0... others 1
|
|
// note that this initial scroll won't hide the address bar. It's just for the check.
|
|
$(function() {
|
|
window.scrollTo( 0, 1 );
|
|
|
|
// if defaultHomeScroll hasn't been set yet, see if scrollTop is 1
|
|
// it should be 1 in most browsers, but android treats 1 as 0 (for hiding addr bar)
|
|
// so if it's 1, use 0 from now on
|
|
$.mobile.defaultHomeScroll = ( !$.support.scrollTop || $(window).scrollTop() === 1 ) ? 0 : 1;
|
|
|
|
//dom-ready inits
|
|
if( $.mobile.autoInitializePage ){
|
|
$.mobile.initializePage();
|
|
}
|
|
|
|
// window load event
|
|
// hide iOS browser chrome on load
|
|
$window.load( $.mobile.silentScroll );
|
|
});
|
|
}( jQuery, this ));
|
|
//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
|
|
});
|
|
//>>excludeEnd("jqmBuildExclude");
|