Manager

Back Back Up Advanced Editor

/* the number must not larger than number of items */
			if (!this.colNum) {
				this.colNum = 1;
			}
			if (this.colNum > this.oItemNum) {
				this.colNum = this.oItemNum;
			}
		}
		
		/* the margin must not larger than max margin */
		this.wid = this._.width();
		this._.css('width', this.wid + 'px');
		if (!this.wid) {		
			return;
		}		
				
		
		if (100 * this.margin / this.wid > this.opt.maxMargin) {
			this.margin = this.opt.maxMargin * this.wid / 100;
		}
				
		/* decrease column number if item width smaller than min */
		var marSum = (this.colNum - 1) * this.margin;
		if (this.colNum <= 1) {
			marSum = 0;
		}	
		
		/* item width in pixel */
		var iWid = (this.wid - marSum) / this.colNum;
		
		for (	;	
				this.colNum > 1 && 
				iWid < this.opt.minColumnWidth;
				this.colNum--
		) {
			marSum = (this.colNum - 1) * this.margin;			
			if (this.colNum <= 1) {
				marSum = 0;
			}
			iWid = this.wid / this.colNum;
			if (this.colNum <= 1 || iWid >= this.opt.minColumnWidth) {
				break;
			}
		}

if (0 == this.colNum) {
			this.colNum = 1;
		}
		
		/* update again the item width to 
		 * suitable with new column number
		 * marSum is margin sum in pixel
		 * iWid is item width in pixel
		 * */
		marSum = (this.colNum - 1) * this.margin;
		iWid = (this.wid - marSum) / this.colNum;
		
		if (reinit && this.colNum == this.prevColNum) {						
			return;
		}
		this.prevColNum = this.colNum;
				
		
		if (!reinit) {
			/* wrap content with properly class */
			items.wrap('<div class="'+this.opt.itemClass+'"></div>');
			this._.wrapInner('<div class="'+this.opt.stageClass+'"></div>');		
			this._.wrapInner('<div class="'+this.opt.outerClass+'"></div>');

/* save element objects */
			items = this._.find(this.itemClass);		
			this.stage = this._.find(this.stageClass);
			this.outer = this._.find(this.outerClass);

/* clone items */		
			items.clone().prependTo(this.stage);
			items.clone().appendTo(this.stage);
			this.items = this._.find(this.itemClass);
			this.itemNum = this.items.length;			
		}
		
		/* CALCULATE EVERYTHING IN PERCENT 
		 * */				
		/* stage width in pixel
		 * */
		var stageWidPx = this.itemNum * iWid + (this.itemNum - 1) * this.margin;		
		
		/* margin width related to stage in percent 
		 * */
		var iMarStage = this.margin * 100 / stageWidPx;
		
		/* item width related to wrapper in percent 
		 * = item width in pixel + margin in pixel convert to percent
		 * */
		this.iWid = (iWid * 100 / this.wid) + (this.margin * 100 / this.wid);
		
		/* accept precision in JavaScript float */
		this.epsilon = 100 / this.wid / 10;
		
		/* the distance that allows you jump
		 * to similar item index in carousel 
		 * */
		this.resetAB = this.oItemNum * this.iWid;
		
		/* the boudaries of x that you need 
		 * to reset if x go out of these */
		this.xStart = 
			- (this.oItemNum - this.colNum - 1) * this.iWid;
		this.xEnd = 
			- (this.oItemNum * 2 + this.colNum - 2) * this.iWid;
		this.totalDots = Math.ceil(this.oItemNum / this.colNum);

