JavaScript. Практическое пособие

document.querySelector('.potter')?.classList.add('meh');

const wizards = {};
wizards.harry?.house.toLowerCase();

const house =
  wizards.harry?.house.toLowerCase() ??
  'hufflepuff';

const harry = document.querySelector('.potter');
const wizards = {};

/* Если элемент `.potter` создан, вызываем его
метод */
if (harry) {
  harry.classList.add('meh');
}

/* Если свойство wizards.harry.house существует,
переводим его в нижний регистр */
if (wizards.harry && wizards.harry.house) {
  wizards.harry.house.toLowerCase();
}

const el = document.getElementById('element');
el.addEventListener('contextmenu', (e) => {
  e.preventDefault();
});

el.addEventListener('contextmenu', (e) => {
  const rect = el.getBoundingClientRect();
  const x = e.clientX - rect.left;
  const y = e.clientY - rect.top;

  // Задаем координаты
  menu.style.top = `${y}px`;
  menu.style.left = `${x}px`;

  // Показываем меню
  menu.classList.add('is-on');
});

el.addEventListener('contextmenu', (e) => {
  /* ...
  Добавляем вложенный слушатель */
  document.addEventListener('click', docClickHandler);
});

/** Прячем меню на клике за его пределами */
const docClickHandler = (e) => {
  const isClickedOutside = !menu.contains(e.target);
  if (isClickedOutside) {
    menu.classList.remove('is-on');

    // Удаляем обработчик
    document.removeEventListener(
      'click', docClickHandler
    );
  }
};

const greetings = document.querySelector('article');
const button = document.querySelector('button');

const takeFullscreen = () => {
  greetings.requestFullscreen();
};

button.addEventListener('click', takeFullscreen);

const scrollToBeVisible = (el, container) => {
  const eleTop = el.offsetTop;
  const eleBottom = eleTop + el.clientHeight;

  const containerTop = container.scrollTop;
  const containerBottom =
    containerTop + container.clientHeight;

  if (eleTop < containerTop) {
    // Прокрутка вверх контейнера
    container.scrollTop -= containerTop - eleTop;
  } else if (eleBottom > containerBottom) {
    // Прокрутка вниз контейнера
    container.scrollTop += eleBottom - containerBottom;
  }
};

const wrapper = document.getElementById('wrapper');
const content = document.getElementById('content');
const anchor = document.getElementById('anchor');
const scrollbar = document.getElementById('scrollbar');

// Получаем размеры и положения контейнера и якоря
const wrapperRect = wrapper.getBoundingClientRect();
const anchorRect = anchor.getBoundingClientRect();

// Устанавливаем скроллбар
const top = wrapperRect.top - anchorRect.top;
const left = wrapperRect.width + wrapperRect.left - anchorRect.left;
scrollbar.style.top = `${top}px`;
scrollbar.style.left = `${left}px`;

// Высота скроллбара равна высоте контейнера
scrollbar.style.height = `${wrapperRect.height}px`;

const track = document.getElementById('track');
const thumb = document.getElementById('thumb');

const scrollRatio =
  content.clientHeight / content.scrollHeight;
thumb.style.height = `${scrollRatio * 100}%`;

let pos = { top: 0, y: 0 };

const mouseDownThumbHandler = (e) => {
  pos = {
    // Текущая позиция бегунка прокрутки
    top: content.scrollTop,
    // Текущая позиция курсора
    y: e.clientY,
  };

  document.addEventListener(
    'mousemove', mouseMoveHandler
  );
  document.addEventListener(
    'mouseup', mouseUpHandler
  );
};

const mouseMoveHandler = (e) => {
  // Как далеко курсор переместился
  const dy = e.clientY - pos.y;

  // Прокручиваем содержание
  content.scrollTop = pos.top + dy / scrollRatio;
};

// Назначаем обработчик `mousedown`
thumb.addEventListener(
  'mousedown', mouseDownThumbHandler
);

const scrollContentHandler = () => {
  window.requestAnimationFrame(() => {
    thumb.style.top = `
      ${(content.scrollTop * 100) /
      content.scrollHeight}%
    `;
  });
};

