Написать JavaScript для вставки элементов-контейнеров в сетку товаров

5 000 руб. за проект • наличный расчёт, электронные деньги
07 мая 2019, 16:31 • 5 откликов • 82 просмотра
Имеется HTML сетка товаров, необходимо по одному из 3х алгоритмов вставлять контейнеры со стикерами в эту сетку.
Основная задача сделать гибкий алгоритм который будет находить контейнер со строкой и вложенные элементы товаров. После вставки стикера на свою позицию, необходимо переносить-сдвигать остальные элементы товаров не нарушая сетку.
Есть три сущности в html сетке:

data-entity="container-1" - контейнер
data-entity="items-row" - строка
data-entity="item" - товар

Нужно чтобы алгоритм запоминал путь построение дерева до элемента в каждой строке товаров.
Указанные сущности постоянны и не измены, а вот дерево построение может быть разным.

Алгоритмы для реализации:
1й - Фиксированное чередование. Перебором массива стикеров, вставлять их поочередно и зацикленно на определенной позиции. Пример: Всего 3 стикера. Вставляться через каждую 5ю позицию в сетку. Необходимо учитывать кол-во элементов в сетке, если их количество меньше чем указанная позиция, то не вставлять.
2й - Позиционное. Перебором массива стикеров, вставлять их на определенной позиции в сетке, в соответствии с массивом входящих значений позиций {2,8,13}, Так же учитывая кол-во элементов в сетке.
3й - Фиксированная. Вставлять первый из массива стикер на фиксированную позицию в сетку.

Скрипт должен работать как Jquery плагин.
Должна быть реализация наблюдения изменения основного контейнера.(MutationObserver). Элементы могут добавляться или удаляться из него динамически (Ajax). После изменения DOM контейнера, необходимо заново позиционировать стикеры по сетке.
Входные параметры задаются массивом объектов.
На входную группу стикеров применяется только один из выбранных алгоритмов для вставки элементов в сетку.
Пример сетки во вложении.
Срок исполнения 1-2 недели.



Файлы