caribou-year.html

<link rel="import" href="../polymer/polymer-element.html">
<link rel="import" href="../paper-button/paper-button.html">
<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">

<dom-module id="caribou-year">
    <template>
        <style>
            :host {
                display: block;
                overflow-y: auto;
                height: 342px;
                /*Padding added to hide the scrollbar*/
                padding-right: 20px;
                width: 100%;
            }

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

            .years {
                @apply --layout-vertical;
            }

            .years paper-button {
                font-size: 15px;
            }

            .years paper-button .current {
                padding: 5px;
                color: var(--current-selected-year-color, var(--primary-color));
                font-size: 25px;
            }

            .iconBtnNav {
                margin: auto;
            }
        </style>

        <div id="years" class="years">
            <template is="dom-repeat" items="{{years}}">
                <paper-button data-year$="{{item.value}}" on-tap="_yearSelected">
                    <span class$="{{_getClassYear(item.isCurrentYear)}}">{{item.value}}</span>
                </paper-button>
            </template>
        </div>
    </template>

    <script>
        /**
         * `caribou-year`
         *
         * This element is used to select the year.
         *
         *
         * ### Styling The following custom properties and mixins are available for styling:
         *
         * Custom property | Description | Default
         * ----------------|-------------|----------
         * `--current-selected-year-color`| Color of the current year selected | `--primary-color`
         *
         * @memberof Caribouflex
         * @customElement
         * @polymer
         * @element caribou-year
         */
        class YearElement extends Polymer.Element {

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

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

            static get properties() {
                return {

                    /**
                     * Indicate if the element is hidden or not
                     */
                    hidden: {
                        type: Boolean,
                        value: false
                    },

                    /**
                     * This is the current year or year selected.
                     * This year will appear selecte in the view.
                     */
                    year: {
                        type: Number,
                        observer: "setYear"
                    },

                    /**
                     * May be deprecated... TODO check
                     * 
                     */
                    currentYear: {
                        type: Number
                    },

                    /**
                     * This is the years array used to display the list
                     */
                    years: {
                        type: Array,
                        value: function () {
                            return []
                        }
                    },

                    /**
                     * This is a flag used during the creation of the array
                     */
                    _init: {
                        type: Array,
                        value: false
                    },

                    /**
                     * This is the last year added to the array.
                     * This is used when we add more values.
                     */
                    lastYear: {
                        type: Number
                    },

                    /**
                     * This is the first year of the array
                     * Used when we get the previous years
                     */
                    firstYear: {
                        type: Number
                    }
                };
            }

            ready() {
                super.ready();

                this.$.years.addEventListener("mousewheel", this._mouseYearNav.bind(this), {
                    passive: true
                });
            }

            /**
             * This function is used to initialize the array when the year change
             * @param {Number} year The year value
             */
            setYear(year) {
                this.year = Number(year);
                this.currentYear = Number(year);;
                this.year = Number(year);;
                this.lastYear = Number(year);;
                this.initYearArray();
            }

            /** 
             * clear years array and re-complete calling the functions.
             */
            initYearArray() {
                this.splice("years", 0, this.years.length);
                this._init = false;
                this._createYears();
            }

            /**
             * This function is used to intialize the array.
             * We will check the init property, if it's false that means the array has been already initialized.
             * Otherwise we add 4 year before the current one.
             * @private
             */
            _createYears() {
                if (this.lastYear === undefined)
                    this.lastYear = this.year;

                if (!this._init) {
                    this.push('years', this._getYearObject(Number(this.lastYear - 3)));
                    this.push('years', this._getYearObject(Number(this.lastYear - 2)));
                    this.push('years', this._getYearObject(Number(this.lastYear - 1)));
                    this.push('years', this._getYearObject(Number(this.lastYear)));
                    this._init = true;
                }

                for (var i = 0; i < 10; i++) {
                    this.lastYear = this.lastYear + 1;
                    this.push('years', this._getYearObject(Number(this.lastYear)));
                }
            }

            /**
             * Complete the array with a couple of years added to the begining of the array.
             * @private
             */
            _getPreviousYears() {
                if (this.firstYear === undefined)
                    this.firstYear = this.year - 3;

                for (var i = 0; i < 10; i++) {
                    this.firstYear = this.firstYear - 1;
                    this.splice("years", 0, 0, this._getYearObject(Number(this.firstYear)));
                }

                this.scrollTop = 600;
            }

            /**
             * This is used to init the style
             * @param {Number} year
             * @private 
             */
            _getYearObject(year) {
                let isCurrentYear = false;
                if (this.currentYear === year)
                    isCurrentYear = true;

                return {
                    value: year,
                    isCurrentYear: isCurrentYear
                };
            }

            /**
             * This is used to the the class for the style
             * @param {Boolean} isCurrentYear
             * @private
             */
            _getClassYear(isCurrentYear) {
                if (isCurrentYear) return "current";
            }

            /**
             * This is a callback function used when the scroll from the mouse is executed.
             * this will get the previous or the next years.
             * @param {Object} e the event
             * @private
             */
            _mouseYearNav(e) {
                //e.wheelDelta >= 0  go to top otherwise go to bottom
                if (e.wheelDelta >= 0 && this.scrollTop === 0) {
                    this._getPreviousYears();
                } else if (this.scrollTop + this.clientHeight >= this.scrollHeight) {
                    this._createYears();
                }
            }

            /**
             * This is used when a year is selected. 
             * An event will be dispatch.
             * @param {Object} e the event
             * @private
             */
            _yearSelected(e) {
                //set the last year as the year selected before redraw the array
                this.setYear(Number(e.currentTarget.dataset.year));

                //The scroll year view has to be set to the top
                this.scrollTop = 0;

                // The event has to be sent after the scrollTop otherwise the scroll will never happened
                // because the view would have switched.
                this.dispatchEvent(new CustomEvent('year-selected', {
                    bubbles: true,
                    composed: true,
                    detail: {
                        year: e.currentTarget.dataset.year
                    }
                }));
            }
        }

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

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