There are 4 previous versions of this script.
// ==UserScript==
// @name whirlpoolImages
// @namespace http://plsek.id.au/GreaseMonkey
// @description replace links to images with the image itself
// @version 2.9.9
// @include http://forums.whirlpool.net.au/forum-replies*
// @include http://whirlpool.net.au/forum-replies*
// ==/UserScript==
function $i(id) { // getById
return document.getElementById(id);
}
function $x(p, c) { // xpath unordered nodes
var i, r = [], x = document.evaluate(p, c || document, null, XPathResult.UNORDERED_NODE_ITERATOR_TYPE, null);
while(i=x.iterateNext()) r.push(i);
return r;
}
function $xo(p, c) { // xpath ordered nodes
var i, r = [], x = document.evaluate(p, c || document, null, XPathResult.ORDERED_NODE_ITERATOR_TYPE, null);
while(i=x.iterateNext()) r.push(i);
return r;
}
function $xf(p, c) { // xpath single first node
return document.evaluate(p, c || document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
}
function $xa(p, c) { // xpath single any node
return document.evaluate(p, c || document, null, XPathResult.ANY_UNORDERED_NODE_TYPE, null).singleNodeValue;
}
function $t(s) { // text node
return document.createTextNode(s);
}
function $e(type, attributes) { // create Element
var node = document.createElement(type);
for (var attr in attributes) if (attributes.hasOwnProperty(attr)){
node.setAttribute(attr, attributes[attr]);
}
return node;
}
function $ed(element) { // delete Element
element.parentNode.removeChild(element);
}
function $ea(newNode, node) { // insert element after
return node.parentNode.insertBefore(newNode, node.nextSibling);
}
function $eb(newNode, node) { // insert element before
return node.parentNode.insertBefore(newNode, node);
}
function $ef(newNode, par) { // make element first child of par
return par.insertBefore(newNode, par.firstChild);
}
function $el(newNode, par) { // make element last child of par
return par.appendChild(newNode);
}
var $ev= {
_registry: null,
Initialise: function() {
if (this._registry == null) {
this._registry = [];
$ev.Add(window, "_unload", this.CleanUp);
}
},
Add: function(obj, type, fn, useCapture) {
this.Initialise();
var realType=(type=="_unload"?"unload":type);
if (typeof obj == "string") obj = document.getElementById(obj);
if (obj == null || fn == null) return false;
if(obj.addEventListener) obj.addEventListener(realType, fn, useCapture);
this._registry.push({obj:obj, type:type, fn:fn, useCapture:useCapture});
return true;
},
CleanUp: function() {
for (var i = 0; i < $ev._registry.length; i++) {
with($ev._registry[i]) {
if(type=="unload") fn();
if(obj.removeEventListener) obj.removeEventListener(type,fn,useCapture);
}
}
$ev._registry = null;
}
};
// -- start common config --
function __config() {
var xx=$i('__back__');
var yy=$i('__config_back__');
xx.style.display=xx.style.display == 'block' ? 'none' : 'block';
yy.style.display=xx.style.display;
}
if(! $i('__config__') ) {
$el($e('DIV', {
'id' : '__back__',
'style' : 'position: fixed; top: 0; left: 0; z-index: 9998; width:100%; height:100%; background: black; opacity: 0.7; display:none;'
}),document.body);
$el($e('DIV', {
'id' : '__config_back__',
'style' : 'position: fixed; top: 0; left: 0; z-index: 9999; width:100%; height:100%;'+
'background: transparent;font-size:16px; display:none;'
}),document.body);
$el($e('DIV', {
'id' : '__config_header__',
'style' : 'width: 100%; text-align:center; font-size:2.6em; font-weight:bold;color: white;'
}),$i('__config_back__'));
$el($e('DIV', {
'id' : '__config__',
'style' : 'width: 100%; position:fixed; z-index:10000; background: transparent;top:3em;bottom:0;'
}), $i('__config_back__'));
$el($e('DIV', { 'style' : 'clear:both;' }), $i('__config__'));
$el($e('DIV', {
'style' : 'font-size: 0.6em; position:fixed; z-index:10000; top:5px; right: 5px; color:white: font-weight:bold; background:red;'+
'-moz-border-radius:8px; padding: 0 6px; cursor:pointer;',
'id' : '__config_close__'
}),$i('__config_header__'));
$el($t('Greasemonkey Scripts Setup'), $i('__config_header__'));
$el($t('X'), $i('__config_close__'));
$ev.Add($i('__config_close__'), 'click', __config, false);
}
function _config_addBlock(s) {
var r = $eb($e('DIV', {
'style' : 'width:22%; margin:0 0 10px 10px; padding: 10px 8px; border: inset 2px yellow;background:#8888dd;-moz-border-radius:9px;' +
'float:left;'
}),$i('__config__').lastChild);
$el($t(s), $el($e('H2', { 'style' : 'text-align:center; margin:0 0 0.4em;' }), r));
return r;
}
// -- end common config --
// -- start WP config common --
if(! $i('__GMWP__')) {
var tDL=$xa('//div[@id="footer"]/DL[@class="wikilist"]');
if(tDL) {
var tDT=$i('gm_config');
if(! tDT ) {
tDT=$el($e('DT', { 'id' : 'gm_config'} ),tDL);
$el($t('Greasemonkey'), tDT);
}
var tDD = $el($e('DD', { 'style': 'cursor: pointer;', id: '__GMWP__'}),tDL);
$el($t('Configuration'),tDD);
$ev.Add(tDD, "click", __config, false);
}
}
// -- end WP config common --
var WPimages={
injectGoogleVid: function() {
$x('//a[contains(@href, "http://video.google.com/videoplay?docid=")]').forEach(function(gv) {
var lnk=gv.href.replace(/videoplay\?docid=/, 'googleplayer.swf?docId=')+'&hl=en';
var span=$ea($e('SPAN'), gv);
span.innerHTML='<embed style="width:400px; height:326px;" '+
'type="application/x-shockwave-flash" '+
'src="'+lnk+'"></embed>';
});
},
injectYouTube: function() {
$x('//a[contains(@href, "youtube.com/watch?v=")]').forEach(function(yt) {
var lnk=yt.href.replace(/watch\?v=/i, 'v/').replace(/&eurl=.*$/i, '') +
'&hl=en'+
(ytHigh?'&ap=%2526fmt%3D18':'')+
'&enablefullscreen=true'+
'&color1='+ytColor1+
'&color2='+ytColor2+
'&border='+(ytBorder?'1':'0');
var span=$ea($e('SPAN'), yt);
span.innerHTML='<embed src="'+lnk+'" type="application/x-shockwave-flash" '+
'wmode="transparent" width="425" height="373"></embed>';
});
},
showPic: function(el) {
var xx=$i('__back__');
var yy=$i('__picture_back__');
xx.style.display='block';
yy.style.display='block';
var img=$el($e('IMG', { src:el.src, style:'margin:auto; display:block; vertical-align:middle;', id:'__picture__' }), yy);
if(img.naturalHeight < yy.clientHeight) img.style.marginTop=((yy.clientHeight-img.naturalHeight) / 2)+'px';
},
hidePic: function() {
var xx=$i('__back__');
var yy=$i('__picture_back__');
xx.style.display='none';
yy.style.display='none';
$ed($i('__picture__'));
},
go: function() {
$el($e('DIV', {
'id' : '__picture_back__',
'style' : 'position: fixed; top: 0; left: 0; z-index: 9999; width:100%; height:100%;overflow:auto;'+
'background: transparent;font-size:16px; display:none;'
}),document.body);
var me=this;
$ev.Add($i('__picture_back__'), 'click', function() {
me.hidePic();
}, false);
this.ytHigh=GM_getValue("ytHigh", "true") == "true";
this.ytBorder=GM_getValue("ytBorder", "true") == "true";
this.ytColor1=GM_getValue("ytColor1", "0xD4CAC4");
this.ytColor2=GM_getValue("ytColor2", "0x78644F");
this.imagePadding=parseInt(GM_getValue("imagePadding", "12"));
this.maxHeight=parseInt(GM_getValue("maximumHeight", "300"));
this.youTube=(GM_getValue("embedYoutube", "true"))=="true";
this.lightbox=(GM_getValue("lightbox", "true"))=="true";
this.googleVid=(GM_getValue("embedGoogleVid", "true"))=="true";
this.setConfig();
this.imageTable={};
this.imgsLeft = -1;
this.imgNum = 0;
$x(".//TD[@class='bodytext']", document.body).forEach(function(reply) {
$x('.//A', reply).forEach(function(lnk) { me.addImageToImageAnchor(lnk, reply, me.imgNum++); });
});
if(this.imgsLeft == 0) this.setScrollPos();
if(this.youTube) this.injectYouTube();
if(this.googleVid) this.injectGoogleVid();
this.imgsLeft = -1-this.imgsLeft; // some images may have already loaded by now
// this.hashcount=20;
// if(document.location.hash.length > 1) this.setPos();
},
setPos: function() {
var me=this;
if(this.imgsLeft && this.hashcount--) window.setTimeout(function() { me.setPos(); }, 300);
else {
var hash=document.location.hash
document.location.hash='#top';
window.setTimeout(function() { document.location.hash=hash; },0);
}
},
makeThumb: function(inX, inY, maxX, maxY) {
var retVal={changed:false, widthChanged:false, heightChanged:false, width:inX, height:inY};
if(inX>maxX || inY>maxY) {
retVal.changed=true;
var xRatio=1.0*inX/(1.0 * maxX);
var yRatio=1.0*inY/(1.0 * maxY);
if(yRatio>xRatio) {
retVal.height=maxY;
retVal.heightChanged=true;
retVal.width=Math.ceil((1.0*inX)/yRatio);
}
else {
retVal.width=maxX;
retVal.widthChanged=true;
retVal.height=Math.ceil((1.0*inY)/xRatio);
}
}
return retVal;
},
addImageToImageAnchor: function(Anchor, Container, num) {
var me=this;
var extensions=".jpeg.jpg.gif.png.bmp";
var href=Anchor.href.toLowerCase();
var dot=href.lastIndexOf(".");
if(dot >= 0 && extensions.indexOf(href.substr(dot)) >= 0) {
var imgObj=$e('IMG');
$ev.Add(imgObj,"load", function() {
var div=$e("DIV");
var img=$el($e("IMG", { 'style' : 'border:none; padding:0; margin:0;' }), div);
var width;
if(document.defaultView && document.defaultView.getComputedStyle)
width=parseInt(document.defaultView.getComputedStyle(Container, '').getPropertyValue("width"));
else
width=Container.clientWidth-24;
width=parseInt(width);
width-=(me.imagePadding*2);
var dimension=me.makeThumb(imgObj.width, imgObj.height, width, me.maxHeight);
if(dimension.changed) {
img.style.cursor="move";
img.id=imgObj.alt;
if(dimension.widthChanged) {
img.style.width=dimension.width+"px";
me.imageTable[img.id]={width:imgObj.width+"px"};
}
if(dimension.heightChanged) {
img.style.height=dimension.height+"px";
me.imageTable[img.id]={height:imgObj.height+"px"};
}
if(dimension.widthChanged || dimension.heightChanged) {
$ev.Add(img, "click", function(e) {
if(me.lightbox) {
me.showPic(img);
}
else {
if(me.imageTable[img.id].width) {
var cWidth=img.style.width;
img.style.width=me.imageTable[img.id].width;
me.imageTable[img.id].width=cWidth;
}
else if(me.imageTable[img.id].height) {
var cHeight=img.style.height;
img.style.height=me.imageTable[img.id].height;
me.imageTable[img.id].height=cHeight;
}
}
}, false);
}
div.style.paddingLeft=me.imagePadding+"px";
div.style.paddingRight=me.imagePadding+"px";
}
$eb(div, Anchor);
img.src=imgObj.src;
--me.imgsLeft;
}, false);
var id="addImage"+num;
imgObj.alt=id;
imgObj.src=Anchor.href;
}
},
setConfig: function() {
var tCfg=_config_addBlock('Whirlpool Images');
$el($e("BR"), tCfg);
$el($e("BR"), tCfg);
$el($t("Image padding "), tCfg);
$el($e('INPUT', { 'type' : 'text', 'id' : 'wimage_padding', 'value' : this.imagePadding+'' }), tCfg);
$el($e("BR"), tCfg);
$el($t("Maximum height "), tCfg);
$el($e('INPUT', { 'type' : 'text', 'id' : 'wimage_height', 'value' : this.maxHeight+'' }), tCfg);
$el($e("BR"), tCfg);
$el($e("BR"), tCfg);
$el($e("INPUT", { 'type' : 'checkbox', 'id' : 'wimage_method' }), tCfg);
if(this.lightbox) $i('wimage_method').checked='checked';
$el($t("Lightbox style images"), tCfg);
$el($e("BR"), tCfg);
$el($e("INPUT", { 'type' : 'checkbox', 'id' : 'wimage_youtube' }), tCfg);
if(this.youTube) $i('wimage_youtube').checked='checked';
$el($t("Inline youTube"), tCfg);
$el($e("BR"), tCfg);
$el($e("INPUT", { 'type' : 'checkbox', 'id' : 'wimage_ythigh' }), tCfg);
if(this.ytHigh) $i('wimage_ythigh').checked='checked';
$el($t("High Quality"), tCfg);
$el($e("BR"), tCfg);
$el($e("INPUT", { 'type' : 'checkbox', 'id' : 'wimage_ytborder' }), tCfg);
if(this.ytBorder) $i('wimage_ytborder').checked='checked';
$el($t("Show Border"), tCfg);
$el($e("BR"), tCfg);
$el($t("Color 1 "), tCfg);
$el($e('INPUT', { 'type' : 'text', 'id' : 'wimage_ytcolor1', 'value' : this.ytColor1+'' }), tCfg);
$el($e("BR"), tCfg);
$el($t("Color 2 "), tCfg);
$el($e('INPUT', { 'type' : 'text', 'id' : 'wimage_ytcolor2', 'value' : this.ytColor2+'' }), tCfg);
$el($e("BR"), tCfg);
$el($e("BR"), tCfg);
$el($e("INPUT", { 'type' : 'checkbox', 'id' : 'wimage_googlevid' }), tCfg);
if(this.googleVid) $i('wimage_googlevid').checked='checked';
$el($t("Inline Google Video"), tCfg);
$ev.Add($i('wimage_padding'), 'blur',
function() { GM_setValue("imagePadding", parseInt($i("wimage_padding").value).toString()); }, false);
$ev.Add($i('wimage_height'), 'blur',
function() { GM_setValue("maximumHeight", parseInt($i("wimage_height").value).toString()); }, false);
$ev.Add($i('wimage_youtube'), 'click',
function() { GM_setValue("embedYoutube", ($i("wimage_youtube").checked).toString()); }, false);
$ev.Add($i('wimage_method'), 'click',
function() { GM_setValue("lightbox", ($i("wimage_method").checked).toString()); }, false);
$ev.Add($i('wimage_googlevid'), 'click',
function() { GM_setValue("embedGoogleVid", ($i("wimage_googlevid").checked).toString()); }, false);
$ev.Add($i('wimage_ythigh'), 'click',
function() { GM_setValue("ytHigh", ($i("wimage_ythigh").checked).toString()); }, false);
$ev.Add($i('wimage_ytborder'), 'click',
function() { GM_setValue("ytBorder", ($i("wimage_ytborder").checked).toString()); }, false);
$ev.Add($i('wimage_ytcolor1'), 'blur',
function() { GM_setValue("ytColor1", ($i("wimage_ytcolor1").value).toString()); }, false);
$ev.Add($i('wimage_ytcolor2'), 'blur',
function() { GM_setValue("ytColor2", ($i("wimage_ytcolor2").value).toString()); }, false);
}
}
if($i('replies')) WPimages.go();
