Permalink
Browse files

don't depend on children being ul/li

instead trying to work with any elements that follow the same structure
  • Loading branch information...
1 parent 75d912c commit 7bc592ae838a41a1fe569c189f0e9a97651b6ce8 @gerrit gerrit committed Oct 14, 2011
Showing with 25 additions and 8 deletions.
  1. +1 −1 README.md
  2. +17 −0 index.html
  3. +1 −1 style.css
  4. +5 −5 swipe.js
  5. +1 −1 swipe.min.js
View
2 README.md
@@ -19,7 +19,7 @@ Swipe only needs to follow a simple pattern. Here is an example:
</div>
```
-Above is the initial required structure– an unordered list wrapped in a containing div *(more on the `display:block/none` reasoning below)*. Place any content you want within the list items. The containing div will need to be passed to a new Swipe object like so:
+Above is the initial required structure– a series of elements wrapped in two containers. An unordered list makes sense here, but this can be any combination of elements that has the same structure. *(more on the `display:block/none` reasoning below)*.Place any content you want within the items. The containing div will need to be passed to a new Swipe object like so:
``` js
View
17 index.html
@@ -50,12 +50,29 @@
<a href='#' onclick='slider3.next();return false;'>next</a>
<br><br>
+<h2>Arbitrary Elements</h2>
+
+<div id='slider4' class='swipe'>
+ <div>
+ <div style='display:block'><div>1</div></div>
+ <div style='display:none'><div>2</div></div>
+ <div style='display:none'><div>3</div></div>
+ <div style='display:none'><div>4</div></div>
+ <div style='display:none'><div>5</div></div>
+ </div>
+</div>
+
+<a href='#' onclick='slider4.prev();return false;'>prev</a>
+<a href='#' onclick='slider4.next();return false;'>next</a>
+<br><br>
+
<script src='swipe.js'></script>
<script>
new Swipe(document.getElementById('slider'));
new Swipe(document.getElementById('slider2'));
var slider3 = new Swipe(document.getElementById('slider3'));
+var slider4 = new Swipe(document.getElementById('slider4'));
</script>
</body>
View
2 style.css
@@ -36,7 +36,7 @@ a {
.swipe {
padding-bottom:20px;
}
-.swipe li div {
+.swipe li div, .swipe div div div {
margin:0 10px;
padding:50px 10px;
background:#1db1ff;
View
10 swipe.js
@@ -22,7 +22,7 @@ window.Swipe = function(element, options) {
// reference dom elements
this.container = element;
- this.element = this.container.getElementsByTagName('ul')[0]; // the slide pane
+ this.element = this.container.children[0]; // the slide pane
// static css
this.container.style.overflow = 'hidden';
@@ -44,14 +44,14 @@ window.Swipe = function(element, options) {
this.element.addEventListener('transitionend', this, false);
window.addEventListener('resize', this, false);
-}
+};
Swipe.prototype = {
setup: function() {
// get and measure amt of slides
- this.slides = this.element.getElementsByTagName('li');
+ this.slides = this.element.children;
this.length = this.slides.length;
// return immediately if their are less than two slides
@@ -173,7 +173,7 @@ Swipe.prototype = {
// set initial timestamp of touch sequence
time: Number( new Date() )
- }
+ };
// used for testing first onTouchMove event
this.isScrolling = undefined;
@@ -241,4 +241,4 @@ Swipe.prototype = {
}
-}
+};
View
2 swipe.min.js
@@ -5,4 +5,4 @@
* Copyright 2011, Licensed GPL & MIT
*
*/
-window.Swipe=function(a,b){if(!a)return null;var c=this;this.options=b||{},this.index=this.options.startSlide||0,this.speed=this.options.speed||300,this.callback=this.options.callback||function(){},this.delay=this.options.auto||0,this.container=a,this.element=this.container.getElementsByTagName("ul")[0],this.container.style.overflow="hidden",this.element.style.listStyle="none",this.setup(),this.start(),this.element.addEventListener("touchstart",this,!1),this.element.addEventListener("touchmove",this,!1),this.element.addEventListener("touchend",this,!1),this.element.addEventListener("webkitTransitionEnd",this,!1),this.element.addEventListener("msTransitionEnd",this,!1),this.element.addEventListener("oTransitionEnd",this,!1),this.element.addEventListener("transitionend",this,!1),window.addEventListener("resize",this,!1)},Swipe.prototype={setup:function(){this.slides=this.element.getElementsByTagName("li"),this.length=this.slides.length;if(this.length<2)return null;this.container.style.visibility="hidden",this.width=this.container.getBoundingClientRect().width,this.element.style.width=this.slides.length*this.width+"px";var a=this.slides.length;while(a--){var b=this.slides[a];b.style.width=this.width+"px",b.style.display="table-cell",b.style.verticalAlign="top"}this.slide(this.index,0),this.container.style.visibility="visible"},slide:function(a,b){var c=this.element.style;c.webkitTransitionDuration=c.MozTransitionDuration=c.msTransitionDuration=c.OTransitionDuration=c.transitionDuration=b+"ms",c.webkitTransform="translate3d("+ -(a*this.width)+"px,0,0)",c.msTransform=c.MozTransform=c.OTransform="translateX("+ -(a*this.width)+"px)",this.index=a},getPos:function(){return this.index},prev:function(a){this.delay=a||0,clearTimeout(this.interval),this.index&&this.slide(this.index-1,this.speed)},next:function(a){this.delay=a||0,clearTimeout(this.interval),this.index<this.length-1?this.slide(this.index+1,this.speed):this.slide(0,this.speed)},start:function(){var a=this;this.interval=this.delay?setTimeout(function(){a.next(a.delay)},this.delay):0},handleEvent:function(a){switch(a.type){case"touchstart":this.onTouchStart(a);break;case"touchmove":this.onTouchMove(a);break;case"touchend":this.onTouchEnd(a);break;case"webkitTransitionEnd":case"msTransitionEnd":case"oTransitionEnd":case"transitionend":this.transitionEnd(a);break;case"resize":this.setup()}},transitionEnd:function(a){this.delay&&this.start(),this.callback(a,this.index,this.slides[this.index])},onTouchStart:function(a){clearTimeout(this.interval),this.start={pageX:a.touches[0].pageX,pageY:a.touches[0].pageY,time:Number(new Date)},this.isScrolling=undefined,this.deltaX=0,this.element.style.webkitTransitionDuration=0},onTouchMove:function(a){this.deltaX=a.touches[0].pageX-this.start.pageX,typeof this.isScrolling=="undefined"&&(this.isScrolling=!!(this.isScrolling||Math.abs(this.deltaX)<Math.abs(a.touches[0].pageY-this.start.pageY))),this.isScrolling||(a.preventDefault(),this.deltaX=this.deltaX/(!this.index&&this.deltaX>0||this.index==this.length-1&&this.deltaX<0?Math.abs(this.deltaX)/this.width+1:1),this.element.style.webkitTransform="translate3d("+(this.deltaX-this.index*this.width)+"px,0,0)")},onTouchEnd:function(a){var b=Number(new Date)-this.start.time<250&&Math.abs(this.deltaX)>20||Math.abs(this.deltaX)>this.width/2,c=!this.index&&this.deltaX>0||this.index==this.length-1&&this.deltaX<0;this.isScrolling||this.slide(this.index+(b&&!c?this.deltaX<0?1:-1:0),this.speed)}}
+window.Swipe=function(b,a){if(!b){return null;}var c=this;this.options=a||{};this.index=this.options.startSlide||0;this.speed=this.options.speed||300;this.callback=this.options.callback||function(){};this.delay=this.options.auto||0;this.container=b;this.element=this.container.children[0];this.container.style.overflow="hidden";this.element.style.listStyle="none";this.setup();this.start();this.element.addEventListener("touchstart",this,false);this.element.addEventListener("touchmove",this,false);this.element.addEventListener("touchend",this,false);this.element.addEventListener("webkitTransitionEnd",this,false);this.element.addEventListener("msTransitionEnd",this,false);this.element.addEventListener("oTransitionEnd",this,false);this.element.addEventListener("transitionend",this,false);window.addEventListener("resize",this,false);};Swipe.prototype={setup:function(){this.slides=this.element.children;this.length=this.slides.length;if(this.length<2){return null;}this.container.style.visibility="hidden";this.width=this.container.getBoundingClientRect().width;this.element.style.width=(this.slides.length*this.width)+"px";var a=this.slides.length;while(a--){var b=this.slides[a];b.style.width=this.width+"px";b.style.display="table-cell";b.style.verticalAlign="top";}this.slide(this.index,0);this.container.style.visibility="visible";},slide:function(a,c){var b=this.element.style;b.webkitTransitionDuration=b.MozTransitionDuration=b.msTransitionDuration=b.OTransitionDuration=b.transitionDuration=c+"ms";b.webkitTransform="translate3d("+-(a*this.width)+"px,0,0)";b.msTransform=b.MozTransform=b.OTransform="translateX("+-(a*this.width)+"px)";this.index=a;},getPos:function(){return this.index;},prev:function(a){this.delay=a||0;clearTimeout(this.interval);if(this.index){this.slide(this.index-1,this.speed);}},next:function(a){this.delay=a||0;clearTimeout(this.interval);if(this.index<this.length-1){this.slide(this.index+1,this.speed);}else{this.slide(0,this.speed);}},start:function(){var a=this;this.interval=(this.delay)?setTimeout(function(){a.next(a.delay);},this.delay):0;},handleEvent:function(a){switch(a.type){case"touchstart":this.onTouchStart(a);break;case"touchmove":this.onTouchMove(a);break;case"touchend":this.onTouchEnd(a);break;case"webkitTransitionEnd":case"msTransitionEnd":case"oTransitionEnd":case"transitionend":this.transitionEnd(a);break;case"resize":this.setup();break;}},transitionEnd:function(a){if(this.delay){this.start();}this.callback(a,this.index,this.slides[this.index]);},onTouchStart:function(a){clearTimeout(this.interval);this.start={pageX:a.touches[0].pageX,pageY:a.touches[0].pageY,time:Number(new Date())};this.isScrolling=undefined;this.deltaX=0;this.element.style.webkitTransitionDuration=0;},onTouchMove:function(a){this.deltaX=a.touches[0].pageX-this.start.pageX;if(typeof this.isScrolling=="undefined"){this.isScrolling=!!(this.isScrolling||Math.abs(this.deltaX)<Math.abs(a.touches[0].pageY-this.start.pageY));}if(!this.isScrolling){a.preventDefault();this.deltaX=this.deltaX/((!this.index&&this.deltaX>0||this.index==this.length-1&&this.deltaX<0)?(Math.abs(this.deltaX)/this.width+1):1);this.element.style.webkitTransform="translate3d("+(this.deltaX-this.index*this.width)+"px,0,0)";}},onTouchEnd:function(c){var b=Number(new Date())-this.start.time<250&&Math.abs(this.deltaX)>20||Math.abs(this.deltaX)>this.width/2,a=!this.index&&this.deltaX>0||this.index==this.length-1&&this.deltaX<0;if(!this.isScrolling){this.slide(this.index+(b&&!a?(this.deltaX<0?1:-1):0),this.speed);}}};

0 comments on commit 7bc592a

Please sign in to comment.