diff --git a/src/splitviewnavigator/splitviewnavigator.css b/src/splitviewnavigator/splitviewnavigator.css index 8d9d478..7132dff 100644 --- a/src/splitviewnavigator/splitviewnavigator.css +++ b/src/splitviewnavigator/splitviewnavigator.css @@ -10,28 +10,6 @@ NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVE ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. */ -* { --webkit-touch-callout: none; --webkit-user-select: none; -} - -input, -textarea { - -webkit-touch-callout: auto; - -webkit-user-select: auto; -} - -body { - position:absolute; - top:0px; - bottom:0px; - left:0px; - right:0px; - overflow: hidden; - padding: 0px; - margin: 0px; - background-color:#555; -} .splitViewNavigator_root { position:absolute; diff --git a/src/viewnavigator/viewnavigator.css b/src/viewnavigator/viewnavigator.css index 4b8ef92..f688bc9 100644 --- a/src/viewnavigator/viewnavigator.css +++ b/src/viewnavigator/viewnavigator.css @@ -10,7 +10,6 @@ NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVE ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. */ - * { -webkit-touch-callout: none; -webkit-user-select: none; @@ -35,19 +34,15 @@ body { } .viewNavigator_root { - position:absolute; - top:0px; - bottom:0px; - left:0px; - right:0px; + width:100%; + height:100%; background-color:666666; + overflow:hidden; } .viewNavigator_header { position:absolute; - top:0px; - left:0px; - right:0px; + width:100%; height:46px; overflow:hide; padding:0px; @@ -60,6 +55,7 @@ body { background: -ms-linear-gradient(top, rgba(167,207,223,1) 0%,rgba(35,83,138,1) 100%); /* IE10+ */ background: linear-gradient(top, rgba(167,207,223,1) 0%,rgba(35,83,138,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a7cfdf', endColorstr='#23538a',GradientType=0 ); /* IE6-9 */ + } .viewNavigator_header_backlink { @@ -97,9 +93,12 @@ body { .viewNavigator_headerContent { + backface-visibility: hidden; -webkit-backface-visibility: hidden; + transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); + position:absolute; } @@ -110,15 +109,28 @@ body { right:0px; bottom:0px; overflow:hidden; + + backface-visibility: hidden; -webkit-backface-visibility: hidden; - transform: translate3d(0,0,0); - -webkit-transform: translate3d(0,0,0); + -webkit-transform:translate3d(0,0,0); } + +/* ANDROID BUG WORKAROUND */ +.viewNavigator_content select { + overflow:auto; + position:relative; + backface-visibility: auto; + -webkit-backface-visibility: auto; +} + +/* .viewNavigator_content div { - -webkit-transform: translate3d(0,0,0); -} + backface-visibility: visible; + -webkit-backface-visibility: visible; + -webkit-transform: translate3d(0,0,0); +}*/ .viewNavigator_contentHolder { position:absolute; @@ -134,10 +146,16 @@ body { -webkit-overflow-scrolling : touch; min-width:100%; min-height:100% + + backface-visibility: hidden; + -webkit-backface-visibility: hidden; + } .viewNavigator_backface { +/* backface-visibility: hidden; -webkit-backface-visibility: hidden; +*/ } .viewNavigator_backButtonPosition { diff --git a/src/viewnavigator/viewnavigator.js b/src/viewnavigator/viewnavigator.js index fe09548..4bd4046 100644 --- a/src/viewnavigator/viewnavigator.js +++ b/src/viewnavigator/viewnavigator.js @@ -16,7 +16,7 @@ var ViewNavigator = function( target, backLinkCSS, bindToWindow ) { this.supportsBackKey = true; //phonegap on android only this.animating = false; this.animationX = 150; - this.animationDuration = 350; + this.animationDuration = 400; this.history = []; this.scroller = null; this.headerPadding = 5; @@ -104,6 +104,10 @@ ViewNavigator.prototype.setHeaderPadding = function( amount ) { ViewNavigator.prototype.updateView = function( viewDescriptor ) { this.animating = true; + + + + this.contentPendingRemove = this.contentViewHolder; this.headerContentPendingRemove = this.headerContent; @@ -126,9 +130,41 @@ ViewNavigator.prototype.updateView = function( viewDescriptor ) { this.contentViewHolder.append( viewDescriptor.view ); this.resizeContent(); + if ( this.contentPendingRemove ){ + this.contentPendingRemove.stop() + } + if ( this.headerContentPendingRemove ) { + this.headerContentPendingRemove.stop() + } + this.headerContent.stop() + this.contentViewHolder.stop() + + + + if ( this.scroller != null ) { + var scrollY = this.scroller.y; + this.scroller.destroy(); + this.scroller = null; + + if (this.contentPendingRemove) { + console.log( scrollY ); + + //use this to mantain scroll position when scroller is destroyed + var children = $( this.contentPendingRemove.children()[0] ); + children.attr( "scrollY", scrollY ); + var originalTopMargin = children.css( "margin-top" ); + children.attr( "originalTopMargin", originalTopMargin ); + + var cssString = "translate3d(0px, "+(parseInt( scrollY ) + parseInt( originalTopMargin )).toString()+"px, 0px)"; + children.css( "-webkit-transform", cssString ); + + // children.css( "margin-top", (parseInt( scrollY ) + parseInt( originalTopMargin )).toString() + "px" ); + } + } $(this.contentPendingRemove).click(function(){ return false; }); + if ( viewDescriptor.animation == "popEffect" ) { this.contentViewHolder.css( "left", -this.contentViewHolder.width() ); @@ -142,18 +178,16 @@ ViewNavigator.prototype.updateView = function( viewDescriptor ) { this.contentPendingRemove.animate({ left:this.contentViewHolder.width(), - opacity:1, avoidTransforms:false, useTranslate3d: true - }, this.animationDuration, this.animationCompleteHandler(this.contentPendingRemove, this.headerContentPendingRemove, this.headerContent, this.contentViewHolder )); + }, this.animationDuration*0.8); //remove this to change back this.contentViewHolder.animate({ left:0, - opacity:1, avoidTransforms:false, useTranslate3d: true - }, this.animationDuration); + }, this.animationDuration/2); this.headerContentPendingRemove.animate({ left:this.animationX, @@ -167,7 +201,12 @@ ViewNavigator.prototype.updateView = function( viewDescriptor ) { opacity:1, avoidTransforms:false, useTranslate3d: true - }, this.animationDuration ); + }, this.animationDuration/2 ); + + + //using a timeout to get around inconsistent response times for webkittransitionend event + var func = this.animationCompleteHandler(this.contentPendingRemove, this.headerContentPendingRemove, this.headerContent, this.contentViewHolder ); + setTimeout( func, this.animationDuration+90 ); } else if ( this.history.length > 1 ) { @@ -182,14 +221,12 @@ ViewNavigator.prototype.updateView = function( viewDescriptor ) { this.contentViewHolder.animate({ left:0, - opacity:1, avoidTransforms:false, useTranslate3d: true - }, this.animationDuration, this.animationCompleteHandler(this.contentPendingRemove, this.headerContentPendingRemove, this.headerContent, this.contentViewHolder )); + }, this.animationDuration*0.75); this.contentPendingRemove.animate({ - left:-this.contentViewHolder.width(), - opacity:1, + left:-this.contentViewHolder.width()/2, avoidTransforms:false, useTranslate3d: true }, this.animationDuration); @@ -199,7 +236,7 @@ ViewNavigator.prototype.updateView = function( viewDescriptor ) { opacity:1, avoidTransforms:false, useTranslate3d: true - }, this.animationDuration ); + }, this.animationDuration*0.75); this.headerContentPendingRemove.animate({ left:-this.animationX, @@ -207,6 +244,10 @@ ViewNavigator.prototype.updateView = function( viewDescriptor ) { avoidTransforms:false, useTranslate3d: true }, this.animationDuration ); + + //using a timeout to get around inconsistent response times for webkittransitionend event + var func = this.animationCompleteHandler(this.contentPendingRemove, this.headerContentPendingRemove, this.headerContent, this.contentViewHolder ); + setTimeout( func, this.animationDuration+90 ); } else { this.contentViewHolder.css( "left", 0 ); @@ -238,7 +279,23 @@ ViewNavigator.prototype.resetScroller = function() { } if ( id && !(currentViewDescriptor && currentViewDescriptor.scroll === false)) { var self = this; - setTimeout( function() { self.scroller = new iScroll( id ); }, 10 ); + setTimeout( function() { + + //use this to mantain scroll position when scroller is destroyed + var targetDiv = $( $("#"+id ).children()[0] ); + var scrollY= targetDiv.attr( "scrollY" ); + var originalTopMargin = targetDiv.attr( "originalTopMargin" ); + if ( scrollY != undefined && scrollY != "" ){ + console.log( "resetScroller scrollY: " + scrollY) + // targetDiv.css( "margin-top", originalTopMargin ); + var cssString = "translate3d(0px, "+(originalTopMargin).toString()+"px, 0px)"; + targetDiv.css( "-webkit-transform", cssString ); + } + self.scroller = new iScroll( id ); + if ( scrollY != undefined && scrollY != "" ) { + self.scroller.scrollTo( 0, parseInt( scrollY ) ); + } + }, 10 ); //this.scroller = new iScroll( id ); } }