simple-timeline/simple.timeline.js at master · mrfijas/simple-timeline · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
const simpleTimeline = {
    init: function (options) {
        this.initOptions(options);
        this.cacheDOMElements();
        this.bindEvents();
        this.render();
    },

    initOptions: function (options) {
        _.extend(this, options);
        this.$el = $(this.el);
    },

    cacheDOMElements: function () {
        this.$dateFrom = $('#date-from', this.$el);
        this.$dateTo = $('#date-to', this.$el);
        this.$timeline = $('.timeline', this.$el);
    },

    bindEvents: function () {
        this.$dateFrom.on('change', this.render.bind(this));
        this.$dateTo.on('change', this.render.bind(this));
    },

    render: function () {
        this.updateNumbers();
        this.$timeline.empty();

        const width = 100 / this.totalDays + '%';
        for (var i = 0; i < this.totalDays; i++) {
            const date = moment(this.dateFrom).add(i, 'days');
            const $tick = this.getTick(i, date);
            $tick.width(width);
            this.$timeline.append($tick);
        }
    },

    getTick: function (index, date) {
        const $tick = $('<div class="tick"/>');

        if (this.isFirstDayOfMonth(date)) {
            $tick.addClass('tick--first-of-month');
        }

        if (!this.shouldRenderTickLabel(index, date)) {
            return $tick;
        }

        var label = '<span class="date">' + date.date() + '</span>';

        if (this.isFirstDayOfMonth(date)) {
            label += '<span class="month">' + date.format('MMMM') + '</span>';
        }

        if (this.isLastDay(index)) {
            label = date.date() + '<span class="month">Today</span>';
        }

        return $tick.html('<span>' + label + '</span>');

    },

    shouldRenderTickLabel: function (index, date) {
        if (this.isFirstDay(index) || this.isLastDay(index)) {
            return true;
        }

        if ([1, 7, 14, 21, 28].indexOf(date.date()) !== -1) {
            return !this.isSecondDay(index) && !this.isPenultimateDay(index);
        }

        return false;
    },

    isFirstDay: function (index) {
        return index === 0;
    },

    isSecondDay: function (index) {
        return index === 1;
    },

    isPenultimateDay: function (index) {
        return index === this.totalDays - 2;
    },

    isLastDay: function (index) {
        return index === this.totalDays - 1;
    },

    isFirstDayOfMonth: function (date) {
        return date.date() === 1;
    },

    updateNumbers: function () {
        this.dateFrom = moment(this.$dateFrom.val());
        this.dateTo = moment(this.$dateTo.val());
        this.totalDays = this.dateTo.diff(this.dateFrom, 'days') + 1;
    }
};

simpleTimeline.init({
    el: $('.timeline-wrapper')
});