Swipe

by levchenko_d

HTML

<p id="out"></p>

CSS

body{
    overflow: hidden;
}
#out {
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    background: #00b0ef;
    color: white;
    text-align: center;
    s-webkit-transition: left 0.22s ease;
}


#out.left{
    left: -50%;
    right: auto;
}

#out.right{
    right: -50%;
    left: auto;
}

*{
   -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */

  /* No support for these yet, use at own risk */
  -o-user-select: none;
  user-select: none;  
}

JavaScript

/* Complete dragg !!!*/

var Swipe = (function () {
    var el;
    
    var _swipe = function (elem,fn) {
        this.el = elem;
        
        this.el.x = 0;
        this.el.y = 0;
        this.el.swipe = false;
        this.el.direction = '';
        this.el.step = fn && fn.step || 100;
            
        this.el.left = fn && fn.left && function(coords){fn.left(coords, elem);} || function(){};
        this.el.right = fn && fn.right && function(coords){fn.right(coords,elem)} || function(){};
        this.el.top = fn && fn.top && function(coords){fn.top(coords, elem)} || function(){};
        this.el.bottom = fn && fn.bottom && function(coords){fn.bottom(coords, elem)} || function(){};
        
        this.el.stop = fn && fn.stop && function(coords){fn.stop(coords, elem)} || function(){};
        
        this.el.addEventListener('mousedown', function(e){
            
            this.swipe = true;
            this.x = e.x;
            this.y = e.y;
                        
            this.addEventListener('mousemove', function(e){
                                
                if(this.swipe){
                    e.preventDefault();
                    
                    if(!this.direction){
                        this.direction = e.x - this.x > this.step && 'right' ||
                                         e.x - this.x < -this.step && 'left' ||
                                         e.y - this.y > this.step && 'bottom'||
                                         e.y - this.y < -this.step && 'top'  ;
                    }
                    
                    if(this.direction){
                        this.innerHTML = 'swipe ' + this.direction;
                    };
                    
                    if(this.direction === 'left'){
                        this.left({x: e.x, y: e.y, sX: this.x, sY: this.y});
                    } else if(this.direction === 'right'){
                        this.right({x: e.x, y: e.y, sX: this.x, sY:...