☰

[Reddit] Modmail++

Additional tools and information to Reddit's Modmail

当前为 2021-12-03 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name        [Reddit] Modmail++
  3. // @namespace   HKR
  4. // @match       https://mod.reddit.com/mail/*
  5. // @grant       none
  6. // @version     2.4
  7. // @author      HKR
  8. // @description Additional tools and information to Reddit's Modmail
  9. // @icon        https://www.redditstatic.com/modmail/favicon/favicon-32x32.png
  10. // @supportURL  https://github.com/Hakorr/Userscripts/issues
  11. // @require     https://cdn.jsdelivr.net/npm/party-js@2.1.2/bundle/party.js
  12. // ==/UserScript==
  13.  
  14. function main() { console.log("[Modmail++] %cMain function ran!", "color: grey");
  15. 	/* ---------- SETTINGS ---------- */
  16.  
  17. 	//Variables for the responses
  18. 	const subTag = $(".ThreadTitle__community").href.slice(23); //Format r/subreddit
  19. 	const userTag = "u/" + $(".InfoBar__username").innerText; //Format u/username
  20. 	const modmail = `[modmail](https://www.reddit.com/message/compose?to=/${keepPrefix(subTag,true)})`;
  21. 	const rules = `https://www.reddit.com/${keepPrefix(subTag,true)}/about/rules`;
  22.  
  23. 	//Text color settings
  24. 	var textColor = null, lightModeTextColor = "#6e6e6e", darkModeTextColor = "#757575";
  25.  
  26. 	//Title color settings
  27. 	var titleColor = null, lightModeTitleColor = "#2c2c2c", darkModeTitleColor = "#a7a7a7";
  28.  
  29. 	//Listbox color settings
  30. 	var listBoxColor = null, lightModeListColor = "#fff", darkModeListColor = "#242424";
  31.  
  32. 	//Data (Such as numbers) color settings
  33. 	const dataColor = "#0079d3";
  34.  
  35. 	//No response list is created if false
  36. 	const enableCustomResponses = true;
  37.  
  38. 	//No chat profile icons are added if false
  39. 	const chatProfileIcons = true;
  40.  
  41. 	const placeholderMessage = randItem([
  42. 		"Message...",
  43. 		"Look, a bird! Message...",
  44. 		"What have you been up to today? Message...",
  45. 		"Beautiful day, isn't it? Message...",
  46. 		"Was the weather nice? Message...",
  47. 		"You look good today! Message...",
  48. 		"What dreams did you see last night? Message...",
  49. 		"What did you do today? Message...",
  50. 		"What did you eat today? Message...",
  51. 		"Have you drank enough water? Message...",
  52. 		"Remember to stretch! Message...",
  53. 		"≖‿≖ I live inside of your walls. Message...",
  54. 		"(✿◠‿◠) Message...",
  55. 	]);
  56.  
  57. 	/* Responses - Edit to your own liking, remove whatever you don't like!
  58. 	- name | The name of the response that will show on the listbox. (Example value: "Hello!")
  59. 	- replace | Replace all messagebox text if true, otherwise just add. (Example value: true)
  60. 	- subreddit | Visible only while on this subreddit's modmail. (Example value: "r/subreddit") 
  61. 	- content | This text will be added to the messagebox once selected (Example value: "Hello world!")*/
  62. 	const responses = [
  63. 		{
  64. 			"name":"Select a template",
  65. 			"replace":true,
  66. 			"subreddit":"",
  67. 			"content":``
  68. 		},
  69. 		{
  70. 			"name":"Default Approved",
  71. 			"replace":true,
  72. 			"subreddit":"",
  73. 			"content":`Hey, approved the post!`
  74. 		},
  75. 		{
  76. 			"name":"Default Rule Broken",
  77. 			"replace":true,
  78. 			"subreddit":"",
  79. 			"content":`Your post broke our [rules](${rules}).\n\nThe action will not be reverted.`
  80. 		},
  81. 		{
  82. 			"name":"Add Rule Description",
  83. 			"replace":false,
  84. 			"subreddit":"",
  85. 			"content":`<open-rulelist-dialog>`
  86. 		},
  87. 		{
  88. 			"name":"Add Greetings",
  89. 			"replace":false,
  90. 			"subreddit":"",
  91. 			"content":`${randItem(["Greetings","Hello","Hi"])} ${userTag},\n\n`
  92. 		},
  93. 		{
  94. 			"name":"Add Thanks",
  95. 			"replace":false,
  96. 			"subreddit":"",
  97. 			"content":`\n\nThank you!`
  98. 		},
  99. 		{
  100. 			"name":"Add Subreddit Mention",
  101. 			"replace":false,
  102. 			"subreddit":"",
  103. 			"content":`${subTag}`
  104. 		},
  105. 		{
  106. 			"name":"Add User Mention",
  107. 			"replace":false,
  108. 			"subreddit":"",
  109. 			"content":`${userTag}`
  110. 		},
  111. 		{
  112. 			"name":"Add Modmail Link",
  113. 			"replace":false,
  114. 			"subreddit":"",
  115. 			"content":`${modmail}`
  116. 		},
  117. 		{
  118. 			"name":"Add Karma Link",
  119. 			"replace":false,
  120. 			"subreddit":"",
  121. 			"content":`[karma](https://reddit.zendesk.com/hc/en-us/articles/204511829-What-is-karma-)`
  122. 		},
  123. 		{
  124. 			"name":"Add Content Policy",
  125. 			"replace":false,
  126. 			"subreddit":"",
  127. 			"content":`[Content Policy](https://www.redditinc.com/policies/content-policy)`
  128. 		},
  129. 		{
  130. 			"name":"Add User Agreement",
  131. 			"replace":false,
  132. 			"subreddit":"",
  133. 			"content":`[User Agreement](https://www.redditinc.com/policies/user-agreement)`
  134. 		},
  135. 		{
  136. 			"name":"Add Rickroll",
  137. 			"replace":false,
  138. 			"subreddit":"",
  139. 			"content":`[link](https://www.youtube.com/watch?v=dQw4w9WgXcQ)`
  140. 		}
  141. 	];
  142.  
  143. 	/* ---------- SETTINGS END ---------- */
  144.  
  145. 	/* ---------- JAVASCRIPT & HTML ---------- */
  146.  
  147. 	function time(UNIX_timestamp) {
  148. 		//Get UNIX time
  149. 		var d = new Date(UNIX_timestamp * 1000);
  150. 		const months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
  151.  
  152. 		//Get year, month, date, hour, min & sec variables
  153. 		var year = d.getFullYear(), 
  154. 		monthNum = d.getMonth() + 1,
  155. 		month = months[d.getMonth()],
  156. 		date = d.getDate(), 
  157. 		hour = fixnumber(d.getHours()), 
  158. 		min = fixnumber(d.getMinutes()), 
  159. 		sec = fixnumber(d.getSeconds());
  160.  
  161. 		//Construct the time (DD/MM/YY HH/MM/SS) and return it
  162. 		var time = `${date}.${monthNum}.${year} ${hour}:${min}:${sec}`;
  163. 		return time;
  164. 	}
  165. 	
  166. 	//Function to avoid XSS
  167. 	function sanitize(evilstring) {
  168. 		const decoder = document.createElement('div')
  169. 		decoder.innerHTML = evilstring;
  170. 		return decoder.textContent;
  171. 	}
  172.  
  173. 	//Appends the info (main, karma, links) to the page
  174. 	function addInfo() {
  175. 		//Load and parse username
  176. 		var username = removePrefix($(".InfoBar__username").innerText);
  177. 		var about = `https://www.reddit.com/user/${username}/about.json`;
  178. 		const xhr = new XMLHttpRequest();
  179. 	
  180. 		//Once the user info JSON has been fetched
  181. 		xhr.onload = () => {
  182. 			var user = JSON.parse(xhr.responseText);
  183. 			//Separator HTML element
  184. 			var seperator = document.createElement('div');
  185. 			seperator.innerHTML = '<div class="InfoBar__modActions"></div>';
  186. 	
  187. 			//HTML element that contains all the data
  188. 			var userDetails = document.createElement('div');
  189. 			userDetails.classList.add("InfoBar__age");
  190. 			userDetails.innerHTML = `<img class="profileIcon" src="${user.data.icon_img}" width="25">
  191. 			<a class="InfoBar__username" href="https://www.reddit.com/user/${user.data.name}">${removePrefix(user.data.subreddit.display_name_prefixed)}</a>
  192. 			<h1 style="color: ${textColor} ; font-size: 11px; margin-top: 17px; margin-bottom: 10px;">${sanitize(user.data.subreddit.public_description)}</h1>
  193. 			<h1 class="dataTitle">Main</h1>
  194. 			<div class="dataText">
  195. 				<p>Created: <span class="value">${time(user.data.created)}</span></p>
  196. 				<p>UserID: <span class="value">${user.data.id}</span></p>
  197. 				<p>Verified: <span class="value">${user.data.verified}</span></p>
  198. 				<p>Employee: <span class="value">${user.data.is_employee}</span></p>
  199. 				<p>NSFW Profile: <span class="value">${user.data.subreddit.over_18}</span></p>
  200. 			</div>
  201. 			<h1 class="dataTitle">Karma</h1>
  202. 			<div class="dataText">
  203. 				<p>Post: <span class="value">${user.data.link_karma}</span></p>
  204. 				<p>Comment: <span class="value">${user.data.comment_karma}</span></p>
  205. 				<p>Total: <span class="value">${user.data.total_karma}</span></p>
  206. 				<p>Awardee: <span class="value">${user.data.awardee_karma}</span></p>
  207. 				<p>Awarder: <span class="value">${user.data.awarder_karma}</span></p>
  208. 			</div>
  209. 			<h1 class="dataTitle">Links</h1>
  210. 				<div style="padding-left: 10px;">
  211. 				<a class="InfoBar__recent" href="https://redditmetis.com/user/${user.data.name}" target="_blank">Redditmetis</a>
  212. 				<a class="InfoBar__recent" href="https://www.reddit.com/search?q=${user.data.name}" target="_blank">Reddit Search</a>
  213. 				<a class="InfoBar__recent" href="https://www.google.com/search?q=%22${user.data.name}%22" target="_blank">Google Search</a>
  214. 			</div>`;
  215.  
  216. 			//Add profile pictures
  217. 			if(chatProfileIcons) {
  218. 				//Icon element
  219. 				var chatProfileIcon = document.createElement('div');
  220. 				chatProfileIcon.innerHTML = `<img class="chatProfileIcon" src="${user.data.icon_img}" width="25">`;
  221.  
  222. 				//Loop trough every username on chat
  223. 				for(var i = 0; i < $$(".ThreadPreview__author").length; i++) {
  224. 					//Get username (u/xxxxxx)
  225. 					let name = $$(".Author__text")[i].innerText;
  226. 					//Check if there is an icon appended already
  227. 					let exists = $$(".ThreadPreview__author")[i].childNodes.length == 1 ? false : true;
  228. 					//If the username is the user (non-mod)
  229. 					if(removePrefix(name) == username && !exists) {
  230. 						//Append the icon next to the username -> [icon] u/username
  231. 						$$(".ThreadPreview__author")[i].insertBefore(chatProfileIcon.cloneNode(true), $$(".ThreadPreview__author")[i].firstChild);
  232. 					}
  233. 				}
  234. 			}
  235. 			
  236. 			//Append the elements
  237. 			$(".ThreadViewer__infobar").appendChild(seperator);
  238. 			$(".ThreadViewer__infobar").appendChild(seperator);
  239. 			$(".ThreadViewer__infobar").appendChild(userDetails);
  240. 			$(".ThreadViewer__infobar").appendChild($(".ThreadViewer__infobar").firstChild);
  241. 			$(".InfoBar").appendChild($(".InfoBar__modActions"));
  242. 			$(".InfoBar").insertBefore($(".InfoBar__modActions"),$(".InfoBar").firstChild);
  243. 			if($(".InfoBar__banText"))
  244. 				$(".ThreadViewer__infobar").insertBefore($(".InfoBar__banText"),$(".ThreadViewer__infobar").firstChild);
  245. 			
  246. 			//Remove certain elements
  247. 			$$(".InfoBar__username")[1].outerHTML = "";
  248. 			$$(".InfoBar__age")[1].outerHTML = "";
  249. 			$$(".InfoBar__modActions")[1].outerHTML = "";
  250. 		};
  251. 		
  252. 		//Get user details
  253. 		xhr.open('GET', about);
  254. 		xhr.send();
  255. 	}
  256.  
  257. 	function makeListValue(name,description) {
  258. 		return `<div class="listValue" value='${description}'><input onclick="selected(this)" name="subredditRule" type="radio" id='${name}' value='${name}' ><label for='${name}'>${name}</label></div>`
  259. 	}
  260.  
  261. 	//Appends the response template listbox to the page
  262. 	function addResponseBox() {
  263. 		//Hide real textarea and append a new one (so the text won't get removed by the sync feature)
  264. 		$(".ThreadViewerReplyForm__replyText").style.cssText += 'display: none';
  265. 		const txtArea = document.createElement("textarea");
  266. 		txtArea.setAttribute('class', 'Textarea ThreadViewerReplyForm__replyText ');
  267. 		txtArea.setAttribute('id', 'realTextarea');
  268. 		txtArea.setAttribute('name', 'body');
  269. 		txtArea.setAttribute('placeholder', `${placeholderMessage}`);
  270. 		$(".ThreadViewerReplyForm").insertBefore(txtArea,$(".ThreadViewerReplyForm__replyFooter"));
  271. 			
  272. 		//Fix clear textarea - will not clear it if the moderator stays to send another message
  273. 		var replyButton = $(".ThreadViewerReplyForm__replyButton")
  274. 		const clearBoxJS = `setTimeout(function(){document.getElementById("realTextarea").value = ""; console.log("[Modmail++] Cleared the textarea!");},500)`;
  275. 		replyButton.setAttribute("onclick", clearBoxJS);
  276.  
  277. 		//Listbox element
  278. 		var responseBox = document.createElement('div');
  279. 		responseBox.classList.add("select");
  280. 		responseBox.innerHTML = `<h2 class="dataTitle">Response Templates</h2>
  281. 		<select id="responseListbox" onchange="listBoxChanged(this.value);" onfocus="this.selectedIndex = -1;"/>
  282. 		<span class="focus"></span>`;
  283.  
  284. 		const xhr = new XMLHttpRequest();
  285. 		const ruleJSON = rules + ".json";
  286.  
  287. 		//Once the user info JSON has been fetched
  288. 		xhr.onload = () => {
  289. 			try {
  290. 				$$(".subredditRuleList").forEach(elem => elem.remove());
  291. 				let json = JSON.parse(xhr.responseText);
  292. 				let listContent = "";
  293. 				for(let i = 0; i < json.rules.length; i++) {
  294. 					listContent += makeListValue(json.rules[i].short_name,json.rules[i].description);
  295. 				}
  296. 	
  297. 				var ruleList = document.createElement('div');
  298. 				ruleList.classList.add("subredditRuleList");
  299. 				ruleList.innerHTML = `<div class="ruleDiv" style="background-color: rgba(26, 26, 27, 0.6); visibility: hidden">
  300. 					<div aria-modal="true" class="dialogWindow" role="dialog" tabindex="-1">
  301. 						<div class="listWindow">
  302. 							<div class="ruleList">
  303. 								<div class="ruleHeader">Select a rule<svg onclick="closeIconClicked()" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" class="closeIconSVG"><polygon fill="inherit" points="11.649 9.882 18.262 3.267 16.495 1.5 9.881 8.114 3.267 1.5 1.5 3.267 8.114 9.883 1.5 16.497 3.267 18.264 9.881 11.65 16.495 18.264 18.262 16.497"></polygon></svg></div>
  304. 								<fieldset class="fieldSet">
  305. 									<div class="title"><span>Which community rule did the user violate?</span></div>
  306. 									<div class="listBox">
  307. 										${listContent}
  308. 									</div>
  309. 									<div class="infoIcon"><svg class="infoIconSVG" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><g><path d="M10,8.5 C10.553,8.5 11,8.948 11,9.5 L11,13.5 C11,14.052 10.553,14.5 10,14.5 C9.447,14.5 9,14.052 9,13.5 L9,9.5 C9,8.948 9.447,8.5 10,8.5 Z M10.7002,5.79 C10.8012,5.89 10.8702,6 10.9212,6.12 C10.9712,6.24 11.0002,6.37 11.0002,6.5 C11.0002,6.57 10.9902,6.63 10.9802,6.7 C10.9712,6.76 10.9502,6.82 10.9212,6.88 C10.9002,6.94 10.8702,7 10.8302,7.05 C10.7902,7.11 10.7502,7.16 10.7002,7.21 C10.6602,7.25 10.6102,7.29 10.5512,7.33 C10.5002,7.37 10.4402,7.4 10.3812,7.42 C10.3202,7.45 10.2612,7.47 10.1902,7.48 C10.1312,7.49 10.0602,7.5 10.0002,7.5 C9.7402,7.5 9.4802,7.39 9.2902,7.21 C9.1102,7.02 9.0002,6.77 9.0002,6.5 C9.0002,6.37 9.0302,6.24 9.0802,6.12 C9.1312,5.99 9.2002,5.89 9.2902,5.79 C9.5202,5.56 9.8702,5.46 10.1902,5.52 C10.2612,5.53 10.3202,5.55 10.3812,5.58 C10.4402,5.6 10.5002,5.63 10.5512,5.67 C10.6102,5.71 10.6602,5.75 10.7002,5.79 Z M10,16 C6.691,16 4,13.309 4,10 C4,6.691 6.691,4 10,4 C13.309,4 16,6.691 16,10 C16,13.309 13.309,16 10,16 M10,2 C5.589,2 2,5.589 2,10 C2,14.411 5.589,18 10,18 C14.411,18 18,14.411 18,10 C18,5.589 14.411,2 10,2"></path></g></svg>
  310. 										<div class="infoBox">
  311. 											<p><span>Not sure? </span><a href="https://www.reddit.com/${keepPrefix(subTag)}/about/rules" target="_blank" rel="noopener noreferrer">Read ${subTag}'s rules</a></p>
  312. 										</div>
  313. 									</div>
  314. 									<footer class="bottomFooter"><button type="button" disabled="" onclick="selectButtonClicked()" class="selectButton">Select</button></footer>
  315. 								</fieldset>
  316. 							</div>
  317. 						</div>
  318. 					</div>
  319. 				</div>`;
  320.  
  321. 				$("body").appendChild(ruleList);
  322. 				
  323. 			} catch(e) {
  324. 				console.log("[Modmail++] %cFailed to load subreddit rules, possibly a private subreddit?", "color: red");
  325. 			}
  326. 		};
  327.  
  328. 		//Get subreddit's rules
  329. 		xhr.open('GET', ruleJSON);
  330. 		xhr.send();
  331.  
  332. 		//Script element to head
  333. 		var headJS = document.createElement('script');
  334. 		headJS.innerHTML = `
  335. 		var responses = ${JSON.stringify(responses)};
  336. 		var ruleListActivator = "<open-rulelist-dialog>";
  337. 		function listBoxChanged(message) {
  338. 			if(message == ruleListActivator) {
  339. 				let ruleDiv = document.getElementsByClassName("ruleDiv")[0];
  340. 				ruleDiv.style.visibility = "visible";
  341. 			} else {
  342. 				var messageBox = document.getElementById("realTextarea");
  343. 				var response = responses.find(x => x.content == message);
  344. 				response.replace ? messageBox.value = message : messageBox.value += message;
  345. 				console.log("[Modmail++] New messageBox value: %c" + messageBox.value,"color: orange");
  346. 			}
  347. 		}
  348. 		//Implement listbox select highlight
  349. 		function selected(element){
  350. 			let selectColor = "#79797959";
  351. 			let selectedElem = document.getElementById("currentlySelected");
  352. 			//If an elem already selected, reset the id and set its background color to nothing
  353. 			if(selectedElem) { selectedElem.style.backgroundColor = ""; selectedElem.id = ""; }
  354. 			
  355. 			element.parentElement.style.backgroundColor = selectColor;
  356. 			element.parentElement.id = "currentlySelected";
  357. 			document.getElementsByClassName("selectButton")[0].disabled = false;
  358. 		}
  359. 		function selectButtonClicked() {
  360. 			let selectedElem = document.getElementById("currentlySelected");
  361. 			let messageBox = document.getElementById("realTextarea");
  362. 			if(selectedElem) {
  363. 				let response = responses.find(x => x.content == ruleListActivator);
  364. 				let message = \`Rule | Description\n---------|----------\n\${selectedElem.children[1].textContent} | \${selectedElem.getAttribute('value')}\`;
  365. 				response.replace ? messageBox.value = message : messageBox.value += message;
  366. 				console.log("[Modmail++] New messageBox value: %c" + messageBox.value,"color: orange");
  367. 				closeIconClicked();
  368. 			}
  369. 		}
  370. 		function closeIconClicked() {
  371. 			let ruleDiv = document.getElementsByClassName("ruleDiv")[0];
  372. 			ruleDiv.style.visibility = "hidden";
  373. 		}`;
  374. 	
  375. 		//Add all the responses to the listbox
  376. 		function populate() {
  377. 			var select = $("#responseListbox");
  378. 			for(var i = 0; i < responses.length; i++) {
  379. 				//Sorry if it looks a bit complicated
  380. 				if(keepPrefix(responses[i].subreddit.toLowerCase(), true) == keepPrefix(subTag.toLowerCase(), true) || responses[i].subreddit == "") 
  381. 				select.options[select.options.length] = new Option(responses[i].name, responses[i].content);
  382. 			}
  383. 		}
  384. 	
  385. 		$(".ThreadViewer__replyContainer").prepend(responseBox);
  386. 		var head = $("head");
  387. 		head.appendChild(headJS);
  388.  
  389. 		$(".ThreadViewer__replyContainer").insertBefore($(".ThreadViewer__typingIndicator"),$(".select"));
  390. 	
  391. 		populate();
  392. 	}
  393.  
  394. 	//Detects the current theme (dark/light) and applies the correct color (for the added elements)
  395. 	function themeColors() {
  396. 		var darkTheme = $$(".theme-dark").length ? true : false;
  397. 		if(darkTheme) {
  398. 			console.log("[Modmail++] Dark mode detected! Setting colors...");
  399. 			textColor = darkModeTextColor;
  400. 			titleColor = darkModeTitleColor;
  401. 			listBoxColor = darkModeListColor;
  402. 		} else {
  403. 			console.log("[Modmail++] Light mode detected! Setting colors...");
  404. 			textColor = lightModeTextColor;
  405. 			titleColor = lightModeTitleColor;
  406. 			listBoxColor = lightModeListColor;
  407. 		}
  408. 	}
  409.  
  410. 	themeColors();
  411.  
  412. 	//Took advice for the listbox CSS from moderncss.dev/custom-select-styles-with-pure-css, thanks!
  413. 	var css = `.profileIcon:hover {
  414. 		-ms-transform: scale(6);
  415. 		-webkit-transform: scale(6);
  416. 		transform: scale(6);
  417. 	}
  418. 	.profileIcon {
  419. 		position: relative;
  420. 		bottom: 4px;
  421. 		margin-bottom: 10px;
  422. 		float: left; border-radius: 50%;
  423. 		transition: transform .1s;
  424. 	}
  425. 	.InfoBar__recentsNone {
  426. 		color: #6e6e6e;
  427. 	}
  428. 	.InfoBar__metadata, .InfoBar__recents {
  429. 		margin: 6px 0; 
  430. 		margin-left: 10px;
  431. 	}
  432. 	.value {
  433. 		color: ${dataColor};
  434. 	}
  435. 	.InfoBar__banText {
  436. 		padding-bottom: 15px;
  437. 	}
  438. 	.InfoBar__username, .InfoBar__username:visited {
  439. 		padding-left: 10px;
  440. 	}
  441. 	.ThreadViewer__infobarContainer {
  442. 		display: table;
  443. 	}
  444. 	.dataText {
  445. 		color: ${textColor}; 
  446. 		font-size: 13px;
  447. 		padding-left: 10px;
  448. 	}
  449. 	.dataTitle {
  450. 		color: ${titleColor};
  451. 		font-size: 15px; 
  452. 		margin-bottom: 3px; 
  453. 		margin-top: 5px;
  454. 	}
  455. 	.responseListbox {
  456. 		width: 50%;
  457. 		cursor: pointer;
  458. 	}
  459. 	:root {
  460. 		--select-border: #0079d3;
  461. 		--select-focus: blue;
  462. 		--select-arrow: var(--select-border);
  463. 	}
  464. 	*,
  465. 	*::before,
  466. 	*::after {
  467. 	box-sizing: border-box;
  468. 	}
  469. 	select {
  470. 		appearance: none;
  471. 		background-color: ${listBoxColor};
  472. 		color: ${textColor};
  473. 		border: none;
  474. 		padding: 0 1em 0 0;
  475. 		margin: 0;
  476. 		width: 100%;
  477. 		cursor: pointer;
  478. 		font-family: inherit;
  479. 		font-size: inherit;
  480. 		line-height: inherit;
  481. 		outline: none;
  482. 		position: relative;
  483. 	}
  484. 	.select {
  485. 		width: 100%;
  486. 		min-width: 15ch;
  487. 		max-width: 30ch;
  488. 		border: 1px solid var(--select-border);
  489. 		border-radius: 0.25em;
  490. 		padding: 0.3em 0.4em;
  491. 		font-size: 0.9rem;
  492. 		line-height: 1.1;
  493. 		background-color: ${listBoxColor};
  494. 		margin-bottom: 15px;
  495. 	}
  496. 	select::-ms-expand {
  497. 		display: none;
  498. 	}
  499. 	option {
  500. 		white-space: normal;
  501. 		outline-color: var(--select-focus);
  502. 	}
  503. 	select:focus + .focus {
  504. 		position: absolute;
  505. 		top: -1px;
  506. 		left: -1px;
  507. 		right: -1px;
  508. 		bottom: -1px;
  509. 		border: 2px solid var(--select-focus);
  510. 		border-radius: inherit;
  511. 	}
  512. 	.Author__text {
  513. 		padding: 6px 0;
  514. 	}
  515. 	.chatProfileIcon {
  516. 		margin-right: 7px;
  517. 		transition: transform .1s;
  518. 		border-radius: 50%;
  519. 	}
  520. 	.App__page {
  521. 		background: var(--color-tone-8);
  522. 	}
  523. 	::-webkit-scrollbar {
  524. 	  width: 10px;
  525. 	}
  526. 	::-webkit-scrollbar-track {
  527. 	  background: ${listBoxColor}; 
  528. 	}
  529. 	::-webkit-scrollbar-thumb {
  530. 	  background: #888; 
  531. 	}
  532. 	::-webkit-scrollbar-thumb:hover {
  533. 	  background: #555;
  534. 	}
  535. 	.subredditRuleList {
  536. 		--newRedditTheme-bodyText: ${titleColor};
  537. 		--newRedditTheme-metaText: ${textColor};
  538. 		--newRedditTheme-navIconFaded10: rgba(215,218,220,0.1);
  539. 		--newRedditTheme-actionIconTinted80: #9a9b9c;
  540. 		--newRedditTheme-activeShaded90: #006cbd;
  541. 		--newRedditTheme-actionIconAlpha20: rgba(129,131,132,0.2);
  542. 		--newCommunityTheme-actionIcon: #818384;
  543. 		--newRedditTheme-bodyTextAlpha03: ${listBoxColor};
  544. 		--newRedditTheme-navIcon: #D7DADC;
  545. 		--newCommunityTheme-line: #343536;
  546. 		--newCommunityTheme-body: #1A1A1B;
  547. 	}
  548. 	.ruleList {
  549. 		padding: 0 24px 0 20px;
  550. 		background: var(--newRedditTheme-bodyTextAlpha03);
  551. 		max-height: 100%;
  552. 	}
  553. 	html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, button, cite, code, del, dfn, em, img, input, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  554. 		margin: 0;
  555. 		padding: 0;
  556. 		border: 0;
  557. 		font-size: 100%;
  558. 		font: inherit;
  559. 		vertical-align: baseline;
  560. 	}
  561. 	.dialogWindow {
  562. 		pointer-events: auto;
  563. 	}
  564. 	.ruleDiv {
  565. 		-ms-flex-align: center;
  566. 		align-items: center;
  567. 		box-sizing: border-box;
  568. 		display: -ms-flexbox;
  569. 		display: flex;
  570. 		height: 100%;
  571. 		padding: 75px 30px 20px;
  572. 		pointer-events: none;
  573. 		position: fixed;
  574. 		top: 0;
  575. 		width: 100%;
  576. 		z-index: 55;
  577. 	}
  578. 	.dialogWindow {
  579. 		background-color: var(--newCommunityTheme-body);
  580. 		border: 1px solid var(--newCommunityTheme-line);
  581. 		border-radius: 4px;
  582. 		box-shadow: 0 2px 20px 0 rgb(0 0 0 / 30%);
  583. 		margin: auto;
  584. 		pointer-events: auto;
  585. 		z-index: 55;
  586. 	}
  587. 	.listWindow {
  588. 		width: 550px;
  589. 		position: relative;
  590. 	}
  591. 	.ruleHeader {
  592. 		height: 50px;
  593. 		border-bottom: 1px solid var(--newRedditTheme-bodyTextAlpha03);
  594. 		position: relative;
  595. 		display: -ms-flexbox;
  596. 		display: flex;
  597. 		-ms-flex-align: center;
  598. 		align-items: center;
  599. 		padding: 0 24px 0 20px;
  600. 		margin: 0 -24px 0 -20px;
  601. 		font-weight: 700;
  602. 		font-size: 14px;
  603. 		color: var(--newRedditTheme-metaText);
  604. 	}
  605. 	.infoIcon {
  606. 		background: #86848412;
  607. 		border-radius: 8px;
  608. 		padding: 10px 16px 10px 12px;
  609. 		display: -ms-flexbox;
  610. 		display: flex;
  611. 		box-sizing: border-box;
  612. 		margin-top: 16px;
  613. 	}
  614. 	.bottomFooter {
  615. 		box-shadow: 0 -1px 0 var(--newRedditTheme-bodyTextAlpha03);
  616. 		padding: 20px 0 16px;
  617. 		min-height: 80px;
  618. 		display: -ms-flexbox;
  619. 		display: flex;
  620. 		box-sizing: border-box;
  621. 		bottom: 0;
  622. 		left: 0;
  623. 	}
  624. 	.closeIconSVG {
  625. 		margin-left: auto;
  626. 		margin-right: -4px;
  627. 		cursor: pointer;
  628. 		height: 20px;
  629. 		padding: 4px;
  630. 		width: 20px;
  631. 		fill: var(--newCommunityTheme-actionIcon);
  632. 	}
  633. 	.infoIconSVG {
  634. 		-ms-flex: 0 0 20px;
  635. 		flex: 0 0 20px;
  636. 		width: 20px;
  637. 		margin-right: 12px;
  638. 		fill: #878a8c;
  639. 	}
  640. 	.selectButton:disabled {
  641. 		opacity: .5;
  642. 	}
  643. 	.selectButton {
  644. 		margin-top: 8px;
  645. 		-ms-flex: 0 0 150px;
  646. 		flex: 0 0 150px;
  647. 		background: var(--newRedditTheme-activeShaded90);
  648. 		height: 31px;
  649. 		border-radius: 100px;
  650. 		color: #fff;
  651. 		-ms-flex-item-align: end;
  652. 		align-self: flex-end;
  653. 		margin-left: auto;
  654. 		font-size: 12px;
  655. 		font-weight: 700;
  656. 		text-transform: uppercase;
  657. 		letter-spacing: .05em;
  658. 		outline: none!important;
  659. 	}
  660. 	.infoBox {
  661. 		-ms-flex: 0 1 auto;
  662. 		flex: 0 1 auto;
  663. 		font-size: 14px;
  664. 		line-height: 1.45;
  665. 		letter-spacing: -.01em;
  666. 		color: var(--newRedditTheme-metaText);
  667. 	}
  668. 	.infoBox a {
  669. 		color: #24a0ed;
  670. 	}
  671. 	button {
  672. 		background: transparent;
  673. 		border: none;
  674. 		color: inherit;
  675. 		cursor: pointer;
  676. 		padding: initial;
  677. 	}
  678. 	input {
  679. 		-webkit-writing-mode: horizontal-tb !important;
  680. 		text-rendering: auto;
  681. 		color: -internal-light-dark(black, white);
  682. 		letter-spacing: normal;
  683. 		word-spacing: normal;
  684. 		text-transform: none;
  685. 		text-indent: 0px;
  686. 		text-shadow: none;
  687. 		display: inline-block;
  688. 		text-align: start;
  689. 		appearance: auto;
  690. 		background-color: -internal-light-dark(rgb(255, 255, 255), rgb(59, 59, 59));
  691. 		-webkit-rtl-ordering: logical;
  692. 		cursor: text;
  693. 		margin: 0em;
  694. 		font: 400 13.3333px Arial;
  695. 		padding: 1px 2px;
  696. 		border-width: 2px;
  697. 		border-style: inset;
  698. 		border-color: -internal-light-dark(rgb(118, 118, 118), rgb(133, 133, 133));
  699. 		border-image: initial;
  700. 	}
  701. 	body {
  702. 		min-height: calc(100vh - 48px);
  703. 		line-height: 1;
  704. 		font-family: IBMPlexSans, Arial, sans-serif;
  705. 		-webkit-font-smoothing: antialiased;
  706. 	}
  707. 	._3kEv5z1lDKGV8PQ5ijp4Uh {
  708. 		background-size: 24px 24px;
  709. 		background-position: 11px 6px;
  710. 		padding-left: 42px!important;
  711. 		background-repeat: no-repeat;
  712. 	}
  713. 	.title {
  714. 		margin-top: 16px;
  715. 		font-size: 16px;
  716. 		line-height: 1.2;
  717. 		font-weight: 700;
  718. 		color: var(--newRedditTheme-bodyText);
  719. 	}
  720. 	.fieldSet {
  721. 		display: -ms-flexbox;
  722. 		display: flex;
  723. 		-ms-flex-direction: column;
  724. 		flex-direction: column;
  725. 		box-sizing: border-box;
  726. 	}
  727. 	.listValue label {
  728. 		padding: 0 72px 0 20px;
  729. 		display: -ms-flexbox;
  730. 		display: flex;
  731. 		height: 100%;
  732. 		-ms-flex-align: center;
  733. 		align-items: center;
  734. 		cursor: pointer;
  735. 		font-size: 14px;
  736. 		font-weight: 700;
  737. 		color: var(--newRedditTheme-metaText);
  738. 		position: relative;
  739. 	}
  740. 	.listValue {
  741. 		box-sizing: border-box;
  742. 		height: 64px;
  743. 		border-top: 1px solid var(--newRedditTheme-navIconFaded10);
  744. 	}
  745. 	.listBox {
  746. 		margin: 16px -24px 0 -20px;
  747. 		max-height: 60vh;
  748. 		min-height: 100px;
  749. 		overflow: auto;
  750. 	}
  751. 	.listValue input {
  752. 		visibility: hidden;
  753. 		display: none;
  754. 	}
  755. 	.StyledHtml tr {
  756. 		color: ${titleColor};
  757. 	}
  758. 	.StyledHtml td {
  759. 		color: ${textColor};
  760. 	}`;
  761.  
  762. 	//Apply the custom css
  763. 	var styleSheet = document.createElement("style");
  764. 	styleSheet.type = "text/css";
  765. 	styleSheet.innerText = css;
  766. 	document.head.appendChild(styleSheet);
  767.  
  768. 	addInfo();
  769. 	if(enableCustomResponses && $("#responseListbox") == null) addResponseBox();
  770. 	console.log("[Modmail++] %cLoaded!", "color: lime");
  771.  
  772. } /* End of Main function */
  773.  
  774. console.log("[Modmail++] %cScript started!", "color: green");
  775.  
  776. const $ = document.querySelector.bind(document);
  777. const $$ = document.querySelectorAll.bind(document);
  778.  
  779. //Returns a random item from array
  780. const randItem = itemArr => itemArr[Math.floor(Math.random() * itemArr.length)];
  781.  
  782. //Adds a zero suffix if x < 10
  783. const fixnumber = number => number < 10 ? "0" + number : number;
  784.  
  785. //Removes the Reddit prefix
  786. const removePrefix = username => ["r/","u/"].some(tag => username.includes(tag)) ? username.slice(2) : username;
  787.  
  788. //Adds the Reddit prefix if nonexistant
  789. const keepPrefix = (username, subreddit) => ["r/","u/"].some(tag => username.includes(tag)) ? username : subreddit ? `r/${username}` : `u/${username}`;
  790.  
  791. $(".Sidebar__titleMessage").setAttribute("onclick","window.open('https://github.com/Hakorr/Userscripts/tree/main/Reddit.com/ModmailExtraInfo')");
  792. $(".Sidebar__titleMessage").setAttribute("style","cursor: pointer");
  793. $(".Sidebar__titleMessage").innerText = "Modmail++";
  794.  
  795. var run = true;
  796.  
  797. /* Start Main function when visiting new modmail */
  798. var pageURLCheckTimer = setInterval (function () {
  799.     if (this.lastPathStr !== location.pathname) 
  800.     {
  801.         this.lastPathStr = location.pathname;
  802.  
  803. 		console.log("[Modmail++] %cNew page detected!", "color: gold")
  804. 		run = true;
  805.  
  806. 		let interval = setInterval (function () {
  807. 		//Add confetti explosion if no mail
  808. 		if($(".NoThreadMessage__generic") && run) {
  809. 			clearInterval(interval);
  810. 			run = false;
  811. 			console.log("[Modmail++] %cNo modmail!", "color: lime");
  812. 			party.confetti($(".NoThreadMessage__generic"), {
  813. 				count: party.variation.range(20, 40),
  814. 				spread: 50
  815. 			});
  816. 		}
  817.  
  818. 		//User is on modmail "chat" page
  819. 		if($(".InfoBar__username")&& run) {
  820. 			clearInterval(interval);
  821. 			run = false;
  822. 			if($("body")) main();
  823. 		}
  824. 		}, 5);
  825.     }
  826. }, 100);