" )
+ .appendTo( $body )
+ .load( url + " .ui-page", function() {
+ // TODO: test this (avoids querying the dom for new element):
+// var newPage = $( this ).find( ".ui-page" ).eq( 0 )
+// .attr( "id", url );
+// $( this ).replaceWith( newPage );
+// setPageRole( newPage );
+// mobilize( newPage );
+// changePage( $( ".ui-page-active" ), newPage, transition, back );
+ $( this ).replaceWith(
+ $( this ).find( ".ui-page" ).eq( 0 ).attr( "id", url ) );
+ var newPage = $( "[id='" + url + "']" );
+ setPageRole( newPage );
+ mobilize( newPage );
+ changePage( $( ".ui-page-active" ), newPage, transition, back );
+ });
+ }
+ } else {
+ // either we've backed up to the root page url
+ // or it's the first page load with no hash present
+ var currentPage = $( ".ui-page-active" );
+ if ( currentPage.length && !startPage.is( ".ui-page-active" ) ) {
+ changePage( currentPage, startPage, transition, back );
+ } else {
+ $.fixedToolbars.show();
+ startPage.addClass( activePageClass );
+ pageLoading( true );
+ }
+ }
+ });
+
+ hideBrowserChrome();
+ });
+
+
+
//add orientation class on flip/resize.
@@ -51,77 +194,6 @@
//insert mobile meta (any other metas needed? webapp? iPhone icon? etc)
$head.append('
');
- //send a link through hash tracking
- $.fn.ajaxClick = function(){
- var href = $(this).attr( "href" ),
- transitionAttr = $(this).attr('data-transition');
-
- nextPageRole = $(this).attr('data-rel');
-
- if(transitionAttr){
- currentTransition = transitionAttr;
- transitionSpecified = true;
- }
- else{
- transitionSpecified = false;
- }
-
- location.hash = href;
-
- //note: if it's a non-local-anchor and Ajax is not supported, go to page
- if(href.match(/^[^#]/) && !$.support.ajax){
- window.location = href;
- }
- else {
- return false;
- }
- };
-
- //ajaxify all navigable links
- $('a:not([href="#"])').live('click',function(e){
- if ($(this).is('[target=_blank]') || $(this).is('[rel=external]')){ return true; }
- $(this).ajaxClick();
- return false;
- });
-
- //turn on/off page loading message.. also hides the ui-content div
- function pageLoading(done){
- if(done){
- //remove loading msg
- $html.removeClass('ui-loading');
- //fade in page content, remove loading msg
- $('.ui-page-active .ui-content')//.addClass('dissolve in');
- }
- else{
- $html.addClass('ui-loading');
- $loader.appendTo($body).addClass('dissolve in');
- }
- };
-
- //transition between pages - based on transitions from jQtouch
- function changePage(from,to,back){
- hideBrowserChrome();
- if(!back && !transitionSpecified){ currentTransition = 'slide'; }
-
- //kill keyboard (thx jQtouch :) )
- $(document.activeElement).blur();
-
- //animate in / out
- from.addClass(currentTransition + ' out ' + (back ? 'reverse':''));
- to.appendTo('body').addClass(activePageClass + ' ' + currentTransition + ' in ' + (back ? 'reverse':''));
-
- //callback - remove classes, etc
- to.animationComplete(function(){
- from.add(to).removeClass(' out in reverse '+ transitions);
- from.removeClass(activePageClass);
- pageLoading(true);
- $.fixedToolbars.show();
- });
- if(back){
- currentTransition = 'slide';
- }
- };
-
//potential (probably incomplete) fallback to workaround lack of animation callbacks.
//should this be extended into a full special event?
// note: Expects CSS animations use transitionDuration (350ms)
@@ -135,7 +207,7 @@
};
-
+
//markup-driven enhancements, to be called on any ui-page upon loading
function mobilize($el){
//to-do: make sure this only runs one time on a page (or maybe per component)
@@ -182,74 +254,6 @@
//dom-ready
$(function(){
- //set the page loader up
- pageLoading();
-
- //define body
- $body = $('body');
-
- //hashchange for page state tracking - needs to be bound at domready (for IE6)
- //When document.location.hash changes, find or load content, make it active
- $window.bind( "hashchange", function(e){
- var url = location.hash.replace(/^#/,''),
- back = (url === urlStack[urlStack.length-2]);
-
- //if the new href is the same as the previous one
- if(back){
- urlStack.pop();
- }
- else {
- urlStack.push(url);
- }
-
- //remove any pages that shouldn't cache
- $(noCache).remove();
-
- //function for setting role of next page
- function setPageRole(newPage){
- if(nextPageRole){
- newPage.attr('data-role', nextPageRole);
- nextPageRole = null;
- }
- }
-
- if(url){
- //see if content is present already
- var localDiv = $('[id="'+url+'"]');
- if(localDiv.length){
- if(localDiv.is('[data-role]')){ setPageRole(localDiv); }
- changePage($('.ui-page-active'), localDiv, back);
- }
- else { //ajax it in
- pageLoading();
- var newPage = $('
')
- .appendTo($body)
- .load(url + ' .ui-page',function(){
- $(this).replaceWith( $(this).find('.ui-page:eq(0)').attr('id', url) );
- var newPage = $('[id="'+url+'"]');
- setPageRole(newPage);
- mobilize(newPage);
- changePage($('.ui-page-active'), newPage, back);
-
- });
- }
- }
- else{
- //either we've backed up to the root page url, or it's the first page load with no hash present
- var currentPage = $('.ui-page-active');
- if( currentPage.length && !startPage.is('.ui-page-active')){
- changePage(currentPage, startPage, back);
- }
- else{
- $.fixedToolbars.show();
- startPage.addClass(activePageClass);
- pageLoading(true);
- }
- }
- });
-
- hideBrowserChrome();
-
//global nav
$('.ui-globalnav').globalnav();