Сучасна диджитал-освіта для дітей — безоплатне заняття в GoITeens ×
Mazda CX 30
×

Ідея для зменшення вкладеності коментарів та її умовна реалізація

Підписуйтеся на Telegram-канал «DOU #tech», щоб не пропустити нові технічні статті

Сама ідея

Щоб зменшити швидкість росту відступів у деревоподібних коментарях, діалог між двома людьми можна залишати на одному рівні, допоки до них не долучиться хтось третій.

Але як тільки у діалог долучається хтось третій, рівень коментарів збільшується з цього моменту. Далі може встановитись діалог вже між третім та першим чи третім і другим користувачем, в такому разі також рівень залишиться незмінним, до поки триватиме діалог між двома. І так далі.

Наприклад:

перший
  другий
  перший
  другий
  перший
  другий
  перший
  другий
  перший
  другий
  перший
  другий
    третій
    другий
    третій
    другий

і т.д.

Коли хтось хоче написати коментар до середніх коментарів такої гілки, то усі нижні коментарі автоматично зміщуються на один рівень.

Якщо в попередньому прикладі ось так вклиниться четвертий (показано покищо без зміщення, яке йтиме далі):

перший
  другий
  перший
  другий
    четвертий <-- вклинився
  перший
  другий
  перший
  другий
  перший
  другий
  перший
  другий
    третій
    другий
    третій
    другий

то зміщення буде наступне:

перший
  другий
  перший
  другий
    четвертий
    перший
      другий
      перший
      другий
      перший
      другий
      перший
      другий
        третій
        другий
        третій
        другий

Порівняння останнього прикладу зі звичними деревоподібними коментарями:

перший
  другий
    перший
      другий
        четвертий
        перший
          другий
            перший
              другий
                перший
                  другий
                    перший
                      другий
                        третій
                          другий
                            третій
                              другий

Може десь таке вже є, ніхто не бачив?

Практична реалізація

А тепер глянемо що відбувається по-моментам, та прикинемо який код для цього потрібен. Я написав умовний код на JavaScript. By default compactMode = true

Момент 1:

перший
  другий
  перший
  другий
  перший
  другий
  перший
  другий
  перший
  другий
  перший
  другий
    третій
    другий
    третій
    другий

Для кожного коментаря працює приблизно наступна логіка:


if(currentComment.compactMode && currentComment.parent)
{
  if
  (
    currentComment.parent.level == 1
    ||
    (
      currentComment.parent.parent
      && currentComment.parent.parent.userId != currentComment.userId
    )
  )
  {
    currentComment.doOffset();
    currentComment.compactMode = false;
  }
}

Момент 2:

перший
  другий
  перший
  другий
    четвертий <-- вклинився
  перший
  другий
  перший
  другий
  перший
  другий
  перший
  другий
    третій
    другий
    третій
    другий

Момент 3:

перший
  другий
  перший
  другий
    четвертий
--> перший <-- зміщення усього нижнього дерева на один рівень
--> другий
--> перший
--> другий
--> перший
--> другий
--> перший
--> другий
  --> третій
  --> другий
  --> третій
  --> другий

Додалась нова умова, і тепер для кожного коментаря працює приблизно наступна логіка:


if(currentComment.compactMode && currentComment.parent)
{
  if
  (
    currentComment.parent.level == 1
    || currentComment.parent.children.length > 1 // <-- Тут спрацьовує ця умова.
    ||
    (
      currentComment.parent.parent
      && currentComment.parent.parent.userId != currentComment.userId
    )
  )
  {
    currentComment.doOffset();
    currentComment.compactMode = false;
  }
}

Момент 4:

перший
  другий
  перший
  другий
    четвертий
    перший
  --> другий <-- ще одне зміщення усього нижнього дерева на один рівень
  --> перший
  --> другий
  --> перший
  --> другий
  --> перший
  --> другий
    --> третій
    --> другий
    --> третій
    --> другий

Додалась ще одна умова, і тепер для кожного коментаря працює приблизно наступна логіка:


if(currentComment.compactMode && currentComment.parent)
{
  if
  (
    currentComment.parent.level == 1
    || currentComment.parent.children.length > 1
    ||
    (
      currentComment.parent.parent
      &&
      (
        currentComment.parent.parent.userId != currentComment.userId
        || currentComment.parent.parent.children.length > 1 // <-- Тут спрацьовує ця умова.
      )
    )
  )
  {
    currentComment.doOffset();
    currentComment.compactMode = false;
  }
}

Тобто останній приклад коду описує усю необхідну логіку для функціонування таких коментарів.

👍ПодобаєтьсяСподобалось0
До обраногоВ обраному0
LinkedIn
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter
  • Дайте API, чтобы православный клиент был
  • Уберите это тупое сворачивание комментов в 2К топиках при наличии новых комментов. Я нажимаю на зеленый счетчик комментов, меня выбрасывает к оторванному от ветки комменту, я нажимаю «развернуть ветку» и теперь должен искать, куда же тот коммент улетел

Оформив свою ідею у формі утиліти, а не Angular-проекта, як спочатку думав. Мабуть купа помилок в моїй англійській, підкажіть, пліз, якщо шо.

Зробив демо сторінку, де використовується утиліта less-offset-comments. Писав на Angular 5, не очікував що так малий розмір в результаті вийде — всього 85 КБ. Як для SPA це досить мало.

