☰

MiniClock

simple clock for full screen mode

  1. // ==UserScript==
  2. // @name        MiniClock
  3. // @description simple clock for full screen mode
  4. // @version     1.0.0
  5. // @include     *
  6. // @grant       GM_setValue
  7. // @grant       GM_getValue
  8. // @grant       GM_registerMenuCommand
  9. // @icon        data:image/gif;base64,R0lGODlhEAAQAKECABEREe7u7v///////yH5BAEKAAIALAAAAAAQABAAAAIplI+py30Bo5wB2IvzrXDvaoFcCIBeeXaeSY4tibqxSWt2RuWRw/e+UQAAOw==
  10. // @namespace https://greasyfork.org/users/230459
  11. // ==/UserScript==
  12.  
  13. /*==================================================================================*/
  14. const clockSettings = {
  15.   opacity: '0.6',       // Controls CSS Opacity and needs a value from 0 to 1
  16.   fontSize: '0.6rem',   // Sets the size of the clock.
  17.   is12hour: true,       // Toggles between 24 hour or 12 hour clock.
  18.   font: 'Arial',        // Allow a custom font
  19. }
  20. /*==================================================================================*/
  21.  
  22. function setStyles(styles) {
  23.   styles.forEach(style => node.style.setProperty(style.name, style.value));
  24. }
  25.  
  26. function changeOpacity(newOpacity){
  27.   node.style.setProperty('opacity', newOpacity);
  28. }
  29.  
  30. function updateClock() {
  31.   let date = new Date();
  32.   let time = date.toLocaleString('en-US', {
  33.     hour: 'numeric',
  34.     minute: 'numeric',
  35.     hour12: clockSettings.is12hour
  36.   });
  37.   node.innerHTML = time;
  38. }
  39.  
  40. function isFullscreen() {
  41.   return (window.fullScreen || 
  42.     (window.innerWidth == screen.width && window.innerHeight == screen.height) || 
  43.     (window.innerWidth >= screen.width && window.innerHeight >= screen.height) || /* Fix for chrome when zoom is < 100%  */
  44.     (!window.screenTop && !window.screenY))
  45. }
  46.  
  47. let node = document.createElement('div');
  48. let textnode = document.createTextNode('');
  49. node.appendChild(textnode);
  50. setStyles([
  51.   { name: 'position', value: 'fixed' },
  52.   { name: 'bottom', value: '0' },
  53.   { name: 'right', value: '0' },
  54.   { name: 'background-color', value: 'black' },
  55.   { name: 'color', value: 'white' },
  56.   { name: 'z-index', value: '99999' },
  57.   { name: 'font-size', value: clockSettings.fontSize  },
  58.   { name: 'padding', value: '1px 4px' },
  59.   { name: 'border-radius', value: '4px' },
  60.   { name: 'border', value: '1px solid rgba(250, 250, 250, 0.3)' },
  61.   { name: 'margin', value: '2px' },
  62.   { name: 'opacity', value: '0' },
  63.   { name: 'font-family', value: '"' + clockSettings.font + '", sans-serif'  },
  64.   { name: 'text-rendering', value: 'optimizelegibility' },
  65.   { name: 'cursor', value: 'default' },
  66. ]);
  67. document.body.appendChild(node);
  68.  
  69. setInterval(() => updateClock(), 1000);
  70. window.addEventListener('resize', () => changeOpacity((isFullscreen())? clockSettings.opacity : '0'));
  71. node.addEventListener('mouseover', () => changeOpacity('0'));
  72. node.addEventListener('mouseout', () => changeOpacity(clockSettings.opacity));