chart-remove.html

<!-- External Polymer Styles/elements dependency -->
<link rel="import" href="bower_components/iron-icons/iron-icons.html">
<link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html">

<!-- Epiviz element dependency -->

<script>
    /**
     * `ChartRemoveBehavior` object manages the `<epiviz-chart-remove>` element for each chart. 
     * All charts inherit this behavior to remove itself from DOM.
     *
     * @polymerBehavior
    **/
    EpivizChartRemoveBehavior = function (superClass) {
        return class extends superClass {
            constructor() {
                super();
            }

            static get properties() {
                return {};
            }

            /**
            * Shows the remove element
            */
            _showRemoveDialog() {
                var self = this;

                if (self._parentContainer) {
                    self._parentContainer.removeChild(self);

                    let navChildren =
                        Polymer.FlattenedNodesObserver.getFlattenedNodes(self._parentContainer).filter(n => n.nodeType === Node.ELEMENT_NODE)
                    for (var nindex = 0; nindex < navChildren.length; nindex++) {
                        var child = navChildren[nindex];
                        if (child.plotId == self.plotId) {
                            this.shadowRoot.querySelector(child).remove();
                            this.shadowRoot.querySelector("[plot-id=" + self.plotId + "]").remove();
                        }
                    }
                }
                else {
                    this.shadowRoot.querySelector(self.root).remove();
                    this.shadowRoot.querySelector("[plot-id=" + self.plotId + "]").remove();
                }
            }

            /**
            * Initializes the `<epiviz-chart-remove>` element
            */
            _initializeRemoveDialog() {
                var chartSettingsContainer = this.shadowRoot.querySelector('#chartSettingsContainer');
                var chartContainer = this.shadowRoot.querySelector('#' + this.plotId);
                var currSettingIcon = this.shadowRoot.querySelector('#chartRemoveIcon');

                if (currSettingIcon == null) {
                    var iconElem = document.createElement('paper-icon-button');
                    iconElem.id = "chartRemoveIcon";
                    iconElem.icon = "icons:remove-circle";
                    iconElem.title = "remove chart";


                    iconElem.addEventListener("click", this._showRemoveDialog.bind(this));

                    chartSettingsContainer.appendChild(iconElem);
                }
            }
        }
    }
</script>