dom-maker/dist/index.es.js

A library for create element by VanillaJs easily

import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';

var NS_MAP = {
  'HTML': 'http://www.w3.org/1999/xhtml',
  'SVG': 'http://www.w3.org/2000/svg',
  'XBL': 'http://www.mozilla.org/xbl',
  'XUL': 'http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul'
};
class ElementPlus {
  /**
   * current element
   */

  /**
   * cache events to manage and remove them easily
   */
  constructor() {
    var tagName = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'div';
    var nameSpace = arguments.length > 1 ? arguments[1] : undefined;

    _defineProperty(this, "element", null);

    _defineProperty(this, "eventsRegistry", new Map());

    this.element = document.createElementNS(NS_MAP[nameSpace || 'HTML'], tagName);
  }
  /**
   * get current element
   *
   * @returns {HTMLElement}
   */


  getElm() {
    return this.element;
  }
  /**
   * check current element is ElementPlus
   *
   * @param {(HTMLElement|ElementPlus)} element
   * @returns {boolean}
   */


  isElmPro(element) {
    return element instanceof ElementPlus;
  }
  /**
   * add multiple classes to element
   *
   * @param {(string|string[])} cls
   * @returns {ElementPlus}
   */


  addClass(cls) {
    if (Array.isArray(cls)) {
      cls.forEach(c => this.element.classList.add(c.trim()));
    } else if (typeof cls !== 'undefined' && cls.trim().length > 0) {
      cls.split(' ').forEach(c => this.element.classList.add(c.trim()));
    }

    return this;
  }
  /**
   * remove multiple classes from element
   *
   * @param {string|string[]} cls
   * @returns {ElementPlus}
   */


  removeClass(cls) {
    if (Array.isArray(cls)) {
      cls.forEach(c => this.element.classList.remove(c.trim()));
    } else if (typeof cls !== 'undefined' && cls.trim().length > 0) {
      cls.split(' ').forEach(c => this.element.classList.remove(c.trim()));
    }

    return this;
  }
  /**
   * check if element has a certain class
   *
   * @param {string} cls
   * @returns {boolean}
   */


  hasClass(cls) {
    return this.element.classList.contains(cls);
  }
  /**
   * toggle element classes
   *
   * @param {string} cls
   * @returns {ElementPlus}
   */


  toggleClass(cls) {
    return this.hasClass(cls) ? this.removeClass(cls) : this.addClass(cls);
  }
  /**
   * add an attribute to element
   *
   * @param {string} key
   * @param {number | string | boolean} value
   * @returns {ElementPlus}
   */


  setAttr(key, value) {
    if (value && typeof value.toString === 'function') {
      this.element.setAttribute(key, value.toString());
    } else {
      this.element.setAttribute(key, '');
    }

    return this;
  }
  /**
   * remove multiple attributes from element
   *
   * @param {string|string[]} key
   * @returns {ElementPlus}
   */


  removeAttr(key) {
    if (Array.isArray(key)) {
      key.forEach(k => this.element.removeAttribute(k));
    } else {
      this.element.removeAttribute(key);
    }

    return this;
  }
  /**
   * add multiple children to current element
   *
   * @param {(HTMLElement|ElementPlus)[]} elements
   * @returns {ElementPlus}
   */


  addChildren(elements) {
    if (Array.isArray(elements)) {
      elements.filter(Boolean).forEach(element => {
        if (this.isElmPro(element)) {
          this.element.appendChild(element.getElm());
        } else if (element instanceof HTMLElement) {
          this.element.appendChild(element);
        }
      });
    }

    return this;
  }
  /**
   * add a event listener if here not exist and store listener to remove it easily
   *
   * @param {(string} type
   * @param {EventListenerOrEventListenerObject} listener
   * @param {boolean | AddEventListenerOptions} options
   * @returns {ElementPlus}
   */


  on(type, listener, options) {
    if (!this.eventsRegistry.has(type)) {
      this.element.addEventListener(type, listener, options);
      this.eventsRegistry.set(type, listener);
    }

    return this;
  }
  /**
   * remove event listener from current element
   *
   * @param {(string|string[]|undefined} type
   * @returns {ElementPlus}
   */


  unbind(type) {
    if (type === undefined) {
      for (var [event, listener] of this.eventsRegistry.entries()) {
        this.element.removeEventListener(event, listener);
      }

      this.eventsRegistry.clear();
    } else if (Array.isArray(type)) {
      type.forEach(t => {
        var handler = this.eventsRegistry.get(t);

        if (handler) {
          this.element.removeEventListener(t, handler);
          this.eventsRegistry.delete(t);
        }
      });
    } else {
      var handler = this.eventsRegistry.get(type);

      if (handler) {
        this.element.removeEventListener(type, handler);
        this.eventsRegistry.delete(type);
      }
    }

    return this;
  }
  /**
   * create custom event on current element
   *
   * @param {(string} type
   * @param {Record<string,any>} detail
   * @param {Omit<CustomEventInit,'detail'>} options
   * @returns {ElementPlus}
   */


  dispatch(type, detail, options) {
    this.element.dispatchEvent(new CustomEvent(type, Object.assign({}, {
      detail
    }, options || {})));
    return this;
  }
  /**
   * set current element innerText
   *
   * @param {(string} text
   * @returns {ElementPlus}
   */


  setText(text) {
    this.element.innerText = text;
    return this;
  }
  /**
   * append innerHTML after current element
   *
   * @param {(string} text
   * @returns {ElementPlus}
   */


  addInnerHtml(text, pos) {
    if (pos === 'after') this.element.innerHTML += text;else this.element.innerHTML = text + this.element.innerHTML;
    return this;
  }
  /**
   * set current element innerHtml
   *
   * @param {(string} html
   * @returns {ElementPlus}
   */


  setHtml(html) {
    this.element.innerHTML = html;
    return this;
  }
  /**
   * append current element to target element
   */


  appendTo(selectors) {
    var target = document.querySelector(selectors) || document.body;
    target.appendChild(this.element);
  }

}
var Div = () => new ElementPlus('div');
var Span = () => new ElementPlus('span');
var Img = () => new ElementPlus('img');
var Video = () => new ElementPlus('video');
var Input = () => new ElementPlus('input');
var Button = () => new ElementPlus('button');

var $ = (tagName, nameSpace) => new ElementPlus(tagName, nameSpace);

export { Button, Div, ElementPlus, Img, Input, Span, Video, $ as default };
//# sourceMappingURL=index.es.js.map