From 1010ac07fdc3991faf31d2771f7c653583f54835 Mon Sep 17 00:00:00 2001 From: Choom Date: Tue, 20 Dec 2022 04:20:49 -0300 Subject: Fix expansion imagen --- static/js/autorefresh.js | 2 +- static/js/weabot.js | 119 +++++++++++++++++------------------------------ 2 files changed, 44 insertions(+), 77 deletions(-) (limited to 'static/js') diff --git a/static/js/autorefresh.js b/static/js/autorefresh.js index cd4bf39..af61c8b 100644 --- a/static/js/autorefresh.js +++ b/static/js/autorefresh.js @@ -303,7 +303,7 @@ function detectService() { thread_first_length = thread_length; replylist = document.getElementsByClassName("thread"); replylist += document.getElementsByClassName("reply"); - var footer = document.getElementsByClassName("nav")[0]; + var footer = document.getElementsByClassName("nav")[1]; var mnl = document.createElement("a"); mnl.id = "shownew"; mnl.href = "#"; diff --git a/static/js/weabot.js b/static/js/weabot.js index 28e31cb..48ac7cd 100644 --- a/static/js/weabot.js +++ b/static/js/weabot.js @@ -34,12 +34,7 @@ function postClick(num) { function insert(text) { var textarea = document.forms.postform.message; if (textarea) { - if (textarea.createTextRange && textarea.caretPos) { - // IE - var caretPos = textarea.caretPos; - caretPos.text = - caretPos.text.charAt(caretPos.text.length - 1) == " " ? text + " " : text; - } else if (textarea.setSelectionRange) { + if (textarea.setSelectionRange) { // Firefox var start = textarea.selectionStart; var end = textarea.selectionEnd; @@ -76,78 +71,50 @@ function highlight(post) { } function expandimg(e) { - var post_id = e.dataset.id; - var img_url = e.href; - var thumb_url = e.dataset.thumb; - var img_w = parseInt(e.dataset.w); - var img_h = parseInt(e.dataset.h); - var thumb_w = parseInt(e.dataset.tw); - if (thumb_w < 1) return true; - var thumb_h = parseInt(e.dataset.th); - var format = img_url.substring(img_url.lastIndexOf(".") + 1, img_url.length); - var exp_vid = 0; - - if (window.innerWidth > 900) - var ratio = Math.min((window.innerWidth - 130) / img_w, 1); - else var ratio = Math.min((window.innerWidth - 40) / img_w, 1); - - var img_cont = document.getElementById("thumb" + post_id); - var post_block = img_cont.parentElement.parentElement.getElementsByTagName( - "blockquote" - )[0]; - var img; - - for (var i = 0; i < img_cont.childNodes.length; i++) - if (img_cont.childNodes[i].nodeName.toLowerCase() == "img") { - img = img_cont.childNodes[i]; - } else if (img_cont.childNodes[i].nodeName.toLowerCase() == "video") { - img = img_cont.childNodes[i]; - exp_vid = 1; + var imgw = parseInt(e.dataset.w); + var imgh = parseInt(e.dataset.h); + + var pid = e.dataset.id; + var cont = document.getElementById('thumb'+pid); + var thumb = cont.firstElementChild; + var aux = e.parentNode.parentNode; + + if (e.dataset.expanded == 'true') { + cont.removeChild(cont.lastElementChild); + thumb.removeAttribute('style'); + e.dataset.expanded = ''; + + if (aux.className != "thread") { + var bq = aux.nextElementSibling; + bq.removeAttribute('style'); + bq.style.marginLeft = (thumb.width + 32) + 'px'; } - - if (img) { - if (format == "webm" || format == "mp4" && exp_vid == 0) - var new_img = document.createElement("video"); - else var new_img = document.createElement("img"); - - new_img.setAttribute("class", "thumb"); - new_img.setAttribute("alt", "" + post_id); - - if (img.getAttribute("width") == "" + thumb_w && - img.getAttribute("height") == "" + thumb_h) { - // thumbnail -> fullsize - if (format == "webm" || format == "mp4") { - new_img.setAttribute("controls", ""); - new_img.setAttribute("loop", ""); - new_img.setAttribute("autoplay", ""); - } - new_img.setAttribute("src", "" + img_url); - new_img.setAttribute("width", img_w); - new_img.setAttribute("height", img_h); - new_img.setAttribute("style", "max-width:" + - Math.floor(img_w * ratio) + "px;max-height:" + - Math.floor(img_h * ratio) + "px;"); - post_block.setAttribute("style", ""); - img_cont.style.display = "table"; - } else { - // fullsize -> thumbnail - if (format == "webm" || format == "mp4") { - new_img.removeAttribute("controls"); - new_img.removeAttribute("loop"); - new_img.removeAttribute("autoplay"); - } - new_img.setAttribute("src", "" + thumb_url); - new_img.setAttribute("width", thumb_w); - new_img.setAttribute("height", thumb_h); - post_block.setAttribute("style", "margin-left:" + - (parseInt(thumb_w) + 40) + "px;max-width:" + - (1000 - parseInt(thumb_w)) + "px"); - img_cont.removeAttribute("style"); + } else { + var imgurl = e.href; + var format = imgurl.split('.').pop(); + var maxw = document.body.clientWidth - thumb.getBoundingClientRect().left - 40; + + if (imgw > maxw) { + var ratio = maxw / imgw; + imgw = maxw; + imgh = imgh * ratio; } - while (img_cont.lastChild) img_cont.removeChild(img_cont.lastChild); - - img_cont.appendChild(new_img); + var exp = document.createElement('img'); + exp.className = 'thumb expanded'; + exp.alt = pid; + exp.src = imgurl; + exp.style.maxWidth = imgw + 'px'; + exp.style.maxHeight = imgh + 'px'; + cont.appendChild(exp); + thumb.style.display = 'none'; + e.dataset.expanded = 'true'; + + if (aux.className != "thread") { + var bq = aux.nextElementSibling; + bq.style.marginLeft = ''; + bq.style.display = 'table'; + } } } @@ -397,4 +364,4 @@ document.addEventListener("dblclick", function(e) { togglePost(e.target.closest(".info")); return; } -}, false); \ No newline at end of file +}, false); -- cgit v1.2.1-18-gbd029