Permalink
Browse files

Navigation: Separate pagecontainer and transitions

Fixes gh-6929
Fixes gh-4022
Fixes gh-7158
Closes gh-7930
  • Loading branch information...
gabrielschulhof committed Jan 18, 2015
1 parent d27501f commit c47b523e6fe63e6db739e89b641581e82647a505
View
@@ -73,6 +73,25 @@ define( [
// Place to store various widget extensions
behaviors: {},
// Custom logic for giving focus to a page
focusPage: function( page ) {
// First, look for an element explicitly marked for page focus
var focusElement = page.find( "[autofocus]" );
// If we do not find an element with the "autofocus" attribute, look for the page title
if ( !focusElement.length ) {
focusElement = page.find( ".ui-title" ).eq( 0 );
}
// Finally, fall back to focusing the page itself
if ( !focusElement.length ) {
focusElement = page;
}
focusElement.focus();
},
// Scroll page vertically: scroll to 0 to hide iOS address bar, or pass a Y value
silentScroll: function( ypos ) {
if ( $.type( ypos ) !== "number" ) {
View
@@ -33,6 +33,7 @@
'navigation/navigator.js',
'navigation/method.js',
'widgets/pagecontainer.js',
'widgets/pagecontainer.transitions.js',
'navigation.js',
'transitions/transition.js',
'transitions/serial.js',
View
@@ -54,7 +54,8 @@ define([
"./widgets/filterable.backcompat",
"./widgets/tabs",
"./zoom",
"./zoom/iosorientationfix"
"./zoom/iosorientationfix",
"./widgets/pagecontainer.transitions"
], function( require ) {
require( [ "./init" ], function() {} );
});
View
@@ -98,23 +98,6 @@ define( [
}
};
// Direct focus to the page title, or otherwise first focusable element
$.mobile.focusPage = function ( page ) {
var autofocus = page.find( "[autofocus]" ),
pageTitle = page.find( ".ui-title:eq(0)" );
if ( autofocus.length ) {
autofocus.focus();
return;
}
if ( pageTitle.length ) {
pageTitle.focus();
} else{
page.focus();
}
};
// No-op implementation of transition degradation
$.mobile._maybeDegradeTransition = $.mobile._maybeDegradeTransition || function( transition ) {
return transition;
@@ -11,10 +11,7 @@ define( [
// TODO event.special.scrollstart
"../events/scroll",
"../animationComplete",
// TODO $.mobile.focusPage reference
"../navigation" ], function( jQuery ) {
"../animationComplete" ], function( jQuery ) {
//>>excludeEnd("jqmBuildExclude");
(function( $, window, undefined ) {
@@ -139,7 +136,7 @@ define( [
$.mobile.pageContainer.toggleClass( "ui-mobile-viewport-transitioning viewport-" + this.name );
},
transition: function() {
transition: function( toScroll ) {
// NOTE many of these could be calculated/recorded in the constructor, it's my
// opinion that binding them as late as possible has value with regards to
// better transitions with fewer bugs. Ie, it's not guaranteed that the
@@ -151,7 +148,7 @@ define( [
maxTransitionOverride = $.mobile.maxTransitionWidth !== false &&
$.mobile.window.width() > $.mobile.maxTransitionWidth;
this.toScroll = $.mobile.navigate.history.getActive().lastScroll || $.mobile.defaultHomeScroll;
this.toScroll = ( toScroll ? toScroll : 0 );
none = !$.support.cssTransitions || !$.support.cssAnimations ||
maxTransitionOverride || !this.name || this.name === "none" ||
@@ -1,5 +1,5 @@
//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
//>>description: Widget to create page container which manages pages and transitions
//>>description: Widget to create page container which manages pages
//>>label: Content Management
//>>group: Navigation
define( [
@@ -13,8 +13,7 @@ define( [
"../navigation/method",
"../events/scroll",
"../support",
"../widgets/page",
"../transitions/handlers" ], function( jQuery ) {
"../widgets/page" ], function( jQuery ) {
//>>excludeEnd("jqmBuildExclude");
(function( $, undefined ) {
@@ -741,15 +740,6 @@ define( [
}, this);
},
_getTransitionHandler: function( transition ) {
transition = $.mobile._maybeDegradeTransition( transition );
//find the transition handler for the specified transition. If there
//isn't one in our transitionHandlers dictionary, use the default one.
//call the handler immediately to kick-off the transition.
return $.mobile.transitionHandlers[ transition ] || $.mobile.defaultTransitionHandler;
},
// TODO move into transition handlers?
_triggerCssTransitionEvents: function( to, from, prefix ) {
var samePage = false;
@@ -783,22 +773,35 @@ define( [
}, to );
},
_performTransition: function( transition, reverse, to, from ) {
var transitionDeferred = $.Deferred();
if ( from ) {
from.removeClass( "ui-page-active" );
}
if ( to ) {
to.addClass( "ui-page-active" );
}
this._delay( function() {
transitionDeferred.resolve( transition, reverse, to, from, false );
}, 0 );
return transitionDeferred.promise();
},
// TODO make private once change has been defined in the widget
_cssTransition: function( to, from, options ) {
var transition = options.transition,
reverse = options.reverse,
deferred = options.deferred,
TransitionHandler,
promise;
this._triggerCssTransitionEvents( to, from, "before" );
// TODO put this in a binding to events *outside* the widget
this._hideLoading();
TransitionHandler = this._getTransitionHandler( transition );
promise = ( new TransitionHandler( transition, reverse, to, from ) ).transition();
promise = this._performTransition( transition, reverse, to, from );
promise.done( $.proxy( function() {
this._triggerCssTransitionEvents( to, from );
@@ -0,0 +1,36 @@
//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
//>>description: Extension that adds transition management support to pagecontainer widget
//>>label: Transitions Support for Pagecontainer
//>>group: Navigation
define( [
"jquery",
"./pagecontainer",
// For $.mobile.navigate.history
"../navigation/method",
"../transitions/handlers" ], function( jQuery ) {
//>>excludeEnd("jqmBuildExclude");
(function( $, undefined ) {
$.widget( "mobile.pagecontainer", $.mobile.pagecontainer, {
_getTransitionHandler: function( transition ) {
transition = $.mobile._maybeDegradeTransition( transition );
//find the transition handler for the specified transition. If there
//isn't one in our transitionHandlers dictionary, use the default one.
//call the handler immediately to kick off the transition.
return $.mobile.transitionHandlers[ transition ] || $.mobile.defaultTransitionHandler;
},
_performTransition: function( transition, reverse, to, from ) {
var TransitionHandler = this._getTransitionHandler( transition );
return ( new TransitionHandler( transition, reverse, to, from ) ).transition(
$.mobile.navigate.history.getActive().lastScroll || $.mobile.defaultHomeScroll );
}
});
})( jQuery );
//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
});
//>>excludeEnd("jqmBuildExclude");
@@ -16,7 +16,8 @@
[
"widgets/forms/select",
"widgets/forms/select.custom",
"../../integration/select/defineKeepNative.js"
"../../integration/select/defineKeepNative.js",
"widgets/pagecontainer.transitions",
],
[ "init" ],
[
@@ -0,0 +1,12 @@
<!doctype html>
<html lang="en">
<head>
<script src="../../../external/jquery/jquery.js"></script>
<script src="../../jquery.testHelper.js"></script>
<script>
$.testHelper.redirect( "./no-autoinit-page-tests.html", [ "transitions=true" ] );
</script>
</head>
<body>
</body>
</html>
@@ -1,6 +1,8 @@
asyncTest( "resetActivePageHeight() will be called when page is initialized late", function() {
var resetActivePageHeightCallCount = 0;
expect( 1 );
$( document ).on( "mobileinit", function() {
$.mobile.autoInitializePage = false;
@@ -12,14 +14,22 @@ asyncTest( "resetActivePageHeight() will be called when page is initialized late
})( $.mobile.resetActivePageHeight );
});
require([ "jquery", "./init" ], function() {
setTimeout( function() {
$.mobile.initializePage();
deepEqual( resetActivePageHeightCallCount, 1,
"$.mobile.resetActivePageHeight() was called from delayed initializePage()" );
start();
}, 5000 );
require([ "jquery", "./init" ]
.concat( ( window.location.search.indexOf( "transitions" ) > -1 ) ?
[ "./widgets/pagecontainer.transitions" ] : [] ), function() {
$.testHelper.detailedEventCascade([
function() {
$.mobile.initializePage();
},
{
pagecontainershow: { src: $( "body" ), event: "pagecontainershow.noAutoinit1" }
},
function() {
deepEqual( resetActivePageHeightCallCount, 1,
"$.mobile.resetActivePageHeight() was called from delayed initializePage()" );
start();
}
]);
});
});

0 comments on commit c47b523

Please sign in to comment.