handleFileFocus = id => {
  selectedFile = id;

  const file = deepTreeDive(
    currentTree,
    selectedFile.split(',').map(i => parseInt(i, 10))
  );
  const ext = file.path
    .substring(file.path.lastIndexOf('.') + 1, file.path.length)
    .toLowerCase();
  selectedFileEl.innerHTML = '';

  if (['png', 'jpg', 'jpeg', 'gif'].indexOf(ext) !== -1) {
    const title = document.createElement('h2');
    title.className = 'title';
    title.innerHTML = file.name;
    selectedFileEl.appendChild(title);

    const span = document.createElement('span');
    span.innerHTML = 'Quality: ';
    selectedFileEl.appendChild(span);

    const valueEl = document.createElement('span');

    const slider = document.createElement('input');
    slider.type = 'range';
    slider.className = 'range';
    slider.id = 'q-range';
    if (ext === 'jpg' || ext === 'jpeg') {
      slider.min = 1;
      slider.max = 100;
      slider.value = 80;
      valueEl.innerHTML = slider.value;
      selectedFileEl.appendChild(slider);
    } else if (ext === 'png') {
      slider.min = 0;
      slider.max = 100;
      slider.value = 80;
      valueEl.innerHTML = slider.value;
      selectedFileEl.appendChild(slider);
    } else if (ext === 'gif') {
      span.innerHTML = 'Colors: ';
      slider.min = 2;
      slider.max = 256;
      slider.value = 256;
      valueEl.innerHTML = slider.value;
      selectedFileEl.appendChild(slider);
    }

    span.appendChild(valueEl);

    const sizeDiffEl = document.createElement('span');
    sizeDiffEl.id = 'sizeDiff';
    sizeDiffEl.className = 'size-diff';
    selectedFileEl.appendChild(sizeDiffEl);

    const btn = document.createElement('button', { type: 'button' });
    btn.className = 'btn';
    btn.innerHTML = 'Add optimization filter';
    selectedFileEl.appendChild(btn);
    btn.addEventListener('click', handleOptimBtnEvent);
    btn.addEventListener('keypress', handleOptimBtnEvent);

    const imgWrap = document.createElement('div');
    imgWrap.className = 'img';
    const img = document.createElement('img');
    img.id = 'result-img';
    img.addEventListener('load', initMagnifier);
    imgWrap.appendChild(img);
    selectedFileEl.appendChild(imgWrap);

    setQuality(slider.value, img, `ressources/${file.path}`);
    slider.addEventListener(
      'change',
      ((label, imgEl, src) => {
        return event => {
          label.innerHTML = event.target.value;
          setQuality(event.target.value, imgEl, `ressources/${src}`);
        };
      })(valueEl, img, file.path)
    );

    smoothScroll(selectedFileEl.offsetTop, 200);

    const fileEls = document.querySelectorAll('[data-file-id]');
    for (const el of fileEls) {
      if (el.getAttribute('data-file-id') === selectedFile) {
        el.classList.add('tree__item--selected');
      } else {
        el.classList.remove('tree__item--selected');
      }
    }
  }
}
Focus a file
@param {string} id file identifier