☰

Game Highlighter

Searches the games table for settable game names and highlights them.

当前为 2015-02-15 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name        Game Highlighter
  3. // @author		Timo Gebauer
  4. // @namespace   t.gebauer@hg-software.de
  5. // @version     0.2.1
  6. // @grant       none
  7. // @include 	http://makemehost.com/games.php
  8. // @description Searches the games table for settable game names and highlights them.
  9. // ==/UserScript==
  10.  
  11. /******************************************************************************/
  12. // use MakeMeHosts jQuery version
  13. $ = unsafeWindow.jQuery;
  14.  
  15. // Groß- und Kleinschreibung wird in den Suchtexten nicht beachtet
  16. // Treffer, die einen Sound abspielen, werden bis zur nächsten Aktualisierung mit farbigem Hintergrund hervorgehoben
  17.  
  18. // nur in den Games Spalten suchen?
  19. var searchGamesOnly = false;
  20.  
  21. // red, blue, cyan, purple, yellow, orange, green, pink, grey, CadetBlue, darkgreen, brown
  22. var highlights = [];
  23.  
  24. var sounds = {
  25. 	s_solemn: 'http://www.oringz.com/oringz-uploads/sounds-882-solemn.mp3',
  26. 	s_comm: 'http://www.oringz.com/oringz-uploads/sounds-917-communication-channel.mp3'
  27. };
  28.  
  29. /******************************************************************************/
  30. /* 
  31.  * Ajax Request "hijacken" nach jeder erfolgreichen Übertragung die Funktion highlightArray() ausführen
  32.  * Das Ergebnis des Requests kann hier nicht abgefangen werden, da der Eventlistener erst aufgerufen wird,
  33.  * nachdem der eigentliche Aufrufer das Ergebnis bereits verarbeitet hat
  34.  */
  35. // backup original "send" function reference
  36. XMLHttpRequest.prototype.oldSend = XMLHttpRequest.prototype.send;
  37. var newSend = function(a) {
  38. 	var xhr = this;
  39. 	var onload = function() { 
  40. 		highlightArray();
  41. 	};
  42. 	
  43. 	xhr.addEventListener("load", onload, false);
  44.  
  45. 	this.oldSend(a);
  46. };
  47. XMLHttpRequest.prototype.send = newSend;
  48.  
  49. /*******************************************************************************/
  50. /*
  51.  * TODO: 
  52.  *		- highlights hoch und runterverschieben 
  53.  *		- color-picker ?
  54.  *		- mute sound checkbox
  55.  *		- "mute" elements
  56.  * 		- Rückgangig button
  57.  * 		- erst beim schließen vollständig anwenden
  58.  * 		- sound-fenster (neu, entfernen, etc..)
  59.  */
  60. function initGui() {
  61. 	// var html = "<div><button id=\"button_save\">Speichern</button></div>";
  62. 	$('.refreshMe').next().after('<div align="center"><a class="changelink-unactive" id="btn_options"> Highlight Settings</a></div>');
  63. 	document.getElementById('btn_options').addEventListener('click', showGui, true);
  64. 	$("body").append('<div id="popup_overlay" class="overlay"></div>');
  65. 	$("body").append('<div id="popup" class="popup"></div>');
  66. 	document.getElementById('popup_overlay').addEventListener('click', hideGui, true);
  67. 	
  68. 	// popup window
  69. 	var html = '<p>Auflistung aller aktiven Highlights<br>'
  70. 		+ 'Groß- und Kleinschreibung wird in den Suchtexten nicht beachtet'
  71. 		+ '<br>Treffer, die einen Sound abspielen, werden bis zur nächsten Aktualisierung mit farbigem Hintergrund hervorgehoben</p>'
  72. 		+ '<button id="btn_add">New Highlight</button>'
  73. 		+ '<button id="btn_load">Load (JSON)</button>'
  74. 		+ '<button id="btn_save">Save (JSON)</button>'
  75. 		+ '<button id="btn_remove_all">Remove all</button>'
  76. 		+ '<div id="highlight_container"></div>';
  77. 	$("#popup").append(html);
  78. 	
  79. 	// load / save
  80. 	$("#btn_load").click(function() {
  81. 		showInputDialog("", function() {
  82. 			highlights = JSON.parse($("#inputDialogInput").attr("value"));
  83. 			updateGui();
  84. 		});
  85. 	});
  86. 	$("#btn_save").click(function() {
  87. 		alert("Save this stringified options somewhere \n\n"
  88. 			+ JSON.stringify(highlights));
  89. 	});
  90. 	
  91. 	// add a new highlight
  92. 	$("#btn_add").click(function() {
  93. 		highlights.splice(0,0,{search:[]});
  94. 		updateGui();
  95. 	});
  96. 	// remove all
  97. 	$("#btn_remove_all").click(function() {
  98. 		highlights = [];
  99. 		updateGui();
  100. 	});
  101. 	
  102. 	
  103. 	updateGui();
  104. 	
  105. 	// append custom stylesheet
  106. 	$("head").append('<style type="text/css"><!--\n'
  107. 		+ "#btn_options {"
  108. 			+ "cursor: pointer;"
  109. 			+ "font-size: 20px;"
  110. 			+ "}"
  111. 		+ ".overlay {"
  112. 			+ "left: 0;"
  113. 			+ "top: 0;"
  114. 			+ "bottom: 0;"
  115. 			+ "right: 0;"
  116. 			+ "z-index: 100;"
  117. 			+ "position: fixed;"
  118. 			+ "background-color: #000;"
  119. 			+ "filter: alpha(opacity=20);"
  120. 			+ "opacity: 0.2;"
  121. 			+ "cursor: pointer;"
  122. 			+ "display: none;"
  123. 			+ "}"
  124. 		+ ".popup {"
  125. 			+ "display: none;"
  126. 			+ "background: #fff;"
  127. 			+ "padding: 1%;"
  128. 			+ "width: 50%;"
  129. 			+ "position: fixed;"
  130. 			+ "top: 10%;"
  131. 			+ "left: 50%;"
  132. 			+ "margin: 0 0 0 -20%;" /* add negative left margin for half the width to center the div */
  133. 			+ "cursor: default;"
  134. 			+ "z-index: 200;"
  135. 			+ "border-radius: 4px;"
  136. 			+ "box-shadow: 0 0 5px rgba(0,0,0,0.9);"
  137. 			+ "max-height: 80%;"
  138. 			+ "overflow: auto;"
  139. 			+ "}"
  140. 		+ ".highlight_wrapper {"
  141. 			// + "background-color: red;"
  142. 			+ "height: auto;"
  143. 			+ "margin: 40px;"
  144. 			+ "padding: 5px;"
  145. 			+ "clear: both;"
  146. 			+ "border: 1px solid grey;"
  147. 			// + "vertical-align: middle;"
  148. 			+ "}"
  149. 		+ ".index {"
  150. 			+ "margin-right: 30px;"
  151. 			+ "float:left;"
  152. 			+ "}"
  153. 		+ ".btn_color {"
  154. 			+ "margin-right: 30px;"
  155. 			// + "float: left;"
  156. 			+ "width: 20px;"
  157. 			+ "height: 20px;"
  158. 			// + "vertical-align: top;"
  159. 			+ "float:left;"
  160. 			+"}"
  161. 		+ ".search_wrapper {"
  162. 			// + "font: helvetica, arial, san-serif;"
  163. 			// + "vertical-align: top;"
  164. 			+ "width: 40%;"
  165. 			+ "float:left;"
  166. 			+ "}"
  167. 		+ ".highlight_search {"
  168. 			+ "resize: none;"
  169. 			+ "float: left;"
  170. 			+ "}"
  171. 		+ ".end_wrapper {"
  172. 			+ "clear:both;"
  173. 			+ "}"
  174. 		+ "#inputDialog {"
  175. 			+ "display: none;"
  176. 			+ "position: fixed;"
  177. 			+ "top: 20%;"
  178. 			+ "left: 50%;"
  179. 			+ "margin-left: -10%;"
  180. 			+ "z-index: 300;"
  181. 			+ "}"
  182. 		+ "#inputDialogOverlay {"
  183. 			+ "z-index: 250;"
  184. 			+ "}"
  185. 	+ '\n--></style>');
  186. 	
  187. 	// input dialog 
  188. 	var html = '<div id="inputDialogOverlay" class="overlay"></div>'
  189. 		+ '<div id="inputDialog">'
  190. 		+ '<input id="inputDialogInput" type="text"></input>'
  191. 		+ '<button id="inputDialogButton">Ok</button>'
  192. 		+ '</div>';
  193. 	$("body").append(html);
  194. 	$("#inputDialog").hide();
  195. 	$("#inputDialogOverlay").click(function() {
  196. 		$("#inputDialog").hide();
  197. 		$("#inputDialogOverlay").hide();
  198. 	});
  199. 	$("#inputDialogInput").focus(function(){
  200. 		var that = this;
  201. 		setTimeout(function(){$(that).select();}, 10);
  202. 	});
  203. 	$("#inputDialogInput").keypress(function(event){
  204.     if(event.keyCode == 13){
  205.         $("#inputDialogButton").click();
  206.     }
  207. });
  208. }
  209.  
  210. function updateGui() {
  211. 	// save changes
  212. 	saveLocalData();
  213. 	// reset all previous highlights
  214. 	resetHighlights();
  215. 	// apply new highlights
  216. 	highlightArray();
  217. 	
  218. 	$("#highlight_container").empty();
  219. 	$.each(highlights, function(index, elem) {
  220. 		var html = '<div class="highlight_wrapper">'
  221. 			+ '<span class="index">' + index + '</span>'
  222. 			+ '';
  223. 		// make sure, elem.search is an array
  224. 		elem.search = elem.search instanceof Array ? elem.search : [elem.search];
  225. 		var text = "";
  226. 		$.each(elem.search, function(index, search_value) {
  227. 			if(index != 0)
  228. 				text += "\n";
  229. 			text += search_value;
  230. 		});
  231. 		html += '<textarea class="highlight_search" index="'+index+'" rows="'
  232. 			+ elem.search.length + '">' + text + '</textarea>';
  233. 		html += '<button class="btn_color" value="' + index
  234. 			+ '" style="background-color:' + elem.color + ';">&nbsp</button>';
  235. 		html += '<select class="sound_select" index="'+index+'">';
  236. 		html += '<option'
  237. 		if(elem.sound === false)
  238. 			html += ' selected=selected';
  239. 		html += '></option>';
  240. 		$.each(sounds, function(sound, url) {
  241. 			html += '<option';
  242. 			if(elem.sound === sound)
  243. 				html += ' selected=selected';
  244. 			html += '>' + sound + '</option>';
  245. 		});
  246. 		html += '</select>';
  247. 		html += '<button class="btn_remove" index="' + index + '">X</button>';
  248. 		html += '<div class="end_wrapper"></div></div>';
  249. 		$("#highlight_container").append(html);
  250. 		// $(".highlight_wrapper").css("background-color","red");
  251. 	});
  252. 	
  253. 	// register events
  254. 	$(".highlight_search").change(function() {
  255. 		highlights[$(this).attr("index")].search = cleanArray($(this).val().split("\n")) ;
  256. 		saveLocalData();
  257. 		resetHighlights();
  258. 		highlightArray();
  259. 	});
  260. 	$(".highlight_search").keyup(function(event) {
  261. 		// if(event.keyCode == 13) {
  262. 		// }
  263. 		$(this).attr("rows", $(this).val().split("\n").length);
  264. 	});
  265. 	$(".btn_color").click(function() {
  266. 		var index = $(this).attr("value");
  267. 		showInputDialog(highlights[index].color, function() {
  268. 			var color = $("#inputDialogInput").attr("value");
  269. 			highlights[index].color = color;
  270. 			updateGui();
  271. 			$('.btn_color[value="'+index+'"]').focus();
  272. 		});
  273. 	});
  274. 	$(".sound_select").change(function(){
  275. 		highlights[$(this).attr("index")].sound = $(this).val();
  276. 		// no need to update the gui here, only save the changes
  277. 		saveLocalData();
  278. 	});
  279. 	$(".btn_remove").click(function() {
  280. 		highlights.splice($(this).attr("index"),1);
  281. 		updateGui();
  282. 	});
  283. }
  284.  
  285. function showInputDialog(text, okFunction) {
  286. 	$("#inputDialogInput").attr("value", text);
  287. 	$("#inputDialogInput").focus();
  288. 	$("#inputDialog").show();
  289. 	$("#inputDialogOverlay").show();
  290. 	$("#inputDialogButton").unbind("click")
  291. 	$("#inputDialogButton").click(function() {
  292. 		$("#inputDialog").hide();
  293. 		$("#inputDialogOverlay").hide();
  294. 	});
  295. 	$("#inputDialogButton").click(okFunction);
  296. }
  297.  
  298. function showGui() {
  299. 	$("#popup_overlay").show();
  300. 	$("#popup").show();
  301. }
  302.  
  303. function hideGui() {
  304. 	$("#popup_overlay").css("display", "none");
  305. 	$("#popup").css("display", "none");
  306. }
  307.  
  308. /******************************************************************************/
  309.  
  310. function saveLocalData() {
  311. 	localStorage.setItem("highlights", JSON.stringify(highlights));
  312. }
  313.  
  314. function loadLocalData() {
  315. 	// alert("load");
  316. 	highlights = JSON.parse(localStorage.getItem("highlights"));
  317. 	if(highlights === null) {
  318. 		highlights = [];
  319. 	}
  320. 	// alert("afterLoad");
  321. }
  322.  
  323. /******************************************************************************/
  324. $(document).ready(function () {
  325.  
  326. 	// Riesigen Header entfernen
  327. 	$('#rt-header-overlay').remove();
  328. 	
  329. 	// Sounds vorladen
  330. 	$.each(sounds, function(name, url) {
  331. 		$("body").append("<audio id='"+name+"' src='"+url+"' hidden=true preload=auto></audio>");
  332. 	});
  333. 	
  334. 	// Einstellungen laden
  335. 	loadLocalData();
  336. 	
  337. 	//  eigenes GUI einfügen
  338. 	initGui();
  339. });
  340.  
  341. /******************************************************************************/
  342. // enthalten die Namen der gefundenen Spiele
  343. var knownGames = {};
  344. var foundGames = {};
  345.  
  346. function resetHighlights() {
  347. 	$("#mmh td").css({
  348. 		backgroundColor: "transparent",
  349. 		color: "black"
  350. 	});
  351. }
  352.  
  353. function highlightArray() {
  354. 	foundGames = {};
  355. 	$.each(highlights, function(index, elem) {
  356. 		if (elem === null)
  357. 			return;
  358. 		var color = elem.color;
  359. 		var sound = elem.sound;
  360. 		var arr = elem.search instanceof Array ? elem.search : [elem.search];
  361. 		if(!(arr.length == 1 && arr[0] === ""))
  362. 			$.each(arr, function(index, text) {
  363. 				highlight(text, elem.color, elem.sound);
  364. 			});
  365. 	});
  366. 	knownGames = foundGames;
  367. }
  368.  
  369. function highlight(search, color, sound) {
  370. 	getNodes(search).each(function(){
  371. 		// Schrift färben?
  372. 		if(color)
  373. 			$(this).css("color", color);
  374. 			
  375. 		// Spiel unbekannt?
  376. 		if(!($(this).text() in knownGames)) {
  377. 			// Sound abspielen?
  378. 			if(sound) {
  379. 				document.getElementById(sound).play();
  380. 				// neu gefundene Spiele kurzzeitig hervorheben
  381. 				$(this).css("background-color", "orange");
  382. 				$(this).css("color", "black");
  383. 			}
  384. 		}
  385. 		
  386. 		foundGames[$(this).text()] = $(this).text();
  387. 	});
  388. }
  389.  
  390. function getNodes(text) {
  391. 	// Nur in Games Spalten suchen?
  392. 	if (searchGamesOnly) {
  393. 		var tds = $('#mmh table:first-child td:nth-child(4)')
  394. 			.add('#mmh table:last-child td:nth-child(2)');
  395. 	} else {
  396. 		var tds = $('td');
  397. 	}
  398. 	return tds.filter(':Contains(' + text + ')');
  399. }
  400.  
  401. /******************************************************************************/
  402. /*
  403.  * removes every "falsy" value: undefined, null, 0, false, NaN and '':
  404.  */
  405. function cleanArray(actual){
  406.   var newArray = new Array();
  407.   for(var i = 0; i<actual.length; i++){
  408.       if (actual[i]){
  409.         newArray.push(actual[i]);
  410.     }
  411.   }
  412.   return newArray;
  413. }
  414.  
  415. /******************************************************************************/
  416. // jQuery :contains Case-Insensitive
  417. // http://css-tricks.com/snippets/jquery/make-jquery-contains-case-insensitive/
  418. jQuery.expr[':'].Contains = function(a, i, m) {
  419.   return jQuery(a).text().toUpperCase()
  420.       .indexOf(m[3].toUpperCase()) >= 0;
  421. };