content.addEventListener('scroll', scrollContentHandler);

const trackClickHandler = (e) => {
  const bound = track.getBoundingClientRect();
  const percentage =
    (e.clientY - bound.top) / bound.height;
  content.scrollTop =
    percentage *
    (content.scrollHeight - content.clientHeight);
};

track.addEventListener('click', trackClickHandler);

const isRangeInputSupported = () => {
  const el = document.createElement('input');
  el.setAttribute('type', 'range');
  /* Если браузер не поддерживает поле `range`,
  атрибуту `type` будет присвоено значение `text` */
  return el.type !== 'text';
};

const thumb = document.getElementById('thumb');
const leftSide = thumb.previousElementSibling;

// The current position of mouse
let x = 0;
let y = 0;
let leftWidth = 0;

// Обработчик будет срабатывать при перетаскивании
const mouseDownHandler = (e) => {
  // Текущая позиция мыши
  x = e.clientX;
  y = e.clientY;
  leftWidth = leftSide.getBoundingClientRect().width;

  // Назначаем вложенные обработчики
  document.addEventListener(
    'mousemove', mouseMoveHandler
  );

  document.addEventListener('mouseup', mouseUpHandler);
};

const mouseMoveHandler = (e) => {
  // Как далеко мышь продвинулась
  const dx = e.clientX - x;
  const dy = e.clientY - y;

  const containerWidth =
    thumb.parentNode.getBoundingClientRect().width;
  let newLeftWidth =
    ((leftWidth + dx) * 100) / containerWidth;
  newLeftWidth = Math.max(newLeftWidth, 0);
  newLeftWidth = Math.min(newLeftWidth, 100);

  leftSide.style.width = `${newLeftWidth}%`;
};

/* Обработчик срабатывает в тот момент,
когда пользователь отпускает бегунок */
const mouseUpHandler = () => {
  leftSide.style.removeProperty('user-select');
  leftSide.style.removeProperty('pointer-events');

  rightSide.style.removeProperty('user-select');
  rightSide.style.removeProperty('pointer-events');

  // Удаляем слушатели, пока они не нужны
  document.removeEventListener(
    'mousemove',
    mouseMoveHandler
  );
  
  document.removeEventListener(
    'mouseup',
    mouseUpHandler
  );
};

// Назначаем обработчик
thumb.addEventListener(
  'mousedown', mouseDownHandler
);

el.scrollIntoView({ behavior: 'smooth' });

const triggers = document.querySelectorAll(
  '.trigger'
);

triggers.forEach((el) => {
  el.addEventListener('click', clickHandler);
});

const clickHandler = (e) => {
  e.preventDefault();

  // Получаем id целевой секции из атрибута `href`
  const href = e.target.getAttribute('href');
  const id = href.substr(1);
  const target = document.getElementById(id);

  scrollToTarget(target);
};

const duration = 800;

const scrollToTarget = (target) => {
  const { top } = target.getBoundingClientRect();
  const startPos = window.pageYOffset;
  const diff = top;

  let startTime = null;
  let requestId;

  const loop = (currentTime) => {
    if (!startTime) {
      startTime = currentTime;
    }

    // Время в миллисекундах
    const time = currentTime - startTime;

    const percent = Math.min(time / duration, 1);
    window.scrollTo(0, startPos + diff * percent);

    if (time < duration) {
      // Продолжаем прокрутку
      requestId = window.requestAnimationFrame(loop);
    } else {
      // Останавливаем
      window.cancelAnimationFrame(requestId);
    }
  };
  requestId = window.requestAnimationFrame(loop);
};

const time = currentTime - startTime;

// `percent` — это диапазон от 0 до 1
const percent = Math.min(time / duration, 1);
window.scrollTo(0, startPos + diff * percent);

if (time < duration) {
  requestId = window.requestAnimationFrame(loop);
} else {
  window.cancelAnimationFrame(requestId);
}

const easeInQuad = (t) => {
  return t * t;
};

const loop = (currentTime) => {
  // ...
  const percent = Math.min(time / duration, 1);
  window.scrollTo(
    0, startPos + diff * easeInQuad(percent)
  );
};

