js/jquery.infinite-drag-carousel_noinfinite.js

   1 /**
   2  * @author Stéphane Roucheray, Pol Cámara
   3  * @extends jquery
   4  */
   5
   6 jQuery.fn.carousel = function(containerH, drag, options){
   7         var sliderList = jQuery(this).children()[0];
   8
   9         if (sliderList) {
  10
  11                 var top = 0;
  12                 var sum = 0;
  13                 var increment = jQuery(sliderList).children().outerHeight(true);
  14                 var elmnts = jQuery(sliderList).children();
  15                 var numElmts = elmnts.length;
  16                 var sizeFirstElmnt = increment;
  17                 var shownInViewport = Math.round(jQuery(this).height() / sizeFirstElmnt);
  18                 var firstElementOnViewPort = 1;
  19                 var probableElementOnViewPort = 0;
  20                 var isAnimating = false;
  21                 var totalHeight = increment * numElmts;
  22                 var mouseY;
  23                 var startMouseY;
  24                 var endMouseY;
  25                 if (isNaN(parseInt(jQuery(sliderList).css("top")))) {//.replace("px","")
  26                         jQuery(sliderList).css("top","0");
  27                 }
  28                 var startYUP;
  29                 var startYDOWN;
  30                 $(document).mousemove(function(e){
  31                         mouseY = e.pageY;
  32             });
  33                 jQuery(sliderList).css("top",0);
  34                 if (!(typeof drag == "boolean" &&  drag == false)) {
  35                         jQuery(this)
  36                         .drag("start",function(){
  37                                 top = parseInt(jQuery(sliderList).css("top"));//.replace("px","")
  38                                 //added by EE. This variable is created on first page of index and set here to true
  39                                 isDragging = true;
  40                                 startMouseY = mouseY;
  41                         })
  42                         .drag("dragend", function() {
  43                                 top = parseInt(jQuery(sliderList).css("top"));//.replace("px","")
  44                                 probableElementOnViewPort = Math.abs(top/increment);
  45                                 firstElementOnViewPort = parseInt(probableElementOnViewPort);
  46                                 probableElementOnViewPort -= firstElementOnViewPort;
  47                                 if (probableElementOnViewPort > .5) {
  48                                         firstElementOnViewPort++;
  49                                 }
  50                                 //added by EE. This variable is created on first page of index and set here to false after 30 miliseconds
  51                                 setTimeout(function(){isDragging = false},30);
  52                                 endMouseY = mouseY;
  53                                 //console.log(startMouseY);
  54                                 //console.log(endMouseY);
  55                                 if(Math.abs(endMouseY-startMouseY)<60){//this is not a drag but a click
  56                                         isDragging = false
  57                                 }
  58
  59                                 var sliderH = (((numElmts+shownInViewport)*increment + increment)/containerH)*100;
  60                                 var sliderT = ((firstElementOnViewPort*increment)/containerH)*100;
  61
  62                                 //Calculate the first viewable element when the slider is at top
  63                                 var amountShownAtOneTime = Math.floor(containerH/increment);
  64                                 var firstElementWhenSliderIsAtTop = numElmts - amountShownAtOneTime;
  65
  66                                 var theCapIncrement = (sliderH - (((firstElementWhenSliderIsAtTop*increment)/containerH)*100)) / 2;
  67
  68                                 //alert(sliderT);
  69                                 var bottomCap = (theCapIncrement*2)-sliderH;
  70
  71                                 if(parseInt(jQuery(sliderList).css('top')) > 0){
  72                                         jQuery(sliderList).animate({top: "0"});
  73                                 }else if(-(sliderT) < bottomCap ){
  74                                         //((sliderH-sliderT)/2)=93.75; cap
  75                                         jQuery(sliderList).animate({top: bottomCap+'%'});
  76
  77                                 }else{
  78                                         jQuery(sliderList).animate({top: "-"+((firstElementOnViewPort*increment)/containerH)*100+'%'});
  79                                 }
  80                                 startYUP = undefined;
  81                                 startYDOWN = undefined;
  82
  83                         })
  84                         .drag(function( ev, dd ){
  85                                 if (!isAnimating) {
  86                                         //console.log(dd.deltaY);
  87                                         if (sum >= 0) {
  88                                                 //top -= totalHeight
  89                                         } else if (sum <= -totalHeight) {
  90                                                 //top += totalHeight;
  91                                         }
  92                                         var sliderH = (((numElmts+shownInViewport)*increment + increment)/containerH)*100;
  93                                         var sliderT = ((firstElementOnViewPort*increment)/containerH)*100;
  94
  95                                         var amountShownAtOneTime = Math.floor(containerH/increment);
  96                                         var firstElementWhenSliderIsAtTop = numElmts - amountShownAtOneTime;
  97                                         var theCapIncrement = (sliderH - (((firstElementWhenSliderIsAtTop*increment)/containerH)*100)) / 2;
  98
  99                                         var bottomCap = (theCapIncrement*2)-sliderH;
 100                                         var decreaseRate = 0;
 101                                         var distancePast = 0;
 102                                         if(parseInt(jQuery(sliderList).css('top')) > 0){
 103                                                 if(startYUP == undefined) {
 104                                                         startYUP = dd.deltaY;
 105                                                 }
 106                                                 var change = - ( startYUP - dd.deltaY ) / dd.deltaY ;
 107                                                 decreaseRate = - ( startYUP - dd.deltaY ) * ( change * .75 );
 108
 109                                                 sum = top + ( dd.deltaY - decreaseRate );
 110                                         } else if ( ( sum/containerH ) * 100 < bottomCap ){
 111                                                 if( startYDOWN == undefined) {
 112                                                         startYDOWN = dd.deltaY;
 113                                                 }
 114                                                 decreaseRate = ( startYDOWN - dd.deltaY ) * .75;
 115                                                 sum = top + ( dd.deltaY + decreaseRate );
 116                                         }else{
 117                                                 sum = top + dd.deltaY;
 118                                         }
 119
 120                                         //console.log(sum);
 121                                         var toPercent = ( ( sum / containerH ) * 100 ) + '%';
 122                                         //console.log(toPercent);
 123                                         jQuery(sliderList).css({
 124                                                 top: toPercent
 125                                         });
 126
 127                                         /*
 128                                         if(parseInt(jQuery(sliderList).css('top')) > 0){
 129                                                 if(startYUP == undefined) {
 130                                                         startYUP = mouseY;
 131                                                 }
 132                                                 var change = -(startYUP - mouseY)/dd.deltaY;
 133                                                 decreaseRate = -(startYUP - mouseY)*(change*.75);
 134
 135                                                 //console.log(Math.log(dd.deltaY)/2);
 136                                                 //sum = top + (Math.log(dd.deltaY)/2);
 137                                                 sum = top + (dd.deltaY-decreaseRate);
 138                                         }else if((sum/containerH)*100 < bottomCap ){
 139                                                 if(startYDOWN == undefined) {
 140                                                         startYDOWN = mouseY;
 141                                                 }
 142                                                 decreaseRate = (startYDOWN - mouseY)*.75;
 143                                                 sum = top + (dd.deltaY+decreaseRate);
 144                                         }else{
 145                                                 sum = top + dd.deltaY;
 146                                         }
 147
 148                                         //console.log(sum);
 149                                         var toPercent = ((sum/containerH)*100)+'%';
 150                                         //console.log(toPercent);
 151                                         jQuery(sliderList).css({
 152                                                 top: toPercent
 153                                         });
 154                                         //console.log(jQuery(sliderList).css('top'));
 155                                         */
 156                                 }
 157                         });
 158                 }
 159
 160                 for (i = 0; i < shownInViewport; i++) {
 161                         jQuery(sliderList).css('height',(((numElmts+shownInViewport)*increment + increment)/containerH)*100 + "%");
 162                         //jQuery(sliderList).append(jQuery(elmnts[i]).clone());
 163                 }
 164         }
 165 };