wip(defaults) basic dom manipulation wip version

lib/plugins/StandardLibrary/DomManipulation.js

@@ -0,0 +1,285 @@
+function duplicate(node) {
+	return node.cloneNode(true);
+}
+
+function remove(node) {
+	node.remove();
+}
+
+function append(node, parent) {
+	parent.appendChild(node);
+}
+
+function prepend(node, parent) {
+	parent.prepend(node);
+}
+
+function after(node, sibling) {
+	sibling.after(node);
+}
+
+function before(node, sibling) {
+	sibling.before(node);
+}
+
+function replace(node, sibling) {
+	sibling.replaceWith(node);
+}
+
+function wrap(node, wrapper) {
+	node.parentNode.insertBefore(wrapper, node);
+	wrapper.appendChild(node);
+}
+
+function unwrap(node) {
+	const parent = node.parentNode;
+	parent.replaceChild(node.firstChild, node);
+}
+
+function empty(node) {
+	node.innerHTML = '';
+}
+
+function html(node, html) {
+	node.innerHTML = html;
+}
+
+function text(node, text) {
+	node.textContent = text;
+}
+
+function attr(node, name, value) {
+	if (value === undefined) return node.getAttribute(name);
+	node.setAttribute(name, value);
+}
+
+function removeAttr(node, name) {
+	node.removeAttribute(name);
+}
+
+function hasClass(node, className) {
+	return node.classList.contains(className);
+}
+
+function addClass(node, className) {
+	node.classList.add(className);
+}
+
+function removeClass(node, className) {
+	node.classList.remove(className);
+}
+
+function toggleClass(node, className) {
+	node.classList.toggle(className);
+}
+
+function on(node, event, callback) {
+	node.addEventListener(event, callback);
+}
+
+function off(node, event, callback) {
+	node.removeEventListener(event, callback);
+}
+
+function trigger(node, event) {
+	node.dispatchEvent(new Event(event));
+}
+
+function find(selector, parent) {
+	return (parent || document).querySelectorAll(selector);
+}
+
+function closest(node, selector) {
+	return node.closest(selector);
+}
+
+function parent(node) {
+	return node.parentNode;
+}
+
+function children(node) {
+	return node.children;
+}
+
+function siblings(node) {
+	return [...node.parentNode.children].filter((child) => child !== node);
+}
+
+function next(node) {
+	return node.nextElementSibling;
+}
+
+function prev(node) {
+	return node.previousElementSibling;
+}
+
+function index(node) {
+	return [...node.parentNode.children].indexOf(node);
+}
+
+function getStyle(node, prop) {
+	return getComputedStyle(node)[prop];
+}
+
+function setStyle(node, prop, value) {
+	node.style[prop] = value;
+}
+
+function setStyles(node, styles) {
+	Object.entries(styles).forEach(([prop, value]) => {
+		node.style[prop] = value;
+	});
+}
+
+function removeStyle(node, prop) {
+	node.style.removeProperty(prop);
+}
+
+function removeStyles(node, props) {
+	props.forEach((prop) => {
+		node.style.removeProperty(prop);
+	});
+}
+
+function css(node, prop, value) {
+	if (value === undefined) return getStyle(node, prop);
+	node.style[prop] = value;
+}
+
+function offset(node) {
+	const rect = node.getBoundingClientRect();
+	return {
+		top: rect.top + document.body.scrollTop,
+		left: rect.left + document.body.scrollLeft,
+	};
+}
+
+function position(node) {
+	return {
+		top: node.offsetTop,
+		left: node.offsetLeft,
+	};
+}
+
+function height(node) {
+	return node.offsetHeight;
+}
+
+function width(node) {
+	return node.offsetWidth;
+}
+
+function outerHeight(node, margin) {
+	let height = node.offsetHeight;
+	if (margin) {
+		const style = getComputedStyle(node);
+		return (
+			height + parseInt(style.marginTop) + parseInt(style.marginBottom)
+		);
+	}
+	return height;
+}
+
+function outerWidth(node, margin) {
+	const width = node.offsetWidth;
+	if (margin) {
+		const style = getComputedStyle(node);
+		return width + parseInt(style.marginLeft) + parseInt(style.marginRight);
+	}
+	return width;
+}
+
+function scroll(node) {
+	return {
+		top: node.scrollTop,
+		left: node.scrollLeft,
+	};
+}
+
+function scrollTop(node, value) {
+	if (value === undefined) return node.scrollTop;
+	node.scrollTop = value;
+}
+
+function scrollBottom(node, value) {
+	if (value === undefined) return node.scrollBottom;
+	node.scrollBottom = value;
+}
+
+function scrollLeft(node, value) {
+	if (value === undefined) return node.scrollLeft;
+	node.scrollLeft = value;
+}
+
+function scrollHeight(node) {
+	return node.scrollHeight;
+}
+
+function scrollWidth(node) {
+	return node.scrollWidth;
+}
+
+function innerHeight(node) {
+	return node.clientHeight;
+}
+
+function innerWidth(node) {
+	return node.clientWidth;
+}
+
+function offsetParent(node) {
+	return node.offsetParent || node;
+}
+
+export default new Map([
+	['duplicate', duplicate],
+	['remove', remove],
+	['append', append],
+	['prepend', prepend],
+	['after', after],
+	['before', before],
+	['replace', replace],
+	['wrap', wrap],
+	['unwrap', unwrap],
+	['empty', empty],
+	['html', html],
+	['text', text],
+	['attr', attr],
+	['removeAttr', removeAttr],
+	['hasClass', hasClass],
+	['addClass', addClass],
+	['removeClass', removeClass],
+	['toggleClass', toggleClass],
+	['on', on],
+	['off', off],
+	['trigger', trigger],
+	['find', find],
+	['closest', closest],
+	['parent', parent],
+	['children', children],
+	['siblings', siblings],
+	['next', next],
+	['prev', prev],
+	['index', index],
+	['getStyle', getStyle],
+	['setStyle', setStyle],
+	['setStyles', setStyles],
+	['removeStyle', removeStyle],
+	['removeStyles', removeStyles],
+	['css', css],
+	['offset', offset],
+	['position', position],
+	['height', height],
+	['width', width],
+	['outerHeight', outerHeight],
+	['outerWidth', outerWidth],
+	['scroll', scroll],
+	['scrollTop', scrollTop],
+	['scrollBottom', scrollBottom],
+	['scrollLeft', scrollLeft],
+	['scrollHeight', scrollHeight],
+	['scrollWidth', scrollWidth],
+	['innerHeight', innerHeight],
+	['innerWidth', innerWidth],
+	['offsetParent', offsetParent],
+]);