Function _makeSectionEl

static/js/sections.js:73–105

(section)

}

function _makeSectionEl(section) {
  const pctStart = (section.start / _duration) * 100;
  const pctWidth = ((section.end - section.start) / _duration) * 100;

  const el = document.createElement("div");
  el.className = "section-block";
  el.dataset.id = section.id;
  el.style.cssText = `left:${pctStart.toFixed(4)}%;width:${pctWidth.toFixed(4)}%;--sc:${section.color}`;

  el.innerHTML = `
    <div class="section-handle section-handle-l" data-edge="left"></div>
    <span class="section-label">${_esc(section.name)}</span>
    <button class="section-del" type="button" aria-label="Delete section" tabindex="-1">×</button>
    <div class="section-handle section-handle-r" data-edge="right"></div>
  `;

  el.querySelector(".section-del").addEventListener("click", (e) => {
    e.stopPropagation();
    _deleteSection(section.id);
  });

  el.querySelector(".section-label").addEventListener("dblclick", (e) => {
    e.stopPropagation();
    _openRename(section.id, el.querySelector(".section-label"));
  });

  _wireDrag(el, section);
  for (const h of el.querySelectorAll(".section-handle")) {
    _wireResize(h, el, section);
  }

  return el;
}

function _esc(str) {
  return String(str)