2012-03-14 15:51:01 -04:00
|
|
|
|
|
|
|
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() } )
|
|
|
|
}
|
|
|
|
this.resizeContent();
|
|
|
|
this.setupEventHandlers();
|
|
|
|
}
|
|
|
|
|
|
|
|
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';
|
|
|
|
|
|
|
|
var self = this;
|
2012-04-09 11:30:52 -04:00
|
|
|
var func = function( event ){ self.onTouchStart(event), true };
|
|
|
|
var body = this.body.get()[0];
|
|
|
|
body.addEventListener( this.START_EVENT, func, false );
|
2012-03-14 15:51:01 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
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) };
|
|
|
|
|
2012-04-09 11:30:52 -04:00
|
|
|
this.body.get()[0].addEventListener( this.MOVE_EVENT, this.touchMoveHandler, false );
|
|
|
|
this.body.get()[0].addEventListener( this.END_EVENT, this.touchUpHandler, false );
|
2012-03-14 15:51:01 -04:00
|
|
|
this.body.stop();
|
|
|
|
}
|
|
|
|
|
|
|
|
SlidingView.prototype.onTouchMove = function(event) {
|
|
|
|
var currentPosition = this.getTouchCoordinates( event );
|
|
|
|
|
|
|
|
if ( this.gestureStarted ) {
|
|
|
|
event.preventDefault();
|
|
|
|
event.stopPropagation();
|
|
|
|
this.updateBasedOnTouchPoints( currentPosition );
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
else {
|
|
|
|
//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();
|
|
|
|
event.stopPropagation();
|
|
|
|
this.updateBasedOnTouchPoints( currentPosition );
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
SlidingView.prototype.onTouchEnd = function(event) {
|
|
|
|
if ( this.gestureStarted ) {
|
|
|
|
this.snapToPosition();
|
|
|
|
}
|
|
|
|
this.gestureStarted = false;
|
|
|
|
this.unbindEvents();
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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 );
|
2012-04-09 11:30:52 -04:00
|
|
|
//console.log( this.body.css("left") );
|
|
|
|
|
|
|
|
if ( this.body.css("left") != "0px" ) {
|
|
|
|
this.body.css("left", "0px" );
|
|
|
|
}
|
2012-03-14 15:51:01 -04:00
|
|
|
this.body.css("-webkit-transform", "translate3d(" + targetX + "px,0,0)" );
|
2012-04-09 11:30:52 -04:00
|
|
|
this.body.css("-moz-transform", "translate3d(" + targetX + "px,0,0)" );
|
|
|
|
this.body.css("transform", "translate3d(" + targetX + "px,0,0)" );
|
|
|
|
|
2012-04-09 12:02:53 -04:00
|
|
|
//console.log( this.body.css("-moz-transform"), targetX );
|
2012-04-09 11:30:52 -04:00
|
|
|
|
2012-03-14 15:51:01 -04:00
|
|
|
|
|
|
|
/*if ( currentPosition != targetX ) {
|
|
|
|
|
|
|
|
this.body.stop(true,false).animate({
|
|
|
|
left:targetX,
|
|
|
|
avoidTransforms:false,
|
|
|
|
useTranslate3d: true
|
|
|
|
}, 100);
|
|
|
|
}*/
|
|
|
|
|
|
|
|
this.gestureStartPosition = currentPosition;
|
|
|
|
}
|
|
|
|
|
|
|
|
SlidingView.prototype.snapToPosition = function() {
|
|
|
|
|
|
|
|
//this.body.css("-webkit-transform", "translate3d(0,0,0)" );
|
|
|
|
this.body.css("left", "0px" );
|
|
|
|
var currentPosition = this.bodyOffset;
|
|
|
|
var halfWidth = this.sidebarWidth / 2;
|
|
|
|
var targetX;
|
|
|
|
if ( currentPosition < halfWidth ) {
|
|
|
|
targetX = 0;
|
|
|
|
}
|
|
|
|
else {
|
|
|
|
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);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
SlidingView.prototype.unbindEvents = function() {
|
2012-04-09 11:30:52 -04:00
|
|
|
this.body.get()[0].removeEventListener( this.MOVE_EVENT, this.touchMoveHandler, false );
|
|
|
|
this.body.get()[0].removeEventListener( this.END_EVENT, this.touchUpHandler, false );
|
2012-03-14 15:51:01 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
SlidingView.prototype.getTouchCoordinates = function(event) {
|
|
|
|
if ( this.touchSupported ) {
|
|
|
|
var touchEvent = event.touches[0];
|
|
|
|
return { x:touchEvent.pageX, y:touchEvent.pageY }
|
|
|
|
}
|
|
|
|
else {
|
|
|
|
return { x:event.screenX, y:event.screenY };
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
SlidingView.prototype.resizeContent = function() {
|
|
|
|
|
|
|
|
var $window = $(window)
|
|
|
|
var w = $window.width();
|
|
|
|
var h = $window.height();
|
|
|
|
|
|
|
|
this.body.width( w );
|
|
|
|
}
|
|
|
|
|
|
|
|
|