mirror of
https://github.com/moparisthebest/app-UI
synced 2024-12-21 23:18:52 -05:00
changed indent: spaces to tab
spaces and tabs were mixed. Changed all spaces to tabs. Also deleted all spaces in empty lines.
This commit is contained in:
Andre Meyering
parent
ebdf914795
commit
6a767743bd
@ -65,4 +65,4 @@ body {
|
||||
overflow: hidden;
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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 );
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@ -80,4 +80,4 @@ ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
|
||||
bottom:0px;
|
||||
right:0px;
|
||||
left:240px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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 = $('<div class="splitViewNavigator_root"></div>');
|
||||
this.sidebarContainer = $('<div class="splitViewNavigator_sidebar"></div>');
|
||||
this.contentOverlay = $('<div class="content_overlay_hidden" id="overlay'+this.uniqueId+'"></div>');
|
||||
this.bodyContainer = $('<div class="splitViewNavigator_body"></div>');
|
||||
|
||||
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 = $('<li class="viewNavigator_backButton viewNavigator_backButtonPosition ' + backLinkCSS + '" id="toggle' + this.uniqueId + '" onclick="window.splitViewNavigator.showSidebar()">'+toggleButtonLabel+'</li>');
|
||||
|
||||
|
||||
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();
|
||||
}
|
||||
}
|
||||
|
||||
@ -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);
|
||||
|
||||
|
||||
@ -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 = $('<div class="viewNavigator_root"></div>');
|
||||
this.header = $('<div class="viewNavigator_header"></div>');
|
||||
this.content = $('<div class="viewNavigator_content" id="contentRoot"></div>');
|
||||
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 = $('<div class="viewNavigator_headerContent"></div>');
|
||||
|
||||
|
||||
this.headerTitle = $("<div class='viewNavigator_header_title'>" + viewDescriptor.title + "</div>");
|
||||
this.headerContent.append( this.headerTitle );
|
||||
|
||||
|
||||
var linkGuid = this.guid();
|
||||
if ( viewDescriptor.backLabel ) {
|
||||
this.headerBacklink = $('<li class="viewNavigator_header_backlink viewNavigator_backButtonPosition ' + this.backLinkCSS +'" id="link' + linkGuid + '" onclick="window.viewNavigators[\'' + this.uniqueId + '\'].popView()">'+ viewDescriptor.backLabel + '</li>');
|
||||
this.headerContent.append( this.headerBacklink );
|
||||
|
||||
|
||||
//this is for proper handling in splitviewnavigator
|
||||
this.setHeaderPadding( this.headerPadding );
|
||||
}
|
||||
|
||||
|
||||
var id = this.guid();
|
||||
this.contentViewHolder = $('<div class="viewNavigator_contentHolder" id="' + id + '"></div>');
|
||||
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);
|
||||
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user