☰

beautifier

自定义页面背景图，布局优化

目前为 2022-08-27 提交的版本，查看 最新版本。

此脚本不应直接安装，它是供其他脚本使用的外部库。如果你需要使用该库，请在脚本元属性加入：// @require https://update.cn-greasyfork.org/scripts/450211/1086448/beautifier.js 

  1. /* eslint-disable no-multi-spaces */
  2. /* eslint-disable no-implicit-globals */
  3. /* eslint-disable userscripts/no-invalid-headers */
  4. /* eslint-disable userscripts/no-invalid-grant */
  5.  
  6. // ==UserScript==
  7. // @name               beautifier
  8. // @displayname        页面美化
  9. // @namespace          Wenku8++
  10. // @version            0.2.5
  11. // @description        自定义页面背景图，布局优化
  12. // @author             PY-DNG
  13. // @license            GPL-v3
  14. // @regurl             https?://www\.wenku8\.net/.*
  15. // @require            https://greasyfork.org/scripts/449412-basic-functions/code/Basic%20Functions.js?version=1085783
  16. // @require            https://greasyfork.org/scripts/449583-configmanager/code/ConfigManager.js?version=1085902
  17. // @grant              GM_getValue
  18. // @grant              GM_setValue
  19. // @grant              GM_listValues
  20. // @grant              GM_deleteValue
  21. // ==/UserScript==
  22.  
  23. (function __MAIN__() {
  24. 	const alertify = require('alertify');
  25. 	const settings = require('settings');
  26. 	const SettingPanel = require('SettingPanel');
  27.  
  28. 	const CONST = {
  29. 		Text: {
  30. 			CommonBeautify: '通用页面美化',
  31. 			NovelBeautify: '阅读页面美化',
  32. 			ReviewBeautify: '书评页面美化',
  33. 			DefaultBeautify: '默认页面美化图片',
  34. 			Enable: '启用',
  35. 			BackgroundImage: '背景图片',
  36. 			AlertTitle: '页面美化设置',
  37. 			InvalidImageUrl: '图片链接格式错误</br>仅仅接受http/https/data链接',
  38. 		},
  39. 		ClassName: {
  40. 			BgImage: 'plus_cbty_image',
  41. 			BgCover: 'plus_cbty_cover',
  42. 			CSS: 'plus_beautifier'
  43. 		},
  44. 		CSS: {
  45. 			Common: '.plus_cbty_image {position: fixed;top: 0;left: 0;z-index: -2;}.plus_cbty_cover {position: fixed;top: 0;left: calc((100vw - 960px) / 2);z-Index: -1;background-color: rgba(255,255,255,0.7);width: 960px;height: 100vh;}body {overflow: auto;}body>.main {position: relative;margin-left: 0;margin-right: 0;left: calc((100vw - 960px) / 2);}body.plus_cbty table.grid td, body.plus_cbty .odd, body.plus_cbty .even, body.plus_cbty .blockcontent {background-color: rgba(255,255,255,0) !important;}.textarea, .text {background-color: rgba(255,255,255,0.9);}#headlink{background-color: rgba(255,255,255,0.7);}',
  46. 			Novel: 'html{background-image: url({BGI});}body {width: 100vw;height: 100vh;overflow: overlay;margin: 0px;background-color: rgba(255,255,255,0.7);}#contentmain {overflow-y: auto;height: calc(100vh - {H});max-width: 100%;min-width: 0px;max-width: 100vw;}#adv1, #adtop, #headlink, #footlink, #adbottom {overflow: overlay;min-width: 0px;max-width: 100vw;}#adv900, #adv5 {max-width: 100vw;}'
  47. 		},
  48. 		Config_Ruleset: {
  49. 			'version-key': 'config-version',
  50. 			'ignores': ["LOCAL-CDN"],
  51. 			'defaultValues': {
  52. 				//'config-key': {},
  53. 				common: {
  54. 					enable: false,
  55. 					image: null
  56. 				},
  57. 				novel: {
  58. 					enable: false,
  59. 					image: null
  60. 				},
  61. 				review: {
  62. 					enable: false,
  63. 					image: null
  64. 				},
  65. 				image: null
  66. 			},
  67. 			'updaters': {
  68. 				/*'config-key': [
  69. 					function() {
  70. 						// This function contains updater for config['config-key'] from v0 to v1
  71. 					},
  72. 					function() {
  73. 						// This function contains updater for config['config-key'] from v1 to v2
  74. 					}
  75. 				]*/
  76. 			}
  77. 		}
  78. 	};
  79.  
  80. 	const CM = new ConfigManager(CONST.Config_Ruleset);
  81. 	const CONFIG = CM.Config;
  82. 	CM.setDefaults();
  83. 	const API = getAPI();
  84. 	switch (API[0]) {
  85. 		case 'novel':
  86. 			[...API].pop() !== 'index.htm' && CONFIG.novel.enable && novel();
  87. 			break;
  88. 		default:
  89. 			CONFIG.common.enable && common();
  90. 	}
  91. 	settings.registerSettings(MODULE_IDENTIFIER, setter);
  92.  
  93. 	exports = {
  94. 		//
  95. 	};
  96.  
  97.     // Beautifier for all wenku pages
  98. 	function common() {
  99. 		const src = CONFIG.common.image || CONFIG.image;
  100.  
  101. 		const img = $CrE('img');
  102. 		img.src = src;
  103. 		img.classList.add(CONST.ClassName.BgImage);
  104. 		document.body.appendChild(img);
  105.  
  106. 		const cover = $CrE('div');
  107. 		cover.classList.add(CONST.ClassName.BgCover);
  108. 		document.body.appendChild(cover);
  109.  
  110. 		document.body.classList.add('plus_cbty');
  111. 		addStyle(CONST.CSS.Common, CONST.ClassName.CSS);
  112. 		return true;
  113. 	}
  114.  
  115. 	// Novel reading page
  116. 	function novel() {
  117. 		const src = CONFIG.novel.image || CONFIG.image;
  118. 		const config = CONFIG.BeautifierCfg.getConfig();
  119. 		const usedHeight = getRestHeight();
  120.  
  121. 		addStyle(CONST.CSS.Novel
  122. 				 .replaceAll('{BGI}', src)
  123. 				 .replaceAll('{H}', usedHeight), CONST.ClassName.CSS
  124. 				);
  125.  
  126. 		unsafeWindow.scrolling = beautiful_scrolling;
  127.  
  128. 		// Get rest height without #contentmain
  129. 		function getRestHeight() {
  130. 			let usedHeight = 0;
  131. 			['adv1', 'adtop', 'headlink', 'footlink', 'adbottom'].forEach((id) => {
  132. 				const node = $('#'+id);
  133. 				if (node instanceof Element && node.id !== 'contentmain') {
  134. 					const cs = getComputedStyle(node);
  135. 					['height', 'marginTop', 'marginBottom', 'paddingTop', 'paddingBottom', 'borderTop', 'borderBottom'].forEach((style) => {
  136. 						const reg = cs[style].match(/([\.\d]+)px/);
  137. 						reg && (usedHeight += Number(reg[1]));
  138. 					});
  139. 				};
  140. 			});
  141. 			usedHeight = usedHeight.toString() + 'px';
  142. 			return usedHeight;
  143. 		}
  144.  
  145. 		// Mouse dblclick scroll with beautifier applied
  146. 		function beautiful_scrolling() {
  147. 			var contentmain = pageResource.elements.contentmain;
  148. 			var currentpos = contentmain.scrollTop || 0;
  149. 			contentmain.scrollTo(0, ++currentpos);
  150. 			var nowpos = contentmain.scrollTop || 0;
  151. 			if(currentpos != nowpos) unsafeWindow.clearInterval(timer);
  152. 		}
  153. 	}
  154.  
  155. 	// Settings
  156. 	function setter() {
  157. 		const storage = {
  158. 			GM_getValue: GM_getValue,
  159. 			GM_setValue: GM_setValue,
  160. 			GM_listValues: GM_listValues,
  161. 			GM_deleteValue: GM_deleteValue
  162. 		};
  163. 		const Panel = SettingPanel.SettingPanel;
  164. 		const SetPanel = new Panel({
  165. 			tables: [{
  166. 				rows: [{
  167. 					blocks: [{
  168. 						isHeader: true,
  169. 						colSpan: 2,
  170. 						innerText: CONST.Text.CommonBeautify
  171. 					}]
  172. 				},{
  173. 					blocks: [{
  174. 						innerText: CONST.Text.Enable
  175. 					},{
  176. 						options: [{
  177. 							path: 'common/enable',
  178. 							type: 'boolean'
  179. 						}]
  180. 					}]
  181. 				},{
  182. 					blocks: [{
  183. 						innerText: CONST.Text.BackgroundImage
  184. 					},{
  185. 						options: [{
  186. 							path: 'common/image',
  187. 							type: 'string',
  188. 							checker: imageUrlChecker,
  189. 						}]
  190. 					}]
  191. 				}]
  192. 			},{
  193. 				rows: [{
  194. 					blocks: [{
  195. 						isHeader: true,
  196. 						colSpan: 2,
  197. 						innerText: CONST.Text.NovelBeautify
  198. 					}]
  199. 				},{
  200. 					blocks: [{
  201. 						innerText: CONST.Text.Enable
  202. 					},{
  203. 						options: [{
  204. 							path: 'novel/enable',
  205. 							type: 'boolean'
  206. 						}]
  207. 					}]
  208. 				},{
  209. 					blocks: [{
  210. 						innerText: CONST.Text.BackgroundImage
  211. 					},{
  212. 						options: [{
  213. 							path: 'novel/image',
  214. 							type: 'string',
  215. 							checker: imageUrlChecker,
  216. 						}]
  217. 					}]
  218. 				}]
  219. 			},{
  220. 				rows: [{
  221. 					blocks: [{
  222. 						isHeader: true,
  223. 						colSpan: 2,
  224. 						innerText: CONST.Text.ReviewBeautify
  225. 					}]
  226. 				},{
  227. 					blocks: [{
  228. 						innerText: CONST.Text.Enable
  229. 					},{
  230. 						options: [{
  231. 							path: 'review/enable',
  232. 							type: 'boolean'
  233. 						}]
  234. 					}]
  235. 				},{
  236. 					blocks: [{
  237. 						innerText: CONST.Text.BackgroundImage
  238. 					},{
  239. 						options: [{
  240. 							path: 'review/image',
  241. 							type: 'string',
  242. 							checker: imageUrlChecker,
  243. 						}]
  244. 					}]
  245. 				}]
  246. 			},{
  247. 				rows: [{
  248. 					blocks: [{
  249. 						isHeader: true,
  250. 						colSpan: 2,
  251. 						innerText: CONST.Text.DefaultBeautify
  252. 					}]
  253. 				},{
  254. 					blocks: [{
  255. 						innerText: CONST.Text.BackgroundImage
  256. 					},{
  257. 						options: [{
  258. 							path: 'image',
  259. 							type: 'string',
  260. 							checker: imageUrlChecker,
  261. 						}]
  262. 					}]
  263. 				}]
  264. 			}]
  265. 		}, storage);
  266.  
  267. 		function imageUrlChecker(e, value) {
  268. 			if (!value.match(/.+:/)) {
  269. 				alertify.alert(CONST.Text.AlertTitle, CONST.Text.InvalidImageUrl);
  270. 				return false;
  271. 			}
  272. 			e.target.value = value || null;
  273. 			return true;
  274. 		}
  275. 	}
  276. })();