☰

GC Stats Banner Library

This library provides the core functionality to add a stats badge onto profile and cache pages on geocaching.com.

此脚本不应直接安装。它是供其他脚本使用的外部库，要使用该库请加入元指令 // @require https://update.cn-greasyfork.org/scripts/389508/880219/GC%20Stats%20Banner%20Library.js 

  1. // ==UserScript==
  2. // @exclude     *
  3. // @supportURL	https://github.com/Cryo99/GCStatsBannerLib
  4. // @version     1.0.2
  5. // @include     /^https?://www\.geocaching\.com/(account/dashboard|my|default|geocache|profile|seek/cache_details|p)/
  6. // @exclude     /^https?://www\.geocaching\.com/(login|about|articles|myfriends)/
  7. // @require     https://openuserjs.org/src/libs/sizzle/GM_config.js
  8.  
  9. // ==UserLibrary==
  10. // @name        GC Stats Banner Library
  11. // @description This library provides the core functionality for adding a stats banner onto profile and cache pages on geocaching.com.
  12. // @copyright   2019-2020, Cryo99 (https://github.com/Cryo99)
  13. // @license     GPL version 3 or any later version; http://www.gnu.org/copyleft/gpl.html
  14.  
  15. // ==/UserScript==
  16.  
  17. // ==/UserLibrary==
  18.  
  19.  
  20. /*jshint esversion: 6 */
  21. var GCStatsBanner = function(cfg){
  22.  
  23.     // ========================= Private members =========================
  24. 	var _cfg = {},
  25. 		_cfgDefault = {
  26. 			cacheTitles: false,
  27. 			callerVersion: 'Unknown',
  28. 			elPrefix: '',
  29. 			imgScript: 'find-badge.php',
  30. 			logLevel: 'normal',
  31. 			seriesLevels: ['None'],
  32. 			seriesLevelDefault: 'None',
  33. 			seriesName: false,
  34. 			seriesURL: false
  35. 		};
  36. 		
  37. 		// Internal vars.
  38. 		_cacheName = document.getElementById("ctl00_ContentBody_CacheName"),
  39. 		// Images can be wider when level names are long. overflow: hidden; on <series>-container prevents images from overlaying the div border.
  40. 		_css = '',
  41. 		_profileNameOld = document.getElementById("ctl00_ContentBody_ProfilePanel1_lblMemberName"),
  42. 		_profileName = document.getElementById("ctl00_ProfileHead_ProfileHeader_lblMemberName"),
  43. 		_userField = document.getElementsByClassName("user-name");
  44. 	
  45. 		
  46. 	// ========================= Private methods =========================
  47. 	// Constructor.
  48. 	function _const(){
  49. 		for(cfgItem in _cfgDefault){
  50. 			if(typeof cfg[cfgItem] === 'undefined' || cfg[cfgItem] === null){
  51. 				// Required variable is undefined or null
  52. 				if(_cfgDefault[cfgItem] === false){
  53. 					throw new Error('GCStatsBannerLib: ' + cfgItem + ' is a required configuration element.');
  54. 				}
  55. 				// Use the default value.
  56. 				_cfg[cfgItem] = _cfgDefault[cfgItem];
  57. 				// console.warn('GCStatsBannerLib: ' + cfgItem + ' undefined. Using value: ' + _cfgDefault[cfgItem] + '.')
  58. 			}else{
  59. 				// Use the configured value. 
  60. 				_cfg[cfgItem] = cfg[cfgItem];
  61. 			}
  62. 		}
  63. 		// If elPrefix is still empty, generate it.
  64. 		if(!_cfg.elPrefix){
  65. 			_cfg.elPrefix = _getPrefix(cfg.seriesName);
  66. 		}
  67. 		_log(cfg, 'Passed config');
  68. 		_log(_cfg, 'Generated config');
  69.  
  70. 		_generateCSS();
  71. 	}
  72. 	// Run the constructor on creation.
  73. 	_const();
  74.  
  75. 	function _getPrefix(name){
  76. 		var matches = name.match(/\b(\w)/g);
  77. 		return matches.join('').toLowerCase().padStart(3, '_');
  78. 	}
  79.  
  80. 	function _generateCSS(){
  81. 		_css = 'div.' + _cfg.elPrefix + '-container { border: 1px solid #b0b0b0; margin-top: 1.5em; padding: 0; text-align: center; overflow: hidden;} ' + 
  82. 			'.WidgetBody div.' + _cfg.elPrefix + '-container { border: none; } ' +
  83. 			'#ctl00_ContentBody_ProfilePanel1_pnlProfile div.' + _cfg.elPrefix + '-container { border: none; text-align: inherit;} ' +
  84. 			'a.' + _cfg.elPrefix + '-badge { background-color: white;} ' +
  85. 			'#ctl00_ContentBody_ProfilePanel1_pnlProfile div.' + _cfg.elPrefix + '-container {float: left}' +
  86. 			'#StatsComponents {background: white;}';
  87. 	}
  88.  
  89. 	function _log(msg, desc){
  90. 		if(_cfg.logLevel === 'debug'){
  91. 			var msgStart = '%c' + _cfg.seriesName + ' Stats Debug (%s):';
  92. 			console.log(msgStart,  "color: yellow; font-style: italic; background-color: red;padding: 2px", desc, msg);
  93. 		}
  94. 	}
  95.  
  96. 	function _getHiderName(){
  97. 		var i,
  98. 			links = document.getElementsByTagName("a"),
  99.             pos;
  100.             
  101. 		if(links){
  102. 			for(i = 0; i < links.length; i++){
  103. 				pos = links[i].href.indexOf("/seek/nearest.aspx?u=");
  104. 				if(pos !== -1){
  105. 					return decodeURIComponent(links[i].href.substr(pos + 21).replace(/\+/g, '%20'));
  106. 				}
  107. 			}
  108. 		}
  109. 	};
  110.  
  111. 	function _parseNames(names){
  112. 		// Filter out null or undefined entries, convert commas to semicolons, then convert to a comma-separated string.
  113. 		return encodeURIComponent(names
  114. 				.filter(function (n){
  115. 					return n !== undefined;
  116. 				})
  117. 				.map(function (n){
  118. 					return (n + "").replace(/,/g, ";");
  119. 				})
  120. 				.join());
  121.     };
  122.     
  123.     function _getHtml(uname, brand){
  124. 		return "<a class='" + _cfg.elPrefix + "-badge' href='https://www." + _cfg.seriesURL + "' title='" + _cfg.seriesName +
  125. 			" stats.'><img src='https://img." + _cfg.seriesURL + "/awards/" + _cfg.imgScript + "?name=" + uname + "&brand=" + brand + "' /></a>";
  126.     };
  127.  
  128. 	function _displayStats(stats, page, brand){
  129. 		var widget = document.createElement("div"),
  130. 			html = "",
  131. 			i,
  132. 			target;
  133.  
  134. 		for(i = 0; i < stats.length; i++){
  135. 			var name = (stats[i].name + "")
  136. 				.replace(/;/g, ",")
  137. 				.replace(/'/g, "&apos;")
  138. 				.replace(/"/g, "&quot;");
  139. 			if(i === 0 || stats[i].name !== stats[0].name){
  140. 				html += _getHtml(name, brand);
  141. 			}
  142. 		}
  143. 		_log(html, 'Banner HTML');
  144.  
  145. 		switch(page){
  146. 			case "my":
  147. 				target = document.getElementById("ctl00_ContentBody_lnkProfile");
  148. 				break;
  149. 			case "account":
  150. 				// New account dashboard.
  151. 				// The WidgetPanel is too slow to load and causes scripts to block so follow GClhII and just append the widget to the sidebar.
  152. 				target = document.querySelector(".sidebar-right");
  153. 				break;
  154. 			case "cache":
  155.                 target = document.getElementsByClassName('sidebar')[0];
  156.                 break;
  157. 			case "profile":
  158. 				if(_profileName){
  159. 					target = document.getElementById("ctl00_ContentBody_ProfilePanel1_lblProfile");
  160. 					if (target) {
  161. 						target = target.parentNode;
  162. 					}
  163. 				}else if(_profileNameOld){
  164. 					target = document.getElementById("HiddenProfileContent");
  165. 				}
  166. 				break;
  167. 		}
  168.  
  169. 		if(!target){
  170. 			console.warn(_cfg.seriesName + " Stats: Aborted - couldn't find where to insert widget. You might not be logged in.");
  171. 			return;
  172. 		}
  173.  
  174. 		if(html){
  175. 			widget.className = _cfg.elPrefix + "-container";
  176. 			widget.innerHTML = html;
  177.             switch(page){
  178.                 case "my":
  179.                 case "profile":
  180.                     target.parentNode.insertBefore(widget, target.nextSibling);
  181.                     break;
  182. 				case "account":
  183. 					// If the StatsWidget isn't present, create it.
  184. 					var el = document.getElementById("StatsWidget");
  185. 					if(!el){
  186. 						_log('Creating widget.', 'StatsWidget');
  187. 						var divStats = document.createElement('div');
  188. 						divStats.id = "StatsWidget";
  189. 						divStats.classList.add("panel", "collapsible");
  190. 						divStats.innerHTML = '<div class="panel-header isActive" aria-expanded="true">\
  191. 	<h1 id="stats-widget-label" class="h5 no-margin">Statistics</h1>\
  192. 	<button aria-controls="StatsWidget" aria-labelledby="stats-widget-label">\
  193. 		<svg height="22" width="22" class="opener" role="img">\
  194. 			<use xlink:href="/account/app/ui-icons/sprites/global.svg#icon-expand-svg-fill"></use>\
  195. 		</svg>\
  196. 	</button>\
  197. </div>\
  198. <div id="StatsComponents" class="panel-body">\
  199. 	<div id="StatsPanel" class="widget-panel"></div>\
  200. </div>';
  201. 				
  202. 						target.append(divStats);
  203. 						// Hide the panel if it was previously hidden. 
  204. 						if (!GM_getValue('statsWidget_visible', false)) {
  205. 							document.querySelector('#StatsWidget .panel-body').style.display = "none";
  206. 							document.querySelector('#StatsWidget .panel-header').classList.remove('isActive');
  207. 							_fadeOut(document.querySelector('#StatsWidget .panel-body'));
  208. 						}
  209. 		
  210. 						// Add the click handler.
  211. 						document.querySelector('#StatsWidget .panel-header').addEventListener('click', function() {
  212. 							if (GM_getValue('statsWidget_visible', true)) {
  213. 								document.querySelector('#StatsWidget .panel-header').classList.remove('isActive');
  214. 								_fadeOut(document.querySelector('#StatsWidget .panel-body'));
  215. 								GM_setValue('statsWidget_visible', false);
  216. 							}else{
  217. 								document.querySelector('#StatsWidget .panel-header').classList.add('isActive');
  218. 								_fadeIn(document.querySelector('#StatsWidget .panel-body'));
  219. 								GM_setValue('statsWidget_visible', true);
  220. 							}
  221. 						});
  222. 					}
  223. 					// Finally, append the banner.
  224. 					document.querySelector('#StatsPanel').appendChild(widget);				
  225. 					break;
  226. 				default:
  227. 					target.insertBefore(widget, target.firstChild.nextSibling.nextSibling);
  228. 					break;
  229.             }
  230.         }else{
  231. 			console.warn(_cfg.seriesName + " Stats: didn't generate an award badge.");
  232. 		}
  233. 	};
  234.  
  235. 	function _fadeOut(element) {
  236. 		var op = 1;  // initial opacity
  237. 		var timer = setInterval(function () {
  238. 			if (op <= 0.1){
  239. 				clearInterval(timer);
  240. 				element.style.display = "none";
  241. 			}
  242. 			element.style.opacity = op;
  243. 			op -= 0.1;
  244. 		}, 30);
  245. 	};
  246.  
  247. 	function _fadeIn(element) {
  248. 		var op = 0.1;  // initial opacity
  249. 		element.style.display = "block";
  250. 		var timer = setInterval(function () {
  251. 			if (op >= 1){
  252. 				clearInterval(timer);
  253. 			}
  254. 			element.style.opacity = op;
  255. 			op += 0.1;
  256. 		}, 30);
  257. 	};
  258.  
  259. 	function _createConfigDlg(){
  260. 		// Register the menu item.
  261. 		GM_registerMenuCommand("Options", function(){
  262. 			GM_config.open();
  263. 		});
  264.  
  265. 		GM_config.init({
  266. 			'id': _cfg.elPrefix + '_config', 				// The id used for this instance of GM_config
  267. 			'title': _cfg.seriesName + ' Stats',			// Panel Title
  268. 			'fields': { 									// Fields object
  269. 				'branding': {								// This is the id of the field
  270. 					'label': 'Branding', 					// Appears next to field
  271. 					'type': 'select', 						// Makes this setting a dropdown
  272. 					'options': _cfg.seriesLevels,			// Possible choices
  273. 					'default': _cfg.seriesLevelDefault		// Default value if user doesn't change it
  274. 				}
  275. 			},
  276. 			// Dialogue internal styles.
  277. 			'css': '#' + _cfg.elPrefix + '_config {position: static !important; width: 75% !important; margin: 1.5em auto !important; border: 10 !important;}' +
  278. 				'#' + _cfg.elPrefix + '_config_' + _cfg.elPrefix + '_branding_var {padding-top: 30px;} #' + _cfg.elPrefix + '_config button {color: black;}',
  279. 			'events': {
  280. 				'open': function(document, window, frame){
  281. 					// iframe styles.
  282. 					frame.style.width = '300px';
  283. 					frame.style.height = '250px';
  284. 					frame.style.left = parent.document.body.clientWidth / 2 - 150 + 'px';
  285. 					frame.style.borderWidth = '5px';
  286. 					frame.style.borderStyle = 'ridge';
  287. 					frame.style.borderColor = '#999999';
  288. 				},
  289. 				'save': function(){
  290. 					GM_setValue(_cfg.elPrefix + '_branding', GM_config.get('branding'));
  291. 					location.reload();                      // reload the page when configuration was changed
  292. 				}
  293. 			}
  294. 		});
  295. 	};
  296.  
  297. 	function _init(){
  298. 		var currentPage,
  299. 			elCSS = document.createElement("style"),
  300. 			userName = "",
  301. 			userNames = [],
  302. 			stats = [];
  303.  
  304. 		// Don't run on frames or iframes
  305. 		if(window.top !== window.self){
  306. 			return false;
  307. 		}
  308.  
  309. 		if(/\/my\//.test(location.pathname)){
  310. 			// On a My Profile page
  311. 			currentPage = "my";
  312. 		}else if(/\/account\//.test(location.pathname)){
  313. 			// On a Profile page
  314. 			currentPage = "account";
  315. 		}else{
  316. 			if(_cacheName){
  317. 				// On a Geocache page...
  318. 				// var matcher = new RegExp(_cfg.seriesName, "i");
  319. 				// if(!matcher.test(_cacheName.innerHTML)){
  320. 					// ...but not the right cache series.
  321. 				// 	return;
  322. 				// }
  323.  
  324. 				var titleFound = false;
  325. 				for(title in _cfg.cacheTitles){
  326. 					var matcher = new RegExp(_cfg.cacheTitles[title], "i");
  327. 					if(matcher.test(_cacheName.innerHTML)){
  328. 						titleFound = true;
  329. 					}
  330. 				}
  331. 				if(!titleFound){
  332. 					// ...but not the right cache series.
  333. 					return;
  334. 				}
  335.  
  336. 				currentPage = "cache";
  337. 			}else{
  338. 				currentPage = "profile";
  339. 			}
  340. 		}
  341. 		_log(currentPage, 'Detected page');
  342.  
  343. 		// We're going to display so we can announce ourselves and prepare the configuration dialogue.
  344. 		console.info(_cfg.seriesName + " Stats V" + _cfg.callerVersion);
  345.  
  346. 		//CONFIG
  347. 		_createConfigDlg();
  348. 		var brand = GM_getValue(_cfg.elPrefix + '_branding', _cfg.seriesLevelDefault);
  349. 		_log(brand, 'Stats branding');
  350. 		brand = brand.toLowerCase()
  351.  
  352. 		// Get hider details.
  353. 		var hider;
  354. 		switch(currentPage){
  355. 			case "profile":
  356. 				if(_profileName){
  357. 					userNames = [_profileName.textContent.trim()];
  358. 				}else if(_profileNameOld){
  359. 					userNames = [_profileNameOld.textContent.trim()];
  360. 				}
  361. 				break;
  362. 			default:
  363. 				if(_userField.length > 0){
  364. 					userNames.push(_userField[0].innerHTML.trim());
  365. 				}
  366. 				hider = _getHiderName();
  367. 				if(typeof hider !== 'undefined'){
  368. 					userNames.push(hider);
  369. 				}
  370. 				break;
  371. 		}
  372. 		_log(userNames[0], "Finder's name");
  373. 		_log(userNames[1], "Hider's name");
  374. 	
  375. 		for(var i = 0; i < userNames.length; i++){
  376. 			stats[i] = {name: userNames[i]};
  377. 		}
  378. 		_log(stats, 'Statistics');
  379. 	
  380. 		userName = _parseNames(userNames);
  381. 		if(!userName){
  382. 			console.error(_cfg.seriesName + " Stats: Aborted - couldn't work out user name");
  383. 			return;
  384. 		}
  385.  
  386. 		
  387. 		// Inject widget styling
  388. 		elCSS.setAttribute('type', 'text/css');
  389. 		if(elCSS.styleSheet){
  390. 			elCSS.styleSheet.cssText = _css;
  391. 		}else{
  392. 			elCSS.appendChild(document.createTextNode(_css));
  393. 		}
  394. 		document.head.appendChild(elCSS);
  395. 		_displayStats(stats, currentPage, brand);
  396. 	
  397. 	}
  398.  
  399.     return {
  400.       // ========================= Public members =========================
  401.  
  402. 	  // ========================= Public methods =========================
  403. 	  init: _init
  404.     };
  405.   
  406. };