☰

Finya XL Image Previewer

Preview Finya userimages without leaving a trace in the "last visited by" section of that user

  1. // ==UserScript==
  2. // @name           Finya XL Image Previewer
  3. // @include        http://*.finya.de/*
  4. // @description    Preview Finya userimages without leaving a trace in the "last visited by" section of that user
  5. // @version 4.00
  6. // @namespace      https://greasyfork.org/users/8629
  7. // ==/UserScript==
  8.  
  9. var allIMGs, thisIMG, xTop, leftOffset, topOffset;
  10. matchRegEx = /_1[0-2].jpg/i; // Identifies image sources for small images
  11. replaceString = '_4.jpg' // Replacement so we can find the large images
  12. leftOffset = 20; // X-axis offset to the mouse pointer
  13. topOffset = -50; // Y-axis offset to the mouse pointer
  14. borderWidth = 1; // Large image border width
  15. toWatch = new Array('appstage','content','sidebar','list-online','searchbar-wrapper','voting-history-wrapper','header-content'); // Elements which have dynamic img content
  16. toWatchClasses = new Array('userpic','searchbar-thumb'); // Image style classes containing relevant images
  17. toWatchParentClasses = new Array('morepics'); // Style classes of parent elements containing relevant images
  18. imgCache = new Object(); // Used for pre-loading images
  19.  
  20. // Event functions
  21. function animate (e, tagetXL) {
  22.     xTop = (document.documentElement.scrollTop || document.body.scrollTop); // cross-browser top
  23.     
  24. 	// horizontal position	
  25. 	if ((e.pageX + leftOffset + (2 * borderWidth))>(document.documentElement.clientWidth + document.documentElement.scrollLeft - targetXL.width)) {
  26. 		if ((e.pageX + (2 * borderWidth) + 2)<(document.documentElement.clientWidth + document.documentElement.scrollLeft - targetXL.width)) {
  27. 			targetXL.style.left = document.documentElement.clientWidth + document.documentElement.scrollLeft - targetXL.width - (2 * borderWidth) + 'px';
  28. 		} else {
  29. 			targetXL.style.left = e.pageX - targetXL.width - leftOffset + 'px';
  30. 		}
  31. 	} else {
  32. 		targetXL.style.left = e.pageX + leftOffset + 'px';
  33. 	}
  34.  
  35. 	// vertical position	
  36. 	if ((e.pageY - topOffset + (2 * borderWidth))>(document.documentElement.clientHeight + xTop)) {
  37. 		targetXL.style.top = document.documentElement.clientHeight + xTop - targetXL.height - (2 * borderWidth) + 'px';
  38. 	} else if ((e.pageY - targetXL.height - topOffset)<xTop) {
  39. 		targetXL.style.top = xTop + 'px';
  40. 	} else {
  41. 		targetXL.style.top = e.pageY - targetXL.height - topOffset + 'px';
  42. 	}
  43. }
  44.  
  45. function mouseOver(e) {
  46.     targetXL = document.getElementById('ImgElem');
  47. 	if (targetXL.src != this.getAttribute('targetSrc')) {
  48. 		targetXL.src = this.getAttribute('targetSrc');
  49. 	}
  50. 	animate (e, targetXL);
  51.  
  52. 	targetXL.style.display='block';
  53. }
  54.  
  55. function mouseMove(e) {
  56. 	targetXL = document.getElementById('ImgElem');
  57. 	if (targetXL.src != this.getAttribute('targetSrc')) {
  58. 		targetXL.src = this.getAttribute('targetSrc');
  59. 	}
  60. 	
  61. 	animate (e, targetXL);
  62. }
  63.  
  64. function mouseOut() {
  65. 	document.getElementById('ImgElem').style.display='none';
  66. 	document.getElementById('ImgElem').src='';
  67. }
  68.  
  69. // Add big-sized preview images for all small preview images
  70. function addPrvImg() {
  71. 	var smallIMGs = new Array();
  72. 	var usedIMGs = new Array();
  73. 	
  74. 	// identify all relevant small images
  75. 	// a) search for images via their classes
  76. 	for (var i = 0; i < toWatchClasses.length; i++) {
  77. 		var possibleImages = document.getElementsByClassName(toWatchClasses[i]);
  78.  
  79. 		for (var j = 0; j < possibleImages.length; j++) {
  80. 			if (possibleImages[j].nodeName == 'IMG' && possibleImages[j].src.search(matchRegEx)>0) {
  81. 				smallIMGs.push(possibleImages[j]);
  82. 			}
  83. 		}
  84. 	}
  85. 	
  86. 	// b) search for images via their parents' classes
  87. 	for (var i = 0; i < toWatchClasses.length; i++) {
  88. 		possibleParents = document.getElementsByClassName(toWatchParentClasses[i]);
  89.  
  90. 		for (var j = 0; j < possibleParents.length; j++) {
  91. 		var possibleImages = possibleParents[j].getElementsByTagName('IMG');
  92.  
  93. 			for (var k = 0; k < possibleImages.length; k++) {
  94. 				if (possibleImages[k].src.search(matchRegEx)>0) {
  95. 					smallIMGs.push(possibleImages[k]);
  96. 				}
  97. 			}
  98.  
  99. 		}
  100. 	}
  101.  
  102. 	// loop small images
  103. 	for (var i = 0; i < smallIMGs.length; i++) {
  104. 		var thisIMG = smallIMGs[i];
  105. 		
  106. 		// get target source from  image source file name
  107. 		var targetSrc = thisIMG.src.replace(matchRegEx,replaceString);
  108.  
  109. 		// Collect target sources for images which are still active in the document
  110. 		usedIMGs.push(targetSrc);
  111.  
  112. 		if (thisIMG.getAttribute("targetSrc")!=targetSrc) {
  113. 			// set "targetSrc" attribute to the target's source. it will be used by the event functions to locate the big preview image
  114. 			thisIMG.setAttribute("targetSrc", targetSrc);
  115.  
  116. 			// only cache preview image if it does not already exist (somewhere else in the document)
  117. 			if (!(imgCache.hasOwnProperty(targetSrc))) {
  118. 				imgCache[targetSrc] = new Image();
  119. 				imgCache[targetSrc].src = targetSrc;
  120. 			}
  121. 	
  122. 			// activate event listeners for small preview image
  123. 			thisIMG.title = thisIMG.alt;
  124. 			thisIMG.addEventListener('mouseover', mouseOver, false);
  125. 			thisIMG.addEventListener('mousemove', mouseMove, false);
  126. 			thisIMG.addEventListener('mouseout', mouseOut, false);
  127. 			
  128. 			// (Re-)activate pointer events in case there were disabled (as is the case for the favorites submenu) 
  129. 			if (thisIMG.style.pointerEvents = "none") {
  130. 				thisIMG.style.pointerEvents = "auto";
  131. 			}
  132. 			
  133. 		}
  134. 	}
  135. 	
  136. 	// remove unused images from imgCache
  137. 	for (image in imgCache) {
  138. 		if (usedIMGs.indexOf(image)<0) {
  139. 			delete imgCache[image];
  140. 		}
  141. 	}
  142. }
  143.  
  144. // initial execution
  145. addPrvImg();
  146.  
  147. // Create blank image element. It will be filled with actual XL images and unhidden during execution
  148. var imgXL = document.createElement('img');
  149.  
  150. imgXL.setAttribute('style', 'z-index:10000; overflow:hidden; position:absolute; display:none; border-width:' + borderWidth + 'px; box-shadow: 0px 0px 16px #036; border-style:solid; border-color:#FFF;');
  151. imgXL.setAttribute('id', 'ImgElem');
  152. document.body.insertBefore(imgXL, document.body.firstChild);
  153.  
  154. // add event listeners to dynamic elements
  155. for (var i = 0; i < toWatch.length; i++) {
  156. 	if (thisElem = document.getElementById(toWatch[i])) {
  157. 		thisElem.addEventListener('DOMSubtreeModified', addPrvImg, false);
  158. 	}
  159. }