Source: DropPanel.js

import '../css/droppanel.css';
import ACore from "../ACore";
import OOP from "absol/src/HTML5/OOP";
import AElement from "absol/src/HTML5/AElement";
import {ExpGroup} from "./ExpTree";



var _ = ACore._;
var $ = ACore.$;

/**
 * @extends AElement
 * @constructor
 */
function DropPanel() {
    var thisDP = this;
    /***
     *
     * @type {ExpGroup}
     */
    this.$body = $('.absol-drop-panel-body', this);
    this.$head = $('.absol-drop-panel-head', this)
        .on('click', thisDP.eventHandler.clickHead);

    this.$name = $('.absol-drop-panel-name', thisDP);
    OOP.drillProperty(this, this.$name, 'name', 'innerHTML');
    return thisDP;
}

DropPanel.tag = 'DropPanel'.toLowerCase();

DropPanel.render = function () {
    return _({
        class: 'absol-drop-panel',
        extendEvent: ['toggle'],
        child: [
            {
                class: 'absol-drop-panel-head',
                child: [
                    'toggler-ico',
                    {
                        tag: 'span',
                        class: "absol-drop-panel-name"
                    }
                ]

            },
            {
                tag:'expgroup',
                class: ['absol-drop-panel-body', 'absol-bscroller']
            }
        ]
    });
};


DropPanel.eventHandler = {};
DropPanel.eventHandler.clickHead = function (event) {
    if (!this._childOfButton(event.target)) {
        var event = {
            target: this, isShowed: this.show, preventDefault: function () {
                this.prevented = true;
            }
        };
        this.emit('toggle', event, this);
        if (!event.prevented) {
            this.toggle();
        }
    }
};

['findChildBefore', 'findChildAfter', 'removeChild', 'clearChild', 'addChild']
    .forEach(function (key) {
        DropPanel.prototype[key] = function () {
            this.$body[key].apply(this.$body, arguments);
        }
    });

DropPanel.prototype._childOfButton = function (elt) {
    while (elt && elt != this) {
        if (elt.tagName == "BUTTON") {
            return true;
        }
        elt = elt.parentElement
    }
    return false;
};

DropPanel.prototype.toggle = function () {
    this.show = !this.show;
};

DropPanel.property = {};

DropPanel.property.show = {
    set: function (value) {
        if (value) {
            var maxHeight = parseFloat(this.getComputedStyleValue('max-height').replace('px', ''));
            var headBound = this.$head.getBoundingClientRect();
            if (maxHeight != 'none' && maxHeight != 'auto') {
                this.$body.addStyle('max-height', maxHeight - headBound.height + 'px');
            }
            this.$body.addStyle('height', this.$body.scrollHeight + 'px');
            setTimeout(function () {
                this.$body.removeStyle('height');
                window.dispatchEvent(new Event('resize'));
            }.bind(this), 200);

            this.addClass('show');
        }
        else {
            this.$body.addStyle('height', this.$body.scrollHeight + 'px');
            setTimeout(function () {
                this.$body.addStyle('height', '0');
            }.bind(this), 0);
            setTimeout(function () {
                this.$body.removeStyle('height');
                window.dispatchEvent(new Event('resize'));
            }.bind(this), 200);
            this.removeClass('show');
        }
    },
    get: function () {
        return this.hasClass('show');
    }
};


ACore.install(DropPanel);

export default DropPanel;