Skip to content

Commit

Permalink
gotopage, next and prev methods
Browse files Browse the repository at this point in the history
  • Loading branch information
Matteo Spinelli committed Oct 22, 2011
1 parent e5e9f6b commit f0753a0
Show file tree
Hide file tree
Showing 5 changed files with 145 additions and 21 deletions.
4 changes: 2 additions & 2 deletions README.md
View file
@@ -1,5 +1,5 @@
SwipeView v0.9 - 2011-10-21
===========================
SwipeView v0.10 - 2011-10-22
============================

Virtually infinite loop-able horizontal carousel for mobile webkit (in 4kb).

Expand Down
2 changes: 1 addition & 1 deletion demo/ereader/index.html
View file
Expand Up @@ -100,7 +100,7 @@
helper.innerHTML = '';
ereader.slider.removeChild(container);

ereader.upagePageCount(pages.length);
ereader.updatePageCount(pages.length);

// Load initial data
for (i=0; i<3; i++) {
Expand Down
15 changes: 14 additions & 1 deletion demo/gallery/index.html
View file
Expand Up @@ -12,6 +12,16 @@

<body>
<div id="wrapper"></div>
<ul id="nav">
<li id="prev" onclick="gallery.prev()">-</li>
<li class="selected" onclick="gallery.goToPage(0)"></li>
<li onclick="gallery.goToPage(1)"></li>
<li onclick="gallery.goToPage(2)"></li>
<li onclick="gallery.goToPage(3)"></li>
<li onclick="gallery.goToPage(4)"></li>
<li onclick="gallery.goToPage(5)"></li>
<li id="next" onclick="gallery.next()">+</li>
</ul>

<script type="text/javascript">
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
Expand All @@ -20,6 +30,7 @@
el,
i,
page,
dots = document.querySelectorAll('#nav li'),
slides = [
{
img: 'images/pic01.jpg',
Expand Down Expand Up @@ -93,6 +104,9 @@
el.innerHTML = slides[upcoming].desc;
}
}

document.querySelector('#nav .selected').className = '';
dots[gallery.pageIndex+1].className = 'selected';
});

gallery.onMoveOut(function () {
Expand All @@ -104,7 +118,6 @@
/(^|\s)swipeview-active(\s|$)/.test(className) || (gallery.masterPages[gallery.currentMasterPage].className = !className ? 'swipeview-active' : className + ' swipeview-active');
});


</script>
</body>
</html>
40 changes: 40 additions & 0 deletions demo/gallery/style.css
View file
Expand Up @@ -16,6 +16,46 @@ body {
height:100%;
}

#nav {
position:absolute;
z-index:100;
top:8px;
width:200px;
height:20px;
left:50%;
background:rgba(0,0,0,0.75);
padding:0;
margin:0 0 0 -100px;
-webkit-border-radius:10px;
}

#nav li {
display:block;
float:left;
width:14px;
height:14px; line-height:14px;
-webkit-border-radius:7px;
background:rgba(255,255,255,0.1);
overflow:hidden;
padding:0;
margin:3px 11px 0 0;
text-align:center;
}

#nav li#prev {
margin-left:5px;
background:transparent;
}

#nav li#next {
margin-right:0;
background:transparent;
}

#nav li.selected {
background:rgba(255,255,255,0.4);
}

