Subversion-Projekte lars-tiefland.cienc

jQuery(document).ready(function($){

	var timelines = $('.cd-horizontal-timeline'),

		eventsMinDistance = 60;

	(timelines.length > 0) && initTimeline(timelines);

	function initTimeline(timelines) {

		timelines.each(function(){

			var timeline = $(this),

				timelineComponents = {};

			//cache timeline components

			timelineComponents['timelineWrapper'] = timeline.find('.events-wrapper');

			timelineComponents['eventsWrapper'] = timelineComponents['timelineWrapper'].children('.events');

			timelineComponents['fillingLine'] = timelineComponents['eventsWrapper'].children('.filling-line');

			timelineComponents['timelineEvents'] = timelineComponents['eventsWrapper'].find('a');

			timelineComponents['timelineDates'] = parseDate(timelineComponents['timelineEvents']);

			timelineComponents['eventsMinLapse'] = minLapse(timelineComponents['timelineDates']);

			timelineComponents['timelineNavigation'] = timeline.find('.cd-timeline-navigation');

			timelineComponents['eventsContent'] = timeline.children('.events-content');

			//assign a left postion to the single events along the timeline

			setDatePosition(timelineComponents, eventsMinDistance);

			//assign a width to the timeline

			var timelineTotWidth = setTimelineWidth(timelineComponents, eventsMinDistance);

			//the timeline has been initialize - show it

			timeline.addClass('loaded');

			//detect click on the next arrow

			timelineComponents['timelineNavigation'].on('click', '.next', function(event){

				event.preventDefault();

				updateSlide(timelineComponents, timelineTotWidth, 'next');

			});

			//detect click on the prev arrow

			timelineComponents['timelineNavigation'].on('click', '.prev', function(event){

				event.preventDefault();

				updateSlide(timelineComponents, timelineTotWidth, 'prev');

			});

			//detect click on the a single event - show new event content

			timelineComponents['eventsWrapper'].on('click', 'a', function(event){

				event.preventDefault();

				timelineComponents['timelineEvents'].removeClass('selected');

				$(this).addClass('selected');

				updateOlderEvents($(this));

				updateFilling($(this), timelineComponents['fillingLine'], timelineTotWidth);

				updateVisibleContent($(this), timelineComponents['eventsContent']);

			});

			//on swipe, show next/prev event content

			timelineComponents['eventsContent'].on('swipeleft', function(){

				var mq = checkMQ();

				( mq == 'mobile' ) && showNewContent(timelineComponents, timelineTotWidth, 'next');

			});

			timelineComponents['eventsContent'].on('swiperight', function(){

				var mq = checkMQ();

				( mq == 'mobile' ) && showNewContent(timelineComponents, timelineTotWidth, 'prev');

			});

			//keyboard navigation

			$(document).keyup(function(event){

				if(event.which=='37' && elementInViewport(timeline.get(0)) ) {

					showNewContent(timelineComponents, timelineTotWidth, 'prev');

				} else if( event.which=='39' && elementInViewport(timeline.get(0))) {

					showNewContent(timelineComponents, timelineTotWidth, 'next');

				}

			});

		});

	}

	function updateSlide(timelineComponents, timelineTotWidth, string) {

		//retrieve translateX value of timelineComponents['eventsWrapper']

		var translateValue = getTranslateValue(timelineComponents['eventsWrapper']),

			wrapperWidth = Number(timelineComponents['timelineWrapper'].css('width').replace('px', ''));

		//translate the timeline to the left('next')/right('prev')

		(string == 'next')

			? translateTimeline(timelineComponents, translateValue - wrapperWidth + eventsMinDistance, wrapperWidth - timelineTotWidth)

			: translateTimeline(timelineComponents, translateValue + wrapperWidth - eventsMinDistance);

	}

	function showNewContent(timelineComponents, timelineTotWidth, string) {

		//go from one event to the next/previous one

		var visibleContent =  timelineComponents['eventsContent'].find('.selected'),

			newContent = ( string == 'next' ) ? visibleContent.next() : visibleContent.prev();

		if ( newContent.length > 0 ) { //if there's a next/prev event - show it

			var selectedDate = timelineComponents['eventsWrapper'].find('.selected'),

				newEvent = ( string == 'next' ) ? selectedDate.parent('li').next('li').children('a') : selectedDate.parent('li').prev('li').children('a');

			updateFilling(newEvent, timelineComponents['fillingLine'], timelineTotWidth);

			updateVisibleContent(newEvent, timelineComponents['eventsContent']);

			newEvent.addClass('selected');

			selectedDate.removeClass('selected');

			updateOlderEvents(newEvent);

			updateTimelinePosition(string, newEvent, timelineComponents);

		}

	}

	function updateTimelinePosition(string, event, timelineComponents) {

		//translate timeline to the left/right according to the position of the selected event

		var eventStyle = window.getComputedStyle(event.get(0), null),

			eventLeft = Number(eventStyle.getPropertyValue("left").replace('px', '')),

			timelineWidth = Number(timelineComponents['timelineWrapper'].css('width').replace('px', '')),

			timelineTotWidth = Number(timelineComponents['eventsWrapper'].css('width').replace('px', ''));

		var timelineTranslate = getTranslateValue(timelineComponents['eventsWrapper']);

        if( (string == 'next' && eventLeft > timelineWidth - timelineTranslate) || (string == 'prev' && eventLeft < - timelineTranslate) ) {

        	translateTimeline(timelineComponents, - eventLeft + timelineWidth/2, timelineWidth - timelineTotWidth);

        }

	}

	function translateTimeline(timelineComponents, value, totWidth) {

		var eventsWrapper = timelineComponents['eventsWrapper'].get(0);

		value = (value > 0) ? 0 : value; //only negative translate value

		value = ( !(typeof totWidth === 'undefined') &&  value < totWidth ) ? totWidth : value; //do not translate more than timeline width

		setTransformValue(eventsWrapper, 'translateX', value+'px');

		//update navigation arrows visibility

		(value == 0 ) ? timelineComponents['timelineNavigation'].find('.prev').addClass('inactive') : timelineComponents['timelineNavigation'].find('.prev').removeClass('inactive');

		(value == totWidth ) ? timelineComponents['timelineNavigation'].find('.next').addClass('inactive') : timelineComponents['timelineNavigation'].find('.next').removeClass('inactive');

	}

	function updateFilling(selectedEvent, filling, totWidth) {

		//change .filling-line length according to the selected event

		var eventStyle = window.getComputedStyle(selectedEvent.get(0), null),

			eventLeft = eventStyle.getPropertyValue("left"),

			eventWidth = eventStyle.getPropertyValue("width");

		eventLeft = Number(eventLeft.replace('px', '')) + Number(eventWidth.replace('px', ''))/2;

		var scaleValue = eventLeft/totWidth;

		setTransformValue(filling.get(0), 'scaleX', scaleValue);

	}

	function setDatePosition(timelineComponents, min) {

		for (i = 0; i < timelineComponents['timelineDates'].length; i++) {

		    var distance = daydiff(timelineComponents['timelineDates'][0], timelineComponents['timelineDates'][i]),

		    	distanceNorm = Math.round(distance/timelineComponents['eventsMinLapse']) + 2;

		    timelineComponents['timelineEvents'].eq(i).css('left', distanceNorm*min+'px');

		}

	}

	function setTimelineWidth(timelineComponents, width) {

		var timeSpan = daydiff(timelineComponents['timelineDates'][0], timelineComponents['timelineDates'][timelineComponents['timelineDates'].length-1]),

			timeSpanNorm = timeSpan/timelineComponents['eventsMinLapse'],

			timeSpanNorm = Math.round(timeSpanNorm) + 4,

			totalWidth = timeSpanNorm*width;

		timelineComponents['eventsWrapper'].css('width', totalWidth+'px');

		updateFilling(timelineComponents['eventsWrapper'].find('a.selected'), timelineComponents['fillingLine'], totalWidth);

		updateTimelinePosition('next', timelineComponents['eventsWrapper'].find('a.selected'), timelineComponents);

		return totalWidth;

	}

	function updateVisibleContent(event, eventsContent) {

		var eventDate = event.data('date'),

			visibleContent = eventsContent.find('.selected'),

			selectedContent = eventsContent.find('[data-date="'+ eventDate +'"]'),

			selectedContentHeight = selectedContent.height();

		if (selectedContent.index() > visibleContent.index()) {

			var classEnetering = 'selected enter-right',

				classLeaving = 'leave-left';

		} else {

			var classEnetering = 'selected enter-left',

				classLeaving = 'leave-right';

		}

		selectedContent.attr('class', classEnetering);

		visibleContent.attr('class', classLeaving).one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(){

			visibleContent.removeClass('leave-right leave-left');

			selectedContent.removeClass('enter-left enter-right');

		});

		eventsContent.css('height', selectedContentHeight+'px');

	}

	function updateOlderEvents(event) {

		event.parent('li').prevAll('li').children('a').addClass('older-event').end().end().nextAll('li').children('a').removeClass('older-event');

	}

	function getTranslateValue(timeline) {

		var timelineStyle = window.getComputedStyle(timeline.get(0), null),

			timelineTranslate = timelineStyle.getPropertyValue("-webkit-transform") ||

         		timelineStyle.getPropertyValue("-moz-transform") ||

         		timelineStyle.getPropertyValue("-ms-transform") ||

         		timelineStyle.getPropertyValue("-o-transform") ||

         		timelineStyle.getPropertyValue("transform");

        if( timelineTranslate.indexOf('(') >=0 ) {

        	var timelineTranslate = timelineTranslate.split('(')[1];

    		timelineTranslate = timelineTranslate.split(')')[0];

    		timelineTranslate = timelineTranslate.split(',');

    		var translateValue = timelineTranslate[4];

        } else {

        	var translateValue = 0;

        }

        return Number(translateValue);

	}

	function setTransformValue(element, property, value) {

		element.style["-webkit-transform"] = property+"("+value+")";

		element.style["-moz-transform"] = property+"("+value+")";

		element.style["-ms-transform"] = property+"("+value+")";

		element.style["-o-transform"] = property+"("+value+")";

		element.style["transform"] = property+"("+value+")";

	}

	//based on http://stackoverflow.com/questions/542938/how-do-i-get-the-number-of-days-between-two-dates-in-javascript

	function parseDate(events) {

		var dateArrays = [];

		events.each(function(){

			var singleDate = $(this),

				dateComp = singleDate.data('date').split('T');

			if( dateComp.length > 1 ) { //both DD/MM/YEAR and time are provided

				var dayComp = dateComp[0].split('/'),

					timeComp = dateComp[1].split(':');

			} else if( dateComp[0].indexOf(':') >=0 ) { //only time is provide

				var dayComp = ["2000", "0", "0"],

					timeComp = dateComp[0].split(':');

			} else { //only DD/MM/YEAR

				var dayComp = dateComp[0].split('/'),

					timeComp = ["0", "0"];

			}

			var	newDate = new Date(dayComp[2], dayComp[1]-1, dayComp[0], timeComp[0], timeComp[1]);

			dateArrays.push(newDate);

		});

	    return dateArrays;

	}

	function daydiff(first, second) {

	    return Math.round((second-first));

	}

	function minLapse(dates) {

		//determine the minimum distance among events

		var dateDistances = [];

		for (i = 1; i < dates.length; i++) {

		    var distance = daydiff(dates[i-1], dates[i]);

		    dateDistances.push(distance);

		}

		return Math.min.apply(null, dateDistances);

	}

	/*

		How to tell if a DOM element is visible in the current viewport?

		http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport

	*/

	function elementInViewport(el) {

		var top = el.offsetTop;

		var left = el.offsetLeft;

		var width = el.offsetWidth;

		var height = el.offsetHeight;

		while(el.offsetParent) {

		    el = el.offsetParent;

		    top += el.offsetTop;

		    left += el.offsetLeft;

		}

		return (

		    top < (window.pageYOffset + window.innerHeight) &&

		    left < (window.pageXOffset + window.innerWidth) &&

		    (top + height) > window.pageYOffset &&

		    (left + width) > window.pageXOffset

		);

	}

	function checkMQ() {

		//check if mobile or desktop device

		return window.getComputedStyle(document.querySelector('.cd-horizontal-timeline'), '::before').getPropertyValue('content').replace(/'/g, "").replace(/"/g, "");

	}

});