ihk24/storybook/stories/components/global-message/global-message.js

class GlobalMessage {
  constructor(wrapper) {
    this.wrapper = wrapper;
    this.inner = wrapper.querySelector('.inner');
    this.closeButton = wrapper.querySelector('.close');

    window.setTimeout(() => {
      this.setHeight();

      window.setTimeout(() => {
        wrapper.classList.add('open');
        wrapper.removeAttribute('style');
      }, 300);
    }, 1000);

    this.closeButton.addEventListener('click', () => {
      this.setHeight();
      wrapper.classList.remove('open');
      window.requestAnimationFrame(() => {
        wrapper.removeAttribute('style');
      })
    })
  }

  setHeight() {
    this.wrapper.style.maxHeight = this.inner.scrollHeight + 'px';
  }
}

export default GlobalMessage;