242 lines
12 KiB
JavaScript
242 lines
12 KiB
JavaScript
//SwipePlanes v1.2 jQuery Plugin by REMD
|
||
$.fn.swipePlanes = function(opciones){
|
||
return this.each(function(){
|
||
|
||
var randId = Math.round(100*Math.random()); ////IDENTIFICADOR ALEATORIO DE LA INSTANCIA//////////
|
||
|
||
//EL VISOR /////////////////////////////////////
|
||
this.onselectstart = function(){return false;};
|
||
this.unselectable = "on";
|
||
$(this).css('-moz-user-select', 'none');
|
||
$(this).css('-webkit-user-select', 'none');
|
||
$(this).css('overflow','hidden');
|
||
|
||
if($(this).css('position') != 'absolute')$(this).css('position','relative');
|
||
|
||
|
||
var anchoVisor = $(this).width();
|
||
var altoVisor = $(this).height;
|
||
var divVisor = this;
|
||
|
||
//El CONTENEDOR /////////////////////////////////////
|
||
var divContenedor;
|
||
var pagActual = 0;
|
||
|
||
divContenedor = $(this).children('div:first');
|
||
divContenedor.css('transition','none');
|
||
divContenedor.css('-moz-user-select', 'none');
|
||
divContenedor.css('-webkit-user-select', 'none');
|
||
divContenedor.css('position','relative');
|
||
divContenedor.css('left','0px');
|
||
|
||
//LAS PAGINAS /////////////////////////////////////////
|
||
var divPaginas;
|
||
var bufferPaginas = 0;
|
||
var metaPaginas = 0;
|
||
var metaPagNum = 0;
|
||
|
||
divPaginas = divContenedor.children('div,a');
|
||
divPaginas.css('display','inline-block');
|
||
divPaginas.css('float','left');
|
||
divPaginas.css('position','relative');
|
||
|
||
metaPaginas = new Array();
|
||
metaPaginas[0] = 0;
|
||
|
||
divPaginas.each(function(){
|
||
if((bufferPaginas+(this.offsetWidth)) > anchoVisor+metaPaginas[metaPagNum]){
|
||
if(bufferPaginas > 0)metaPagNum++;
|
||
metaPaginas[metaPagNum] = bufferPaginas;
|
||
}
|
||
|
||
bufferPaginas += (this.offsetWidth + parseInt($(this).css('margin-left'))+parseInt($(this).css('margin-right')));
|
||
});
|
||
|
||
metaPaginas[metaPagNum] -= anchoVisor - (bufferPaginas-metaPaginas[metaPagNum]); //Ajuste <20>ltimo salto
|
||
|
||
divContenedor.css('width',bufferPaginas+'px'); //Ajuste Contenedor al tamano de las paginas
|
||
|
||
generarControles($(this),metaPagNum);
|
||
|
||
//LOS EVENTOS ////////////////////////////////////////////
|
||
var iX = 0,aX = 0,fX = 0; //Manejo de coordenadas
|
||
var drag = 0,t = 0,ms = 0,metaEvento,dX = 0; //Manejo del entorno/tiempo
|
||
|
||
$(this).bind('touchstart',function(event){
|
||
clearInterval(t);
|
||
|
||
if(event.pageX)iX = event.pageX;
|
||
if(event.originalEvent.touches)iX = event.originalEvent.touches[0].pageX;
|
||
|
||
divContenedor.css('transition','none');
|
||
|
||
drag = 1;
|
||
ms = 0;
|
||
metaEvento = 'click';
|
||
t = setInterval(function(){ms++;},1);
|
||
});
|
||
|
||
$(this).bind('touchmove',function(event){
|
||
if(event.pageX)aX = event.pageX;
|
||
if(event.originalEvent.touches)aX = event.originalEvent.touches[0].pageX;
|
||
dX = Math.abs(aX - iX);
|
||
|
||
if(dX > 50)event.preventDefault();
|
||
|
||
|
||
if(drag && dX > 50){
|
||
divContenedor.css('left',(((metaPaginas[pagActual]*-1)+(aX - iX)))+'px');
|
||
}
|
||
|
||
});
|
||
|
||
$(this).bind('touchend touchcancel touchleave',function(event){
|
||
|
||
if(drag && dX > 20){
|
||
drag = 0;
|
||
console.log(metaPaginas);
|
||
dX = Math.abs(fX - iX);
|
||
clearInterval(t);
|
||
|
||
if(event.pageX)fX = event.pageX;
|
||
if(event.originalEvent.touches)fX = aX;
|
||
|
||
if((iX-fX) > 0 && ms < 100 && dX > 50)metaEvento = 'swipeLeft';
|
||
if((iX-fX) <= 0 && ms < 100 && dX > 50)metaEvento = 'swipeRight';
|
||
if((iX-fX) > 0 && ms > 100 && dX > 50)metaEvento = 'moveLeft';
|
||
if((iX-fX) <= 0 && ms > 100 && dX > 50)metaEvento = 'moveRight';
|
||
if(dX <= 50)metaEvento = 'click';
|
||
|
||
switch(metaEvento){
|
||
case 'swipeLeft':
|
||
if(pagActual < metaPagNum){pagActual++;}
|
||
break;
|
||
|
||
case 'moveLeft':
|
||
if(pagActual < metaPagNum && dX > (Math.abs(anchoVisor/2))){pagActual++;}
|
||
break;
|
||
|
||
case 'swipeRight':
|
||
if(pagActual > 0){pagActual--;}
|
||
break;
|
||
|
||
case 'moveRight':
|
||
if(pagActual > 0 && dX > (Math.abs(anchoVisor/2))){pagActual--;}
|
||
break;
|
||
}
|
||
|
||
ms = 0; dX = 0; iX = 0; aX = 0; fX = 0; metaEvento = '';
|
||
|
||
irPagina(pagActual);
|
||
}
|
||
});
|
||
|
||
//EVENTOS CONTROLES /////////////////////////////////////////
|
||
$('.'+randId+'swipePlanesMiniPag').click(function(){
|
||
pagActual = $(this).attr('mpg');
|
||
irPagina();
|
||
});
|
||
|
||
$('.'+randId+'swipePlanesRowLeft').click(function(e){
|
||
e.stopPropagation();
|
||
e.preventDefault();
|
||
if(pagActual > 0)pagActual--;
|
||
irPagina();
|
||
});
|
||
|
||
$('.'+randId+'swipePlanesRowRight').click(function(e){
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
if(pagActual < metaPagNum)pagActual++;
|
||
irPagina();
|
||
});
|
||
|
||
$(this).bind('mousemove',function(){
|
||
$('.'+randId+'swipePlanesRowLeft').css('display','block');
|
||
$('.'+randId+'swipePlanesRowRight').css('display','block');
|
||
$('.'+randId+'swipePlanesRowLeft').css('opacity','1');
|
||
$('.'+randId+'swipePlanesRowRight').css('opacity','1');
|
||
});
|
||
|
||
$('.'+randId+'swipePlanesRowLeft').bind('mousemove',function(){
|
||
$('.'+randId+'swipePlanesRowLeft').css('opacity','1');
|
||
$('.'+randId+'swipePlanesRowRight').css('opacity','1');
|
||
});
|
||
|
||
$('.'+randId+'swipePlanesRowRight').bind('mousemove',function(){
|
||
$('.'+randId+'swipePlanesRowLeft').css('opacity','1');
|
||
$('.'+randId+'swipePlanesRowRight').css('opacity','1');
|
||
});
|
||
|
||
$(this).mouseout(function(){
|
||
$('.'+randId+'swipePlanesRowLeft').css('opacity','0');
|
||
$('.'+randId+'swipePlanesRowRight').css('opacity','0');
|
||
});
|
||
|
||
//CONTROLES //////////////////////////////////////////////
|
||
function generarControles(divVisor,metaPagNum){
|
||
|
||
|
||
var i = 0;
|
||
var miniPaginasHtml = '';
|
||
var style = '';
|
||
|
||
for(i;i <= metaPagNum; i++){
|
||
if(!i)style='background:#CECECE';
|
||
else style='';
|
||
miniPaginasHtml += '<div mpg="'+i+'" style="'+style+'" class="'+randId+'swipePlanesMiniPag"></div>';
|
||
}
|
||
// <div class="'+randId+'swipePlanesRowLeft"></div><div class="'+randId+'swipePlanesRowRight"></div>
|
||
var controlesHtml = '<div class="'+randId+'swipePlanesPaginator">'+miniPaginasHtml+'</div>';
|
||
|
||
divVisor.append(controlesHtml);
|
||
|
||
$('.'+randId+'swipePlanesMiniPag').css('display','inline-block');
|
||
$('.'+randId+'swipePlanesMiniPag').css('width','7px');
|
||
$('.'+randId+'swipePlanesMiniPag').css('height','7px');
|
||
$('.'+randId+'swipePlanesMiniPag').css('margin-left','2px');
|
||
$('.'+randId+'swipePlanesMiniPag').css('margin-right','2px');
|
||
$('.'+randId+'swipePlanesMiniPag').css('border','1px solid #CECECE');
|
||
$('.'+randId+'swipePlanesMiniPag').css('border-radius','4px');
|
||
$('.'+randId+'swipePlanesMiniPag').css('cursor','pointer');
|
||
|
||
$('.'+randId+'swipePlanesRowLeft').css('background-image','url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAABkCAYAAADE6GNbAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAKwwAACsMBNCkkqwAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAAAWdEVYdENyZWF0aW9uIFRpbWUAMTAvMTkvMTJlCtGpAAABaElEQVR4nO3cS3HEMBRE0atU1oaURTCIwxiSh4NQBNIQcDDEfp/OVF8AKp3yR5IXHsD3GIP/3HmefI4xOI6jey632vedj+5JRGWIWoaoZYhahqhliFqGqGWIWoaoZYhahqhliFqGqGWIWoZENed8RIzTCplzPrZt+4oYqw0SiYAmSDQCGiAZCCiGZCGgEJKJgCJINgIKIBUISIZUISARUomAJEg1AhIgHQgIhnQhIBDSiYAgSDcCAiAKCLgJUUHADYgSAi5C1BBwAaKIAIGPD1H9GbLWer5er5+Mydzp0hVRxFy+tdQwt54RJczth10FE/LWUsCEvX67MaHrSCcmfEHswqSs7B2YtC1KNSZ1r1WJSd80VmFKdr8VmLJtfDam9DySiSk/WGVhWk6IGZi2o240pvXMHolp//iw1npGjNMOicoQtQxRyxC1DFHLELUMUcsQtQxRyxC1DFHLELUMUettIIM3+XXbL64qrlAHZEgkAAAAAElFTkSuQmCC)');
|
||
$('.'+randId+'swipePlanesRowLeft').css('position','absolute');
|
||
$('.'+randId+'swipePlanesRowLeft').css('width','50px');
|
||
$('.'+randId+'swipePlanesRowLeft').css('height','100px');
|
||
$('.'+randId+'swipePlanesRowLeft').css('cursor','pointer');
|
||
$('.'+randId+'swipePlanesRowLeft').css('left','0px');
|
||
$('.'+randId+'swipePlanesRowLeft').css('top',((divVisor.height()/2)-50)+'px');
|
||
$('.'+randId+'swipePlanesRowLeft').css('z-index','909');
|
||
$('.'+randId+'swipePlanesRowLeft').css('display','none');
|
||
$('.'+randId+'swipePlanesRowLeft').css('box-shadow','0 1px 3px rgba(0, 0, 0, 0.3);');
|
||
|
||
$('.'+randId+'swipePlanesRowRight').css('background-image','url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAABkCAYAAADE6GNbAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAKwwAACsMBNCkkqwAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAAAWdEVYdENyZWF0aW9uIFRpbWUAMTAvMTkvMTJlCtGpAAABXklEQVR4nO3cvW2EQBRF4TPWxpTkwDXQw1IS7oEqXBINsKlTM+/nenVPDuKTYOZNwgC+xhj8567r4jHGYN/37meZats2ProfIipD1DJELUPUMkQtQ9QyRC1D1DJELUPUMkQtQ9QyRC1D1DLkd+u6PiPuM1MIZFmWz25M2KvVjQn9Rjox4R97FyZl1erApC2/1ZjUfaQSk74hVmFKdvYKTNmIko0pnbUyMeVDYxamZfrNwLSN8dGY1vNIJKb9YBWFaYdADEYCAvMYGQjMYaQgcB8jB7mbHOQ8z5/jOL7/ep0U5C4ChCAzCBCBzCJAABKBgGZIFAIaIZEIaIJEI6ABkoGAYkgWAgohmQgogmQjoABSgYBkSBUCEiGVCEiCVCMgAdKBgGBIFwICIZ0ICIJ0IyAI0o0AgYNVVIaoZYhahqhliFqGqGWIWoaoZYhahqhliFqGqGWIWm8DGbzJr9teHYWuULzgkDAAAAAASUVORK5CYII=)');
|
||
$('.'+randId+'swipePlanesRowRight').css('position','absolute');
|
||
$('.'+randId+'swipePlanesRowRight').css('width','50px');
|
||
$('.'+randId+'swipePlanesRowRight').css('height','100px');
|
||
$('.'+randId+'swipePlanesRowRight').css('cursor','pointer');
|
||
$('.'+randId+'swipePlanesRowRight').css('right','0px');
|
||
$('.'+randId+'swipePlanesRowRight').css('top',((divVisor.height()/2)-50)+'px');
|
||
$('.'+randId+'swipePlanesRowRight').css('z-index','909');
|
||
$('.'+randId+'swipePlanesRowRight').css('display','none');
|
||
$('.'+randId+'swipePlanesRowRight').css('box-shadow','0 1px 3px rgba(0, 0, 0, 0.3);');
|
||
|
||
$('.'+randId+'swipePlanesPaginator').css('position','absolute');
|
||
$('.'+randId+'swipePlanesPaginator').css('padding','0px 4px');
|
||
$('.'+randId+'swipePlanesPaginator').css('top','10px');
|
||
$('.'+randId+'swipePlanesPaginator').css('box-shadow','0 1px 3px rgba(0, 0, 0, 0.3);');
|
||
$('.'+randId+'swipePlanesPaginator').css('border-radius','4px');
|
||
$('.'+randId+'swipePlanesPaginator').css('left',((divVisor.width()/2)-($('.'+randId+'swipePlanesPaginator').width()/2))+'px');
|
||
|
||
}
|
||
|
||
function irPagina(){
|
||
divContenedor.css('transition','left 500ms');
|
||
divContenedor.css('left',((metaPaginas[pagActual])*-1)+'px');
|
||
|
||
$('.'+randId+'swipePlanesMiniPag').css('background','');
|
||
$('.'+randId+'swipePlanesMiniPag[mpg='+pagActual+']').css('background','#CECECE');
|
||
}
|
||
});
|
||
}; |