start imgExpand rewrite

4chan_x.js

@@ -2146,7 +2146,6 @@
         var thumb, thumbs, _i, _j, _len, _len2, _results, _results2;
         thumbs = $$('img[md5]');
         imgExpand.on = this.checked;
-        imgExpand.foo();
         if (imgExpand.on) {
           _results = [];
           for (_i = 0, _len = thumbs.length; _i < _len; _i++) {
@@ -2164,21 +2163,23 @@
         }
       },
       typeChange: function(e) {
-        var img, _i, _len, _ref2, _results;
+        var klass;
-        imgExpand.foo();
+        switch (this.value) {
-        _ref2 = $$('img[md5] + img');
+          case 'full':
-        _results = [];
+            klass = '';
-        for (_i = 0, _len = _ref2.length; _i < _len; _i++) {
+            break;
-          img = _ref2[_i];
+          case 'fit width':
-          _results.push(imgExpand.resize(img));
+            klass = 'fitwidth';
+            break;
+          case 'fit screen':
+            klass = 'fitwidth fitheight';
         }
-        return _results;
+        return d.body.className = klass;
       }
     },
     toggle: function(a) {
       var thumb;
       thumb = a.firstChild;
-      imgExpand.foo();
       if (thumb.style.display) {
         return imgExpand.contract(thumb);
       } else {
@@ -2196,50 +2197,10 @@
       img = $.el('img', {
         src: a.href
       });
-      a.appendChild(img);
+      return a.appendChild(img);
-      return imgExpand.resize(img);
-    },
-    foo: function() {
-      var crap, formWidth, left, table, td;
-      formWidth = $('form[name=delform]').getBoundingClientRect().width;
-      if (td = $('td.reply')) {
-        table = td.parentNode.parentNode.parentNode;
-        left = td.getBoundingClientRect().left - table.getBoundingClientRect().left;
-        crap = td.getBoundingClientRect().width - parseInt(getComputedStyle(td).width);
-      }
-      imgExpand.maxWidthOP = formWidth;
-      imgExpand.maxWidthReply = formWidth - left - crap;
-      imgExpand.maxHeight = d.body.clientHeight;
-      return imgExpand.type = $('#imageType').value;
-    },
-    resize: function(img) {
-      var imgHeight, imgWidth, maxHeight, maxWidth, maxWidthOP, maxWidthReply, ratio, type, _, _ref2;
-      maxWidthOP = imgExpand.maxWidthOP, maxWidthReply = imgExpand.maxWidthReply, maxHeight = imgExpand.maxHeight, type = imgExpand.type;
-      _ref2 = $.x("preceding::span[@class][1]/text()[2]", img).textContent.match(/(\d+)x(\d+)/), _ = _ref2[0], imgWidth = _ref2[1], imgHeight = _ref2[2];
-      imgWidth = Number(imgWidth);
-      imgHeight = Number(imgHeight);
-      if (img.parentNode.parentNode.nodeName === 'TD') {
-        maxWidth = maxWidthReply;
-      } else {
-        maxWidth = maxWidthOP;
-      }
-      switch (type) {
-        case 'full':
-          return img.removeAttribute('style');
-        case 'fit width':
-          if (imgWidth > maxWidth) {
-            return img.style.width = maxWidth;
-          }
-          break;
-        case 'fit screen':
-          ratio = Math.min(maxWidth / imgWidth, maxHeight / imgHeight);
-          if (ratio < 1) {
-            return img.style.width = Math.floor(ratio * imgWidth);
-          }
-      }
     },
     dialog: function() {
-      var controls, delform, imageType, option, _i, _len, _ref2;
+      var controls, delform, imageType, option, select, _i, _len, _ref2;
       controls = $.el('div', {
         id: 'imgControls',
         innerHTML: "<select id=imageType name=imageType><option>full</option><option>fit width</option><option>fit screen</option></select>        <label>Expand Images<input type=checkbox id=imageExpand></label>"
@@ -2253,8 +2214,10 @@
           break;
         }
       }
-      $.bind($('select', controls), 'change', $.cb.value);
+      select = $('select', controls);
-      $.bind($('select', controls), 'change', imgExpand.cb.typeChange);
+      imgExpand.cb.typeChange.call(select);
+      $.bind(select, 'change', $.cb.value);
+      $.bind(select, 'change', imgExpand.cb.typeChange);
       $.bind($('input', controls), 'click', imgExpand.cb.all);
       delform = $('form[name=delform]');
       return $.prepend(delform, controls);
@@ -2451,6 +2414,14 @@
       img[md5] + img {\
         float: left;\
       }\
+      body.fitwidth img[md5] + img {\
+        max-width: 100%;\
+      }\
+      body.fitheight img[md5] + img {\
+        /* FIXME max height = height of thread. we want height of viewport */\
+        max-height: 100%;\
+      }\
+\
       iframe {\
         display: none;\
       }\

script.coffee

@@ -1651,7 +1651,6 @@ imgExpand =
     all: (e) ->
       thumbs = $$ 'img[md5]'
       imgExpand.on = @checked
-      imgExpand.foo()
       if imgExpand.on #expand
         for thumb in thumbs
           unless thumb.style.display #thumbnail hidden, image already expanded
@@ -1661,13 +1660,17 @@ imgExpand =
           if thumb.style.display #thumbnail hidden - unhide it
             imgExpand.contract thumb
     typeChange: (e) ->
-      imgExpand.foo()
+      switch @value
-      for img in $$ 'img[md5] + img'
+        when 'full'
-        imgExpand.resize img
+          klass = ''
+        when 'fit width'
+          klass = 'fitwidth'
+        when 'fit screen'
+          klass = 'fitwidth fitheight'
+      d.body.className = klass
 
   toggle: (a) ->
     thumb = a.firstChild
-    imgExpand.foo()
     if thumb.style.display
       imgExpand.contract thumb
     else
@@ -1684,44 +1687,6 @@ imgExpand =
       src: a.href
     a.appendChild img
 
-    imgExpand.resize img
-
-  foo: ->
-    formWidth = $('form[name=delform]').getBoundingClientRect().width
-    if td = $('td.reply')
-      table = td.parentNode.parentNode.parentNode
-      left = td.getBoundingClientRect().left - table.getBoundingClientRect().left
-      crap = td.getBoundingClientRect().width - parseInt(getComputedStyle(td).width)
-
-    imgExpand.maxWidthOP    = formWidth
-    imgExpand.maxWidthReply = formWidth - left - crap
-    imgExpand.maxHeight = d.body.clientHeight
-    imgExpand.type = $('#imageType').value
-
-  resize: (img) ->
-    {maxWidthOP, maxWidthReply, maxHeight, type} = imgExpand
-    [_, imgWidth, imgHeight] = $
-      .x("preceding::span[@class][1]/text()[2]", img)
-      .textContent.match(/(\d+)x(\d+)/)
-    imgWidth  = Number imgWidth
-    imgHeight = Number imgHeight
-
-    if img.parentNode.parentNode.nodeName == 'TD'
-      maxWidth = maxWidthReply
-    else
-      maxWidth = maxWidthOP
-
-    switch type
-      when 'full'
-        img.removeAttribute 'style'
-      when 'fit width'
-        if imgWidth > maxWidth
-          img.style.width = maxWidth
-      when 'fit screen'
-        ratio = Math.min maxWidth/imgWidth, maxHeight/imgHeight
-        if ratio < 1
-          img.style.width = Math.floor ratio * imgWidth
-
   dialog: ->
     controls = $.el 'div',
       id: 'imgControls'
@@ -1733,8 +1698,10 @@ imgExpand =
       if option.textContent is imageType
         option.selected = true
         break
-    $.bind $('select', controls), 'change', $.cb.value
+    select = $ 'select', controls
-    $.bind $('select', controls), 'change', imgExpand.cb.typeChange
+    imgExpand.cb.typeChange.call select
+    $.bind select, 'change', $.cb.value
+    $.bind select, 'change', imgExpand.cb.typeChange
     $.bind $('input',  controls), 'click',  imgExpand.cb.all
 
     delform = $ 'form[name=delform]'
@@ -1918,6 +1885,14 @@ main =
       img[md5] + img {
         float: left;
       }
+      body.fitwidth img[md5] + img {
+        max-width: 100%;
+      }
+      body.fitheight img[md5] + img {
+        /* FIXME max height = height of thread. we want height of viewport */
+        max-height: 100%;
+      }
+
       iframe {
         display: none;
       }