Highlighting blocks when changing content on a html page

Documentation

Quick start

For a quick start, create, copy this text to a file index.html and then open it in a browser

<!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>

This is the minimum working configuration, as a result, you will see how the content changes when you click on the button

Quick connection to your page, for auto-updating

Connect the library by adding this code to the page

<script src="https://updater-html.site/uploader-html.min.js"></script>

Add styles to the page

<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>

Add a control script that will update your page every 5 seconds and change the content in it

<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>

In the blocks in which the change of content is implied, add the attribute
```
data-updater_update="key"
```
where key is a unique key within the page (any word or number)

Installation

Add an auto-update module to the library
```
npm install updater-html
```
Import our module into the executing code
```
import UpdateBlock from 'updater-html';
```

Add styles to the page

<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>

Add a control script that will update your page every 5 seconds and change the content in it

<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>

In the blocks in which the change of content is implied, add the attribute
```
data-updater_update="key"
```
where key is a unique key within the page (any word or number)

Properties and events

UpdateBlock({
  oldDomDocument: null, //Required field: old DOM (it needs to be updated)
  newDomDocument: null, //Required field: new DOM (as a result, the page will look like here)
  debug: false, //Show-hide logs (enabling it can greatly slow down the work)
  timeCloseBlink: 500, //Time to highlight the changed areas
  changeStyle: true, //Should styles be taken into account when making a decision when comparing an old and a new object
  onlyUpdate: false, //Update only, no moving; adding, deleting remain
  onlyAddAndDelete: false, //Remove update, move, add, delete remain
  considerSpaces: false, //Leave line breaks in the elements, by default they are removed so that everything works better (as a rule, this does not affect the display of content)
  moduleStatus: { //In this case, there are settings that are unlikely to be useful to you, here you can disable individual library modules by setting the value 'working' or 'not working'
    move: 'working', //Moving (swapping elements so that they go in order)
    move_analytical: 'working', //Аналитическое перемещение
    update_attributes: 'working', //Analytical movement
    update_tag: 'working', //Updating element tags (p in div or div in h1, etc.)
  },
  querySelector: 'data-updater_update', //Selector for selecting blocks to update
  querySelectorHookBlink: 'data-updater_hook_blink', //Selector for selecting the block on which the update will be performed
  querySelectorHookAddAndDelete: 'data-updater_hook_add_and_delete', //Selector for adding and removing when it is necessary to know where to add and remove elements
  classColorFlag: { //Classes for highlighting modified areas
    update_content: 'uploader-update', //Updating content
    move: 'uploader-move', //Moving (moving elements so that they are arranged in order)
    move_analytical: 'uploader-move-analytical', //Smart moving
    update_attributes: 'uploader-update-attribute', //Updating attributes
    add: 'uploader-add', //Adding a new element
    delete: 'uploader-delete', //Removing an element
    update_tag: 'uploader-update-tag' //Updating element tags
  },
  event: {
    end_update: function () { //Occurs when redrawing blocks
    },
  }
});