$(function () { $(".open-post-form").click(function () { $("#post-form").attr("data-visible", true); return false; }); $(".close-post-form").click(function () { if (document.location.hash == "#post-form") { document.location.hash = ""; } $("#post-form").attr("data-visible", false); return false; }); }); // Stolen and modified code from jschan $(function () { let dragging = false; let x_offset = 0; let y_offset = 0; let form = $("#post-form"); let handle = $("#post-form-handle"); let saved_top = window.localStorage.getItem("post_form_top"); let saved_left = window.localStorage.getItem("post_form_left"); if (saved_top) { form.css("top", saved_top); } if (saved_left) { form.css("left", saved_left); form.css("right", "auto"); } handle.on("mousedown", start); handle.get(0).addEventListener("touchstart", start, { passive: true }); $(document).on("mouseup", stop); $(document).on("touchend", stop); $(window).on("resize", update_max); $(window).on("orientationchange", update_max); function start(event) { dragging = true; const rect = form.get(0).getBoundingClientRect(); switch (event.type) { case "mousedown": x_offset = event.clientX - rect.left; y_offset = event.clientY - rect.top; $(window).on("mousemove", drag); break; case "touchstart": event.preventDefault(); event.stopPropagation(); x_offset = event.targetTouches[0].clientX - rect.left; y_offset = event.targetTouches[0].clientY - rect.top; $(window).on("touchmove", drag); break; default: break; } } function drag(event) { if (!dragging) { return; } update_max(event); switch (event.type) { case "mousemove": form.css( "left", `${in_bounds( event.clientX, x_offset, form.outerWidth(), document.documentElement.clientWidth )}px` ); form.css( "top", `${in_bounds( event.clientY, y_offset, form.outerHeight(), document.documentElement.clientHeight )}px` ); break; case "touchmove": form.css( "left", `${in_bounds( event.targetTouches[0].clientX, x_offset, form.outerWidth(), document.documentElement.clientWidth )}px` ); form.css( "top", `${in_bounds( event.targetTouches[0].clientY, y_offset, form.outerHeight(), document.documentElement.clientHeight )}px` ); break; default: break; } form.css("right", "auto"); window.localStorage.setItem("post_form_top", form.css("top")); window.localStorage.setItem("post_form_left", form.css("left")); } function stop() { if (dragging) { dragging = false; $(window).off("mousemove"); $(window).off("touchmove"); } } function update_max() { let rect = form.get(0).getBoundingClientRect(); if (rect.width === 0) { return; } if (Math.floor(rect.right) > document.documentElement.clientWidth) { form.css("left", 0); form.css("right", "auto"); } if (Math.floor(rect.bottom) > document.documentElement.clientHeight) { form.css("top", 0); } rect = form.get(0).getBoundingClientRect(); form.css( "max-height", `${document.documentElement.clientHeight - rect.top}px` ); form.css( "max-width", `${document.documentElement.clientWidth - rect.left}px` ); } function in_bounds(pos, offset, size, limit) { if (pos - offset <= 0) { return 0; } else if (pos - offset + size > limit) { return limit - size; } else { return pos - offset; } } });