const state = {
  count: 0,
};

const counter = (count) => {
  return  `<div class="counter">${count}</div>`;
}

function renderCount() {
  document.getElementById('app')
    /* Передаём в контейнер разметку
    из функцию компонента */
    .innerHTML = counter(state.count);
}

function incCountUp() {
  const newCount = state.count + 1;
  state.count = newCount;
}

const btn = document.querySelector(
  '[data-action="count-up"]'
);

btn.click(() => {
  incCountUp();
  renderCount();
});

const display = document.getElementById(
  'display'
);

const btn = document.querySelector(
  '[data-action="count-up"]'
);

const state = {
  count: 0,
};

// Components

const counter = (count) => {
  let className = 'text-error';

  if (count > 10) {
    className = 'text-success';
  }

  return `
    <p class="counter">
      Count:
      <span class="${className}">
        ${count}
      </span>
    </p>
  `;
};

// Render Methods

function renderCount() {
  display.innerHTML = counter(state.count);
}

// Update methods

function incCountUp() {
  const newCount = state.count + 1;
  state.count = newCount;

  renderCount();
}

renderCount();

btn.click(() => {
  incCountUp();
  renderCount();
});

const el = document.querySelector('.details__body');
const height = el.scrollHeight;
el.style.setProperty('--max-height', height + 'px');

/**
 * Бинарный поиск
 * @param {array} list Массив с возможными значениями
 * @param {number} item Искомое число
 */
function binarySearch(list, item) {

  // Минимальный и максимальный индекс в массиве
  let low = 0;
  let high = list.length - 1;

  /* Пока минимальный индекс меньше или равен
  максимальному, находим индекс элемента в середине
  массива. И сравним число в середине массива -
  list[mid] — с искомым */
  while (low <= high) {
    const mid = Math.floor((low + high) / 2);
    const guess = list[mid];

    if (guess === item) {
      return mid;
    }

    /* Если число в середине больше искомого,
    тогда соответственно обновляется переменная
    high — переносим максимальную границу в меньшую
    сторону. А если догадка была слишком мала, то
    обновляется переменная low. */
    if (guess > item) {
      high = mid - 1;
    } else {
      low = mid + 1;
    }
  }

  return null;
}

const myArr = [1, 3, 5, 7, 9];

console.log(binarySearch(myArr, 3)); // 1
console.log(binarySearch(myArr, -1)); // null

.draggable {
    // Indicate the element draggable
    cursor: move;

    // It will be positioned absolutely
    position: absolute;

    // Doesn't allow to select the content inside
    user-select: none;
  }

// Текущая позиция мышки
let x = 0;
let y = 0;

const el = document.getElementById('dragMe');

/** Отслеживаем передвижение */
const mouseMoveHandler = (e) => {
  // Как далеко курсор передвинулся
  const dx = e.clientX - x;
  const dy = e.clientY - y;

  // Устанавливаем позицию элемента
  el.style.top = `${el.offsetTop + dy}px`;
  el.style.left = `${el.offsetLeft + dx}px`;

  // Переопределяем позицию курсора
  x = e.clientX;
  y = e.clientY;
};

/** Удаляем обработчики на прекращении перетаскивания */
const mouseUpHandler = () => {
  // Remove the handlers of `mousemove` and `mouseup`
  document.removeEventListener('mousemove', mouseMoveHandler);
  document.removeEventListener('mouseup', mouseUpHandler);
};

/** Добавляем обработчики перед перетаскиванием */
const mouseDownHandler = (e) => {
  // Получаем координаты курсора
  x = e.clientX;
  y = e.clientY;

  // Устанавливаем слушатели на документ
  document.addEventListener('mousemove', mouseMoveHandler);
  document.addEventListener('mouseup', mouseUpHandler);
};

el.addEventListener('mousedown', mouseDownHandler);

const el = document.getElementById('resize-me');

// Текущая позиция курсора
let x = 0;
let y = 0;

// Размеры элемента
let w = 0;
let h = 0;

const mouseMoveHandler = (e) => {
  // Как далеко перемещен курсор
  const dx = e.clientX - x;
  const dy = e.clientY - y;

  // Обновляем размеры элемента
  el.style.width = `${w + dx}px`;
  el.style.height = `${h + dy}px`;
};

