☰

Color Picker & Clock

Aggiunge un selettore di colori trascinabile con valore esadecimale e un orologio

// ==UserScript==
// @name         Color Picker & Clock
// @namespace    https://greasyfork.org/users/237458
// @version      0.6
// @description  Aggiunge un selettore di colori trascinabile con valore esadecimale e un orologio
// @author       figuccio
// @match        *://*/*
// @grant        GM_addStyle
// @grant        GM_setValue
// @grant        GM_getValue
// @grant        GM_registerMenuCommand
// @require      https://code.jquery.com/jquery-latest.js
// @require      https://code.jquery.com/ui/1.12.1/jquery-ui.js
// @run-at       document-start
// @icon         https://www.google.com/s2/favicons?sz=64&domain=tampermonkey.net
// @license      MIT
// ==/UserScript==
(function() {
    'use strict';
    // Imposta jQuery a $ per evitare conflitti con altre librerie
    var $ = window.jQuery;

    //mostra/nascondi
    function toggleContainer() {
        if (container.is(':visible')) {
            container.hide();
        } else {
            container.show();
        }
    }
    // Comando del menu Registra per attivare/disattivare la visibilità del contenitore
    GM_registerMenuCommand('Mostra/Nascondi', toggleContainer);

    // Crea contenitore
    const container = $('<div>')
        .css({
            position: 'fixed',
            top: '50px', // Default position
            left: '50px', // Default position
            display: 'flex',
            alignItems: 'center',
            fontFamily: 'Arial, sans-serif',
            zIndex: '9999',
        })
        .draggable({
            containment: 'window', //Limita il trascinamento all'interno della finestra
            stop: function(event, ui) {
                //Salva posizione in GM_setValue
                GM_setValue('containerPosition', JSON.stringify({
                    top: ui.position.top,
                    left: ui.position.left
                }));
            }
        });

    // Create color picker fieldset
    const colorPickerFieldset = $('<fieldset>')
        .css({
            border: '1px solid yellow',
            padding: '3px',//era 0 messo 3px
            marginRight: '10px',
            background:'green',
            width:'225px'
        });

    const legend = $('<legend>').text('Color Picker').css({
        fontWeight: 'bold',
        color: 'red', // Colora di rosso il testo della legenda
        textAlign: 'center', // Centrare il testo
        width: '39%', // Assicurarsi che il leggendario occupi l'intera larghezza del suo contenitore  era 34%
        backgroundColor: 'aquamarine', // Imposta il colore di sfondo della legenda su blu
        border: '1px solid yellow', // Aggiungi un bordo di 1px solid giallo
        borderRadius: '5px'
    });
    colorPickerFieldset.append(legend);

    const colorPicker = $('<input>')
        .attr({
            type: 'color',
            id: 'colorPicker',
            list:'colors'
        })
        .css('marginRight', '5px')
        .on('input', function() {
            $('#hexValue').text($(this).val().toUpperCase());
            // Change body background color
            $('body').css('background-color', $(this).val());
            // Save color to GM_setValue
            GM_setValue('bodyColor', $(this).val());
        });

    colorPickerFieldset.append(colorPicker);


    const hexValue = $('<span>').text('#000000').css({
    fontSize: '12px',
    backgroundColor: 'brown', // Imposta il colore di sfondo del valore esadecimale su blu
    color: 'lime', // Imposta il colore del testo del valore esadecimale su rosso
    border: '1px solid yellow', // Aggiungi un bordo di 1px solid giallo
    borderRadius: '5px' // Aggiungi un bordo arrotondato di 5px
}).attr('id', 'hexValue');

    colorPickerFieldset.append(hexValue);

    container.append(colorPickerFieldset);

    // Crea clock
    const clock = $('<div>').css({
        'fontSize': '12px',
        'marginLeft': '-83px', // Aggiunto margine a sinistra per separare l'orologio dal selettore di colori
        'margin-bottom': '-23px',
        'color':'red',
        'background':'black',
         border: '1px solid yellow', // Aggiungi un bordo di 1px solid giallo
         borderRadius: '5px' // Aggiungi un bordo arrotondato di 5px
    });
    container.append(clock);
    $('body').append(container);


    // Recupera e applica il colore del corpo salvato
    const savedBodyColor = GM_getValue('bodyColor');
    if (savedBodyColor) {
        $('body').css('background-color', savedBodyColor);
        $('#colorPicker').val(savedBodyColor);
        $('#hexValue').text(savedBodyColor.toUpperCase());
    }

    // Aggiorna l'orologio ogni 70 millisecondo
    setInterval(updateClock, 70);

    function updateClock() {
        const now = new Date();
        const milliseconds = now.getMilliseconds();
        const formattedMilliseconds = milliseconds < 10 ? '00' + milliseconds : milliseconds < 100 ? '0' + milliseconds : milliseconds;
        clock.text(now.toLocaleTimeString() + '.' + formattedMilliseconds);
    }

    // Controlla se c'è una posizione salvata e applicala
    const savedPosition = GM_getValue('containerPosition');
    if (savedPosition) {
        const position = JSON.parse(savedPosition);
        container.css({
            top: position.top,
            left: position.left
        });
    }

})();