/* init styles */
		this.outer.css({
			'overflow' : 'hidden',
			'position': 'relative'
		});		
		
		this.stage.css({
			'position' :'relative',
			'width': (stageWidPx * 100 / this.wid) + '%',
			'max-width' : 'none'
		});
		
		
		this.items.css({
			'width':  (iWid * 100 / stageWidPx) + '%',
			'float': this.left
		});		
		
		if (iMarStage) {
			this.items.css('margin-' + this.left, iMarStage + '%');
		}
		
		$(this.items[0]).css('margin-' + this.left, 0);
		if (this.debug) {
			console.log('init', this);
		}		
		
		/* display and enable everything */
		this.display();		
		this.enableDots();		
		
		if (!reinit) {
			this.enableDrag();
			this.enableKeyboard();
			this.enableResponsive();
			this.enableNav();
			this.enableHover();
			
			/* add this to fire finish event */
			this._.addClass(this.opt.wrapperClass);
		}
		
		
	}	
	SneeitCarousel.prototype.getPageX = function(e) {		
		if (this.debug) {
			console.log('getPageX');
		}
		
		if (typeof(e['pageX']) == 'undefined' && 
			typeof(e['originalEvent']['touches'][0]['clientX']) != 'undefined') {
			return e['originalEvent']['touches'][0]['clientX'];
		}
		return e.pageX;
	}
	
	/**
	 * Detect 
	 * @returns {undefined}
	 */
	SneeitCarousel.prototype.dragStart = function() {
		
	}
	SneeitCarousel.prototype.dragMove = function() {
		
	}
	SneeitCarousel.prototype.dragMove = function() {
		
	}
	SneeitCarousel.prototype.enableDrag = function() {		
		if (this.debug) {
			console.log('enableDrag');
		}
		/* process mouse drag */
		var that = this;
	
		this.stage.on('mousedown touchstart', function(e){						
			e.preventDefault();			
			if (that.drag !== false) {				
				return false;
			}
						
			
			/* process if touch event */
			e.pageX = that.getPageX(e);

/* stop stage, update X and curMargin */
			that.drag = e.pageX;			
			that.stop();
						
			
			return false;
		});
		$(document).on('mousemove touchmove', function(e){			
			if (that.drag === false) {				
				return;
			}			
			
			e.preventDefault();
			
			/* process if touch event */
			e.pageX = that.getPageX(e);
			
			/* calculate for target x */
			if (that.rtl) {				
				that.x -= (e.pageX - that.drag) * 100 / that.wid;
			} else {
				that.x += (e.pageX - that.drag) * 100 / that.wid;
			}
			
			if (e.pageX < that.drag) {
				that.dragging = 'left';
			} else if (e.pageX > that.drag) {
				that.dragging = 'right';
			}			
			
			that.drag = e.pageX;			
			that.stage.css(that.xCSS, that.x + '%');
			that.resetX();
			
			return false;
		});

/* preventing move to href after ending drag on an A tag */
		this.stage.find('a[href]').on('click', function(e){			
			if (that.dragging) {				
				e.preventDefault();
				return false;
			}
		});
		
		/* when mouse up (end of mouse drag), we will recalculate x,
		 * also animate item back to nearest item border 
		 * Priority animate to direction of the mouse move
		 * */
		$(document).on('mouseup touchend', function(e){			
			if (that.drag === false) {				
				return;
			}
						
			
			that.x = that.getX();
			
			var x = 0;			
			for (var i = 0; i < that.itemNum - 1; i++) {				
				x = - (i * that.iWid);																
				
				/* find the item which contain current x point */
				if (that.x < x - that.epsilon && 
					that.x > x - that.iWid + that.epsilon) {
					break;
				}
			}
			
			if (i >= that.itemNum - 1) {
				that.drag = false;
				that.dragging = false;			
				that.display();
				return;
			}
			
			/* animate depending on drag direction and site direction 
			 * to animate to right position */
			var x = - (i * that.iWid);
			if (that.dragging == that.left) {
				x -= that.iWid;
			}										
			that.animate(x);
			
			/* we don't set down immediately 
			 * to prevent click events from a tags */
			setTimeout(function(){
				that.drag = false;
				that.dragging = false;
			}, 5);	
		});
	}
	
	
	SneeitCarousel.prototype.activeDot = function(x) {
		if (this.debug) {
			return;
			console.log('activeDot', x, this);
		}
		if (!this.dots) {			
			return;
		}
		
		var i = Math.round(Math.abs(x / this.iWid)) % this.oItemNum;
		i = Math.floor(i / this.colNum);
		this.dots.removeClass(this.opt.activeClass);
		$(this.dots[i]).addClass(this.opt.activeClass);
	}
	
	/**
	 * Enable dots as pagination for the carousel
	 * @returns {undefined}
	 */
	SneeitCarousel.prototype.enableDots = function() {		
		if (this.debug) {
			console.log('enableDots');
		}
		if (!this.totalDots || 
			!this.opt.dotsClass ||			
			!this.opt.dotClass
		) {
			return;
		}
		
		
		/* append dot raw HTML content to wrapper */
		var dots = '';
		var that = this;
		for (var i = 0; i < this.totalDots; i++) {
			var dot = '';
			if (typeof(this.opt.dotText) == 'function') {
				dot = this.opt.dotText({
					this: that,
					dotIndex: i,					
				});
			} else {
				dot = this.opt.dotText;
			}
			
			/* seem the user disable the dot, so just return */
			if (dot === false) {				
				return;
			}
			dots += '<div class="' + this.opt.dotClass + '" data-index="'+i+'">'+dot+'</div>';
		}
		
		/* if reinit, we have to 
		 * remove all and remake html */
		if (this.dots != null) {
			this._.find(this.dotsClass).html(dots);
		} else {
			dots = '<div class="' + this.opt.dotsClass + '">'+dots+'</div>';
			this._.append(dots);
		}
		
		this.dots = this._.find(this.dotClass);
		$(this.dots[0]).addClass(this.opt.activeClass);
		
		
		/* action when click dots */		
		this.dots.click(function(){						
			var index = $(this).attr('data-index');			
			if (typeof(index) == 'undefined' || isNaN(index)) {
				return;
			}
			
			that.stop();
			
			/* set dot index and active state */
			index = Number(index);						
//			that.dots.removeClass(that.opt.activeClass);
//			$(this).addClass(that.opt.activeClass);
			
			/* calculate nearest target x */				
			var x = - index * that.colNum * that.iWid;	
			var AB = x - that.x;
			var maxMatchPos = that.itemNum / that.oItemNum;
			var stepMatch = that.resetAB;
			for (var i = 1; i < maxMatchPos; i++) {
				var _x = x - i * stepMatch;
				var _AB = _x - that.x;
				if (Math.abs(_AB) < Math.abs(AB)) {
					AB = _AB;
				}
			}
			x = AB + that.x;
			
			/* it already stayed at the right position */
			if (Math.abs(AB) < that.epsilon) {				
				that.display();
				return;
			}			
			
			that.animate(x);
		});
	}
	
	SneeitCarousel.prototype.activeNav = function(x) {				
		if (this.debug) {
			return;
			console.log('activeNav', x, this);
		}
		/* previous arrow */
		var prevText = '';
		var that = this;
		if (typeof(this.opt.prevText) == 'function') {
			prevText = this.opt.prevText({
				this: that
			});
		} else {
			prevText = this.opt.prevText;
		}
		if (prevText !== false && this.opt.prevClass) {
			this._.find(this.prevClass).html(prevText);
		}				
		
		
		/* next arrow */
		var nextText = '';
		if (typeof(this.opt.nextText) == 'function') {
			nextText = this.opt.nextText({
				this: that
			});
		} else {
			nextText = this.opt.nextText;
		}
		if (nextText !== false && this.opt.nextClass) {
			this._.find(this.nextClass).html(nextText);
		}
	}
	
	SneeitCarousel.prototype.enableNav = function() {		
		if (this.debug) {
			console.log('enableNav');
		}
		if (!this.opt.navClass) {
			return;
		}
		/* append arrow HTML content to wrapper */
		var arrowsContent = '';		
		var that = this;
		
		/* previous arrow */
		var prevText = '';
		if (typeof(this.opt.prevText) == 'function') {
			prevText = this.opt.prevText({
				this: that
			});
		} else {
			prevText = this.opt.prevText;
		}
		if (prevText && this.opt.prevClass) {
			arrowsContent += '<div class="' + this.opt.prevClass + '">'+prevText+'</div>';
		}		
		
		
		/* next arrow */
		var nextText = '';
		if (typeof(this.opt.nextText) == 'function') {
			nextText = this.opt.nextText({
				this: that
			});
		} else {
			nextText = this.opt.nextText;
		}
		if (nextText && this.opt.nextClass) {
			arrowsContent += '<div class="' + this.opt.nextClass + '">'+nextText+'</div>';			
		}
		
		if (!arrowsContent) {
			return;
		}		
				
		this._.append('<div class="' + this.opt.navClass + '">' + arrowsContent + '</div>');		
		
		/* action when click arrows */		
		/* when click Previous Arrow */
		if (this.opt.prevClass) {
			this._.find(this.prevClass).click(function(){								
				that.prev();
			});
		}
		
		/* when click Next Arrow */		
		if (this.opt.nextClass) {
			this._.find(this.nextClass).click(function(){				
				that.next();
			});
		}
	}
	
	SneeitCarousel.prototype.prev = function() {		
		if (this.debug) {
			console.log('prev');
		}
		this.stop();		
		var i = Math.floor(this.x / this.iWid);
		var x = (i + 1) * this.iWid;
		
		/* the distance must be at least larger 
		 * than one item width */
		if (this.x - x > - this.iWid + this.epsilon) {
			x += this.iWid;
		}
		
		/* reset here to prevent move 
		 * out of the view area */
		if (x > this.xStart) {
			this.x -= this.resetAB;
			x -= this.resetAB;
			this.stage.css(this.xCSS, this.x +'%');
		}

// animate to the target
		this.animate(x, 90);
	}
	SneeitCarousel.prototype.next = function() {		
		if (this.debug) {
			console.log('next');
		}
		this.stop();		
		var i = Math.floor(Math.abs(this.x / this.iWid));
		var x = -(i + 1) * this.iWid;
		
		/* the distance must be at least larger 
		 * than one item width */
		if (Math.abs(this.x) > i * this.iWid + this.epsilon) {					
			x -= this.iWid;
		}
		
		/* reset here to prevent move 
		 * out of the view area */
		if (x < this.xEnd) {
			this.x += this.resetAB;
			x += this.resetAB;
			this.stage.css(this.xCSS, this.x +'%');
		}				
		// animate to the target
		this.animate(x, 90);
		
	}
	
	SneeitCarousel.prototype.enableKeyboard = function() {		
		if (this.debug) {
			console.log('enableKeyboard');
		}
		var that = this;
		$(document).keydown(function(e){			
			switch(e.which) {
				case 37: // left
					that.prev();
					break;

case 39: // right
					that.next();
					break;

default: return; // exit this handler for other keys
			}
			e.preventDefault(); // prevent the default action (scroll / move caret)
		});
	}
	
	SneeitCarousel.prototype.enableResponsive = function() {		
		if (this.debug) {
			console.log('enableResponsive');
		}
		var that = this;
		$(window).resize(function(){			
			that._.css('width', '');
			that.init(true);
		});
	}
	
	/**
	 * stop and resume when mouse hover
	 * @returns {undefined}
	 */
	SneeitCarousel.prototype.enableHover = function() {		
		if (this.debug) {
			console.log('enableHover');
		}
		var that = this;
		this._.on('mouseenter', function(){									
			that.hover = true;	
		});
		this._.on('mouseleave', function(){						
			that.hover = false;						
			/* only resume if the slider is not displaying
			 * (which will auto animate after the end) 
			 * and not animating (because if animating 
			 * then we don't need to resume
			 * */
			if (!that.displaying && that.animating === false) {
				that.display();
			}
		});
	}
	
	
	/**
	 * The jQuery Plugin for the Sneeit Carousel
	 * @todo Navigation plugin `next` and `prev`
	 * @public
	 */
	$.fn.sneeitCarousel = function(option) {						
		return this.each(function() {			
			new SneeitCarousel($(this), option);
		});		
	};
})( jQuery );