Daily Sync Timer

countdown.bookmarklet.min.js

javascript:!function(){const t="countdown-panel";let e=window._superProductiveCountdown=window._superProductiveCountdown||{timeout:null,running:!1,time:{default:120,current:120,maximum:120}};e.updatePanel=function(n,o){let i=document.getElementById(t)||function(){let e=document.createElement("div");return e.id=t,document.body.appendChild(e),e.style="background: #fff; position: fixed; z-index: 9999; cursor: move; top: 42px; left: 500px; width: 400px; height: 46px; padding: 10px;border: 1px solid lightgray; box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;",e.innerHTML='\n    <div id="progress-bar" style="position: relative; height: 20px; background-color: #f0f0f0; border-bottom: 1px solid #ccc;">\n      <div class="progress" style="width: 100%; height: 100%; background-color: \'#dc3545\';"></div>\n      <span class="timer" style="position: absolute; width: max-content; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 18px;"></span>\n    </div>\n    <div style="position: relative; top: 5px;">\n      <button onclick="window._superProductiveCountdown.exit()" style="float:right">❌</button>\n      <button onclick="window._superProductiveCountdown.start(event)">⏯️</button>\n      <button onclick="window._superProductiveCountdown.reset()">↩️</button>\n      <button onclick="window._superProductiveCountdown.showOptions()">🔧</button>\n    </div>\n  ',function(t){var e=0,n=0,o=0,i=0;function u(t){(t=t||window.event).preventDefault(),o=t.clientX,i=t.clientY,document.onmouseup=d,document.onmousemove=r}function r(u){(u=u||window.event).preventDefault(),e=o-u.clientX,n=i-u.clientY,o=u.clientX,i=u.clientY,t.style.top=t.offsetTop-n+"px",t.style.left=t.offsetLeft-e+"px"}function d(){document.onmouseup=null,document.onmousemove=null}document.getElementById(t.id+"header")?document.getElementById(t.id+"header").onmousedown=u:t.onmousedown=u}(e),e}();i.style.backgroundColor=""+(e.time.current%2==-1?"#dc3545":"#fff"),i.querySelector(".timer").textContent=o;let u=i.querySelector(".progress");u.style.width=`${n}%`,u.style.backgroundColor=""+(n>50?"#28a745":n>25?"#ffc107":"#dc3545")},e.update=function(){e.time.current--;const t=(e.time.current/e.time.maximum*100).toFixed(2);e.time.current>=0?e.updatePanel(t,e.time.current):e.updatePanel(0,"Time's Up! Overtime: "+-e.time.current),e.timeout=setTimeout(e.update,1e3)},e.start=function(t){e.running?(clearTimeout(e.timeout),e.running=!1):(e.running=!0,e.update()),t.target.setAttribute("disabled","disabled"),setTimeout((()=>t.target.removeAttribute("disabled")),1e3)},e.reset=function(){clearTimeout(e.timeout),e.time.current=e.time.maximum,e.running=!1,e.updatePanel(0,e.time.maximum)},e.showOptions=function(){const t=prompt("Countdown time (seconds):",e.time.default);null===t||isNaN(t)||(e.time.maximum=parseInt(t,10),e.reset())},e.exit=function(){e.reset(),window._superProductiveCountdown=null,document.getElementById(t).outerHTML=""},e.updatePanel(0,e.time.current)}();

countdown.js

/*
The script adds a draggable panel with countdown timer to any page.
Suites for hosts of daily sync meetings, to keep it breif.

To use it simply add `countdown.bookmarklet.min.js` file content to a bookmark,
and open the bookmark on your tasks dashboard. Tested only with JIRA.

Minifier tool: https://www.digitalocean.com/community/tools/minify
*/

