Fix expansion imagen

3 files changed, 52 insertions, 77 deletions

diff --git a/static/css/ib.css b/static/css/ib.css
index fb0433d..666522a 100644
--- a/static/css/ib.css
+++ b/static/css/ib.css
@@ -27,6 +27,7 @@ body[data-brd="2d"], body[data-brd="2d"] textarea {
 .postarea table {
   margin: 0 auto;
   text-align: left;
+  line-height: 1em;
 }
 #main_nav {
   font-size: 14px;
@@ -95,6 +96,7 @@ textarea {
 #rules {
   width: 468px;
   font-size: 13px;
+  line-height: 15px;
 }
 #rules ul {
   margin: 4px 0 0;
@@ -126,6 +128,9 @@ textarea {
   float: left;
   margin: 0 20px;
 }
+.thumb.expanded {
+  margin-bottom: 1em;
+}
 .ell {
   font-family: Mona, IPAMonaPGothic, Monapo, "MS PGothic", YOzFontAA97;
   vertical-align: top;
@@ -392,6 +397,9 @@ textarea {
     width: auto;
     height: auto;
   }
+  .thumb.expanded {
+    margin-bottom: 8px;
+  }
   blockquote {
     margin: 8px !important;
   }
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);