/* Удаляем обработчики */
const mouseUpHandler = () => {
  document.removeEventListener(
    'mousemove', mouseMoveHandler
  );
  document.removeEventListener(
    'mouseup', mouseUpHandler
  );
};

/** Обработчик срабатывает в начале перетаскивания */
const mouseDownHandler = (e) => {
  // Текущая позиция курсора
  x = e.clientX;
  y = e.clientY;
  
  // Измеряем элемент
  const styles = window.getComputedStyle(el);
  w = parseInt(styles.width, 10);
  h = parseInt(styles.height, 10);
  
  /* Устанавливаем слушатели с обработчиками
  на документ */
  document.addEventListener(
    'mousemove', mouseMoveHandler
  );
  document.addEventListener(
    'mouseup', mouseUpHandler
  );
};

const resizers = el.querySelectorAll('.resizer');

resizers.forEach((resizer) => {
  resizer.addEventListener(
    'mousedown', mouseDownHandler
  );
});

// Элемент, перетаскиваемый в данный момент
let draggingEl;

// Текущая позиция курсора относительно перетаскиваемого элемента
let x = 0;
let y = 0;

/** Перетаскивание в процессе */
const mouseMoveHandler = (e) => {
  // Устанавливаем позицию перетаскиваемого элемента
  draggingEl.style.position = 'absolute';
  draggingEl.style.top = `${e.pageY - y}px`;
  draggingEl.style.left = `${e.pageX - x}px`;
};

/** Перетаскивание закончилось.
  * Удаляем стили позиционирования перетаскиваемого
  * элемента и слушатели
  */
const mouseUpHandler = () => {
  // Remove the position styles
  draggingEl.style.removeProperty('top');
  draggingEl.style.removeProperty('left');
  draggingEl.style.removeProperty('position');

  x = null;
  y = null;
  draggingEl = null;

  // Удаляем слушатели `mousemove` и `mouseup`
  document.removeEventListener(
    'mousemove', mouseMoveHandler
  );
  document.removeEventListener(
    'mouseup', mouseUpHandler
  );
};

/** Перетаскивание начинается */
const mouseDownHandler = (e) => {
  draggingEl = e.target;

  // Рассчитываем позицию курсора
  const rect = draggingEl.getBoundingClientRect();
  x = e.pageX - rect.left;
  y = e.pageY - rect.top;

  // Устанавливаем слушатели на документ
  document.addEventListener(
    'mousemove', mouseMoveHandler
  );
  document.addEventListener('mouseup', mouseUpHandler);
};

/* Теперь установим слушатели `mousedown`
на каждый элемент списка */
const listItems = document
  .getElementById('list')
  .querySelectorAll('.dragable');

listItems.forEach((item) => {
  item.addEventListener('mousedown', mouseDownHandler);
});

let placeholder;
let isDraggingStarted = false;

const mouseMoveHandler = (e) => {
  const draggingRect =
    draggingEl.getBoundingClientRect();

  if (!isDraggingStarted) {
  // Обновляем флаг
  isDraggingStarted = true;

  // Создаем заглушку
  placeholder = document.createElement('div');
  placeholder.classList.add('placeholder');
  draggingEl.parentNode.insertBefore(
    placeholder,
    draggingEl.nextSibling
  );

  /* Задаем высоту заглушке — такую же,
  как у изъятого элемента */
  placeholder.style.height = `${draggingRect.height}px`;
  }

  // ...
};

const mouseUpHandler = () => {
  // Удаляем
  placeholder &&
    placeholder.parentNode.removeChild(placeholder);
  
  // Восстанавливаем флаг
  isDraggingStarted = false;

  // ...
};

const isAbove = (nodeA, nodeB) => {
  // Получаем границы элементов
  const rectA = nodeA.getBoundingClientRect();
  const rectB = nodeB.getBoundingClientRect();

  return (
    rectA.top + rectA.height / 2 <
    rectB.top + rectB.height / 2
  );
};