На даний момент, при видаленні інколи не очікується що видалиться усе нижнє дерево, коли видаляють батьківський коментар. Мабуть пізніше щось придумаю, щоб було більш зрозуміло...

ну і кодстайл, це навіть не с++ github.com/...​ter/src/index.ts#L87-L108

можливо, якщо коментарі оформлені у вигляді дерева, краще було б перебудувати дерево аби мати менше вкладеність

Ви зможете в даному випадку більш читабельно написати? Думаю це головніше.

Ні, для мене це не читабельніше. До речі, вийшла beta.4 =), я зовсім трохи змінив API, ну і дану частину також.

Не знаю як можна вважати цей мій фрагмент нечитабельним. Кожна умова в своєму рядку, чітко видно зв’язок між умовами, чітко видно де відкривається і де закривається дужка...

справа смаку, але більшість на жс пише так як в гісті, що я скинув

Стосовно вашого коментаря:

// TODO: props mutation is bad

Треба подумати. Взагалі то я не бачу де можуть бути проблеми в даному випадку, але схоже що можна легко змінити API щоб checkComment() повертав true або false.

Вот, сделал ещё, это пожалуй всё от меня (наигрался, да и нечего вроде улучшать): userstyles.org/...​omment-tree-for-dou-ua-v2

Для установки нужно расширение stylish (есть для Chrome и Firefox). По умолчанию линии сплошные жирненькие в оттенках зеленого. Но перед установкой стиля можно прокрутить страничку по ссылке выше вниз и там найти настройки c2n.me/3PDOVkU Чтобы в будущем их поменять — нужно удалить из Stylish стиль и установить его с этой страницы заново.

Проверено в последнем хроме и ФФ

Вот так выглядит на максимальной глубине c2n.me/3PDPzKo

-

кайф!
а можеш викласти сам css на github як гіст чи репо? я б може форкнув і адаптував для сафарі

upd:
дуже подобається) imgur.com/a/m3AUE

Там есть на странице установки кнопка «show css» (показывает код с плейсхолдерами для настроек) c2n.me/3PJf0Ow и в самом stylish через редактирование можно посмотреть c2n.me/3PJfhFR

Ещё вот такая идея появилась: userstyles.org/...​omment-tree-for-dou-ua-v3 В этом варианте отступы такие же (по 2em), Но аватарки для самого первого уровня уменьшены до размера остальных и сдвинуты.

О, боже. Цікаво, Evgeniya Omelchenko усіх так завалює пропонуванням роботи, чи тільки мені випало таке щастя? Причому не відслідковує чи вона вже писала даному кандидату, і скільки разів... а тим більше не відслідковує яку відповідь їй присилають...

do you like tall blonde girls and feel a bit of a Viking sometimes?

Then, maybe you should consider awesome Front-end developer job we’ve got with relocation to Sweden?!

Таки непонятно, нравятся ли тебе высокие блондинки)

Оце придумую назву цим коментарям, не знаю як правильніше сказати англійською «less-offset-comments» чи offset-less-comments... чи може якось ще. Мабуть зроблю їх на Angular 5 і викладу на github.

аби двічі не вставати, може є якийсь плагін, який ховає коментарі від заданих юзерів?

можна в закладки додати: $(’[href="dou.ua/users/zhenya-podolskij"]’).parent().parent().parent().hide() (адреса має бути абсолютною, парсер їсть https)

Я когда-то писал для Хрома: chrome.google.com/...​dgmepoeobmjlhifebigahmnbn
хайдятся статьи и комменты

Отступы между уровнями 2em. Это немного (в пару раз меньше чем было), а меньше будет совсем некрасиво. А аватарки мне нравятся, я некоторых по аватаркам узнаю :)

Есть предложение проще — делать сдвиг короче, но отмечать вложенность вертикальной полосой справа. Так работает цитирование в email-клиентах, Thunderbird в частности. Получается весьма компактно. Рискну предположить, что это сводится к одной директиве CSS.

но отмечать вложенность вертикальной полосой справа. Так работает цитирование в email-клиентах, Thunderbird в частности.

Там смужки ліворуч, але суть того, про що ви говорите, зрозуміла. Це можна поєднувати з моєю ідеєю.

Рискну предположить, что это сводится к одной директиве CSS.

С десяток, потому что на каждый уровень свой класс (с level-0 по level-11)

Якщо коментарі true-nested, а не так як на ДОУ, то можна справді обійтись одним рядком чи класом.

Зачем, если можно просто вложить блоки друг в друга и не напрягать браузер.

Ну это не ко мне вопрос :) Видимо была причина какая-то.

Этот прикольнее, сразу видно левел вложенности

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

Хотя с цветными полосками конечно прикольно, IMHO стоит просто чередовать два цвета.

Да там проблема с длиной линий в том как раз, что блоки не вложены. Каждый комментарий в своём блоке, и отличаются только классом. Это ограничивает вложенность (классов только 11, а в очень длинных ветках после 11 уровня отступов нет новых) и фокусы с css. Есть у меня на уме одна хитрость, может попробую как будет время.

Или вот так например c2n.me/3PBB9B0

Есть идея, сделай плагин под хром/мозиллу, который будет делать это. Сможешь?

Підписатись на коментарі