Allow multiple swipeviews in the same document

.gitignore

@@ -1,2 +1,3 @@
 .DS_Store
-*-min.js
+*-min.js
+/node_modules/

Gruntfile.js

@@ -0,0 +1,42 @@
+module.exports = function(grunt) {
+
+  grunt.initConfig({
+    pkg: grunt.file.readJSON('package.json'),
+    connect: {
+        server: {
+            options: {
+                base: "",
+                port: 9999
+            }
+        }
+    },
+    uglify: {
+      options: {
+        banner: '/*! <%= pkg.name %> <%= pkg.version %> - <%= pkg.description %> */\n'
+      },
+      build: {
+        src: 'src/<%= pkg.name %>.js',
+        dest: 'dist/<%= pkg.name %>-<%= pkg.version %>.min.js'
+      }
+    },
+    jshint: {
+      all: {
+        src: ['src/<%= pkg.name %>.js']
+      }
+    },
+    watch: {
+      all: {
+        files: ['src/*.js', 'demo/*/*.js'],
+        tasks: ['default', 'dev']
+      }
+    }
+  });
+
+  grunt.loadNpmTasks('grunt-contrib-watch');
+  grunt.loadNpmTasks('grunt-contrib-connect');
+  grunt.loadNpmTasks('grunt-contrib-uglify');
+  grunt.loadNpmTasks('grunt-contrib-jshint');
+
+  grunt.registerTask('default', ['jshint', 'uglify']);
+  grunt.registerTask("dev", ["connect", "watch"]);
+};

README.md

