diff --git a/static/js/post-form.js b/static/js/post-form.js index af0bf83..5ad099f 100644 --- a/static/js/post-form.js +++ b/static/js/post-form.js @@ -15,3 +15,143 @@ $(function () { 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"); + + 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"); + } + + 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 (rect.right > document.documentElement.clientWidth) { + form.css("left", 0); + } + + if (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; + } + } +}); diff --git a/static/style.css b/static/style.css index 6ca6e84..4234fb9 100755 --- a/static/style.css +++ b/static/style.css @@ -56,14 +56,21 @@ summary { padding: 0; } +.container > form:not(#post-form) > .form-table { + margin: 8px auto; +} + #post-form { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + visibility: hidden; position: fixed; right: 0; - top: 3rem; + top: 0; background-color: var(--box-color); - border: 1px solid var(--box-border); - margin: 4px; + padding: 4px; } #post-form:target, @@ -79,6 +86,12 @@ summary { cursor: move; } +#post-form-handle::after { + content: ""; + display: block; + clear: right; +} + .edit-box { display: block; width: 100%; @@ -109,6 +122,10 @@ summary { margin: 0 auto; } +.form-table input[type="file"] { + width: 100%; +} + .form-table textarea, .edit-box { height: 8rem; @@ -477,6 +494,11 @@ summary { width: 140px; height: 220px; } + + #post-form, + #post-form .form-table { + width: 100%; + } } /* Only in JS */ diff --git a/templates/macros/post-form.html b/templates/macros/post-form.html index 14c9be9..85df7ca 100644 --- a/templates/macros/post-form.html +++ b/templates/macros/post-form.html @@ -12,7 +12,7 @@ {% else %} Nové vlákno {% endif %} - X + [Zavřít]