Drawaria Chatbox Toggle

Adds a draggable button to toggle the visibility of the chatbox on Drawaria.online with a title.

  1. // ==UserScript==
  2. // @name Drawaria Chatbox Toggle
  3. // @namespace http://tampermonkey.net/
  4. // @version 0.2
  5. // @description Adds a draggable button to toggle the visibility of the chatbox on Drawaria.online with a title.
  6. // @match https://drawaria.online/*
  7. // @grant none
  8. // @icon https://www.google.com/s2/favicons?sz=64&domain=drawaria.online
  9. // @author YouTubeDrawaria
  10. // @license MIT
  11. // ==/UserScript==
  12.  
  13. (function() {
  14. 'use strict';
  15.  
  16. // Function to toggle chatbox visibility
  17. function toggleChatbox() {
  18. const chatbox = document.getElementById('chatbox_messages');
  19. if (chatbox) {
  20. if (chatbox.style.display === 'none') {
  21. chatbox.style.display = 'block'; // Or 'flex', 'grid', depending on its original display type
  22. toggleButton.innerText = 'Hide Chat';
  23. } else {
  24. chatbox.style.display = 'none';
  25. toggleButton.innerText = 'Show Chat';
  26. }
  27. }
  28. }
  29.  
  30. // Create a container for the button and title, which will be draggable
  31. const container = document.createElement('div');
  32. container.id = 'chatboxToggleContainer';
  33. container.style.position = 'fixed';
  34. container.style.bottom = '10px';
  35. container.style.right = '10px';
  36. container.style.zIndex = '9999';
  37. container.style.display = 'flex';
  38. container.style.flexDirection = 'column';
  39. container.style.alignItems = 'flex-end'; // Aligns items to the right within the column
  40. container.style.cursor = 'grab'; // Indicates it's draggable
  41. container.style.userSelect = 'none'; // Prevent text selection during drag
  42.  
  43. // Create the title div
  44. const titleDiv = document.createElement('div');
  45. titleDiv.id = 'chatboxToggleTitle';
  46. titleDiv.innerText = 'Chatbox Toggle';
  47. titleDiv.style.backgroundColor = '#343a40'; // Dark background for the title
  48. titleDiv.style.color = 'white';
  49. titleDiv.style.padding = '5px 10px';
  50. titleDiv.style.borderRadius = '5px 5px 0 0'; // Rounded top corners
  51. titleDiv.style.marginBottom = '-1px'; // Overlap slightly with the button border
  52. titleDiv.style.fontSize = '0.8em';
  53. titleDiv.style.whiteSpace = 'nowrap'; // Keep title on one line
  54.  
  55. // Create the toggle button
  56. const toggleButton = document.createElement('button');
  57. toggleButton.id = 'toggleChatboxButton';
  58. toggleButton.style.padding = '8px 12px';
  59. toggleButton.style.backgroundColor = '#007bff';
  60. toggleButton.style.color = 'white';
  61. toggleButton.style.border = 'none';
  62. toggleButton.style.borderRadius = '0 0 5px 5px'; // Rounded bottom corners
  63. toggleButton.style.cursor = 'pointer';
  64. toggleButton.textContent = 'Hide Chat'; // Initial text, assuming chat is visible by default
  65.  
  66. // Add event listener to the button
  67. toggleButton.addEventListener('click', toggleChatbox);
  68.  
  69. // Append title and button to the container
  70. container.appendChild(titleDiv);
  71. container.appendChild(toggleButton);
  72.  
  73. // Append the container to the body
  74. document.body.appendChild(container);
  75.  
  76. // Initial check for chatbox visibility to set the button text correctly
  77. const chatbox = document.getElementById('chatbox_messages');
  78. if (chatbox && chatbox.style.display === 'none') {
  79. toggleButton.innerText = 'Show Chat';
  80. }
  81.  
  82. // Make the container draggable
  83. let isDragging = false;
  84. let offsetX, offsetY;
  85.  
  86. container.addEventListener('mousedown', (e) => {
  87. isDragging = true;
  88. container.style.cursor = 'grabbing'; // Change cursor to indicate dragging
  89. offsetX = e.clientX - container.getBoundingClientRect().left;
  90. offsetY = e.clientY - container.getBoundingClientRect().top;
  91. });
  92.  
  93. document.addEventListener('mousemove', (e) => {
  94. if (!isDragging) return;
  95.  
  96. const newX = e.clientX - offsetX;
  97. const newY = e.clientY - offsetY;
  98.  
  99. container.style.left = `${newX}px`;
  100. container.style.top = `${newY}px`;
  101. container.style.right = 'auto'; // Disable right/bottom positioning when dragging via left/top
  102. container.style.bottom = 'auto';
  103. });
  104.  
  105. document.addEventListener('mouseup', () => {
  106. isDragging = false;
  107. container.style.cursor = 'grab'; // Reset cursor
  108. });
  109.  
  110. })();

QingJ © 2025

镜像随时可能失效,请加Q群300939539或关注我们的公众号极客氢云获取最新地址