@nodecg/types/out/client/dashboard/elements/util-scrollable.js

Dynamic broadcast graphics rendered in a browser

import "@polymer/iron-flex-layout/iron-flex-layout.js";
import * as Polymer from "@polymer/polymer";
class UtilScrollable extends Polymer.PolymerElement {
    static get template() {
        return Polymer.html `
		<style include="nodecg-theme">
			:host {
				display: block;
				@apply --layout-relative;
			}

			:host(.is-scrolled:not(:first-child))::before {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				height: 1px;
				background: #dbdbdb;
			}

			:host(.can-scroll:not(.scrolled-to-bottom):not(:last-child))::after {
				content: '';
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;
				height: 1px;
				background: #dbdbdb;
			}

			.scrollable {
				padding: 0 24px;
				@apply --layout-scroll;
				@apply --util-scrollable;
			}
		</style>

		<div id="scrollable" class="scrollable" on-scroll="updateScrollState">
			<slot></slot>
		</div>
`;
    }
    static get is() {
        return "util-scrollable";
    }
    /**
     * Returns the scrolling element.
     */
    get scrollTarget() {
        return this.$["scrollable"];
    }
    attached() {
        requestAnimationFrame(this.updateScrollState.bind(this));
    }
    updateScrollState() {
        this.classList.toggle("is-scrolled", this.scrollTarget.scrollTop > 0);
        this.classList.toggle("can-scroll", this.scrollTarget.offsetHeight < this.scrollTarget.scrollHeight);
        this.classList.toggle("scrolled-to-bottom", this.scrollTarget.scrollTop + this.scrollTarget.offsetHeight >=
            this.scrollTarget.scrollHeight);
    }
}
customElements.define("util-scrollable", UtilScrollable);
//# sourceMappingURL=util-scrollable.js.map