☰

tftv keyboard shortcuts

Adds keyboard shortcuts for navigating forum pages on teamfortress.tv

目前為 2015-09-02 提交的版本，檢視 最新版本。

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