first commit

fathom.js

@@ -0,0 +1,396 @@
+/*
+ * Fathom.js v1.2.4
+ * Copyright 2012, Mark Dalgleish
+ *
+ * This content is released under the MIT License
+ * markdalgleish.mit-license.org
+ */
+
+(function($, window, undefined){
+	var Fathom = function(container, options){
+			this.container = container;
+			this.options = options;			
+			return this.init();
+		},
+		$window = $(window),
+		$document = $(document);
+
+	Fathom.prototype = {
+		defaults: {
+			portable: undefined,
+			portableTagName: 'div',
+			portableClass: 'fathom-container',
+			displayMode: 'multi',
+			slideTagName: 'div',
+			slideClass: 'slide',
+			activeClass: 'activeslide',
+			inactiveClass: 'inactiveslide',
+			margin: "5%",
+			onScrollInterval: 300,
+			scrollLength: 600,
+			easing: 'swing',
+
+			timeline: undefined,
+			video: undefined,
+
+			onActivateSlide: undefined,
+			onDeactivateSlide: undefined
+		},
+
+		init: function() {
+			this.config = $.extend({}, this.defaults, this.options);
+
+			this.$container = $(this.container);
+			this.$slides = this.$container.find(this.config.slideTagName + 
+				(this.config.slideClass ? '.' + this.config.slideClass : ''));
+			this.$firstSlide = this.$slides.filter(':first');
+			this.$lastSlide = this.$slides.filter(':last');
+			this.$activeSlide = this.activateSlide(this.$firstSlide);
+
+			return this
+				._detectPortable()
+				._setStyles()
+				._setClasses()
+				._setMargins()
+				._setupEvents()
+				._setupTimeline()
+				._setupVideo()
+				._setupScrollHandler();
+		},
+
+		nextSlide: function() {
+			return this.scrollToSlide(this.$activeSlide.next());
+		},
+
+		prevSlide: function() {
+			return this.scrollToSlide(this.$activeSlide.prev());
+		},
+
+		scrollToSlide: function($elem) {
+			var self = this,
+				$scrollingElement = this.config.portable ? this.$portableContainer : $('html,body'),
+				$container = this.config.portable ? this.$portableContainer : $window,
+				portableScrollLeft = this.config.portable ? this.$portableContainer.scrollLeft() : 0;
+
+			if ($elem.length !== 1) {
+				return $elem;
+			}
+
+			this.isAutoScrolling = true;
+
+			$scrollingElement.stop().animate({
+				scrollLeft: ($elem.position().left + portableScrollLeft - 
+					(($container.width() - $elem.innerWidth()) / 2))
+			}, self.config.scrollLength, self.config.easing, function() {
+				self.isAutoScrolling = false;
+			});
+
+			return this.activateSlide($elem);
+		},
+
+		activateSlide: function($elem) {
+			var elem = $elem.get(0),
+				activeSlide;
+
+			if (this.$activeSlide !== undefined) {
+				activeSlide = this.$activeSlide.get(0)
+
+				if (activeSlide === elem) {
+					return $elem;
+				}
+
+				this.$activeSlide.removeClass(this.config.activeClass)
+					.addClass(this.config.inactiveClass)
+					.trigger('deactivateslide.fathom');
+
+				if (typeof this.config.onDeactivateSlide === 'function') {
+					this.config.onDeactivateSlide.call(activeSlide);
+				}
+			}
+
+			$elem.removeClass(this.config.inactiveClass).addClass(this.config.activeClass);
+
+			this.$activeSlide = $elem;
+
+			$elem.trigger('activateslide.fathom');
+
+			if (typeof this.config.onActivateSlide === 'function') {
+				this.config.onActivateSlide.call(elem);
+			}
+
+			return $elem;
+		},
+
+		setTime: function( t ) {
+			var times = this._timeline || [];
+			for(var i = 0; i < times.length; i++) {
+				if(times[i].time <= t && times[i+1].time > t) {
+					if(this.$activeSlide[0] !== times[i].slide[0]) {
+						this.scrollToSlide( times[i].slide );
+					}
+					break;
+				}
+			}
+		},
+
+		_detectPortable: function() {
+			if (this.config.portable === undefined) {
+				if (this.$container.parent().is('body')) {
+					this.config.portable = false;
+				} else {
+					this.config.portable = true;
+				}
+			}
+
+			return this;
+		},
+
+		_setupEvents: function() {
+			var self = this;
+
+			this.$container.delegate(this.config.slideTagName + '.' + this.config.inactiveClass, 'click', function(event) {
+				event.preventDefault();
+				self.scrollToSlide($(this));
+			});
+
+			$document.keydown(function(event) {
+				var key = event.which;
+
+				if (key === 39 || key === 32) {
+					event.preventDefault();
+					self.nextSlide();
+				} else if ( key === 37) {
+					event.preventDefault();
+					self.prevSlide();
+				}
+			});
+
+			$window.resize(function(){
+				self._setMargins();
+			});
+
+			return this;
+		},
+
+		_setStyles: function() {
+			this.$container.css('white-space', 'nowrap');
+
+			this.$slides.css({
+				'white-space': 'normal',
+				'display': 'inline-block',
+				'vertical-align': 'top'
+			});
+
+			if (this.config.portable) {
+				this.$portableContainer = $('<' + this.config.portableTagName + ' class="' + this.config.portableClass + '" />');
+				this.$container.before(this.$portableContainer).appendTo(this.$portableContainer);
+			}
+
+			return this;
+		},
+
+		_setClasses: function() {
+			this.$slides.addClass(this.config.inactiveClass);
+
+			this.$activeSlide
+				.removeClass(this.config.inactiveClass)
+				.addClass(this.config.activeClass);
+
+			return this;
+		},
+
+		_setMargins: function() {
+			var displayMode = this.config.displayMode,
+				$container = this.config.portable ? this.$portableContainer : $window,
+				containerWidth = $container.width(),
+				// verticalSpacing = Math.ceil(($container.height() - this.$firstSlide.innerHeight()) / 2),
+				// firstSlideSpacing = Math.ceil((containerWidth - this.$firstSlide.innerWidth()) / 2),
+				// lastSlideSpacing = Math.ceil((containerWidth - this.$lastSlide.innerWidth()) / 2),
+				// peekabooWidth = Math.ceil(containerWidth / 25);
+
+				// containerWidth =  500,
+				// containerWidth = $container.width(),				
+				containerHeight = 600,
+
+				verticalSpacing = Math.ceil(($container.height() - this.$firstSlide.innerHeight()) / 2),
+				firstSlideSpacing = Math.ceil((containerWidth - this.$firstSlide.innerWidth()) / 2),
+				lastSlideSpacing = Math.ceil((containerWidth - this.$lastSlide.innerWidth()) / 2),
+				peekabooWidth = Math.ceil(containerWidth / 25);
+
+			this.$container.css('margin-top', 40 );
+
+			if (displayMode === 'single') {
+				this.$slides.css('margin-right', firstSlideSpacing - peekabooWidth);
+			} else if (displayMode === 'multi') {
+				this.$slides.css('margin-right', this.config.margin);
+			}
+
+			//this.$firstSlide.css('margin-left', firstSlideSpacing);
+			//this.$lastSlide.css('margin-right', lastSlideSpacing);
+
+			if (this.config.portable) {
+				var slidesWidth = parseInt(this.$container.css('padding-left')) + parseInt(this.$container.css('padding-right'));
+				this.$slides.each(function() {
+					slidesWidth += $(this).outerWidth(true);
+				});
+				this.$container.width(slidesWidth);
+			}
+
+			return this;
+		},
+
+		_setupTimeline: function() {
+			var slides = this.$slides;
+
+			function parseTime(point) {
+				for(var m = (point.time || point).toString().match(/(((\d+):)?(\d+):)?(\d+)/), a = 0, i = 3; i <= 5; i++) {
+					a = (a * 60) + parseInt(m[i] || 0);
+				}
+				return a;
+			}
+
+			var currentSlide = -1;
+			function parseSlide(point) {
+				if( point.slide == null ) {
+					currentSlide++;
+				} else if($.type(point.slide) === 'number') {
+					currentSlide = point.slide;
+				} else{
+					for(var match = slides.filter( point.slide )[0], i = 0; i < slides.length; i++ ) {
+						if( slides[i] === match ) {
+							currentSlide = i;
+							break;
+						}
+					}
+				}
+				return slides.eq( currentSlide );
+			}
+
+			if(! this.config.timeline)
+				return this;
+
+			this._timeline = [];
+			for(var t = this.config.timeline, i = 0; i < t.length; i++) {
+				this._timeline.push({ time: parseTime( t[i] ), slide: parseSlide( t[i] ) });
+			}
+			this._timeline.push( { time: 99999, slide: t[0].slide } );
+			return this;
+		},
+
+		_setupVideo: function() {
+			if( !this.config.video ) {
+				this._setupDefaultTimeSource();
+			} else if( this.config.video.source === "vimeo" ) {
+				this._setupVimeoVideo( this.config.video );
+			} else {
+				throw "unknown video source, not supported";
+			}
+			return this;
+		},
+
+		_setupDefaultTimeSource: function() {
+			var self = this, t0 = (new Date()).getTime();
+			setInterval(function() {
+				var t1 = (new Date()).getTime();
+				self.setTime( (t1 - t0)/1000 );
+			}, 250 );
+		},
+
+		_setupVimeoVideo: function(vid) {
+			var self = this, vid = this.config.video, downgrade = false;
+
+			if(window.location.protocol === "file:") {
+				( "console" in window ) && console.log("vimeo video player api does not work with local files. Downgrading video support\nsee http://vimeo.com/api/docs/player-js");
+				downgrade = true;
+			}
+
+			function loadFrame() {
+				var id = "p" + vid.id;
+				var frameSrc = "<iframe id=\"" + id + "\"	width=\""+ ( vid.width || 360 ) + "\" height=\"" + (vid.height || 203 ) + "\" frameborder=\"0\" src=\"http://player.vimeo.com/video/" + vid.id + "?api=1&player_id=" + id + "\">";
+				return $( frameSrc ).appendTo( vid.parent || "body" )[0];
+			}
+
+			if( downgrade ) {
+				$( loadFrame() ).bind("load", function() {
+					self._setupDefaultTimeSource();
+				});
+			} else {
+				$.getScript("http://a.vimeocdn.com/js/froogaloop2.min.js?", function() {
+					$f( loadFrame() ).addEvent( 'ready', function (player_id) {
+						var vimeo = $f( player_id ), timer = false;
+						vimeo.addEvent('play', function(data) {
+							if(timer === false) {	
+								timer = setInterval( function() {
+									vimeo.api('getCurrentTime', function ( value, player_id ) {
+										self.setTime( value );
+									});
+								}, 250 );
+							}
+						});
+						vimeo.addEvent('pause', function(data) {
+							clearInterval(timer);
+							timer = false;
+						});
+						vid.autoplay && vimeo.api( "play" );
+					} );
+				} );
+			}
+		},
+
+		_setupScrollHandler: function() {
+			var self = this,
+				slideSelector = self.config.slideTagName + (self.config.slideClass ? '.' + self.config.slideClass : ''),
+				$scrollContainer = this.config.portable ? this.$portableContainer : $window,
+				isIOS = navigator.userAgent.match(/like Mac OS X/i) === null ? false : true,
+				$elem;
+
+			self.scrolling = false;			
+
+			setInterval(function() {
+				if (self.scrolling && (self.isAutoScrolling === false || self.isAutoScrolling === undefined)) {
+					self.scrolling = false;
+
+					if ($scrollContainer.scrollLeft() === 0) {
+						self.activateSlide(self.$firstSlide)
+					} else {
+						var offsetX = self.config.portable ? $scrollContainer.position().left : 0,
+							offsetY = self.config.portable ? $scrollContainer.position().top : 0,
+							midpoint = {
+								x: offsetX + ($scrollContainer.width() / 2) + (isIOS ? $window.scrollLeft() : 0),
+								y: offsetY + ($scrollContainer.height() / 2) + (isIOS ? $window.scrollTop() : 0)
+							};
+
+						$elem = $(document.elementFromPoint(midpoint.x, midpoint.y));
+
+						if ($elem.is(slideSelector)) {
+							self.activateSlide($elem);
+						} else {
+							$elem = $elem.parents(slideSelector + ':first').each(function(){
+								self.activateSlide($(this));
+							});
+						}
+					}
+				}
+			}, self.config.onScrollInterval);
+
+			$scrollContainer.scroll(function() {
+				self.scrolling = true;
+			});
+
+			return this;
+		}				
+	};
+
+	$.fn.fathom = function(options){
+		new Fathom(this, options);
+		return this;
+	};
+
+	Fathom.defaults = Fathom.prototype.defaults;
+
+	Fathom.setDefaults = function(options) {
+		$.extend(Fathom.defaults, options);
+	};
+
+	window.Fathom = Fathom;
+})(jQuery,window);