mirror of
https://github.com/moparisthebest/app-UI
synced 2024-12-21 23:18:52 -05:00
work in progress - performance improvements & tweaks
This commit is contained in:
Andrew Trice
parent
d090efe429
commit
4e49e44ee2
@ -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;
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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 );
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user