☰

Popurls Classic Black Style 2016

Brings back Popurls classic black style, restores and improves former functionality while adding fullsize image previews.

Tính đến 11-12-2015. Xem phiên bản mới nhất.

  1. // ==UserScript==
  2. // @name               Popurls Classic Black Style 2016
  3. // @namespace          https://greasyfork.org/en/users/10118-drhouse
  4. // @version            1.0
  5. // @description        Brings back Popurls classic black style, restores and improves former functionality while adding fullsize image previews.
  6. // @run-at             document-start
  7. // @include            http://popurls.com/
  8. // @require            http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
  9. // @resource linkscss  https://greasyfork.org/scripts/14798-popurls-classic-link-colors-stylesheet/code/popurls%20classic%20link%20colors%20stylesheet.js?version=93470
  10. // @resource qtipcss   https://cdnjs.cloudflare.com/ajax/libs/qtip2/3.0.2/jquery.qtip.min.css
  11. // @author             drhouse
  12. // @icon               http://popurls.net/favicon.ico
  13. // ==/UserScript==
  14.  
  15. /* 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 */
  16. this.$ = this.jQuery = jQuery.noConflict(true);
  17.  
  18. $(document).ready(function () {
  19. 	
  20. 	$('body').css('background-color','#0E0E0E'); //black background
  21. 	$('body').css('font-size','0.9em'); //original font size
  22. 	
  23. 	//original a { link, visited, hover, active } link colors
  24. 	var linkscss  = GM_getResourceText("linkscss");
  25. 	GM_addStyle (linkscss);
  26.  
  27. 	$('.feedbox h4').css({'border-top': '1px solid #505050'}); //original article divider line color
  28.  
  29. 	$( ".box-d > h4" ).wrap( "<div class='pure-u-1'></div>" );
  30.  
  31. 	//original hover color behavior, new style removed hovers
  32. 	$('#popurls > div > div > div > div > div > div, .box-d > div').css('background-color','#0E0E0E').hover(  
  33. 		function(){
  34. 			$(this).css('background-color','#333');
  35. 			$( this ).has( ".more" ).css( "background-color", "#0E0E0E" );
  36. 		},
  37. 		function(){
  38. 			$(this).css('background-color','#0E0E0E');
  39. 		});
  40.  
  41. 	$('h4 > a > img').attr('height','10px').attr('width','10px'); //resize article thumbnails for original line spacing
  42.  
  43. 	//restore original 'More' link & blend new design's into background
  44. 	$('.more > a').attr('style','background: url("http://cdn.popurls.com/get/100322/i/b/mm.gif") center right no-repeat;color:#0E0E0E !important');
  45. 	$('.more > a').text("_________");
  46. 	$('.more').attr('align','right');
  47.  
  48. 	//invert main graphics to visually work, going from new white to original black background
  49. 	$('#holder-logo').css({'-webkit-filter':'invert(100%)','background-color':'white'}); //invert popurl main logo
  50. 	$('h3').css('-webkit-filter','invert(100%)'); //invert coloumn header banners
  51.  
  52. 	//improve tooltips light rounded style
  53. 	var qtipcss  = GM_getResourceText("qtipcss");
  54. 	GM_addStyle (qtipcss);
  55.  
  56. 	unsafeWindow.$('[title!=""]').qtip({
  57. 		style: {
  58. 			classes: 'qtip-light qtip-shadow qtip-rounded'
  59. 		},
  60. 		position: {
  61. 			target: 'mouse', // Track the mouse as the positioning target
  62. 			adjust: { x: 5, y: 5 } // Offset it slightly from under the mouse
  63. 		}
  64. 	}); 
  65.  
  66. 	//classic black favicon.ico
  67. 	a=document.createElement("link");
  68. 	a.setAttribute("type", "image/jpeg");
  69. 	a.setAttribute("rel", "icon");
  70. 	a.setAttribute("href", 'data:image/x-icon;base64,AAABAAIAICAAAAEACACoCAAAJgAAABAQAAABAAgAaAUAAM4IAAAoAAAAIAAAAEAAAAABAAgAAAAAAAAAAAAAAAAAAAAAAAABAAAAAAAABgYGAIaGhgBGRkYAxsbGAGZmZgCmpqYAKioqAObm5gBWVlYAdnZ'+
  71. 				   '2ALa2tgA'+'WFhYA9vb2AJ6engDW1tYAOjo6AA4ODgCOjo4ATk5OAG5ubgCurq4A7u7uAF5eXgB+fn4Avr6+AN7e3gAyMjIAHh4eAP7+/gBCQkIACgoKAIqKigBKSkoAysrKAGpqagCqqqoALi4uAOrq6gBaWloAenp6ALq6ugAaGhoA+vr6'+
  72. 				   'AKKiogDa2toAPj4+ABI'+'SEgCSkpIAUlJSAHJycgCysrIA8vLyAGJiYgCCgoIAwsLCAOLi4gAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'+
  73. 				   'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'+'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'+
  74. 				   'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'+'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'+
  75. 				   'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'+'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'+
  76. 				   'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'+'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'+
  77. 				   'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'+'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'+
  78. 				   'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'+'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'+
  79. 				   'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'+'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIYJTcrJAAAAAAA'+
  80. 				   'AAAABg0ZJTYSAAAAAAAAAAAAAAASDBwcHBwVMAAAAAAAACAHHBwcHComAAAAAAAAAAAACw4cHBwcHBwMHQAAAAAPFRwcHBwcHDcpAAAAAAA'+'AAAAIHBwcHBwcHBwOCwAALiEcHBwcHBwcHDQAAAAAAAAAABccHBwcHBwcHBw1EQEJHBwcH'+
  81. 				   'BwcHBwcHwAAAAAAAAAACRwcHBwcHBwcHBUVNwccHBwcHBwcHBwBAAAAAAAAAAACHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBIAAAAAAAAAAAAyHBwcHBwcHBw'+'cHBwcHBwcHBwcHBwYHgAAAAAAAAAAABIcHBwcHBwcHBwcHBwcHBwcHBwcHC'+
  82. 				   'YAAAAAAAAAAAAPJRwcHBwcHBwcHBwcHBwcHBwcHBwcFR0AAAAAAAAAAA0cHBwcHBwcHBwcHBwcHBwcHBwcHBwcFAAAAAAAAAAAMhwcHBwcHBwcHBwcHBwcHBwcHBwcHBw'+'YAAAAAAAAAAAjHBwcHBwcHBwcHBwcHBwcHBwcHBwcHAoAAAA'+
  83. 				   'AAAAALiwcHBwcHBwcHBwzNzcVHBwcHBwcHBwcBykAAAAAAAAIHBwcHBwcHBwcHB8xFxccHBwcHBwcHBwcNAAAAAAAAAocHBwcHBwcHBwyEAsLAAUcHBwcHBwcHBw2AAAAAAAaDBwcHBw'+'cHBwcDRAAAAAAEC8cHBwcHBwcHBwPAAAAACcc'+
  84. 				   'HBwcHBwcBwQAAAAAAAAAABY3HBwcHBwcHAEAAAAAChwcHBwcFREbAAAAAAAAAAAAACkBJRwcHBwcNgAAAAAZHBwMAzEbAAAAAAAAAAAAAAAAAAApEzYMHBwHAAAAABQyEyQAAAAAAAAAAAAAAAAAAAA'+'AAAAAAAYiFAoAAAAAAAAAAAAAA'+
  85. 				   'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'+'AAAAAAAAAAAAAAA'+
  86. 				   'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'+'AAAA'+
  87. 				   'AAAAAAAAAAAAAAAAAACgAAAAQAAAAIAAAAAEACAAAAAAAAAAAAAAAAAAAAAAAAAEAAAAAAAAGBgYAhoaGAMbGxgBKSkoA5ubmACYmJgCmpqYAZmZmAPb29gAeHh4Avr6+ANra2gBeXl4A7u7uADo6OgAODg4AmpqaAFJSUgCurq4AcnJyAP7'+
  88. 				   '+/'+'gDi4uIATk5OAOrq6gAuLi4A+vr6ACIiIgDCwsIA3t7eAPLy8gA+Pj4AEhISAJ6engCysrIAenp6AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'+
  89. 				   'AAAAAAAAAAA'+'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'+
  90. 				   'AAAAAAAAAAAAAAAAAAAAAA'+'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'+
  91. 				   'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'+'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'+
  92. 				   'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'+'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'+
  93. 				   'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'+'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'+
  94. 				   'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'+'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'+
  95. 				   'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'+'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAABEEFxMAAAMVHSIAAAAAAAAhFBQUBxYEFBQcDwAAAAAAEhQUFB0IFBQUCw8AAAAAACIUFBQ'+
  96. 				   'UFBQUFAYAAAAAAAAbFBQUFBQUFBQNGgAAAAAPCxQUFA0NFBQUFB4AAAAADBQUFBcDDgIUFBQQAAAAAAoUGSEYAAA'+'JEA0UCwAAAAAbIA4AAAAAAAAFAQoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'+
  97. 				   'AAAAAAAAX4wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=');
  98.  
  99. 	document.documentElement.firstChild.appendChild(a);
  100.  
  101. 	//introduce fullsize improved popup image functionality to adjust for reduced thumbnails 
  102. 	var logo = $('#holder-logo').find('img');
  103. 	$( "img" ).not(logo).each(function() {
  104. 		var key = $(this).attr('src');
  105. 		$( this ).wrap( "<a href="+key+" class='preview'></a>" );    
  106. 		$( this ).replaceWith( "<img src="+key+" height=12 width=12>" );
  107. 	});
  108.  
  109. 	var prevWidth;
  110. 	$("a.preview").hover(function(e){
  111. 		this.t = $(this).parent().parent().find('a:nth-child(2)').attr('oldtitle');
  112. 		this.title = "";
  113. 		var qt = $(this).parent().attr('data-hasqtip');
  114. 		$('#qtip-'+qt).removeClass('qtip');
  115. 		if (!this.t){
  116. 			this.t = $(this).parent().attr('oldtitle');
  117. 			if (!this.t){
  118. 				this.t = $(this).parent().text();
  119. 			}
  120. 		}
  121.  
  122. 		var c = (this.t !== "") ? "<br/>" + this.t : "";		 
  123. 		$("body").append("<p id='preview'><img src='"+ this.href +"' alt='Image preview' />"+ c +"</p>");
  124. 		$('#preview').css('position','absolute')
  125. 			.css('color','white')
  126. 			.css('padding','8px')
  127. 			.css('font','100% Arial')
  128. 			.css('border','1px solid #fff')
  129. 			.css('background','#191919');
  130. 		var $img = $('#preview > img');
  131.  
  132.  
  133. 		$img.on('load', function(){
  134. 			prevWidth = $(this).width();
  135. 			$('#preview').css('width', prevWidth);
  136. 		});
  137.  
  138. 		$('#preview').css('width', prevWidth);
  139. 		$('#preview').css('word-wrap','break-word');
  140.  
  141. 		var rt = ($(window).width() - ($( this ).find('img').offset().left + $( this ).find('img').outerWidth()));
  142. 		var viewportWidth = $(window).width();
  143. 		var viewportHeight = $(window).height();
  144. 		var viewportWidthCenter = viewportWidth/2;
  145. 		var viewportHeightCenter = viewportHeight/2;
  146. 		var xOffset;
  147. 		var yOffset;
  148.  
  149. 		if (rt >= viewportWidthCenter){
  150. 			xOffset = 10;
  151. 			yOffset = 30;
  152. 			$("#preview")
  153. 				.css("top",(e.pageY - xOffset) + "px")
  154. 				.css("left",(e.pageX + yOffset) + "px")
  155. 				.fadeIn("fast");						
  156. 		} else {
  157. 			xOffset = 10;
  158. 			yOffset = $('#preview').width() + 30;	
  159. 			$("#preview")
  160. 				.css("top",(e.pageY - xOffset) + "px")
  161. 				.css("left",(e.pageX - yOffset) + "px")
  162. 				.fadeIn("fast");
  163. 		}
  164. 	},
  165. 						 function(){
  166. 		this.title = this.t;	
  167. 		$("#preview").remove();
  168. 	});	
  169.  
  170. });