// ==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
});
}
})();