Goyslop/4chan-x
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

expand img w/o horiz bar; closes #26

Browse Source
This commit is contained in:
James Campos 2011-04-25 21:48:46 -07:00
parent a86d5aad5f
commit b2fb7e16a1
2 changed files with 53 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
4chan_x.js
View File

@ -1884,17 +1884,15 @@
return imgExpand.toggle(e.target); return imgExpand.toggle(e.target);
}, },
all: function(e) { all: function(e) {
var ch, cw, imageType, thumb, thumbs, _i, _j, _len, _len2, _results, _results2; var thumb, thumbs, _i, _j, _len, _len2, _results, _results2;
thumbs = $$('img[md5]'); thumbs = $$('img[md5]');
imgExpand.on = e.target.checked; imgExpand.on = e.target.checked;
cw = d.body.clientWidth; imgExpand.foo();
ch = d.body.clientHeight;
imageType = $("#imageType").value;
if (imgExpand.on) { if (imgExpand.on) {
_results = []; _results = [];
for (_i = 0, _len = thumbs.length; _i < _len; _i++) { for (_i = 0, _len = thumbs.length; _i < _len; _i++) {
thumb = thumbs[_i]; thumb = thumbs[_i];
_results.push(!thumb.style.display ? imgExpand.expand(thumb, cw, ch, imageType) : void 0); _results.push(!thumb.style.display ? imgExpand.expand(thumb) : void 0);
} }
return _results; return _results;
} else { } else {
@ -1907,36 +1905,40 @@
} }
}, },
typeChange: function(e) { typeChange: function(e) {
var ch, cw, imageType, img, _i, _len, _ref2, _results; var img, _i, _len, _ref2, _results;
cw = d.body.clientWidth; imgExpand.foo();
ch = d.body.clientHeight;
imageType = e.target.value;
_ref2 = $$('img[md5] + img'); _ref2 = $$('img[md5] + img');
_results = []; _results = [];
for (_i = 0, _len = _ref2.length; _i < _len; _i++) { for (_i = 0, _len = _ref2.length; _i < _len; _i++) {
img = _ref2[_i]; img = _ref2[_i];
_results.push(imgExpand.resize(cw, ch, imageType, img)); _results.push(imgExpand.resize(img));
} }
return _results; return _results;
} }
}, },
foo: function() {
var bodyWidth, formLeft;
formLeft = $('form[name=delform]').getBoundingClientRect().left;
bodyWidth = d.body.clientWidth;
imgExpand.cw = bodyWidth - formLeft;
imgExpand.ch = d.body.clientHeight;
return imgExpand.type = $('#imageType').value;
},
toggle: function(img) { toggle: function(img) {
var ch, cw, imageType, thumb; var thumb;
thumb = img.parentNode.firstChild; thumb = img.parentNode.firstChild;
cw = d.body.clientWidth; imgExpand.foo();
ch = d.body.clientHeight;
imageType = $("#imageType").value;
if (thumb.style.display) { if (thumb.style.display) {
return imgExpand.contract(thumb); return imgExpand.contract(thumb);
} else { } else {
return imgExpand.expand(thumb, cw, ch, imageType); return imgExpand.expand(thumb);
} }
}, },
contract: function(thumb) { contract: function(thumb) {
$.show(thumb); $.show(thumb);
return $.remove(thumb.nextSibling); return $.remove(thumb.nextSibling);
}, },
expand: function(thumb, cw, ch, imageType) { expand: function(thumb) {
var a, img; var a, img;
$.hide(thumb); $.hide(thumb);
a = thumb.parentNode; a = thumb.parentNode;
@ -1944,28 +1946,27 @@
src: a.href src: a.href
}); });
a.appendChild(img); a.appendChild(img);
return imgExpand.resize(cw, ch, imageType, img); return imgExpand.resize(img);
}, },
resize: function(cw, ch, imageType, img) { resize: function(img) {
var ih, iw, ratio, _, _ref2; var ch, cw, ih, iw, ratio, type, _, _ref2;
cw = imgExpand.cw, ch = imgExpand.ch, type = imgExpand.type;
_ref2 = $.x("preceding::span[@class][1]/text()[2]", img).textContent.match(/(\d+)x(\d+)/), _ = _ref2[0], iw = _ref2[1], ih = _ref2[2]; _ref2 = $.x("preceding::span[@class][1]/text()[2]", img).textContent.match(/(\d+)x(\d+)/), _ = _ref2[0], iw = _ref2[1], ih = _ref2[2];
iw = Number(iw); iw = Number(iw);
ih = Number(ih); ih = Number(ih);
switch (imageType) { cw = cw - img.getBoundingClientRect().left;
switch (type) {
case 'full': case 'full':
return img.removeAttribute('style'); return img.removeAttribute('style');
case 'fit width': case 'fit width':
ratio = cw / iw; if (iw > cw) {
if (ratio < 1) { return img.style.width = cw;
img.style.width = Math.floor(ratio * iw);
return img.style.margin = '0px';
} }
break; break;
case 'fit screen': case 'fit screen':
ratio = Math.min(cw / iw, ch / ih); ratio = Math.min(cw / iw, ch / ih);
if (ratio < 1) { if (ratio < 1) {
img.style.width = Math.floor(ratio * iw); return img.style.width = Math.floor(ratio * iw);
return img.style.margin = '0px';
} }
} }
}, },
@ -2155,6 +2156,8 @@
form[name=delform] a img {\ form[name=delform] a img {\
border: 0px;\ border: 0px;\
float: left;\ float: left;\
}\
form[name=delform] a img:first-child {\
margin: 0px 20px;\ margin: 0px 20px;\
}\ }\
iframe {\ iframe {\

46
script.coffee
View File

@ -1434,68 +1434,68 @@ imgExpand =
all: (e) -> all: (e) ->
thumbs = $$ 'img[md5]' thumbs = $$ 'img[md5]'
imgExpand.on = e.target.checked imgExpand.on = e.target.checked
cw = d.body.clientWidth imgExpand.foo()
ch = d.body.clientHeight
imageType = $("#imageType").value
if imgExpand.on #expand if imgExpand.on #expand
for thumb in thumbs for thumb in thumbs
unless thumb.style.display #thumbnail hidden, image already expanded unless thumb.style.display #thumbnail hidden, image already expanded
imgExpand.expand thumb, cw, ch, imageType imgExpand.expand thumb
else #contract else #contract
for thumb in thumbs for thumb in thumbs
if thumb.style.display #thumbnail hidden - unhide it if thumb.style.display #thumbnail hidden - unhide it
imgExpand.contract thumb imgExpand.contract thumb
typeChange: (e) -> typeChange: (e) ->
cw = d.body.clientWidth imgExpand.foo()
ch = d.body.clientHeight
imageType = e.target.value
for img in $$ 'img[md5] + img' for img in $$ 'img[md5] + img'
imgExpand.resize cw, ch, imageType, img imgExpand.resize img
foo: ->
formLeft = $('form[name=delform]').getBoundingClientRect().left
bodyWidth = d.body.clientWidth
imgExpand.cw = bodyWidth - formLeft
imgExpand.ch = d.body.clientHeight
imgExpand.type = $('#imageType').value
toggle: (img) -> toggle: (img) ->
thumb = img.parentNode.firstChild thumb = img.parentNode.firstChild
cw = d.body.clientWidth imgExpand.foo()
ch = d.body.clientHeight
imageType = $("#imageType").value
if thumb.style.display if thumb.style.display
imgExpand.contract thumb imgExpand.contract thumb
else else
imgExpand.expand thumb, cw, ch, imageType imgExpand.expand thumb
contract: (thumb) -> contract: (thumb) ->
$.show thumb $.show thumb
$.remove thumb.nextSibling $.remove thumb.nextSibling
expand: (thumb, cw, ch, imageType) -> expand: (thumb) ->
$.hide thumb $.hide thumb
a = thumb.parentNode a = thumb.parentNode
img = $.el 'img', img = $.el 'img',
src: a.href src: a.href
a.appendChild img a.appendChild img
imgExpand.resize cw, ch, imageType, img imgExpand.resize img
resize: (cw, ch, imageType, img) -> resize: (img) ->
{cw, ch, type} = imgExpand
[_, iw, ih] = [_, iw, ih] =
$.x("preceding::span[@class][1]/text()[2]", img) $.x("preceding::span[@class][1]/text()[2]", img)
.textContent.match(/(\d+)x(\d+)/) .textContent.match(/(\d+)x(\d+)/)
iw = Number iw iw = Number iw
ih = Number ih ih = Number ih
switch imageType cw = cw - img.getBoundingClientRect().left
switch type
when 'full' when 'full'
img.removeAttribute 'style' img.removeAttribute 'style'
when 'fit width' when 'fit width'
ratio = cw/iw if iw > cw
if ratio < 1 img.style.width = cw
# y'know, this width is constant between resizes
img.style.width = Math.floor ratio * iw
img.style.margin = '0px'
when 'fit screen' when 'fit screen'
ratio = Math.min cw/iw, ch/ih ratio = Math.min cw/iw, ch/ih
if ratio < 1 if ratio < 1
img.style.width = Math.floor ratio * iw img.style.width = Math.floor ratio * iw
img.style.margin = '0px'
dialog: -> dialog: ->
controls = $.el 'div', controls = $.el 'div',
@ -1673,6 +1673,8 @@ main =
form[name=delform] a img { form[name=delform] a img {
border: 0px; border: 0px;
float: left; float: left;
}
form[name=delform] a img:first-child {
margin: 0px 20px; margin: 0px 20px;
} }
iframe { iframe {