Greasy Fork 还支持 简体中文。

TorViet Shoutbox Enhancer

A small script to tweak the shoutbox

目前為 2015-06-05 提交的版本,檢視 最新版本

  1. // ==UserScript==
  2. // @name TorViet Shoutbox Enhancer
  3. // @namespace http://torviet.com/userdetails.php?id=1662
  4. // @version 0.5.11
  5. // @license http://www.wtfpl.net/txt/copying/
  6. // @homepageURL https://github.com/S-a-l-a-d/TorViet-Shoutbox-Enhancer
  7. // @supportURL https://github.com/S-a-l-a-d/TorViet-Shoutbox-Enhancer/issues
  8. // @icon http://torviet.com/pic/salad.png
  9. // @description A small script to tweak the shoutbox
  10. // @author Salad
  11. // @match http://torviet.com/qa.php*
  12. // @grant none
  13. // ==/UserScript==
  14.  
  15. (function() {
  16. // First let's get the elements which we will work on.
  17. var boxHead = document.getElementById('boxHead'),
  18. marquee = document.getElementsByClassName('marquee')[0],
  19. sltTheme = document.getElementById('sltTheme'),
  20. clock = document.getElementById('clock'),
  21. allWrapper = document.getElementsByClassName('all-wrapper')[0],
  22. inputSection = document.getElementsByClassName('input-section')[0],
  23. idQuestion = document.getElementById('idQuestion'),
  24. navigationPage = document.getElementsByClassName('navigation_page')[0],
  25. boxQuestion = document.getElementById('boxQuestion'),
  26. emoGroup = document.getElementById('emogroup'),
  27. emoGroupDetail = document.getElementsByClassName('emo-group-detail')[0];
  28.  
  29. /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
  30. * Now remove the unnecessary elements including the box containing new torrents *
  31. * and football news, the warning, the theme drop-down list and the clock. *
  32. * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
  33. boxHead.parentNode.removeChild(boxHead);
  34. marquee.parentNode.removeChild(marquee);
  35. sltTheme.parentNode.removeChild(sltTheme);
  36. clock.parentNode.removeChild(clock);
  37.  
  38. /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
  39. * Here we get the window height of the current window size and the height *
  40. * without the input section and the div holding the navigation. *
  41. * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
  42. var windowHeight = window.innerHeight,
  43. remainingHeight = inputSection.parentNode.offsetHeight + navigationPage.offsetHeight - 100;
  44.  
  45. // Center the wrapper for readability. It's also time to use the defined heights.
  46. allWrapper.style.cssText = 'background-image: none; margin: auto; height: ' + windowHeight + 'px';
  47. inputSection.parentNode.style.padding = '0px';
  48. navigationPage.style.width = 'auto';
  49. boxQuestion.style.height = windowHeight - remainingHeight + 2 + 'px';
  50. emoGroupDetail.parentNode.parentNode.style.height =
  51. emoGroupDetail.parentNode.style.height =
  52. emoGroupDetail.style.height = windowHeight - remainingHeight + 'px';
  53.  
  54. // Override the default emoticons with the frequently used ones.
  55. emoGroupDetail.innerHTML = getEmoticons(524, 574) + getEmoticons(707) + getEmoticons(200, 234);
  56.  
  57. // Add a button to show/hide the emoticon drop-down list.
  58. var btnToggle = document.createElement('input');
  59. btnToggle.type = 'button';
  60. btnToggle.value = 'Toggle';
  61. btnToggle.onclick = toggleEmoSlt;
  62. idQuestion.parentNode.appendChild(btnToggle);
  63.  
  64. /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
  65. * Let's see if the user is using Firefox to add the required keymapping event. *
  66. * This method is taken from http://stackoverflow.com/questions/9847580/ *
  67. * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
  68. typeof InstallTrigger !== 'undefined' ?
  69. document.addEventListener('keypress', keyEvent) : document.addEventListener('keydown', keyEvent);
  70.  
  71. // Here comes our own functions.
  72. function toggleEmoSlt() {
  73. /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
  74. * Found this useful method while I was searching for a way to check *
  75. * whether an element is visible: *
  76. * http://stackoverflow.com/questions/19669786/ *
  77. * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
  78. emoGroup.parentNode.style.display = emoGroup.offsetParent ? 'none' : 'block';
  79. }
  80.  
  81. function getEmoticons(start, end) {
  82. var emos = '';
  83.  
  84. // We won't use a loop if we need only one emoticon.
  85. if (end === void 0)
  86. emos = '<div style="height:43px;width:43px;float:left;display:inline-block;margin:1px;"><a style="margin: 0;" class="btuEmotion" alt="[em' + start +
  87. ']"><img style="max-width: 43px; max-height: 43px" src="/pic/smilies/' + start +
  88. '.gif" alt=""></a></div>';
  89. else
  90. for (var i = start; i <= end; i++)
  91. emos += '<div style="height:43px;width:43px;float:left;display:inline-block;margin:1px;"><a style="margin: 0;" class="btuEmotion" alt="[em' + i +
  92. ']"><img style="max-width: 43px; max-height: 43px" src="/pic/smilies/' + i +
  93. '.gif" alt=""></a></div>';
  94.  
  95. return emos;
  96. }
  97.  
  98. function keyEvent(e) {
  99. switch (e.keyCode) {
  100. // Down arrow.
  101. case 40:
  102. (emoGroup !== document.activeElement) && (emoGroup.selectedIndex !== emoGroup.length - 1) && emoGroup.selectedIndex++;
  103. changeEmoGroup();
  104. break;
  105. // Up arrow.
  106. case 38:
  107. (emoGroup !== document.activeElement) && (emoGroup.selectedIndex !== 0) && emoGroup.selectedIndex--;
  108. changeEmoGroup();
  109. break;
  110. // Ctrl.
  111. case 17:
  112. // Ctrl + C.
  113. case 17 && 67:
  114. break;
  115. default:
  116. idQuestion.focus();
  117. }
  118. }
  119.  
  120. function changeEmoGroup() {
  121. // Native JavaScript method to send an AJAX request.
  122. var request = new XMLHttpRequest();
  123. /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
  124. * Asynchronous request sometimes doesn't work properly so we'll make it synchronous. *
  125. * This process is fast enough so the user won't notice the unresponsive moment *
  126. * while the browser is sending the request and receiving the response. *
  127. * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
  128. request.open('POST', 'qa_smiley_ajax.php', 0);
  129. request.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
  130. request.onreadystatechange = function() {
  131. request.readyState == 4 && request.status == 200 &&
  132. (emoGroupDetail.innerHTML = JSON.parse(request.responseText).str, addEmoGroupEvent())
  133. };
  134. request.send('group=' + emoGroup.value);
  135. }
  136.  
  137. function addEmoGroupEvent() {
  138. // Let's add click events for the newly added emoticons.
  139. for (var i = 0, emos = emoGroupDetail.childNodes, len = emos.length; i < len; i++)
  140. emos[i].addEventListener('click', function(e) {
  141. idQuestion.value += e.target.parentNode.getAttribute('alt');
  142. idQuestion.focus();
  143. });
  144. }
  145.  
  146. // The following should run at startup.
  147. toggleEmoSlt();
  148. addEmoGroupEvent();
  149. idQuestion.focus();
  150. })();