☰

showClock figuccio

Mostra un orologio dragabile

// ==UserScript==
// @name           showClock figuccio
// @namespace      https://greasyfork.org/users/237458
// @description    Mostra un orologio dragabile
// @match          *://*/*
// @license        MIT
// @author         figuccio
// @version        0.9
// @grant          GM_setValue
// @grant          GM_getValue
// @grant          GM_registerMenuCommand
// @grant          GM_addStyle
// @require        https://code.jquery.com/jquery-3.6.0.min.js
// @require        https://code.jquery.com/ui/1.12.1/jquery-ui.js
// @license        MIT
// @noframes
// @icon         data:image/gif;base64,R0lGODlhEAAQAKECABEREe7u7v///////yH5BAEKAAIALAAAAAAQABAAAAIplI+py30Bo5wB2IvzrXDvaoFcCIBeeXaeSY4tibqxSWt2RuWRw/e+UQAAOw==
// ==/UserScript==
var $ = window.jQuery;
$(document).ready(function() {
    // Mostra l'orologio iniziale e prepara la data
    setInterval(showClock, 70);

    function showClock() {
        var d = new Date();
        var t = d.toLocaleTimeString();
        var mm = d.getMilliseconds();
        var date = new Date().toLocaleString('it', {'weekday': 'short', 'month': '2-digit', 'day': '2-digit', 'year': 'numeric'});

        if (document.getElementById("clockDiv")) document.getElementById("clockDiv").innerHTML = date + " " + t + ":" + mm;
    }

    // Crea un elemento orologio
    var clock = document.createElement('div');
    clock.id = "clockDiv";
    clock.title = 'Time';
    clock.setAttribute("style", "position: fixed; left: 0px; top: 0px; font-family: arial; font-size: 18px; z-index: 99999999!important; background-color: red; color: white; border: 2px solid blue; width: auto; padding-left: 2px; padding-right: 2px; cursor: move;");
    document.body.appendChild(clock);

    // Rendi il div trascinabile utilizzando jQuery UI
    $("#clockDiv").draggable({
        containment: "window", // Assicura che l'elemento draggable sia confinato alla finestra del browser
        stop: function(event, ui) {
            // Salva la posizione del div nell'oggetto local storage
            GM_setValue("clockPosition", ui.position);
        }
    });

    // Aggiungi stile per la stampa (mostra/nasconde clock)
    var head, style;
    head = document.getElementsByTagName('head')[0];
    if (!head) { return; }
    style = document.createElement('style');
    style.type = 'text/css';
    style.innerHTML = "@media print {div#clockDiv {display: none;}} @media screen {div#clockDiv {display: block;}}";
    head.appendChild(style);

    // Mostra o nascondi l'orologio quando si fa clic su un collegamento di menu
    GM_registerMenuCommand("Mostra/Nascondi Orologio", function() {
        var clockDiv = document.getElementById("clockDiv");
        if (clockDiv.style.display === "none") {
            clockDiv.style.display = "block";
        } else {
            clockDiv.style.display = "none";
        }
    });

    // Ripristina la posizione del div dall'oggetto local storage se esiste
    var savedPosition = GM_getValue("clockPosition");
    if (savedPosition) {
        $("#clockDiv").css(savedPosition);
    }

    showClock();
});