/**
* ---------------------------- DRAGEND JS -------------------------------------
*
* Version: 0.2.0_rc1
* https://github.com/Stereobit/dragend
* Copyright (c) 2012 Tobias Otte, t@stereob.it
*
* Licensed under MIT-style license:
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*
*/
;(function( window ) {
"use strict";
function init( $, Hammer ) {
// Welcome To dragend JS
// =====================
//
// dragend JS is a swipe plugin for jQuery (http://jquery.com/). It's open
// source (https://github.com/Stereobit/dragend) and uses hammer.js
// (http://eightmedia.github.com/hammer.js/) for observing multi-touch
// gestures. You can use dragend JS in fullscreen or boxed mode.
//
// The current version is 0.2.0_rc2
//
// Usage
// =====================
//
// To activate dragend JS just call the function on a jQuery element
//
// $("#swipe-container").dragend();
//
// You could rather pass in a options object or a string to bump on of the
// following behaviors: "up", "down", "left", "right" for swiping in one of
// these directions, "page" with the page number as second argument to go to a
// explicit page and without any value to go to the first page
//
// Settings
// =====================
//
// You can use the following options:
//
// * pageClass: classname selector for all elments that should provide a page
// * direction: "horizontal" or "vertical"
// * minDragDistance: minuimum distance (in pixel) the user has to drag
// to trigger swip
// * scribe: pixel value for a possible scribe
// * onSwipeStart: callback function before the animation
// * onSwipeEnd: callback function after the animation
// * onDrag: callback on drag
// * onDragEnd: callback on dragend
// * borderBetweenPages: if you need space between pages add a pixel value
// * duration
// * hammerSettings
var
noop = function() {},
// Default setting
defaultSettings = {
pageClass : "dragend-page",
direction : "horizontal",
minDragDistance : "40",
onSwipeStart : noop,
onSwipeEnd : noop,
onDrag : noop,
onDragEnd : noop,
keyboardNavigation : false,
itemsInPage : 1,
scribe : 0,
borderBetweenPages : 0,
duration : 300,
hammerSettings : {
drag_min_distance: 0,
css_hacks : false,
prevent_default : true
}
},
keycodes = {
37: "left",
38: "up",
39: "right",
40: "down"
},
errors = {
handling: "Dragend JS detected some problems with the event handling. Maybe the user-drag CSS attribute on images can help",
pages: "No pages found",
hammer: "It seems like Hammer JS is not be included before dragend JS"
},
containerStyles = {
overflow: "hidden",
padding : 0
},
setStyles = function( element, styles ) {
var property,
value;
for ( property in styles ) {
if ( styles.hasOwnProperty(property) ) {
value = styles[property];
switch ( property ) {
case "height":
case "width":
case "marginLeft":
case "marginTop":
value += "px";
}
element.style[property] = value;
}
}
},
extend = function( destination, source ) {
var property;
for ( property in source ) {
destination[property] = source[property];
}
return destination;
},
proxy = function( fn, context ) {
return function() {
return fn.apply( context, Array.prototype.slice.call(arguments) );
};
},
getElementsByClassName = function( className, root ) {
var elements = [],
allElements;
if ( document.querySelector && document.querySelectorAll ) {
elements = root.getElementsByClassName( className );
} else {
allElements = root.getElementsByTagName('*');
for ( var i = 0; i < allElements.length; i++ ) {
if ((' ' + allElements[i].className + ' ').indexOf(' ' + className +' ') > -1 ) {
elements.push( allElements[i] );
}
}
}
return Array.prototype.slice.call( elements );
},
animate = function( element, propery, to, speed, callback ) {
var start = + new Date(),
from = parseInt(element.style[propery], 10),
timer = setInterval(function() {
var timeGone = + new Date() - start,
value;
if (timeGone >= speed) {
value = to;
callback();
clearInterval( timer );
} else {
value = Math.round((( (to - from) * (Math.floor((timeGone / speed) * 100) / 100) ) + from));
}
element.style[propery] = value + "px";
}, 5);
},
supports = (function() {
var div = document.createElement('div'),
vendors = 'Khtml Ms O Moz Webkit'.split(' '),
len = vendors.length;
return function( prop ) {
if ( prop in div.style ) return true;
prop = prop.replace(/^[a-z]/, function(val) {
return val.toUpperCase();
});
while( len-- ) {
if ( vendors[len] + prop in div.style ) {
// browser supports box-shadow. Do what you need.
// Or use a bang (!) to test if the browser doesn't.
return true;
}
}
return false;
};
})(),
Dragend = function( container, settings ) {
var defaultSettingsCopy = extend( {}, defaultSettings );
this.settings = extend( defaultSettingsCopy, settings );
this.container = container;
this.pageContainer = document.createElement( "div" );
this.scrollBorder = { x: 0, y: 0 };
this.page = 0;
this.preventScroll = false;
this.pageCssProperties = {
margin: 0
};
this.pageContainer.innerHTML = this.container.innerHTML;
this.container.innerHTML = null;
this.container.appendChild( this.pageContainer );
// Initialisation
setStyles(this.container, containerStyles);
this._observe();
// Give the DOM some time to update ...
window.setTimeout( proxy(function() {
this.updateInstance( settings );
}, this), 10 );
},
// ### Scroll translate
//
// Animation when translate is supported
//
// Takes:
// x and y values to go with
_scrollTransform = function( coordinates ) {
if ( this.settings.direction === "horizontal" ) {
setStyles( this.pageContainer, {
"-webkit-transform": "translateX(" + coordinates.x + "px)",
"-moz-transform": "translateX(" + coordinates.x + "px)",
"-ms-transform": "translateX(" + coordinates.x + "px)",
"-0-transform": "translateX(" + coordinates.x + "px)",
"transform": "translateX(" + coordinates.x + "px)"
});
} else if (this.settings.direction === "vertical" ) {
setStyles( this.pageContainer, {
"-webkit-transform": "translateY(" + coordinates.y + "px)",
"-moz-transform": "translateY(" + coordinates.y + "px)",
"-ms-transform": "translateY(" + coordinates.y + "px)",
"-o-transform": "translateY(" + coordinates.y + "px)",
"transform": "translateY(" + coordinates.y + "px)"
});
}
},
// ### Animated scroll with translate support
_animateScrollTransform = function() {
setStyles( this.pageContainer, {
"-webkit-transition": "-webkit-transform " + this.settings.duration + "ms ease-out",
"-moz-transition": "-moz-transform " + this.settings.duration + "ms ease-out",
"-ms-transition": "-ms-transform " + this.settings.duration + "ms ease-out",
"-o-transition": "-o-transform " + this.settings.duration + "ms ease-out",
"transition": "transform " + this.settings.duration + "ms ease-out"
});
this._scroll({
x: - this.scrollBorder.x,
y: - this.scrollBorder.y
});
window.setTimeout( proxy(afterScrollTranslate, this), this.settings.duration );
},
afterScrollTranslate = function() {
this._onSwipeEnd();
setStyles( this.pageContainer, {
"-webkit-transition": "-webkit-transform 0"
});
},
// ### Scroll fallback
//
// Animation lookup table when translate isn't supported
//
// Takes:
// x and y values to go with
_scrollWithoutTranslate = function( coordinates ) {
if ( this.settings.direction === "horizontal") {
setStyles(this.pageContainer, {
"marginLeft": coordinates.x
});
} else if ( this.settings.direction === "vertical" ) {
setStyles(this.pageContainer, {
"marginTop": coordinates.y
});
}
},
// ### Animated scroll without translate support
_animateScrollWithoutTranslate = function() {
var property,
value;
this.activeElement = this.pages[this.page * this.settings.itemsInPage];
if ( this.settings.direction === "horizontal") {
property = "marginLeft";
value = - this.scrollBorder.x;
} else if ( this.settings.direction === "vertical" ) {
property = "marginTop";
value = - this.scrollBorder.y;
}
animate( this.pageContainer, property, value, this.settings.duration, proxy( this._onSwipeEnd, this ));
};
// ### Check translate support
( function() {
var scroll,
animateScroll;
if ( supports('transform') ) {
scroll = _scrollTransform;
animateScroll = _animateScrollTransform;
} else {
scroll = _scrollWithoutTransform;
animateScroll = _animateScrollWithoutTranslate;
}
extend( Dragend.prototype, {
"_scroll": scroll,
"_animateScroll": animateScroll
});
})();
extend(Dragend.prototype, {
// Private functions
// =================
// ### Overscroll lookup table
//
// Checks if its the last or first page to slow down the scrolling if so
//
// Takes:
// Drag event
_checkOverscroll: function( direction, x, y ) {
var coordinates = {
x: x,
y: y,
overscroll: true
};
switch ( direction ) {
case "right":
if ( !this.scrollBorder.x && this._checkGestureDirection( direction ) ) {
Math.round( coordinates.x = (x - this.scrollBorder.x) / 5 );
return coordinates;
}
break;
case "left":
if ( (this.pagesCount - 1) * this.pageDimentions.width <= this.scrollBorder.x ) {
coordinates.x = Math.round( - ((Math.ceil(this.pagesCount) - 1) * (this.pageDimentions.width + this.settings.borderBetweenPages)) + x / 5 );
return coordinates;
}
break;
case "down":
if ( !this.scrollBorder.y && this._checkGestureDirection( direction )) {
coordinates.y = Math.round( (y - this.scrollBorder.y) / 5 );
return coordinates;
}
break;
case "up":
if ( (this.pagesCount - 1) * this.pageDimentions.height <= this.scrollBorder.y ) {
coordinates.y = Math.round( - ((Math.ceil(this.pagesCount) - 1) * (this.pageDimentions.height + this.settings.borderBetweenPages)) + y / 5 );
return coordinates;
}
break;
}
return {
x: x - this.scrollBorder.x,
y: y - this.scrollBorder.y,
overscroll: false
};
},
// Observe
//
// Sets the observers for drag, resize and key events
_observe: function() {
if (!Hammer) {
throw new Error(errors.hammer);
}
var hammer = new Hammer(this.container, this.settings.hammerSettings);
hammer.on("drag", proxy( this._onDrag, this ))
.on( "dragend", proxy( this._onDragend, this ));
Hammer.event.bindDom(window, "resize", proxy( this._sizePages, this ));
if ( this.settings.keyboardNavigation ) {
Hammer.event.bindDom(document.body, "keydown", proxy( this._onKeydown, this ));
}
},
_onDrag: function( event ) {
var gesture,
coordinates;
event.stopPropagation();
if ( event.gesture ) {
gesture = event.gesture;
coordinates = this._checkOverscroll( gesture.direction, gesture.deltaX, gesture.deltaY );
this.settings.onDrag.call( this, this.activeElement, gesture, coordinates.overscroll );
} else {
throw new Error(errors.handling);
}
if ( !this.preventScroll ) {
this._scroll( coordinates );
}
},
_onDragend: function( event ) {
var gesture;
if (event.preventDefault) {
event.preventDefault();
} else if (event.preventManipulation) {
event.preventManipulation();
}
if (event.gesture) {
gesture = event.gesture;
} else {
throw new Error(errors.handling);
}
if ( event.gesture.distance > this.settings.minDragDistance && this._checkGestureDirection( gesture.direction )) {
this.swipe( gesture.direction );
} else {
this._scrollToPage();
}
this.settings.onDragEnd.call( this, this.container, this.activeElement, this.page );
},
_onKeydown: function( event ) {
var direction = keycodes[event.keyCode];
if ( direction ) {
this._scrollToPage(direction);
}
},
_checkGestureDirection: function( direction ) {
if (((direction === "left" || direction === "right") && this.settings.direction === "horizontal") ||
((direction === "up" || direction === "down") && this.settings.direction === "vertical") ) {
return true;
}
},
setHorizontalContainerCssValues: function() {
extend( this.pageCssProperties, {
"cssFloat" : "left",
"overflowY": "auto",
"overflowX": "hidden",
"padding" : 0,
"display" : "block"
});
setStyles(this.pageContainer, {
"overflow" : "hidden",
"width" : (this.pageDimentions.width + this.settings.borderBetweenPages) * this.pagesCount,
"boxSizing" : "content-box",
"-webkit-backface-visibility": "hidden",
"-webkit-perspective" : 1000,
"margin" : 0,
"padding" : 0
});
},
setVerticalContainerCssValues: function() {
extend( this.pageCssProperties, {
"overflow": "hidden",
"padding" : 0,
"display" : "block"
});
setStyles(this.pageContainer, {
"padding-bottom" : this.settings.scribe,
"boxSizing" : "content-box",
"-webkit-backface-visibility" : "hidden",
"-webkit-perspective" : 1000,
"margin" : 0
});
},
setContainerCssValues: function(){
switch ( this.settings.direction ) {
case "horizontal":
this.setHorizontalContainerCssValues();
break;
case "vertical":
this.setVerticalContainerCssValues();
break;
}
},
// ### Calculate page dimentions
//
// Updates the page dimentions values
_setPageDimentions: function() {
var width = this.container.offsetWidth,
height = this.container.offsetHeight;
if ( this.settings.direction === "horizontal" ) {
width = width - parseInt( this.settings.scribe, 10 );
} else {
height = height - parseInt( this.settings.scribe, 10 );
}
this.pageDimentions = {
width : width,
height: height
};
},
// ### Size pages
_sizePages: function() {
var pagesCount = this.pages.length;
this._setPageDimentions();
this.setContainerCssValues();
if ( this.settings.direction === "horizontal" ) {
extend( this.pageCssProperties, {
height: this.pageDimentions.height,
width : this.pageDimentions.width / this.settings.itemsInPage
});
} else {
extend( this.pageCssProperties, {
height: this.pageDimentions.height / this.settings.itemsInPage,
width : this.pageDimentions.width
});
}
for (var i = 0; i < pagesCount; i++) {
setStyles(this.pages[i], this.pageCssProperties);
}
},
// ### Callculate new page
//
// Update global values for specific swipe action
//
// Takes direction and, if specific page is used the pagenumber
_calcNewPage: function(direction, pageNumber) {
switch ( direction ) {
case "up":
if ( this.page < this.pagesCount - 1 ) {
this.scrollBorder.y = this.scrollBorder.y + this.pageDimentions.height + this.settings.borderBetweenPages;
this.page++;
}
break;
case "down":
if ( this.page > 0 ) {
this.scrollBorder.y = this.scrollBorder.y - this.pageDimentions.height - this.settings.borderBetweenPages;
this.page--;
}
break;
case "left":
if ( this.page < this.pagesCount - 1 ) {
this.scrollBorder.x = this.scrollBorder.x + this.pageDimentions.width + this.settings.borderBetweenPages;
this.page++;
}
break;
case "right":
if ( this.page > 0 ) {
this.scrollBorder.x = this.scrollBorder.x - this.pageDimentions.width - this.settings.borderBetweenPages;
this.page--;
}
break;
case "page":
switch ( this.settings.direction ) {
case "horizontal":
this.scrollBorder.x = (this.pageDimentions.width + this.settings.borderBetweenPages) * pageNumber;
break;
case "vertical":
this.scrollBorder.y = (this.pageDimentions.height + this.settings.borderBetweenPages) * pageNumber;
break;
}
this.page = pageNumber;
break;
default:
this.scrollBorder.y = 0;
this.scrollBorder.x = 0;
this.page = 0;
break;
}
},
// ### On swipe end
//
// Function called after the scroll animation ended
_onSwipeEnd: function() {
this.preventScroll = false;
this.activeElement = this.pages[this.page * this.settings.itemsInPage];
// Call onSwipeEnd callback function
this.settings.onSwipeEnd.call( this, this.container, this.activeElement, this.page);
},
// Jump to page
//
// Jumps without a animantion to specific page. The page number is only
// necessary for the specific page direction
//
// Takes:
// Direction and pagenumber
_jumpToPage: function( options, pageNumber ) {
if ( options ) {
this._calcNewPage( options, pageNumber );
}
this._scroll({
x: - this.scrollBorder.x,
y: - this.scrollBorder.y
});
},
// Scroll to page
//
// Scrolls with a animantion to specific page. The page number is only necessary
// for the specific page direction
//
// Takes:
// Direction and pagenumber
_scrollToPage: function( options, pageNumber ) {
this.preventScroll = true;
if ( options ) this._calcNewPage( options, pageNumber );
this._animateScroll();
},
// Public functions
// ================
swipe: function( direction ) {
// Call onSwipeStart callback function
this.settings.onSwipeStart.call( this, this.container, this.activeElement, this.page );
this._scrollToPage( direction );
},
updateInstance: function( settings ) {
settings = settings || {};
if ( typeof settings === "object" ) extend( this.settings, settings );
this.pages = getElementsByClassName(this.settings.pageClass, this.pageContainer);
if (this.pages.length) {
this.pagesCount = this.pages.length / this.settings.itemsInPage;
} else {
throw new Error(errors.pages);
}
this.activeElement = this.pages[this.page * this.settings.itemsInPage];
this._sizePages();
if ( settings.jumpToPage ) this.jumpToPage( settings.jumpToPage );
},
scrollToPage: function( page ) {
this._scrollToPage( "page", page - 1);
},
jumpToPage: function( page ) {
this._jumpToPage( "page", page - 1);
}
});
if ( $ ) {
// Register jQuery plugin
$.fn.dragend = function( settings ) {
settings = settings || {};
this.each(function() {
var instance = $(this).data( "dragend" );
// check if instance already created
if ( instance ) {
instance.updateInstance( settings );
if ( settings.jumpToPage ) instance.jumpToPage( settings.jumpToPage );
} else {
instance = new Dragend( this, settings );
$(this).data( "dragend", instance );
}
if ( settings.scrollToPage ) instance.scrollToPage( settings.scrollToPage );
// check if should trigger swipe
if ( typeof settings === "string" ) instance.swipe( settings );
});
// jQuery functions should always return the intance
return this;
};
}
return Dragend;
}
if ( typeof define == 'function' && typeof define.amd == 'object' && define.amd ) {
define( ["jquery", "hammer"], function( jquery, hammer ) {
return init( jquery, hammer );
} );
} else {
window.Dragend = init( window.jQuery || window.Zepto, window.Hammer );
}
})( window );