Size indicator for Uniterm

size-indicator.js

if(!window.sizeInd) (function() {
  const Rx = require('rxjs'), Op = require('rxjs/operators');
  const styleElement = document.head.appendChild(document.createElement('style'));
  styleElement.textContent = `
    .size-indicator {
      position: fixed;
      right: 0;
      bottom: 0;
      opacity: 0.5;
      pointer-events: none;
      mix-blend-mode: exclusion;
      background-color: #FFF;
      color: #000;
      transition-property: opacity;
      transition-duration: 0.1s;
      transition-delay: 0s;
      border-top-left-radius: 0.5em;
      padding: 0.25em;
      z-index: 99999;
      font-size: large;
    }
    .size-indicator.on {
      transition-duration: 0.5s;
      transition-delay: 3s;
      opacity: 0;
    }
  `;
  const indicator = document.body.appendChild(document.createElement('div'));
  indicator.className = 'size-indicator on';
  window.sizeInd = indicator;

  const onReload = Rx.fromEvent(window, 'configreload').pipe(
    Op.first(),
  );
  const onNewTab = Rx.merge(
    Rx.from(window.Tab.allTabs()),
    Rx.fromEvent(window, 'newtab').pipe(
      Op.pluck('detail'),
    ),
  ).pipe(
    Op.takeUntil(onReload),
    Op.pluck('terminal'),
    Op.filter(Boolean),
    Op.share(),
  );
  const onUpdate = Rx.merge(
    onNewTab,
    onNewTab.pipe(
      Op.mergeMap(term => Rx.fromEventPattern(
        handler => term.onResize(handler),
        (_, disposable) => disposable.dispose(),
      )),
    ),
    Rx.fromEvent(window, 'resize'),
  ).pipe(
    Op.takeUntil(onReload),
    Op.debounceTime(10),
    Op.mapTo(window),
    Op.pluck('activeTab', 'autoFit'),
    Op.filter(Boolean),
    Op.share(),
  );
  onUpdate.subscribe(fit => {
    const { cols, rows } = fit.proposeDimensions();
    indicator.textContent = `${cols} × ${rows}`;
    indicator.classList.remove('on');
  });
  onUpdate.pipe(
    Op.debounceTime(100),
  ).subscribe(() =>
    indicator.classList.add('on')
  );
  onReload.subscribe(() => {
    indicator.remove();
    styleElement.remove();
    if(window.sizeInd === indicator)
      delete window.sizeInd;
  });
})();