refactor

2 files changed, 102 insertions, 0 deletions

diff --git a/web/public/js/shared/modal.js b/web/public/js/shared/modal.js
new file mode 100644
index 0000000..792cd85
--- /dev/null
+++ b/web/public/js/shared/modal.js
@@ -0,0 +1,64 @@
+$(document).on('click', ".modal-close", (o) => {
+	$(o.target).closest('.modal-container').remove();
+});
+
+const initDrag = (header, modal, container) => {
+	let drag = false;
+
+	let mouseX, mouseY, modalX, modalY;
+
+	const onStart = (e) => {
+		e = e || window.event;
+		e.preventDefault();
+		mouseX = e.clientX;
+		mouseY = e.clientY;
+		drag = true;
+	};
+
+	const onDrag = (e) => {
+		e = e || window.event;
+		e.preventDefault();
+		if (!drag) {
+			return;
+		}
+		modalX = mouseX - e.clientX;
+		modalY = mouseY - e.clientY;
+		mouseX = e.clientX;
+		mouseY = e.clientY;
+
+		let posX = (modal.offsetLeft - modalX),
+			posY = (modal.offsetTop - modalY);
+
+		let minX = modal.offsetWidth / 2,
+			minY = modal.offsetHeight / 2;
+
+		let maxX = container.offsetWidth - minX,
+			maxY = container.offsetHeight - minY;
+
+		posX = Math.max(minX, Math.min(maxX, posX));
+		posY = Math.max(minY, Math.min(maxY, posY));
+
+		posX = posX / container.offsetWidth * 100;
+		posY = posY / container.offsetHeight * 100;
+
+		modal.style.left = posX + "%";
+		modal.style.top = posY + "%";
+	};
+
+	const onEnd = () => {
+		drag = false;
+	};
+
+	header.onmousedown = onStart;
+	container.onmousemove = onDrag;
+	container.onmouseup = onEnd;
+};
+
+observe('body', '.modal-header', function(el) {
+	let header = $(el);
+	let modal = header.closest('.modal');
+	let container = header.closest('.modal-container');
+	initDrag(
+		header[0], modal[0], container[0]
+	);
+});
diff --git a/web/public/js/shared/post.js b/web/public/js/shared/post.js
new file mode 100644
index 0000000..afbeaf0
--- /dev/null
+++ b/web/public/js/shared/post.js
@@ -0,0 +1,38 @@
+observe('#main-content', '.action-load-comments', function(me) {
+	me.on('click', function() {
+		let page = me.attr('page');
+		if (!page) {
+			page = '1';
+		}
+		let newPage = Number(page) + 1;
+		let id = me.attr('postId');
+		me.attr('page', newPage + '');
+		let url = '/home/comments?page=' + page + '&id=' + id;
+			$.get(url, function (data) {
+			if (data === '') {
+				me.remove();
+			} else {
+				$(me).prepend(data);
+			}
+		});
+	});
+});
+
+observe('#main-content', '#action-load-posts', function(me) {
+	me.on('click', function () {
+		let page = me.attr('page');
+		if (!page) {
+			page = '1';
+		}
+		let newPage = Number(page) + 1;
+		me.attr('page', newPage + '');
+		let url = '/home/posts?page=' + page;
+			$.get(url, function (data) {
+			if (data === '') {
+				me.remove();
+			} else {
+				$('#post-container').append(data);
+			}
+		});
+	});
+});