days-carousel.js

/**
 * Component days carousel
 */
import moment from 'moment'

/**
 * DaysCarousel class
 */
class DaysCarousel {

    /**
     * @param element {Object} NodeElement which needs to render as days-carousel
     * @param containerMaxSize {Number} count of dates to display
     * @return {DaysCarousel}
     */
    constructor(element, containerMaxSize=3) {
        this.$element = $(element)
        this.selectedDate = new Date()
        this.arrowNormalColor = '#4a4e4f'
        this.arrowDisallowColor = 'lightgray'
        this.itemClasses = 'days-carousel__item'
        this.containerMaxSize = containerMaxSize
        this.$nextButton = this.$element.next()
        this.$prevButton = this.$element.prev()

        this.$nextButton.click(event => {
            if (!this.getIncrementedDate().isAfter(moment().add(3, 'months'), 'day')) {
                this.slideNext()
            }
        })

        this.$prevButton.click(event => {
            if (!this.getDecrementedDate().isBefore(moment(), 'day')) {
                this.slidePrev()
            }
        })

        this.render()
    }

    /**
     * Get current dates
     * @return {Array} array of momentjs objects
     */
    getSelectedDates() {
        let dates = []

        for (let i = 0; i < this.containerMaxSize; i++) {
            dates.push(moment(this.selectedDate).add(i, 'days'))
        }

        return dates
    }

    /**
     * Get incremented current date-set
     * @param to {Number}
     * @return {Moment}
     */
    getIncrementedDate(to=this.containerMaxSize) {
        return moment(this.selectedDate).add(to, 'days')
    }

    /**
     * Get decremented current date-set
     * @param to {Number}
     * @return {Moment}
     */
    getDecrementedDate(to=this.containerMaxSize) {
        return moment(this.selectedDate).add(to * -1, 'days')
    }

    /**
     * Render day item template
     * @param date {Moment}
     * @return {String}
     */
    buildDayItem(date) {
        return `<div class="${this.itemClasses}">
            <span>${date.format('ddd')}</span>
            <span>${date.format('DD MMM')}</span>
        </div>`
    }

    /**
     * Render current dates
     */
    render() {
        this.$element.html('');
        const dates = this.getSelectedDates();

        for (let index = 0; index < this.containerMaxSize; index++) {
            this.$element.append(this.buildDayItem(dates[index]))
        }

        this.$prevButton.css('color', this.getDecrementedDate()
            .isBefore(moment(), 'day') 
            ? this.arrowDisallowColor 
            : this.arrowNormalColor
        )

        this.$nextButton.css('color', this.getIncrementedDate()
            .isAfter(moment().add(3, 'months'), 'day') 
            ? this.arrowDisallowColor 
            : this.arrowNormalColor
        )
    }

    /**
     * Slide to previous date-set
     */
    slidePrev() {
        this.selectedDate = this.getDecrementedDate().toDate()
        this.render()
    }

    /**
     * Slide to next date-set
     */
    slideNext() {
        this.selectedDate = this.getIncrementedDate().toDate()
        this.render()
    }
}

const init = () => {
    $('.days-carousel__dates').each((i, carousel) => {
        const iCount = carousel.parentElement
            .classList.contains('days-carousel_single-day') ? 1 : 3;
        new DaysCarousel(carousel, iCount);
    });
}

export default init();