<commit_before>/*
* Usage in HTML:
* Button: <button data-modal="#my-modal"></button>
* Modal content <div id="my-modal">content here...<div>
*
* Usage in JS:
* new Modal({ element, content, closeButtonImage})
* - element (required) - DOM element
* - content (required) - DOM element
* - closeButtonImage (required) - image url
* */

(function () {
  class Modal {
    /* Possible options:
    * - button (required) - DOM element
    * - content (required) - DOM element
    * - closeButtonImage (required) - image url
    * */
    constructor (options = {}) {
      this.modal = null;
      this.overlay = null;
      this.closeButton = null;
      this.fragment = null;

      this.options = options;

      this.content = this.options.content;

      this.options.button.addEventListener('click', this.open.bind(this));
    }

    open () {
      this._buildModal();
      this._initEvents();

      document.querySelector('body').classList.add('modal-open');
    }

    close () {
      this.modal.parentNode.removeChild(this.modal);
      this.overlay.parentNode.removeChild(this.overlay);

      document.querySelector('body').classList.remove('modal-open');
    }

    // private

    _buildModal () {
      this.fragment = document.createDocumentFragment();

      this.modal = document.createElement('div');
      this.modal.classList.add('modal', 'modal-open');

      const container = document.createElement('div');
      container.classList.add('modal-content');
      container.appendChild(this.content);

      this.modal.appendChild(container);

      // close button

      const closeButtonImage = new Image();
      closeButtonImage.src = this.options.closeButtonImage;

      this.closeButton = document.createElement('div');
      this.closeButton.classList.add('close');
      this.closeButton.appendChild(closeButtonImage);

      // overlay

      this.overlay = document.createElement('div');
      this.overlay.classList.add('modal-overlay', 'modal-overlay-visible');
      this.overlay.appendChild(this.closeButton);

      this.fragment.appendChild(this.overlay);
      this.fragment.appendChild(this.modal);

      document.body.appendChild(this.fragment);
    }

    _initEvents () {
      this.overlay.addEventListener('click', this.close.bind(this));
      this.closeButton.addEventListener('click', this.close.bind(this));
    }
  }

  // init modals
  const modals = Array.prototype.slice.call(document.querySelectorAll('[data-modal]'));

  modals.forEach(button => {
    const content = document.querySelector(button.dataset.modal);
    const parent = document.querySelector(button.dataset.modal).parentNode;

    parent.removeChild(content);

    const modal = new Modal({ button, content, closeButtonImage: 'assets/images/icons/cancel.svg' })
  });
})();<commit_msg>Finetuning<commit_after>/*
* Usage in HTML:
* Button: <button data-modal="#my-modal"></button>
* Modal content <div id="my-modal">content here...<div>
*
* Usage in JS:
* new Modal({ element, content, closeButtonImage})
* - element (required) - DOM element
* - content (required) - DOM element
* - closeButtonImage (required) - image url
* */

(function () {
  class Modal {
    /* Possible options:
    * - button (required) - DOM element
    * - content (required) - DOM element
    * - closeButtonImage (required) - image url
    * */
    constructor (options = {}) {
      this.modal, this.overlay, this.closeButton, this.fragment;

      this.options = options;
      this.content = this.options.content;

      this.options.button.addEventListener('click', this.open.bind(this));
    }

    open () {
      this._buildModal();
      this._initEvents();

      $('body').classList.add('modal-open');
    }

    close () {
      this.modal.parentNode.removeChild(this.modal);
      this.overlay.parentNode.removeChild(this.overlay);

      $('body').classList.remove('modal-open');
    }

    // private
    _buildModal () {
      this.fragment = document.createDocumentFragment();

      this.modal = document.createElement('div');
      this.modal.classList.add('modal', 'modal-open');

      const container = document.createElement('div');
      container.classList.add('modal-content');
      container.appendChild(this.content);

      this.modal.appendChild(container);

      // close button
      const closeButtonImage = new Image();
      closeButtonImage.src = this.options.closeButtonImage;

      this.closeButton = document.createElement('div');
      this.closeButton.classList.add('close');
      this.closeButton.appendChild(closeButtonImage);

      // overlay
      this.overlay = document.createElement('div');
      this.overlay.classList.add('modal-overlay', 'modal-overlay-visible');
      this.overlay.appendChild(this.closeButton);

      this.fragment.appendChild(this.overlay);
      this.fragment.appendChild(this.modal);

      document.body.appendChild(this.fragment);
    }

    _initEvents () {
      this.overlay.addEventListener('click', this.close.bind(this));
      this.closeButton.addEventListener('click', this.close.bind(this));
    }
  }

  // init modals
  const modals = Array.prototype.slice.call(document.querySelectorAll('[data-modal]'));

  modals.forEach(button => {
    const content = $(button.dataset.modal);
    const parent  = $(button.dataset.modal).parentNode;

    parent.removeChild(content);

    const modal = new Modal({button, content, closeButtonImage: '/assets/images/icons/cancel.svg'})
  });
})();
{'fraction_non_alphanumeric': 0.14975315414152496, 'fraction_numerical': 0.0, 'mean_word_length': 3.1915708812260535, 'pattern_counts': {'":': 0, '<': 11, '<?xml version=': 0, '>': 13, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4852582', 'n_tokens_mistral': 1554, 'n_tokens_neox': 1527, 'n_words': 263}