const mouseMoveHandler = (e) => {
  /* Порядок элементов:
     prevEl
     draggingEl
     placeholder
     nextEl */
  const prevEl = draggingEl.previousElementSibling;
  const nextEl = placeholder.nextElementSibling;
};

const mouseMoveHandler = (e) => {
  // ...

  // Пользователь тащит элемент вверх
  if (prevEl && isAbove(draggingEl, prevEl)) {
    /* Изменение порядка: исходный -> новый
       prevEl                     -> placeholder
       draggingEl                  -> draggingEl
       placeholder                 -> prevEl */
    swap(placeholder, draggingEl);
    swap(placeholder, prevEl);
  }
};

const mouseMoveHandler = (e) => {
  // ...

  // User moves the dragging element to the bottom
  if (nextEl && isAbove(nextEl, draggingEl)) {
    /* Изменение порядка: исходный -> новый
       draggingEl                  -> nextEl
       placeholder                 -> placeholder
       nextEl                      -> draggingEl */
    swap(nextEl, placeholder);
    swap(nextEl, draggingEl);
  }
};

const swap = (nodeA, nodeB) => {
  const parentA = nodeA.parentNode;
  const siblingA =
    nodeA.nextSibling === nodeB
      ? nodeA
      : nodeA.nextSibling;

  // Поднимаем `nodeA` выше `nodeB`
  nodeB.parentNode.insertBefore(nodeA, nodeB);

  /* Поднимаем `nodeB` выше соседа элемента `nodeA`
  верхнего или нижнего определяется в тернарном
  операторе выше */
  parentA.insertBefore(nodeB, siblingA);
};

const el = document.getElementById('dragMe');

// Виртуальная проекция
let ghostEle;

el.addEventListener('dragstart', (e) => {
  // Создаем виртуальную проекцию
  ghostEle = document.createElement('div');
  ghostEle.classList.add('is-dragging');
  ghostEle.innerHTML = 'Уиии!';
  document.body.appendChild(ghostEle);

  // Заменяем проекцию по умолчанию пользовательской
  e.dataTransfer.setDragImage(ghostEle, 0, 0);
});

// По окончанию перетягивания виртуальную проекцию следует удалить.

el.addEventListener('dragend', () => {
  document.body.removeChild(ghostEle);
});

const ghostEle = document.getElementById('ghost');

el.addEventListener('dragstart', (e) => {
  e.dataTransfer.setDragImage(ghostEle, 0, 0);
});

const el = document.getElementById('container');
el.scrollTop = 100;
el.scrollLeft = 150;

let pos = { top: 0, left: 0, x: 0, y: 0 };

const mouseDownHandler = (e) => {
  pos = {
    // Текущее положение прокрутки
    left: el.scrollLeft,
    top: el.scrollTop,
    // Получить положение мыши
    x: e.clientX,
    y: e.clientY,
  };

  document.addEventListener(
    'mousemove', mouseMoveHandler
  );
  document.addEventListener('mouseup', mouseUpHandler);
};

const mouseMoveHandler = (e) => {
  // Как далеко перемещен курсор
  const dx = e.clientX - pos.x;
  const dy = e.clientY - pos.y;

  // Прокручиваем элемент
  el.scrollTop = pos.top - dy;
  el.scrollLeft = pos.left - dx;
};

const mouseDownHandler = (e) => {
  // Change the cursor and prevent user from selecting the text
  el.style.cursor = 'grabbing';
  el.style.userSelect = 'none';
  // ...
};

/** По окончании перетягивания */
const mouseUpHandler = () => {
  document.removeEventListener('mousemove', mouseMoveHandler);
  document.removeEventListener('mouseup', mouseUpHandler);

  // Меняем курсор и разрешаем выделение
  el.style.cursor = 'grab';
  el.style.removeProperty('user-select');
};

let isDraggingStarted = false;

const mouseMoveHandler = (e) => {
  if (!isDraggingStarted) {
    isDraggingStarted = true;

    cloneTable();
  }
  // ...
};

let list;

