From a5c49f95beda23bf93aacebe50e837dd076efdf0 Mon Sep 17 00:00:00 2001 From: James Campos Date: Sun, 17 Apr 2011 13:16:35 -0700 Subject: [PATCH] imageExpansion --- 4chan_x.js | 232 +++++++++++++++++++++++++------------------------- script.coffee | 175 ++++++++++++++++++------------------- 2 files changed, 202 insertions(+), 205 deletions(-) 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