onibrowser/public/voodoo/src/subviews/tabList.js

A browser in the browser

import {R,X} from '../../node_modules/craydom/r.js';
import DEFAULT_FAVICON from './faviconDataURL.js';

export function TabList(state) {
  return R`
    <nav class="controls targets" stylist="styleTabList styleNavControl">
      <ul>
        ${state.tabs.map((tab, index) => TabSelector(tab, index, state))}
        <li class="new" stylist="styleTabSelector">
          <button class=new title="New tab" accesskey="s" 
            click=${click => state.createTab(click)}>+</button>
        </li>
      </ul>
    </nav>
  `;
}

export function TabSelector(tab, index, state) {
  const title = tab.title == 'about:blank' ? '' : tab.title;
  const active = state.activeTarget == tab.targetId;
  return R`${{key:tab.targetId}}
    <li class="tab-selector ${active?'active':''}" stylist="styleTabSelector">
      ${FaviconElement(tab, state)}
      <a title="Bring to front" 
        mousedown=${() => state.viewState.lastActive = document.activeElement}
        click=${click => state.activateTab(click, tab)} href=/tabs/${tab.targetId}>${title}</a>
      <button class=close title="Close tab" ${active?'accesskey=d':''}
        click=${click => state.closeTab(click, tab, index)}>&Chi;</button>
    </li>
  `;
}

export function FaviconElement({targetId}, state) {
  let faviconURL;
  faviconURL = state.favicons.has(targetId) && state.favicons.get(targetId).dataURI;
  return R`${{key:targetId}}
    <img class=favicon src="${R.attrmarkup(faviconURL || DEFAULT_FAVICON)}" 
      data-target-id="${targetId}" bond=${el => bindFavicon(el, {targetId}, state)}>
  `;
}

function bindFavicon(el, {targetId}, state) {
  let favicon = state.favicons.get(targetId);
  if ( favicon ) {
    favicon.el = el;
  } else {
    favicon = {el};
    state.favicons.set(targetId,favicon);
  }
  if ( favicon.el && favicon.dataURI ) {
    el.src = favicon.dataURI;
  }
}