☰

Easy Nav for Rule34.xxx

updated by JeyLists

  1. // ==UserScript==
  2. // @name       Easy Nav for Rule34.xxx
  3. // @namespace  http://use.i.E.your.homepage/
  4. // @version    0.74
  5. // @description  updated by JeyLists
  6. // @match      http*://*.rule34.xxx/*page=post*
  7. // @match      http*://rule34.xxx/*page=post*
  8. // @copyright  2013+, Anonymous540
  9. // @require 	https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js
  10. // @grant GM_setValue
  11. // @grant GM_getValue
  12. // @grant GM_xmlhttpRequest
  13. // ==/UserScript==
  14.  
  15.  
  16. // console.debug($.fn.jquery);
  17. // console.debug($('.content span.thumb'))
  18.  
  19.  
  20. // CSS for navigation window
  21. image_nav_background_css = 'width: 100%; height: 100%; z-index: 100; position: absolute; background: rgba(0, 0, 0, 0.75);margin:0;display:none';
  22. image_nav_overlay_css = 'width: 100%; height: 100%;z-index: 101; position: absolute;margin:auto;display:none;text-align: center;pointer-events:none;';
  23. image_nav_content_css = 'pointer-events:auto;max-width: 100%; max-height: 100%;';
  24. image_nav_image_css = 'max-width:100%;max-height: 100%;vertical-align:middle;z-index:2';
  25. image_thumb_image_css = 'vertical-align: middle;z-index: 9000;display: inline-block;height: 32px;background-image: url(\'\/\/i.imgur.com\/itWV7LD.gif\');width: 32px;position:absolute;top: 50%;left: 50%;';
  26. arrow_style = 'height:100%; width:25px; background: rgba(0, 0, 0, 0.50); margin:0;color:white;display:inline-block;cursor:pointer; vertical-align: middle;position: absolute;';
  27. right_arrow_style = arrow_style+';right:0;';
  28. left_arrow_style = arrow_style+';left:0;';
  29. arrow_style_text = 'vertical-align: middle;';
  30. image_nav_text_overlay_css= 'position: absolute;bottom:0;width: 100%;text-align: center;right: 0px;background: rgba(255, 255, 255, 0.75);';
  31.  
  32.  
  33. // Creates the navigation window
  34. $('head').append('<style>'+
  35. '.image_nav_content .image_nav_text_overlay{'+
  36. '		display:none;'+
  37. '	}'+
  38. '	.image_nav_content:hover span.image_nav_text_overlay{'+
  39. '		display:inline-block;'+
  40. '	}'+
  41. '</style>');
  42.  
  43. $('body').prepend('<div class="image_nav_background" style="'+image_nav_background_css+'"></div><div class="image_nav_overlay" style="'+image_nav_overlay_css+'"><span class="image_nav_content" style="'+image_nav_content_css+'"><div class="left_arrow arrow" style="'+left_arrow_style+'"><span style="'+arrow_style_text+'"><<</span></div><div class="right_arrow" style="'+right_arrow_style+'"><span style="'+arrow_style_text+'">>></span></div><span style="'+image_nav_text_overlay_css+'" class="image_nav_text_overlay">Testing123</span><a href=""><div src="" style="'+image_thumb_image_css+'" class="thumb_img"></div><img src="" style="'+image_nav_image_css+'" data-real-height="" data-real-width="" data=image-number="" class="main_img"></a></span></div>').
  44.  
  45.  
  46.  
  47. // Turn most of the elements into a value
  48. $image_nav_background = $('.image_nav_background'); // No clue why this doesn't work. I link to the element directly instead.
  49. $image_nav_overlay = $('.image_nav_overlay');
  50. $nav_content = $('.image_nav_content');
  51. $nav_content_img = $('img.main_img', $nav_content);
  52. $nav_thumb_img = $('div.thumb_img', $nav_content);
  53. $left_arrow = $('.left_arrow', $nav_content);
  54. $right_arrow = $('.right_arrow', $nav_content);
  55. $text_overlay = $('.image_nav_text_overlay', $nav_content);
  56.  
  57. // Array which the images will be stored
  58. var Loaded_Images = {};
  59. var Loaded_Images_array = []; //Just the IDs for sorting
  60. var Loaded_Images_array_current; // Will be the current image
  61.  
  62. // Processes a URL and returns the page number
  63. function ProcessPagination(a){
  64. 	if(a !== undefined){
  65. 		// console.debug(a.attr('href'));
  66. 		var urlPage = a.match(/pid\=[0-9]{1,}/)[0].replace('pid=','');
  67. 		return ( parseInt(urlPage)  /50 ) + 1;
  68. 	}else{
  69. 		return CurrentPage;
  70. 	} 
  71. }
  72.  
  73.  
  74. // Some values which might change in the future
  75. var CurrentPage = parseInt($('#paginator .pagination b').text());
  76. var FirstPage = ProcessPagination($('#paginator .pagination [alt="first page"]').attr('href'));
  77. var LastPage = ProcessPagination($('#paginator .pagination [alt="last page"]').attr('href'));
  78. var ImagesPerPage = 50;
  79. var Navigation_Text = 'Easy Navigation';
  80. var Enable_Loading_Icon = true;
  81. var Setting_ImageLinkBegins = 'index.php?';
  82.  
  83.  
  84. // Sorts the image IDs into an array and also labels their page number and image number on the list
  85. function Sort_Object(SortObject){
  86. 	var Sorted = [];
  87. 	for(var key in SortObject)
  88. 	{
  89. 		Sorted.push(key);
  90. 	}
  91. 	return Sorted.sort(function(a, b) {
  92.  
  93. 		// Sort by page
  94. 		var PageCount = Loaded_Images[a].page - Loaded_Images[b].page;
  95. 		if(PageCount) return PageCount;
  96.  
  97. 		// If there is a tie, sort by image number
  98. 		var ImageCount = Loaded_Images[a].number - Loaded_Images[b].number;
  99. 		return ImageCount;
  100. 	});
  101. }
  102.  
  103.  
  104. // Pointless, I used this for debugging
  105. function Sort_images(){
  106. 	Loaded_Images_array = Sort_Object(Loaded_Images);
  107. 	/*
  108. 	var counting = 0
  109. 	var count_info = '';
  110. 	$.each(Loaded_Images_array,function(index,value){
  111. 		count_info+= 'Number: '+index+' | Page: '+Loaded_Images[value].page+' | Image: '+Loaded_Images[value].number+'\n';
  112. 		counting++
  113. 	})
  114. 	console.debug(counting+' Images sorted\n'+count_info)
  115. 	*/
  116. }
  117.  
  118. // The function that is called everytime a new image is selected, either through navigating left, right, or clicking a link.
  119. function LoadImage(ImageID){
  120. 	Loaded_Images_array_current = Loaded_Images_array.indexOf(ImageID);
  121. 	// console.debug(Loaded_Images);
  122. 	
  123. 	var ImageThumb = Loaded_Images[ImageID].thumb;
  124. 	var ImageMain = Loaded_Images[ImageID].main;
  125. 	var LoadingImage = true;
  126.  
  127. 	
  128. 	// Sets the link on the image to the image page
  129. 	$nav_content_img.parent().attr('href',Loaded_Images[ImageID].link);
  130. 	
  131. 	// Formats all the tags into a list of links
  132. 	var ImageTagsFormatted = [];
  133. 	var ImageTags = Loaded_Images[ImageID].tags.split(" ");
  134. 	$.each(ImageTags, function(index, value) {
  135. 		ImageTagsFormatted.push('<a href="http://rule34.xxx/index.php?page=post&s=list&tags='+value+'">'+value+'</a>');
  136. 	});
  137. 	
  138. 	$('.image_nav_background').show();
  139. 	$image_nav_overlay.show();
  140. 	$nav_thumb_img.show();
  141. 	$text_overlay.empty().append('<a href="'+Loaded_Images[ImageID].link+'" class="main_image_direct_link">'+Loaded_Images[ImageID].filename+'</a> | Page '+Loaded_Images[ImageID].page+' | Image '+Loaded_Images[ImageID].number+'<br>'+ImageTagsFormatted.join(' | '));
  142. 	
  143. 	$nav_content_img
  144. 	.data('ImageId',ImageID);
  145. 	
  146. 	var current_status = Loaded_Images[ImageID].status;
  147. 	
  148. 	// Loads the image if it's already been verified previously.
  149. 	if(current_status == 'loaded' || current_status == 'error'){
  150. 		$nav_content_img.attr('src',ImageMain);
  151. 		if(current_status != 'loading')$nav_thumb_img.hide();
  152. 		$('.main_image_direct_link',$text_overlay).attr('href',ImageMain);
  153. 		
  154. 		RepositionMainImage();
  155. 	
  156. 	// Checks each image extension until it finds a working one
  157. 	}else if(current_status == 'waiting'){
  158. 		Loaded_Images[ImageID].status = 'loading';
  159. 		GM_xmlhttpRequest({
  160. 			method: "GET",
  161. 			url: '/'+Loaded_Images[ImageID].link,
  162. 			onload: function(retour) {
  163. 				Loaded_Images[ImageID].verified = true;
  164. 				var image;
  165. 				var ResponseHTML = $(retour.responseText);
  166. 				var ImageServer = $('div.content script:contains("image"):contains("domain"):contains("base_dir")',ResponseHTML).text();
  167. 				eval(ImageServer);
  168. 				var new_image_url = image.domain + "/" + image.base_dir + "/" + image.dir + "/" + image.img;
  169. 				Loaded_Images[ImageID].main = new_image_url;
  170. 				$("<img/>")
  171. 					.attr("src", new_image_url)
  172. 					.one('load',function(){
  173. 						Loaded_Images[ImageID].status = 'loaded';
  174. 					// Checks to make sure the successfully loading image actually is the one selected, since the load function for a previous image might be called after the user has switched to another.
  175. 						if($nav_content_img.data('ImageId') == ImageID){
  176. 							$nav_content_img.attr('src',new_image_url);
  177. 							$nav_thumb_img.hide();
  178. 							$('.main_image_direct_link',$text_overlay).attr('href',new_image_url);
  179. 							RepositionMainImage();
  180. 						}						
  181. 					})
  182. 					.one('error',function(){
  183. 						Loaded_Images[ImageID].status = 'error';
  184. 						if($nav_content_img.data('ImageId') == ImageID){
  185. 							$nav_content_img.attr('src','/images/404.gif').one('load',function(){RepositionMainImage();});
  186. 							$nav_thumb_img.hide();
  187. 							$('.main_image_direct_link',$text_overlay).attr('href',new_image_url);
  188. 						}
  189. 					});
  190. 			}
  191. 		});
  192. 	}
  193. 	
  194. 	// Prevent left and right scrolling in background
  195. 	$('body').css({'overflow-x' : 'hidden', 'overflow-y': 'hidden'});
  196. }
  197.  
  198.  
  199.  
  200. // Function to add an image to the Loaded_Images object
  201. function AddImage(ImageID,ImageThumb,ImageMain,ImagePage,ImageNumber,ImageLink,ImageTags){
  202. 	Loaded_Images[ImageID] = {};
  203. 	Loaded_Images[ImageID].status = 'waiting';
  204. 	Loaded_Images[ImageID].id = ImageID;
  205. 	Loaded_Images[ImageID].thumb = ImageThumb;
  206. 	Loaded_Images[ImageID].main = ImageMain;
  207. 	Loaded_Images[ImageID].page = ImagePage;
  208. 	Loaded_Images[ImageID].number = ImageNumber;
  209. 	Loaded_Images[ImageID].link = ImageLink;
  210. 	Loaded_Images[ImageID].filename = ImageMain.match(/\/[0-9a-zA-Z]{1,}.[a-z]{3,4}\?/)[0].replace('/','').replace('?','');
  211. 	Loaded_Images[ImageID].tags = ImageTags;
  212. }
  213.  
  214. // Checks if Loading icon is enabled
  215. if(!Enable_Loading_Icon){
  216. 	$nav_thumb_img.css('background-image', '');
  217. }
  218.  
  219. // This is called when wanting to go 1 image forward, or backward. Usually when using the arrow keys or clicking the arrow buttons.
  220. function Next_Image(direction){
  221. 	// console.debug('Next Image clicked in '+direction+' direction')
  222. 	
  223. 	var NextCount = Loaded_Images_array_current;
  224. 	
  225. 	// Checks direction and adds or subtracts
  226. 	if(direction == 'right'){
  227. 		NextCount++;
  228. 	}else if(direction == 'left'){
  229. 		NextCount--;
  230. 	}else if(direction == 'up'){
  231. 		NextCount-=7;
  232. 	}else if(direction == 'down'){
  233. 		NextCount+=7;
  234. 	}
  235. 	
  236. 	// Checks to see if image exists. If not, loads the next page.
  237. 	var ImageID = Loaded_Images_array[NextCount];
  238. 	// console.debug(ImageID + 'loading')
  239. 	if(ImageID !== undefined){
  240. 		LoadImage(ImageID);
  241. 	}else{
  242. 		Load_Page(Loaded_Images[Loaded_Images_array[Loaded_Images_array_current]].id);
  243. 	}
  244. 	
  245. 	// console.debug(NextCount)
  246.  
  247. }
  248.  
  249.  
  250. // Loads the images from the next page
  251.  function Load_Page(CurrentImageID){
  252. 	
  253. 	
  254. 	var Image_Number = Loaded_Images[CurrentImageID].number;
  255. 	var Image_Page = Loaded_Images[CurrentImageID].page;
  256. 	
  257. 	// Checks which page direction and if it's the end of the list.
  258. 	
  259. 	// Going towards the left
  260. 	var backPaging = (Image_Number <= 1 && Image_Page > 1);
  261. 	var FrontWall = (Image_Page == FirstPage);
  262. 	
  263. 	// Going towards the right
  264. 	var forwardPaging = (Image_Number >= ImagesPerPage && Image_Page >= 1);
  265. 	var RearWall = (Image_Number < ImagesPerPage && Image_Page == LastPage);
  266.     var PageSelect;
  267. 	if(backPaging && !FrontWall){
  268. 		PageSelect = Image_Page-1;
  269. 		// console.debug('backpaging')
  270. 	}else if(forwardPaging && !RearWall){
  271. 		PageSelect = Image_Page+1;
  272. 		// console.debug('forwardPaging')
  273. 	}else{
  274. 		// console.debug('wall')
  275. 		PageSelect = Image_Page;
  276. 	}
  277.  
  278. 	
  279. 	
  280. 	// Takes the requested page and converts into a URL string to load.
  281. 	if(backPaging || forwardPaging){
  282. 	$nav_thumb_img.show();
  283. 	PageSelect -= 1;
  284. 	PageSelect = PageSelect*ImagesPerPage;
  285. 	var requestURL;
  286. 	if(document.URL.indexOf('pid=') > -1){
  287. 		requestURL = document.URL.replace(/pid\=[0-9]{1,}/,'pid='+PageSelect);
  288. 	}else{
  289. 		requestURL = document.URL+'&pid='+PageSelect;
  290. 	}
  291. 	// console.debug(requestURL+' Loading...')
  292. 	GM_xmlhttpRequest({
  293. 		method: "GET",
  294. 		url: requestURL,
  295. 		onload: function(retour) {
  296. 			// console.debug(retour)
  297. 			$nav_thumb_img.hide();
  298. 			ResponseHTML = $(retour.responseText);
  299. 			var ImageNumber = 0;
  300. 			$('.content span.thumb', ResponseHTML).each(function(){
  301. 			
  302. 				var $this_span = $(this);
  303. 				var ImageID = $this_span.attr('id');
  304. 				var ImageThumb = $('img.preview' ,$this_span).attr('src');
  305. 				var ImageTags = $('img.preview' ,$this_span).attr('alt');
  306. 				var ImagePage = parseInt($('#paginator .pagination b', ResponseHTML).text());
  307. 				var ImageMain = ImageThumb.replace('thumbnail_','').replace("/r34/thumbnails/",'//images/').replace("/rule34/thumbnails/",'/rule34//images/');
  308. 				var ImageLink = $('a[href^="'+Setting_ImageLinkBegins+'"]',$this_span).attr('href');
  309. 				
  310. 				// console.debug(ImageMain);
  311. 				// http://cdn.rule34.xxx/r34/thumbnails/1354/thumbnail_23a69eecacb1cd8c36045e45657800e8f257e950.jpg?1411722
  312. 			
  313. 				ImageNumber++;
  314. 				
  315. 				AddImage(ImageID,ImageThumb,ImageMain,ImagePage,ImageNumber,ImageLink,ImageTags);
  316. 				
  317. 			});
  318. 			
  319. 			Sort_images();
  320. 			var Cur_Image_ID = $('.image_nav_content img.main_img').data('ImageId');
  321. 			var Image_Number2 = Loaded_Images_array.indexOf(Cur_Image_ID);
  322. 			if(backPaging){
  323. 				Image_Number2--;
  324. 				// console.debug('backPaging')
  325. 			}else if(forwardPaging){
  326. 				Image_Number2++;
  327. 				// console.debug('forwardPaging')
  328. 			}
  329. 			// console.debug(Cur_Image_ID+' ID, Number: '+Image_Number2)			
  330. 			New_Image = Loaded_Images_array[Image_Number2];
  331. 			// console.debug(New_Image)
  332. 			LoadImage(New_Image);
  333. 			
  334. 		}
  335. 	});
  336. 	}
  337.        
  338. }
  339.  
  340. //Sets the image margins upon resizing the window
  341. function RepositionMainImage(){	
  342. 	
  343. 	$nav_content_img.css('margin', 'auto');
  344. 		
  345. 	var ImgWidth = $nav_content_img.width();
  346. 	var WindowWidth = parseInt(window.innerWidth);
  347. 	var HMargin = (WindowWidth-ImgWidth)/2;
  348.  
  349. 	var ImgHeight = $nav_content_img.height();
  350. 	var WindowHeight = parseInt(window.innerHeight);
  351. 	var VMargin = (WindowHeight-ImgHeight)/2;
  352.  
  353. 	// console.debug(VMargin+'px '+HMargin+'px')
  354. 	$nav_content_img.css('margin', VMargin+'px '+HMargin+'px');
  355. 	$text_overlay.css({'margin-bottom' : VMargin+'px'});
  356. 	
  357. 	
  358. 	
  359. }
  360.  
  361. // Goes through each thumbnail on the page
  362. var ImageNumber=0;
  363. $('.content span.thumb').each(function(){
  364. 	var $this_span = $(this);
  365. 	var ImageID = $this_span.attr('id');
  366. 	var ImageThumb = $('img.preview' ,$this_span).attr('src');
  367. 	var ImageTags = $('img.preview' ,$this_span).attr('alt');
  368. 	var ImagePage = CurrentPage;
  369. 	var ImageLink = $('a[href^="'+Setting_ImageLinkBegins+'"]',$this_span).attr('href');
  370. 	
  371. 	// Turns the thumbnail link into the primary image link.
  372. 	var ImageMain = ImageThumb.replace('thumbnail_','').replace("/r34/thumbnails/",'//images/').replace("/rule34/thumbnails/",'/rule34//images/');
  373. 	ImageNumber++;
  374. 	// Add each image to the array
  375. 	AddImage(ImageID,ImageThumb,ImageMain,ImagePage,ImageNumber,ImageLink,ImageTags);
  376. 	
  377. 	// Creates a link under each thumbnail
  378. 	$this_span.append('<br><a href="#" class="image_nav_button" id="'+ImageID+'" data-image-id="'+ImageID+'">'+Navigation_Text+'</a>');
  379. 	
  380. 	var $image_button = $('a.image_nav_button', $this_span);
  381. 	
  382. 	// Makes that link open up the navigation window
  383. 	$image_button.click(function(){
  384. 		
  385. 		imageId_data = $image_button.data('imageId');
  386. 		LoadImage(imageId_data);
  387. 		window.scrollTo(0, 0);
  388. 		return false;
  389. 	});
  390. 	
  391. 	
  392. });
  393. delete ImageNumber;
  394.  
  395. // console.debug(Loaded_Images);
  396.  
  397. // Sort the images.
  398. Sort_images();
  399.  
  400. // Keyboard arrow key navigation
  401. document.onkeyup = function(evt){    
  402. 	if($image_nav_overlay.is(":visible")){
  403. 		if(evt.which == 37 || evt.which == 65){
  404. 			Next_Image('left');
  405. 		}else if(evt.which == 39 || evt.which == 68){
  406. 			Next_Image('right');
  407. 		}else if(evt.which == 38 || evt.which == 87){
  408. 			Next_Image('up');
  409. 		}else if(evt.which == 40 || evt.which == 83){
  410. 			Next_Image('down');
  411. 		}
  412. 	}
  413. };
  414.  
  415. // Arrow button navigation
  416. $left_arrow.click(function(){Next_Image('left');});
  417. $right_arrow.click(function(){Next_Image('right');});
  418.  
  419. // Hide everything if black background is clicked.
  420.  
  421. $('.image_nav_background').click(function(){
  422. 	$('.image_nav_background').hide();
  423. 	$image_nav_overlay.hide();
  424. 	$nav_content_img.attr('src','');
  425. 	$('body').css({'overflow-x' : 'auto', 'overflow-y': 'auto'});
  426. });
  427.  
  428. // Keeps the main image centered
  429. $(window).resize(function() {
  430. 	if($nav_content_img.is(':visible')) {	
  431. 		RepositionMainImage();		
  432. 	}
  433. });
  434. // console.debug(Loaded_Images)