chart-grid-behavior.html

<script>
    /**
     * `ChartGridBehavior` object initializes grid layout system for plots and tracks. 
     * All elements that need to conform to a grid should include and call this behavior. 
     *
     * @polymerBehavior
    **/

    EpivizChartGridBehavior = function (superClass) {
        return class extends superClass {
            constructor() {
                super();
            }

            ready() {
                super.ready();
                // Only useful if you have draggable as well
                this._initializeDragHandle();
            }

            static get properties() {
                return {};
            }

            /**
            * Add drag handle to charts only
            */
            _initializeDragHandle() {
                if (this.nodeName.indexOf("NAVIGATION") === -1) {
                    var dragHandle = document.createElement("div");
                    dragHandle.className = "dragHandle";
                    dragHandle.slot = "dragHandle";
                    this.appendChild(dragHandle);
                }
            }

            /**
            * Initializes grid behavior
            */
            _initializeGrid() {
                if (this.nodeName.indexOf("TRACK") != -1) {
                    this.classList.add("grid-track");
                } else if (this.nodeName.indexOf("NAVIGATION") != -1) {
                    this.classList.add("grid-navigation");
                } else {
                    // is plot
                    this.classList.add("grid-plot");
                }

                if (this.chartWidth) {
                    this._setColumnSpan(this.chartWidth);
                }
            }

            /**
             * Manage resizing buttons of chats
             */
            _initializeResizeButtons() {
                var chartSettingsContainer = this.shadowRoot.querySelector('#chartSettingsContainer');
                var chartContainer = this.shadowRoot.querySelector('#' + this.plotId);
                var currExpandIcon = this.shadowRoot.querySelector('#chartExpandIcon');
                var currContractIcon = this.shadowRoot.querySelector('#chartContractIcon');

                if (currExpandIcon == null) {
                    var iconElem = document.createElement('paper-icon-button');
                    iconElem.id = "chartExpandIcon";
                    iconElem.icon = "chevron-right";
                    iconElem.title = "increase chart width";

                    iconElem.addEventListener("click", this._expand.bind(this));
                    chartSettingsContainer.appendChild(iconElem);
                }

                if (currContractIcon == null) {
                    var iconElem = document.createElement('paper-icon-button');
                    iconElem.id = "chartContractIcon";
                    iconElem.icon = "chevron-left";
                    iconElem.title = "descrease chart width";

                    iconElem.addEventListener("click", this._contract.bind(this));
                    chartSettingsContainer.appendChild(iconElem);
                }
            }

            _getStyle(elem, prop) {

                var style;
                if (window.ShadyCSS) {
                    return ShadyCSS.getComputedStyleValue(elem, prop);
                } else {
                    return getComputedStyle(elem).getPropertyValue(prop);
                }
            }

            /**
             * Callback to increase size of chart by 1 `grid-column`
             */
            _expand() {
                var prop = this._getStyle(this, "grid-column-start");
                var columnSpan = this._getColumnSpan(prop);
                if (columnSpan < 6) {
                    $(this).css("grid-column-start", "span " + (columnSpan + 1));
                    this.chartWidth = columnSpan + 1;
                    this._onResize();
                }
            }

            /**
             * Callback to decrease size of chart by 1 `grid-column`
             */
            _contract() {
                var prop = this._getStyle(this, "grid-column-start");
                var columnSpan = this._getColumnSpan(prop);
                if (columnSpan > 1) {
                    $(this).css("grid-column-start", "span " + (columnSpan - 1));
                    this.chartWidth = columnSpan - 1;
                    this._onResize();
                }
            }

            /**
             * helper function to get `grid-column` of current chart
             */
            _getColumnSpan(gridColumn) {
                // span 2 / auto
                if (gridColumn != "auto" && gridColumn  != "") {
                    var val = parseInt(gridColumn.split(' ')[1]);
                    if (!val) {
                        console.log("grid column error, not a number");
                    }
                    return val;
                }

                return 6;
            }

            /**
             * helper function to set `grid-column` of current chart
             */
            _setColumnSpan(gridColumn) {

                if (gridColumn > 6) {gridColumn = 6;}
                if (gridColumn < 1) {gridColumn = 1;}

                var prop = this._getStyle(this, "grid-column-start");
                var columnSpan = this._getColumnSpan(prop);
                if (columnSpan > 1) {
                    $(this).css("grid-column-start", "span " + (gridColumn));
                    this._onResize();
                }
            }
        }
    }
</script>