ui5_ext_slideup_transition.js

/* CSS classes required
.sapMNavItem.bouvetMNavItemBottom {
	-webkit-transition-property: -webkit-transform;
	-webkit-transform: translate3d(0px, 100%, 0px);
	
	transform: translate3d(0px, 100%, 0px);
	transition-property: transform;
}
.sapMNavItem.bouvetMNavItemTop {
	-webkit-transition-property: -webkit-transform;
	-webkit-transform: translate3d(0px, -100%, 0px);
	transition-property: transform;
	transform: translate3d(0px, -100%, 0px);
}

.sapMNavItem.bouvetMNavItemSlidingVertical {
	-webkit-transition-duration: 0.6s;
	transition-duration: 0.6s;
}
*/

var customTransitions = {};
customTransitions["slideUp"] = {
	//Code based on ui5 slide transition https://github.com/SAP/openui5/blob/master/src/sap.m/src/sap/m/NavContainer.js#L954
	to: function(oFromPage, oToPage, fCallback /*, oTransitionParameters is unused */) {
		oFromPage.addStyleClass("sapMNavItemCenter");
		window.setTimeout(function(){ // iPhone seems to need a zero timeout here, otherwise the to page is black (and may suddenly become visible when the DOM is touched)
			debugger;
			// set the style classes that represent the initial state
			oToPage.addStyleClass("bouvetMNavItemBottom");     // the page to navigate to should be placed just below of the visible area
			oToPage.removeStyleClass("sapMNavItemHidden"); // remove the "hidden" class now which has been added by the NavContainer before the animation was called


			// iPhone needs some time... there is no animation without waiting
			window.setTimeout(function(){

				var bOneTransitionFinished = false;
				var bTransitionEndPending = true;
				var fAfterTransition = null; // make Eclipse aware that this variable is defined
				fAfterTransition = function() {
					jQuery(this).unbind("webkitTransitionEnd transitionend");
					if (!bOneTransitionFinished) {
						// the first one of both transitions finished
						bOneTransitionFinished = true;
					} else {
						// the second transition now also finished => clean up the style classes
						bTransitionEndPending = false;
						oToPage.removeStyleClass("bouvetMNavItemSlidingVertical").removeStyleClass("sapMNavItemCenter");
						oFromPage.removeStyleClass("bouvetMNavItemSlidingVertical").addStyleClass("sapMNavItemHidden").removeStyleClass("bouvetMNavItemTop");

						// notify the NavContainer that the animation is complete
						fCallback();
					}
				};

				oFromPage.$().bind("webkitTransitionEnd transitionend", fAfterTransition);
				oToPage.$().bind("webkitTransitionEnd transitionend", fAfterTransition);

				// set the new style classes that represent the end state (and thus start the transition)
				oToPage.addStyleClass("bouvetMNavItemSlidingVertical").addStyleClass("sapMNavItemCenter").removeStyleClass("bouvetMNavItemBottom");
				oFromPage.addStyleClass("bouvetMNavItemSlidingVertical").removeStyleClass("sapMNavItemCenter").addStyleClass("bouvetMNavItemTop");

				window.setTimeout(function(){ // in case rerendering prevented the fAfterTransition call
					if (bTransitionEndPending) {
						bOneTransitionFinished = true;
						fAfterTransition.apply(oFromPage.$().add(oToPage.$()));
					}
				}, 700);

			}, 150); // this value has been found by testing on actual devices; with "10" there are frequent "no-animation" issues, with "100" there are none, with "50" there are very few

		},0); // iPhone seems to need a zero timeout here, otherwise the to page is black (and may suddenly become visible when the DOM is touched)
	},

	back: function(oFromPage, oToPage, fCallback /*, oTransitionParameters is unused */) {
		// set the style classes that represent the initial state
		oToPage.addStyleClass("bouvetMNavItemTop");     // the page to navigate back to should be placed just top of the visible area
		oToPage.removeStyleClass("sapMNavItemHidden"); // remove the "hidden" class now which has been added by the NavContainer before the animation was called
		oFromPage.addStyleClass("sapMNavItemCenter");

		// iPhone needs some time... there is no animation without waiting
		window.setTimeout(function() {
			debugger;

			var bOneTransitionFinished = false;
			var bTransitionEndPending = true;
			var fAfterTransition = null; // make Eclipse aware that this variable is defined
			fAfterTransition = function() {
				jQuery(this).unbind("webkitTransitionEnd transitionend");
				if (!bOneTransitionFinished) {
					// the first one of both transitions finished
					bOneTransitionFinished = true;
				} else {
					// the second transition now also finished => clean up the style classes
					bTransitionEndPending = false;
					oToPage.removeStyleClass("bouvetMNavItemSlidingVertical").removeStyleClass("sapMNavItemCenter");
					oFromPage.removeStyleClass("bouvetMNavItemSlidingVertical").addStyleClass("sapMNavItemHidden").removeStyleClass("bouvetMNavItemBottom");

					// notify the NavContainer that the animation is complete
					fCallback();
				}
			};

			oFromPage.$().bind("webkitTransitionEnd transitionend", fAfterTransition);
			oToPage.$().bind("webkitTransitionEnd transitionend", fAfterTransition);

			// workaround for bug in current webkit versions: in slided-in elements the z-order may be wrong and will be corrected once a re-layout is enforced
			// see http://code.google.com/p/chromium/issues/detail?id=246965  - still an issue in iOS 6.1.3 as of 03/2015
			if (sap.ui.Device.browser.webkit) {
				window.setTimeout(function(){
					oToPage.$().css("box-shadow", "0em 1px 0em rgba(128, 128, 1280, 0.1)"); // add box-shadow
					window.setTimeout(function(){
						oToPage.$().css("box-shadow", ""); // remove it again
					},50);
				},0);
			}

			// set the new style classes that represent the end state (and thus start the transition)
			oToPage.addStyleClass("bouvetMNavItemSlidingVertical").addStyleClass("sapMNavItemCenter").removeStyleClass("bouvetMNavItemTop"); // transition from left position to normal/center position starts now
			oFromPage.addStyleClass("bouvetMNavItemSlidingVertical").removeStyleClass("sapMNavItemCenter").addStyleClass("bouvetMNavItemBottom"); // transition from normal position to right position starts now

			window.setTimeout(function(){ // in case rerendering prevented the fAfterTransition call
				if (bTransitionEndPending) {
					bOneTransitionFinished = true;
					fAfterTransition.apply(oFromPage.$().add(oToPage.$()));
				}
			}, 700);

		}, 100); // this value has been found by testing on actual devices; with "10" there are frequent "no-animation" issues, with "100" there are none, with "50" there are very few
	}
};

