Skip to content

Commit

Permalink
hasty swipes
Browse files Browse the repository at this point in the history
  • Loading branch information
Matteo Spinelli committed Oct 9, 2011
1 parent 97646f1 commit baad936
Show file tree
Hide file tree
Showing 3 changed files with 78 additions and 60 deletions.
2 changes: 1 addition & 1 deletion README.md
View file
@@ -1,4 +1,4 @@
SwipeView v0.1 - 2011-10-08 SwipeView v0.2 - 2011-10-09
=========================== ===========================


Virtually infinite loop-able horizontal carousel for mobile webkit (in 4kb). Virtually infinite loop-able horizontal carousel for mobile webkit (in 4kb).
Expand Down
27 changes: 19 additions & 8 deletions demo/style.css
View file
Expand Up @@ -5,6 +5,9 @@ body {
background:#333; background:#333;
-webkit-user-select:none; -webkit-user-select:none;
-webkit-text-size-adjust:none; -webkit-text-size-adjust:none;
color:#eee;
font-family:helvetica;
font-size:14px;
} }


#wrapper { #wrapper {
Expand All @@ -18,10 +21,6 @@ body {
-webkit-box-orient:horizontal; -webkit-box-orient:horizontal;
-webkit-box-pack:center; -webkit-box-pack:center;
-webkit-box-align:center; -webkit-box-align:center;

/* text-align:center;
vertical-align:middle;
position:relative;*/
overflow:hidden; overflow:hidden;
} }


Expand All @@ -31,8 +30,20 @@ body {
border:5px solid #eee; border:5px solid #eee;
-webkit-box-shadow:0 2px 6px #000; -webkit-box-shadow:0 2px 6px #000;
-webkit-border-radius:2px; -webkit-border-radius:2px;
/* position:absolute; -webkit-transition-duration:.4s;
display:block; -webkit-transition-property:opacity;
top:50%; opacity:1;
left:50%;*/
} }

