Выделение блоков при изменении содержимого на html-странице

Документация

Быстрый старт

Для быстрого старта создайте, скопируйте этот текст в файл index.html, а затем откройте его в браузере

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .uploader-update {background-color: green !important;}
        .uploader-move {background-color: blue !important;}
        .uploader-move-analytical {background-color: sandybrown !important;}
        .uploader-add {background-color: yellow !important;}
        .uploader-delete {background-color: red !important;}
    </style>
</head>
<body>
<div data-updater_update="1"><p>-1</p><p>-1</p><p>-1</p></div>
<button id="elem">Go</button>
<script src="https://updater-html.site/uploader-html.min.js"></script>
<script>
  function getRandom() {
    return Math.floor(Math.random() * 2);
  }
  elem.onclick = function() {
    let htmlNew = '<div data-updater_update="1"><p>' + getRandom() + '</p><p>' + getRandom() + '</p><p>' + getRandom() + '</p></div>';
    let docNew = new DOMParser().parseFromString(htmlNew, "text/html");
    UpdateBlock({
      newDomDocument:docNew,
      oldDomDocument:document,
    });
  };
</script>
</body>
</html>

Это минимальная рабочая конфигурация, по итогу вы увидите как при нажатии на кнопку контент меняется

Быстрое подключение к своей странице, для автообновления

Подключите библиотеку, добавив этот код на страницу
```
<script src="https://updater-html.site/uploader-html.min.js"></script>
```

Добавьте на страницу стили

<style>
    .uploader-update {background-color: green !important;}
    .uploader-move {background-color: blue !important;}
    .uploader-move-analytical {background-color: sandybrown !important;}
    .uploader-add {background-color: yellow !important;}
    .uploader-delete {background-color: red !important;}
</style>

Добавьте управляющий скрипт, который будет раз в 5 секунд обновлять вашу страницу, и менять в ней контент

<script>
    function updateContentWebSocket() {
      fetch(document.URL)
        .then((response) => {
          return response.text();
        })
        .then((data) => {
          let docNew = new DOMParser().parseFromString(data, "text/html");
          UpdateBlock({
            newDomDocument:docNew,
            oldDomDocument:document,
          });
        });
    }
    setInterval(updateContentWebSocket, 50);
</script>

В блоках, в которых подразумевается смена контента добавьте атрибут
```
data-updater_update="key"
```
где key это уникальный в пределах страницы ключ (любое слово или число)

Установка

Добавьте в библиотеку модуль для автообновления
```
npm install updater-html
```
Импортируйте наш модуль в исполняющий код
```
import UpdateBlock from 'updater-html';
```

Добавьте на страницу стили

lt;style>
    .uploader-update {background-color: green !important;}
    .uploader-move {background-color: blue !important;}
    .uploader-move-analytical {background-color: sandybrown !important;}
    .uploader-add {background-color: yellow !important;}
    .uploader-delete {background-color: red !important;}
</style>

Добавьте управляющий скрипт, который будет раз в 5 секунд обновлять вашу страницу, и менять в ней контент

<script>
    function updateContentWebSocket() {
      fetch(document.URL)
        .then((response) => {
          return response.text();
        })
        .then((data) => {
          let docNew = new DOMParser().parseFromString(data, "text/html");
          UpdateBlock({
            newDomDocument:docNew,
            oldDomDocument:document,
          });
        });
    }
    setInterval(updateContentWebSocket, 50);
</script>

В блоках, в которых подразумевается смена контента добавьте атрибут
```
data-updater_update="key"
```
где key это уникальный в пределах страницы ключ (любое слово или число)

Свойства и события

UpdateBlock({
  oldDomDocument: null, //Обязательное поле: старый DOM (его нужно обновить)
  newDomDocument: null, //Обязательное поле: новый DOM (по итогу страница будет выглядеть как тут)
  debug: false, //Показывать-скрывать логи (включение может сильно замедлить работу)
  timeCloseBlink: 500, //Время подсвечивания измененных областей
  changeStyle: true, //Учитывать ли стили, принимая решение при сравнении старого и нового объекта
  onlyUpdate: false, //Только обновление, без перемещения; добавление, удаление остаются
  onlyAddAndDelete: false, //Убрать обновление, перемещение, добавление, удаление остаются
  considerSpaces: false, //Оставлять переносы строк в элементах, по умолчанию они удаляются, чтобы все лучше работало (как правило это не влияет на отображение контента)
  moduleStatus: { //В этом объект настройки, которые врядли вам пригодятся, тут можно отключить отдельные модули библиотеки выставив значение 'working' или 'not working'
    move: 'working', //Перемещение (замена элементов местами, чтобы они шли по порядку)
    move_analytical: 'working', //Аналитическое перемещение
    update_attributes: 'working', //Обновление атрибутов
    update_tag: 'working', //Обновление тегов элементов (p в div или div в h1 и т.д.)
  },
  querySelector: 'data-updater_update', //Селектор для выбора блоков для обновления
  querySelectorHookBlink: 'data-updater_hook_blink', //Селектор для выбора блока на котором будет обновление
  querySelectorHookAddAndDelete: 'data-updater_hook_add_and_delete', //Селектор для добавления и удаления, когда необходимо знать, где добавлять и удалять элементы
  classColorFlag: { //Классы для выделения измененных областей
    update_content: 'uploader-update', //Обновление контента
    move: 'uploader-move', //Перемещение (перемещение элементов так, чтобы они располагались по порядку)
    move_analytical: 'uploader-move-analytical', //Умное перемещение
    update_attributes: 'uploader-update-attribute', //Обновление атрибутов
    add: 'uploader-add', //Добавление нового элемента
    delete: 'uploader-delete', //Удаление элемента
    update_tag: 'uploader-update-tag' //Обновление тегов элементов
  },
  event: {
    end_update: function () { //Возникает при перерисовке блоков
    },
  }
});