mixoil / js-7

Ох уж эти комментарии

JS-7

Кешины посты с котиками, которые вы помогли ему сделать, стали обретать космическую популярность и набирать кучу лайков и комментариев. Все это случилось, потому что появился адаптив для мобильных устройств, а как мы знаем, очень много пользователей открывают веб-приложения с мобильных устройств. С отображением лайков проблем не возникает, однако, с отображением комментариев возникли сложности. Во первых, из-за того, что комментариев очень много, загрузка и отрисовка страницы стала занимать очень много времени, некоторые пользователи не хотят читать все комментарии, но, все равно, вынуждены ждать их загрузки. Во вторых, страница начала подвисать при скролле из-за большого количества node в DOM.

В связи с этими проблемами Кеша в очередной раз обращается к вам за помощью, он знает, что вы изучили взаимодействие с DOM через JS и теперь сможете оптимизировать его страницу, и решить возникшие проблемы.

Подготовка:

• Для выполнения данной задачи разрешается брать предыдущее задание HTML-CSS-6. Если стили, до сих пор, применяются к сложным, составным селекторам, самое время переделать их на классы, с ними будет легче работать.

• В файле index.js появился объект поста, с которым вам предстоит плотно поработать. В полях этого объекта содержится информация о самом посте, а также - массив комментариев.

• Обратите внимание, в массиве комментариев встречаются комментарии, которые содержат вложенные комментарии.

• Для того чтобы лучше разобраться, что за объект поста перед вами, можете посмотреть на него в браузере, открыв index.html и введя в консоль имя объекта поста (post)

Задача:

1. Всю информацию для странички нужно брать из объекта post (включая картинки), пора избавиться от статических данных. Начать следует с информации о самом посте. Количество лайков и комментариев также должно динамически считаться

   (!ВАЖНО: дочерние комментарии считаются за отдельные комментарии и учитываются в общем количестве комментариев. Даты должны выводиться в человекочитаемом, привычном формате).

2. Изначально, при открытии страницы, количество комментариев должно быть не более 10. При прокручивании комментариев вниз они должны постепенно добавляться на изначальное количество комментариев.

   (Если изначально на странице 5 комментариев, то каждый раз, при достижении последнего из N * 5 комментариев, должны добавляться еще 5 комментариев).

3. Комментарий, который имеет подкомментарии, должен быть выделен отдельным цветом. А при нажатии на него должны появляться вложенные в него комментарии. При повторном нажатии - они должны скрываться.

4. ⭐(+2 балла): Если количество динамически подгруженных комментариев становится больше 50, то комментарии из начала должны удаляться, то есть на странице всегда должно быть не больше 50 комментариев. А при прокручивание вверх, к началу комментариев, они должны появляться сверху и исчезать снизу. Чтобы получилась, своеобразная, двухсторонняя подгрузка.