From 60fcb24f35cf44716945807145713ddd7947d6c0 Mon Sep 17 00:00:00 2001 From: James Campos Date: Mon, 16 May 2011 23:17:55 -0700 Subject: [PATCH 1/5] start imgExpand rewrite --- 4chan_x.js | 79 ++++++++++++++++----------------------------------- script.coffee | 65 +++++++++++++----------------------------- 2 files changed, 45 insertions(+), 99 deletions(-) diff --git a/4chan_x.js b/4chan_x.js index dcf9e0b16..bd07b76d3 100644 --- a/4chan_x.js +++ b/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; - imgExpand.foo(); - _ref2 = $$('img[md5] + img'); - _results = []; - for (_i = 0, _len = _ref2.length; _i < _len; _i++) { - img = _ref2[_i]; - _results.push(imgExpand.resize(img)); + var klass; + switch (this.value) { + case 'full': + klass = ''; + break; + case 'fit width': + 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 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); - } - } + return a.appendChild(img); }, 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: " " @@ -2253,8 +2214,10 @@ break; } } - $.bind($('select', controls), 'change', $.cb.value); - $.bind($('select', controls), 'change', imgExpand.cb.typeChange); + select = $('select', controls); + 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;\ }\ diff --git a/script.coffee b/script.coffee index a78075abd..e84ab5628 100644 --- a/script.coffee +++ b/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() - for img in $$ 'img[md5] + img' - imgExpand.resize img + switch @value + when 'full' + 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 - $.bind $('select', controls), 'change', imgExpand.cb.typeChange + select = $ 'select', controls + 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; } From 07c47775b3f58c27676d314741ca6c57db66d45d Mon Sep 17 00:00:00 2001 From: James Campos Date: Tue, 17 May 2011 01:56:13 -0700 Subject: [PATCH 2/5] works --- 4chan_x.js | 8 +++----- script.coffee | 7 +++---- 2 files changed, 6 insertions(+), 9 deletions(-) diff --git a/4chan_x.js b/4chan_x.js index bd07b76d3..7e5c70377 100644 --- a/4chan_x.js +++ b/4chan_x.js @@ -2121,7 +2121,8 @@ imgExpand = { init: function() { g.callbacks.push(imgExpand.cb.node); - return imgExpand.dialog(); + imgExpand.dialog(); + return $.addStyle("body.fitheight img[md5] + img { max-height: " + d.body.clientHeight + "px }"); }, cb: { node: function(root) { @@ -2416,10 +2417,7 @@ }\ 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%;\ + width: -moz-calc(100%); /* hack so only firefox sees this */\ }\ \ iframe {\ diff --git a/script.coffee b/script.coffee index e84ab5628..6f161cbd7 100644 --- a/script.coffee +++ b/script.coffee @@ -1637,6 +1637,8 @@ imgExpand = init: -> g.callbacks.push imgExpand.cb.node imgExpand.dialog() + #FIXME add a resize listener + $.addStyle "body.fitheight img[md5] + img { max-height: #{d.body.clientHeight}px }" cb: node: (root) -> @@ -1887,10 +1889,7 @@ main = } 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%; + width: -moz-calc(100%); /* hack so only firefox sees this */ } iframe { From d50b7034b8b802f8ff135a93fdffefe57c12d590 Mon Sep 17 00:00:00 2001 From: James Campos Date: Tue, 17 May 2011 01:59:41 -0700 Subject: [PATCH 3/5] fit height --- 4chan_x.js | 5 ++++- script.coffee | 4 +++- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/4chan_x.js b/4chan_x.js index 7e5c70377..f732486f6 100644 --- a/4chan_x.js +++ b/4chan_x.js @@ -2172,6 +2172,9 @@ case 'fit width': klass = 'fitwidth'; break; + case 'fit height': + klass = 'fitheight'; + break; case 'fit screen': klass = 'fitwidth fitheight'; } @@ -2204,7 +2207,7 @@ var controls, delform, imageType, option, select, _i, _len, _ref2; controls = $.el('div', { id: 'imgControls', - innerHTML: " " + innerHTML: " " }); imageType = $.getValue('imageType', 'full'); _ref2 = $$('option', controls); diff --git a/script.coffee b/script.coffee index 6f161cbd7..fb9930f76 100644 --- a/script.coffee +++ b/script.coffee @@ -1667,6 +1667,8 @@ imgExpand = klass = '' when 'fit width' klass = 'fitwidth' + when 'fit height' + klass = 'fitheight' when 'fit screen' klass = 'fitwidth fitheight' d.body.className = klass @@ -1693,7 +1695,7 @@ imgExpand = controls = $.el 'div', id: 'imgControls' innerHTML: - " + " " imageType = $.getValue 'imageType', 'full' for option in $$ 'option', controls From 03e37241ab3dba5bc97db72637fc94ead42a722c Mon Sep 17 00:00:00 2001 From: James Campos Date: Tue, 17 May 2011 02:14:28 -0700 Subject: [PATCH 4/5] resize listener --- 4chan_x.js | 11 ++++++++++- script.coffee | 9 +++++++-- 2 files changed, 17 insertions(+), 3 deletions(-) diff --git a/4chan_x.js b/4chan_x.js index f732486f6..a2a3f9d83 100644 --- a/4chan_x.js +++ b/4chan_x.js @@ -2122,7 +2122,8 @@ init: function() { g.callbacks.push(imgExpand.cb.node); imgExpand.dialog(); - return $.addStyle("body.fitheight img[md5] + img { max-height: " + d.body.clientHeight + "px }"); + $.bind(window, 'resize', imgExpand.resize); + return imgExpand.resize(); }, cb: { node: function(root) { @@ -2225,6 +2226,14 @@ $.bind($('input', controls), 'click', imgExpand.cb.all); delform = $('form[name=delform]'); return $.prepend(delform, controls); + }, + resize: function(e) { + var style; + if (style = $('style[media=chan]', d.head)) { + $.rm(style); + } + style = $.addStyle("body.fitheight img[md5] + img { max-height: " + d.body.clientHeight + "px }"); + return style.media = 'chan'; } }; NAMESPACE = 'AEOS.4chan_x.'; diff --git a/script.coffee b/script.coffee index fb9930f76..f95a1f6f2 100644 --- a/script.coffee +++ b/script.coffee @@ -1637,8 +1637,8 @@ imgExpand = init: -> g.callbacks.push imgExpand.cb.node imgExpand.dialog() - #FIXME add a resize listener - $.addStyle "body.fitheight img[md5] + img { max-height: #{d.body.clientHeight}px }" + $.bind window, 'resize', imgExpand.resize + imgExpand.resize() cb: node: (root) -> @@ -1711,6 +1711,11 @@ imgExpand = delform = $ 'form[name=delform]' $.prepend delform, controls + resize: (e) -> + $.rm style if style = $ 'style[media=chan]', d.head + style = $.addStyle "body.fitheight img[md5] + img { max-height: #{d.body.clientHeight}px }" + style.media = 'chan' + #main NAMESPACE = 'AEOS.4chan_x.' g = From cece8a730f0103c3881da29460e3e04f720a5660 Mon Sep 17 00:00:00 2001 From: James Campos Date: Wed, 18 May 2011 21:36:49 -0700 Subject: [PATCH 5/5] don't fuck with op --- 4chan_x.js | 2 +- script.coffee | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/4chan_x.js b/4chan_x.js index a2a3f9d83..09aaf0ef4 100644 --- a/4chan_x.js +++ b/4chan_x.js @@ -2427,7 +2427,7 @@ img[md5] + img {\ float: left;\ }\ - body.fitwidth img[md5] + img {\ + body.fitwidth table img[md5] + img {\ max-width: 100%;\ width: -moz-calc(100%); /* hack so only firefox sees this */\ }\ diff --git a/script.coffee b/script.coffee index f95a1f6f2..633a696f2 100644 --- a/script.coffee +++ b/script.coffee @@ -1894,7 +1894,7 @@ main = img[md5] + img { float: left; } - body.fitwidth img[md5] + img { + body.fitwidth table img[md5] + img { max-width: 100%; width: -moz-calc(100%); /* hack so only firefox sees this */ }