#swipeview-slider > div {
position:relative;
display:-webkit-box;
Expand Down
105 changes: 88 additions & 17 deletions src/swipeview.js
View file
@@ -1,5 +1,5 @@
/*!
* SwipeView v0.9 ~ Copyright (c) 2011 Matteo Spinelli, http://cubiq.org
* SwipeView v0.10 ~ Copyright (c) 2011 Matteo Spinelli, http://cubiq.org
* Released under MIT license, http://cubiq.org/license
*/
var SwipeView = (function(){
Expand All @@ -13,7 +13,8 @@ var SwipeView = (function(){
SwipeView = function (el, options) {
var i,
div,
className;
className,
pageIndex;

this.wrapper = typeof el == 'string' ? document.querySelector(el) : el;
this.options = {
Expand Down Expand Up @@ -44,8 +45,9 @@ var SwipeView = (function(){
div.id = 'swipeview-masterpage-' + (i+1);
div.style.cssText = '-webkit-transform:translateZ(0);position:absolute;top:0;height:100%;width:100%;left:' + i*100 + '%';
if (!div.dataset) div.dataset = {};
div.dataset.pageIndex = i;
div.dataset.upcomingPageIndex = i;
pageIndex = i == -1 ? this.options.numberOfPages - 1 : i;
div.dataset.pageIndex = pageIndex;
div.dataset.upcomingPageIndex = pageIndex;

this.slider.appendChild(div);
this.masterPages.push(div);
Expand All @@ -69,24 +71,30 @@ var SwipeView = (function(){
currentMasterPage: 1,
x: 0,
page: 0,
pageIndex: 0,
customEvents: [],

onFlip: function (fn) {
this.wrapper.addEventListener('swipeview-flip', fn, false);
this.customEvents.push({ flip: fn });
this.customEvents.push(['flip', fn]);
},

onMoveOut: function (fn) {
this.wrapper.addEventListener('swipeview-moveout', fn, false);
this.customEvents.push({ moveout: fn });
this.customEvents.push(['moveout', fn]);
},

onMoveIn: function (fn) {
this.wrapper.addEventListener('swipeview-movein', fn, false);
this.customEvents.push({ movein: fn });
this.customEvents.push(['movein', fn]);
},

destroy: function () {
var i, l;
for (i=0, l=customEvents.length; i<l; i++) {
this.wrapper.removeEventListener('swipeview-' + customEvents[i][0], customEvents[i][1], false);
}

// Remove the event listeners
window.removeEventListener(resizeEvent, this, false);
this.wrapper.removeEventListener(startEvent, this, false);
Expand Down Expand Up @@ -132,10 +140,70 @@ var SwipeView = (function(){
: this.options.snapThreshold;
},

upagePageCount: function (n) {
updatePageCount: function (n) {
this.options.numberOfPages = n;
},

goToPage: function (p) {
var i;

this.masterPages[this.currentMasterPage].className = this.masterPages[this.currentMasterPage].className.replace(/(^|\s)swipeview-active(\s|$)/, '');
for (i=0; i<3; i++) {
className = this.masterPages[i].className;
/(^|\s)swipeview-loading(\s|$)/.test(className) || (this.masterPages[i].className = !className ? 'swipeview-loading' : className + ' swipeview-loading');
}

p = p < 0 ? 0 : p > this.options.numberOfPages-1 ? this.options.numberOfPages-1 : p;
this.page = p;
this.pageIndex = p;
this.slider.style.webkitTransitionDuration = '0';
this.__pos(-p * this.pageWidth);

this.currentMasterPage = (this.page + 1) - Math.floor((this.page + 1) / 3) * 3;

this.masterPages[this.currentMasterPage].className = this.masterPages[this.currentMasterPage].className + ' swipeview-active';

if (this.currentMasterPage == 0) {
this.masterPages[2].style.left = this.page * 100 - 100 + '%';
this.masterPages[0].style.left = this.page * 100 + '%';
this.masterPages[1].style.left = this.page * 100 + 100 + '%';

this.masterPages[2].dataset.upcomingPageIndex = this.page == 0 ? this.options.numberOfPages-1 : this.page - 1;
this.masterPages[0].dataset.upcomingPageIndex = this.page;
this.masterPages[1].dataset.upcomingPageIndex = this.page == this.options.numberOfPages-1 ? 0 : this.page + 1;
} else if (this.currentMasterPage == 1) {
this.masterPages[0].style.left = this.page * 100 - 100 + '%';
this.masterPages[1].style.left = this.page * 100 + '%';
this.masterPages[2].style.left = this.page * 100 + 100 + '%';

this.masterPages[0].dataset.upcomingPageIndex = this.page == 0 ? this.options.numberOfPages-1 : this.page - 1;
this.masterPages[1].dataset.upcomingPageIndex = this.page;
this.masterPages[2].dataset.upcomingPageIndex = this.page == this.options.numberOfPages-1 ? 0 : this.page + 1;
} else {
this.masterPages[1].style.left = this.page * 100 - 100 + '%';
this.masterPages[2].style.left = this.page * 100 + '%';
this.masterPages[0].style.left = this.page * 100 + 100 + '%';

this.masterPages[1].dataset.upcomingPageIndex = this.page == 0 ? this.options.numberOfPages-1 : this.page - 1;
this.masterPages[2].dataset.upcomingPageIndex = this.page;
this.masterPages[0].dataset.upcomingPageIndex = this.page == this.options.numberOfPages-1 ? 0 : this.page + 1;
}

this.__flip();
},

next: function () {
this.directionX = -1;
this.x -= 1;
this.__checkPosition();
},

prev: function () {
this.directionX = 1;
this.x += 1;
this.__checkPosition();
},

__pos: function (x) {
this.x = x;
this.slider.style.webkitTransform = 'translate3d(' + x + 'px,0,0)';
Expand Down Expand Up @@ -200,11 +268,7 @@ var SwipeView = (function(){
__end: function (e) {
if (!this.initiated) return;

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

this.initiated = false;

Expand All @@ -217,12 +281,21 @@ var SwipeView = (function(){
return;
}

this.__checkPosition();
},

__checkPosition: function () {
var pageFlip,
pageFlipIndex,
className;

this.masterPages[this.currentMasterPage].className = this.masterPages[this.currentMasterPage].className.replace(/(^|\s)swipeview-active(\s|$)/, '');

// 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;
this.pageIndex = this.pageIndex == 0 ? this.options.numberOfPages - 1 : this.pageIndex - 1;

pageFlip = this.currentMasterPage - 1;
pageFlip = pageFlip < 0 ? 2 : pageFlip;
Expand All @@ -232,6 +305,7 @@ var SwipeView = (function(){
} else {
this.page = -Math.floor(this.x / this.pageWidth);
this.currentMasterPage = (this.page + 1) - Math.floor((this.page + 1) / 3) * 3;
this.pageIndex = this.pageIndex == this.options.numberOfPages - 1 ? 0 : this.pageIndex + 1;

pageFlip = this.currentMasterPage + 1;
pageFlip = pageFlip > 2 ? 0 : pageFlip;
Expand Down Expand Up @@ -259,10 +333,7 @@ var SwipeView = (function(){
this.__flip(); // If we swiped all the way long to the next page (extremely rare but still)
} else {
this.__pos(newX);

if (this.options.hastyPageFlip) {
this.__flip();
}
if (this.options.hastyPageFlip) this.__flip();
}
},

Expand Down

0 comments on commit f0753a0

Please sign in to comment.