const cloneTable = () => {
  // Получаем границы таблицы
  const rect = table.getBoundingClientRect();

  // Получаем ширину таблицы
  const width = parseInt(
    window.getComputedStyle(table).width, 10
  );

  // Создаем псевдосписок
  list = document.createElement('div');

  // Устанавливаем его по координатам таблицы
  list.style.position = 'absolute';
  list.style.left = `${rect.left}px`;
  list.style.top = `${rect.top}px`;

  // Вставляем до таблицы
  table.parentNode.insertBefore(list, table);

  // Таблицу скрываем
  table.style.visibility = 'hidden';
};

let list;

const cloneTable = () => {
  // Получаем границы таблицы
  const rect = table.getBoundingClientRect();

  // Получаем ширину таблицы
  const width = parseInt(
    window.getComputedStyle(table).width, 10
  );

  // Создаем псевдосписок
  list = document.createElement('div');

  // Устанавливаем его по координатам таблицы
  list.style.position = 'absolute';
  list.style.left = `${rect.left}px`;
  list.style.top = `${rect.top}px`;

  // Вставляем до таблицы
  table.parentNode.insertBefore(list, table);

  // Таблицу скрываем
  table.style.visibility = 'hidden';
};

cells.forEach((cell) => {
  const newCell = cell.cloneNode(true);
  // Устанавливаем ширину оригинальной ячейки
  newCell.style.width = `${parseInt(
    window.getComputedStyle(cell).width,
    10
  )}px`;
  newRow.appendChild(newCell);
});

// Перетаскиваемый элемент
let draggingEl;
// Индекс Перетаскиваемой строки
let draggingRowIndex;

const mouseDownHandler = (e) => {
  // Получаем исходную строку
  const originalRow = e.target.parentNode;
  draggingRowIndex = [].slice
    .call(table.querySelectorAll('tr'))
    .indexOf(originalRow);
};

const mouseMoveHandler = (e) => {
  if (!isDraggingStarted) {
    cloneTable();

    // Получаем перетягиваемый элемент
    draggingEl =
      [].slice.call(list.children)[draggingRowIndex];
  }
};

const mouseUpHandler = () => {
  // Получаем индекс целевой строки
  const endRowIndex = [].slice
    .call(list.children)
    .indexOf(draggingEl);
};

const mouseUpHandler = () => {
  // Переносим перетаскиваемую строку к `endRowIndex`
  const rows = [].slice.call(table.querySelectorAll('tr'));
  draggingRowIndex > endRowIndex
    ? // Пользователь отпустил сверху
      rows[endRowIndex].parentNode.insertBefore(
        rows[draggingRowIndex],
        rows[endRowIndex]
      )
    : // Пользователь отпустил снизу
      rows[endRowIndex].parentNode.insertBefore(
        rows[draggingRowIndex],
        rows[endRowIndex].nextSibling
      );
};

let isDraggingStarted = false;

const mouseMoveHandler = (e) => {
  if (!isDraggingStarted) {
    isDraggingStarted = true;

    cloneTable();
  }
  // ...
};

let list;

const cloneTable = () => {
  // Получаем границы таблицы
  const rect = table.getBoundingClientRect();

  /* Создает список — не семантический `ul`,
  простой `div` */
  list = document.createElement('div');

  // Устанавливаем его по координатам таблицы
  list.style.position = 'absolute';
  list.style.left = `${rect.left}px`;
  list.style.top = `${rect.top}px`;

  // В коде вставляем перед таблицей
  table.parentNode.insertBefore(list, table);

  // Прячем таблицу
  table.style.visibility = 'hidden';
};

