☰

Reddit enhancements

Adds a few comment highlighting features

当前为 2014-05-30 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name           Reddit enhancements
  3. // @description    Adds a few comment highlighting features
  4. // @namespace      https://greasyfork.org/users/98-jonnyrobbie
  5. // @author         JonnyRobbie
  6. // @include        /https?:\/\/(www\.)?reddit\.com\/r\/[a-zA-Z]+\/comments\/.*/
  7. // @version        1.5
  8. // ==/UserScript==
  9.  
  10. /*-----settings-----*/
  11. highlightBGColorB = '7CB9F7'; //background color of a highlighted newest comment
  12. highlightBGColorA = 'CEE3F7'; //background color of a highlighted older comment
  13. highlightHalf = 2 //[hours]; when the algorithm should interpolate exactly 0.5 between A and B
  14. highlightBGBorder = '1px solid #425466'; //border style of a highlighted new comment
  15. expiration = 432000000; //expiraton time in millisesonds; default is 5 days (432000000ms)
  16. highlihhtBetterChild = true; //highlight child comment if it has better karma than its parent
  17.     betterChildStyleGradientA = '99AAEE';
  18.     betterChildStyle = '3px solid'; //border of said comment
  19. highlightNegative = true; //highlight a comment if it has negative karma
  20.     betterChildStyleGradientC = 'ad3429';
  21. /*-----settings-----*/
  22.  
  23. /*
  24. Changelog:
  25. 1.4.2
  26. -tweaked some colors and timing
  27. 1.4.1
  28. -added highlighting comment with negative karma
  29. -added color shading dependent on the new comment age
  30. -added an option to manually edit the time of the last thread visit
  31. 1.3.1
  32. -Added expiration for localstorage, defaulted to 14 days. It won't grow indefinately now.
  33. -Reduced the amount of console.log clutter
  34. */
  35.  
  36. haveGold = false; //inicialization
  37.  
  38. function isNumber(n) {
  39.   return !isNaN(parseFloat(n)) && isFinite(n);
  40. }
  41.  
  42.  
  43. function hasClass(element, cls) {
  44.     return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
  45. }
  46.  
  47. function getThread() {
  48.     console.log("Logging reddit comment highlight.");
  49.     console.log("Fetching thread ID...");
  50.     if (document.querySelector('[rel="shorturl"]') === null) {
  51.         console.log("Not a comment thread. Aborting userscript...");
  52.         return;
  53.     }
  54. 	haveGold = hasClass(document.getElementsByTagName("body")[0], "gold");
  55. 	console.log("hasgold: " + haveGold);
  56. 	purgeOldStorage(expiration);
  57.     var threadID = "redd_id_" + document.querySelector('[rel="shorturl"]').href.substr(-6);
  58.     console.log("Thread id: " + threadID);
  59.     var lastVisit = localStorage.getItem(threadID);
  60.     if (lastVisit === null) {
  61.         console.log("Thread has not been visited yet. Creating localStorage...");
  62.         localStorage.setItem(threadID, Date.parse(Date()));
  63.     }
  64. 	else {
  65. 		var postMenu;
  66. 		postMenu = document.getElementById("siteTable").getElementsByClassName("flat-list")[0];
  67. 		if (!haveGold) {
  68. 			/*var editTime = document.createElement("li");
  69. 			editTime.innerHTML = "<a>change highlight time</a>";
  70. 			editTime.onclick = function(){timeSetBack(threadID);}
  71. 			postMenu.appendChild(editTime);*/
  72. 			var timeDiff = Date.parse(Date()) - lastVisit;
  73. 			var goldBox = document.createElement("div");
  74. 				goldBox.className = "rounded gold-accent comment-visits-box";
  75. 			var goldBoxTitle = document.createElement("div");
  76. 				goldBoxTitle.className = "title";
  77. 			var goldBoxLabel = document.createElement("span");
  78. 				goldBoxLabel.innerHTML = "Highlight comments posted since previous visit [hh:mm] ago:";
  79. 			var goldBoxInput = document.createElement("input");
  80. 				goldBoxInput.type = "text";
  81. 				goldBoxInput.style.margin = "auto 5px";
  82. 				goldBoxInput.style.width = "64px";
  83. 				goldBoxInput.id = "timeInput"
  84. 				goldBoxInput.value = padToTwo(Math.floor(timeDiff/(1000*3600))) + ":" + padToTwo(Math.floor(60*(timeDiff/(1000*3600) - Math.floor(timeDiff/(1000*3600)))));
  85. 			var goldBoxOK = document.createElement("input");
  86. 				goldBoxOK.type = "button";
  87. 				goldBoxOK.value = "OK";
  88. 				goldBoxOK.addEventListener("click", function(){timeSetBack(threadID, goldBoxInput);}, false)
  89. 				goldBox.appendChild(goldBoxTitle);
  90. 				goldBoxTitle.appendChild(goldBoxLabel);
  91. 				goldBoxTitle.appendChild(goldBoxInput);
  92. 				goldBoxTitle.appendChild(goldBoxOK);
  93. 			insertNodeAfter(goldBox, document.getElementsByClassName("commentarea")[0].getElementsByClassName("usertext")[0]);
  94. 		}
  95. 	}
  96. 	/*var reHigh = document.createElement("li");
  97. 	reHigh.innerHTML = "<a>reHigh</a>";
  98. 	reHigh.onclick = function(){highlightNew();}
  99. 	postMenu.appendChild(reHigh);*/
  100. 	
  101. 	commentReg = /^https?:\/\/(www\.)reddit\.com\/r\/[a-zA-Z]+\/comments\/[0-9a-z]+\/[0-9a-z_]+\/$/;
  102. 	isCommentPage = commentReg.test(document.URL);
  103.     highlightComments(lastVisit, isCommentPage);
  104.     //if (true) {
  105. 	
  106. 	
  107. 	console.log("Match for full comment page(" + document.URL + "): " + isCommentPage);
  108. 	if (isCommentPage == true) {
  109. 		console.log("Setting localStorage to now...");
  110. 		localStorage.setItem(threadID, Date.parse(Date()));
  111. 	} else
  112. 	{
  113. 		console.log("not a comment page")
  114. 	}
  115. 	//}
  116. 	
  117.    
  118.     //highlightBetter();
  119. }
  120.  
  121. function padToTwo(number) {
  122.   if (number<=99) { number = ("0"+number).slice(-2); }
  123.   return number;
  124. }
  125.  
  126.  
  127. function timeSetBack(threadID, textbox){
  128. 	//var timeBack = prompt("How many hours do you want to set the thread timestamp back?", "0");
  129. 	console.log("setting time back");
  130. 	var timeBackArray = textbox.value.split(":")
  131. 	if (timeBackArray.length > 2) {
  132. 		alert("You have not entered a valid time");
  133. 		console.log("too many colons");
  134. 		return
  135. 	}
  136. 	var timeBack = parseInt(timeBackArray[0], 10) + (parseInt(timeBackArray[1], 10)/60)
  137. 	if (timeBack != null && isNumber(timeBack) == true) {
  138. 		var lastVisit = Date.parse(Date())-timeBack*3600000;
  139. 		if (lastVisit > localStorage.getItem(threadID)) alert("The time has been set lower than it was before. Please, refresh the page to properly display the changes.");
  140. 		localStorage.setItem(threadID, lastVisit);
  141. 		console.log("Setting localStorage " + threadID + " " + timeBack*3600000 + " ms back");
  142. 		highlightComments(lastVisit, true);
  143. 	}
  144. }
  145.  
  146. function purgeOldStorage(difference) {
  147. 	var thisTime = Date.parse(Date());
  148. 	var total=0;
  149.     for (var i=0;i<localStorage.length;i++) {
  150. 	    if (localStorage.key(i).substr(0,8)=="redd_id_" && parseInt(localStorage.getItem(localStorage.key(i)))+difference<thisTime) {
  151. 		    localStorage.removeItem(localStorage.key(i));
  152. 			total++;
  153. 			i=0;
  154. 		}
  155. 	}
  156. 	console.log(total + " localStorage older than " + difference + "ms has been removed");
  157. }
  158.  
  159. function isProperThread() {
  160. 	return true;
  161. }
  162.  
  163. function insertNodeAfter(node, sibling) {
  164. 	sibling.parentNode.insertBefore(node, sibling.nextSibling);
  165. }
  166.  
  167. function highlightComments(lastVisit, isCommentPage) {
  168.     console.log("Thread last visited in: " + lastVisit);
  169.     comments = document.getElementsByClassName('comment');
  170.     console.log("Comment count: " + comments.length);
  171. 	nowtime = Date.parse(Date());
  172. 	highlightHalf = Math.pow(0.5, (1/(-highlightHalf)));
  173.     for(i=0; i<comments.length; i++) {
  174. 		if ((' ' + comments[i].className + ' ').indexOf(' deleted ') > -1) {continue;} //if the comment contains class 'deleted', skip this iteration
  175.         var ctime = Date.parse(comments[i].childNodes[2].childNodes[0].getElementsByTagName('time')[0].getAttribute('title'));
  176.         var scorechild = parseInt(comments[i].getAttribute('data-ups')) - parseInt(comments[i].getAttribute('data-downs'));
  177.         var scoreparent = parseInt(comments[i].parentNode.parentNode.parentNode.getAttribute('data-ups')) - parseInt(comments[i].parentNode.parentNode.parentNode.getAttribute('data-downs'));
  178.         if (parseInt(ctime) > parseInt(lastVisit) && haveGold == false) {
  179.             //console.log("Highlighting comment...");
  180. 			/*usertextBody = comments[i].getElementsByClassName("usertext-body");
  181. 			for (var j = 0; j < usertextBody.length; j++) {
  182. 				usertextBody[j].style.setProperty('background-color', interpolateColor(highlightBGColorA, highlightBGColorB, getGradient(nowtime-ctime)), '!important');
  183. 				usertextBody[j].style.setProperty('border',highlightBGBorder , '!important');
  184. 			}*/
  185. 			usertextBody = comments[i].getElementsByClassName("usertext-body")[0];
  186. 		//for (var j = 0; j < usertextBody.length; j++) {
  187. 			//console.log(usertextBody.length);
  188. 			console.log("comment(" + i + "," + 0 + "): gradient(" + nowtime + "," + ctime + ") = " + getGradient(nowtime-ctime));
  189. 			usertextBody.style.backgroundColor = interpolateColor(highlightBGColorA, highlightBGColorB, getGradient(nowtime-ctime));
  190. 			usertextBody.style.sborder = highlightBGBorder;
  191.         }
  192. 		
  193. 		
  194.         if (scoreparent < scorechild && highlihhtBetterChild == true) {
  195.             //console.log("Highlighting better comment " + i + "...");
  196.             //console.log(betterChildStyle + " " + getGradient(scoreparent, scorechild));
  197.             //comments[i].style.setProperty('border',betterChildStyle + " " + getGradient(scoreparent, scorechild), 'important');
  198.             comments[i].style.setProperty('border-left',betterChildStyle + " #" + betterChildStyleGradientA, 'important');
  199.         }
  200. 		if (scorechild < 0 && highlightNegative == true) {
  201.             //console.log("Highlighting better comment " + i + "...");
  202.             //console.log(betterChildStyle + " " + getGradient(scoreparent, scorechild));
  203.             //comments[i].style.setProperty('border',betterChildStyle + " " + getGradient(scoreparent, scorechild), 'important');
  204.             comments[i].style.setProperty('border-left','1px solid #' + betterChildStyleGradientC, 'important');
  205.         }
  206.     }
  207. 	if (haveGold == true && isCommentPage == true) {highlightNew();}
  208. 	var goldSelect = document.getElementById("comment-visits");
  209. 	if (goldSelect != null) goldSelect.addEventListener("change", function(){console.log("changed highlighting");highlightNew();;}, false);
  210. 	window.addEventListener("load", function(){console.log("window loaded, highlighting");highlightNew();;}, false)
  211. }
  212.  
  213. function highlightNew(){
  214. 	//console.log("has gold, highligting new...");
  215. 	comments = document.getElementsByClassName("new-comment");
  216. 	console.log("gold " + comments.length + " new comments");
  217. 	nowtime = Date.parse(Date());
  218. 	highlightHalf = Math.pow(0.5, (1/(-highlightHalf)));
  219. 	for(i=0; i<comments.length; i++) {
  220. 		var titleDate;
  221. 		titleDate = comments[i].childNodes[2].childNodes[0].getElementsByTagName('time')[0].getAttribute('datetime')
  222. 		//console.log(titleDate);
  223. 		var ctime = Date.parse(titleDate); //current break???WTF
  224. 		//console.log("Highlighting comment..." + ctime);
  225. 		usertextBody = comments[i].getElementsByClassName("usertext-body")[0];
  226. 		//for (var j = 0; j < usertextBody.length; j++) {
  227. 			//console.log(usertextBody.length);
  228. 			console.log("comment(" + i + "," + 0 + "): gradient(" + nowtime + "," + ctime + ") = " + getGradient(nowtime-ctime));
  229. 			usertextBody.style.backgroundColor = interpolateColor(highlightBGColorA, highlightBGColorB, getGradient(nowtime-ctime));
  230. 			usertextBody.style.sborder = highlightBGBorder;
  231. 			//usertextBody.style.color = "#FF0000";
  232. 		//}
  233. 	}
  234. }
  235.  
  236. function finalBGColor(ctime) {
  237. 	nowtime = Date.parse(Date());
  238. 	
  239. }
  240.  
  241. function getGradient(time) {
  242. 	return Math.pow(highlightHalf, -(time/3600000));
  243. }
  244.  
  245. function interpolateColor(minColor,maxColor,depth){
  246.     function d2h(d) {return d.toString(16);}
  247.     function h2d(h) {return parseInt(h,16);}
  248.     if(depth == 0){
  249.         return minColor;
  250.     }
  251.     if(depth == 1){
  252.         return maxColor;
  253.     }
  254.     var color = "#";
  255.         for(var i=0; i < 6; i+=2){
  256.         var minVal = new Number(h2d(minColor.substr(i,2)));
  257.         var maxVal = new Number(h2d(maxColor.substr(i,2)));
  258.         var nVal = minVal + (maxVal-minVal) * depth;
  259.         var val = d2h(Math.floor(nVal));
  260.         while(val.length < 2){
  261.             val = "0"+val;
  262.         }
  263.         color += val;
  264.     }
  265.     return color;
  266. }
  267.  
  268. function formatDate(unixtime) {
  269.     var t = new Date(unixtime);
  270.     //return t.toString();
  271.     return t.getDate() + "." + (t.getMonth()+1) + "." + t.getFullYear() + " " + (t.getUTCHours()+UTCDifference) + ":" + pad2(t.getMinutes()) + ":" + pad2(t.getSeconds()) + " " + timeZoneDesc;
  272. }
  273. function dateDifference(unixtime) {
  274.     var diff = new Date();
  275.     var unixtime2 = new Date(unixtime);
  276.     
  277.     //var date1 = new Date(),
  278.     //date2 = new Date(1981, 11, 18);
  279.     //order = (date2.getTime() - date1.getTime()) < 0 ? -1 : 1; // work out which is the later date
  280.     var secDiff = (diff.getSeconds() - unixtime2.getSeconds());
  281.     var minDiff = (diff.getMinutes() - unixtime2.getMinutes());
  282.     var hourDiff = (diff.getHours() - unixtime2.getHours());
  283.     var dayDiff = (diff.getDate() - unixtime2.getDate());
  284.     var monthDiff = (diff.getMonth() - unixtime2.getMonth());
  285.     var yearDiff = (diff.getFullYear() - unixtime2.getFullYear());
  286.     var months = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
  287.     if (secDiff < 0) {
  288.         minDiff--;
  289.         secDiff += 60;
  290.     }
  291.     if (minDiff < 0) {
  292.         hourDiff--;
  293.         minDiff += 60;
  294.     }
  295.     if (hourDiff < 0) {
  296.         dayDiff--;
  297.         hourDiff += 24;
  298.     }
  299.     if (dayDiff < 0) {
  300.         monthDiff--;
  301.         dayDiff += months[diff.getMonth()-2]; // -2 as the months array is zero-indexed too
  302.     }
  303.     if (monthDiff < 0) {
  304.         yearDiff--;
  305.         monthDiff += 12;
  306.     }
  307.     //console.log(yearDiff+' years, '+monthDiff+' months, '+dayDiff+' days');
  308.     return (yearDiff == 0 ? "" : yearDiff + " years ") + (monthDiff == 0 ? "" : monthDiff + " months ") + (dayDiff == 0 ? "" : dayDiff + " days ") + (hourDiff == 0 ? "" : hourDiff + " hours ") + (minDiff == 0 ? "" : minDiff + " minutes ") + (secDiff == 0 ? "" : secDiff + " seconds");
  309.     //return yearDiff + " years " + monthDiff + " months " + dayDiff + " days " + hourDiff + " hours " + minDiff + " minutes " + secDiff + " seconds";
  310. }
  311. function addCss(cssCode) {
  312. //thanks for the function from this blog http://www.tomhoppe.com/index.php/2008/03/dynamically-adding-css-through-javascript/
  313.     var styleElement = document.createElement("style");
  314.     styleElement.type = "text/css";
  315.     if (styleElement.styleSheet) {
  316.         styleElement.styleSheet.cssText = cssCode;
  317.     } else {
  318.         styleElement.appendChild(document.createTextNode(cssCode));
  319.     }
  320.     document.getElementsByTagName("head")[0].appendChild(styleElement);
  321. }
  322. function pad2(number) {
  323.      return (number < 10 ? '0' : '') + number
  324. }
  325. getThread();