Spoilerize all images and videos in posts (except TO) on mturk-related forums: MTurkGrind, MTurkForum, and TurkerNation.
// ==UserScript==
// @name ZSMTurker's MTG Forum Image Video Spoilerizer (with labels mod)
// @description Spoilerize all images and videos in posts (except TO) on mturk-related forums: MTurkGrind, MTurkForum, and TurkerNation.
// @version 1.1.1c
// @author ZSMTurker + clickhappier
// @namespace mturkgrind
// @require http://code.jquery.com/jquery-latest.min.js
// @match http://www.mturkgrind.com/*
// @match http://mturkgrind.com/*
// @match http://www.mturkforum.com/*
// @match http://mturkforum.com/*
// @match http://www.turkernation.com/*
// @match http://turkernation.com/*
// @grant GM_log
// ==/UserScript==
// v0.1c: modified by clickhappier to change generic 'Spoiler' designations to specify 'Image Spoiler' or 'Video Spoiler', and added mturkforum urls
// v1.0c: updated (with help from Lowlife) to handle both Xenforo and vBulletin forums; plus, improved handling of images inside links.
$( document ).ready( function() {
// xenforo version
var postDivsXF = $(document).find('div[class*="messageContent"]');
var imageArrayXF = $(postDivsXF).find('img:not([title])').not('img[src*="turkopticon"]').not('img[src*="data.istrack.in"]').not('img[onerror*="avatars"]');
var videoArrayXF = $(postDivsXF).find('iframe');
for (var i=0; i<imageArrayXF.length; i++)
{
if ( imageArrayXF.eq(i).parents('a').length ) // if the image has any parent elements that are 'a' links
{
var linkUrl = imageArrayXF.eq(i).closest('a').attr('href');
var linkContents = imageArrayXF.eq(i).closest('a').contents(); // http://stackoverflow.com/questions/170004/how-to-remove-only-the-parent-element-and-not-its-child-elements-in-javascript/170056#170056
imageArrayXF.eq(i).closest('a').replaceWith(linkContents); // ^ ctd
imageArrayXF.eq(i).before('<div style="margin: 5px 20px 20px;">' + '<div class="smallfont" style="margin-bottom: 2px;">' +'<a href="'+linkUrl+'"><b>Image Spoiler:</b></a>' +'<input type="button" onclick="if (this.parentNode.parentNode.getElementsByTagName(\'div\')[1].getElementsByTagName(\'div\')[0].style.display != \'\') { this.parentNode.parentNode.getElementsByTagName(\'div\')[1].getElementsByTagName(\'div\')[0].style.display = \'\';this.innerText = \'\'; this.value = \'Hide\'; } else { this.parentNode.parentNode.getElementsByTagName(\'div\')[1].getElementsByTagName(\'div\')[0].style.display = \'none\'; this.innerText = \'\'; this.value = \'Show\'; }" style="margin: 0px; padding: 0px; width: 45px; font-size: 10px;" value="Show"></div><div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;"><div style="display: none;"><br><img src="'+imageArrayXF.eq(i).attr('src')+'" border="0" alt="">');
}
else { imageArrayXF.eq(i).before('<div style="margin: 5px 20px 20px;">' + '<div class="smallfont" style="margin-bottom: 2px;">' +'<b>Image Spoiler:</b>' +'<input type="button" onclick="if (this.parentNode.parentNode.getElementsByTagName(\'div\')[1].getElementsByTagName(\'div\')[0].style.display != \'\') { this.parentNode.parentNode.getElementsByTagName(\'div\')[1].getElementsByTagName(\'div\')[0].style.display = \'\';this.innerText = \'\'; this.value = \'Hide\'; } else { this.parentNode.parentNode.getElementsByTagName(\'div\')[1].getElementsByTagName(\'div\')[0].style.display = \'none\'; this.innerText = \'\'; this.value = \'Show\'; }" style="margin: 0px; padding: 0px; width: 45px; font-size: 10px;" value="Show"></div><div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;"><div style="display: none;"><br><img src="'+imageArrayXF.eq(i).attr('src')+'" border="0" alt="">'); }
imageArrayXF.eq(i).after('<br></div></div></div>');
imageArrayXF.eq(i).remove();
}
for (var i=0; i<videoArrayXF.length; i++)
{
videoArrayXF.eq(i).before('<div style="margin: 5px 20px 20px;">' + '<div class="smallfont" style="margin-bottom: 2px;">' +'<b>Video Spoiler:</b>' +'<input type="button" onclick="if (this.parentNode.parentNode.getElementsByTagName(\'div\')[1].getElementsByTagName(\'div\')[0].style.display != \'\') { this.parentNode.parentNode.getElementsByTagName(\'div\')[1].getElementsByTagName(\'div\')[0].style.display = \'\';this.innerText = \'\'; this.value = \'Hide\'; } else { this.parentNode.parentNode.getElementsByTagName(\'div\')[1].getElementsByTagName(\'div\')[0].style.display = \'none\'; this.innerText = \'\'; this.value = \'Show\'; }" style="margin: 0px; padding: 0px; width: 45px; font-size: 10px;" value="Show"></div><div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;"><div style="display: none;"><br><iframe src='+videoArrayXF.eq(i).attr('src')+'>');
videoArrayXF.eq(i).insertAfter('<br></div></div></div>');
videoArrayXF.eq(i).remove();
}
// vbulletin version
var postDivsVB = $(document).find('div[id*="post_message"]');
var imageArrayVB = $(postDivsVB).find('img:not([title])').not('img[src*="turkopticon"]').not('img[src*="data.istrack.in"]');
var videoArrayVB = $(postDivsVB).find('iframe');
for (var i=0; i<imageArrayVB.length; i++)
{
if ( imageArrayVB.eq(i).parents('a').length ) // if the image has any parent elements that are 'a' links
{
var linkUrl = imageArrayVB.eq(i).closest('a').attr('href');
var linkContents = imageArrayVB.eq(i).closest('a').contents(); // http://stackoverflow.com/questions/170004/how-to-remove-only-the-parent-element-and-not-its-child-elements-in-javascript/170056#170056
imageArrayVB.eq(i).closest('a').replaceWith(linkContents); // ^ ctd
imageArrayVB.eq(i).before('<div style="margin: 5px 20px 20px;">' + '<div class="smallfont" style="margin-bottom: 2px;">' +'<a href="'+linkUrl+'"><b>Image Spoiler:</b></a>' +'<input type="button" onclick="if (this.parentNode.parentNode.getElementsByTagName(\'div\')[1].getElementsByTagName(\'div\')[0].style.display != \'\') { this.parentNode.parentNode.getElementsByTagName(\'div\')[1].getElementsByTagName(\'div\')[0].style.display = \'\';this.innerText = \'\'; this.value = \'Hide\'; } else { this.parentNode.parentNode.getElementsByTagName(\'div\')[1].getElementsByTagName(\'div\')[0].style.display = \'none\'; this.innerText = \'\'; this.value = \'Show\'; }" style="margin: 0px; padding: 0px; width: 45px; font-size: 10px;" value="Show"></div><div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;"><div style="display: none;"><br><img src="'+imageArrayVB.eq(i).attr('src')+'" border="0" alt="">');
}
else { imageArrayVB.eq(i).before('<div style="margin: 5px 20px 20px;">' + '<div class="smallfont" style="margin-bottom: 2px;">' +'<b>Image Spoiler:</b>' +'<input type="button" onclick="if (this.parentNode.parentNode.getElementsByTagName(\'div\')[1].getElementsByTagName(\'div\')[0].style.display != \'\') { this.parentNode.parentNode.getElementsByTagName(\'div\')[1].getElementsByTagName(\'div\')[0].style.display = \'\';this.innerText = \'\'; this.value = \'Hide\'; } else { this.parentNode.parentNode.getElementsByTagName(\'div\')[1].getElementsByTagName(\'div\')[0].style.display = \'none\'; this.innerText = \'\'; this.value = \'Show\'; }" style="margin: 0px; padding: 0px; width: 45px; font-size: 10px;" value="Show"></div><div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;"><div style="display: none;"><br><img src="'+imageArrayVB.eq(i).attr('src')+'" border="0" alt="">'); }
imageArrayVB.eq(i).after('<br></div></div></div>');
imageArrayVB.eq(i).remove();
}
for (var i=0; i<videoArrayVB.length; i++)
{
videoArrayVB.eq(i).before('<div style="margin: 5px 20px 20px;">' + '<div class="smallfont" style="margin-bottom: 2px;">' +'<b>Video Spoiler:</b>' +'<input type="button" onclick="if (this.parentNode.parentNode.getElementsByTagName(\'div\')[1].getElementsByTagName(\'div\')[0].style.display != \'\') { this.parentNode.parentNode.getElementsByTagName(\'div\')[1].getElementsByTagName(\'div\')[0].style.display = \'\';this.innerText = \'\'; this.value = \'Hide\'; } else { this.parentNode.parentNode.getElementsByTagName(\'div\')[1].getElementsByTagName(\'div\')[0].style.display = \'none\'; this.innerText = \'\'; this.value = \'Show\'; }" style="margin: 0px; padding: 0px; width: 45px; font-size: 10px;" value="Show"></div><div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;"><div style="display: none;"><br><iframe src='+videoArrayVB.eq(i).attr('src')+'>');
videoArrayVB.eq(i).insertAfter('<br></div></div></div>');
videoArrayVB.eq(i).remove();
}
} );