Current File : /home/virtualki/22346/oldwp/wp-content/themes/megiw/js/thumbs.js

(function($){	
	$(document).ready(function(){
		$('.gallery').each(function(){
			var $this = $(this);
			var $gallery = $this;
			var anchors = $this.find('a');
			var src = [];
			var loaded = [];
			var $wrapper = $('<div class="thumbs-wrapper"></div>');
			var $overlay = $('<div class="thumbs-overlay"></div>');
			var $close = $('<a class="thumbs-close" href="#">x</a>');
			var $open = $('<a class="thumbs-open" href="#">Galeria</a>');
			var $viewport = $('<div class="thumbs-viewport"></div>');
			var $thumbList = $('<ul class="thumbs-list"></ul>');
			var $thumbsNav = $('<div class="thumbs-navigation"></div>');
			var $thumbProto = $('<li></li>');
			var $thumbs = null;
			
			var positionX = 0;
			var positionY = 0;
			
			var slices = [0];
			
			var rebuild = true;
			
			var opened = false;
			
			var started = false;
			
			var swipeWidth = 0;
			
			var current = 0;
			
			$this.append($open);	
			
			$(window).resize(function(){
				rebuild = true;
				
				if(opened){
					placeThumbs();
				}
			});
			
			$close.click(function(){
				close();
				return false;
			});
			
			$open.click(function(){
				open();
				return false;
			});
			
			function close(){
				opened = false;
				
				enablePagePan();
				$wrapper.css({'opacity': '0','visibility':'hidden'});
			}
			
			function open(){
				opened = true;
				
				if(!started){
					init();
				}
				
				placeThumbs();
				
				disablePagePan();
				$wrapper.css({'opacity': '1','visibility':'visible'});
			}			
			
			function placeThumbs(){
				if(!rebuild){
					return;
				}
				
				var lWidth = 0;
				var lHeight = 0;
				var vWidth = $viewport.width();
				var vHeight = $viewport.height();
				var tWidth = $thumbs.first().width();
				var tHeight = $thumbs.first().height();
				var tMarginLeft = parseInt($thumbs.first().css('margin-left'));
				var tMarginRight = parseInt($thumbs.first().css('margin-right'));
				var tMarginTop = parseInt($thumbs.first().css('margin-top'));
				var tMarginBottom = parseInt($thumbs.first().css('margin-bottom'));
				
				positionX = -tMarginLeft;
				positionY = -tMarginTop;
				
				slices = [];
				
				$thumbs.each(function(index){
						var $thumb = $(this);
						var prev = $thumbs.eq(index-1);
						$thumb.css('position','absolute');
						
						if(index != 0){
							positionY = prev.position().top + tHeight + tMarginTop;
						}
	
						if(positionY + tHeight > vHeight){
							positionX = prev.position().left + tWidth + tMarginLeft;
							positionY = -tMarginTop;
						}
												
						$thumb.css({'top':positionY,'left':positionX});											
						
						lWidth = Math.max(lWidth, positionX + tWidth + tMarginLeft);
						lHeight = Math.max(lHeight, positionY + tHeight + tMarginBottom);
					}
				);
				
				$thumbList.css('width',lWidth);
				$thumbList.css('height',lHeight);
				
				//ile w rzędzie??
				
				var inRow = Math.floor(vWidth/(tWidth+tMarginRight));				
				
				for(var i=0;i<lWidth;i+=(inRow*(tWidth+tMarginRight))){					
					slices.push(-i);
				}
				
				$thumbList.css('top',((vHeight-lHeight)/2)+'px');
				
				if(lWidth <= vWidth){
					$thumbList.css('transform','translateX('+((vWidth-lWidth)/2)+'px)');
				}
				
				buildNavigation();
				load();
								
				rebuild = false;
			}
			
			function buildNavigation(){
				var button;
				
				$thumbsNav.empty();
				
				if(slices.length <=1){
					return;
				}
				
				for(var i=0; i<slices.length; i++){
					button = $('<a class="button button' + i + '" href="#">'+i+'</a>').appendTo($thumbsNav);				
					
					button.click(
              			function(){
              				var $clicked = $(this);
              				
              				current = $clicked.index();
              				swipeTo();
              				
              				return false;
              			}
	              	);
				}
			}
			
			function load(){
				$thumbs.each(function(index){
					var $thumb = $(this);
					
					if(isVisible($thumb)){
						loadImage(src[index],$thumb);
					}
				});
			}
			
			function init(){
				anchors.each(function(){
					var anchor = $(this);				
					src.push(anchor.data('thumb-src'));
					loaded.push(false);
					$thumbProto.clone(true).appendTo($thumbList);
				});
				
				disableUserSelect($thumbList);
				
				$thumbs = $thumbList.find('li');
				
				$wrapper.css({'opacity': '0','visibility':'hidden'});
				
				$wrapper.append($overlay);
				$viewport.append($thumbList);
				$wrapper.append($viewport);
				$wrapper.append($close);
				$wrapper.append($thumbsNav);
				$('body').append($wrapper);							
				
				placeThumbs();
				
				started = true;
			}
			
			$thumbList.on('transitionend', function(){
				load();
			});
			
			$thumbList.on('mousedown','li', function(){
				var $this = $(this);
				
				$this.addClass('active');
				
				function removeActive(){
					$this.removeClass('active');
					$(document).off('mouseup', removeActive);
				}
				
				$(document).on('mouseup', removeActive);
			});
			
			$thumbList.on('mouseup','li', function(){
				var $this = $(this);
				
				$this.removeClass('active');
			});
			
			$thumbList.on('click','li', function(){
				var $this = $(this);
				
				$(window).trigger('thumbClicked',{index: $this.index()});
				
				$(window).scrollTop($gallery.offset().top - (($(window).height() - $gallery.innerHeight()) / 2));
				
				close();
			});
			
			function swipeTo(){
				// $thumbList.css('left',slices[current]);
				$thumbList.css('transform','translateX('+slices[current]+'px)');				
			}
			
			$viewport.hammer().on('swipeleft',function(){
				if(current+1>slices.length-1){
					return;
				}
				
				current++;
				swipeTo();
			});
			
			$viewport.hammer().on('swiperight',function(){
				if(current-1<0){
					return;
				}
				
				current--;
				swipeTo();
			});
			
			function isVisible($thumb){
				var offset = $thumb.offset();
				var vOffset = $viewport.offset();
				var vWidth = $viewport.width();
				
				if(offset.left < vOffset.left || offset.left > vOffset.left + vWidth){
					return false;
				}
				
				return true;
			}
			
			function loadImage(src, $appendToEl){
				var loaded = $("img[src='"+src+"']");
				
				if(!loaded.size()){
					var img = $("<img />").attr('src', src);
	        		
	        		img.load(function() {
				        if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {
				            alert('Broken image '+src);
				        }
				        
				        img.css('opacity',1);
   					});
   					
   					img.appendTo($appendToEl);
				}	        	
	        }	        
	        
	        function disableUserSelect($el){
	        	$el.css({'user-select':'none','-webkit-user-select':'none', '-moz-user-select': 'none', '-ms-user-select': 'none'});
	        	$el.attr('unselectable','on');
	        	$el.on('onselectstart', function(){return false;});
	        	$el.on('mousedown', function(event){event.preventDefault();});
	        }
	        
	        function disablePagePan(){
	        	$(document).on('touchmove',touchMoveDisabler);
	        }
	        
	        function enablePagePan(){
	        	$(document).off('touchmove',touchMoveDisabler);
	        }
	        
	        function touchMoveDisabler(event){
	        	event.preventDefault();
	        }
		});
	});	
})(jQuery);