caribou-month.html

<link rel="import" href="../polymer/polymer-element.html">
<link rel="import" href="../paper-button/paper-button.html">
<link rel="import" href="../paper-icon-button/paper-icon-button.html">
<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="caribou-datepicker-custom-icons.html">

<dom-module id="caribou-month">
    <template>
        <style>
            :host {
                display: block;
                overflow: hidden;
            }

            :host([hidden]) {
                display: none;
            }

            ul {
                list-style-type: none;
            }

            body {
                font-family: Verdana, sans-serif;
            }

            .weekdays {
                margin: 0;
                padding: var(--weekdays-padding, 10px 0);
                background-color: #ffffff;
            }

            .weekdays li {
                display: inline-block;
                width: 13%;
                color: #bfbfbf;
                text-align: center;
            }

            /* Days (1-31) */

            .days {
                padding: 0;
                background: #ffffff;
                margin: 0;
            }

            .days li {
                list-style-type: none;
                display: inline-block;
                width: 13%;
                text-align: center;
                font-size: 12px;
                color: #777;
            }

            /* Highlight the "current" day */

            .days li.active {
                color: var(--current-active-day-color, var(--primary-color)) !important;
                font-weight: 500;
            }

            .days li.selected {
                background: var(--current-selected-day-color, var(--primary-color));
                color: white !important;
                border-radius: 50px;
            }

            .days li span {
                width: 25px;
                height: 25px;
                padding: 5px;
                line-height: 25px;
            }

            paper-button.day {
                padding: 2px;
                min-width: 20px;
                --paper-button: {
                    border-radius: 25px;
                    width: 25px;
                    line-height: 25px;
                }
            }

            paper-button:focus {
                font-weight: 400;
            }

            #monthNav {
                @apply --layout-horizontal;
            }

            #monthNav #monthNavValue {
                font-size: 14px;
                font-weight: 500;
                text-transform: capitalize;
                text-align: center;
                line-height: 3;
                @apply --layout-flex;
            }
        </style>



        <div id="monthNav">
            <paper-icon-button class="prev" icon="caribou-datepicker-icons:chevron-left" on-tap="previousMonth"></paper-icon-button>

            <div id="monthNavValue">{{getMonthValue(monthTemp,false)}} {{yearTemp}}</div>

            <paper-icon-button class="next" icon="caribou-datepicker-icons:chevron-right" on-tap="nextMonth"></paper-icon-button>
        </div>

        <ul class="weekdays" id="weekDays">
            <li>S</li>
            <li>M</li>
            <li>T</li>
            <li>W</li>
            <li>T</li>
            <li>F</li>
            <li>S</li>
        </ul>

        <ul class="days" id="days">
            <template is="dom-repeat" items="{{_getArrayOfDays(monthTemp,yearTemp,dateTemp)}}">
                <li class$="{{_getClassDate(item.isCurrentDay, item.value)}}">
                    <paper-button hidden$="{{!item.isValid}}" noink class="day" on-tap="_dateSelected" data-dday$="{{item.value}}">
                        <span id="date{{item.value}}">{{item.value}}</span>
                    </paper-button>
                </li>
            </template>
        </ul>
    </template>

    <script>
        /**
         * `caribou-datepicker`
         * 
         * This element is the month view selection. 
         * Individualy this element will allow you to set a date, select a date and navigate between the month.
         * An event `date-selected` is dispatch when a date is selected.
         *
         * ### Styling The following custom properties and mixins are available for styling:
         *
         * Custom property | Description | Default
         * ----------------|-------------|----------
         * `--current-active-day-color`| Color of the current date value | `--primary-color`
         * `--current-selected-day-color`| Color of the selected date | `--primary-color`
         *
         * @memberof Caribouflex
         * @customElement
         * @polymer
         * @element caribou-month
         */
        class MonthElement extends Polymer.Element {

            /**
             * Fired when the stepper is finished and all the steps are saved.
             *
             * @event date-selected
             * @param {Object} detail { date: 1, month: 1, year: 2018 }
             */

            static get is() {
                return 'caribou-month';
            }

            static get properties() {
                return {

                    /**
                     * Used to hide the component.
                     */
                    hidden: {
                        type: Boolean,
                        value: false
                    },

                    /**
                     * Actual year selected by the user
                     */
                    year: {
                        type: Number,
                        notify: true,
                        observer: "yearChanged"
                    },

                    /**
                     * Actual month selected by the user
                     * 1-12
                     */
                    month: {
                        type: Number,
                        notify: true,
                        observer: "monthChanged"
                    },
                    /**
                     * Actual date selected by the user
                     */
                    date: {
                        type: Number,
                        notify: true,
                        observer: "dateChanged"
                    },

                    /**
                     * Sunday is 0 and monday is 1.
                     * This is the number of the day currently selected by the user
                     */
                    day: {
                        type: Number,
                        notify: true,
                        observer: "dayChanged"
                    },

                    /**
                     * This is the current year of the computer
                     */
                    currentYear: Number,

                    /**
                     * This is the current month of the computer
                     */
                    currentMonth: Number,

                    /**
                     * This is the current date of the computer
                     */
                    currentDate: Number,

                    /**
                     * Sunday is 0 and monday is 1.
                     * This is the number of the current day
                     * This is the current day of the computer
                     */
                    currentDay: Number,

                    /**
                     * This is the temporary year use for the navigation
                     */
                    yearTemp: {
                        type: Number,
                        notify: true
                    },

                    /**
                     * This is the temporary month use for the navigation
                     */
                    monthTemp: Number,

                    /**
                     * This is the temporary date use for the navigation
                     */
                    dateTemp: Number,

                    /**
                     * This is the temporary day use for the navigation
                     */
                    dayTemp: Number,

                    /**
                     * This is the array of week days name.
                     * There is the long name and the short name.
                     * @private
                     */
                    __daysValue: {
                        type: Array,
                        value: function () {
                            return [{
                                    max: "Sunday",
                                    min: "Sun"
                                },
                                {
                                    max: "Monday",
                                    min: "Mon"
                                },
                                {
                                    max: "Tuesday",
                                    min: "Tue"
                                },
                                {
                                    max: "Wednesday",
                                    min: "Wed"
                                },
                                {
                                    max: "Thursday",
                                    min: "Thu"
                                },
                                {
                                    max: "Friday",
                                    min: "Fri"
                                },
                                {
                                    max: "Saturday",
                                    min: "Sat"
                                }
                            ];
                        },
                        readOnly: true
                    },

                    /**
                     * This is the array of week month name.
                     * There is the long name and the short name.
                     * @private
                     */
                    __monthsValue: {
                        type: Array,
                        value: function () {
                            return [{
                                    max: "January",
                                    min: "Jan"
                                },
                                {
                                    max: "February",
                                    min: "Feb"
                                },
                                {
                                    max: "March",
                                    min: "Mar"
                                },
                                {
                                    max: "April",
                                    min: "Apr"
                                },
                                {
                                    max: "May",
                                    min: "May"
                                },
                                {
                                    max: "June",
                                    min: "Jun"
                                },
                                {
                                    max: "July",
                                    min: "Jul"
                                },
                                {
                                    max: "August",
                                    min: "Aug"
                                },
                                {
                                    max: "September",
                                    min: "Sep"
                                },
                                {
                                    max: "October",
                                    min: "Oct"
                                },
                                {
                                    max: "November",
                                    min: "Nov"
                                },
                                {
                                    max: "December",
                                    min: "Dec"
                                }
                            ];
                        },
                        readOnly: true
                    }
                };
            }

            ready() {
                super.ready();
            }

            /**
             * Observer called when the date value changed.
             * The selected date will be flaged with the css value selected.
             * And the old date value will be removed the selected css property.
             */
            dateChanged(date, oldDate) {
                //this is used to update the temp value when the input change.
                this.dateTemp = date;

                //We do the changes for the selection.
                var newEl = this.shadowRoot.querySelector("#date" + date);
                var oldEl = this.shadowRoot.querySelector("#date" + oldDate);
                if (oldEl !== null)
                    oldEl.classList.remove("selected");
                if (newEl !== null)
                    newEl.classList.add("selected");
            }

            /**
             * Observer called when the year value changed.
             * This will update the temp value and the overlay view
             */
            yearChanged(newYear, oldYear) {
                if (newYear < 1900) {
                    this.year = oldYear;
                    return;
                }

                this.yearTemp = newYear;
            }

            /**
             * Observer called when the month value changed.
             * This will update the temp value and the overlay view
             */
            monthChanged(newMonth, oldMonth) {
                if (newMonth > 12 || newMonth < 1 || isNaN(newMonth)) {
                    this.month = oldMonth;
                    return;
                }
                this.monthTemp = newMonth;
            }

            /**
             * Observer called when the month value changed.
             * This will update the temp value and the overlay view
             */
            dayChanged(newDay, oldDay) {
                if (newDay > 31 || newDay < 1 || isNaN(newDay)) {
                    this.day = oldDay;
                    return;
                }
                this.dayTemp = newDay;
            }

            /**
             * Initialize the properties with the current date time.
             */
            getCurrentDate() {
                var today = new Date();
                this.setDateValues(today.getDay(), today.getDate(), today.getMonth() + 1, today.getFullYear());
            }

            /**
             * This function is used to set the current date.
             * This is used to intialize all the date parameter.
             * @param {Number} day The number of the day of the week
             * @param {Number} date The number of the day
             * @param {Number} month The number of the month
             * @param {Number} year The number of the year
             */
            setDate(day, date, month, year) {
                //day
                this.currentDay = day;
                this.day = this.currentDay;
                // this.dayTemp = this.currentDay;

                //month
                this.currentMonth = month;
                this.month = this.currentMonth;
                // this.monthTemp = this.currentMonth + 1;

                //year
                this.currentYear = year;
                this.year = this.currentYear;
                this.yearTemp = this.currentYear;

                //date
                this.currentDate = date;
                this.date = this.currentDate;
                // this.dateTemp = this.currentDate;
            }

            /**
             * Return the day value of the current number.
             * @param {Number} day This is the number of the day. (0-6)
             * @param {Boolean} minValue True if we want the min value, false otherwise.
             * @return {String} The day value.
             */
            getDayValue(day, minValue) {
                if (day > 0 && day < 32)
                    return minValue ? this.__daysValue[day].min : this.__daysValue[day].max;
                else
                    console.error("Invalid day : " + day);
            }

            /** 
             * Return the month value of the current number. 
             * @param {Number} day This is the number of the month. (1 to 12)
             * @param {Boolean} minValue True if we want the min value, false otherwise.
             * @return {String} The month value. 
             */
            getMonthValue(month, minValue) {
                if (month > 0 && month < 13)
                    return minValue ? this.__monthsValue[month - 1].min : this.__monthsValue[month - 1].max;
                else
                    console.error("Invalid month : " + month);
            }

            /**
             * Return the number of day in a month
             * @param {Number} month The month number
             * @param {Number} year The year number
             * @return {Number} The number of day in a month
             */
            getNumberOfDaysInMonth(month, year) {
                return new Date(year, month, 0).getDate();
            }

            /**
             * Return the day number of the date
             * @param {Number} year The year number
             * @param {Number} month The month number
             * @param {Number} date The date number
             * @return {Number} The day number
             */
            getDayNumber(year, month, date) {
                try {
                    return new Date(year, month - 1, date).getDay();
                } catch (err) {
                    console.error("Invalid day");
                }
            }

            /**
             * Return the number of the first day in the month
             * @param {Number} month The month number
             * @param {Number} year The year number
             * @return {Number} An array of integer, the length is the number of the day in the month
             */
            getFirstMonthDay(month, year) {
                return new Date(year, month - 1, 1).getDay();
            }

            /**
             * Return the array of day object used to complete the view
             * @param {Number} year The year number
             * @param {Number} month The month number
             * @param {Number} date The date number
             * @return {Array} The array of day object
             */
            _getArrayOfDays(month, year, date) {
                if (month !== undefined && year !== undefined && date != undefined) {
                    let daysInMonth;
                    let firstDayOfWeek;
                    let daysArray = new Array();
                    if (month !== undefined && year !== undefined) {
                        // Get the first day of the week.
                        // We do -1 because we will use it 0 base.
                        firstDayOfWeek = this.getFirstMonthDay(month, year);
                        // Get the number of days in the month
                        daysInMonth = this.getNumberOfDaysInMonth(month, year);

                        //day number increment
                        let j = 0

                        for (var i = firstDayOfWeek; i < daysInMonth + firstDayOfWeek; i++) {
                            j = j + 1;
                            let isCurrentDay = false;
                            if (this.currentMonth === month && this.currentYear === year && this.currentDate ===
                                j) {
                                isCurrentDay = true;
                            }

                            daysArray[i] = {
                                value: j,
                                isCurrentDay: isCurrentDay,
                                isValid: true
                            };
                        }

                        for (var i = 0; i < firstDayOfWeek; i++) {
                            daysArray[i] = {
                                isValid: false
                            };
                        }

                        return daysArray;
                    }
                }
            }

            /**
             * Return the class String value of the selected and active date.
             * @param {Boolean} isCurrentDay 
             * @param {Number} dateValue The date number
             * @return {Array} The array of day object
             */
            _getClassDate(isCurrentDay, dateValue) {
                if (isCurrentDay && (dateValue === this.date && this.month === this.monthTemp && this.year ===
                        this.yearTemp))
                    return "active selected";
                else if (isCurrentDay)
                    return "active"
                else if (dateValue === this.date && this.month === this.monthTemp && this.year === this
                    .yearTemp)
                    return "selected"
            }

            /**
             * Used to recover the previous month and switch the view.
             */
            previousMonth() {
                var prevMonth = new Date(this.yearTemp, this.monthTemp - 1, 1);

                this.monthTemp = prevMonth.getMonth() === 0 ? 12 : prevMonth.getMonth();
                if (this.monthTemp === 12)
                    this.yearTemp = prevMonth.getFullYear() - 1;
                else
                    this.yearTemp = prevMonth.getFullYear();
            }

            /**
             * Used to recover the next month and switch the view.
             */
            nextMonth() {
                var nextMonth = new Date(this.yearTemp, this.monthTemp, 1);

                this.monthTemp = nextMonth.getMonth() + 1;
                this.yearTemp = nextMonth.getFullYear();

            }

            /**
             * This function is called when a date is selected to set the selected parameter.
             * @param {Object} e The event object.
             * @private
             */
            _dateSelected(e) {
                // This is important to set the this.date at the end because there is value binded to it,
                // that need that the other values are set.
                var date = Number(e.currentTarget.dataset.dday);
                this.month = this.monthTemp;
                this.year = this.yearTemp;
                this.day = this.getDayNumber(this.year, this.month, date);
                this.date = date;

                this.dispatchEvent(new CustomEvent('date-selected', {
                    detail: {
                        date: this.date,
                        month: this.month,
                        year: this.year
                    },
                    bubbles: true,
                    composed: true
                }));
            }
        }

        window.customElements.define(MonthElement.is, MonthElement);

        /**
         * @namespace Caribouflex
         */
        window.Caribouflex = window.Caribouflex || {};
        window.Caribouflex.MonthElement = MonthElement;
    </script>
</dom-module>