From 6a767743bd55c152b6d59d336ed29f2618f6cdc3 Mon Sep 17 00:00:00 2001 From: Andre Meyering Date: Wed, 23 Jan 2013 14:49:16 +0100 Subject: [PATCH] changed indent: spaces to tab spaces and tabs were mixed. Changed all spaces to tabs. Also deleted all spaces in empty lines. --- src/slidingview/slidingview.css | 2 +- src/slidingview/slidingview.js | 68 ++-- src/splitviewnavigator/splitviewnavigator.css | 2 +- src/splitviewnavigator/splitviewnavigator.js | 114 +++--- src/viewnavigator/viewnavigator.css | 68 ++-- src/viewnavigator/viewnavigator.js | 338 +++++++++--------- 6 files changed, 295 insertions(+), 297 deletions(-) diff --git a/src/slidingview/slidingview.css b/src/slidingview/slidingview.css index f8f426a..f0afd0a 100644 --- a/src/slidingview/slidingview.css +++ b/src/slidingview/slidingview.css @@ -65,4 +65,4 @@ body { overflow: hidden; padding: 0px; margin: 0px; -} \ No newline at end of file +} diff --git a/src/slidingview/slidingview.js b/src/slidingview/slidingview.js index 343fcdf..df3b9bc 100644 --- a/src/slidingview/slidingview.js +++ b/src/slidingview/slidingview.js @@ -13,24 +13,24 @@ ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false); var SlidingView = function( sidebarId, bodyId ) { - + window.slidingView = this; - + this.gestureStarted = false; this.bodyOffset = 0; - + this.sidebarWidth = 250; - + this.sidebar = $("#"+sidebarId); this.body = $("#"+bodyId); - + this.sidebar.addClass( "slidingview_sidebar" ); this.body.addClass( "slidingview_body" ); - + var self = this; $(window).resize( function(event){ self.resizeContent() } ); $(this.parent).resize( function(event){ self.resizeContent() } ); - + if ( "onorientationchange" in window ) { $(window).bind( "onorientationchange", function(event){ self.resizeContent() } ) } @@ -41,7 +41,7 @@ var SlidingView = function( sidebarId, bodyId ) { SlidingView.prototype.setupEventHandlers = function() { this.touchSupported = ('ontouchstart' in window); - + this.START_EVENT = this.touchSupported ? 'touchstart' : 'mousedown'; this.MOVE_EVENT = this.touchSupported ? 'touchmove' : 'mousemove'; this.END_EVENT = this.touchSupported ? 'touchend' : 'mouseup'; @@ -54,13 +54,13 @@ SlidingView.prototype.setupEventHandlers = function() { SlidingView.prototype.onTouchStart = function(event) { //console.log( event.type ); - + this.gestureStartPosition = this.getTouchCoordinates( event ); - + var self = this; this.touchMoveHandler = function( event ){ self.onTouchMove(event) }; this.touchUpHandler = function( event ){ self.onTouchEnd(event) }; - + this.body.get()[0].addEventListener( this.MOVE_EVENT, this.touchMoveHandler, false ); this.body.get()[0].addEventListener( this.END_EVENT, this.touchUpHandler, false ); this.body.stop(); @@ -68,7 +68,7 @@ SlidingView.prototype.onTouchStart = function(event) { SlidingView.prototype.onTouchMove = function(event) { var currentPosition = this.getTouchCoordinates( event ); - + if ( this.gestureStarted ) { event.preventDefault(); event.stopPropagation(); @@ -79,13 +79,13 @@ SlidingView.prototype.onTouchMove = function(event) { //console.log( Math.abs( currentPosition.x - this.gestureStartPosition.x ) ); //detect the gesture if ( Math.abs( currentPosition.y - this.gestureStartPosition.y ) > 50 ) { - + //dragging veritcally - ignore this gesture this.unbindEvents(); return; } else if ( Math.abs( currentPosition.x - this.gestureStartPosition.x ) > 50 ) { - + //dragging horizontally - let's handle this this.gestureStarted = true; event.preventDefault(); @@ -107,40 +107,40 @@ SlidingView.prototype.onTouchEnd = function(event) { SlidingView.prototype.updateBasedOnTouchPoints = function( currentPosition ) { - + var deltaX = (currentPosition.x - this.gestureStartPosition.x); var targetX = this.bodyOffset + deltaX; - + targetX = Math.max( targetX, 0 ); targetX = Math.min( targetX, this.sidebarWidth ); - + this.bodyOffset = targetX; - + //console.log( targetX ); //this.body.css("left", targetX ); //console.log( this.body.css("left") ); - + if ( this.body.css("left") != "0px" ) { this.body.css("left", "0px" ); } this.body.css("-webkit-transform", "translate3d(" + targetX + "px,0,0)" ); this.body.css("-moz-transform", "translate3d(" + targetX + "px,0,0)" ); this.body.css("transform", "translate3d(" + targetX + "px,0,0)" ); - + //console.log( this.body.css("-moz-transform"), targetX ); - - + + /*if ( currentPosition != targetX ) { - + this.body.stop(true,false).animate({ left:targetX, avoidTransforms:false, useTranslate3d: true }, 100); }*/ - + this.sidebar.trigger( "slidingViewProgress", { current: targetX, max:this.sidebarWidth } ); - + this.gestureStartPosition = currentPosition; } @@ -158,18 +158,18 @@ SlidingView.prototype.snapToPosition = function() { targetX = this.sidebarWidth; } this.bodyOffset = targetX; - + //console.log( currentPosition, halfWidth, targetX ); if ( currentPosition != targetX ) { - + this.body.stop(true, false).animate({ left:targetX, avoidTransforms:false, useTranslate3d: true }, 100); - - this.sidebar.trigger( "slidingViewProgress", { current:targetX, max:this.sidebarWidth } ); + + this.sidebar.trigger( "slidingViewProgress", { current:targetX, max:this.sidebarWidth } ); } } @@ -193,10 +193,10 @@ SlidingView.prototype.getTouchCoordinates = function(event) { SlidingView.prototype.resizeContent = function() { var $window = $(window) - var w = $window.width(); - var h = $window.height(); - - this.body.width( w ); + var w = $window.width(); + var h = $window.height(); + + this.body.width( w ); } - \ No newline at end of file + diff --git a/src/splitviewnavigator/splitviewnavigator.css b/src/splitviewnavigator/splitviewnavigator.css index 7132dff..f7394cf 100644 --- a/src/splitviewnavigator/splitviewnavigator.css +++ b/src/splitviewnavigator/splitviewnavigator.css @@ -80,4 +80,4 @@ ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. bottom:0px; right:0px; left:240px; -} \ No newline at end of file +} diff --git a/src/splitviewnavigator/splitviewnavigator.js b/src/splitviewnavigator/splitviewnavigator.js index e768d05..28cb27d 100644 --- a/src/splitviewnavigator/splitviewnavigator.js +++ b/src/splitviewnavigator/splitviewnavigator.js @@ -12,37 +12,37 @@ ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. var SplitViewNavigator = function( target, toggleButtonLabel, backLinkCSS, bindToWindow ) { - + this.animating = false; this.animationDuration = 350; this.animationPerformed = false; - + this.uniqueId = this.guid(); this.parent = $( target ); - - var regexp = new RegExp("Windows Phone OS 7"); + + var regexp = new RegExp("Windows Phone OS 7"); this.winPhone = (navigator.userAgent.search(regexp) >= 0); - + this.rootElement = $('
'); this.sidebarContainer = $('
'); this.contentOverlay = $('
'); this.bodyContainer = $('
'); - - this.sidebarViewNavigator = new ViewNavigator( this.sidebarContainer.get()[0], backLinkCSS, false ); - + + this.sidebarViewNavigator = new ViewNavigator( this.sidebarContainer.get()[0], backLinkCSS, false ); + this.bodyViewNavigator = new ViewNavigator( this.bodyContainer.get()[0], backLinkCSS, false ); - + this.backLinkCSS = backLinkCSS ? backLinkCSS : "viewNavigator_backButton"; - + this.toggleSidebarButton = $('
  • '+toggleButtonLabel+'
    • '); - + this.rootElement.append( this.bodyContainer ); this.rootElement.append( this.contentOverlay ); - + this.rootElement.append( this.sidebarContainer ); - + var self = this; - + /*if ( "onorientationchange" in window ) { $(window).bind( "orientationchange", function(event){ self.resizeContent() } ) } @@ -51,20 +51,20 @@ var SplitViewNavigator = function( target, toggleButtonLabel, backLinkCSS, bindT //alert( this.parent.attr( "id" ) ); this.parent.resize( function(event){ self.resizeContent() } ); //} - + if ( bindToWindow != false ) { $(window).resize( function(event){ self.resizeContent() } ); } else { this.parent.resize( function(event){ self.resizeContent() } ); } - + this.resizeContent(); - + this.parent.append( this.rootElement ); - + this.contentOverlay.click( function(event){ self.hideSidebar() } ); - + new NoClickDelay( this.contentOverlay.get()[0] ); new NoClickDelay( this.toggleSidebarButton.get()[0] ); window.splitViewNavigator = this; @@ -74,68 +74,68 @@ var SplitViewNavigator = function( target, toggleButtonLabel, backLinkCSS, bindT SplitViewNavigator.prototype.resizeContent = function() { this.applyStylesByOrientation(); - this.sidebarViewNavigator.resizeContent(); + this.sidebarViewNavigator.resizeContent(); this.bodyViewNavigator.resizeContent() } SplitViewNavigator.prototype.applyStylesByOrientation = function() { var $window = $(window) - var w = $window.width(); - var h = $window.height(); - - - var orientation = (w >= h) ? "landscape" : "portrait"; - this.contentOverlay.removeClass( "content_overlay_visible" ).addClass( "content_overlay_hidden" ); - - //landscape - if ( orientation == "landscape" && this.orientation != orientation ) { - this.sidebarContainer.removeClass( "sidebar_portrait" ).addClass( "sidebar_landscape" ); - this.bodyViewNavigator.setHeaderPadding( 0 ); - this.toggleSidebarButton.remove(); - if ( this.animationPerformed ) { - this.sidebarContainer.css( "left", 0 ); - } - this.bodyContainer.removeClass( "body_portrait" ).addClass( "body_landscape" ); - } - - //portrait - else if ( this.orientation != orientation ) { - this.sidebarContainer.removeClass( "sidebar_landscape" ).addClass( "sidebar_portrait" ); - this.bodyViewNavigator.setHeaderPadding( "70px" ); + var w = $window.width(); + var h = $window.height(); + + + var orientation = (w >= h) ? "landscape" : "portrait"; + this.contentOverlay.removeClass( "content_overlay_visible" ).addClass( "content_overlay_hidden" ); + + //landscape + if ( orientation == "landscape" && this.orientation != orientation ) { + this.sidebarContainer.removeClass( "sidebar_portrait" ).addClass( "sidebar_landscape" ); + this.bodyViewNavigator.setHeaderPadding( 0 ); + this.toggleSidebarButton.remove(); + if ( this.animationPerformed ) { + this.sidebarContainer.css( "left", 0 ); + } + this.bodyContainer.removeClass( "body_portrait" ).addClass( "body_landscape" ); + } + + //portrait + else if ( this.orientation != orientation ) { + this.sidebarContainer.removeClass( "sidebar_landscape" ).addClass( "sidebar_portrait" ); + this.bodyViewNavigator.setHeaderPadding( "70px" ); this.bodyContainer.append( this.toggleSidebarButton ); - if ( this.animationPerformed ) { - this.sidebarContainer.css( "left", -this.sidebarContainer.width() ); - } - this.bodyContainer.removeClass( "body_landscape" ).addClass( "body_portrait" ); - } - - this.orientation = orientation; + if ( this.animationPerformed ) { + this.sidebarContainer.css( "left", -this.sidebarContainer.width() ); + } + this.bodyContainer.removeClass( "body_landscape" ).addClass( "body_portrait" ); + } + + this.orientation = orientation; } SplitViewNavigator.prototype.showSidebar = function() { this.animationPerformed = true; if ( this.orientation == "portrait" ) { - this.contentOverlay.removeClass( "content_overlay_hidden" ).addClass( "content_overlay_visible" ); + this.contentOverlay.removeClass( "content_overlay_hidden" ).addClass( "content_overlay_visible" ); this.animating = true; this.sidebarContainer.animate({ left:0, avoidTransforms:false, useTranslate3d: true }, this.animationDuration, this.animationCompleteHandler()); - + } } SplitViewNavigator.prototype.hideSidebar = function() { if ( this.orientation == "portrait" ) { - this.contentOverlay.removeClass( "content_overlay_visible" ).addClass( "content_overlay_hidden" ); + this.contentOverlay.removeClass( "content_overlay_visible" ).addClass( "content_overlay_hidden" ); this.animating = true; this.sidebarContainer.animate({ left:-this.sidebarContainer.width(), avoidTransforms:false, useTranslate3d: true }, this.animationDuration, this.animationCompleteHandler()); - + } } @@ -143,7 +143,7 @@ SplitViewNavigator.prototype.animationCompleteHandler = function() { var self = this; return function() { self.animating = false; - //self.resetScroller(); + //self.resetScroller(); } } @@ -177,9 +177,9 @@ SplitViewNavigator.prototype.replaceBodyView = function( viewDescriptor ) { //GUID logic from http://stackoverflow.com/questions/105034/how-to-create-a-guid-uuid-in-javascript SplitViewNavigator.prototype.S4 = function() { - return (((1+Math.random())*0x10000)|0).toString(16).substring(1); + return (((1+Math.random())*0x10000)|0).toString(16).substring(1); } - + SplitViewNavigator.prototype.guid = function() { return (this.S4() + this.S4() + "-" + this.S4() + "-4" + this.S4().substr(0,3) + "-" + this.S4() + "-" + this.S4() + this.S4() + this.S4()).toLowerCase(); -} \ No newline at end of file +} diff --git a/src/viewnavigator/viewnavigator.css b/src/viewnavigator/viewnavigator.css index 2052907..970a2d8 100644 --- a/src/viewnavigator/viewnavigator.css +++ b/src/viewnavigator/viewnavigator.css @@ -27,14 +27,14 @@ body { top:0px; bottom:0px; left:0px; - right:0px; + right:0px; overflow: hidden; padding: 0px; margin: 0px; - - backface-visibility: hidden; + + backface-visibility: hidden; -webkit-backface-visibility: hidden; - + transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); } @@ -52,7 +52,7 @@ body { height:46px; overflow:hide; padding:0px; - + background: rgb(167,207,223); /* Old browsers */ background: -moz-linear-gradient(top, rgba(167,207,223,1) 0%, rgba(35,83,138,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(167,207,223,1)), color-stop(100%,rgba(35,83,138,1))); /* Chrome,Safari4+ */ @@ -61,10 +61,10 @@ 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 */ - - backface-visibility: hidden; + + backface-visibility: hidden; -webkit-backface-visibility: hidden; - + transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); } @@ -74,13 +74,13 @@ body { top:0px; left:0px; z-index:2; - + white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - -o-text-overflow: ellipsis; - - max-width:30%; + overflow: hidden; + text-overflow: ellipsis; + -o-text-overflow: ellipsis; + + max-width:30%; } .viewNavigator_header_title { @@ -95,18 +95,18 @@ body { font-weight: bold; color: #FFFFFF; white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - -o-text-overflow: ellipsis; - - max-width:48%; + overflow: hidden; + text-overflow: ellipsis; + -o-text-overflow: ellipsis; + + max-width:48%; } .viewNavigator_headerContent { - backface-visibility: hidden; + backface-visibility: hidden; -webkit-backface-visibility: hidden; - + transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); @@ -120,10 +120,10 @@ body { right:0px; bottom:0px; overflow:hidden; - - backface-visibility: hidden; + + backface-visibility: hidden; -webkit-backface-visibility: hidden; - + transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); } @@ -133,23 +133,23 @@ body { .viewNavigator_content select { overflow:auto; position:relative; - backface-visibility: auto; + backface-visibility: auto; -webkit-backface-visibility: auto; } .viewNavigator_contentHolder > div:first-child { - min-height:100%; - border-bottom:1px solid #444; - border-top:1px solid #444; + min-height:100%; + border-bottom:1px solid #444; + border-top:1px solid #444; } .viewNavigator_content div { - backface-visibility: visible; - -webkit-backface-visibility: visible; - -webkit-transform: translate3d(0,0,0); + backface-visibility: visible; + -webkit-backface-visibility: visible; + -webkit-transform: translate3d(0,0,0); } .viewNavigator_contentHolder { @@ -162,14 +162,14 @@ body { overflow:auto; padding:0px; margin:0px; - overflow: hidden; + overflow: hidden; -webkit-overflow-scrolling : touch; min-width:100%; min-height:100% - backface-visibility: hidden; + backface-visibility: hidden; -webkit-backface-visibility: hidden; - + transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); diff --git a/src/viewnavigator/viewnavigator.js b/src/viewnavigator/viewnavigator.js index c770a8c..26eb2ab 100644 --- a/src/viewnavigator/viewnavigator.js +++ b/src/viewnavigator/viewnavigator.js @@ -20,40 +20,40 @@ var ViewNavigator = function( target, backLinkCSS, bindToWindow ) { this.history = []; this.scroller = null; this.headerPadding = 5; - + this.uniqueId = this.guid(); - - var regexp = new RegExp("Windows Phone OS 7"); + + var regexp = new RegExp("Windows Phone OS 7"); this.winPhone = (navigator.userAgent.search(regexp) >= 0); - + this.rootElement = $('
    '); this.header = $('
    '); this.content = $('
    '); this.rootElement.append( this.header ); this.rootElement.append( this.content ); - + this.parent = $( target ); - + this.backLinkCSS = backLinkCSS ? backLinkCSS : "viewNavigator_backButton"; - + var self = this; //$(window).resize( function(event){ self.resizeContent() } ); //alert( this.parent.toString() ); //this.parent.resize( function(event){ self.resizeContent() } ); - + if ( bindToWindow != false ) { $(window).resize( function(event){ self.resizeContent() } ); } else { this.parent.resize( function(event){ self.resizeContent() } ); } - + this.parent.append( this.rootElement ); - + if ( window.viewNavigators == null || window.viewNavigators == undefined ) { window.viewNavigators = {}; } - window.viewNavigators[ this.uniqueId ] = this; + window.viewNavigators[ this.uniqueId ] = this; } @@ -61,7 +61,7 @@ ViewNavigator.prototype.replaceView = function( viewDescriptor ) { if (this.animating) return; viewDescriptor.animation = "pushEffect" - + //this is a hack to mimic behavior of pushView, then pop off the "current" from the history this.history.push( viewDescriptor ); this.updateView( viewDescriptor ); @@ -82,13 +82,13 @@ ViewNavigator.prototype.popView = function() { if (this.animating || this.history.length <= 1 ) return; - + var currentViewDescriptor = this.history[ this.history.length-1]; if ( currentViewDescriptor.backCallback ) { currentViewDescriptor.backCallback(); } - - this.history.pop(); + + this.history.pop(); var viewDescriptor = this.history[ this.history.length-1 ]; viewDescriptor.animation = "popEffect" this.updateView( viewDescriptor ); @@ -102,160 +102,160 @@ ViewNavigator.prototype.setHeaderPadding = function( amount ) { } ViewNavigator.prototype.updateView = function( viewDescriptor ) { - + this.animating = true; - - - - + + + + this.contentPendingRemove = this.contentViewHolder; this.headerContentPendingRemove = this.headerContent; - + this.headerContent = $('
    '); - + this.headerTitle = $("
    " + viewDescriptor.title + "
    "); this.headerContent.append( this.headerTitle ); - + var linkGuid = this.guid(); if ( viewDescriptor.backLabel ) { this.headerBacklink = $(''); this.headerContent.append( this.headerBacklink ); - + //this is for proper handling in splitviewnavigator this.setHeaderPadding( this.headerPadding ); } - + var id = this.guid(); this.contentViewHolder = $('
    '); this.contentViewHolder.append( viewDescriptor.view ); this.resizeContent(); - - if ( this.contentPendingRemove ){ - this.contentPendingRemove.stop() + + if ( this.contentPendingRemove ){ + this.contentPendingRemove.stop() } if ( this.headerContentPendingRemove ) { - this.headerContentPendingRemove.stop() + 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" ); - } - } - + 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() ); this.contentViewHolder.css( "opacity", 1 ); - this.content.prepend( this.contentViewHolder ); - + this.content.prepend( this.contentViewHolder ); + this.headerContent.css( "left", -this.animationX ); this.headerContent.css( "opacity", 0 ); this.header.append( this.headerContent ); - - var func = this.animationCompleteHandler(this.contentPendingRemove, this.headerContentPendingRemove, this.headerContent, this.contentViewHolder ); - - this.contentPendingRemove.animate({ - left:this.contentViewHolder.width(), - avoidTransforms:false, - useTranslate3d: true - }, this.animationDuration*0.8); - - //remove this to change back - this.contentViewHolder.animate({ - left:0, - avoidTransforms:false, - useTranslate3d: true - }, this.animationDuration/2); - - this.headerContentPendingRemove.animate({ - left:this.animationX, - opacity:0, - avoidTransforms:false, - useTranslate3d: true - }, this.animationDuration, func ); - - this.headerContent.animate({ - left:0, - opacity:1, - avoidTransforms:false, - useTranslate3d: true - }, 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 ); + + var func = this.animationCompleteHandler(this.contentPendingRemove, this.headerContentPendingRemove, this.headerContent, this.contentViewHolder ); + + this.contentPendingRemove.animate({ + left:this.contentViewHolder.width(), + avoidTransforms:false, + useTranslate3d: true + }, this.animationDuration*0.8); + + //remove this to change back + this.contentViewHolder.animate({ + left:0, + avoidTransforms:false, + useTranslate3d: true + }, this.animationDuration/2); + + this.headerContentPendingRemove.animate({ + left:this.animationX, + opacity:0, + avoidTransforms:false, + useTranslate3d: true + }, this.animationDuration, func ); + + this.headerContent.animate({ + left:0, + opacity:1, + avoidTransforms:false, + useTranslate3d: true + }, 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 ) { - + this.contentViewHolder.css( "left", this.contentViewHolder.width() ); this.contentViewHolder.css( "opacity", 1 ); - - this.content.append( this.contentViewHolder ); - + + this.content.append( this.contentViewHolder ); + this.headerContent.css( "left", this.animationX ); this.headerContent.css( "opacity", 0 ); this.header.append( this.headerContent ); - var func = this.animationCompleteHandler(this.contentPendingRemove, this.headerContentPendingRemove, this.headerContent, this.contentViewHolder ); + var func = this.animationCompleteHandler(this.contentPendingRemove, this.headerContentPendingRemove, this.headerContent, this.contentViewHolder ); - this.contentViewHolder.animate({ - left:0, - avoidTransforms:false, - useTranslate3d: true - }, this.animationDuration*0.75); - - this.contentPendingRemove.animate({ - left:-this.contentViewHolder.width()/2, - avoidTransforms:false, - useTranslate3d: true - }, this.animationDuration, func); - - this.headerContent.animate({ - left:0, - opacity:1, - avoidTransforms:false, - useTranslate3d: true - }, this.animationDuration*0.75); - - this.headerContentPendingRemove.animate({ - left:-this.animationX, - opacity:0, - 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 ); + this.contentViewHolder.animate({ + left:0, + avoidTransforms:false, + useTranslate3d: true + }, this.animationDuration*0.75); + + this.contentPendingRemove.animate({ + left:-this.contentViewHolder.width()/2, + avoidTransforms:false, + useTranslate3d: true + }, this.animationDuration, func); + + this.headerContent.animate({ + left:0, + opacity:1, + avoidTransforms:false, + useTranslate3d: true + }, this.animationDuration*0.75); + + this.headerContentPendingRemove.animate({ + left:-this.animationX, + opacity:0, + 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 ); this.contentViewHolder.css( "opacity", 1 ); - this.content.append( this.contentViewHolder ); + this.content.append( this.contentViewHolder ); this.headerContent.css( "left", 0 ); this.headerContent.css( "opacity", 1 ); @@ -263,87 +263,87 @@ ViewNavigator.prototype.updateView = function( viewDescriptor ) { this.animating = false; this.resetScroller(); } - - if ( viewDescriptor.backLabel ) { - new NoClickDelay( this.headerBacklink.get()[0] ); + + if ( viewDescriptor.backLabel ) { + new NoClickDelay( this.headerBacklink.get()[0] ); } - + if ( viewDescriptor.showCallback ) { - viewDescriptor.showCallback(); + viewDescriptor.showCallback(); } } ViewNavigator.prototype.destroyScroller = function() { - + if ( !this.winPhone ) { if ( this.scroller != null ) { this.scroller.destroy(); this.scroller = null; } - } + } } ViewNavigator.prototype.resetScroller = function() { - - var id = this.contentViewHolder.attr( "id" ); - var currentViewDescriptor = this.history[ this.history.length-1]; - this.destroyScroller(); - + + var id = this.contentViewHolder.attr( "id" ); + var currentViewDescriptor = this.history[ this.history.length-1]; + this.destroyScroller(); + if ( !this.winPhone ) { if ( id && !(currentViewDescriptor && currentViewDescriptor.scroll == false)) { var self = this; if ( 'ontouchstart' in window ){ - 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 ( currentViewDescriptor.maintainScrollPosition !== false && 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 ( currentViewDescriptor.maintainScrollPosition !== false && scrollY != undefined && scrollY != "" ) { - self.scroller.scrollTo( 0, parseInt( scrollY ) ); - } - }, 10 ); - //this.scroller = new iScroll( id ); - } + 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 ( currentViewDescriptor.maintainScrollPosition !== false && 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 ( currentViewDescriptor.maintainScrollPosition !== false && scrollY != undefined && scrollY != "" ) { + self.scroller.scrollTo( 0, parseInt( scrollY ) ); + } + }, 10 ); + //this.scroller = new iScroll( id ); + } else { - var target = $("#"+id ); - target.css( "overflow", "auto" ); + var target = $("#"+id ); + target.css( "overflow", "auto" ); } } - } + } } ViewNavigator.prototype.refreshScroller = function() { - + if ( !this.winPhone ) { if ( this.scroller != null ) { this.scroller.refresh(); } - } + } } ViewNavigator.prototype.animationCompleteHandler = function(removalTarget, headerRemovalTarget, headerView, contentView) { var self = this; return function() { self.animating = false; - self.resetScroller(); + self.resetScroller(); if ( removalTarget ) { removalTarget.unbind( "click" ); removalTarget.detach(); } if ( headerRemovalTarget ) { headerRemovalTarget.unbind( "click" ); - headerRemovalTarget.detach(); + headerRemovalTarget.detach(); } } } @@ -361,9 +361,9 @@ ViewNavigator.prototype.resizeContent = function(event) { //GUID logic from http://stackoverflow.com/questions/105034/how-to-create-a-guid-uuid-in-javascript ViewNavigator.prototype.S4 = function() { - return (((1+Math.random())*0x10000)|0).toString(16).substring(1); + return (((1+Math.random())*0x10000)|0).toString(16).substring(1); } - + ViewNavigator.prototype.guid = function() { return (this.S4() + this.S4() + "-" + this.S4() + "-4" + this.S4().substr(0,3) + "-" + this.S4() + "-" + this.S4() + this.S4() + this.S4()).toLowerCase(); } @@ -373,7 +373,7 @@ ViewNavigator.prototype.guid = function() { /* PHONEGAP INTEGRATION */ /* //android+phonegap specific back button support - will only work if phonegap is used on android (www.phonegap.com) -if ( typeof PhoneGap != 'undefined' ) { +if ( typeof PhoneGap != 'undefined' ) { document.addEventListener("deviceready", onDeviceReady, false); } @@ -389,9 +389,7 @@ function onBackKey( event ) { } } */ - + //block page scrolling document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false); - -