@@ -1,5 +1,16 @@
-SwipeView v1.0 - 2012-08-25
-============================
+SwipeView v1.3.0 - 2013-09-28
+=============================
+
+- the SwipeView instanciation does not auto-bind anymore
+- Add bind() and unbind()
+- the old unbind() has been renamed to offAll()
+
+SwipeView v1.0.5 - 2013-07-04
+=============================
+
+Modified version of Matteo's SwipeView which allows vertical swipe (with the `vertical` option) and also allows multiple SwipeViews in the same document:
+
+example: Multiple SwipeViews in the same document + vertical swipe: [http://peutetre.github.io/SwipeView/demo/gallery7/](http://peutetre.github.io/SwipeView/demo/gallery7/)
 
 Virtually infinite loop-able horizontal carousel for desktop and mobile browsers.
 
@@ -11,4 +22,4 @@ eReader Demo: [http://cubiq.org/dropbox/SwipeView/demo/ereader](http://cubiq.org
 
 Inline Demo: [http://cubiq.org/dropbox/SwipeView/demo/inline](http://cubiq.org/dropbox/SwipeView/demo/inline)
 
-Screencast: [http://www.youtube.com/watch?v=Hhes5JHs8jQ](http://www.youtube.com/watch?v=Hhes5JHs8jQ)
+Screencast: [http://www.youtube.com/watch?v=Hhes5JHs8jQ](http://www.youtube.com/watch?v=Hhes5JHs8jQ)

demo/ereader/index.html

@@ -21,6 +21,7 @@
 		req = new XMLHttpRequest();
 
 	ereader = new SwipeView('#wrapper', { hastyPageFlip:true });
+  ereader.bind();
 
 	// Ajax request
 	req.open('GET', 'flowers.txt', true);
@@ -154,4 +155,4 @@
 	</div>
 	<div id="wrapper"></div>
 </body>
-</html>
+</html>

demo/gallery/index.html

@@ -71,6 +71,7 @@
 	];
 
 gallery = new SwipeView('#wrapper', { numberOfPages: slides.length });
+gallery.bind();
 
 // Load initial data
 for (i=0; i<3; i++) {
@@ -81,6 +82,10 @@
 	el.width = slides[page].width;
 	el.height = slides[page].height;
 	el.onload = function () { this.className = ''; }
+  // fixes for IE 
+  el.setAttribute("unselectable", "on");
+  el.ondragstart = function() { return false; };
+
 	gallery.masterPages[i].appendChild(el);
 
 	el = document.createElement('span');
@@ -123,4 +128,4 @@
 
 </script>
 </body>
-</html>
+</html>

demo/gallery/style.css

@@ -72,7 +72,7 @@ body {
 	background:rgba(255,255,255,0.4);
 }
 
-#swipeview-slider > div {
+.swipeview-slider > div {
 	position:relative;
 	display:-webkit-box;
 	display:-moz-box;
@@ -97,7 +97,7 @@ body {
 	overflow:hidden;
 }
 
-#swipeview-slider img {
+.swipeview-slider img {
 	display:block;
 	border:5px solid #eee;
 	-webkit-box-shadow:0 2px 6px #000;
@@ -124,7 +124,7 @@ body {
 	pointer-events:none;
 }
 
-#swipeview-slider span {
+.swipeview-slider span {
 	position:absolute;
 	bottom:0;
 	left:0;
@@ -165,7 +165,7 @@ body {
 	transform:translate(0,100%) translateZ(0);
 }
 
-#swipeview-slider .swipeview-active span {
+.swipeview-slider .swipeview-active span {
 	-webkit-transform:translate(0,0) translateZ(0);
 	-moz-transform:translate(0,0) translateZ(0);
 	-ms-transform:translate(0,0);
@@ -184,7 +184,7 @@ body {
 }
 
 #wrapper > div > .swipeview-loading img,
-#swipeview-slider img.loading {
+.swipeview-slider img.loading {
 	-webkit-transition-duration:0s;
 	opacity:0;
 }
@@ -202,4 +202,4 @@ body {
 	-o-transform:translate(0,100%);
 	-o-transform:translate(0,100%) translateZ(0);
 	transform:translate(0,100%) translateZ(0);
-}
+}

demo/gallery2/index.html

@@ -0,0 +1,117 @@
+<!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>
+    <div id="wrapper1" class='wrapper'></div>
+    <div id="wrapper2" class="wrapper"></div>
+    <div id="wrapper3" class="wrapper"></div>
+    <div id="wrapper4" class="wrapper"></div>
+    <div id="wrapper5" class="wrapper"></div>
+
+<script type="text/javascript">
+
+function getImgURL() {
+    return "http://lorempixel.com/186/125/?t=" + Math.ceil(Math.random()*100000);
+}
+
+function genData(size) {
+    var data = [], tmp = [], i=0, j=3;
+
+    for(var k=0; k<size; k++) {
+        tmp.push(getImgURL());
+        if (i<j) { i++; }
+        else {
+            tmp.push(getImgURL());
+            data.push({ imgs:tmp, height:125, width:186 });
+            i = 0; tmp = [];
+        }
+    }
+    return {
+        get: function (i) {
+            return data[i];
+        },
+        length : data.length
+    };
+}
+
+function generateSwipeView(id, dataO) {
+    var gallery = new SwipeView(id, {
+            hastyPageFlip:true,
+            numberOfPages: dataO.length
+        }), i, page;
+    gallery.bind();
+
+    function genImgs(container, page, d) {
+        var img, div;
+        for(var i=0; i< 5; i++) {
+            div = document.createElement('div');
+            div.className = 'container';
+            img = document.createElement('img');
+            img.className = 'loading';
+            img.src = d.get(page).imgs[i];
+            img.width = d.get(page).width;
+            img.height = d.get(page).height;
+            // fixes for IE 
+            img.setAttribute("unselectable", "on");
+            img.ondragstart = function() { return false; };
+            div.style.width = d.get(page).width + "px";
+            div.style.height = d.get(page).height + "px";
+            img.onload = function () { this.className = ''; }
+            div.appendChild(img);
+            container.appendChild(div);
+        }
+    }
+
+    for(i=0; i<3; i++) {
+        page = i==0 ? dataO.length-1 : i-1;
+        div = document.createElement('div');
+        div.className = 'set-container';
+        genImgs(div, page, dataO);
+        gallery.masterPages[i].appendChild(div);
+    }
+
+    function setImg(el, src) {
+        el.className = 'loading';
+        el.src = src;
+        el.onload = function () { this.className = ''; }
+    }
+
+    gallery.onFlip(function () {
+        var el,
+            upcoming,
+            i;
+
+        for (i=0; i<3; i++) {
+            upcoming = gallery.masterPages[i].dataset.upcomingPageIndex;
+
+            if (upcoming != gallery.masterPages[i].dataset.pageIndex) {
+                els = gallery.masterPages[i].querySelectorAll('img');
+                setImg(els[0], dataO.get(upcoming).imgs[0]);
+                setImg(els[1], dataO.get(upcoming).imgs[1]);
+                setImg(els[2], dataO.get(upcoming).imgs[2]);
+                setImg(els[3], dataO.get(upcoming).imgs[3]);
+                setImg(els[4], dataO.get(upcoming).imgs[4]);
+            }
+        }
+    });
+    return gallery;
+}
+
+var g1 = generateSwipeView("#wrapper1", genData(100));
+var g2 = generateSwipeView("#wrapper2", genData(100));
+var g3 = generateSwipeView("#wrapper3", genData(100));
+var g4 = generateSwipeView("#wrapper4", genData(100));
+var g5 = generateSwipeView("#wrapper5", genData(100));
+
+</script>
+</body>
+</html>

demo/gallery2/style.css

@@ -0,0 +1,83 @@
+html, body { height:100%; }
+body {
+	padding:0;
+	margin:0;
+	background:#333;
+	-webkit-user-select:none;
+	-moz-user-select:none;
+	-ms-user-select:none;
+	-o-user-select:none;
+	user-select:none;
+	-webkit-text-size-adjust:none;
+	-moz-text-size-adjust:none;
+	-ms-text-size-adjust:none;
+	-o-text-size-adjust:none;
+	text-size-adjust:none;
+	color:#eee;
+	font-family:helvetica;
+	font-size:12px;
+}
+
+.wrapper {
+	width:1024px;
+	min-width:320px;
+	height:145px;
+    margin:10px auto;
+	border: 5px solid rgb(43, 38, 38);
+}
+
+.swipeview-slider > div {
+	position:relative;
+	display:-webkit-box;
+	display:-moz-box;
+	display:-ms-box;
+	display:-o-box;
+	display:box;
+	-webkit-box-orient:vertical;
+	-moz-box-orient:vertical;
+	-ms-box-orient:vertical;
+	-o-box-orient:vertical;
+	box-orient:vertical;
+	-webkit-box-pack:center;
+	-moz-box-pack:center;
+	-ms-box-pack:center;
+	-o-box-pack:center;
+	box-pack:center;
+	-webkit-box-align:center;
+	-mox-box-align:center;
+	-ms-box-align:center;
+	-o-box-align:center;
+	box-align:center;
+	overflow:hidden;
+}
+
+.swipeview-slider img {
+	display:block;
+	-webkit-transition-duration:.4s;
+	-moz-transition-duration:.4s;
+	-ms-transition-duration:.4s;
+	-o-transition-duration:.4s;
+	transition-duration:.4s;
+	-webkit-transition-property:opacity;
+	-moz-transition-property:opacity;
+	-ms-transition-property:opacity;
+	-o-transition-property:opacity;
+	transition-property:opacity;
+	opacity:1;
+	pointer-events:none;
+    visibility:visible;
+}
+
+.swipeview-slider .set-container {
+    margin:auto;
+}
+
+.swipeview-slider .container {
+    background: rgb(197, 197, 197);
+    float: left;
+    margin: 0 5px;
+}
+
+.swipeview-slider img.loading {
+    visibility:hidden;
+}