imageExpansion

4chan_x.js

@@ -59,7 +59,7 @@
  */
 
 (function() {
-  var $, $$, NAMESPACE, anonymize, autoWatch, callback, config, d, el, expandComment, expandThread, g, imageClick, imageExpand, imageExpandClick, imageHover, imageResize, imageThumb, imageToggle, imageTypeChange, imgExpansion, imgGif, imgPreloading, keybinds, localize, log, nav, navtopr, nodeInserted, options, pathname, qr, quickReport, recaptcha, redirect, replyHiding, sauce, temp, threadHiding, titlePost, tzOffset, ui, unread, updater, watcher, _config, _i, _j, _len, _len2, _ref, _ref2, _ref3;
+  var $, $$, NAMESPACE, anonymize, autoWatch, callback, config, d, el, expandComment, expandThread, g, imageHover, imgExpand, imgGif, imgPreloading, keybinds, localize, log, nav, navtopr, nodeInserted, options, pathname, qr, quickReport, recaptcha, redirect, replyHiding, sauce, temp, threadHiding, titlePost, tzOffset, ui, unread, updater, watcher, _config, _i, _j, _len, _len2, _ref, _ref2, _ref3;
   var __slice = Array.prototype.slice;
   if (typeof console != "undefined" && console !== null) {
     log = function(arg) {
@@ -1855,15 +1855,122 @@
       });
     }
   };
-  imgExpansion = {
+  imgExpand = {
     init: function() {
-      var delform, expand, imageType, option, _i, _len, _ref;
+      g.callbacks.push(imgExpand.cb.node);
-      g.callbacks.push(imgExpansion.cb.node);
+      return imgExpand.dialog();
-      expand = $.el('div', {
+    },
+    cb: {
+      node: function(root) {
+        var thumb, _i, _len, _ref, _results;
+        _ref = $$('img[md5]', root);
+        _results = [];
+        for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+          thumb = _ref[_i];
+          $.bind(thumb.parentNode, 'click', imgExpand.cb.toggle);
+          _results.push(g.expand ? imgExpand.expand(thumb.parentNode) : void 0);
+        }
+        return _results;
+      },
+      toggle: function(e) {
+        if (e.shiftKey || e.altKey || e.ctrlKey) {
+          return;
+        }
+        e.preventDefault();
+        return imgExpand.toggle(e.target);
+      },
+      all: function(e) {
+        var ch, cw, imageType, thumb, thumbs, _i, _j, _len, _len2, _results, _results2;
+        thumbs = $$('img[md5]');
+        g.expand = e.target.checked;
+        cw = d.body.clientWidth;
+        ch = d.body.clientHeight;
+        imageType = $("#imageType").value;
+        if (g.expand) {
+          _results = [];
+          for (_i = 0, _len = thumbs.length; _i < _len; _i++) {
+            thumb = thumbs[_i];
+            _results.push(!thumb.style.display ? imgExpand.expand(thumb, cw, ch, imageType) : void 0);
+          }
+          return _results;
+        } else {
+          _results2 = [];
+          for (_j = 0, _len2 = thumbs.length; _j < _len2; _j++) {
+            thumb = thumbs[_j];
+            _results2.push(thumb.style.display ? imgExpand.contract(thumb) : void 0);
+          }
+          return _results2;
+        }
+      },
+      typeChange: function(e) {
+        var ch, cw, imageType, img, _i, _len, _ref, _results;
+        cw = d.body.clientWidth;
+        ch = d.body.clientHeight;
+        imageType = e.target.value;
+        _ref = $$('img[md5] + img');
+        _results = [];
+        for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+          img = _ref[_i];
+          _results.push(imgExpand.resize(cw, ch, imageType, img));
+        }
+        return _results;
+      }
+    },
+    toggle: function(a) {
+      var ch, cw, imageType, thumb;
+      thumb = a.firstChild;
+      cw = d.body.clientWidth;
+      ch = d.body.clientHeight;
+      imageType = $("#imageType").value;
+      if (thumb.style.display) {
+        return imgExpand.contract(a);
+      } else {
+        return imgExpand.expand(thumb, cw, ch, imageType, a);
+      }
+    },
+    contract: function(thumb) {
+      $.show(thumb);
+      return $.remove(thumb.nextSibling);
+    },
+    expand: function(thumb, cw, ch, imageType, a) {
+      var img;
+      $.hide(thumb);
+      img = $.el('img', {
+        src: a.href
+      });
+      a.appendChild(img);
+      return imgExpand.resize(cw, ch, imageType, img);
+    },
+    resize: function(cw, ch, imageType, img) {
+      var ih, iw, ratio, _, _ref;
+      _ref = $.x("preceding::span[@class][1]/text()[2]", img).textContent.match(/(\d+)x(\d+)/), _ = _ref[0], iw = _ref[1], ih = _ref[2];
+      iw = Number(iw);
+      ih = Number(ih);
+      switch (imageType) {
+        case 'full':
+          return img.removeAttribute('style');
+        case 'fit width':
+          if (iw > cw) {
+            img.style.width = '100%';
+            return img.style.margin = '0px';
+          }
+          break;
+        case 'fit screen':
+          ratio = Math.min(cw / iw, ch / ih);
+          if (ratio < 1) {
+            img.style.width = Math.floor(ratio * iw);
+            return img.style.margin = '0px';
+          }
+      }
+    },
+    dialog: function() {
+      var controls, delform, imageType, option, _i, _len, _ref;
+      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>"
       });
       imageType = $.getValue('imageType', 'full');
-      _ref = $$('option', expand);
+      _ref = $$('option', controls);
       for (_i = 0, _len = _ref.length; _i < _len; _i++) {
         option = _ref[_i];
         if (option.textContent === imageType) {
@@ -1871,118 +1978,13 @@
           break;
         }
       }
-      $.bind($('select', expand), 'change', $.cb.value);
+      $.bind($('select', controls), 'change', $.cb.value);
-      $.bind($('select', expand), 'change', imageTypeChange);
+      $.bind($('select', controls), 'change', imageTypeChange);
-      $.bind($('input', expand), 'click', imageExpandClick);
+      $.bind($('input', controls), 'click', imgExpand.cb.all);
       delform = $('form[name=delform]');
-      return $.prepend(delform, expand);
+      return $.prepend(delform, controls);
-    },
-    cb: {
-      node: function(root) {
-        var thumb, thumbs, _i, _len, _results;
-        thumbs = $$('img[md5]', root);
-        _results = [];
-        for (_i = 0, _len = thumbs.length; _i < _len; _i++) {
-          thumb = thumbs[_i];
-          $.bind(thumb.parentNode, 'click', imageClick);
-          _results.push(g.expand ? imageToggle(thumb.parentNode) : void 0);
-        }
-        return _results;
-      }
     }
   };
