Slider / rotator for MooTools

readme.md

#Examples

• http://sjavb.org/

rotator.js

Element.implement({
	ellipsis: function(fitHeight) {
	    if(this.getStyle("overflow") == "hidden" || fitHeight) {
	        var text = this.get('html');
			var multiline = true;
	        var t = this.clone()
	            .setStyle('display', 'none')
	            .setStyle('position', 'absolute')
	            .setStyle('overflow', 'visible')
	            .setStyle('width', multiline ? this.getSize().x - (this.getStyle('padding-right').toInt() + this.getStyle('padding-left').toInt()) : 'auto')
	            .setStyle('height', multiline ? 'auto' : this.getSize().y)
	            .inject(this, 'after');
		
			var originalWidth = this.getSize().x,
				originalHeight = fitHeight ? fitHeight : this.getSize().y;
		
	        function height() { return t.measure(t.getSize).y > originalHeight; };
	        function width() { return t.measure(t.getSize).x > originalWidth; };

	        var func = multiline ? height.bind(this) : width.bind(this);
			
			// this could be improved to work from the middle and grow / shrink from there
			// instead of incrementally shrinking the string and remeasuring the size
	        while (text.length > 0 && func()) {
	            text = text.substr(0, text.lastIndexOf(' '));
	            t.set('html', text + "...");
	        }

	        this.set('html', t.get('html'));
	        t.dispose();
	    }
	}
});

var Rotator = new Class({
	options: {
		interval: 12,
		type: 'T'
	},
	
	Implements: [Options],
	
	initialize: function(maskHolder, listHolder, options) {
		this.maskHolder = maskHolder;
		this.listHolder = listHolder;
		this.setOptions(options || {});
		
		this.maskHeight = this.maskHolder.getSize().y;
		this.itemList = this.listHolder.getChildren();
		this.currentPosition = 0;
		
		for(var a = 0; a < this.itemList.length; a++) {
			if(a == 0) {
				this.trim(this.itemList[a]);
				continue;
			}
			
			// look into using a better hide mechanism
			this.itemList[a].setStyle('opacity', 0); 
		}
		
		this.rotate.periodical(1000 * this.options.interval, this);
	},
	
	rotate: function() {
		var fadeOut = new Fx.Tween(this.itemList[this.currentPosition], {
			onComplete:function() {
				// check if the testimonial is too big
				this.trim(this.itemList[this.currentPosition]);

				var pos = this.itemList[this.currentPosition].getPosition(this.listHolder)
				this.listHolder.setStyle('margin-top', -pos.y);
				this.itemList[this.currentPosition].set('tween', {duration:'long'}).fade(0, 1);
			}.bind(this),
			
			property:'opacity',
			duration:'long'
		});

		fadeOut.start(1, 0);

		if(this.currentPosition + 1 == this.itemList.length) {
			this.currentPosition = 0;
		} else {
			this.currentPosition++;
		}	
	},
	
	trim: function(item) {
		// check if the item is too big
		var itemHeight = item.getSize().y;
		
		if(itemHeight > this.maskHeight) {
			// if it find the 'real' height available for the testimonial content (height of container - cite area)
			// then find a word per height measure and use that to estimate how many characters to display
			// the cut the text off at the end of the last word and add an ellipsis
			
			var availableHeight, itemContent;
			
			switch(this.options.type) {
				case 'T': // testimonials. Text only (no html)
					var textHolder = item.getElement('span');
					availableHeight = this.maskHeight - (itemHeight - textHolder.getSize().y);
					textHolder.ellipsis(availableHeight);
					break;
				case 'F': // faq. HTML
					availableHeight = this.maskHeight - (item.getElement('a').getSize().y * 3);
					item.getElement('div').ellipsis(availableHeight);
					break;
			}
		}
	}
});

slider.js

var SplashSlider = new Class({
	Implements: [Options],
	
	options: {
		rotateDelay: 8000,
		crossFadeClass: 'visible',
		javascriptFallBack: true,
		makeFirstVisible: false,
		flashFallBack: '/includes/swf/splash.swf',
		flashConfig: {
			container: '',
			vars: {}
		}
	},
	
	currentIndex: 0,
	splashItemList: [],
	
	currentSplashItem: null,
	splashRotateTimer: null,
	splashHolder: null,
	
	initialize: function(holder, options) {
		this.setOptions(options);
		this.splashHolder = $(holder);
		this.splashItemList = this.splashHolder.getChildren();
		if(this.splashItemList.length == 0) return;
		this.currentSplashItem = this.splashItemList[0];
		this.delayNext = false;

		if(Modernizr.csstransitions) {
			this.changeSplashImage = this.crossFade.bind(this);
			
			if(this.options.makeFirstVisible) {
				this.splashItemList[0].addClass(this.options.crossFadeClass);
			}
		} else if(this.options.javascriptFallBack) {
			this.splashItemHeight = this.splashItemList[0].getSize().y;
			this.changeSplashImage = this.linearTransition.bind(this);
		}
		
		if(!this.options.javascriptFallBack && !Modernizr.csstransitions) {
			// then we are using flash
			new Swiff(this.options.flashFallBack, this.options.flashConfig);
		} else {
			splashRotateTimer = this.nextSlideTimer.bind(this).periodical(this.options.rotateDelay);
		}
	},
	
	// these are the manual functions
	
	next: function() {
		this.delayNext = true;
		this.nextSlide();
	},
	
	previous: function() {
		this.delayNext = true;
		this.prevSlide();
	},
	
	// proxy to catch the delay
	nextSlideTimer: function() {
		if(this.delayNext) {
			this.delayNext = false;
			return;
		}
		
		this.nextSlide();
	},
	
	nextSlide: function() {
		var nextIndex = this.currentIndex + 1;

		if(nextIndex >= this.splashItemList.length) nextIndex = 0;

		this.changeSplashImage(nextIndex);
	},

	prevSlide: function() {
		var prevIndex = this.currentIndex - 1;

		if(prevIndex < 0) prevIndex = 0;

		this.changeSplashImage(prevIndex);
	},
	
	linearTransition: function(index) {
		this.splashHolder.tween('margin-top', - index * this.splashItemHeight);
		this.currentIndex = index;
	},
	
	crossFade: function(nextIndex) {
		this.splashItemList[this.currentIndex].removeClass(this.options.crossFadeClass);
		this.splashItemList[nextIndex].addClass(this.options.crossFadeClass);
		this.currentIndex = nextIndex;
	}
	
});