☰

TextReFlower

click on text to reflow into visible area, Android FF USI

  1. // ==UserScript==
  2. // @name             TextReFlower
  3. // @version          0.1.0
  4. // @author           _leBluem_
  5. // @description      click on text to reflow into visible area, Android FF USI 
  6. // @info             it does this for the text and some parents
  7. // @info             if your lucky, you only have to click once!
  8. // @info             if it already fits the click is ignored
  9. // @info             also works under Android with Firefox and USI UserScriptInjector
  10. // @namespace        https://greasyfork.org/de/users/83368-lebluem
  11. // @include          *
  12. // @clean-include    true
  13. // @run-at           document-ready
  14. // @include-jquery   true
  15. // @use-greasemonkey true
  16. // ==/UserScript==
  17.  
  18. // ==info==
  19. // before using this make sure you tried changing the default 
  20. // font size in your browser, on mobiles default is tiny ...
  21. //
  22. // this is simply the userscript version of (with a twist) 
  23. //   https://addons.mozilla.org/en-US/android/addon/android-text-reflow/
  24. //     or (which is enabled by default)
  25. //   https://addons.mozilla.org/de/android/addon/android-text-reflow/ 
  26. // see also:
  27. //   https://addons.mozilla.org/en-US/android/addon/fit-text-to-width/?src=ss
  28. // ==/info==
  29.  
  30. (function () {
  31. 	// inject into dom
  32.   document.addEventListener("click", function(evt){
  33. 		//alert("klick!");
  34. 		fnAddReflow(window,evt);
  35. 	});
  36.  
  37. 	// how many parent objects of the clicked one will be reflown...
  38. 	// three (default) levels seems to be enough for a whole article
  39. 	var parentLevel = 3;
  40. 	// le/ri margin in pixels
  41. 	var sideMargin = 15;
  42.  
  43. 	// The main routine, click event.
  44. 	// Clicking any text will resize that text width to fit.
  45. 	// If it already fits nothing happens
  46. 	function fnAddReflow(cWin,e) {
  47. 		//cWin is chromeWindow, .content gets html window
  48. 		var win = cWin.content;
  49.  
  50. 		// get device width in css pixels
  51. 		var winWidth=win.content.innerWidth;
  52.  
  53. 		// get nearest non-inline parent.
  54. 		var target = e.target;
  55. 		for(var i=e.target; i!==null; i = i.parentElement) {
  56. 			var icss = win.getComputedStyle(i);
  57. 			target = i;
  58. 			if(icss.display!='inline') break;
  59. 			//if(icss.['display']!='inline') break;
  60. 		}
  61.  
  62. 		// get width/left values for target tag
  63. 		var bbox = target.getBoundingClientRect();
  64.  
  65. 		// if box is wider than screen, reset width to make it fit
  66. 		if(bbox.width>winWidth) {
  67. 			var newWidth = winWidth - (2*sideMargin);
  68. 			// do for selected text and some parents
  69. 			for (var j=0; j<parentLevel; j++) {
  70. 				target.parentNode.style.width = newWidth + "px";
  71. 				target=target.parparentNode;
  72. 			}
  73. 			// do for whole document
  74. 			win.document.style.width = newWidth + "px";
  75. 			//win.document.documentElement.scrollLeft += bbox.left - sideMargin;
  76. 		} else {
  77. 			// do for selected text and some parents
  78. 			for (var k=0; k<parentLevel; k++) {
  79. 				target.parentNode.style.width = "";
  80. 				target=target.parparentNode;
  81. 			}
  82. 			win.document.style.width = "";
  83. 		}
  84. 	}
  85. })();