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');
 | 
						||
        }
 | 
						||
    });
 | 
						||
}; |