☰

TextReFlower

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

// ==UserScript==
// @name             TextReFlower
// @version          0.1.0
// @author           _leBluem_
// @description      click on text to reflow into visible area, Android FF USI 
// @info             it does this for the text and some parents
// @info             if your lucky, you only have to click once!
// @info             if it already fits the click is ignored
// @info             also works under Android with Firefox and USI UserScriptInjector
// @namespace        https://greasyfork.org/de/users/83368-lebluem
// @include          *
// @clean-include    true
// @run-at           document-ready
// @include-jquery   true
// @use-greasemonkey true
// ==/UserScript==

// ==info==
// before using this make sure you tried changing the default 
// font size in your browser, on mobiles default is tiny ...
//
// this is simply the userscript version of (with a twist) 
//   https://addons.mozilla.org/en-US/android/addon/android-text-reflow/
//     or (which is enabled by default)
//   https://addons.mozilla.org/de/android/addon/android-text-reflow/ 
// see also:
//   https://addons.mozilla.org/en-US/android/addon/fit-text-to-width/?src=ss
// ==/info==

(function () {
	// inject into dom
  document.addEventListener("click", function(evt){
		//alert("klick!");
		fnAddReflow(window,evt);
	});

	// how many parent objects of the clicked one will be reflown...
	// three (default) levels seems to be enough for a whole article
	var parentLevel = 3;
	// le/ri margin in pixels
	var sideMargin = 15;

	// The main routine, click event.
	// Clicking any text will resize that text width to fit.
	// If it already fits nothing happens
	function fnAddReflow(cWin,e) {
		//cWin is chromeWindow, .content gets html window
		var win = cWin.content;

		// get device width in css pixels
		var winWidth=win.content.innerWidth;

		// get nearest non-inline parent.
		var target = e.target;
		for(var i=e.target; i!==null; i = i.parentElement) {
			var icss = win.getComputedStyle(i);
			target = i;
			if(icss.display!='inline') break;
			//if(icss.['display']!='inline') break;
		}

		// get width/left values for target tag
		var bbox = target.getBoundingClientRect();

		// if box is wider than screen, reset width to make it fit
		if(bbox.width>winWidth) {
			var newWidth = winWidth - (2*sideMargin);
			// do for selected text and some parents
			for (var j=0; j<parentLevel; j++) {
				target.parentNode.style.width = newWidth + "px";
				target=target.parparentNode;
			}
			// do for whole document
			win.document.style.width = newWidth + "px";
			//win.document.documentElement.scrollLeft += bbox.left - sideMargin;
		} else {
			// do for selected text and some parents
			for (var k=0; k<parentLevel; k++) {
				target.parentNode.style.width = "";
				target=target.parparentNode;
			}
			win.document.style.width = "";
		}
	}
})();