responsivewebframework/src/js/time-line.js

Jalasoft Foundation Front End Framework ========================================

/*
  Time line
 */

(function ($) {
    $.fn.frameworkTimeLine = function () {

        // Return a list of data
        var getDatas = function (element) {
            var listDatas = [];

            $(element).children('li').each(function() {
                var datas = {};
                var date = $(this).data();
                datas.date = date.date;
                datas.description = $(this).text();
                listDatas.push(datas);
            });

            return listDatas;
        };

        // return the element's parent
        var getParent = function (element) {
            return $(element).parent();
        };

        //Date Format
        var dateFormat = function(date) {
            var weekDay = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
            var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
            var now = new Date(date);
            var stringDay = weekDay[now.getDay()];
            var month = months[now.getUTCMonth()];
            var day = now.getUTCDate();
            var year = now.getUTCFullYear();
            var newDate = stringDay + ', ' + month + ' ' + day + ', ' + year;

            return newDate;
        };

        // Sort an array in accordance to a key
        var sortByKey = function(array, key) {
            return array.sort(function (a, b) {
                var x = a[key];
                var y = b[key];
                return ((x < y) ? -1 : ((x > y) ? 1 : 0));
            });
        };

        // Return days' number between two dates
        var getDaysBetween = function (date1, date2) {

            var oneDay = 24*60*60*1000;
            var firstDate = new Date(date1);
            var secondDate = new Date(date2);

            return Math.abs((firstDate.getTime() - secondDate.getTime())/(oneDay));
        };

        // fill the list with data
        var fillList = function(increment, data, startDate) {
            var elements = '';
            $.each(data, function(i, v) {
                var numDays = getDaysBetween(startDate, v.date);
                var r = numDays * increment;
                var now = dateFormat(v.date);
                var template = ['<li style="left: ', r, '%" data-toggle="tooltip" data-placement="bottom" title="', v.description,'<br>', now,'">',
                                '</li>'].join("");
                elements = elements + template;

            });

            return elements;
        };

        // This is executed for all timeline
        $(this).each(function(index, element){

            var idTimeLine = 'timeLine' + index;

            var data = $(element).data();
            var startDate = data.startdate;
            var endDate = data.enddate;
            // only in case enddate is empty
            if(endDate.length === 0 ) {
                var date = new Date();
                endDate = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
            }
            var parentContainer = getParent(element);
            var list = getDatas(element);
            var firstDate = {
                date: startDate,
                text: ''
            };
            var lastDate = {
                date: endDate,
                text: ''
            };
            list.push(lastDate);
            list.unshift(firstDate);

            list = sortByKey(list, 'date');
            var days = getDaysBetween(startDate, endDate);
            var increment = 100/days;

            var elements = fillList(increment, list,startDate);
            var timeLine = '<ul id="'+ idTimeLine +'" class="timeline"></ul>';
            $(parentContainer).append(timeLine);
            $('#'+idTimeLine).append(elements);
        });

    }
})(jQuery);