moparisthebest
/
app-UI
mirror of https://github.com/moparisthebest/app-UI
1
0
Fork 0
Code Issues Releases Wiki Activity

updated examples to use latest libraries

This commit is contained in:
Andrew Trice 2012-05-29 21:18:04 -04:00
parent a702fc0038
commit 9c26b44bf2
2 changed files with 59 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
examples/src/viewnavigator/viewnavigator.css
View File

@ -138,6 +138,13 @@ body {
} }
.viewNavigator_contentHolder > div:first-child {
min-height:100%;
border-bottom:1px solid #444;
border-top:1px solid #444;
}
.viewNavigator_content div { .viewNavigator_content div {
backface-visibility: visible; backface-visibility: visible;

83
examples/src/viewnavigator/viewnavigator.js
View File

@ -147,7 +147,7 @@ ViewNavigator.prototype.updateView = function( viewDescriptor ) {
this.scroller = null; this.scroller = null;
if (this.contentPendingRemove) { if (this.contentPendingRemove) {
console.log( scrollY ); //console.log( scrollY );
//use this to mantain scroll position when scroller is destroyed //use this to mantain scroll position when scroller is destroyed
var children = $( this.contentPendingRemove.children()[0] ); var children = $( this.contentPendingRemove.children()[0] );
@ -175,6 +175,7 @@ ViewNavigator.prototype.updateView = function( viewDescriptor ) {
this.headerContent.css( "opacity", 0 ); this.headerContent.css( "opacity", 0 );
this.header.append( this.headerContent ); this.header.append( this.headerContent );
var func = this.animationCompleteHandler(this.contentPendingRemove, this.headerContentPendingRemove, this.headerContent, this.contentViewHolder );
this.contentPendingRemove.animate({ this.contentPendingRemove.animate({
left:this.contentViewHolder.width(), left:this.contentViewHolder.width(),
@ -194,7 +195,7 @@ ViewNavigator.prototype.updateView = function( viewDescriptor ) {
opacity:0, opacity:0,
avoidTransforms:false, avoidTransforms:false,
useTranslate3d: true useTranslate3d: true
}, this.animationDuration ); }, this.animationDuration, func );
this.headerContent.animate({ this.headerContent.animate({
left:0, left:0,
@ -205,8 +206,8 @@ ViewNavigator.prototype.updateView = function( viewDescriptor ) {
//using a timeout to get around inconsistent response times for webkittransitionend event //using a timeout to get around inconsistent response times for webkittransitionend event
var func = this.animationCompleteHandler(this.contentPendingRemove, this.headerContentPendingRemove, this.headerContent, this.contentViewHolder ); //var func = this.animationCompleteHandler(this.contentPendingRemove, this.headerContentPendingRemove, this.headerContent, this.contentViewHolder );
setTimeout( func, this.animationDuration+90 ); //setTimeout( func, this.animationDuration+90 );
} }
else if ( this.history.length > 1 ) { else if ( this.history.length > 1 ) {
@ -219,6 +220,8 @@ ViewNavigator.prototype.updateView = function( viewDescriptor ) {
this.headerContent.css( "opacity", 0 ); this.headerContent.css( "opacity", 0 );
this.header.append( this.headerContent ); this.header.append( this.headerContent );
var func = this.animationCompleteHandler(this.contentPendingRemove, this.headerContentPendingRemove, this.headerContent, this.contentViewHolder );
this.contentViewHolder.animate({ this.contentViewHolder.animate({
left:0, left:0,
avoidTransforms:false, avoidTransforms:false,
@ -229,7 +232,7 @@ ViewNavigator.prototype.updateView = function( viewDescriptor ) {
left:-this.contentViewHolder.width()/2, left:-this.contentViewHolder.width()/2,
avoidTransforms:false, avoidTransforms:false,
useTranslate3d: true useTranslate3d: true
}, this.animationDuration); }, this.animationDuration, func);
this.headerContent.animate({ this.headerContent.animate({
left:0, left:0,
@ -246,8 +249,8 @@ ViewNavigator.prototype.updateView = function( viewDescriptor ) {
}, this.animationDuration ); }, this.animationDuration );
//using a timeout to get around inconsistent response times for webkittransitionend event //using a timeout to get around inconsistent response times for webkittransitionend event
var func = this.animationCompleteHandler(this.contentPendingRemove, this.headerContentPendingRemove, this.headerContent, this.contentViewHolder ); //var func = this.animationCompleteHandler(this.contentPendingRemove, this.headerContentPendingRemove, this.headerContent, this.contentViewHolder );
setTimeout( func, this.animationDuration+90 ); //setTimeout( func, this.animationDuration+90 );
} }
else { else {
this.contentViewHolder.css( "left", 0 ); this.contentViewHolder.css( "left", 0 );
@ -262,8 +265,23 @@ ViewNavigator.prototype.updateView = function( viewDescriptor ) {
} }
if ( viewDescriptor.backLabel ) { if ( viewDescriptor.backLabel ) {
//new NoClickDelay( this.headerBacklink.get()[0] ); new NoClickDelay( this.headerBacklink.get()[0] );
} }
if ( viewDescriptor.showCallback ) {
viewDescriptor.showCallback();
}
}
ViewNavigator.prototype.destroyScroller = function() {
if ( !this.winPhone ) {
if ( this.scroller != null ) {
this.scroller.destroy();
this.scroller = null;
}
}
} }
@ -271,32 +289,35 @@ ViewNavigator.prototype.resetScroller = function() {
var id = this.contentViewHolder.attr( "id" ); var id = this.contentViewHolder.attr( "id" );
var currentViewDescriptor = this.history[ this.history.length-1]; var currentViewDescriptor = this.history[ this.history.length-1];
this.destroyScroller();
if ( !this.winPhone ) { if ( !this.winPhone ) {
if ( this.scroller != null ) { if ( id && !(currentViewDescriptor && currentViewDescriptor.scroll == false)) {
this.scroller.destroy();
this.scroller = null;
}
if ( id && !(currentViewDescriptor && currentViewDescriptor.scroll === false)) {
var self = this; var self = this;
setTimeout( function() { if ( this.touchEnabled ){
setTimeout( function() {
//use this to mantain scroll position when scroller is destroyed
var targetDiv = $( $("#"+id ).children()[0] ); //use this to mantain scroll position when scroller is destroyed
var scrollY= targetDiv.attr( "scrollY" ); var targetDiv = $( $("#"+id ).children()[0] );
var originalTopMargin = targetDiv.attr( "originalTopMargin" ); var scrollY= targetDiv.attr( "scrollY" );
if ( scrollY != undefined && scrollY != "" ){ var originalTopMargin = targetDiv.attr( "originalTopMargin" );
console.log( "resetScroller scrollY: " + scrollY) if ( currentViewDescriptor.maintainScrollPosition !== false && scrollY != undefined && scrollY != "" ){
// targetDiv.css( "margin-top", originalTopMargin ); // console.log( "resetScroller scrollY: " + scrollY)
var cssString = "translate3d(0px, "+(originalTopMargin).toString()+"px, 0px)"; // targetDiv.css( "margin-top", originalTopMargin );
targetDiv.css( "-webkit-transform", cssString ); var cssString = "translate3d(0px, "+(originalTopMargin).toString()+"px, 0px)";
} targetDiv.css( "-webkit-transform", cssString );
self.scroller = new iScroll( id ); }
if ( scrollY != undefined && scrollY != "" ) { self.scroller = new iScroll( id );
self.scroller.scrollTo( 0, parseInt( scrollY ) ); if ( currentViewDescriptor.maintainScrollPosition !== false && scrollY != undefined && scrollY != "" ) {
} self.scroller.scrollTo( 0, parseInt( scrollY ) );
}, 10 ); }
//this.scroller = new iScroll( id ); }, 10 );
//this.scroller = new iScroll( id );
}
else {
var target = $("#"+id );
target.css( "overflow", "auto" );
}
} }
} }
} }