Brings back Popurls classic black theme, perfectly restores and improves former functionality while adding fullsize image previews.
// ==UserScript==
// @name Popurls Classic Black Style 2019
// @namespace https://greasyfork.org/en/users/10118-drhouse
// @version 3.0
// @description Brings back Popurls classic black theme, perfectly restores and improves former functionality while adding fullsize image previews.
// @run-at document-start
// @include http://popurls.com/
// @require http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
// @resource linkscss https://greasyfork.org/scripts/14798-popurls-classic-link-colors-stylesheet/code/popurls%20classic%20link%20colors%20stylesheet.js?version=95986
// @resource qtipcss https://cdnjs.cloudflare.com/ajax/libs/qtip2/3.0.2/jquery.qtip.min.css
// @grant GM_getValue
// @grant GM_setValue
// @grant GM_getResourceText
// @grant GM_addStyle
// @author drhouse
// @icon http://web.archive.org/web/20120612095215if_/http://popurls.com/favicon.ico
// ==/UserScript==
/* All colors and styles are an *exact* re-creation of the original site, the css values were copied from a locally saved html file from 2014 of the original popurls.com black site */
this.$ = this.jQuery = jQuery.noConflict(true);
$(document).ready(function () {
$('body').css('background-color','#0E0E0E'); //black background
$('body').css('font-size','0.9em'); //original font size
//original a { link, visited, hover, active } link colors
var linkscss = GM_getResourceText("linkscss");
GM_addStyle (linkscss);
$('.feedbox h4').css({'border-top': '1px solid #505050'}); //original article divider line color
$( ".box-d > h4" ).wrap( "<div class='pure-u-1'></div>" );
//original hover color behavior, new style removed hovers
$('#popurls > div > div > div > div > div > div, .box-d > div').css('background-color','#0E0E0E').hover(
function(){
$(this).css('background-color','#333');
$( this ).has( ".more" ).css( "background-color", "#0E0E0E" );
},
function(){
$(this).css('background-color','#0E0E0E');
});
$('h4 > a > img').attr('height','10px').attr('width','10px'); //resize article thumbnails for original line spacing
//restore original 'More' link & blend new design's into background
$('.more > a').attr('style','background: url("http://cdn.popurls.com/get/100322/i/b/mm.gif") center right no-repeat;color:#0E0E0E !important');
$('.more > a').text("_________");
$('.more').attr('align','right');
//add feature to permanently keep news feed columns expanded or collapsed, value is stored for return visits
var permaexpand = GM_getValue("permaexpand");
if( permaexpand == "true" ){
location.href="javascript:("+function(){
$.each($('.more > a'), function() {
$(this).click();
});
}+")();";
$('<a class="clickmore" style="color:#fff">collapse all news feeds</a><br>').prependTo('#customize');
} else {
GM_setValue("permaexpand", "false");
$('.clickmore').remove();
$('<a class="clickmore" style="color:#fff">expand all news feeds</a><br>').prependTo('#customize');
}
$('.clickmore').click(function(){
var permaexpand = GM_getValue("permaexpand");
if(!permaexpand)
GM_setValue("permaexpand", "true");
if(permaexpand == "false")
GM_setValue("permaexpand", "true");
if(permaexpand == "true")
GM_setValue("permaexpand", "false");
permaexpand = GM_getValue("permaexpand");
if( permaexpand == "true" ){
$('.clickmore').text('collapse all news feeds');
console.log("permaexpand3: " + permaexpand);
location.href="javascript:("+function(){
$.each($('.more > a'), function() {
$(this).click();
});
}+")();";
}
else {location.reload();}
});
//invert main graphics to visually work, going from new white to original black background
$('#holder-logo').css({'-webkit-filter':'invert(100%)','background-color':'white'}); //invert popurl main logo
$('h3').css('-webkit-filter','invert(100%)'); //invert coloumn header banners
//improve tooltips light rounded style
var qtipcss = GM_getResourceText("qtipcss");
GM_addStyle (qtipcss);
unsafeWindow.$('[title!=""]').qtip({
style: {
classes: 'qtip-light qtip-shadow qtip-rounded'
},
position: {
target: 'mouse', // Track the mouse as the positioning target
adjust: { x: 5, y: 5 } // Offset it slightly from under the mouse
}
});
//classic black favicon.ico
a=document.createElement("link");
a.setAttribute("type", "image/jpeg");
a.setAttribute("rel", "icon");
a.setAttribute("href", 'data:image/x-icon;base64,AAABAAIAICAAAAEACACoCAAAJgAAABAQAAABAAgAaAUAAM4IAAAoAAAAIAAAAEAAAAABAAgAAAAAAAAAAAAAAAAAAAAAAAABAAAAAAAABgYGAIaGhgBGRkYAxsbGAGZmZgCmpqYAKioqAObm5gBWVlYAdnZ'+
'2ALa2tgA'+'WFhYA9vb2AJ6engDW1tYAOjo6AA4ODgCOjo4ATk5OAG5ubgCurq4A7u7uAF5eXgB+fn4Avr6+AN7e3gAyMjIAHh4eAP7+/gBCQkIACgoKAIqKigBKSkoAysrKAGpqagCqqqoALi4uAOrq6gBaWloAenp6ALq6ugAaGhoA+vr6'+
'AKKiogDa2toAPj4+ABI'+'SEgCSkpIAUlJSAHJycgCysrIA8vLyAGJiYgCCgoIAwsLCAOLi4gAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'+
'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'+'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'+
'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'+'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'+
'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'+'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'+
'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'+'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'+
'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'+'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'+
'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'+'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'+
'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'+'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIYJTcrJAAAAAAA'+
'AAAABg0ZJTYSAAAAAAAAAAAAAAASDBwcHBwVMAAAAAAAACAHHBwcHComAAAAAAAAAAAACw4cHBwcHBwMHQAAAAAPFRwcHBwcHDcpAAAAAAA'+'AAAAIHBwcHBwcHBwOCwAALiEcHBwcHBwcHDQAAAAAAAAAABccHBwcHBwcHBw1EQEJHBwcH'+
'BwcHBwcHwAAAAAAAAAACRwcHBwcHBwcHBUVNwccHBwcHBwcHBwBAAAAAAAAAAACHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBIAAAAAAAAAAAAyHBwcHBwcHBw'+'cHBwcHBwcHBwcHBwYHgAAAAAAAAAAABIcHBwcHBwcHBwcHBwcHBwcHBwcHC'+
'YAAAAAAAAAAAAPJRwcHBwcHBwcHBwcHBwcHBwcHBwcFR0AAAAAAAAAAA0cHBwcHBwcHBwcHBwcHBwcHBwcHBwcFAAAAAAAAAAAMhwcHBwcHBwcHBwcHBwcHBwcHBwcHBw'+'YAAAAAAAAAAAjHBwcHBwcHBwcHBwcHBwcHBwcHBwcHAoAAAA'+
'AAAAALiwcHBwcHBwcHBwzNzcVHBwcHBwcHBwcBykAAAAAAAAIHBwcHBwcHBwcHB8xFxccHBwcHBwcHBwcNAAAAAAAAAocHBwcHBwcHBwyEAsLAAUcHBwcHBwcHBw2AAAAAAAaDBwcHBw'+'cHBwcDRAAAAAAEC8cHBwcHBwcHBwPAAAAACcc'+
'HBwcHBwcBwQAAAAAAAAAABY3HBwcHBwcHAEAAAAAChwcHBwcFREbAAAAAAAAAAAAACkBJRwcHBwcNgAAAAAZHBwMAzEbAAAAAAAAAAAAAAAAAAApEzYMHBwHAAAAABQyEyQAAAAAAAAAAAAAAAAAAAA'+'AAAAAAAYiFAoAAAAAAAAAAAAAA'+
'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'+'AAAAAAAAAAAAAAA'+
'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'+'AAAA'+
'AAAAAAAAAAAAAAAAAACgAAAAQAAAAIAAAAAEACAAAAAAAAAAAAAAAAAAAAAAAAAEAAAAAAAAGBgYAhoaGAMbGxgBKSkoA5ubmACYmJgCmpqYAZmZmAPb29gAeHh4Avr6+ANra2gBeXl4A7u7uADo6OgAODg4AmpqaAFJSUgCurq4AcnJyAP7'+
'+/'+'gDi4uIATk5OAOrq6gAuLi4A+vr6ACIiIgDCwsIA3t7eAPLy8gA+Pj4AEhISAJ6engCysrIAenp6AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'+
'AAAAAAAAAAA'+'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'+
'AAAAAAAAAAAAAAAAAAAAAA'+'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'+
'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'+'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'+
'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'+'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'+
'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'+'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'+
'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'+'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'+
'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'+'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAABEEFxMAAAMVHSIAAAAAAAAhFBQUBxYEFBQcDwAAAAAAEhQUFB0IFBQUCw8AAAAAACIUFBQ'+
'UFBQUFAYAAAAAAAAbFBQUFBQUFBQNGgAAAAAPCxQUFA0NFBQUFB4AAAAADBQUFBcDDgIUFBQQAAAAAAoUGSEYAAA'+'JEA0UCwAAAAAbIA4AAAAAAAAFAQoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'+
'AAAAAAAAX4wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=');
document.documentElement.firstChild.appendChild(a);
//introduce fullsize improved popup image functionality to adjust for reduced thumbnails
var logo = $('#holder-logo').find('img');
var apple = $('#popurls > div > div:nth-child(3) > div:nth-child(2)').find('img');
$( "img" ).not(logo).not(apple).each(function() {
var key = $(this).attr('src');
$( this ).wrap( "<a href="+key+" class='preview'></a>" );
$( this ).replaceWith( "<img src="+key+" height=12 width=12>" );
});
var prevWidth;
$("a.preview").hover(function(e){
this.t = $(this).parent().parent().find('a:nth-child(2)').attr('oldtitle');
this.title = "";
var qt = $(this).parent().attr('data-hasqtip');
$('#qtip-'+qt).removeClass('qtip');
if (!this.t){
this.t = $(this).parent().attr('oldtitle');
if (!this.t){
this.t = $(this).parent().text();
}
}
var c = (this.t !== "") ? "<br/>" + this.t : "";
$("body").append("<p id='preview'><img src='"+ this.href +"' alt='Image preview' />"+ c +"</p>");
$('#preview').css('position','absolute')
.css('color','white')
.css('padding','8px')
.css('font','100% Arial')
.css('border','1px solid #fff')
.css('background','#191919');
var $img = $('#preview > img');
$img.on('load', function(){
prevWidth = $(this).width();
$('#preview').css('width', prevWidth);
});
$('#preview').css('width', prevWidth);
$('#preview').css('word-wrap','break-word');
var rt = ($(window).width() - ($( this ).find('img').offset().left + $( this ).find('img').outerWidth()));
var viewportWidth = $(window).width();
var viewportHeight = $(window).height();
var viewportWidthCenter = viewportWidth/2;
var viewportHeightCenter = viewportHeight/2;
var xOffset;
var yOffset;
if (rt >= viewportWidthCenter){
xOffset = 10;
yOffset = 30;
$("#preview")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
.fadeIn("fast");
} else {
xOffset = 10;
yOffset = $('#preview').width() + 30;
$("#preview")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX - yOffset) + "px")
.fadeIn("fast");
}
},
function(){
this.title = this.t;
$("#preview").remove();
});
});