SwipyJS with Fries integration

index.js

/** JS of the index **/
(function(){

var data = $('#dev_list').html();

for(var i = 0; i < 10; i++)
    $("#dev_list").append(data); 

/* Tab swiping init and next/prev functions */

Swipy.init(".tab-item",prev,next);

function next()
{
	console.log("next");
	
	var that = $(".tab-item.active");
	var next = that.next();
	
	var activeBody = that[0];
	var targetBody = next[0];
	
    if(targetBody !== undefined) {
        that.removeClass('active');
        next.addClass('active');

        slideToTab(targetBody,activeBody);

        var selected_tab_item = $('.tab-inner li.active');
        selected_tab_item.removeClass('active');
        selected_tab_item.next().addClass('active');
    }
}

function prev()
{
	console.log("prev");
	
	var that = $(".tab-item.active");
	var prev = that.prev();
	
	var activeBody = that[0];
	var targetBody = prev[0];

    if(targetBody !== undefined) {
        that.removeClass('active');
        prev.addClass('active');

        slideToTab(targetBody,activeBody);

        var selected_tab_item = $('.tab-inner li.active');
        selected_tab_item.removeClass('active');
        selected_tab_item.prev().addClass('active');
    }
}

})();

swipy.js

/* SwipyJS
* Simple JS module for swipe(right/left) detection for mobile devices 
* Copyright 2013, Ayman Farhat
* aymanfarhat.com
* Free to use under the MIT license
*/
var Swipy = function(window) {
    var swpStartX = 0;
    var swpStartY = 0;
    var swpEndX = 0;
    var swpEndY = 0;
    var swpStartTime = 0;
    var swpEndTime = 0;
    
    var detectionAreas = null;
    var rightCallBack = null;
    var leftCallBack = null;

    var init = function(area, right, left) {
       
       if(area === undefined || area === window)
    	   detectionAreas = [window];
       else
    	   detectionAreas = document.querySelectorAll(area);
       
       rightCallBack = right || function(){ console.log("right swipe"); };
       leftCallBack = left || function(){ console.log("left swipe"); };

       bindUIActions();
    }

    var bindUIActions = function() {
    	for(var i = 0; i < detectionAreas.length; i++) {
    		
    		var dArea = detectionAreas[i];
            
    		dArea.addEventListener('touchstart',function(event) {
                swpStartX = event.touches[0].pageX;
                swpStartY = event.touches[0].pageY;
                swpStartTime = Number(new Date());
              },false);

              dArea.addEventListener('touchmove',function(event) {
                swpEndX = event.touches[0].pageX;
                swpEndY = event.touches[0].pageY;
                swpEndTime = Number(new Date());
              },false);

              dArea.addEventListener('touchend',function(event) {
                  var swpDiffTime = swpEndTime - swpStartTime; 
                  var diffX = swpEndX - swpStartX;
                  var diffY = swpEndY - swpStartY;
                  var slope = diffY / Math.max(0.001,Math.abs(diffX));
                  
                  /* Almost a horizontal straight line */
                  if(Math.abs(slope) < 0.300 && swpDiffTime <= 350) {
                      if(diffX >= 120)
                          rightCallBack();

                      else if(diffX <= -120)
                          leftCallBack();
                  }
              },false);
    	}
    }
    return {
        init:init
    };
}(window);

tab.js

  var getTarget = function (target) {
    var i, tabs = document.querySelectorAll('.tab-fixed li a');
    for (; target && target !== document; target = target.parentNode) {
      for (i = tabs.length; i--;) { if (tabs[i] === target) return target; }
    }
  };

  window.addEventListener('touchend', function (e) {
    var activeTab;
    var activeBody;
    var targetBody;
    var targetTab;
    var className     = 'active';
    var classSelector = '.' + className;
    var targetAnchor  = getTarget(e.target);

    if (!targetAnchor) return;

    targetTab = targetAnchor.parentNode;
    activeTab = targetTab.parentNode.querySelector(classSelector);

    // Highlight the target tab
    if (activeTab) activeTab.classList.remove(className);
    targetTab.classList.add(className);

    // If the target body doesn't exist, don't do anything
    targetBody = document.querySelector(targetAnchor.hash);
    if (!targetBody) return;

    // Set the target body as active
    activeBody = targetBody.parentNode.querySelector(classSelector);

    if (activeBody) activeBody.classList.remove(className);
    targetBody.classList.add(className);

    slideToTab(targetBody, activeBody);
  });

/* Slides to the active tab */
function slideToTab(targetBody, activeBody)
{
    // Look for the index of the target and active bodies
    var sliderItems = document.querySelectorAll('.tab-item'),
        s = sliderItems.length;
    while (s--) {
      // Show the hidden bodies and set their initial position
      sliderItems[s].classList.add('in-transition');
      sliderItems[s].style.left = (s * 100) + "%";
      if (sliderItems[s] == targetBody) targetIndex = s;
      if (sliderItems[s] == activeBody) activeIndex = s;
    }

    // Slide the active body into position
    s = sliderItems.length;
    setTimeout(function () {
      while (s--) {
        sliderItems[s].style.webkitTransform = 'translateX('+ ((targetIndex == 0) ? 0 : '-' + (targetIndex * 100)) +'%)';
        sliderItems[s].addEventListener('webkitTransitionEnd', slideEnd);
      }
    }, 50); // To account for lag when adding the .in-transition class

    function slideEnd (e) {
      // Hide the inactive bodies
      e.target.classList.remove('in-transition');
    }
}