Skip to content

Commit

Permalink
changed html element structure back to 2 containers, changed setup lo…
Browse files Browse the repository at this point in the history 
…gic, removed debouncing, updated copyright
  • Loading branch information
Brad Birdsall committed Apr 14, 2012
1 parent 0aeeb3b commit 0709419
Show file tree
Hide file tree
Showing 4 changed files with 100 additions and 142 deletions.
32 changes: 18 additions & 14 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,16 @@ Swipe is a responsive, lightweight slider with accurate **1:1** touch movement.
Swipe only needs to follow a simple pattern. Here is an example:

``` html
<div id='slider'>
<div></div>
<div></div>
<div></div>
<div id='slider' class='swipe'>
<div class='swipe-wrap'>
<div></div>
<div></div>
<div></div>
</div>
</div>
```

Above is the initial required structure– a series of elements wrapped in a container. Place any content you want within the 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. Place any content you want within the items. The containing div will need to be passed to a new Swipe object like so:

``` js
window.mySwipe = new Swipe(document.getElementById('slider'));
Expand All @@ -23,16 +25,18 @@ I always place this at the bottom of the page, externally, to verify the page is
Also Swipe needs just a few styles added to your stylesheet:

``` css
.swipe-active {
overflow:hidden;
position:relative;
.swipe {
overflow: hidden;
visibility: hidden;
}
.swipe-active > * {
display:block;
visibility:hidden;
position:absolute;
top:0;
left:0;
.swipe-wrap {
overflow: hidden;
position: relative;
}
.swipe-wrap div {
float:left;
width:100%;
position: relative;
}
```

Expand Down
100 changes: 38 additions & 62 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,16 +8,18 @@

/* Swipe 2 required styles */

.swipe-active {
overflow:hidden;
position:relative;
.swipe {
overflow: hidden;
visibility: hidden;
}
.swipe-active > * {
display:block;
visibility:hidden;
position:absolute;
top:0;
left:0;
.swipe-wrap {
overflow: hidden;
position: relative;
}
.swipe-wrap div {
float:left;
width:100%;
position: relative;
}

/* END required styles */
Expand All @@ -29,28 +31,32 @@

<h1>Swipe 2</h1>

<div id='mySwipe' style='height:245px'>
<div><b>0</b></div>
<div><b>1</b></div>
<div><b>2</b></div>
<div><b>3</b></div>
<div><b>4</b></div>
<div><b>5</b></div>
<div><b>6</b></div>
<div><b>7</b></div>
<div><b>8</b></div>
<div><b>9</b></div>
<div><b>10</b></div>
<div><b>11</b></div>
<div><b>12</b></div>
<div><b>13</b></div>
<div><b>14</b></div>
<div><b>15</b></div>
<div><b>16</b></div>
<div><b>17</b></div>
<div><b>18</b></div>
<div><b>19</b></div>
<div><b>20</b></div>


<div id='mySwipe' class='swipe'>
<div class='swipe-wrap'>
<div><b>0</b></div>
<div><b>1</b></div>
<div><b>2</b></div>
<div><b>3</b></div>
<div><b>4</b></div>
<div><b>5</b></div>
<div><b>6</b></div>
<div><b>7</b></div>
<div><b>8</b></div>
<div><b>9</b></div>
<div><b>10</b></div>
<div><b>11</b></div>
<div><b>12</b></div>
<div><b>13</b></div>
<div><b>14</b></div>
<div><b>15</b></div>
<div><b>16</b></div>
<div><b>17</b></div>
<div><b>18</b></div>
<div><b>19</b></div>
<div><b>20</b></div>
</div>
</div>


Expand All @@ -59,7 +65,6 @@ <h1>Swipe 2</h1>

<button onclick='mySwipe.prev()'>prev</button>
<button onclick='mySwipe.next()'>next</button>
<button id='hide'>hide overflow</button>

</div>

Expand All @@ -72,35 +77,6 @@ <h1>Swipe 2</h1>

var elem = document.getElementById('mySwipe'); // $('#mySwipe')[0] in jQuery

window.mySwipe = new Swipe(elem, {
startSlide: 5,
speed: 500,
continuous: false,
disableScroll: true,
callback: function(index, elem) {
console.log('callback fired, index is ' + index);
},
transitionEnd: function(index, elem) {
console.log('transition ended');
}
});







/* show/hide overflow */
document.getElementById('hide').onclick = function() {
var button = mySwipe.element, overflow = button.style.overflow;
if (overflow == 'hidden') {
button.style.overflow = 'visible';
this.innerHTML = 'hide overflow';
} else {
button.style.overflow = 'hidden';
this.innerHTML = 'show overflow';
}
}
window.mySwipe = new Swipe(elem);

</script>
5 changes: 0 additions & 5 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,9 +46,6 @@ a {
}


#mySwipe {
overflow: visible;
}
#mySwipe div b {
display:block;
background:#fff;
Expand All @@ -60,6 +57,4 @@ a {
padding:100px 10px;
border:1px solid;
border-color:#CDD2D6 #BFC6CB #B3BBC1 #BFC6CB;
/*border-radius:2px;*/
/*box-shadow:0 1px 1px rgba(0,0,0,.08);*/
}
105 changes: 44 additions & 61 deletions swipe.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
* Swipe 2.0
*
* Brad Birdsall, Prime
* Copyright 2011, Licensed GPL & MIT
* Copyright 2012, Licensed GPL & MIT
*
*/

Expand All @@ -14,10 +14,8 @@ window.Swipe = function(element, options) {
if (!element) return;

// reference dom elements
this.element = element;

// add .swipe-active class
element.className += ' swipe-active';
this.container = element;
this.element = this.container.children[0];

// simple feature detection
this.browser = {
Expand Down Expand Up @@ -53,21 +51,6 @@ window.Swipe = function(element, options) {
// begin auto slideshow
this.begin();

// debounce resize events
var debounce = function(fn) {
var timeout;
return function debounced() {
var obj = this, args = arguments;
function delayed() {
fn.apply(obj, args);
timeout = null;
};
if (timeout) clearTimeout(timeout);
timeout = setTimeout(delayed, 400);
};
}
this.resize = debounce(function() { _this.setup(); });

// add event listeners
if (this.element.addEventListener) {
if (!!this.browser.touch) {
Expand All @@ -81,12 +64,12 @@ window.Swipe = function(element, options) {
this.element.addEventListener('oTransitionEnd', this, false);
this.element.addEventListener('transitionend', this, false);
}
window.addEventListener('resize', this.resize, false);
window.addEventListener('resize', this, false);
}

// to play nice with old IE
else {
window.onresize = this.resize;
window.onresize = this.setup;
}

};
Expand All @@ -104,42 +87,41 @@ Swipe.prototype = {
if (this.length < 2) return;

// determine width of each slide
this.width = this.element.getBoundingClientRect().width || this.element.offsetWidth;
this.width = this.container.getBoundingClientRect().width || this.container.offsetWidth;

// return immediately if measurement fails
if (!this.width) return;

// create variable to find tallest slide
var tempHeight = 0;

// store array of slides before, current, and after
var refArray = [[],[],[]];

this.element.style.width = (this.slides.length * this.width) + 'px';

// stack elements
for (var index = this.length - 1; index > -1; index--) {

var elem = this.slides[index],
height = elem.getBoundingClientRect().height || elem.offsetHeight;
var elem = this.slides[index];

elem.style.width = this.width + 'px';
elem.setAttribute('data-index', index);
elem.style.visibility = 'visible';

// replace tempHeight if this slides height is greater
tempHeight = tempHeight < height ? height : tempHeight;
if (this.browser.transitions) {
elem.style.left = (index * -this.width) + 'px';
}

// add this index to the reference array
refArray[this.index > index ? 0 : (this.index < index ? 2 : 1)].push(index); // 0:before 1:equal 2:after
// add this index to the reference array 0:before 1:equal 2:after
refArray[this.index > index ? 0 : (this.index < index ? 2 : 1)].push(index);

}

// if no height given, set height of container based on tallest slide (required with absolute positioning)
if (!this.height) this.element.style.height = tempHeight + 'px';
if (this.browser.transitions) {
// stack left, current, and right slides
this._slide(refArray[0],-this.width,0,1);
this._slide(refArray[1],0,0,1);
this._slide(refArray[2],this.width,0,1);
}

// stack left, current, and right slides
this._slide(refArray[0],-this.width,0,1);
this._slide(refArray[1],0,0,1);
this._slide(refArray[2],this.width,0,1);
this.container.style.visibility = 'visible';

},

Expand Down Expand Up @@ -364,17 +346,23 @@ Swipe.prototype = {

if (from == to) return; // do nothing if already on requested slide

var toStack = Math.abs(from-to) - 1,
direction = Math.abs(from-to) / (from-to), // 1:right -1:left
inBetween = [];

if (this.browser.transitions) {
var toStack = Math.abs(from-to) - 1,
direction = Math.abs(from-to) / (from-to), // 1:right -1:left
inBetween = [];

while (toStack--) inBetween.push( (to > from ? to : from) - toStack - 1 );
while (toStack--) inBetween.push( (to > from ? to : from) - toStack - 1 );

// stack em
this._slide(inBetween,this.width * direction,0,1);
// stack em
this._slide(inBetween,this.width * direction,0,1);

// now slide from and to in the proper direction
this._slide([from,to],this.width * direction,this.speed,0);
// now slide from and to in the proper direction
this._slide([from,to],this.width * direction,this.speed,0);
}
else {
this._animate(from*-this.width, to * -this.width, this.speed)
}

this.index = to;

Expand All @@ -392,22 +380,16 @@ Swipe.prototype = {
var elem = _slides[nums[l]];

if (elem) { // if the element at slide number exists

if (this.browser.transitions) {

var style = elem.style,
xval = (dist + ( _setting != 1 ? this.cache[nums[l]] : 0) );
var style = elem.style,
xval = (dist + ( _setting != 1 ? this.cache[nums[l]] : 0) );

// set duration speed (0 represents 1-to-1 scrolling)
style.webkitTransitionDuration = style.MozTransitionDuration = style.msTransitionDuration = style.OTransitionDuration = style.transitionDuration = (speed ? speed : 0) + 'ms';
// set duration speed (0 represents 1-to-1 scrolling)
style.webkitTransitionDuration = style.MozTransitionDuration = style.msTransitionDuration = style.OTransitionDuration = style.transitionDuration = (speed ? speed : 0) + 'ms';

// translate to given index position
style.webkitTransform = 'translate3d(' + xval + 'px,0,0)';
style.msTransform = style.MozTransform = style.OTransform = 'translateX(' + xval + 'px)';

} else {
this._animate(elem, this.cache[nums[l]], dist + ( _setting != 1 ? this.cache[nums[l]] : 0), speed ? speed : 0);
}
// translate to given index position
style.webkitTransform = 'translate3d(' + xval + 'px,0,0)';
style.msTransform = style.MozTransform = style.OTransform = 'translateX(' + xval + 'px)';

if (_setting == 1) this.cache[nums[l]] = dist;
else if (_setting == 0) this.cache[nums[l]] += dist;
Expand All @@ -418,8 +400,9 @@ Swipe.prototype = {

},

_animate: function(elem, from, to, speed) {
_animate: function(from, to, speed) {

var elem = this.element;

if (!speed) { // if not an animation, just reposition

Expand Down

0 comments on commit 0709419

Please sign in to comment.