#wrapper > div > .swipeview-loading {
background-image:-webkit-gradient(linear, 0 0, 100% 0, from(#444), to(#555)),
-webkit-gradient(linear, 0 0, 100% 0, from(#777), to(#777));
background-position:50% 50%, 50% 50%;
background-size:200px 140px, 210px 150px;
background-repeat:no-repeat;
}

#wrapper > div > .swipeview-loading img {
-webkit-transition-duration:0;
opacity:0;
}
109 changes: 58 additions & 51 deletions src/swipeview.js
View file
@@ -1,5 +1,5 @@
/*! /*!
* SwipeView v0.1 ~ Copyright (c) 2011 Matteo Spinelli, http://cubiq.org * SwipeView v0.2 ~ Copyright (c) 2011 Matteo Spinelli, http://cubiq.org
* Released under MIT license, http://cubiq.org/license * Released under MIT license, http://cubiq.org/license
*/ */
var SwipeView = (function(){ var SwipeView = (function(){
Expand All @@ -21,7 +21,7 @@ var SwipeView = (function(){
this.wrapper = document.querySelector(el); this.wrapper = document.querySelector(el);
this.options = { this.options = {
pages: [], pages: [],
snapThreshold: 80 snapThreshold: null
} }


// User defined options // User defined options
Expand All @@ -40,16 +40,16 @@ var SwipeView = (function(){
for (i=-1; i<2; i++) { for (i=-1; i<2; i++) {
div = document.createElement('div'); div = document.createElement('div');
div.style.cssText = '-webkit-transform:translateZ(0);position:absolute;top:0;height:100%;width:100%;left:' + i*100 + '%'; div.style.cssText = '-webkit-transform:translateZ(0);position:absolute;top:0;height:100%;width:100%;left:' + i*100 + '%';
div.dataset.pageIndex = i + 1;
div.dataset.upcomingPageIndex = div.dataset.pageIndex;

image = i==-1 ? this.options.pages.length-1 : i; image = i==-1 ? this.options.pages.length-1 : i;
img = document.createElement('img'); img = document.createElement('img');
img.src = this.options.pages[image].source; img.src = this.options.pages[image].source;
img.width = this.options.pages[image].width; img.width = this.options.pages[image].width;
img.height = this.options.pages[image].height; img.height = this.options.pages[image].height;
// img.style.marginLeft = -Math.round(this.options.pages[image].width / 2) + 'px';
// img.style.marginTop = -Math.round(this.options.pages[image].height / 2) + 'px';


div.appendChild(img); div.appendChild(img);
// div.innerHTML = '<img src="' + this.options.pages[image].source + '" width="' + this.options.pages[image].width + '" height="' + this.options.pages[image].height + '" alt="pic">';
this.slider.appendChild(div); this.slider.appendChild(div);
this.masterPages.push(div); this.masterPages.push(div);
} }
Expand All @@ -67,6 +67,7 @@ var SwipeView = (function(){


SwipeView.prototype = { SwipeView.prototype = {
masterPages: [], masterPages: [],
currentMasterPage: 1,
x: 0, x: 0,
page: 0, page: 0,
image: 0, image: 0,
Expand Down Expand Up @@ -97,6 +98,11 @@ var SwipeView = (function(){
this.wrapperHeight = this.wrapper.clientHeight; this.wrapperHeight = this.wrapper.clientHeight;
this.pageWidth = this.wrapperWidth; this.pageWidth = this.wrapperWidth;
this.maxX = -2 * this.pageWidth + this.wrapperWidth; this.maxX = -2 * this.pageWidth + this.wrapperWidth;
this.snapThreshold = this.options.snapThreshold === null
? Math.round(this.pageWidth * .15)
: /%/.test(this.options.snapThreshold)
? Math.round(this.pageWidth * this.options.snapThreshold.replace('%', '') / 100)
: this.options.snapThreshold;
}, },


__pos: function (x) { __pos: function (x) {
Expand All @@ -113,7 +119,7 @@ var SwipeView = (function(){
__start: function (e) { __start: function (e) {
e.preventDefault(); e.preventDefault();


if (this.initiated || this.flipping) return; if (this.initiated) return;


var point = hasTouch ? e.touches[0] : e; var point = hasTouch ? e.touches[0] : e;


Expand Down Expand Up @@ -152,71 +158,72 @@ var SwipeView = (function(){
if (!this.initiated) return; if (!this.initiated) return;


var point = hasTouch ? e.changedTouches[0] : e, var point = hasTouch ? e.changedTouches[0] : e,
pageFlip,
pageFlipIndex,
newX; newX;


this.initiated = false; this.initiated = false;


if (!this.moved) return; if (!this.moved) return;


if (Math.abs(point.pageX - this.startX) < this.options.snapThreshold) { // Check if we exceeded the snap threshold
if (Math.abs(point.pageX - this.startX) < this.snapThreshold) {
this.slider.style.webkitTransitionDuration = '300ms'; this.slider.style.webkitTransitionDuration = '300ms';
this.__pos(-this.page * this.pageWidth); this.__pos(-this.page * this.pageWidth);
return; return;
} }

// Flip the page
if (this.directionX > 0) {
this.page = -Math.ceil(this.x / this.pageWidth);
this.currentMasterPage = (this.page + 1) - Math.floor((this.page + 1) / 3) * 3;

pageFlip = this.currentMasterPage - 1;
pageFlip = pageFlip < 0 ? 2 : pageFlip;
this.masterPages[pageFlip].style.left = this.page * 100 - 100 + '%';


this.page = this.directionX > 0 ? -Math.ceil(this.x / this.pageWidth) : -Math.floor(this.x / this.pageWidth); pageFlipIndex = this.page - 1;
// this.page = this.page < 0 ? 0 : this.page > 1 ? 1 : this.page; } else {
this.page = -Math.floor(this.x / this.pageWidth);
this.currentMasterPage = (this.page + 1) - Math.floor((this.page + 1) / 3) * 3;

pageFlip = this.currentMasterPage + 1;
pageFlip = pageFlip > 2 ? 0 : pageFlip;
this.masterPages[pageFlip].style.left = this.page * 100 + 100 + '%';

pageFlipIndex = this.page + 1;
}

this.masterPages[pageFlip].className = 'swipeview-loading';
pageFlipIndex = pageFlipIndex - Math.floor(pageFlipIndex / this.options.pages.length) * this.options.pages.length;
this.masterPages[pageFlip].dataset.upcomingPageIndex = pageFlipIndex; // Index to be loaded when the user stops swiping


this.slider.style.webkitTransitionDuration = '500ms'; this.slider.style.webkitTransitionDuration = '500ms';


newX = -this.page * this.pageWidth; newX = -this.page * this.pageWidth;
this.flipping = true;
if (this.x == newX) this.__flip(); if (this.x == newX) this.__flip(); // If we swiped all the way long to the next page (extremely rare but still)
else this.__pos(newX); else this.__pos(newX);
}, },


__flip: function () { __flip: function () {
if (!this.flipping) return; var imageEl,

newIndex,
var currentMasterPage, i, l;
shiftImage,
imageEl, for (i=0, l=this.masterPages.length; i<l; i++) {
leftPage, this.masterPages[i].className = '';
rightPage; newIndex = this.masterPages[i].dataset.upcomingPageIndex;


currentMasterPage = (this.page + 1) - Math.floor((this.page + 1) / 3) * 3; if (newIndex != this.masterPages[i].dataset.pageIndex) {
leftPage = currentMasterPage - 1; this.masterPages[i].dataset.pageIndex = newIndex;
leftPage = leftPage < 0 ? 2 : leftPage;
rightPage = currentMasterPage + 1; imageEl = this.masterPages[i].getElementsByTagName('img')[0];
rightPage = rightPage > 2 ? 0 : rightPage; imageEl.src = this.options.pages[newIndex].source;

imageEl.width = this.options.pages[newIndex].width;
// this.masterPages[currentMasterPage].style.left = this.page * 100 + '%'; imageEl.height = this.options.pages[newIndex].height;

}
shiftImage = this.page - 1;
shiftImage = shiftImage - Math.floor(shiftImage / this.options.pages.length) * this.options.pages.length;
this.masterPages[leftPage].style.left = this.page * 100 - 100 + '%';
imageEl = this.masterPages[leftPage].getElementsByTagName('img')[0];

if (imageEl.getAttribute('src') != this.options.pages[shiftImage].source) {
imageEl.src = this.options.pages[shiftImage].source;
imageEl.width = this.options.pages[shiftImage].width;
imageEl.height = this.options.pages[shiftImage].height;
} }

shiftImage = this.page + 1;
shiftImage = shiftImage - Math.floor(shiftImage / this.options.pages.length) * this.options.pages.length;
this.masterPages[rightPage].style.left = this.page * 100 + 100 + '%';
imageEl = this.masterPages[rightPage].getElementsByTagName('img')[0];

if (imageEl.getAttribute('src') != this.options.pages[shiftImage].source) {
imageEl.src = this.options.pages[shiftImage].source;
imageEl.width = this.options.pages[shiftImage].width;
imageEl.height = this.options.pages[shiftImage].height;
}

this.flipping = false;
/* imageEl.style.marginLeft = -Math.round(this.options.pages[shiftImage].width / 2) + 'px';
imageEl.style.marginTop = -Math.round(this.options.pages[shiftImage].height / 2) + 'px';*/
} }
}; };


Expand Down

0 comments on commit baad936

Please sign in to comment.