const cloneTable = () => {
// ...

/* Получаем поверхностную копию всех td.
Делаем из NodeList массив, чтобы применить
позже метод `filter`.*/
const originalCells = [].slice.call(
    table.querySelectorAll('tbody td')
);

/* Получаем поверхностную копию всех th.
В данном случае не уверен ыв необходимости
`[].slice.call`, так как `NodeList` имеет
свойство `length` и метод `forEach` */
const originalHeaderCells = [].slice.call(
    table.querySelectorAll('th')
);

const numColumns = originalHeaderCells.length;

// Перебираем все th
  originalHeaderCells.forEach(
    (headerCell, headerIndex) => {
      const width = parseInt(
        window.getComputedStyle(headerCell).width,
        10
      );

      /* Создаем список и новую таблицу
      из первой строки исходной */  
      const item = document.createElement('div');
      item.classList.add('draggable');
  
      const newTable = document.createElement('table');
  
      /* Строка заголовков th
      (семантически — потомок thead) */
      const th = headerCell.cloneNode(true);
      let newRow = document.createElement('tr');
      newRow.appendChild(th);
      newTable.appendChild(newRow);
  
      const cells = originalCells.filter((c, idx) => {
        return (idx - headerIndex) % numColumns === 0;
      });
  
      cells.forEach((cell) => {
        const newCell = cell.cloneNode(true);
        newRow = document.createElement('tr');
        newRow.appendChild(newCell);
        newTable.appendChild(newRow);
      });
  
      item.appendChild(newTable);
      list.appendChild(item);
    }
  );
};

originalHeaderCells.forEach((headerCell, headerIndex) => {
  // Получаем ширину оригинальной ячейки
  const width = parseInt(
    window.getComputedStyle(headerCell).width, 10
  );

  newTable.style.width = `${width}px`;

  cells.forEach((cell) => {
    const newCell = cell.cloneNode(true);
    newCell.style.width = `${width}px`;
    // ...
  });
});

// Перетаскиваемый элемент
let draggingEl;
// Индекс перетаскиваемой колонки
let draggingRowIndex;

const mouseDownHandler = (e) => {
  // Получаем индекс перетаскиваемой колонки
  draggingColumnIndex = [].slice
    .call(table.querySelectorAll('th'))
    .indexOf(e.target);
};

const mouseMoveHandler = (e) => {
  if (!isDraggingStarted) {
    cloneTable();

    // Получаем перетаскиваемый элемент
    draggingEl = [].slice
      .call(list.children)[draggingColumnIndex];
  }
};

const mouseUpHandler = () => {
  // Получаем индекс последней колонки
  const endColumnIndex = [].slice
    .call(list.children)
    .indexOf(draggingEl);
};

const mouseUpHandler = () => {
  // Двигаем перетаскиваемую колонку к `endColumnIndex`
  table.querySelectorAll('tr').forEach(function (row) {
    const cells = [].slice.call(
      row.querySelectorAll('th, td')
    );
    draggingColumnIndex > endColumnIndex
      ? cells[endColumnIndex].parentNode.insertBefore(
          cells[draggingColumnIndex],
          cells[endColumnIndex]
        )
      : cells[endColumnIndex].parentNode.insertBefore(
          cells[draggingColumnIndex],
          cells[endColumnIndex].nextSibling
        );
  });
};

// Находим все картинки…
const images = document.querySelectorAll('img');

// и перебираем
images.forEach((el) => {
  el.addEventListener('error', (e) => {
    e.target.src = '/path/to/404/image.png';
  });
});

// Устанавливаем слушатель события `paste`
document.addEventListener('paste', (e) => {

  // Получаем данные из буфера
  const clipboardItems = e.clipboardData.items;
  const items = [].slice
    .call(clipboardItems)
    .filter((item) => {
    
    // Фильтруем: только картинки
    return item.type.indexOf('image') !== -1;
  });

  if (items.length === 0) {
    return;
  }

  const item = items[0];

  // Получаем картинку, как объект `File`
  const blob = item.getAsFile();
});

const imageEle = document.getElementById('preview');
imageEle.src = URL.createObjectURL(blob);

// Создаем новую FormData
const formData = new FormData();
formData.append('image', blob, 'filename');

// Создает запрос. Лучше использовать `fetch` — см. ниже
const request = new XMLHttpRequest();
request.open('POST', '/path/to/back-end', true);

// Обработчики «успешно» и ошибки
request.onload = () => {
  if (request.status >= 200 && request.status < 400) {
    const res = request.responseText;
    // Do something with the response
    // ...
  }
};

// Отправляем
request.send(formData);

const fileEl = document.getElementById('input-file');
const previewEl = document.getElementById('preview');

