mini clock

simple clock for full screen mode

As of 2015-12-03. See the latest version.

// ==UserScript==
// @name        mini clock
// @namespace   gnblizz
// @description simple clock for full screen mode
// @version     1.02
// @include     *
// @noframes
// @grant       GM_setValue
// @grant       GM_getValue
// @grant       GM_registerMenuCommand
// @icon        data:image/gif;base64,R0lGODlhEAAQAKECABEREe7u7v///////yH5BAEKAAIALAAAAAAQABAAAAIplI+py30Bo5wB2IvzrXDvaoFcCIBeeXaeSY4tibqxSWt2RuWRw/e+UQAAOw==
// ==/UserScript==

/* This user script inserts the system time in the upper right corner of the browser window. This is especially useful 
 * in full screen mode, where the task bar clock is hidden.
 * If something is obscured by the time display, select "hide mini clock" from the context menu of the time display.
 * To set the minimum width for the clock to appear, resize the browser window to that width and select "mini clock set min width" from the "user script commands" sub menu of the greasemonkey menu.
 */

function miniClockSetWidth() {
  GM_setValue('miniClockMinWidth', window.outerWidth);
  alert('New treshold width is '+window.outerWidth+' pixel.');
}

try{
  GM_registerMenuCommand('mini clock set min width', miniClockSetWidth, 'w');
}catch(e){}

var miniClockData = {
  id: 'us_MiniClock',
  hTimer: 0,
  div: document.createElement('div'),
  datePattern: (function(){
    switch(navigator.language.slice(0,2)){
    case 'de': return '%A, %e. %B %Y'; // e.g: 'Donnerstag, 16. Juli 2015'
    case 'en': return /-US/i.test(navigator.language) ? '%A%n%B %e, %Y' : '%A%n%e %B %Y';
    }
    return '%A, %x';
  }()),
  OnTimer: function() {
    var dt = new Date(), t = niceTime(dt);
    if(miniClockData.div.textContent != t) {
      miniClockData.div.textContent = t;
      if(!miniClockData.div.title || (!dt.getHours() && !dt.getMinutes()))
	miniClockData.div.title = niceDate(dt);
    }
    function niceTime(d) { return d.toLocaleFormat('%R'); }
    function niceDate(d) { return d.toLocaleFormat(miniClockData.datePattern); }
  },
};
//console.log(miniClockData);
{
  miniClockData.div.setAttribute('id', miniClockData.id);
  addStyle('#'+miniClockData.id+'{display:none;position:fixed!important;top:0px;right:0px;width:auto;color:#E8E8E8;background-color:#181818;border:1px solid gray;padding:1px 7px;font:18pt normal sans-serif;z-index:2147483647;}');
  document.body.appendChild(miniClockData.div);

  miniClockData.OnReSize = function() {
    var minWidth;
    try{
      minWidth = GM_getValue('miniClockMinWidth');
    } catch(e) {
      minWidth = 999;
    }
    if(!minWidth || minWidth >= window.screen.availWidth) minWidth = window.screen.availWidth;
    if(window.outerWidth >= minWidth) {
      miniClockData.div.style.display = "block";
      if(!miniClockData.hTimer) {
        miniClockData.OnTimer();
        miniClockData.hTimer = setInterval(miniClockData.OnTimer, 1900);
      }
    } else {
      miniClockData.div.style.display = "none";
      if(miniClockData.hTimer) {
        clearInterval(miniClockData.hTimer);
        miniClockData.hTimer = null;
      }
    }
  }

  miniClockData.OnReSize();/*init*/

  if(miniClockData.div.offsetTop) {  /*check for unsupported file (such as .css) */
    if(miniClockData.hTimer)
      clearInterval(miniClockData.hTimer);
    miniClockData.div.parentNode.removeChild(miniClockData.div);
    miniClockData.div = null;
  } else {
    window.onresize = miniClockData.OnReSize;
    var menu=document.createElement('menu');
    menu.setAttribute('type','context');
    menu.setAttribute('id',miniClockData.id+'Menu');
    menu.innerHTML='<menuitem label="hide mini clock" onclick="document.getElementById(\'GMMiniClock\').style.visibility=\'hidden\';"></menuitem>';
    document.body.appendChild(menu);
    miniClockData.div.setAttribute('contextmenu',miniClockData.id+'Menu');
  }
}

function addStyle(style) {
  var o = document.createElement("STYLE");
  o.innerHTML = style;
  document.getElementsByTagName('HEAD')[0].appendChild(o);
}

//public domain by gnblizz