imageExpansion
This commit is contained in:
James Campos
parent
282c3ff9ca
commit
a5c49f95be
232
4chan_x.js
232
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: "<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>"
|
||||
});
|
||||
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;
|
||||
|
||||
175
script.coffee
175
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:
|
||||
"<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>"
|
||||
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 <a> 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
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user