Created
August 19, 2015 10:57
-
-
Save elsewhat/dc05adee41ef8160d3c9 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* 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 ); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment