dom-maker
Version:
A library for create element by VanillaJs easily
383 lines (331 loc) • 11.2 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
var _classCallCheck = require('@babel/runtime/helpers/classCallCheck');
var _createClass = require('@babel/runtime/helpers/createClass');
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
var _classCallCheck__default = /*#__PURE__*/_interopDefaultLegacy(_classCallCheck);
var _createClass__default = /*#__PURE__*/_interopDefaultLegacy(_createClass);
var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
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'
};
var ElementPlus = /*#__PURE__*/function () {
/**
* current element
*/
/**
* cache events to manage and remove them easily
*/
function ElementPlus() {
var tagName = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'div';
var nameSpace = arguments.length > 1 ? arguments[1] : undefined;
_classCallCheck__default["default"](this, ElementPlus);
_defineProperty__default["default"](this, "element", null);
_defineProperty__default["default"](this, "eventsRegistry", new Map());
this.element = document.createElementNS(NS_MAP[nameSpace || 'HTML'], tagName);
}
/**
* get current element
*
* @returns {HTMLElement}
*/
_createClass__default["default"](ElementPlus, [{
key: "getElm",
value: function getElm() {
return this.element;
}
/**
* check current element is ElementPlus
*
* @param {(HTMLElement|ElementPlus)} element
* @returns {boolean}
*/
}, {
key: "isElmPro",
value: function isElmPro(element) {
return element instanceof ElementPlus;
}
/**
* add multiple classes to element
*
* @param {(string|string[])} cls
* @returns {ElementPlus}
*/
}, {
key: "addClass",
value: function addClass(cls) {
var _this = this;
if (Array.isArray(cls)) {
cls.forEach(function (c) {
return _this.element.classList.add(c.trim());
});
} else if (typeof cls !== 'undefined' && cls.trim().length > 0) {
cls.split(' ').forEach(function (c) {
return _this.element.classList.add(c.trim());
});
}
return this;
}
/**
* remove multiple classes from element
*
* @param {string|string[]} cls
* @returns {ElementPlus}
*/
}, {
key: "removeClass",
value: function removeClass(cls) {
var _this2 = this;
if (Array.isArray(cls)) {
cls.forEach(function (c) {
return _this2.element.classList.remove(c.trim());
});
} else if (typeof cls !== 'undefined' && cls.trim().length > 0) {
cls.split(' ').forEach(function (c) {
return _this2.element.classList.remove(c.trim());
});
}
return this;
}
/**
* check if element has a certain class
*
* @param {string} cls
* @returns {boolean}
*/
}, {
key: "hasClass",
value: function hasClass(cls) {
return this.element.classList.contains(cls);
}
/**
* toggle element classes
*
* @param {string} cls
* @returns {ElementPlus}
*/
}, {
key: "toggleClass",
value: function 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}
*/
}, {
key: "setAttr",
value: function 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}
*/
}, {
key: "removeAttr",
value: function removeAttr(key) {
var _this3 = this;
if (Array.isArray(key)) {
key.forEach(function (k) {
return _this3.element.removeAttribute(k);
});
} else {
this.element.removeAttribute(key);
}
return this;
}
/**
* add multiple children to current element
*
* @param {(HTMLElement|ElementPlus)[]} elements
* @returns {ElementPlus}
*/
}, {
key: "addChildren",
value: function addChildren(elements) {
var _this4 = this;
if (Array.isArray(elements)) {
elements.filter(Boolean).forEach(function (element) {
if (_this4.isElmPro(element)) {
_this4.element.appendChild(element.getElm());
} else if (element instanceof HTMLElement) {
_this4.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}
*/
}, {
key: "on",
value: function 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}
*/
}, {
key: "unbind",
value: function unbind(type) {
var _this5 = this;
if (type === undefined) {
var _iterator = _createForOfIteratorHelper(this.eventsRegistry.entries()),
_step;
try {
for (_iterator.s(); !(_step = _iterator.n()).done;) {
var _step$value = _slicedToArray__default["default"](_step.value, 2),
event = _step$value[0],
listener = _step$value[1];
this.element.removeEventListener(event, listener);
}
} catch (err) {
_iterator.e(err);
} finally {
_iterator.f();
}
this.eventsRegistry.clear();
} else if (Array.isArray(type)) {
type.forEach(function (t) {
var handler = _this5.eventsRegistry.get(t);
if (handler) {
_this5.element.removeEventListener(t, handler);
_this5.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}
*/
}, {
key: "dispatch",
value: function dispatch(type, detail, options) {
this.element.dispatchEvent(new CustomEvent(type, Object.assign({}, {
detail: detail
}, options || {})));
return this;
}
/**
* set current element innerText
*
* @param {(string} text
* @returns {ElementPlus}
*/
}, {
key: "setText",
value: function setText(text) {
this.element.innerText = text;
return this;
}
/**
* append innerHTML after current element
*
* @param {(string} text
* @returns {ElementPlus}
*/
}, {
key: "addInnerHtml",
value: function 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}
*/
}, {
key: "setHtml",
value: function setHtml(html) {
this.element.innerHTML = html;
return this;
}
/**
* append current element to target element
*/
}, {
key: "appendTo",
value: function appendTo(selectors) {
var target = document.querySelector(selectors) || document.body;
target.appendChild(this.element);
}
}]);
return ElementPlus;
}();
var Div = function Div() {
return new ElementPlus('div');
};
var Span = function Span() {
return new ElementPlus('span');
};
var Img = function Img() {
return new ElementPlus('img');
};
var Video = function Video() {
return new ElementPlus('video');
};
var Input = function Input() {
return new ElementPlus('input');
};
var Button = function Button() {
return new ElementPlus('button');
};
var $ = function $(tagName, nameSpace) {
return new ElementPlus(tagName, nameSpace);
};
exports.Button = Button;
exports.Div = Div;
exports.ElementPlus = ElementPlus;
exports.Img = Img;
exports.Input = Input;
exports.Span = Span;
exports.Video = Video;
exports["default"] = $;
//# sourceMappingURL=index.js.map