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

Merge branch 'img'

Browse Source
This commit is contained in:
James Campos 2011-05-18 21:36:59 -07:00
commit 24068dbe09
2 changed files with 64 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
4chan_x.js
View File

@ -2128,7 +2128,9 @@
imgExpand = { imgExpand = {
init: function() { init: function() {
g.callbacks.push(imgExpand.cb.node); g.callbacks.push(imgExpand.cb.node);
return imgExpand.dialog(); imgExpand.dialog();
$.bind(window, 'resize', imgExpand.resize);
return imgExpand.resize();
}, },
cb: { cb: {
node: function(root) { node: function(root) {
@ -2153,7 +2155,6 @@
var 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 = this.checked; imgExpand.on = this.checked;
imgExpand.foo();
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++) {
@ -2171,21 +2172,26 @@
} }
}, },
typeChange: function(e) { typeChange: function(e) {
var img, _i, _len, _ref2, _results; var klass;
imgExpand.foo(); switch (this.value) {
_ref2 = $$('img[md5] + img'); case 'full':
_results = []; klass = '';
for (_i = 0, _len = _ref2.length; _i < _len; _i++) { break;
img = _ref2[_i]; case 'fit width':
_results.push(imgExpand.resize(img)); klass = 'fitwidth';
break;
case 'fit height':
klass = 'fitheight';
break;
case 'fit screen':
klass = 'fitwidth fitheight';
} }
return _results; return d.body.className = klass;
} }
}, },
toggle: function(a) { toggle: function(a) {
var thumb; var thumb;
thumb = a.firstChild; thumb = a.firstChild;
imgExpand.foo();
if (thumb.style.display) { if (thumb.style.display) {
return imgExpand.contract(thumb); return imgExpand.contract(thumb);
} else { } else {
@ -2203,53 +2209,13 @@
img = $.el('img', { img = $.el('img', {
src: a.href src: a.href
}); });
a.appendChild(img); return 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);
}
}
}, },
dialog: function() { dialog: function() {
var controls, delform, imageType, option, _i, _len, _ref2; var controls, delform, imageType, option, select, _i, _len, _ref2;
controls = $.el('div', { controls = $.el('div', {
id: 'imgControls', 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>" innerHTML: "<select id=imageType name=imageType><option>full</option><option>fit width</option><option>fit height</option><option>fit screen</option></select> <label>Expand Images<input type=checkbox id=imageExpand></label>"
}); });
imageType = $.getValue('imageType', 'full'); imageType = $.getValue('imageType', 'full');
_ref2 = $$('option', controls); _ref2 = $$('option', controls);
@ -2260,11 +2226,21 @@
break; break;
} }
} }
$.bind($('select', controls), 'change', $.cb.value); select = $('select', controls);
$.bind($('select', controls), 'change', imgExpand.cb.typeChange); imgExpand.cb.typeChange.call(select);
$.bind(select, 'change', $.cb.value);
$.bind(select, 'change', imgExpand.cb.typeChange);
$.bind($('input', controls), 'click', imgExpand.cb.all); $.bind($('input', controls), 'click', imgExpand.cb.all);
delform = $('form[name=delform]'); delform = $('form[name=delform]');
return $.prepend(delform, controls); 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.'; NAMESPACE = 'AEOS.4chan_x.';
@ -2458,6 +2434,11 @@
img[md5] + img {\ img[md5] + img {\
float: left;\ float: left;\
}\ }\
body.fitwidth table img[md5] + img {\
max-width: 100%;\
width: -moz-calc(100%); /* hack so only firefox sees this */\
}\
\
iframe {\ iframe {\
display: none;\ display: none;\
}\ }\

73
script.coffee
View File

@ -1641,6 +1641,8 @@ imgExpand =
init: -> init: ->
g.callbacks.push imgExpand.cb.node g.callbacks.push imgExpand.cb.node
imgExpand.dialog() imgExpand.dialog()
$.bind window, 'resize', imgExpand.resize
imgExpand.resize()
cb: cb:
node: (root) -> node: (root) ->
@ -1655,7 +1657,6 @@ imgExpand =
all: (e) -> all: (e) ->
thumbs = $$ 'img[md5]' thumbs = $$ 'img[md5]'
imgExpand.on = @checked imgExpand.on = @checked
imgExpand.foo()
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
@ -1665,13 +1666,19 @@ imgExpand =
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) ->
imgExpand.foo() switch @value
for img in $$ 'img[md5] + img' when 'full'
imgExpand.resize img klass = ''
when 'fit width'
klass = 'fitwidth'
when 'fit height'
klass = 'fitheight'
when 'fit screen'
klass = 'fitwidth fitheight'
d.body.className = klass
toggle: (a) -> toggle: (a) ->
thumb = a.firstChild thumb = a.firstChild
imgExpand.foo()
if thumb.style.display if thumb.style.display
imgExpand.contract thumb imgExpand.contract thumb
else else
@ -1688,62 +1695,31 @@ imgExpand =
src: a.href src: a.href
a.appendChild img 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: -> dialog: ->
controls = $.el 'div', controls = $.el 'div',
id: 'imgControls' id: 'imgControls'
innerHTML: innerHTML:
"<select id=imageType name=imageType><option>full</option><option>fit width</option><option>fit screen</option></select> "<select id=imageType name=imageType><option>full</option><option>fit width</option><option>fit height</option><option>fit screen</option></select>
<label>Expand Images<input type=checkbox id=imageExpand></label>" <label>Expand Images<input type=checkbox id=imageExpand></label>"
imageType = $.getValue 'imageType', 'full' imageType = $.getValue 'imageType', 'full'
for option in $$ 'option', controls for option in $$ 'option', controls
if option.textContent is imageType if option.textContent is imageType
option.selected = true option.selected = true
break break
$.bind $('select', controls), 'change', $.cb.value select = $ 'select', controls
$.bind $('select', controls), 'change', imgExpand.cb.typeChange imgExpand.cb.typeChange.call select
$.bind select, 'change', $.cb.value
$.bind select, 'change', imgExpand.cb.typeChange
$.bind $('input', controls), 'click', imgExpand.cb.all $.bind $('input', controls), 'click', imgExpand.cb.all
delform = $ 'form[name=delform]' delform = $ 'form[name=delform]'
$.prepend delform, controls $.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 #main
NAMESPACE = 'AEOS.4chan_x.' NAMESPACE = 'AEOS.4chan_x.'
g = g =
@ -1922,6 +1898,11 @@ main =
img[md5] + img { img[md5] + img {
float: left; float: left;
} }
body.fitwidth table img[md5] + img {
max-width: 100%;
width: -moz-calc(100%); /* hack so only firefox sees this */
}
iframe { iframe {
display: none; display: none;
} }