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 = {
init: function() {
g.callbacks.push(imgExpand.cb.node);
return imgExpand.dialog();
imgExpand.dialog();
$.bind(window, 'resize', imgExpand.resize);
return imgExpand.resize();
},
cb: {
node: function(root) {
@ -2153,7 +2155,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++) {
@ -2171,21 +2172,26 @@
}
},
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 height':
klass = 'fitheight';
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 {
@ -2203,53 +2209,13 @@
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: "<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');
_ref2 = $$('option', controls);
@ -2260,11 +2226,21 @@
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);
},
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.';
@ -2458,6 +2434,11 @@
img[md5] + img {\
float: left;\
}\
body.fitwidth table img[md5] + img {\
max-width: 100%;\
width: -moz-calc(100%); /* hack so only firefox sees this */\
}\
\
iframe {\
display: none;\
}\

73
script.coffee
View File

@ -1641,6 +1641,8 @@ imgExpand =
init: ->
g.callbacks.push imgExpand.cb.node
imgExpand.dialog()
$.bind window, 'resize', imgExpand.resize
imgExpand.resize()
cb:
node: (root) ->
@ -1655,7 +1657,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
@ -1665,13 +1666,19 @@ 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 height'
klass = 'fitheight'
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
@ -1688,62 +1695,31 @@ 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'
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>"
imageType = $.getValue 'imageType', 'full'
for option in $$ 'option', controls
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]'
$.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 =
@ -1922,6 +1898,11 @@ main =
img[md5] + img {
float: left;
}
body.fitwidth table img[md5] + img {
max-width: 100%;
width: -moz-calc(100%); /* hack so only firefox sees this */
}
iframe {
display: none;
}