Fullscreen Button

A simple float button for entering fullscreen.
安裝腳本 ?
Wrap lines
// ==UserScript==
// @name         Fullscreen Button
// @name:zh-CN   全屏按钮
// @match        *://*/*
// @version      0.2
// @description  A simple float button for entering fullscreen.
// @description:zh-CN 一个简单的浮动按钮用于全屏显示网页。
// @noframes
// @license      CC0
// @namespace    https://greasyfork.org/users/123506
// ==/UserScript==
'use strict';
 
// Check if the fullscreen button already exists
var btn = document.getElementById("b0n");
 
// If it doesn't exist, create it
if (!btn) {
    document.body.insertAdjacentHTML("afterbegin", '<div id="b0n" style="background-color: rgb(209, 209, 209);position: fixed;display: flex;opacity: 0.66;margin: 1em;z-index: 2147483647" ><svg width="24" height="24"><path d="M7,14L5,14v5h5v-2L7,17v-3zM5,10h2L7,7h3L10,5L5,5v5zM17,17h-3v2h5v-5h-2v3zM14,5v2h3v3h2L19,5h-5z"/></svg></div>');
    btn = document.getElementById("b0n");
}
 
var reF = document.documentElement.requestFullscreen || document.documentElement.webkitRequestFullscreen;
 
var action = function () {
    reF.call(document.documentElement);
}
 
btn.onclick = action;
 
// Variables for long press and touch events
var longPressTimer;
var isTouching = false;
var touchOffsetX, touchOffsetY;
 
// Add touch event listeners
btn.addEventListener("touchstart", function (e) {
    isTouching = true;
    var touch = e.touches[0];
    touchOffsetX = touch.clientX - btn.getBoundingClientRect().left;
    touchOffsetY = touch.clientY - btn.getBoundingClientRect().top;
 
    // Set a long press timer for 500 milliseconds
    longPressTimer = setTimeout(function () {
        btn.style.cursor = "grabbing";
    }, 500);
});
 
btn.addEventListener("touchmove", function (e) {
    if (!isTouching) return;
    var touch = e.touches[0];
    var x = touch.clientX - touchOffsetX;
    var y = touch.clientY - touchOffsetY;
    btn.style.left = x + "px";
    btn.style.top = y + "px";
    e.preventDefault(); // Prevent page scrolling while dragging
});
 
btn.addEventListener("touchend", function () {
    isTouching = false;
    clearTimeout(longPressTimer);
    btn.style.cursor = "grab";
});