fileEl.addEventListener('change', (e) => {
  // Получаем выбранный файл
  const file = e.target.files[0];

  // Создаем URL-объект выбранной картинки
  const url = URL.createObjectURL(file);

  // Передаем в «заглушку» URL-объект
  previewEl.src = url;
});

fileEl.addEventListener('change', (e) => {
  // Получаем выбранный файл
  const file = e.target.files[0];

  const reader = new FileReader();
  reader.addEventListener('load', () => {
    // Передаем в «заглушку» ссылку
    previewEl.src = reader.result;
  });

  reader.readAsDataURL(file);
});

const picture = document.getElementById('upload').files[0];
const previewEl = document.getElementById('preview');

/**
* Получение объекта Blob из data URL
*
* Если браузер не поддерживает метод `canvas.toBlob`,
* конвертируем data URL изображения, полученный
* из функции `resize`, в объект Blob.
*
* @param { string } url data URL изображения
*/
const dataUrlToBlob = (url) => {
  const arr = url.split(',');
  const mime = arr[0].match(/:(.*?);/)[1];
  const str = atob(arr[1]);
  let { length } = str;
  const uintArr = new Uint8Array(length);
  while (length--) {
    uintArr[length] = str.charCodeAt(length);
  }
  return new Blob([uintArr], { type: mime });
};

/**
* Масштабирование изображения
*
* @param { object } image изображение
* @param { number } ratio коэффициент сжатия: 0.01 - 0.99
*/
const resize = (image, ratio) => {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();

    // Читаем файл
    reader.readAsDataURL(image);

    // После загрузки изображения
    reader.addEventListener('load', (e) => {
      // Создаем объект типа `Image`
      const el = new Image();
      el.addEventListener('load', () => {
        // Создаем холст
        const canvas = document.createElement('canvas');

        /* Выводим на холсте заглушку масштабированного
        изображения */
        const context = canvas.getContext('2d');
        const w = el.width * ratio;
        const h = el.height * ratio;
        canvas.width = w;
        canvas.height = h;
        context.drawImage(el, 0, 0, w, h);

        // Получаем данные масштабированной картинки
        'toBlob' in canvas
          ? canvas.toBlob((blob) => {
              resolve(blob);
            })
          : resolve(dataUrlToBlob(canvas.toDataURL()));
      });

      // Задаем атрибут `src`
      el.src = e.target.result;
    });

    reader.addEventListener('error', () => {
      reject();
    });
  });
};

// Уменьшаем картинку на 50%
resize(picture, 0.5).then((blob) => {
  // Предпросмотр
  previewEl.src = URL.createObjectURL(blob);
});

const image = document.getElementById('image');

/* Создаем пустую картинку — это будет клон
пользовательской, который можно измерить */
const cloneImage = new Image();

// Измеряем размеры картинки на загрузке
cloneImage.addEventListener('load', (e) => {
  // Исходные размеры
  const width = e.target.naturalWidth;
  const height = e.target.naturalHeight;
  
  // Устанавливаем размеры в стиле
  image.style.width = `${width}px`;
  image.style.height = `${height}px`;
});

// Передаем `src` в клон
cloneImage.src = image.src;

cloneImage.addEventListener('load', (e) => {
  // ...
  const scale =
    image
      .parentNode
      .getBoundingClientRect()
      .width / width;
});

cloneImage.addEventListener('load', (e) => {
  //...
  image.style.transform = `scale(${scale}, ${scale})`;
});

const minScale = 0.1;
const maxScale = 2;
const step = (maxScale - minScale) / 100;

const knob = document.getElementById('knob');
const leftSide = knob.previousElementSibling;

cloneImage.addEventListener('load', (e) => {
  // ...
  leftSide.style.width = `${(scale - minScale) / step}%`;
});

const mouseMoveHandler = (e) => {
  // Вычисляем ширину левой части бегунка
  // ...
  const newLeftWidth = ((leftWidth + dx) * 100) / containerWidth;

  // Устанавливаем ширину левой части
  leftSide.style.width = `${newLeftWidth}%`;

  /* Вычисляем коэффициент масштабирования и
  изменяем стиль картинки */
  const scale = minScale + newLeftWidth * step;
  image.style.transform = `scale(${scale}, ${scale})`;
};