(function () {

const countdownPanelId = 'countdown-panel';

let countdown = window._superProductiveCountdown = window._superProductiveCountdown || {
  timeout: null,
  running: false,
  time: {
    default: 120,
    current: 120,
    maximum: 120,
  },
};

function createPanel() {
  let panel = document.createElement('div');
  panel.id = countdownPanelId;

  document.body.appendChild(panel);
  panel.style = 'background: #fff; position: fixed; z-index: 9999; cursor: move; top: 42px; left: 500px; width: 400px; height: 46px; padding: 10px;' +
    'border: 1px solid lightgray; box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;';
  panel.innerHTML = `
    <div id="progress-bar" style="position: relative; height: 20px; background-color: #f0f0f0; border-bottom: 1px solid #ccc;">
      <div class="progress" style="width: 100%; height: 100%; background-color: '#dc3545';"></div>
      <span class="timer" style="position: absolute; width: max-content; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 18px;"></span>
    </div>
    <div style="position: relative; top: 5px;">
      <button onclick="window._superProductiveCountdown.exit()" style="float:right">❌</button>
      <button onclick="window._superProductiveCountdown.start(event)">⏯️</button>
      <button onclick="window._superProductiveCountdown.reset()">↩️</button>
      <button onclick="window._superProductiveCountdown.showOptions()">🔧</button>
    </div>
  `;

  dragElement(panel);

  function dragElement(el) {
    var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
    if (document.getElementById(el.id + "header")) {
      document.getElementById(el.id + "header").onmousedown = dragMouseDown;
    } else {
      el.onmousedown = dragMouseDown;
    }
  
    function dragMouseDown(e) {
      e = e || window.event;
      e.preventDefault();
      pos3 = e.clientX;
      pos4 = e.clientY;
      document.onmouseup = closeDragElement;
      document.onmousemove = elementDrag;
    }
  
    function elementDrag(e) {
      e = e || window.event;
      e.preventDefault();
      pos1 = pos3 - e.clientX;
      pos2 = pos4 - e.clientY;
      pos3 = e.clientX;
      pos4 = e.clientY;
      el.style.top = (el.offsetTop - pos2) + "px";
      el.style.left = (el.offsetLeft - pos1) + "px";
    }
  
    function closeDragElement() {
      document.onmouseup = null;
      document.onmousemove = null;
    }
  }

  return panel;
}

countdown.updatePanel = function(progress, text) {
  let panel = document.getElementById(countdownPanelId) || createPanel();
  panel.style.backgroundColor = `${countdown.time.current % 2 == -1 ? '#dc3545' : '#fff'}`;
  panel.querySelector('.timer').textContent = text;

  let bar = panel.querySelector('.progress');
  bar.style.width = `${progress}%`;
  bar.style.backgroundColor = `${progress > 50 ? '#28a745' : progress > 25 ? '#ffc107' : '#dc3545'}`;
};

countdown.update = function() {
  countdown.time.current--;
  const progress = ((countdown.time.current / countdown.time.maximum) * 100).toFixed(2);
  if (countdown.time.current >= 0) {
    countdown.updatePanel(progress, countdown.time.current);
  } else {
    countdown.updatePanel(0, "Time's Up! Overtime: " + (-countdown.time.current));
  }
  countdown.timeout = setTimeout(countdown.update, 1000);
};

countdown.start = function(e) {
  if (countdown.running) {
    clearTimeout(countdown.timeout);
    countdown.running = false;
  } else {
    countdown.running = true;
    countdown.update();
  }
  e.target.setAttribute('disabled', 'disabled');
  setTimeout(() => e.target.removeAttribute('disabled'), 1000);
};

countdown.reset = function() {
  clearTimeout(countdown.timeout);
  countdown.time.current = countdown.time.maximum;
  countdown.running = false;
  countdown.updatePanel(0, countdown.time.maximum);
};

countdown.showOptions = function() {
  const newTime = prompt('Countdown time (seconds):', countdown.time.default);
  if (newTime !== null && !isNaN(newTime)) {
    countdown.time.maximum = parseInt(newTime, 10);
    countdown.reset();
  }
};

countdown.exit = function() {
  countdown.reset();
  window._superProductiveCountdown = null;
  document.getElementById(countdownPanelId).outerHTML = '';
}

countdown.updatePanel(0, countdown.time.current);

})();