Subversion-Projekte lars-tiefland.ci

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, "");
        }
});