jquery-roadmap/dist/jquery.roadmap.js

A simple timeline plugin for jQuery

;(function (factory) {
	"use strict";

	if (typeof define === 'function' && define.amd) {
		define(['jquery'], factory);
	} else if (typeof exports !== 'undefined') {
		module.exports = factory(require('jquery'), window, document);
	} else {
		factory(jQuery, window, document);
	}
})(function ($, window, document, undefined) {

	"use strict";

	// undefined is used here as the undefined global variable in ECMAScript 3 is
	// mutable (ie. it can be changed by someone else). undefined isn't really being
	// passed in so we can ensure the value of it is truly undefined. In ES5, undefined
	// can no longer be modified.

	// window and document are passed through as local variables rather than global
	// as this (slightly) quickens the resolution process and can be more efficiently
	// minified (especially when both are regularly referenced in your plugin).

	/**
  * jQuery custom plugin implement the roadmap functionality
  */

	$.fn.roadmap = function (events, opts) {
		if (!events instanceof Array) {
			events = [];
		}

		var defaults = {
			slide: 1,
			eventsPerSlide: 6,
			rootClass: 'roadmap',
			prevArrow: 'prev',
			nextArrow: 'next',
			orientation: 'auto',
			onBuild: $.noop,
			eventTemplate: '<div class="event">' + '<div class="event__date">####DATE###</div>' + '<div class="event__content">####CONTENT###</div>' + '</div>'
		};

		var settings = $.extend({}, defaults, opts);

		var buildEvent = function (event, key) {
			var html = '<li class="' + settings.rootClass + '__events__event">' + settings.eventTemplate + '</li>';
			html = html.replace('####DATE###', event.date);
			html = html.replace('####CONTENT###', event.content);

			var left = 100 / (settings.eventsPerSlide - 1) * key;

			return $(html).css('left', left + '%');
		};

		return this.each(function () {
			var _this = this;
			var $this = $(this);
			var currentSlide = settings.slide - 1;

			/**
    * Store events and settings
    */
			$this.data({
				events: events,
				settings: settings,
				currentSlide: currentSlide
			}).addClass(settings.rootClass);

			var clear = function () {
				$this.removeClass(settings.rootClass + '--initialized');

				$this.find('.' + settings.rootClass + '__events').remove();
				$this.find('.' + settings.rootClass + '__navigation').remove();
			};

			var buildEvents = function () {
				var currentSlide = $this.data('currentSlide');
				var settings = $this.data('settings');
				var events = $this.data('events');

				$('<ol/>', { class: settings.rootClass + '__events' }).append(events.slice(currentSlide * settings.eventsPerSlide, (currentSlide + 1) * settings.eventsPerSlide).map(buildEvent)).appendTo(_this);
			};

			var buildNavigation = function () {
				var currentSlide = $this.data('currentSlide');

				var buildNav = function (nav) {
					switch (nav) {
						case 'prev':
							if (currentSlide > 0) {
								return $('<li><a href="#" class="' + nav + '">' + settings.prevArrow + '</a></li>');
							}
							break;

						case 'next':
							if ((currentSlide + 1) * settings.eventsPerSlide < events.length) {
								return $('<li><a href="#" class="' + nav + '">' + settings.nextArrow + '</a></li>');
							}
							break;
					}

					return $('<li></li>');
				};

				$('<ul/>', { class: settings.rootClass + '__navigation' }).append(['prev', 'next'].map(buildNav)).appendTo(_this);
			};

			var setOrientation = function () {

				var getOrientation = function () {
					switch (settings.orientation) {
						case 'horizontal':
						case 'vertical':
						case 'auto':
							return settings.orientation;
							break;
					}

					return 'auto';
				};

				$this.addClass(settings.rootClass + '--orientation-' + getOrientation());
			};

			var build = function () {

				clear();

				/**
     * Init events
     */
				buildEvents();

				/**
     * Init navigation
     */
				buildNavigation();

				/**
     * Set orientation
     */
				setOrientation();

				/**
     * Initialize
     */
				setTimeout(function () {
					$this.addClass(settings.rootClass + '--initialized');

					if (settings.onBuild) {
						settings.onBuild.call(null);
					}
				}, 100);
			};

			/**
    * Build roadmap
    */
			build();

			/**
    * Event Listeners
    */
			$('body').on('click', '.' + settings.rootClass + ' .' + settings.rootClass + '__navigation li > *', function (e) {
				e.preventDefault();

				/**
     * Handle prev click
     */
				if ($(this).hasClass('prev')) {

					var currentSlide = $this.data('currentSlide');
					if (currentSlide < 1) {
						return false;
					}

					$this.data({
						events: events,
						settings: settings,
						currentSlide: currentSlide - 1
					});

					build();
				}

				/**
     * Handle next click
     */
				else {

						var currentSlide = $this.data('currentSlide');
						if ((currentSlide + 1) * settings.eventsPerSlide >= events.length) {
							return false;
						}

						$this.data({
							events: events,
							settings: settings,
							currentSlide: currentSlide + 1
						});

						build();
					}
			});

			$(window).on('resize', function () {
				$this.removeClass(settings.rootClass + '--initialized');
				build();
			});
		});
	};
});