jellyfin-web/dashboard-ui/bower_components/emby-collapsible/emby-collapsible.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-icon/iron-icon.html">
<link rel="import" href="../paper-button/paper-button.html">
<link rel="import" href="../neon-animation/neon-animation-runner-behavior.html">
<link rel="import" href="../neon-animation/animations/transform-animation.html">
<link rel="import" href="../iron-collapse/iron-collapse.html">

<iron-iconset-svg name="emby-collapsible-icons" size="24">
    <svg>
        <defs>
            <g id="expand-less"><path d="M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z" /></g>
            <g id="expand-more"><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z" /></g>
        </defs>
    </svg>
</iron-iconset-svg>

<dom-module id="emby-collapsible">
    <template>
        <style>
            iron-collapse {
                padding-left: 16px;
                padding-right: 16px;
            }
        </style>
        <div>
            <paper-button on-tap="toggleExpand" id="expandButton" class="emby-collapsible-button" style="margin:0;display: flex; justify-content: center; align-items: center;">
                <h3 class="emby-collapsible-title" title="[[title]]">[[title]]</h3>
                <iron-icon id="expandIcon" style="margin-left: auto; margin-right: .5em;"></iron-icon>
            </paper-button>
            <iron-collapse id="contentCollapse" class="emby-collapsible-content" opened="{{expanded}}">
                <content></content>
            </iron-collapse>
        </div>
    </template>
    <script>
        Polymer({
            is: 'emby-collapsible',
            behaviors: [Polymer.NeonAnimationRunnerBehavior],
            properties: {
                expanded: {
                    type: Boolean,
                    value: false,
                    notify: true,
                    observer: '_expandedChanged'
                },
                expandMoreTitle: {
                    type: String,
                    value: "Show More"
                },
                expandLessTitle: {
                    type: String,
                    value: "Show Less"
                },
                enableRotateAnimation: {
                    type: Boolean,
                    value: true
                },
                expandMoreIcon: {
                    type: String,
                    value: "expand-more"
                },
                expandLessIcon: {
                    type: String,
                    value: "expand-less"
                },
                animationConfig: {
                    value: function () {
                        return {
                            'rotateIcon': {
                                name: 'transform-animation',
                                node: this.$.expandIcon,
                                transformOrigin: "50% 50%",
                                transformFrom: "rotate(0)",
                                transformTo: "rotate(180deg)",
                                timing: { duration: 350 }
                            }
                        }
                    }
                }
            },
            listeners: {
                'neon-animation-finish': '_onNeonAnimationFinish'
            },
            _onNeonAnimationFinish: function () {
                if (this.expanded) {
                    this.$.expandIcon.icon = "emby-collapsible-icons:expand-less";
                }
                else {
                    this.$.expandIcon.icon = "emby-collapsible-icons:expand-more";
                }
            },

            // Fires when an instance of the element is created
            created: function () { },

            // Fires when the local DOM has been fully prepared
            ready: function () {
                //Set initial icon
                if (this.expanded) {
                    this.$.expandIcon.icon = "emby-collapsible-icons:expand-less";
                }
                else {
                    this.$.expandIcon.icon = "emby-collapsible-icons:expand-more";
                }

                //Set initial title
                if (this.expanded) {
                    this.$.expandButton.title = this.expandLessTitle;
                }
                else {
                    this.$.expandButton.title = this.expandMoreTitle;
                }
            },

            // Fires when the element was inserted into the document
            attached: function () { },

            // Fires when the element was removed from the document
            detached: function () { },

            // Fires when an attribute was added, removed, or updated
            _expandedChanged: function (newVal, oldVal) {


                //If icon is already set no need to animate!
                if ((newVal && (this.$.expandIcon.icon == "emby-collapsible-icons:expand-less")) || (!newVal && (this.$.expandIcon.icon == "emby-collapsible-icons:expand-more"))) {
                    return;
                }

                //Set title
                if (newVal) {
                    this.$.expandButton.title = this.expandLessTitle;
                }
                else {
                    this.$.expandButton.title = this.expandMoreTitle;
                }

                if (this.enableRotateAnimation) {
                    //Play rotate animation
                    this.cancelAnimation();
                    this.playAnimation('rotateIcon');
                }
                else {
                    if (this.expanded) {
                        this.$.expandIcon.icon = "emby-collapsible-icons:expand-less";
                    }
                    else {
                        this.$.expandIcon.icon = "emby-collapsible-icons:expand-more";
                    }
                }
            },
            toggleExpand: function () {
                this.expanded = !this.expanded;
            }
        });
    </script>
</dom-module>