Permalink
Browse files

SwipeView is now embeddable for inline carousels

  • Loading branch information...
1 parent 71d5272 commit 885a6c4b11e0abd6c097a05cce86847cbd40f0ad @cubiq committed Oct 23, 2011
Showing with 221 additions and 26 deletions.
  1. +1 −2 README.md
  2. +75 −0 demo/inline/index.html
  3. +89 −0 demo/inline/style.css
  4. +56 −24 src/swipeview.js
View
@@ -1,4 +1,4 @@
-SwipeView v0.10 - 2011-10-22
+SwipeView v0.11 - 2011-10-23
============================
Virtually infinite loop-able horizontal carousel for mobile webkit (in 4kb).
@@ -8,5 +8,4 @@ Read more at [cubiq.org](http://cubiq.org/swipeview)
Gallery Demo: [http://cubiq.org/dropbox/SwipeView/demo/gallery](http://cubiq.org/dropbox/SwipeView/demo/gallery)
eReader Demo: [http://cubiq.org/dropbox/SwipeView/demo/ereader](http://cubiq.org/dropbox/SwipeView/demo/ereader)
-
Screencast: [http://www.youtube.com/watch?v=Hhes5JHs8jQ](http://www.youtube.com/watch?v=Hhes5JHs8jQ)
View
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+ <meta name="apple-mobile-web-app-capable" content="yes">
+ <meta name="apple-mobile-web-app-status-bar-style" content="black">
+ <title>SwipeView</title>
+ <link href="style.css" rel="stylesheet" type="text/css">
+ <script type="text/javascript" src="../../src/swipeview.js"></script>
+</head>
+
+<body>
+ <h1>Three Laws of Robotics</h1>
+ <div id="wrapper"></div>
+
+<script type="text/javascript">
+var carousel,
+ el,
+ i,
+ page,
+ slides = [
+ '<strong>Swipe</strong> to know more &gt;&gt;&gt;<br>Or scroll down for <em>Lorem Ipsum</em>',
+ '1. A robot may not injure a human being or, through inaction, allow a human being to come to harm.',
+ '2. A robot must obey the orders given to it by human beings, except where such orders would conflict with the First Law.',
+ '3. A robot must protect its own existence as long as such protection does not conflict with the First or Second Laws.'
+ ];
+
+carousel = new SwipeView('#wrapper', {
+ numberOfPages: slides.length,
+ hastyPageFlip: true
+});
+
+// Load initial data
+for (i=0; i<3; i++) {
+ page = i==0 ? slides.length-1 : i-1;
@ofa-

ofa- Feb 12, 2013

page = (i - 1 + slides.length) % slides.length;
+
+ el = document.createElement('span');
+ el.innerHTML = slides[page];
+ carousel.masterPages[i].appendChild(el)
+}
+
+carousel.onFlip(function () {
+ var el,
+ upcoming,
+ i;
+
+ for (i=0; i<3; i++) {
+ upcoming = carousel.masterPages[i].dataset.upcomingPageIndex;
+
+ if (upcoming != carousel.masterPages[i].dataset.pageIndex) {
+ el = carousel.masterPages[i].querySelector('span');
+ el.innerHTML = slides[upcoming];
+ }
+ }
+});
+
+</script>
+
+<p>The Three Laws of Robotics (often shortened to The Three Laws or Three Laws) are a set of rules devised by the science fiction author Isaac Asimov and later added to. The rules are introduced in his 1942 short story "Runaround", although they were foreshadowed in a few earlier stories.</p>
+
+<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
+<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
+<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
+<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
+<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
+<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
+</body>
+</html>
View
@@ -0,0 +1,89 @@
+html, body { height:100%; }
+body {
+ padding:0;
+ margin:0;
+ background:#fff;
+ -webkit-user-select:none;
+ -webkit-text-size-adjust:none;
+ color:#333;
+ font-family:helvetica;
+ font-size:12px;
+ text-align:center;
+}
+
+h1 {
+ font-size:2em;
+ padding:20px 0;
+ margin:0;
+}
+
+#wrapper {
+ width:100%;
+ min-width:320px;
+ height:150px;
+ background:#ddd;
+ border-top:1px solid #aaa;
+ border-bottom:1px solid #aaa;
+}
+
+#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;
+ -webkit-box-orient:vertical;
+ -webkit-box-pack:center;
+ -webkit-box-align:center;
+ overflow:hidden;
+}
+
+#swipeview-slider span {
+ display:block;
+ text-align:center;
+ font-size:1.4em;
+ padding:0 20px;
+}
+
+p {
+ padding:20px;
+ margin:0;
+ font-size:1.4em;
+}
View
@@ -92,9 +92,11 @@ var SwipeView = (function(){
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);
+ this.wrapper.removeEventListener('swipeview-' + this.customEvents[i][0], this.customEvents[i][1], false);
}
+ this.customEvents = [];
+
// Remove the event listeners
window.removeEventListener(resizeEvent, this, false);
this.wrapper.removeEventListener(startEvent, this, false);
@@ -107,27 +109,6 @@ var SwipeView = (function(){
}*/
},
- handleEvent: function (e) {
- switch (e.type) {
- case startEvent:
- this.__start(e);
- break;
- case moveEvent:
- this.__move(e);
- break;
- case cancelEvent:
- case endEvent:
- this.__end(e);
- break;
- case resizeEvent:
- this.__resize();
- break;
- case 'webkitTransitionEnd':
- if (e.target == this.slider && !this.options.hastyPageFlip) this.__flip();
- break;
- }
- },
-
refreshSize: function () {
this.wrapperWidth = this.wrapper.clientWidth;
this.wrapperHeight = this.wrapper.clientHeight;
@@ -203,7 +184,34 @@ var SwipeView = (function(){
this.x += 1;
this.__checkPosition();
},
-
+
+ handleEvent: function (e) {
+ switch (e.type) {
+ case startEvent:
+ this.__start(e);
+ break;
+ case moveEvent:
+ this.__move(e);
+ break;
+ case cancelEvent:
+ case endEvent:
+ this.__end(e);
+ break;
+ case resizeEvent:
+ this.__resize();
+ break;
+ case 'webkitTransitionEnd':
+ if (e.target == this.slider && !this.options.hastyPageFlip) this.__flip();
+ break;
+ }
+ },
+
+
+ /**
+ *
+ * Pseudo private methods
+ *
+ */
__pos: function (x) {
this.x = x;
this.slider.style.webkitTransform = 'translate3d(' + x + 'px,0,0)';
@@ -216,7 +224,7 @@ var SwipeView = (function(){
},
__start: function (e) {
- e.preventDefault();
+ //e.preventDefault();
if (this.initiated) return;
@@ -228,7 +236,11 @@ var SwipeView = (function(){
this.startX = point.pageX;
this.startY = point.pageY;
this.pointX = point.pageX;
+ this.pointY = point.pageY;
+ this.stepsX = 0;
+ this.stepsY = 0;
this.directionX = 0;
+ this.directionLocked = false;
/* var matrix = getComputedStyle(this.slider, null).webkitTransform.replace(/[^0-9-.,]/g, '').split(',');
this.x = matrix[4] * 1;*/
@@ -243,12 +255,32 @@ var SwipeView = (function(){
var point = hasTouch ? e.touches[0] : e,
deltaX = point.pageX - this.pointX,
+ deltaY = point.pageY - this.pointY,
newX = this.x + deltaX,
dist = Math.abs(point.pageX - this.startX);
this.moved = true;
this.pointX = point.pageX;
+ this.pointY = point.pageY;
this.directionX = deltaX > 0 ? 1 : deltaX < 0 ? -1 : 0;
+ this.stepsX += Math.abs(deltaX);
+ this.stepsY += Math.abs(deltaY);
+
+ // We take a 10px buffer to figure out the direction of the swipe
+ if (this.stepsX < 10 && this.stepsY < 10) {
+// e.preventDefault();
+ return;
+ }
+
+ // We are scrolling vertically, so skip SwipeView and give the control back to the browser
+ if (!this.directionLocked && this.stepsY > this.stepsX) {
+ this.initiated = false;
+ return;
+ }
+
+ e.preventDefault();
+
+ this.directionLocked = true;
if (!this.thresholdExceeded && dist >= this.snapThreshold) {
this.thresholdExceeded = true;

0 comments on commit 885a6c4

Please sign in to comment.