diff --git a/4chan_x.js b/4chan_x.js
index bc9f5c621..2b85553a0 100644
--- a/4chan_x.js
+++ b/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(imgExpansion.cb.node);
- expand = $.el('div', {
+ g.callbacks.push(imgExpand.cb.node);
+ return imgExpand.dialog();
+ },
+ 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: " "
});
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', expand), 'change', imageTypeChange);
- $.bind($('input', expand), 'click', imageExpandClick);
+ $.bind($('select', controls), 'change', $.cb.value);
+ $.bind($('select', controls), 'change', imageTypeChange);
+ $.bind($('input', controls), 'click', imgExpand.cb.all);
delform = $('form[name=delform]');
- return $.prepend(delform, expand);
- },
- 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;
- }
+ return $.prepend(delform, controls);
}
};
- 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;
diff --git a/script.coffee b/script.coffee
index bb307e3bc..be28c424f 100644
--- a/script.coffee
+++ b/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:
"
"
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', expand), 'change', imageTypeChange
- $.bind $('input', expand), 'click', imageExpandClick
+ $.bind $('select', controls), 'change', $.cb.value
+ $.bind $('select', controls), 'change', imageTypeChange
+ $.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 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