☰

Layout fixer

This script allows 1920x1080 screen users to adjust pages layout

目前为 2014-12-07 提交的版本。查看 最新版本。

  1. // ==UserScript==
  2. // @name          Layout fixer
  3. // @namespace     Layout fixer
  4. // @version       3.02
  5. // @description   This script allows 1920x1080 screen users to adjust pages layout
  6. // @author        leandro.azevedo@gmail.com
  7.  
  8. // @icon          http://i.imgur.com/pLg6myd.png
  9. // @resource      imgWide http://s9.postimg.org/n3jzwyoi3/img_Wide.png
  10. // @resource      imgNarrow http://s9.postimg.org/5c8dii93f/img_Narrow.png
  11.  
  12. // @grant         GM_addStyle
  13. // @grant         GM_getResourceURL
  14. // @grant         GM_getValue
  15. // @grant         GM_setValue
  16.  
  17. // @run-at		  document-end
  18.  
  19. /*********** INCLUSUINS ***********/
  20. // @include	*
  21.  
  22. /*********** EXCLUSUINS ***********/
  23. // @exclude	*google.*tbm=isch*
  24. // @exclude	*google.*/maps/*
  25. // @exclude	*google.com/imgres*
  26. // @exclude	*.jpg
  27. // @exclude	*.gif
  28. // @exclude	*.png
  29.  
  30. // ==/UserScript==
  31.  
  32.  
  33.  
  34. 	/* options */
  35.  
  36. 	var mode 		= 2;	// 1: wide / 2: narrow
  37. 	var docWidth	= 1000;
  38. 	var imgWide 	= GM_getResourceURL("imgWide");
  39. 	var imgNarrow	= GM_getResourceURL("imgNarrow");
  40. 	
  41. 	if ( GM_getValue ("exceptionsList")===undefined ) GM_setValue ("exceptionsList", "");
  42. 	var exceptionsList = GM_getValue("exceptionsList");
  43. 	/* reset exceptions */
  44. 	//GM_setValue ("exceptionsList", "");
  45.  
  46. 	
  47. 	/* functions  */
  48. 	
  49. 	function getComputedStyle(el,styleProp){
  50. 	    var y;
  51. 		if (el.currentStyle)
  52. 			y = el.currentStyle[styleProp];
  53. 		else if (window.getComputedStyle)
  54. 			y = document.defaultView.getComputedStyle(el,null).getPropertyValue(styleProp);
  55. 		return y;
  56. 	}
  57.  
  58. 	function setHeight(){
  59. 		var body = document.body,
  60. 			html = document.documentElement;
  61. 		maxHeight = Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight );
  62. 		GM_addStyle('body {height:' + maxHeight + 'px');
  63. 	}
  64.  
  65. 	function switchLayout(){
  66. 		var exceptionsList = GM_getValue("exceptionsList");
  67.  
  68. 		if (mode==2) { // go wide
  69. 			mode = 1;
  70. 			img.src = imgWide;
  71. 			if ( exceptionsList.indexOf(cUrl)==-1 ) GM_setValue ("exceptionsList", exceptionsList + "," + cUrl);
  72. 			
  73. 			GM_addStyle('html {width: 100%}');
  74. 			GM_addStyle('html {margin: 0}');
  75. 			GM_addStyle('body {border: none; box-shadow: none; margin: 0}');
  76. 			
  77. 		} else { // go narrow
  78. 			mode = 2;
  79. 			img.src = imgNarrow;
  80. 			if ( exceptionsList.indexOf(cUrl)!=-1 ) GM_setValue ("exceptionsList", exceptionsList.replace("," + cUrl , "") );
  81. 			
  82. 			setNarrow();
  83. 		} 
  84. 	}
  85.  
  86. 	function setNarrow(){
  87. 	
  88. 		GM_addStyle('html {position: relative; width: ' +docWidth+ 'px; margin-left: auto; margin-right: auto; background: #eee;}');
  89. 		GM_addStyle('body {width: 100%; border-left: 1px solid #999; border-right: 1px solid #999; box-shadow: 0 0 5px 1px #bbb; padding: 0; margin: 0}');
  90.  
  91. 		// GM_addStyle('body {padding: 0');
  92. 		// GM_addStyle('* {min-width: 1px}');
  93. 		// GM_addStyle('* {max-width: ' + docWidth + 'px;}');
  94. 		
  95. 		if ( getComputedStyle( document.body, 'background-color')=='transparent') GM_addStyle('body {background-color: #fff');
  96.  
  97.  
  98. 		// get flexible width from widest ( exclude position fixed, absolute)
  99.  
  100. 		elms = document.body.getElementsByTagName("*");
  101. 		var w;
  102. 		for (i=0 ; i<elms.length; i++) {
  103.  
  104. 			/* ajust for wider */
  105. 			//if (parseInt( getComputedStyle( elms[i], 'min-width') , 10) > docWidth){
  106. 			//if (parseInt( getComputedStyle( elms[i], 'width') , 10) > docWidth){
  107. 			if ( elms[i].offsetWidth > docWidth ) {
  108.  
  109. 				//GM_addStyle( 'html {width: ' + elms[i].offsetWidth + 'px}');
  110. 				//docWidth = elms[i].offsetWidth;
  111. 				
  112. 				//docWidth = parseInt( getComputedStyle( elms[i], 'width') , 10 );
  113. 				elms[i].style.width = docWidth + 'px'; 
  114. 				elms[i].style.padding = '0'; 
  115. 				elms[i].style.border = 'none'; 
  116. 			}
  117.  
  118.  
  119. 			if ( (getComputedStyle( elms[i], 'position')=='fixed') && (getComputedStyle( elms[i], 'left')=='0px') ) {
  120. 				elms[i].style.left = docLeft+1 + 'px'; 
  121. 			}
  122. 			if ( (getComputedStyle( elms[i], 'position')=='absolute') && (getComputedStyle( elms[i], 'left')=='0px') ) {
  123. 				elms[i].style.left = '1px'; 
  124. 			}
  125.  
  126. 			
  127. 			
  128. 		}
  129.  
  130. 		setHeight();
  131. 	}
  132.  
  133. 	
  134. 	/* code  */
  135. 	
  136.  
  137. 	var cUrl = document.URL.match(/(\w{2,}\.\w{2,}\.\w{2,}|\w{2,}\.\w{2,3})/)[0];
  138. 	var docLeft = (window.innerWidth-docWidth-16)/2;
  139. 	var i, elms, css;
  140. 	
  141. 	if ( ( exceptionsList.indexOf(cUrl)==-1 ) && (mode==2) ) {
  142. 		setNarrow();
  143. 		window.addEventListener ("load", setHeight); // after full load
  144. 	} else {
  145. 		mode=1;
  146. 	}
  147. 	
  148. 	/* switcher button */
  149. 	var img = new Image();
  150. 	img.id = 'switcher';
  151.  
  152.  
  153. 	img.src = (mode==2) ? imgNarrow : imgWide;
  154.  
  155. 	img.onload = function() {
  156. 		document.body.appendChild(img);
  157. 		GM_addStyle('#switcher {position: fixed; bottom: 10px; right: 10px; z-index: 99999; opacity: 0.5}');
  158. 	};
  159.  
  160. 	img.addEventListener("click", switchLayout);
  161. 	img.addEventListener("mouseover", function() { img.style.opacity = '1'; } );
  162. 	img.addEventListener("mouseout", function() { img.style.opacity = '0.5'; } );
  163. 	
  164.  
  165. 	/*
  166. 	This script allows 1920x1080 screen users to adjust pages layout:
  167. 	<img src="http://s9.postimg.org/j9qjnt767/screenshot_2.png">
  168. 	<img src="http://s9.postimg.org/5u3iycyof/screenshot_3.png">
  169. 	<img src="http://s9.postimg.org/guyo3dqx7/screenshot_4.png">
  170. 	<img src="http://s9.postimg.org/ymaahu6bv/screenshot_5.png">
  171. 	*/
  172.