☰

Hover Preview

Pops up a floating div when you hover over a link, containing the target page!

  1. // ==UserScript==
  2. // @name           Hover Preview
  3. // @namespace      HP
  4. // @description    Pops up a floating div when you hover over a link, containing the target page!
  5. // @include        *
  6. // @version 0.0.1.20150213035046
  7. // ==/UserScript==
  8.  
  9. // TODO:
  10. // Don't act if the target is a file-type.  i.e. we don't want to be prompted
  11. // to save a zip file just because we hovered on it.
  12. // KNOWN UNFIXABLE BUG:
  13. // Damnit some pages break out of the iframe!  Don't try to use this on
  14. // StackOverflow links!
  15.  
  16. // if (window.document != document) {
  17. 	// return; // Don't run in iframes
  18. // }
  19.  
  20. // Quite nice on apache file listings of .jpegs, but a bit slow.  Ideally pre-load hoverable images?
  21. // Could be a bit heavy.  It depends on the page...
  22. // A different bookmarklet to turn all "links to images" into "images" would be nice. :)
  23.  
  24. var focusReactionTime = 1500;
  25. var unfocusReactionTime = 1500;
  26.  
  27. var focus = undefined;
  28. var lastFocus = undefined;
  29. var timer = null;
  30.  
  31. var myPopup;
  32. var myFrame;
  33.  
  34. var isOverPopup = false;
  35.  
  36. function checkFocus() {
  37. 	if (focus) {
  38. 		// if (focus == lastFocus) {
  39. 			// User has definitely been here a while
  40. 			showPreviewWindow(focus);
  41. 		// } else {
  42. 		// }
  43. 		// lastFocus = focus;
  44. 	}
  45. }
  46.  
  47. function eekAMouse(evt) {
  48. 	if (evt.currentTarget.tagName !== "A") {
  49. 		return;
  50. 	}
  51. 	if (!focus) {
  52. 		focus = evt.currentTarget;
  53. 		// setTimeout('checkFocus();',focusReactionTime);
  54. 		// Hack to bring the popup back immediately if we've gone back to the same link.
  55. 		if (myFrame && focus.href && myFrame.href == focus.href) {
  56. 			showPreviewWindow(focus,evt);
  57. 		} else {
  58. 			if (timer) {
  59. 				clearTimeout(timer);
  60. 			}
  61. 			timer = setTimeout(checkFocus,focusReactionTime);
  62. 		}
  63. 	} else {
  64. 		window.status = "Already focused on a link wtf!";
  65. 	}
  66. }
  67.  
  68. function phewMouseGone(evt) {
  69. 	if (evt.currentTarget.tagName !== "A") {
  70. 		return;
  71. 	}
  72. 	focus = undefined;
  73. 	if (timer) {
  74. 		clearTimeout(timer);
  75. 	}
  76. 	// TESTING: Don't hide the popup if mouse is currently over the popup!
  77. 	timer = setTimeout(clearPopup,unfocusReactionTime);
  78. }
  79.  
  80. function clearPopup(e) {
  81. 	if (isOverPopup || focus)
  82. 		return;
  83. 	if (myPopup) {
  84. 		// myPopup.parentNode.removeChild(myPopup);
  85. 		// myPopup = undefined; // eww cache it!
  86. 		myPopup.style.display = 'none';
  87. 	}
  88. }
  89.  
  90. // DONE: If the user clicks a link, this isn't really a hover, so we should not
  91. // activate and just let the user's click be processed!
  92. function aClick(evt) {
  93. 	focus = undefined;
  94. }
  95.  
  96. function createPopup() {
  97. 	// Create frame
  98. 	myPopup = document.createElement('DIV');
  99. 	/** Seems style does not work for Konqueror this way. **/
  100. 	myPopup.innerHTML =
  101. 		"<STYLE type='text/css'> iframe.preview { color: #ff8822; background-color: #ff0000; margin: 0px; padding: 2px; border: 2px solid white; text-align: center; } </STYLE>"
  102. 		+
  103. 		"<IFRAME class='preview' width='"+(window.innerWidth*0.75)+"' height='"+(window.innerHeight*0.75)+"' src='about:blank'></IFRAME>";
  104. 	myPopup.addEventListener("mouseover", function(evt) { isOverPopup=true; }, false);
  105. 	myPopup.addEventListener("mouseout", function(evt) { isOverPopup=false; setTimeout(clearPopup,unfocusReactionTime); }, false);
  106. 	document.documentElement.appendChild(myPopup);
  107. 	/*
  108. 	myPopup.style.border = "4px solid white";
  109. 	myPopup.style.backgroundColor = "#004400";
  110. 	myPopup.style.margin = "4px";
  111. 	myPopup.style.padding = "4px";
  112. 	*/
  113. 	myPopup.style.position = "fixed";
  114. 	myPopup.style.right = "12px";
  115. 	myPopup.style.bottom = "12px";
  116. 	myPopup.style.zIndex = "10000";
  117. 	myFrame = myPopup.getElementsByTagName('IFRAME')[0];
  118. }
  119.  
  120. function showPreviewWindow(link,evt) {
  121. 	if (!myFrame) {
  122. 		createPopup();
  123. 	}
  124. 	myPopup.style.display = '';
  125. 	if (!myFrame.src || myFrame.src != link.href)
  126. 		myFrame.src = link.href;
  127. }
  128.  
  129. function init() {
  130. 	for (var i=0;i<document.links.length;i++) {
  131. 		var link = document.links[i];
  132. 		/** Apparently deprecated. **/
  133. 		// link.onmouseover = eekAMouse;
  134. 		// link.onmouseout = phewMouseGone;
  135. 		/** The new way: **/
  136. 		link.addEventListener("mouseover", eekAMouse, false);
  137. 		link.addEventListener("mouseout", phewMouseGone, false);
  138. 		link.addEventListener("click", aClick, false);
  139. 		// link.addEventListener("mousemove", function(evt) { locate(evt); }, true);
  140. 	}
  141. }
  142.  
  143. init();
  144.  
  145. // window.document.checkFocus = checkFocus;
  146.