☰

HKGalden Quote Folder

縮短引用、縮小引用內圖片

  1. // ==UserScript==
  2. // @name        HKGalden Quote Folder
  3. // @namespace   https://userscripts.org/scripts/show/406097
  4. // @description 縮短引用、縮小引用內圖片
  5. // @author      HKGalden 小磁怪
  6. // @license     MIT License
  7. // @include     https://hkgalden.com/view/*
  8. // @include     http://hkgalden.com/view/*
  9. // @version     140728
  10. // @icon        https://hkgalden.com/favicon.ico
  11. // @grant       none
  12. // ==/UserScript==
  13.  
  14. /* ********* 更新記錄 *********
  15. 版本140728
  16.  - 連結修正
  17. 版本140725
  18.  - 沒有更新
  19. 版本140310
  20.  - 修復一個會令「快速引用」不能正常彈出的BUG
  21. 版本140309
  22.  - 改善程式碼
  23.  - 以圖示取代原有的文字按鈕
  24.  - 在所有引用層加入暫時縮短功能
  25. 版本140307-1
  26.  - 走位修正
  27. *************************** */
  28.  
  29. /*jslint browser: true, devel: true, plusplus: true, es5: true,  white: true */
  30. /*jshint browser: true, devel: true, jquery: true, multistr: true, globalstrict: true */
  31. /*global Storage, $*/
  32. 'use strict';
  33.  
  34. var qf_version = '140728';
  35.  
  36. //載入設定
  37. var show_level, img_height, have_storage, tmp;
  38. have_storage = (Storage !== undefined);
  39. if (have_storage) {
  40. 	tmp = localStorage.getItem('qf_settings_show_level');
  41. 	if (!tmp) {
  42. 		localStorage.setItem('qf_settings_show_level', 3);
  43. 		show_level = 3;
  44. 	} else {
  45. 		show_level = parseInt(tmp, 10);
  46. 		console.log('HKG Quote Folder : localStorage Quote Level = ' + show_level);
  47. 	}
  48. 	tmp = localStorage.getItem('qf_settings_img_height');
  49. 	if (!tmp) {
  50. 		localStorage.setItem('qf_settings_img_height', 150);
  51. 		img_height = 150;
  52. 	} else {
  53. 		img_height = parseInt(tmp, 10);
  54. 		console.log('HKG Quote Folder : localStorage Image Max Height = ' + img_height);
  55. 	}
  56. } else {
  57. 	show_level = 3;
  58. 	img_height = 150;
  59. 	console.log('HKG Quote Folder : No localStorage support');
  60. }
  61.  
  62. //判斷A<=x<=B的簡便方法
  63. //http://indisnip.wordpress.com/2010/08/26/quicktip-check-if-a-number-is-between-two-numbers/
  64. Number.prototype.between = function (first, last) {
  65. 	return (first < last ? this >= first && this <= last : this >= last && this <= first);
  66. };
  67.  
  68. $(function () {
  69.  
  70. 	//修正Firefox按鈕虛線外框問題，此項CSS無法透過jQuery.fn.css方法添加
  71. 	//http://www.karlrixon.co.uk/writing/remove-button-focus-outline-using-css/
  72. 	$('head').append('<style type="text/css"> \
  73. 						button[class^="qf_btn_"]::-moz-focus-inner { \
  74. 							border: 0; \
  75. 						} \
  76. 						</style> \
  77. 					');
  78.  
  79. 	//圖示
  80. 	//Tango Icon Library | https://www.iconfinder.com/search/?q=iconset:tango-icon-library
  81. 	var icon_plus = 'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABmJLR0QA/wD/AP+gvaeTAAABzklEQVRIie2UvWuTURTGf+fNR41iRWxV/FgU3QQXVxEcFJyEDo6dHATFzdEU/AMsrh10EAQt/QvaDg6uOpRu6pDUxqavxIbqmzf3PA5JNNFoXkFBpA/c5d5zz/Oc+5xzYQf/PSxr4PlbTx9Gke0CMClZnp2aBtOoe/msBFcvnL5y8tjEBMDrSn1zef+MUebPEWAQNxMEo7P2IfqNWAAkCO5/h0ACZODZixj6RBdvzz8qjOVKg7tWEIYANytcSs7OcWfhK1H6OYSl2anr3+ca2kX3F15tnDjaMVQIZLhE3EyRYN/uPC5DEi4hweqbWu3e9LnDGSqQJa2XXom3QR1DJSN4J1EaYHMrpR1E20UIIjh82EqGGvMjQXnG4uZlL5RKyCGIrkrjXZzgwMHxIi4RXLg6MR8/tUJGgrt6cfPZY8tVi/3bZ04dumbFvZMSVNc36qtv3z8xfRs0dyXDCDJP8o0Hz6s2Nn5EgtZ2Y22usXSccnlkv2ZpUwNy7o4ELnAXrKxkEvezSY6AXPc8B0TtICuoZ7gbi4t7gBRoAwHIaPIgQW/lK2uxTR5I111Srd6ISNMCg7/G0F/kV2VGXQFR3+rFq6u4p7w9LPkO/g18ATeq4QJygwMsAAAAAElFTkSuQmCC)';
  82. 	//FS Icons Ubuntu | https://www.iconfinder.com/search/?q=iconset:fs-icons-ubuntu-by-franksouza-
  83. 	var icon_minus = 'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAADhSURBVDiN7dRBSgNBFITh/3WcEXSrLlWI5/FArryA9/EOHkDwAAaUKEJIGKe7yoUG02QUN9nI1O5R3R80NC9ss4uknagjPMKD2dscZjeXR23y/vaxZTWtBqoSjc6ubmeDcDu9uMvz53MwCWPrs/ABWGDAorEJjGSiNUUC0ioiTmwvtuB+/lL6h3uaScLx8zPXVQJssEznVHkVnLNQV/BEv8KbsUHFmFTdqOE+s+wyXQqCv8nGFEGmVB+hgh+fXq/fDo9PkbAxCL62lEohHBbiuwdJgHBEBt7XVozbbYT/AfwBNxB4sYl2bPoAAAAASUVORK5CYII=)';
  84.  
  85. 	//摺疊按鈕
  86. 	$('head').append('<style type="text/css"> \
  87. 						div.qf_fold_btn { \
  88. 							width: 30px; \
  89. 							height: 30px; \
  90. 							background-repeat: no-repeat; \
  91. 							cursor: pointer; \
  92. 							position: absolute; \
  93. 							display: inherit; \
  94. 							margin-left: -27px; \
  95. 							opacity: 0; \
  96. 						} \
  97. 						div.qf_btn_plus { \
  98. 							background-image: ' + icon_plus + ' \
  99. 						} \
  100. 						div.qf_btn_minus { \
  101. 							background-image: ' + icon_minus + ' \
  102. 						} \
  103. 					</style>');
  104.  
  105. 	//根據顯示層數產生Selector
  106. 	function quote_selector(n) {
  107. 		var i, r = 'div.ctn';
  108. 		for (i = 1; i <= show_level; i++) {
  109. 			r += ' > blockquote' + (n===true?' > div':'');
  110. 		}
  111. 		return r;
  112. 	}
  113.  
  114. 	//產生摺疊按鈕
  115. 	function create_fold_btn() {
  116. 		$('div.ctn').find('blockquote')
  117. 			.each(function (index) {
  118. 				if ((!$(this).hasClass('qf_quote_mod'))) {
  119. 					$(this)
  120. 						.addClass('qf_quote_mod qf_quote_' + index)
  121. 						.wrapInner('<div class="qf_content"></div>')
  122. 						.prepend('<div class="qf_fold_btn qf_btn_minus"></div>');
  123. 				}
  124. 			});
  125. 		$('div.ctn > blockquote')
  126. 			.off('mouseover mouseout')
  127. 			.on('mouseover mouseout', function (e) {
  128. 				e.stopPropagation();
  129. 				var target = $(e.target),
  130. 					target_bq = (target.prop('tagName') === 'BLOCKQUOTE') ? target : target.parent('blockquote'),
  131. 					target_btn = target_bq.children('.qf_fold_btn').first();
  132. 				if (e.type === 'mouseover') {
  133. 					target_btn.fadeTo(100, 1).clearQueue();
  134. 				} else {
  135. 					if (target_btn.hasClass('qf_btn_minus')) {
  136. 						target_btn.fadeTo(100, 0).clearQueue();
  137. 					}
  138. 				}
  139. 				if (target.hasClass('qf_fold_btn')) {
  140. 					if (e.type === 'mouseover') {
  141. 						if (target_bq.children('div.qf_content').first().is(':visible')) {
  142. 							target_bq.css('outline', '1px dotted black');
  143. 						}
  144. 					} else {
  145. 						target_bq.css('outline', 'none');
  146. 						if (target.hasClass('qf_btn_minus')) {
  147. 							target.fadeTo(100, 0).clearQueue();
  148. 						}
  149. 					}
  150. 				}
  151. 			});
  152. 		$('.qf_fold_btn')
  153. 			.unbind('click') 
  154. 			.click(function (e, d) {
  155. 				if (d === undefined) {d = false;}
  156. 				var blockquote = $(this).closest('blockquote');
  157. 				if ($(this).hasClass('qf_btn_minus')) {
  158. 					if (!(d && blockquote.hasClass('qf_d'))) {
  159. 						blockquote
  160. 							.css({
  161. 								'outline'	: 'none',
  162. 								'height'	: '20px'
  163. 							})
  164. 							.children('div.qf_content').first().hide();
  165. 						$(this)
  166. 							.removeClass('qf_btn_minus').addClass('qf_btn_plus');
  167. 					}
  168. 					if (d) {
  169. 						$(this).fadeTo(0, 1).clearQueue();
  170. 						blockquote
  171. 							.addClass('qf_d');
  172. 					}
  173. 				} else if (!d && $(this).hasClass('qf_btn_plus')) {
  174. 					blockquote
  175. 						.css({
  176. 							'outline'		: '1px dotted black',
  177. 							'height'		: 'auto'
  178. 						})
  179. 						.children('div.qf_content').first().show();
  180. 					$(this)
  181. 						.removeClass('qf_btn_plus').addClass('qf_btn_minus');
  182. 				}
  183. 			});
  184. 		$(quote_selector(true) + '.qf_fold_btn')
  185. 			.trigger('click', [true]);
  186. 	}
  187.  
  188. 	if (img_height >= 1) {
  189. 		$('blockquote').find('img').css('max-height', img_height + 'px');
  190. 	}
  191. 	if (show_level >= 1) {
  192. 		create_fold_btn();
  193. 		$(document).ajaxComplete(function (event, xhr, settings) {
  194. 			if (settings.url === '/ajax/loadReplies') {
  195. 				console.log('HKG Quote Folder : ajaxComplete');
  196. 				create_fold_btn();
  197. 			}
  198. 		});
  199. 	}
  200.  
  201. 	//設定面版
  202. 	$('section.gpt.author > div > div > div.ract')
  203. 		.prepend('<span class="qf_panel_show">引用縮短設定</span>');
  204. 	$('div#main > article')
  205. 		.before('<div class="qf_panel nxt"></div>');
  206. 	$('span.qf_panel_show')
  207. 		.click(function () {
  208. 			if (!$('.qf_panel').is(':visible')) {
  209. 				if (have_storage) {
  210. 					$('.qf_panel').fadeIn(100);
  211. 				} else {
  212. 					alert('你的瀏覽器不支援 localStorage，無法更改設定');
  213. 				}
  214. 			}
  215. 		});
  216. 	$('.qf_panel')
  217. 		.css({
  218. 			'width'				: '325px',
  219. 			'height'			: '210px',
  220. 			'padding'			: '10px 10px 10px 10px',
  221. 			'z-index'			: '2046',
  222. 			'position'			: 'fixed',
  223. 			'top'				: '50%',
  224. 			'left'				: '50%',
  225. 			'margin-top'		: '-105px',
  226. 			'margin-left'		: '-162px',
  227. 			'box-shadow'		: '3px 3px 4px #888888',
  228. 			'box-sizing'		: 'border-box',
  229. 			'-moz-box-sizing'	: 'border-box'
  230. 		})
  231. 		.hide()
  232. 		.draggable({containment: 'window'})
  233. 		.html('<span class="qf_title">引用縮短設定</span><br /> \
  234. 				<div class="qf_options"> \
  235. 					顯示層數<br />預設3，最小1(隱藏引用)，0關閉<br /> \
  236. 					<input type="number" class="qf_panel_level" name="qf_panel_level" min="0" max="100"></input><br /> \
  237. 					引用圖片最大高度(px)，0關閉<br /> \
  238. 					<input type="number" class="qf_panel_imgh" name="qf_panel_imgh" min="1" max="10000"></input><br /> \
  239. 				</div> \
  240. 				<button class="qf_save qf_btn">儲存</button> \
  241. 				<button class="qf_cancel qf_btn">取消</button> \
  242. 				<span class="qf_about">版本 ' + qf_version + '</span>'
  243. 		);
  244. 	$('.qf_panel *')
  245. 		.css({
  246. 			'box-sizing'		: 'content-box',
  247. 			'-moz-box-sizing'	: 'content-box'
  248. 		});
  249. 	$('.qf_options')
  250. 		.css({
  251. 			'padding'			: '10px 15px 2px 15px'
  252. 		});
  253. 	$('.qf_options input')
  254. 		.css({
  255. 			'border-style'		: 'dotted',
  256. 			'border-width'		: '1px',
  257. 			'width'				: '240px'
  258. 		});
  259. 	$('.qf_panel_level')
  260. 		.val(show_level);
  261. 	$('.qf_panel_imgh')
  262. 		.val(img_height);
  263. 	$('.qf_title')
  264. 		.css({
  265. 			'padding'			: '10px 0 0 10px',
  266. 			'font-weight'		: 'bolder'
  267. 		});
  268. 	$('.qf_about')
  269. 		.css({
  270. 			'font-size'			: '12px',
  271. 			'position'			: 'absolute',
  272. 			'right'				: '15px',
  273. 			'bottom'			: '10px',
  274. 			'cursor'			: 'pointer'
  275. 		})
  276. 		.click(function () {
  277. 			window.open('https://greasyfork.org/scripts/3620-hkgalden-quote-folder');
  278. 		});
  279. 	$('.qf_save')
  280. 		.css({
  281. 			'position'			: 'absolute',
  282. 			'left'				: '5px',
  283. 			'bottom'			: '5px',
  284. 			'cursor'			: 'pointer'
  285. 		})
  286. 		.click(function () {
  287. 			if (parseInt($('.qf_panel_level').val(), 10).between(0, 100)) {
  288. 				if (parseInt($('.qf_panel_imgh').val(), 10).between(0, 10000)) {
  289. 					localStorage.setItem('qf_settings_show_level', parseInt($('.qf_panel_level').val(), 10));
  290. 					localStorage.setItem('qf_settings_img_height', parseInt($('.qf_panel_imgh').val(), 10));
  291. 					$('.qf_about')
  292. 						.css({
  293. 							'color'		: 'red'
  294. 						})
  295. 						.html('設定已儲存, 自動F5中...');
  296. 					window.setTimeout(function () { location.reload(false); }, 200);
  297. 				} else {
  298. 					alert('圖片高度範圍必須為0-10000px');
  299. 				}
  300. 			} else {
  301. 				alert('引用層數必須為0-100');
  302. 			}
  303. 		});
  304. 	$('.qf_cancel')
  305. 		.css({
  306. 			'position'			: 'absolute',
  307. 			'left'				: '65px',
  308. 			'bottom'			: '5px',
  309. 			'cursor'			: 'pointer'
  310. 		})
  311. 		.click(function () {
  312. 			$('.qf_panel').fadeOut(100);
  313. 		});
  314.  
  315. });