tftv keyboard shortcuts

Adds keyboard shortcuts for navigating forum pages on teamfortress.tv

  1. // ==UserScript==
  2. // @name tftv keyboard shortcuts
  3. // @namespace Lense
  4. // @description Adds keyboard shortcuts for navigating forum pages on teamfortress.tv
  5. // @include /^https?://(www\.)?teamfortress.tv/.*/
  6. // @version 0.5.4
  7. // @grant none
  8. // ==/UserScript==
  9.  
  10. // Toggle highlighting of focused post. With this off, there are no visual changes.
  11. var focus_highlight = true;
  12.  
  13. /*
  14. * Style post with a highlight
  15. */
  16. function focus_post(post) {
  17. if(!focus_highlight) {
  18. return;
  19. }
  20. post.style.background = "#fff";
  21. post.style.boxShadow = "1px 1px 8px";
  22. post.style.zIndex = "1";
  23. }
  24.  
  25. /*
  26. * Reset style to normal
  27. */
  28. function unfocus_post(post) {
  29. post.style.background = "";
  30. post.style.boxShadow = "";
  31. post.style.zIndex = "";
  32. }
  33.  
  34. /*
  35. * Helper function to scroll to post by id
  36. */
  37. function goto_post(id) {
  38. unfocus_post(document.getElementById(prev_post_id));
  39. prev_post_id = id;
  40.  
  41. var post = document.getElementById(id);
  42. post.scrollIntoView();
  43. // Show upper border
  44. window.scrollBy(0,-1);
  45. // Highlight the current post
  46. focus_post(post);
  47. }
  48.  
  49. /*
  50. * Update styles on plus/minus frag and send the http request
  51. * id is the post id
  52. * frag_action is either plus or minus
  53. */
  54. function frag(id, frag_action) {
  55. var btn_container = document.querySelector('.post-frag-container[data-post-id="'+id+'"]');
  56. var type;
  57. if(btn_container.classList.contains("self")) {
  58. // This post doesn't actually have frags; it's the OP.
  59. type = "thread";
  60. btn_container = document.querySelector('.thread-frag-container' + (type=="post" ? '[data-'+type+'-id="'+id+'"]' : ''));
  61. } else {
  62. type = "post";
  63. }
  64.  
  65. // Most of this is ripped+modified from tftv js
  66. var frag_status = btn_container.attributes["data-frag-status"].value;
  67. if(frag_status == 'neutral' && frag_action == 'plus' || frag_status == 'minused' && frag_action == 'minus')
  68. var diff = 1;
  69. if(frag_status == 'neutral' && frag_action == 'minus' || frag_status == 'plused' && frag_action == 'plus')
  70. var diff = -1;
  71. if(frag_status == 'minused' && frag_action == 'plus')
  72. var diff = 2;
  73. if(frag_status == 'plused' && frag_action == 'minus')
  74. var diff = -2;
  75. var frag_count_container = type=="post" ? btn_container.firstElementChild : btn_container.querySelector("#thread-frag-count");
  76. var new_frag_count = parseInt(frag_count_container.textContent, 10) + diff;
  77. frag_count_container.textContent = new_frag_count;
  78. if(type == "post") {
  79. btn_container.children[0].classList.remove("positive");
  80. btn_container.children[0].classList.remove("negative");
  81. btn_container.children[0].classList.remove("neutral");
  82. btn_container.children[0].classList.add(new_frag_count > 0 ? "positive" : (new_frag_count < 0 ? "negative" : "neutral"));
  83. }
  84.  
  85. if(frag_status == 'plused' && frag_action == 'plus' || frag_status == 'minused' && frag_action == 'minus')
  86. new_status = 'neutral';
  87. if(frag_action == 'plus' && frag_status !== 'plused')
  88. new_status = 'plused';
  89. if(frag_action == 'minus' && frag_status !== 'minused')
  90. new_status = 'minused';
  91. btn_container.setAttribute("data-frag-status", new_status);
  92.  
  93. var plus_classes = btn_container.querySelector("." + type + "-frag-btn.plus").classList;
  94. var minus_classes = btn_container.querySelector("." + type + "-frag-btn.minus").classList;
  95. if(frag_action == "plus") {
  96. if(plus_classes.contains("clicked")) {
  97. plus_classes.remove("clicked");
  98. } else {
  99. plus_classes.add("clicked");
  100. }
  101. minus_classes.remove("clicked");
  102. } else {
  103. if(minus_classes.contains("clicked")) {
  104. minus_classes.remove("clicked");
  105. } else {
  106. minus_classes.add("clicked");
  107. }
  108. plus_classes.remove("clicked");
  109. }
  110.  
  111. var xmlhttp = new XMLHttpRequest();
  112. xmlhttp.onreadystatechange = function() {
  113. if(xmlhttp.readyState == XMLHttpRequest.DONE) {
  114. if(xmlhttp.status != 200) {
  115. alert('VOTE NOT SENT');
  116. }
  117. }
  118. }
  119. xmlhttp.open("POST", '/' + type + '/frag/' + (type=="post" ? id : btn_container.attributes["data-thread-id"].value) + '/' + frag_action, true);
  120. xmlhttp.send();
  121. }
  122.  
  123. /*
  124. * Find the number of pages in the thread
  125. */
  126. var pageList = document.querySelectorAll(".mod-page:not(.mod-to-top):not(.mod-to-bottom)");
  127. var lastPage = pageList.length > 0 ? parseInt(pageList[pageList.length - 1].textContent) : 1;
  128.  
  129. var posts = document.querySelectorAll(".post");
  130. focus_post(posts[0]);
  131. var cur_post_index = 0;
  132. var prev_post_id = posts[0].id;
  133.  
  134. /*
  135. * Handle keypresses
  136. */
  137. document.onkeypress = function(e) {
  138. // Not entirely sure why this is useful, but it can't break anything that isn't already broken
  139. e = e || window.event;
  140. // Ignore keypresses in text boxes, but allow if nothing or a link is selected
  141. if(e.target.nodeName != "BODY" && e.target.nodeName != "A") {
  142. // Got keypress, but it's probably in a textbox, so ignore it
  143. return;
  144. }
  145.  
  146. // Current page number
  147. var page = window.location.search == "" || parseInt(window.location.search.match("page=([0-9]*)")[1]);
  148.  
  149. switch(e["key"]) {
  150. /*
  151. * Pages (left/right)
  152. */
  153. case "d":
  154. if(page != lastPage) {
  155. page = (page+1).toString();
  156. window.location.search = "?page=" + page;
  157. }
  158. break;
  159. case "a":
  160. if(page != 1) {
  161. page = (page-1).toString();
  162. window.location.search = "?page=" + page;
  163. }
  164. break;
  165. case "D":
  166. if(page != lastPage) {
  167. window.location.search = "?page=" + lastPage.toString();
  168. }
  169. break;
  170. case "A":
  171. if(page != 1) {
  172. window.location.search = "?page=1";
  173. }
  174. break;
  175. /*
  176. * Posts (up/down)
  177. */
  178. case "w":
  179. if(cur_post_index > 0) {
  180. cur_post_index--;
  181. }
  182. goto_post(posts[cur_post_index].id);
  183. break;
  184. case "s":
  185. if(cur_post_index < posts.length - 1) {
  186. cur_post_index++;
  187. }
  188. goto_post(posts[cur_post_index].id);
  189. break;
  190. case "W":
  191. cur_post_index = 0;
  192. goto_post(posts[cur_post_index].id);
  193. break;
  194. case "S":
  195. cur_post_index = posts.length - 1;
  196. goto_post(posts[cur_post_index].id);
  197. break;
  198. /*
  199. * Frags (+/-)
  200. */
  201. case "q":
  202. frag(posts[cur_post_index].id.slice(8), "plus");
  203. break;
  204. case "e":
  205. frag(posts[cur_post_index].id.slice(8), "minus");
  206. break;
  207. }};