show-digit-selection-length.js

(() => {
  'use strict';
  
  let mousePos = null;
  window.addEventListener('mousemove', evt => {
    mousePos = {
      x: evt.pageX,
      y: evt.pageY,
    };
  });
  
  let displays = [];
  
  const addDisplay = (disp) => {
    displays.push(disp);
    document.body.appendChild(disp);
  };
  
  const clearDisplays = () => {
    displays.forEach(disp => disp.remove());
    displays = [];
  };
  
  document.addEventListener('selectionchange', (evt) => {
    clearDisplays();
    const sel = window.getSelection().toString().trim();
    
    if (/^[0-9]*$/.test(sel) && sel.length > 3) {
      const display = document.createElement('div');
      display.textContent = `${sel.length} digits`;
      
      display.style.backgroundColor = '#aff';
      display.style.border = '1px solid black';
      
      display.style.position = 'absolute';
      display.style.visibility = 'hidden';

      addDisplay(display);
      
      display.style.left = `${mousePos.x - 0.5 * display.getBoundingClientRect().width}px`;
      display.style.top = `${mousePos.y + 15}px`;
      display.style.visibility = '';
      
      setTimeout(() => {
        let handler;
        window.addEventListener('click', handler = () => {
          window.removeEventListener('click', handler);
          display.remove();
        });
      }, 500);
    }
  });
})();