touchswipe

by metalhaze

HTML

<div class="box pageview-wrapper">

    </div>

CSS

html, body {
    margin: 0;
    height: 100%;
}

.pageview-wrapper {
    position: relative;
    overflow: hidden;
}

.pageview-wrapper div {
    -webkit-transform: translate3d(0, 0, 0);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.pageview-group div {
    border: solid 5px black;
    -webkit-box-sizing: border-box;
}

.pageview-group div:first-child { left: -100%; }
.pageview-group div:last-child  { left: +100%; }

.box {
    width: 100%;
    height: 100%;
    background-color: lightgrey;
}

.pageview-group {
    -webkit-transition: -webkit-transform 0.35s ease-out;
}

.wrapper {width:58.536585%; /*960/1640 = .58536585*/ margin:0 auto;}
.resize {width:100%; height:auto;}

JavaScript

var PageView = function(target) {
    this.target = target;
    this.state = this.WAITING;

    /* Initialization phase */
    this.createElements();
    this.registerEvents();
    this.sendEvent();
}

/* The PageView is waiting for a user action */
PageView.prototype.__defineGetter__("WAITING",   function() { return 0 });

/* The user is pointing to the PageView container */
PageView.prototype.__defineGetter__("ATTACHED",  function() { return 1 });

/* The user released the container and the PageView is moving to its new position */
PageView.prototype.__defineGetter__("DETACHING", function() { return 2 });

PageView.prototype.createElements = function() {
    /* Create a pages group */
    this.group = document.createElement("div");
    this.group.className = "pageview-group";
    this.group.style.webkitTransitionDuration = 0;
    this.target.appendChild(this.group);

    /* Add the 3 pages */
    for (var n = 0; n < 3; n++) {
        var div = document.createElement("div");
        this.group.appendChild(div);
    }
}

PageView.prototype.registerEvents = function() {
    this.target.addEventListener("touchstart", this, false);
    this.target.addEventListener("touchmove", this, false);
    this.target.addEventListener("touchend", this, false);
}

PageView.prototype.handleEvent = function(event) {
    switch (event.type) {
        case "webkitTransitionEnd":
            this.moveNodes();
            break;

        case "touchstart":
        case "touchmove":
        case "touchend":
            var handler = event.type + "Handler";
            this[handler](event);
    }
}

PageView.prototype.touchstartHandler = function(event) {
    if (this.state == this.DETACHING) {
        return;
    }
    this.state = this.ATTACHED;
    this.origin = event.touches[0].pageX;
    event.preventDefault();
}

PageView.prototype.touchmoveHandler = function(event) {
    if (this.state != this.ATTACHED) {
        return;
    }
    var distance = event.touches[0].pageX -...