From 1f04b83be337cc91a3fabcf4e574e2306f3d2eaa Mon Sep 17 00:00:00 2001 From: Freya Murphy Date: Sat, 30 Mar 2024 12:14:42 -0400 Subject: refactor --- web/public/js/shared/modal.js | 64 +++++++++++++++++++++++++++++++++++++++++++ web/public/js/shared/post.js | 38 +++++++++++++++++++++++++ 2 files changed, 102 insertions(+) create mode 100644 web/public/js/shared/modal.js create mode 100644 web/public/js/shared/post.js (limited to 'web/public/js/shared') 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); + } + }); + }); +}); -- cgit v1.2.3-freya