Mejor expansion de imagenes

1 files changed, 26 insertions, 12 deletions

diff --git a/static/js/weabot.js b/static/js/weabot.js
index 48ac7cd..04ac483 100644
--- a/static/js/weabot.js
+++ b/static/js/weabot.js
@@ -35,7 +35,6 @@ function insert(text) {
   var textarea = document.forms.postform.message;
   if (textarea) {
     if (textarea.setSelectionRange) {
-      // Firefox
       var start = textarea.selectionStart;
       var end = textarea.selectionEnd;
       textarea.value =
@@ -77,22 +76,28 @@ function expandimg(e) {
   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');
+    cont.removeAttribute('style');
     e.dataset.expanded = '';
 
-    if (aux.className != "thread") {
-      var bq = aux.nextElementSibling;
-      bq.removeAttribute('style');
-      bq.style.marginLeft = (thumb.width + 32) + 'px';
+    if (e.parentNode.parentNode.className != "thread") {
+      var bq = cont.nextElementSibling;
+      bq.style.marginLeft = (thumb.width + 40) + 'px';
     }
   } else {
     var imgurl = e.href;
     var format = imgurl.split('.').pop();
-    var maxw = document.body.clientWidth - thumb.getBoundingClientRect().left - 40;
+
+    var clientw = document.body.clientWidth;
+    if (clientw > 600) {
+      var marginr = 40;
+    } else {
+      var marginr = 15;
+    }
+    var maxw = clientw - thumb.getBoundingClientRect().left - marginr;
 
     if (imgw > maxw) {
       var ratio = maxw / imgw;
@@ -100,20 +105,29 @@ function expandimg(e) {
       imgh = imgh * ratio;
     }
 
-    var exp = document.createElement('img');
-    exp.className = 'thumb expanded';
+    if (format.toLowerCase() == 'webm' || format.toLowerCase() == 'mp4') {
+      var exp = document.createElement('video');
+      exp.autoplay = true;
+      exp.loop = true;
+      exp.controls = true;
+      exp.poster = thumb.src;
+    } else {
+      var exp = document.createElement('img');
+    }
+
+    exp.className = 'thumb';
     exp.alt = pid;
     exp.src = imgurl;
     exp.style.maxWidth = imgw + 'px';
     exp.style.maxHeight = imgh + 'px';
     cont.appendChild(exp);
+    cont.style.display = 'table';
     thumb.style.display = 'none';
     e.dataset.expanded = 'true';
 
-    if (aux.className != "thread") {
-      var bq = aux.nextElementSibling;
+    if (e.parentNode.parentNode.className != "thread") {
+      var bq = cont.nextElementSibling;
       bq.style.marginLeft = '';
-      bq.style.display = 'table';
     }
   }
 }