Buttons for quick scrolling in different directions.
目前為
// ==UserScript==
// @name TesterTV_ScrollButtons
// @namespace
// @version 2023.11.29
// @description Buttons for quick scrolling in different directions.
// @license GPL version 3 or any later version
// @author TesterTV
// @match *://*/*
// @grant GM_openInTab
// @grant GM.setValue
// @grant GM.getValue
// ==/UserScript==
(function() {
//********************************************************************************************************************
//*** Variables 🇻🇦🇷 ***
//********************************************************************************************************************
// General variables
var ButtonsOpacityDefault = '0.05';
var ButtonsOpacityMouseOver = '1';
var PositionHorizontalRight = (document.documentElement.clientWidth - 81) + 'px';
var PositionHorizontalLeft= '15px';
var ButtonSize = '66px';
var FontSize = '50px';
// Check if current window is an iframe
var isInIframe = window !== window.top;
//********************************************************************************************************************
//*** Button ⬆️ ***
//********************************************************************************************************************
// Create the button element
var TopSideButton = document.createElement('button');
TopSideButton.innerHTML = '⬆️';
TopSideButton.style.height = ButtonSize;
TopSideButton.style.width = ButtonSize;
TopSideButton.style.fontSize = FontSize;
TopSideButton.style.position = 'fixed';
TopSideButton.style.left = PositionHorizontalRight;
TopSideButton.style.top = '42%';
TopSideButton.style.transform = 'translateY(-50%)';
TopSideButton.style.opacity = ButtonsOpacityDefault;
TopSideButton.style.background = 'transparent';
TopSideButton.style.border = 'none';
TopSideButton.style.outline = 'none';
TopSideButton.style.zIndex = '9996';
TopSideButton.id="TopSideButton";
// Hide the button if in an iframe
if (isInIframe) {
TopSideButton.style.display = 'none';
}
document.body.appendChild(TopSideButton);
//********************************************************************************************************************
//*** Button - Functionality ⬆️⚙️ ***
//********************************************************************************************************************
// Function to scroll to the top of the page
function scrollToTop() {
window.scrollTo(0, 0);
}
// Add event listener to scroll when button is clicked
TopSideButton.addEventListener('click', scrollToTop);
// Show TopSideButton when mouse cursor is over it
TopSideButton.addEventListener('mouseenter', function() {
TopSideButton.style.opacity = ButtonsOpacityMouseOver;
});
// Hide TopSideButton when mouse cursor leaves it
TopSideButton.addEventListener('mouseleave', function() {
TopSideButton.style.opacity = ButtonsOpacityDefault;
});
//********************************************************************************************************************
//*** Button ⬇️ ***
//********************************************************************************************************************
// Create the button element
var BottomSideButton = document.createElement('button');
BottomSideButton.innerHTML = '⬇️';
BottomSideButton.style.height = ButtonSize;
BottomSideButton.style.width = ButtonSize;
BottomSideButton.style.fontSize = FontSize;
BottomSideButton.style.position = 'fixed';
BottomSideButton.style.left = PositionHorizontalRight;
BottomSideButton.style.top = '58%';
BottomSideButton.style.transform = 'translateY(-50%)';
BottomSideButton.style.opacity = ButtonsOpacityDefault;
BottomSideButton.style.background = 'transparent';
BottomSideButton.style.border = 'none';
BottomSideButton.style.outline = 'none';
BottomSideButton.style.zIndex = '9998';
BottomSideButton.id="BottomSideButton";
// Hide the button if in an iframe
if (isInIframe) {
BottomSideButton.style.display = 'none';
}
document.body.appendChild(BottomSideButton);
//********************************************************************************************************************
//*** Button - Functionality ⬇️⚙️ ***
//********************************************************************************************************************
// Function to scroll to the bottom of the page
function scrollToBottom() {
window.scrollTo(0, document.body.scrollHeight);
}
// Add event listener to scroll when button is clicked
BottomSideButton.addEventListener('click', scrollToBottom);
// Show BottomSideButton when mouse cursor is over it
BottomSideButton.addEventListener('mouseenter', function() {
BottomSideButton.style.opacity = ButtonsOpacityMouseOver;
});
// Hide BottomSideButton when mouse cursor leaves it
BottomSideButton.addEventListener('mouseleave', function() {
BottomSideButton.style.opacity = ButtonsOpacityDefault;
});
//********************************************************************************************************************
//*** Load buttons options -buttons horizontal position and visibility 🔄 ***
//********************************************************************************************************************
GM.getValue("SideButtonsOption", "").then(function(value) {
// Check if the script is running in an iframe
if (window.self !== window.top) {
// Hide the buttons in iframes
TopSideButton.style.display = 'none';
BottomSideButton.style.display = 'none';
} else {
// Retrieve the value of SideButtonsOption using GM.getValue (DropDown1)
GM.getValue("SideButtonsOption", "").then(function(value) {
if (value === '0'|| value === '') {
TopSideButton.style.left = PositionHorizontalRight;
BottomSideButton.style.left = PositionHorizontalRight;
TopSideButton.style.display = 'block';
BottomSideButton.style.display = 'block';
} else if (value === '1') {
TopSideButton.style.left = PositionHorizontalLeft;
BottomSideButton.style.left = PositionHorizontalLeft;
TopSideButton.style.display = 'block';
BottomSideButton.style.display = 'block';
} else if (value === '2') {
TopSideButton.style.display = 'none';
BottomSideButton.style.display = 'none';
}
});
}
});
//********************************************************************************************************************
//*** Load buttons options -buttons Vertical position and visibility 🔄 ***
//********************************************************************************************************************
GM.getValue("SideButtonsSliderOption", "").then(function(value) {
TopSideButton.style.top = 'calc(' + value + '%)';
BottomSideButton.style.top = 'calc(' + (100 - value) + '%)';
});
//********************************************************************************************************************
//*** Check if only media is visible 🔄🎵🎬 Check if YouTube full screen is visible ***
//********************************************************************************************************************
function checkButtonState() {
// Don't show buttons if only media is visible
// Get the current URL
var currentUrl = window.location.href;
// Check if the last letters in the URL are extension
var fileExtensions = ["jpg", "jpeg", "png", "gif", "svg", "webp", "apng", "webm", "mp4", "webm", "mp3", "wav", "ogg" ];
var isMatch = fileExtensions.some(function(extension) {
return currentUrl.slice(-extension.length) === extension;
});
// Check if the YouTube in full screen
var isFullScreen = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement;
//If only media or full screen than hide buttons
if (isMatch || isFullScreen) {
TopSideButton.style.visibility = 'hidden';
BottomSideButton.style.visibility = 'hidden';
BottomButton.style.visibility = 'hidden';
} else {
TopSideButton.style.visibility = 'visible';
BottomSideButton.style.visibility = 'visible';
BottomButton.style.visibility = 'visible';
}
}
// Check the button state every second
setInterval(checkButtonState, 1000);
//********************************************************************************************************************
//*** Bottom button ⬆️ ***
//********************************************************************************************************************
// Create the button element
var BottomButton = document.createElement('button');
BottomButton.innerHTML = '⬆️';
BottomButton.style.height = ButtonSize;
BottomButton.style.width = ButtonSize;
BottomButton.style.fontSize = FontSize;
BottomButton.style.position = 'fixed';
BottomButton.style.left = '50%';
BottomButton.style.top = 'calc(100% - 40px)';
BottomButton.style.transform = 'translateY(-50%)';
BottomButton.style.opacity = ButtonsOpacityDefault;
BottomButton.style.background = 'transparent';
BottomButton.style.border = 'none';
BottomButton.style.outline = 'none';
BottomButton.style.zIndex = '9999';
BottomButton.id="BottomButton";
// Hide the button if in an iframe
if (isInIframe) {
BottomButton.style.display = 'none';
}
document.body.appendChild(BottomButton);
//********************************************************************************************************************
//*** Bottom button - Functionality ⬆️⚙️ ***
//********************************************************************************************************************
// Function to scroll to the top of the page
function scrollToTop2() {
window.scrollTo(0, 0);
}
// Add event listener to scroll when button is clicked
BottomButton.addEventListener('click', scrollToTop2);
// Show BottomButton when mouse cursor is over it
BottomButton.addEventListener('mouseenter', function() {
BottomButton.style.opacity = ButtonsOpacityMouseOver;
});
// Hide BottomButton when mouse cursor leaves it
BottomButton.addEventListener('mouseleave', function() {
BottomButton.style.opacity = ButtonsOpacityDefault;
});
//********************************************************************************************************************
//*** Load bottom button options - button visibility 🔄 ***
//********************************************************************************************************************
GM.getValue("BottomButtonOption", "").then(function(value) {
// Check if the script is running in an iframe
if (window.self !== window.top) {
// Hide the buttons in iframes
BottomButton.style.display = 'none';
} else {
// Retrieve the value of SideButtonsOption using GM.getValue (DropDown2)
GM.getValue("BottomButtonOption", "").then(function(value) {
if (value === '0'|| value === '') {
BottomButton.style.display = 'block';
} else if (value === '1') {
BottomButton.style.display = 'none';
}
});
}
});
//********************************************************************************************************************
//*** Load buttons options -buttons horizontal position 🔄 ***
//********************************************************************************************************************
GM.getValue("BottomButtonSliderOption", "").then(function(value) {
BottomButton.style.left = 'calc(' + value + '%)';
});
//********************************************************************************************************************
//*** Options 🎛️ ***
//********************************************************************************************************************
function handleRightClick(event) {
event.preventDefault(); // Prevent the default right-click context menu
//*************************
//*** DropDownMenu 1 🎚️ ***
//*************************
// Create the dropdown menu
var dropdown1 = document.createElement('select');
dropdown1.id = 'dropdown1';
dropdown1.style.fontSize = '15px';
dropdown1.style.marginLeft = '22px';
// Define the options for the dropdown menu
var options1 = [
{ value: 'option0', text: 'Right' },
{ value: 'option1', text: 'Left' },
{ value: 'option2', text: 'Disable' }
];
// Create the option elements and append them to the dropdown menu
options1.forEach(function(option) {
var optionElement = document.createElement('option');
optionElement.value = option.value;
optionElement.text = option.text;
dropdown1.appendChild(optionElement);
});
// Load/create dropdown1 options
GM.getValue("SideButtonsOption", "").then(function(value) {
if (value === '1') {
dropdown1.selectedIndex = "1";
} else if (value === '2') {
dropdown1.selectedIndex = "2";
} else {
dropdown1.selectedIndex = "0";
}
});
// Add an event listener to save options change
dropdown1.addEventListener('change', function() {
var selectedValue = dropdown1.value;
if (selectedValue === 'option0') {
GM.setValue("SideButtonsOption", "0");
const TopSideButton = document.getElementById('TopSideButton');
if (TopSideButton) {
TopSideButton.style.display = 'block';
TopSideButton.style.left = (document.documentElement.clientWidth - 81) + 'px';
}
const BottomSideButton = document.getElementById('BottomSideButton');
if (BottomSideButton) {
BottomSideButton.style.display = 'block';
BottomSideButton.style.left = (document.documentElement.clientWidth - 81) + 'px';
}
} else if (selectedValue === 'option1') {
GM.setValue("SideButtonsOption", "1");
const TopSideButton = document.getElementById('TopSideButton');
if (TopSideButton) {
TopSideButton.style.display = 'block';
TopSideButton.style.left = '15px';
}
const BottomSideButton = document.getElementById('BottomSideButton');
if (BottomSideButton) {
BottomSideButton.style.display = 'block';
BottomSideButton.style.left = '15px';
}
} else if (selectedValue === 'option2') {
//Check if bottom buttom invisible
if (dropdown2.value === 'option5') {
alert("All buttons can't be invisible! 🫠");
} else if (dropdown2.value === 'option4') {
GM.setValue("SideButtonsOption", "2");
const TopSideButton = document.getElementById('TopSideButton');
if (TopSideButton) {TopSideButton.style.display = 'none';}
const BottomSideButton = document.getElementById('BottomSideButton');
if (BottomSideButton) {BottomSideButton.style.display = 'none';}
}
}
});
//*************************
//*** DropDownMenu 2 🎚️ ***
//*************************
// Create the dropdown menu
var dropdown2 = document.createElement('select');
dropdown2.id = 'dropdown2';
dropdown2.style.fontSize = '15px';
dropdown2.style.marginLeft = '9px';
// Define the options for the dropdown menu
var options2 = [
{ value: 'option4', text: 'Enable' },
{ value: 'option5', text: 'Disable' }
];
// Create the option elements and append them to the dropdown menu
options2.forEach(function(option) {
var optionElement = document.createElement('option');
optionElement.value = option.value;
optionElement.text = option.text;
dropdown2.appendChild(optionElement);
});
// Load/create dropdown2 options
GM.getValue("BottomButtonOption", "").then(function(value) {
if (value === '1') {
dropdown2.selectedIndex = "1";
} else {
dropdown2.selectedIndex = "0";
}
});
// Add an event listener to save options change
dropdown2.addEventListener('change', function() {
var selectedValue = dropdown2.value;
if (selectedValue === 'option4') {
GM.setValue("BottomButtonOption", "0");
const BottomButton = document.getElementById('BottomButton');
if (BottomButton) {
BottomButton.style.display = 'block';
}
} else if (selectedValue === 'option5') {
//Check if side buttoms invisible
if (dropdown1.value === 'option2') {
alert("All buttons can't be invisible! 🫠");
} else if (dropdown1.value === 'option0' || dropdown1.value === 'option1') {
GM.setValue("BottomButtonOption", "1");
const BottomButton = document.getElementById('BottomButton');
if (BottomButton) {BottomButton.style.display = 'none';}
}
}
});
//*************************
//*** Labels 🎚️ ***
//*************************
// Create labels
var OptionsTitleLabel = document.createElement('label');
OptionsTitleLabel.innerHTML = 'Options';
OptionsTitleLabel.style.color = 'white';
OptionsTitleLabel.style.fontWeight = 'bold';
OptionsTitleLabel.style.textDecoration = 'underline';
OptionsTitleLabel.style.fontSize = '20px';
var SideButtonsLabel = document.createElement('label');
SideButtonsLabel.innerHTML = 'Side buttons: ';
SideButtonsLabel.style.color = 'white';
SideButtonsLabel.style.fontSize = '15px';
var BottomButtonLabel = document.createElement('label');
BottomButtonLabel.innerHTML = 'Bottom button: ';
BottomButtonLabel.style.color = 'white';
BottomButtonLabel.style.fontSize = '15px';
var SideButtonsSliderLabel = document.createElement('label');
SideButtonsSliderLabel.innerHTML = '⬆️⬇️ position: ';
SideButtonsSliderLabel.style.color = 'white';
SideButtonsSliderLabel.style.fontSize = '15px';
var BottomButtonSliderLabel = document.createElement('label');
BottomButtonSliderLabel.innerHTML = '⬆️ position: ';
BottomButtonSliderLabel.style.color = 'white';
BottomButtonSliderLabel.style.fontSize = '15px';
//*************************************
//*** Buttons Position Slider ⬆️⬇️🎚️ ***
//*************************************
// Create the TopSideButtonSlider element
var SideButtonsSlider = document.createElement('input');
SideButtonsSlider.id = 'SideButtonsSlider';
SideButtonsSlider.type = 'range';
SideButtonsSlider.min = '4';
SideButtonsSlider.max = '96';
SideButtonsSlider.step = '1';
SideButtonsSlider.value = '42';
SideButtonsSlider.style.width = '100px';
//TopSideButtonSlider.style.marginLeft = '52px';
// Change blur sliders
SideButtonsSlider.style.background = '#74e3ff';
SideButtonsSlider.style.border = 'none';
SideButtonsSlider.style.height = '5px';
SideButtonsSlider.style.outline = 'none';
SideButtonsSlider.style.appearance = 'none';
SideButtonsSlider.style.webkitAppearance = 'none';
SideButtonsSlider.style.mozAppearance = 'none';
SideButtonsSlider.style.msAppearance = 'none';
SideButtonsSlider.style.webkitSliderThumb = '-webkit-slider-thumb';
SideButtonsSlider.style.mozSliderThumb = '-moz-slider-thumb';
SideButtonsSlider.style.msSliderThumb = '-ms-slider-thumb';
SideButtonsSlider.style.sliderThumb = 'slider-thumb';
GM.getValue("SideButtonsSliderOption", "").then(function(value) {
SideButtonsSlider.value = value;
});
//***********************************
//*** Button Position Slider ⬆️🎚️ ***
//***********************************
// Create the TopButtonSlider element
var BottomButtonSlider = document.createElement('input');
BottomButtonSlider.id = 'BottomButtonSlider';
BottomButtonSlider.type = 'range';
BottomButtonSlider.min = '0';
BottomButtonSlider.max = '95';
BottomButtonSlider.step = '1';
BottomButtonSlider.value = '50';
BottomButtonSlider.style.width = '100px';
BottomButtonSlider.style.marginLeft = '15px';
// Change blur sliders
BottomButtonSlider.style.background = '#74e3ff';
BottomButtonSlider.style.border = 'none';
BottomButtonSlider.style.height = '5px';
BottomButtonSlider.style.outline = 'none';
BottomButtonSlider.style.appearance = 'none';
BottomButtonSlider.style.webkitAppearance = 'none';
BottomButtonSlider.style.mozAppearance = 'none';
BottomButtonSlider.style.msAppearance = 'none';
BottomButtonSlider.style.webkitSliderThumb = '-webkit-slider-thumb';
BottomButtonSlider.style.mozSliderThumb = '-moz-slider-thumb';
BottomButtonSlider.style.msSliderThumb = '-ms-slider-thumb';
BottomButtonSlider.style.sliderThumb = 'slider-thumb';
GM.getValue("BottomButtonSliderOption", "").then(function(value) {
BottomButtonSlider.value = value;
});
//*************************
//*** Donation 💳 ***
//*************************
// Create labels
var DonationButton = document.createElement('button');
// Button size
DonationButton.style.position = 'fixed';
DonationButton.style.width = '180px';
DonationButton.style.height = '25px';
// Button text
DonationButton.textContent = '💳Please support me!🤗';
DonationButton.style.fontSize = '10px';
// Button text style
DonationButton.style.color = '#303236';
DonationButton.style.textAlign = 'center';
DonationButton.addEventListener('click', function() {GM_openInTab("https://...");});
DonationButton.style.backgroundColor = 'white';
DonationButton.style.border = '1px solid grey';
// Button position in panel
DonationButton.style.position = 'absolute';
DonationButton.style.left = '50%';
DonationButton.style.transform = 'translate(-50%, -50%)';
//*************************
//*** Panel 🎚️ ***
//*************************
// Create the panel
var panel = document.createElement('div');
panel.id = 'OptionPanel';
panel.style.position = 'fixed';
panel.style.top = '50%';
panel.style.left = '50%';
panel.style.transform = 'translate(-50%, -50%)';
panel.style.backgroundColor = '#303236';
panel.style.padding = '10px';
panel.style.border = '1px solid grey';
panel.style.zIndex = '9999';
// Append the labels, dropdowns and donation button to the panel
panel.appendChild(OptionsTitleLabel);
panel.appendChild(document.createElement('br'));
panel.appendChild(SideButtonsLabel);
panel.appendChild(dropdown1);
panel.appendChild(document.createElement('br'));
panel.appendChild(BottomButtonLabel);
panel.appendChild(dropdown2);
panel.appendChild(document.createElement('br'));
panel.appendChild(SideButtonsSliderLabel);
panel.appendChild(SideButtonsSlider);
panel.appendChild(document.createElement('br'));
panel.appendChild(BottomButtonSliderLabel);
panel.appendChild(BottomButtonSlider);
panel.appendChild(document.createElement('br'));
panel.appendChild(document.createElement('br'));
panel.appendChild(DonationButton);
panel.appendChild(document.createElement('br'));
// Append the panel to the body
document.body.appendChild(panel);
//*********************************************
//*** Slider Function Value Update 🔄🎚️ ***
//*********************************************
// Add an event listener to update the effects when either slider value changes
document.addEventListener('input', function(event) {
// Check if the event target is one of the sliders
const sliders = [SideButtonsSlider, BottomButtonSlider];
if (sliders.includes(event.target)) {
TopSideButton.style.top = 'calc(' + SideButtonsSlider.value + '%)';
BottomSideButton.style.top = 'calc(' + (100 - SideButtonsSlider.value) + '%)';
BottomButton.style.left = 'calc(' + BottomButtonSlider.value + '%)';
//Save Sliders Position
GM.setValue("SideButtonsSliderOption", SideButtonsSlider.value);
GM.setValue("BottomButtonSliderOption", BottomButtonSlider.value);
}
});
}
//********************************************************************************************************************
//*** Listener event 👂 ***
//********************************************************************************************************************
//*************************
//*** Right click 🖱️ ***
//*************************
TopSideButton.addEventListener('contextmenu', handleRightClick);
BottomSideButton.addEventListener('contextmenu', handleRightClick);
BottomButton.addEventListener('contextmenu', handleRightClick);
//*************************
//*** Left click 🖱️ ***
//*************************
// Add event listener to hide panel when clicking on the webpage
document.addEventListener('click', function(event) {
// Check if the clicked element is the panel or its child elements
var panel = document.getElementById('OptionPanel');
var clickedElement = event.target;
if (panel && !panel.contains(clickedElement)) {
// Remove the panel from the DOM
document.body.removeChild(panel);
}
});
})();