# content-blocks-builder/trunk/src/utils/dom/backdrop.js

Content Blocks Builder – Create blocks, repeater blocks with carousel, grid, popup layouts, version trunk. 106 lines.

- Page: https://pluginprobe.com/plugins/content-blocks-builder/trunk/code/src/utils/dom/backdrop.js
- Raw: https://pluginprobe.com/plugins/content-blocks-builder/trunk/raw/src/utils/dom/backdrop.js
- Modified: 2023-08-09T10:45:10+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/content-blocks-builder/trunk/code/src/utils/dom/backdrop.js#L10-L20`.

```javascript
/**
 * Internal dependencies
 */
import {
  exposeComponent,
  reflow,
  executeAfterTransition,
  execute,
} from "./utils";

/**
 * Backdrop class
 */
class Backdrop {
  constructor(config = {}) {
    this._element = null;
    this._isAppended = false;

    // Default config
    const defaultConfig = {
      isVisible: true,
      rootElement: document.body,
      classBackdrop: "modal-backdrop fade",
      classShow: "show",
      clickCallback: null,
    };

    // Get config values
    this._config = Object.assign(defaultConfig, config);
  }

  show(callback) {
    if (!this._config.isVisible) {
      execute(callback);
      return;
    }

    this._append();

    reflow(this._getElement());

    this._getElement().classList.add(this._config.classShow);

    // callback();
    // Call a callback after transition
    executeAfterTransition(callback, this._getElement());
  }

  hide(callback) {
    if (!this._config.isVisible) {
      execute(callback);
      return;
    }

    this._getElement().classList.remove(this._config.classShow);

    // Call a callback after transition
    executeAfterTransition(() => {
      this.dispose();
      callback();
    }, this._getElement());
  }

  dispose() {
    if (!this._isAppended) {
      return;
    }

    this._element.remove();
    this._isAppended = false;
  }

  _getElement() {
    if (!this._element) {
      const backdrop = document.createElement("div");
      backdrop.className = this._config.classBackdrop;

      this._element = backdrop;
    }

    return this._element;
  }

  _append() {
    if (this._isAppended) {
      return;
    }

    this._config.rootElement.appendChild(this._getElement());

    if (typeof this._config.clickCallback === "function") {
      this._getElement().addEventListener("click", (e) => {
        e.preventDefault();

        this._config.clickCallback();
      });
    }

    this._isAppended = true;
  }
}

exposeComponent("Backdrop", Backdrop);

export { Backdrop };

```