-  imageClick = function(e) {
-    if (e.shiftKey || e.altKey || e.ctrlKey) {
-      return;
-    }
-    e.preventDefault();
-    return imageToggle(this);
-  };
-  imageToggle = function(image) {
-    var ch, cw, imageType, thumb;
-    thumb = image.firstChild;
-    cw = d.body.clientWidth;
-    ch = d.body.clientHeight;
-    imageType = $("#imageType").value;
-    if (thumb.className === 'hide') {
-      return imageThumb(thumb);
-    } else {
-      return imageExpand(thumb, cw, ch, imageType);
-    }
-  };
-  imageTypeChange = function() {
-    var ch, cw, image, imageType, images, _i, _len, _results;
-    images = $$('img[md5] + img');
-    cw = d.body.clientWidth;
-    ch = d.body.clientHeight;
-    imageType = this.value;
-    _results = [];
-    for (_i = 0, _len = images.length; _i < _len; _i++) {
-      image = images[_i];
-      _results.push(imageResize(cw, ch, imageType, image));
-    }
-    return _results;
-  };
-  imageExpandClick = function() {
-    var ch, cw, imageType, thumb, thumbs, _i, _j, _len, _len2, _results, _results2;
-    thumbs = $$('img[md5]');
-    g.expand = this.checked;
-    cw = d.body.clientWidth;
-    ch = d.body.clientHeight;
-    imageType = $("#imageType").value;
-    if (this.checked) {
-      _results = [];
-      for (_i = 0, _len = thumbs.length; _i < _len; _i++) {
-        thumb = thumbs[_i];
-        _results.push(thumb.className !== 'hide' ? imageExpand(thumb, cw, ch, imageType) : void 0);
-      }
-      return _results;
-    } else {
-      _results2 = [];
-      for (_j = 0, _len2 = thumbs.length; _j < _len2; _j++) {
-        thumb = thumbs[_j];
-        _results2.push(thumb.className === 'hide' ? imageThumb(thumb) : void 0);
-      }
-      return _results2;
-    }
-  };
-  imageExpand = function(thumb, cw, ch, imageType) {
-    var image, link;
-    thumb.className = 'hide';
-    link = thumb.parentNode;
-    image = $.el('img', {
-      src: link.href
-    });
-    link.appendChild(image);
-    return imageResize(cw, ch, imageType, image);
-  };
-  imageResize = function(cw, ch, imageType, image) {
-    var ih, iw, ratio, _, _ref;
-    _ref = $.x("preceding::span[@class][1]/text()[2]", image).textContent.match(/(\d+)x(\d+)/), _ = _ref[0], iw = _ref[1], ih = _ref[2];
-    iw = Number(iw);
-    ih = Number(ih);
-    switch (imageType) {
-      case 'full':
-        image.removeAttribute('style');
-        break;
-      case 'fit width':
-        if (iw > cw) {
-          image.style.width = '100%';
-          image.style.margin = '0px';
-        }
-        break;
-      case 'fit screen':
-        ratio = Math.min(cw / iw, ch / ih);
-        if (ratio < 1) {
-          image.style.width = Math.floor(ratio * iw);
-          return image.style.margin = '0px';
-        }
-    }
-  };
-  imageThumb = function(thumb) {
-    thumb.className = '';
-    return $.remove(thumb.nextSibling);
-  };
   autoWatch = function(e) {
     var form, tc;
     form = e.target;

script.coffee

@@ -1411,111 +1411,106 @@ imgGif =
         if /gif$/.test src
           thumb.src = src
 
-imgExpansion =
+imgExpand =
   init: ->
-    g.callbacks.push imgExpansion.cb.node
+    g.callbacks.push imgExpand.cb.node
+    imgExpand.dialog()
 
-    expand = $.el 'div',
+  cb:
+    node: (root) ->
+      for thumb in $$ 'img[md5]', root
+        $.bind thumb.parentNode, 'click', imgExpand.cb.toggle
+        if g.expand then imgExpand.expand thumb.parentNode
+    toggle: (e) ->
+      #TODO middle click (chrome)
+      return if e.shiftKey or e.altKey or e.ctrlKey
+      e.preventDefault()
+      imgExpand.toggle e.target
+    all: (e) ->
+      thumbs = $$ 'img[md5]'
+      g.expand = e.target.checked
+      cw = d.body.clientWidth
+      ch = d.body.clientHeight
+      imageType = $("#imageType").value
+      if g.expand #expand
+        for thumb in thumbs
+          unless thumb.style.display #thumbnail hidden, image already expanded
+            imgExpand.expand thumb, cw, ch, imageType
+      else #contract
+        for thumb in thumbs
+          if thumb.style.display #thumbnail hidden - unhide it
+            imgExpand.contract thumb
+    typeChange: (e) ->
+      cw = d.body.clientWidth
+      ch = d.body.clientHeight
+      imageType = e.target.value
+      for img in $$ 'img[md5] + img'
+        imgExpand.resize cw, ch, imageType, img
+
+  toggle: (a) ->
+    thumb = a.firstChild
+    cw = d.body.clientWidth
+    ch = d.body.clientHeight
+    imageType = $("#imageType").value
+    if thumb.style.display
+      imgExpand.contract a
+    else
+      imgExpand.expand thumb, cw, ch, imageType, a
+
+  contract: (thumb) ->
+    $.show thumb
+    $.remove thumb.nextSibling
+
+  expand: (thumb, cw, ch, imageType, a) ->
+    $.hide thumb
+    img = $.el 'img',
+      src: a.href
+    a.appendChild img
+
+    imgExpand.resize cw, ch, imageType, img
+
+  resize: (cw, ch, imageType, img) ->
+    [_, iw, ih] =
+      $.x("preceding::span[@class][1]/text()[2]", img)
+      .textContent.match(/(\d+)x(\d+)/)
+    iw = Number iw
+    ih = Number ih
+
+    switch imageType
+      when 'full'
+        img.removeAttribute 'style'
+      when 'fit width'
+        if iw > cw
+          img.style.width = '100%'
+          img.style.margin = '0px'
+      when 'fit screen'
+        ratio = Math.min cw/iw, ch/ih
+        if ratio < 1
+          #XXX maybe needs + 'px' ?
+          img.style.width = Math.floor ratio * iw
+          img.style.margin = '0px'
+
+  dialog: ->
+    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>"
     imageType = $.getValue 'imageType', 'full'
-    for option in $$ 'option', expand
+    for option in $$ 'option', controls
       if option.textContent is imageType
         option.selected = true
         break
-    $.bind $('select', expand), 'change', $.cb.value
+    $.bind $('select', controls), 'change', $.cb.value
-    $.bind $('select', expand), 'change', imageTypeChange
+    $.bind $('select', controls), 'change', imageTypeChange
-    $.bind $('input',  expand), 'click',  imageExpandClick
+    $.bind $('input',  controls), 'click',  imgExpand.cb.all
 
     delform = $ 'form[name=delform]'
-    $.prepend delform, expand
+    $.prepend delform, controls
 
-  cb:
-    node: (root) ->
-      thumbs = $$ 'img[md5]', root
-      for thumb in thumbs
-        $.bind thumb.parentNode, 'click', imageClick
-        if g.expand then imageToggle thumb.parentNode
 
 # TODO rewrite these **************************************************************************
 
-imageClick = (e) ->
-  return if e.shiftKey or e.altKey or e.ctrlKey
-  e.preventDefault()
-  imageToggle this
-
-imageToggle = (image) ->
-  # 'image' is actually the <a> container
-  thumb = image.firstChild
-  cw = d.body.clientWidth
-  ch = d.body.clientHeight
-  imageType = $("#imageType").value
-  if thumb.className is 'hide'
-    imageThumb thumb
-  else
-    imageExpand thumb, cw, ch, imageType
-
-imageTypeChange = ->
-  images = $$ 'img[md5] + img'
-  cw = d.body.clientWidth
-  ch = d.body.clientHeight
-  imageType = @value
-  for image in images
-    imageResize cw, ch, imageType, image
-
-imageExpandClick = ->
-  thumbs = $$ 'img[md5]'
-  g.expand = @checked
-  cw = d.body.clientWidth
-  ch = d.body.clientHeight
-  imageType = $("#imageType").value
-  if @checked #expand
-    for thumb in thumbs
-      if thumb.className isnt 'hide'
-        #hide the thumb and show image
-        imageExpand thumb, cw, ch, imageType
-  else #contract
-    for thumb in thumbs
-      if thumb.className is 'hide'
-        #unhide thumb and remove image
-        imageThumb thumb
-
-imageExpand = (thumb, cw, ch, imageType) ->
-  thumb.className = 'hide'
-  link = thumb.parentNode
-  image = $.el 'img',
-    src: link.href
-  link.appendChild image
-
-  imageResize cw, ch, imageType, image
-
-imageResize = (cw, ch, imageType, image) ->
-  [_, iw, ih] =
-    $.x("preceding::span[@class][1]/text()[2]", image)
-    .textContent.match(/(\d+)x(\d+)/)
-  iw = Number iw
-  ih = Number ih
-
-  switch imageType
-    when 'full'
-      image.removeAttribute 'style'
-      return
-    when 'fit width'
-      if iw > cw
-        image.style.width = '100%'
-        image.style.margin = '0px'
-      break
-    when 'fit screen'
-      ratio = Math.min cw/iw, ch/ih
-      if ratio < 1
-        image.style.width = Math.floor ratio * iw
-        image.style.margin = '0px'
-
-imageThumb = (thumb) ->
-  thumb.className = ''
-  $.remove thumb.nextSibling
-
 autoWatch = (e) ->
   form = e.target
   tc = $('input[name=sub]', form).value or $('textarea', form).value