1
0
mirror of https://github.com/moparisthebest/app-UI synced 2024-10-31 15:35:02 -04:00
app-UI/src/slidingview/slidingview.js

187 lines
4.8 KiB
JavaScript
Raw Normal View History

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 );
}
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 );
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" );
}
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
/*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 );
}
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 );
}