/*
* jquery.finger
* https://github.com/ngryman/jquery.finger
*
* copyright (c) 2013 ngryman
* licensed under the mit license.
*/
(function($) {
var hastouch = 'ontouchstart' in window,
startevent = hastouch ? 'touchstart' : 'mousedown',
stopevent = hastouch ? 'touchend touchcancel' : 'mouseup mouseleave',
moveevent = hastouch ? 'touchmove' : 'mousemove',
namespace = 'finger',
rootel = $('html')[0],
start = {},
move = {},
motion,
cancel,
safeguard,
timeout,
prevel,
prevtime,
finger = $.finger = {
pressduration: 300,
doubletapinterval: 300,
flickduration: 150,
motionthreshold: 5
};
function page(coord, event) {
return (hastouch ? event.originalevent.touches[0] : event)['page' + coord.touppercase()];
}
function trigger(event, evtname, remove) {
var fingerevent = $.event(evtname, move);
$.event.trigger(fingerevent, { originalevent: event }, event.target);
if (fingerevent.isdefaultprevented()) event.preventdefault();
if (remove) {
$.event.remove(rootel, moveevent + '.' + namespace, movehandler);
$.event.remove(rootel, stopevent + '.' + namespace, stophandler);
}
}
function starthandler(event) {
var timestamp = event.timestamp || +new date();
if (safeguard == timestamp) return;
safeguard = timestamp;
// initializes data
start.x = move.x = page('x', event);
start.y = move.y = page('y', event);
start.time = timestamp;
start.target = event.target;
move.orientation = null;
motion = false;
cancel = false;
timeout = settimeout(function() {
cancel = true;
trigger(event, 'press');
}, $.finger.pressduration);
$.event.add(rootel, moveevent + '.' + namespace, movehandler);
$.event.add(rootel, stopevent + '.' + namespace, stophandler);
// global prevent default
if (finger.preventdefault) event.preventdefault();
}
function movehandler(event) {
// motion data
move.x = page('x', event);
move.y = page('y', event);
move.dx = move.x - start.x;
move.dy = move.y - start.y;
move.adx = math.abs(move.dx);
move.ady = math.abs(move.dy);
// security
motion = move.adx > finger.motionthreshold || move.ady > finger.motionthreshold;
if (!motion) return;
// moves cancel press events
cleartimeout(timeout);
// orientation
if (!move.orientation) {
if (move.adx > move.ady) {
move.orientation = 'horizontal';
move.direction = move.dx > 0 ? +1 : -1;
}
else {
move.orientation = 'vertical';
move.direction = move.dy > 0 ? +1 : -1;
}
}
// for delegated events, the target may change over time
// this ensures we notify the right target and simulates the mouseleave behavior
if (event.target !== start.target) {
event.target = start.target;
stophandler.call(this, $.event(stopevent + '.' + namespace, event));
return;
}
// fire drag event
trigger(event, 'drag');
}
function stophandler(event) {
var timestamp = event.timestamp || +new date(),
dt = timestamp - start.time,
evtname;
// always clears press timeout
cleartimeout(timeout);
// ensures start target and end target are the same
if (event.target !== start.target) return;
// tap-like events
if (!motion && !cancel) {
var doubletap = prevel === event.target && timestamp - prevtime < finger.doubletapinterval;
evtname = doubletap ? 'doubletap' : 'tap';
prevel = doubletap ? null : start.target;
prevtime = timestamp;
}
// motion events
else {
if (dt < finger.flickduration) trigger(event, 'flick');
move.end = true;
evtname = 'drag';
}
trigger(event, evtname, true);
}
// initial binding
$.event.add(rootel, startevent + '.' + namespace, starthandler);
})(jquery);
/**
* flickerplate.js
*
* author: chris humboldt
* last edited: 6 january 2014
* edited by: chris humboldt
*/
/* ֮www.lanrenzhijia.com */
(function($){
var $flickerplate = function(){
// ----- setup
var $object = this;
var $flick_position = 0;
var $flicker = false;
var $flicker_outer_width = false;
var $flick_width = false;
var $flick_speed = false;
var $flick_count = 0;
var $dot_count = 0;
var $flicker_moving = false;
// settings
$object.settings = {
block_text : true,
inner_width : false,
theme : 'light',
flick_animation : 'transition-slide',
auto_flick : true,
auto_flick_delay : 10,
dot_navigation : true,
dot_alignment : 'center',
arrows : true
};
// ----- initilize
$object.init = function($element, settings){
// check if the settings are being edited via the call
$object.settings = $.extend($object.settings, settings);
// some variables
$flicker = $element;
// set some classes
$flicker.addclass('flickerplate');
$flicker.find('ul:first').addclass('flicks');
$flicker.find('li:first').addclass('first-flick');
// set the flick position
$flicker.attr('data-flick-position', $flick_position);
// animation type
var $flick_animation = $flicker.data('flick-animation');
if(($flick_animation) && ($flick_animation.length > 0)){
if(($flick_animation == 'transform-slide')){
$object.settings.flick_animation = 'transform-slide';
}
else if(($flick_animation == 'transition-slide')){
$object.settings.flick_animation = 'transition-slide';
}
else if(($flick_animation == 'jquery-slide')){
$object.settings.flick_animation = 'jquery-slide';
}
else if(($flick_animation == 'scroller-slide')){
$object.settings.flick_animation = 'scroller-slide';
}
$flicker.addclass('animate-' + $flick_animation);
}
else {
$flicker.addclass('animate-' + $object.settings.flick_animation);
}
// get theme
var $theme = $flicker.data('theme');
var $first_flick_theme = $flicker.find('.first-flick').data('theme');
if(($theme) && ($theme.length > 0)){
$object.settings.theme = $theme;
if(($first_flick_theme) && ($first_flick_theme.length > 0)){
$flicker.addclass('flicker-theme-' + $first_flick_theme);
}
else{
$flicker.addclass('flicker-theme-' + $theme);
}
}
else{
$flicker.addclass('flicker-theme-' + $object.settings.theme);
}
// block text
var $block_text = $flicker.data('block-text');
if($block_text != undefined){
if($block_text == false){
$object.settings.block_text = false;
}
}
// settings for each flick
$flicker.find('li').each(function(){
// increase the count
$flick_count++;
// wrap each li tag
$(this).wrapinner('
');
// block text overwrite
$flick_block_text = $(this).data('block-text');
if($flick_block_text != undefined){
if($flick_block_text == true){
$(this).find('.flick-title').wrapinner('');
$(this).find('.flick-sub-text').wrapinner('');
}
}
else if($object.settings.block_text == true){
$(this).find('.flick-title').wrapinner('');
$(this).find('.flick-sub-text').wrapinner('');
}
// set any backgrounds
var $background = $(this).data('background');
if(($background) && ($background.length > 0)){
$(this).css('background-image', 'url(' + $background + ')');
}
// class an theme overwrites
$flick_theme = $(this).data('theme');
if(($flick_theme) && ($flick_theme.length > 0)){
$(this).addclass('flick-theme-' + $flick_theme);
}
});
// arrows and dot navigation
if($object.settings.flick_animation != 'scroller-slide'){
// create arrows
$data_arrow_navigation = $flicker.data('arrows');
if($data_arrow_navigation != undefined){
if($data_arrow_navigation != false){
$object.create_arrow_navigation();
}
}
else if($object.settings.arrows == true){
$object.create_arrow_navigation();
}
// create navigation dots
$data_dot_navigation = $flicker.data('dot-navigation');
$data_dot_alignment = $flicker.data('dot-alignment');
var $dot_alignment = $object.settings.dot_alignment;
if($data_dot_alignment != undefined){
if($data_dot_alignment == 'left'){
$dot_alignment = 'left';
}
else if($data_dot_alignment == 'right'){
$dot_alignment = 'right';
}
}
if($data_dot_navigation != undefined){
if($data_dot_navigation != false){
$object.create_dot_navigation($dot_alignment);
}
}
else if($object.settings.dot_navigation == true){
$object.create_dot_navigation($dot_alignment);
}
// perform the auto flicking
$flick_delay = $object.settings.auto_flick_delay * 1000;
$data_auto_flick = $flicker.data('auto-flick');
$data_auto_flick_delay = $flicker.data('auto-flick-delay');
if(($data_auto_flick_delay)){
$flick_delay = $data_auto_flick_delay * 1000;
}
if($data_auto_flick != undefined){
if($data_auto_flick != false){
$object.settings.auto_flick = true;
}
else{
$object.settings.auto_flick = false;
}
}
$object.auto_flick_start();
// flick the flicker
$object.flick_flicker();
// kill the animation
if($object.settings.flick_animation != 'jquery-slide'){
$flicker.find('ul.flicks').bind("transitionend mstransitionend webkittransitionend otransitionend", function(){
$flicker_moving = false;
});
}
}
}
// ----- flick flicker
$object.flick_flicker = function(){
if(modernizr.touch){
$flicker.on('drag', function($e){
if($flicker_moving == false) {
if($e.orientation == 'horizontal'){
$e.preventdefault();
if($e.direction == 1){
$flick_position--;
if($flick_position < 0){
$flick_position = 0;
}
else{
$flicker_moving = true;
// move flicker
$object.move_flicker($flick_position);
}
}
else {
$flick_position++;
if($flick_position == $flick_count){
$flick_position = $flick_count - 1;
}
else{
$flicker_moving = true;
// move flicker
$object.move_flicker($flick_position);
}
}
}
}
});
}
}
// ----- create arrow navigation
$object.create_arrow_navigation = function(){
// the html
$arrow_nav_html = '';
$arrow_nav_html += '';
// attach the html
$flicker.prepend($arrow_nav_html);
// show the arrows
$('.arrow-navigation').mouseover(function(){
if($(this).hasclass('hover') == false){
$(this).addclass('hover')
}
});
$('.arrow-navigation').mouseout(function(){
if($(this).hasclass('hover') == true){
$(this).removeclass('hover')
}
});
// navigate using the arrows
$('.arrow-navigation').on('click', function(){
// check which arrow was clicked
if($(this).hasclass('right')){
$flick_position++;
if($flick_position == $flick_count){
$flick_position = 0;
}
}
else {
$flick_position--;
if($flick_position < 0){
$flick_position = $flick_count - 1;
}
}
// move flicker
$object.move_flicker($flick_position);
});
}
// ----- create dot navigation
$object.create_dot_navigation = function($position){
$dot_nav_html = '';
while($dot_count < $flick_count){
// increase the count
$dot_count++;
// creat dots
if($dot_count == 1){
$dot_nav_html += ' ';
}
else{
$dot_nav_html += ' ';
}
}
$dot_nav_html += '
';
// attach the html
$flicker.prepend($dot_nav_html);
// navigate using dots
$flicker.find('.dot-navigation li').on('click', function(){
// invoke the movement
$object.move_flicker($(this).index());
});
}
// ----- start auto flicker
$object.auto_flick_start = function(){
if($object.settings.auto_flick == true){
$object.flicker_auto = setinterval($object.auto_flick, $flick_delay);
}
}
// ----- auto flick
$object.auto_flick = function(){
// check the position
$flick_position++;
if($flick_position == $flick_count){
$flick_position = 0;
}
// move flicker
$object.move_flicker($flick_position);
}
// ----- stop auto flicker
$object.auto_flick_stop = function(){
$object.flicker_auto = clearinterval($object.flicker_auto);
}
// ----- reset auto flicker
$object.auto_flick_reset = function(){
// first stop the auto flicker
$object.auto_flick_stop();
// then start it again
$object.auto_flick_start();
}
// ----- move the flicker
$object.move_flicker = function($new_position){
// update flick position
$flick_position = $new_position;
// move based on desired animation
if($object.settings.flick_animation == 'transform-slide'){
$flicker.find('ul.flicks').attr({ style: '-webkit-transform:translate3d(-'+ $flick_position +'%, 0, 0);-o-transform:translate3d(-'+ $flick_position +'%, 0, 0);-moz-transform:translate3d(-'+ $flick_position +'%, 0, 0);transform:translate3d(-'+ $flick_position +'%, 0, 0)' });
}
else if($object.settings.flick_animation == 'transition-slide'){
$flicker.find('ul.flicks').attr({ style: 'left:-'+ $flick_position +'00%;' });
}
else if($object.settings.flick_animation == 'jquery-slide'){
$flicker.find('ul.flicks').animate({ 'left' : '-'+ $flick_position +'00%' }, function(){
$flicker_moving = false;
});
}
// flicker colour
$crt_flick = $flicker.find('ul.flicks li:eq('+ $flick_position +')');
$flicker.removeclass('flicker-theme-light').removeclass('flicker-theme-dark');
// set the colour
if($crt_flick.hasclass('flick-theme-dark')){
$flicker.addclass('flicker-theme-dark');
}
else if($crt_flick.hasclass('flick-theme-light')){
$flicker.addclass('flicker-theme-light');
}
else {
$flicker.addclass('flicker-theme-' + $object.settings.theme);
}
// update the navigation
$flicker.find('.dot-navigation .dot.active').removeclass('active');
$flicker.find('.dot:eq('+ $flick_position +')').addclass('active');
$flicker.attr('data-flick-position', $flick_position);
// reset auto flicker
$object.auto_flick_reset();
}
};
// call the flicker as a plugin
$.fn.flicker = function($options){
var len = this.length;
// enable multiple-slider support
return this.each(function(index) {
var me = $(this), key = 'flickerplate' + (len > 1 ? '-' + ++index : ''), instance = (new $flickerplate).init(me, $options);
me.data(key, instance).data('key', key);
});
};
}(jquery));