☰

Comment Text Styles - scrap.tf

Allows changing text style in comment using "Bold", "Italic", "Underline", "Strikethrough" and "Link" buttons above comment input.

  1. // ==UserScript==
  2. // @name        Comment Text Styles - scrap.tf
  3. // @description Allows changing text style in comment using "Bold", "Italic", "Underline", "Strikethrough" and "Link" buttons above comment input.
  4. // @namespace   Violentmonkey Scripts
  5. // @match				https://scrap.tf/*
  6. // @license     MIT
  7. // @grant       none
  8. // @version     0.3
  9. // @author      U.N.Owen
  10. // @require     http://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.js
  11. // ==/UserScript==
  12. function add_text_style(comment, start_offset, end_offset, token, value){
  13.   var comm_text = comment.value;
  14.   var start = comment.selectionStart;
  15.   var end = comment.selectionEnd;
  16.   comment.value = comm_text.substring(0,start) + '[' + token + value + ']' + comm_text.substring(start,end) + '[/' + token + ']' + comm_text.substring(end);
  17.   comment.selectionStart = start + start_offset;
  18.   if(token=='url'){
  19.     comment.selectionEnd = start + end_offset;
  20.   }
  21.   else{
  22.   	comment.selectionEnd = end + end_offset;
  23.   }
  24. }
  25.  
  26. var comment_input = $(".comment-input")[0];
  27. var toolbar = $("<span>")
  28.  
  29. /* //uncomment to only show toolbar when text is selected
  30. toolbar.hide();
  31.  
  32. $(".comment-input:first").on('mouseup keyup', ()=>{
  33.   if(comment_input.selectionStart != comment_input.selectionEnd){
  34.     toolbar.show();
  35.   }
  36.   else{
  37.     toolbar.hide();
  38.   }
  39. });
  40. */
  41.  
  42. var bold_a = $('<a style="margin:2pt" title="Bold"><i class="fa fa-bold"></i></a>').mousedown(function(e){
  43.   e.preventDefault();
  44.   add_text_style(comment_input, 3, 3, 'b', '');
  45. });
  46. var italic_a = $('<a style="margin:2pt" title="Italic"><i class="fa fa-italic"></i></a>').mousedown(function(e){
  47.   e.preventDefault();
  48.   add_text_style(comment_input, 3, 3, 'i', '');
  49. });
  50. var underline_a = $('<a style="margin:2pt" title="Underline"><i class="fa fa-underline"></i></a>').mousedown(function(e){
  51.   e.preventDefault();
  52.   add_text_style(comment_input, 3, 3, 'u', '');
  53. });
  54. var strikethrough_a = $('<a style="margin:2pt" title="Strikethrough"><i class="fa fa-strikethrough"></i></a>').mousedown(function(e){
  55.   e.preventDefault();
  56.   add_text_style(comment_input, 3, 3, 's', '');
  57. });
  58. var link_a = $('<a style="margin:2pt" title="Link"><i class="fa fa-link"></i></a>').mousedown(function(e){
  59.   e.preventDefault();
  60.   add_text_style(comment_input, 5, 9, 'url','=link');
  61. });
  62.  
  63. var color_picker = $('<input type="color" id="TextColor" value="#123456" style="display:none">').on('change', function(){
  64.   add_text_style(comment_input, 15, 15, 'color','='+color_picker.val());
  65. });
  66. var color_a = $('<a style="margin:2pt" title="Text Color"><b><u>A</u></b></a>').mousedown(function(e){
  67.   e.preventDefault();
  68.   color_picker.click();
  69. });
  70. color_a.append(color_picker);
  71.  
  72. toolbar.append(bold_a);
  73. toolbar.append(italic_a);
  74. toolbar.append(underline_a);
  75. toolbar.append(strikethrough_a);
  76. toolbar.append(link_a);
  77. toolbar.append(color_a);
  78. $(".comment-header").before(toolbar);