customTransitions["slideDown"] = {
	//Code based on ui5 slide transition https://github.com/SAP/openui5/blob/master/src/sap.m/src/sap/m/NavContainer.js#L954
	to: function(oFromPage, oToPage, fCallback /*, oTransitionParameters is unused */) {
		oFromPage.addStyleClass("sapMNavItemCenter");
		window.setTimeout(function(){ // iPhone seems to need a zero timeout here, otherwise the to page is black (and may suddenly become visible when the DOM is touched)
			debugger;
			// set the style classes that represent the initial state
			oToPage.addStyleClass("bouvetMNavItemTop");     // the page to navigate to should be placed just below of the visible area
			oToPage.removeStyleClass("sapMNavItemHidden"); // remove the "hidden" class now which has been added by the NavContainer before the animation was called


			// iPhone needs some time... there is no animation without waiting
			window.setTimeout(function(){

				var bOneTransitionFinished = false;
				var bTransitionEndPending = true;
				var fAfterTransition = null; // make Eclipse aware that this variable is defined
				fAfterTransition = function() {
					jQuery(this).unbind("webkitTransitionEnd transitionend");
					if (!bOneTransitionFinished) {
						// the first one of both transitions finished
						bOneTransitionFinished = true;
					} else {
						// the second transition now also finished => clean up the style classes
						bTransitionEndPending = false;
						oToPage.removeStyleClass("bouvetMNavItemSlidingVertical").removeStyleClass("sapMNavItemCenter");
						oFromPage.removeStyleClass("bouvetMNavItemSlidingVertical").addStyleClass("sapMNavItemHidden").removeStyleClass("bouvetMNavItemBottom");

						// notify the NavContainer that the animation is complete
						fCallback();
					}
				};

				oFromPage.$().bind("webkitTransitionEnd transitionend", fAfterTransition);
				oToPage.$().bind("webkitTransitionEnd transitionend", fAfterTransition);

				// set the new style classes that represent the end state (and thus start the transition)
				oToPage.addStyleClass("bouvetMNavItemSlidingVertical").addStyleClass("sapMNavItemCenter").removeStyleClass("bouvetMNavItemTop");
				oFromPage.addStyleClass("bouvetMNavItemSlidingVertical").removeStyleClass("sapMNavItemCenter").addStyleClass("bouvetMNavItemBottom");

				window.setTimeout(function(){ // in case rerendering prevented the fAfterTransition call
					if (bTransitionEndPending) {
						bOneTransitionFinished = true;
						fAfterTransition.apply(oFromPage.$().add(oToPage.$()));
					}
				}, 700);

			}, 150); // this value has been found by testing on actual devices; with "10" there are frequent "no-animation" issues, with "100" there are none, with "50" there are very few

		},0); // iPhone seems to need a zero timeout here, otherwise the to page is black (and may suddenly become visible when the DOM is touched)
	},

	back: function(oFromPage, oToPage, fCallback /*, oTransitionParameters is unused */) {
		// set the style classes that represent the initial state
		oToPage.addStyleClass("bouvetMNavItemBottom");     // the page to navigate back to should be placed just top of the visible area
		oToPage.removeStyleClass("sapMNavItemHidden"); // remove the "hidden" class now which has been added by the NavContainer before the animation was called
		oFromPage.addStyleClass("sapMNavItemCenter");

		// iPhone needs some time... there is no animation without waiting
		window.setTimeout(function() {
			debugger;

			var bOneTransitionFinished = false;
			var bTransitionEndPending = true;
			var fAfterTransition = null; // make Eclipse aware that this variable is defined
			fAfterTransition = function() {
				jQuery(this).unbind("webkitTransitionEnd transitionend");
				if (!bOneTransitionFinished) {
					// the first one of both transitions finished
					bOneTransitionFinished = true;
				} else {
					// the second transition now also finished => clean up the style classes
					bTransitionEndPending = false;
					oToPage.removeStyleClass("bouvetMNavItemSlidingVertical").removeStyleClass("sapMNavItemCenter");
					oFromPage.removeStyleClass("bouvetMNavItemSlidingVertical").addStyleClass("sapMNavItemHidden").removeStyleClass("bouvetMNavItemTop");

					// notify the NavContainer that the animation is complete
					fCallback();
				}
			};

			oFromPage.$().bind("webkitTransitionEnd transitionend", fAfterTransition);
			oToPage.$().bind("webkitTransitionEnd transitionend", fAfterTransition);

			// workaround for bug in current webkit versions: in slided-in elements the z-order may be wrong and will be corrected once a re-layout is enforced
			// see http://code.google.com/p/chromium/issues/detail?id=246965  - still an issue in iOS 6.1.3 as of 03/2015
			if (sap.ui.Device.browser.webkit) {
				window.setTimeout(function(){
					oToPage.$().css("box-shadow", "0em 1px 0em rgba(128, 128, 1280, 0.1)"); // add box-shadow
					window.setTimeout(function(){
						oToPage.$().css("box-shadow", ""); // remove it again
					},50);
				},0);
			}

			// set the new style classes that represent the end state (and thus start the transition)
			oToPage.addStyleClass("bouvetMNavItemSlidingVertical").addStyleClass("sapMNavItemCenter").removeStyleClass("bouvetMNavItemBottom"); // transition from left position to normal/center position starts now
			oFromPage.addStyleClass("bouvetMNavItemSlidingVertical").removeStyleClass("sapMNavItemCenter").addStyleClass("bouvetMNavItemTop"); // transition from normal position to right position starts now

			window.setTimeout(function(){ // in case rerendering prevented the fAfterTransition call
				if (bTransitionEndPending) {
					bOneTransitionFinished = true;
					fAfterTransition.apply(oFromPage.$().add(oToPage.$()));
				}
			}, 700);

		}, 100); // this value has been found by testing on actual devices; with "10" there are frequent "no-animation" issues, with "100" there are none, with "50" there are very few
	}
};


function addBouvetCustomTransitionsToUI5(){
	console.log("Adding Bouvet custom transitions to UI5");

	sap.m.NavContainer.addCustomTransition("slideUp",customTransitions["slideUp"].to, customTransitions["slideUp"].back );
	sap.m.NavContainer.addCustomTransition("slideDown",customTransitions["slideDown"].to, customTransitions["slideDown"].back );	
}