☰

TesterTV_ScrollButtons

Buttons for quick scrolling in different directions.

当前为 2023-12-14 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         TesterTV_ScrollButtons
  3. // @namespace    
  4. // @version      2023.11.29
  5. // @description  Buttons for quick scrolling in different directions.
  6. // @license      GPL version 3 or any later version
  7. // @author       TesterTV
  8. // @match        *://*/*
  9. // @grant        GM_openInTab
  10. // @grant        GM.setValue
  11. // @grant        GM.getValue
  12. // ==/UserScript==
  13.  
  14. (function() {
  15.  
  16. //********************************************************************************************************************
  17. //***                                              Variables 🇻​🇦​🇷                                              ***
  18. //********************************************************************************************************************
  19.     // General variables
  20.     var ButtonsOpacityDefault = '0.05';
  21.     var ButtonsOpacityMouseOver = '1';
  22.     var PositionHorizontalRight = (document.documentElement.clientWidth - 81) + 'px';
  23. 	var PositionHorizontalLeft= '15px';
  24.     var ButtonSize = '66px';
  25.     var FontSize = '50px';
  26.  
  27.     // Check if current window is an iframe
  28.     var isInIframe = window !== window.top;
  29.  
  30. //********************************************************************************************************************
  31. //***                                                Button ⬆️                                                    ***
  32. //********************************************************************************************************************
  33.  
  34.     // Create the button element
  35.     var TopSideButton = document.createElement('button');
  36.     TopSideButton.innerHTML = '⬆️';
  37.     TopSideButton.style.height = ButtonSize;
  38.     TopSideButton.style.width = ButtonSize;
  39.     TopSideButton.style.fontSize = FontSize;
  40.     TopSideButton.style.position = 'fixed';
  41.     TopSideButton.style.left = PositionHorizontalRight;
  42.     TopSideButton.style.top = '42%';
  43.     TopSideButton.style.transform = 'translateY(-50%)';
  44.     TopSideButton.style.opacity = ButtonsOpacityDefault;
  45.     TopSideButton.style.background = 'transparent';
  46.     TopSideButton.style.border = 'none';
  47.     TopSideButton.style.outline = 'none';
  48.     TopSideButton.style.zIndex = '9996';
  49.     TopSideButton.id="TopSideButton";
  50.  
  51.     // Hide the button if in an iframe
  52.     if (isInIframe) {
  53.         TopSideButton.style.display = 'none';
  54.     }
  55.  
  56.     document.body.appendChild(TopSideButton);
  57.  
  58. //********************************************************************************************************************
  59. //***                                     Button - Functionality ⬆️⚙️                                             ***
  60. //********************************************************************************************************************
  61.  
  62.     // Function to scroll to the top of the page
  63.     function scrollToTop() {
  64.         window.scrollTo(0, 0);
  65.     }
  66.  
  67.     // Add event listener to scroll when button is clicked
  68.     TopSideButton.addEventListener('click', scrollToTop);
  69.  
  70.     // Show TopSideButton when mouse cursor is over it
  71.     TopSideButton.addEventListener('mouseenter', function() {
  72.         TopSideButton.style.opacity = ButtonsOpacityMouseOver;
  73.     });
  74.  
  75.     // Hide TopSideButton when mouse cursor leaves it
  76.     TopSideButton.addEventListener('mouseleave', function() {
  77.         TopSideButton.style.opacity = ButtonsOpacityDefault;
  78.     });
  79.  
  80. //********************************************************************************************************************
  81. //***                                                Button ⬇️                                                    ***
  82. //********************************************************************************************************************
  83.  
  84.     // Create the button element
  85.     var BottomSideButton = document.createElement('button');
  86.     BottomSideButton.innerHTML = '⬇️';
  87.     BottomSideButton.style.height = ButtonSize;
  88.     BottomSideButton.style.width = ButtonSize;
  89.     BottomSideButton.style.fontSize = FontSize;
  90.     BottomSideButton.style.position = 'fixed';
  91.     BottomSideButton.style.left = PositionHorizontalRight;
  92.     BottomSideButton.style.top = '58%';
  93.     BottomSideButton.style.transform = 'translateY(-50%)';
  94.     BottomSideButton.style.opacity = ButtonsOpacityDefault;
  95.     BottomSideButton.style.background = 'transparent';
  96.     BottomSideButton.style.border = 'none';
  97.     BottomSideButton.style.outline = 'none';
  98.     BottomSideButton.style.zIndex = '9998';
  99.     BottomSideButton.id="BottomSideButton";
  100.  
  101.     // Hide the button if in an iframe
  102.     if (isInIframe) {
  103.         BottomSideButton.style.display = 'none';
  104.     }
  105.  
  106.     document.body.appendChild(BottomSideButton);
  107.  
  108. //********************************************************************************************************************
  109. //***                                     Button - Functionality ⬇️⚙️                                             ***
  110. //********************************************************************************************************************
  111.  
  112.     // Function to scroll to the bottom of the page
  113.     function scrollToBottom() {
  114.         window.scrollTo(0, document.body.scrollHeight);
  115.     }
  116.  
  117.     // Add event listener to scroll when button is clicked
  118.     BottomSideButton.addEventListener('click', scrollToBottom);
  119.  
  120.     // Show BottomSideButton when mouse cursor is over it
  121.     BottomSideButton.addEventListener('mouseenter', function() {
  122.         BottomSideButton.style.opacity = ButtonsOpacityMouseOver;
  123.     });
  124.  
  125.     // Hide BottomSideButton when mouse cursor leaves it
  126.     BottomSideButton.addEventListener('mouseleave', function() {
  127.         BottomSideButton.style.opacity = ButtonsOpacityDefault;
  128.     });
  129.  
  130. //********************************************************************************************************************
  131. //***                  Load buttons options -buttons horizontal position and visibility 🔄                         ***
  132. //********************************************************************************************************************
  133.  
  134.     GM.getValue("SideButtonsOption", "").then(function(value) {
  135. 		// Check if the script is running in an iframe
  136. 		if (window.self !== window.top) {
  137. 			// Hide the buttons in iframes
  138. 			TopSideButton.style.display = 'none';
  139. 			BottomSideButton.style.display = 'none';
  140. 		} else {
  141. 			// Retrieve the value of SideButtonsOption using GM.getValue (DropDown1)
  142. 			GM.getValue("SideButtonsOption", "").then(function(value) {
  143. 				if (value === '0'|| value === '') {
  144. 					TopSideButton.style.left = PositionHorizontalRight;
  145. 					BottomSideButton.style.left = PositionHorizontalRight;
  146. 					TopSideButton.style.display = 'block';
  147. 					BottomSideButton.style.display = 'block';
  148. 				} else if (value === '1') {
  149.                     TopSideButton.style.left = PositionHorizontalLeft;
  150. 					BottomSideButton.style.left = PositionHorizontalLeft;
  151. 					TopSideButton.style.display = 'block';
  152. 					BottomSideButton.style.display = 'block';
  153. 				} else if (value === '2') {
  154.                     TopSideButton.style.display = 'none';
  155. 					BottomSideButton.style.display = 'none';
  156. 				}
  157. 			});
  158. 		}
  159.     });
  160.  
  161. //********************************************************************************************************************
  162. //***                      Load buttons options -buttons Vertical position and visibility 🔄                       ***
  163. //********************************************************************************************************************
  164.  
  165.     GM.getValue("SideButtonsSliderOption", "").then(function(value) {
  166.         TopSideButton.style.top = 'calc(' + value + '%)';
  167.         BottomSideButton.style.top = 'calc(' + (100 - value) + '%)';
  168.     });
  169.  
  170. //********************************************************************************************************************
  171. //***             Check if only media is visible 🔄🎵🎬 Check if YouTube full screen is visible                    ***
  172. //********************************************************************************************************************
  173.     function checkButtonState() {
  174.  
  175.  
  176.         // Don't show buttons if only media is visible
  177.         // Get the current URL
  178.         var currentUrl = window.location.href;
  179.  
  180.         // Check if the last letters in the URL are extension
  181.         var fileExtensions = ["jpg", "jpeg", "png", "gif", "svg", "webp", "apng", "webm", "mp4", "webm", "mp3", "wav", "ogg" ];
  182.         var isMatch = fileExtensions.some(function(extension) {
  183.             return currentUrl.slice(-extension.length) === extension;
  184.         });
  185.  
  186.         // Check if the YouTube in full screen
  187.         var isFullScreen = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement;
  188.  
  189.         //If only media or full screen than hide buttons
  190.         if (isMatch || isFullScreen) {
  191.             TopSideButton.style.visibility = 'hidden';
  192.             BottomSideButton.style.visibility = 'hidden';
  193.             BottomButton.style.visibility = 'hidden';
  194.         } else {
  195.             TopSideButton.style.visibility = 'visible';
  196.             BottomSideButton.style.visibility = 'visible';
  197.             BottomButton.style.visibility = 'visible';
  198.         }
  199.     }
  200.     // Check the button state every second
  201.     setInterval(checkButtonState, 1000);
  202.  
  203. //********************************************************************************************************************
  204. //***                                             Bottom button ⬆️                                                 ***
  205. //********************************************************************************************************************
  206.  
  207.     // Create the button element
  208.     var BottomButton = document.createElement('button');
  209.     BottomButton.innerHTML = '⬆️';
  210.     BottomButton.style.height = ButtonSize;
  211.     BottomButton.style.width = ButtonSize;
  212.     BottomButton.style.fontSize = FontSize;
  213.     BottomButton.style.position = 'fixed';
  214.     BottomButton.style.left = '50%';
  215.     BottomButton.style.top = 'calc(100% - 40px)';
  216.     BottomButton.style.transform = 'translateY(-50%)';
  217.     BottomButton.style.opacity = ButtonsOpacityDefault;
  218.     BottomButton.style.background = 'transparent';
  219.     BottomButton.style.border = 'none';
  220.     BottomButton.style.outline = 'none';
  221.     BottomButton.style.zIndex = '9999';
  222.     BottomButton.id="BottomButton";
  223.  
  224.     // Hide the button if in an iframe
  225.     if (isInIframe) {
  226.         BottomButton.style.display = 'none';
  227.     }
  228.  
  229.     document.body.appendChild(BottomButton);
  230.  
  231. //********************************************************************************************************************
  232. //***                                     Bottom button - Functionality ⬆️⚙️                                       ***
  233. //********************************************************************************************************************
  234.  
  235.     // Function to scroll to the top of the page
  236.     function scrollToTop2() {
  237.         window.scrollTo(0, 0);
  238.     }
  239.  
  240.     // Add event listener to scroll when button is clicked
  241.     BottomButton.addEventListener('click', scrollToTop2);
  242.  
  243.     // Show BottomButton when mouse cursor is over it
  244.     BottomButton.addEventListener('mouseenter', function() {
  245.         BottomButton.style.opacity = ButtonsOpacityMouseOver;
  246.     });
  247.  
  248.     // Hide BottomButton when mouse cursor leaves it
  249.     BottomButton.addEventListener('mouseleave', function() {
  250.         BottomButton.style.opacity = ButtonsOpacityDefault;
  251.     });
  252.  
  253. //********************************************************************************************************************
  254. //***                             Load bottom button options - button visibility 🔄                                ***
  255. //********************************************************************************************************************
  256.  
  257.     GM.getValue("BottomButtonOption", "").then(function(value) {
  258. 		// Check if the script is running in an iframe
  259. 		if (window.self !== window.top) {
  260. 			// Hide the buttons in iframes
  261.             BottomButton.style.display = 'none';
  262. 		} else {
  263. 			// Retrieve the value of SideButtonsOption using GM.getValue (DropDown2)
  264. 			GM.getValue("BottomButtonOption", "").then(function(value) {
  265. 				if (value === '0'|| value === '') {
  266. 					BottomButton.style.display = 'block';
  267. 				} else if (value === '1') {
  268.                     BottomButton.style.display = 'none';
  269. 				}
  270. 			});
  271. 		}
  272.     });
  273.  
  274. //********************************************************************************************************************
  275. //***                         Load buttons options -buttons horizontal position 🔄                                 ***
  276. //********************************************************************************************************************
  277.  
  278.     GM.getValue("BottomButtonSliderOption", "").then(function(value) {
  279.         BottomButton.style.left = 'calc(' + value + '%)';
  280.     });
  281.  
  282. //********************************************************************************************************************
  283. //***                                               Options 🎛️                                                     ***
  284. //********************************************************************************************************************
  285.  
  286. function handleRightClick(event) {
  287.   event.preventDefault(); // Prevent the default right-click context menu
  288.  
  289. //*************************
  290. //*** DropDownMenu 1  🎚️ ***
  291. //*************************
  292.  
  293. // Create the dropdown menu
  294.     var dropdown1 = document.createElement('select');
  295.     dropdown1.id = 'dropdown1';
  296.     dropdown1.style.fontSize = '15px';
  297.     dropdown1.style.marginLeft = '22px';
  298.  
  299. // Define the options for the dropdown menu
  300.     var options1 = [
  301.         { value: 'option0', text: 'Right' },
  302.         { value: 'option1', text: 'Left' },
  303.         { value: 'option2', text: 'Disable' }
  304.     ];
  305.  
  306. // Create the option elements and append them to the dropdown menu
  307. options1.forEach(function(option) {
  308.   var optionElement = document.createElement('option');
  309.   optionElement.value = option.value;
  310.   optionElement.text = option.text;
  311.   dropdown1.appendChild(optionElement);
  312. });
  313.  
  314. // Load/create dropdown1 options
  315.  GM.getValue("SideButtonsOption", "").then(function(value) {
  316.     if (value === '1') {
  317.     dropdown1.selectedIndex = "1";
  318.   } else if (value === '2') {
  319.     dropdown1.selectedIndex = "2";
  320.   } else {
  321.     dropdown1.selectedIndex = "0";
  322.   }
  323.  });
  324.  
  325. // Add an event listener to save options change
  326. dropdown1.addEventListener('change', function() {
  327.   var selectedValue = dropdown1.value;
  328.   if (selectedValue === 'option0') {
  329.  
  330.       GM.setValue("SideButtonsOption", "0");
  331.  
  332.       const TopSideButton = document.getElementById('TopSideButton');
  333.       if (TopSideButton) {
  334.           TopSideButton.style.display = 'block';
  335.           TopSideButton.style.left = (document.documentElement.clientWidth - 81) + 'px';
  336.       }
  337.       const BottomSideButton = document.getElementById('BottomSideButton');
  338.       if (BottomSideButton) {
  339.           BottomSideButton.style.display = 'block';
  340.           BottomSideButton.style.left = (document.documentElement.clientWidth - 81) + 'px';
  341.       }
  342.  
  343.   } else if (selectedValue === 'option1') {
  344.  
  345.       GM.setValue("SideButtonsOption", "1");
  346.  
  347.       const TopSideButton = document.getElementById('TopSideButton');
  348.       if (TopSideButton) {
  349.           TopSideButton.style.display = 'block';
  350.           TopSideButton.style.left = '15px';
  351.       }
  352.       const BottomSideButton = document.getElementById('BottomSideButton');
  353.       if (BottomSideButton) {
  354.           BottomSideButton.style.display = 'block';
  355.           BottomSideButton.style.left = '15px';
  356.       }
  357.  
  358.   } else if (selectedValue === 'option2') {
  359.  
  360.       //Check if bottom buttom invisible
  361.       if (dropdown2.value === 'option5') {
  362.           alert("All buttons can't be invisible! 🫠");
  363.       } else if (dropdown2.value === 'option4') {
  364.           GM.setValue("SideButtonsOption", "2");
  365.  
  366.           const TopSideButton = document.getElementById('TopSideButton');
  367.           if (TopSideButton) {TopSideButton.style.display = 'none';}
  368.           const BottomSideButton = document.getElementById('BottomSideButton');
  369.           if (BottomSideButton) {BottomSideButton.style.display = 'none';}
  370.       }
  371.   }
  372.  
  373. });
  374.  
  375. //*************************
  376. //*** DropDownMenu 2 🎚️ ***
  377. //*************************
  378.  
  379. // Create the dropdown menu
  380.     var dropdown2 = document.createElement('select');
  381.     dropdown2.id = 'dropdown2';
  382.     dropdown2.style.fontSize = '15px';
  383.     dropdown2.style.marginLeft = '9px';
  384.  
  385. // Define the options for the dropdown menu
  386.     var options2 = [
  387.         { value: 'option4', text: 'Enable' },
  388.         { value: 'option5', text: 'Disable' }
  389.     ];
  390.  
  391. // Create the option elements and append them to the dropdown menu
  392. options2.forEach(function(option) {
  393.   var optionElement = document.createElement('option');
  394.   optionElement.value = option.value;
  395.   optionElement.text = option.text;
  396.   dropdown2.appendChild(optionElement);
  397. });
  398.  
  399. // Load/create dropdown2 options
  400.  GM.getValue("BottomButtonOption", "").then(function(value) {
  401.     if (value === '1') {
  402.     dropdown2.selectedIndex = "1";
  403.   } else {
  404.     dropdown2.selectedIndex = "0";
  405.   }
  406.  });
  407.  
  408. // Add an event listener to save options change
  409. dropdown2.addEventListener('change', function() {
  410.   var selectedValue = dropdown2.value;
  411.   if (selectedValue === 'option4') {
  412.  
  413.       GM.setValue("BottomButtonOption", "0");
  414.  
  415.       const BottomButton = document.getElementById('BottomButton');
  416.       if (BottomButton) {
  417.           BottomButton.style.display = 'block';
  418.       }
  419.  
  420.   } else if (selectedValue === 'option5') {
  421.  
  422.       //Check if side buttoms invisible
  423.       if (dropdown1.value === 'option2') {
  424.           alert("All buttons can't be invisible! 🫠");
  425.       } else if (dropdown1.value === 'option0' || dropdown1.value === 'option1') {
  426.           GM.setValue("BottomButtonOption", "1");
  427.  
  428.           const BottomButton = document.getElementById('BottomButton');
  429.           if (BottomButton) {BottomButton.style.display = 'none';}
  430.       }
  431.   }
  432.  
  433. });
  434. //*************************
  435. //***      Labels 🎚️    ***
  436. //*************************
  437.  
  438.     // Create labels
  439.     var OptionsTitleLabel = document.createElement('label');
  440.     OptionsTitleLabel.innerHTML = 'Options';
  441.     OptionsTitleLabel.style.color = 'white';
  442.     OptionsTitleLabel.style.fontWeight = 'bold';
  443.     OptionsTitleLabel.style.textDecoration = 'underline';
  444.     OptionsTitleLabel.style.fontSize = '20px';
  445.  
  446.     var SideButtonsLabel = document.createElement('label');
  447.     SideButtonsLabel.innerHTML = 'Side buttons: ';
  448.     SideButtonsLabel.style.color = 'white';
  449.     SideButtonsLabel.style.fontSize = '15px';
  450.  
  451.     var BottomButtonLabel = document.createElement('label');
  452.     BottomButtonLabel.innerHTML = 'Bottom button: ';
  453.     BottomButtonLabel.style.color = 'white';
  454.     BottomButtonLabel.style.fontSize = '15px';
  455.  
  456.     var SideButtonsSliderLabel = document.createElement('label');
  457.     SideButtonsSliderLabel.innerHTML = '⬆️⬇️ position: ';
  458.     SideButtonsSliderLabel.style.color = 'white';
  459.     SideButtonsSliderLabel.style.fontSize = '15px';
  460.  
  461.     var BottomButtonSliderLabel = document.createElement('label');
  462.     BottomButtonSliderLabel.innerHTML = '⬆️ position: ';
  463.     BottomButtonSliderLabel.style.color = 'white';
  464.     BottomButtonSliderLabel.style.fontSize = '15px';
  465.  
  466. //*************************************
  467. //*** Buttons Position Slider ⬆️⬇️🎚️ ***
  468. //*************************************
  469.  
  470.     // Create the TopSideButtonSlider element
  471.     var SideButtonsSlider = document.createElement('input');
  472.     SideButtonsSlider.id = 'SideButtonsSlider';
  473.     SideButtonsSlider.type = 'range';
  474.     SideButtonsSlider.min = '4';
  475.     SideButtonsSlider.max = '96';
  476.     SideButtonsSlider.step = '1';
  477.     SideButtonsSlider.value = '42';
  478.     SideButtonsSlider.style.width = '100px';
  479.     //TopSideButtonSlider.style.marginLeft = '52px';
  480.  
  481.     // Change blur sliders
  482.     SideButtonsSlider.style.background = '#74e3ff';
  483.     SideButtonsSlider.style.border = 'none';
  484.     SideButtonsSlider.style.height = '5px';
  485.     SideButtonsSlider.style.outline = 'none';
  486.     SideButtonsSlider.style.appearance = 'none';
  487.     SideButtonsSlider.style.webkitAppearance = 'none';
  488.     SideButtonsSlider.style.mozAppearance = 'none';
  489.     SideButtonsSlider.style.msAppearance = 'none';
  490.     SideButtonsSlider.style.webkitSliderThumb = '-webkit-slider-thumb';
  491.     SideButtonsSlider.style.mozSliderThumb = '-moz-slider-thumb';
  492.     SideButtonsSlider.style.msSliderThumb = '-ms-slider-thumb';
  493.     SideButtonsSlider.style.sliderThumb = 'slider-thumb';
  494.  
  495.     GM.getValue("SideButtonsSliderOption", "").then(function(value) {
  496.         SideButtonsSlider.value = value;
  497.     });
  498.  
  499. //***********************************
  500. //*** Button Position Slider ⬆️🎚️ ***
  501. //***********************************
  502.  
  503.     // Create the TopButtonSlider element
  504.     var BottomButtonSlider = document.createElement('input');
  505.     BottomButtonSlider.id = 'BottomButtonSlider';
  506.     BottomButtonSlider.type = 'range';
  507.     BottomButtonSlider.min = '0';
  508.     BottomButtonSlider.max = '95';
  509.     BottomButtonSlider.step = '1';
  510.     BottomButtonSlider.value = '50';
  511.     BottomButtonSlider.style.width = '100px';
  512.     BottomButtonSlider.style.marginLeft = '15px';
  513.  
  514.     // Change blur sliders
  515.     BottomButtonSlider.style.background = '#74e3ff';
  516.     BottomButtonSlider.style.border = 'none';
  517.     BottomButtonSlider.style.height = '5px';
  518.     BottomButtonSlider.style.outline = 'none';
  519.     BottomButtonSlider.style.appearance = 'none';
  520.     BottomButtonSlider.style.webkitAppearance = 'none';
  521.     BottomButtonSlider.style.mozAppearance = 'none';
  522.     BottomButtonSlider.style.msAppearance = 'none';
  523.     BottomButtonSlider.style.webkitSliderThumb = '-webkit-slider-thumb';
  524.     BottomButtonSlider.style.mozSliderThumb = '-moz-slider-thumb';
  525.     BottomButtonSlider.style.msSliderThumb = '-ms-slider-thumb';
  526.     BottomButtonSlider.style.sliderThumb = 'slider-thumb';
  527.  
  528.     GM.getValue("BottomButtonSliderOption", "").then(function(value) {
  529.         BottomButtonSlider.value = value;
  530.     });
  531.  
  532. //*************************
  533. //***    Donation 💳   ***
  534. //*************************
  535.  
  536.     // Create labels
  537.     var DonationButton = document.createElement('button');
  538.     // Button size
  539.     DonationButton.style.position = 'fixed';
  540.     DonationButton.style.width = '180px';
  541.     DonationButton.style.height = '25px';
  542.     // Button text
  543.     DonationButton.textContent = '💳Please support me!🤗';
  544.     DonationButton.style.fontSize = '10px';
  545.     // Button text style
  546.     DonationButton.style.color = '#303236';
  547.     DonationButton.style.textAlign = 'center';
  548.     DonationButton.addEventListener('click', function() {GM_openInTab("https://...");});
  549.     DonationButton.style.backgroundColor = 'white';
  550.     DonationButton.style.border = '1px solid grey';
  551.     // Button position in panel
  552.     DonationButton.style.position = 'absolute';
  553.     DonationButton.style.left = '50%';
  554.     DonationButton.style.transform = 'translate(-50%, -50%)';
  555.  
  556. //*************************
  557. //***      Panel 🎚️     ***
  558. //*************************
  559.  
  560.     // Create the panel
  561.     var panel = document.createElement('div');
  562.     panel.id = 'OptionPanel';
  563.     panel.style.position = 'fixed';
  564.     panel.style.top = '50%';
  565.     panel.style.left = '50%';
  566.     panel.style.transform = 'translate(-50%, -50%)';
  567.     panel.style.backgroundColor = '#303236';
  568.     panel.style.padding = '10px';
  569.     panel.style.border = '1px solid grey';
  570.     panel.style.zIndex = '9999';
  571.  
  572.     // Append the labels, dropdowns and donation button to the panel
  573.     panel.appendChild(OptionsTitleLabel);
  574.     panel.appendChild(document.createElement('br'));
  575.     panel.appendChild(SideButtonsLabel);
  576.     panel.appendChild(dropdown1);
  577.     panel.appendChild(document.createElement('br'));
  578.     panel.appendChild(BottomButtonLabel);
  579.     panel.appendChild(dropdown2);
  580.     panel.appendChild(document.createElement('br'));
  581.     panel.appendChild(SideButtonsSliderLabel);
  582.     panel.appendChild(SideButtonsSlider);
  583.     panel.appendChild(document.createElement('br'));
  584.     panel.appendChild(BottomButtonSliderLabel);
  585.     panel.appendChild(BottomButtonSlider);
  586.     panel.appendChild(document.createElement('br'));
  587.     panel.appendChild(document.createElement('br'));
  588.     panel.appendChild(DonationButton);
  589.     panel.appendChild(document.createElement('br'));
  590.  
  591.     // Append the panel to the body
  592.     document.body.appendChild(panel);
  593.  
  594. //*********************************************
  595. //***    Slider Function Value Update   🔄🎚️ ***
  596. //*********************************************
  597.  
  598.        // Add an event listener to update the effects when either slider value changes
  599.        document.addEventListener('input', function(event) {
  600.            // Check if the event target is one of the sliders
  601.            const sliders = [SideButtonsSlider, BottomButtonSlider];
  602.  
  603.            if (sliders.includes(event.target)) {
  604.                TopSideButton.style.top = 'calc(' + SideButtonsSlider.value + '%)';
  605.                BottomSideButton.style.top = 'calc(' + (100 - SideButtonsSlider.value) + '%)';
  606.                BottomButton.style.left = 'calc(' + BottomButtonSlider.value + '%)';
  607.  
  608.                //Save Sliders Position
  609.                GM.setValue("SideButtonsSliderOption", SideButtonsSlider.value);
  610.                GM.setValue("BottomButtonSliderOption", BottomButtonSlider.value);
  611.            }
  612.        });
  613.  
  614. }
  615.  
  616. //********************************************************************************************************************
  617. //***                                             Listener event 👂                                                ***
  618. //********************************************************************************************************************
  619.  
  620. //*************************
  621. //***  Right click 🖱️   ***
  622. //*************************
  623.     TopSideButton.addEventListener('contextmenu', handleRightClick);
  624.     BottomSideButton.addEventListener('contextmenu', handleRightClick);
  625.     BottomButton.addEventListener('contextmenu', handleRightClick);
  626.  
  627. //*************************
  628. //***   Left click 🖱️   ***
  629. //*************************
  630.  
  631. // Add event listener to hide panel when clicking on the webpage
  632. document.addEventListener('click', function(event) {
  633.   // Check if the clicked element is the panel or its child elements
  634.   var panel = document.getElementById('OptionPanel');
  635.   var clickedElement = event.target;
  636.   if (panel && !panel.contains(clickedElement)) {
  637.     // Remove the panel from the DOM
  638.     document.body.removeChild(panel);
  639.   }
  640. });
  641.  
  642. })();