datepicker/src/mixin.js

import dayjs from 'dayjs'
import store from './store.js'

// add function for iso 
import isoWeek from 'dayjs/plugin/isoWeek'
dayjs.extend(isoWeek)

// getting local data for names 
import localeData from 'dayjs/plugin/localeData'
dayjs.extend(localeData)

/**
 *  Mixin for extends Riot-Component
 *
 *  @author Björn Hase
 *  @license http://opensource.org/licenses/MIT The MIT License
 *  @link https://gitea.node001.net/tiny-components/datepicker
 *
 */

export default {
    state: {
        date: false,
        weeks: [],

        firstDayOfMonth: false,
        firstDayOfWeek: false,
        lastDayOfMonth: false,

        weekdaysNames: [],
        monthNames: [],

        weekFormat: 'isoWeek',

        isoFormat: true,
        namespace: ''
    },

    /**
     *
     *
     */
    onBeforeMount() {
        this.state.monthNames = dayjs.months()
        this.state.weekdaysNames = dayjs.weekdaysShort()

        if (this.props.date) {
            this.state.date = dayjs(this.props.date)
        } else {
            this.state.date = dayjs()
        }

        if (this.props.namespace) {
            this.state.namespace = this.props.namespace + '.'
        }

        // change 
        if (this.props.isoFormat === 0) {
            this.state.isoFormat = false
            this.state.weekFormat = 'week'
        } else {
            this.state.weekdaysNames.push(this.state.weekdaysNames.shift())
        }
     
        store.on('update', (data) => {
            this.state.date = dayjs(data.date)
        })

        store.on('update-props', (data) => {
            this.state.date = dayjs(this.props.date)
        })

        this.createWeeksAndDays()
    },

    /**
     *  create weeks and days
     *
     *
     */
    createWeeksAndDays() {

        this.state.weeks = []

        // getting first day of Month
        this.state.firstDayOfMonth = this.state.date.startOf('month')
        this.state.firstDayOfWeek = this.state.firstDayOfMonth.startOf(this.state.weekFormat)
        this.state.lastDayOfMonth = this.state.date.endOf('month')

        const lastDayOfWeek = this.state.lastDayOfMonth.endOf(this.state.weekFormat).startOf('day')

        let day = this.state.firstDayOfWeek.clone()

        do {
            day = this.fillWeek(day)                    
        } while (day.isBefore(lastDayOfWeek))
    },

    /**
     *  fill week with days
     *
     *  @param {object} day 
     *
     */
    fillWeek(day) {

        const days = []

        days.push(day)

        do {
            day = day.add(1, 'day')
            days.push(day)
        } while (days.length <= 6)

        this.state.weeks.push(days) 
       
        // raise day for start of week
        return day.add(1, 'day') 
    },

    /**
     *  select single day
     *
     *  @param {object} event
     *  @param {object} day 
     *
     */
    handleSelectDay(event, day) {
        if (day.isSame(this.state.date)) {
            return false
        }

        this.state.date = day

        store.trigger(this.state.namespace + 'change', {
            date: this.state.date.clone()
        })

        this.update()
    },

    /**
     *  select month
     *
     *  @param {object} event
     *
     */
    handleSelectMonth(event) {
        this.state.date = this.state.date.month(event.target.value)
        this.createWeeksAndDays()

        store.trigger(this.state.namespace + 'change', {
            date: this.state.date.clone()
        })

        this.update()
    },

    /**
     *  select year
     *
     *  @param {object} event
     *
     */
    handleSelectYear(event) {
        this.state.date = this.state.date.year(event.target.value)
        this.createWeeksAndDays()

        store.trigger(this.state.namespace + 'change', {
            date: this.state.date.clone()
        })

        this.update()
    },

    /**
     *  previous month
     *
     *  @param {object} event
     *  @param {object} day 
     *
     */
    handlePreviousMonth(event) {
        this.state.date = this.state.date.subtract(1, 'month')
        this.createWeeksAndDays()

        store.trigger(this.state.namespace + 'change', {
            date: this.state.date.clone()
        })

        this.update()
    },

    /**
     *  next month 
     *
     *  @param {object} event
     *  @param {object} day 
     *
     */
    handleNextMonth(event) {
        this.state.date = this.state.date.add(1, 'month')
        this.createWeeksAndDays()

        store.trigger(this.state.namespace + 'change', {
            date: this.state.date.clone()
        })

        this.update()
    },

    /**
     *  previous year
     *
     *  @param {object} event
     *
     */
    handlePreviousYear(event) {
        this.state.date = this.state.date.subtract(1, 'year')
        this.createWeeksAndDays()

        store.trigger(this.state.namespace + 'change', {
            date: this.state.date.clone()
        })

        this.update()
    },

    /**
     *  next year 
     *
     *  @param {object} event
     *
     */
    handleNextYear(event) {
        this.state.date = this.state.date.add(1, 'year')
        this.createWeeksAndDays()

        store.trigger(this.state.namespace + 'change', {
            date: this.state.date.clone()
        })

        this.update()
    },

    /**
     *  getting classes for single day 
     *
     *  @param {object} event
     *  @param {array} classes
     *  @return {string}
     */
    addClassDay(day, classes) {

        if (day.isSame(this.state.date, 'day')) {
            classes.push('tiny-datepicker__day--current')
        }

        if (day.isBefore(this.state.firstDayOfMonth) || day.isAfter(this.state.lastDayOfMonth)) {
            classes.push('tiny-datepicker__day--not-current')
        }

        return classes.join(' ')
    }
}