Офтоп
BlockRunet @Shara

Дилижанс: Навигация по непрочитанным комментариям

Хочешь, чтобы было хорошо — сделай себе хорошо сам. Делюсь маленьким скриптом, который добавляет кнопки для переключения между непрочитанными комментариями и позволяет переключаться между ними при помощи колеса мыши.

Сабж

Устанавливается скрипт при помощи плагина Greasemonkey/Tampermonkey или чего-то иного, что умеет делать инъекции пользовательских скриптов в странички.

В объекте options можно сделать настройки:

animate: true/false
Включение/выключение плавной прокрутки между комментами

animationSpeed: число в диапазоне 0 — +∞
Скорость плавной прокрутки между комментами в миллисекундах

circular: true/false
Включить/выключить навигацию по кругу

scrollOver: true/false
Включить/выключить переключение между комментами вращением колеса мыши, если курсор находится над кнопками навигации

position: число в диапазоне 0 — 100
В каком месте экрана должен находиться текущий просматриваемый комментарий.

Отсчёт координат ведётся от нижней границы экрана по двум причинам:
1. Видно сразу ветку комментов к которой принадлежит комментарий
~~~ 2. Кое-кто (не будем показывать пальцами) прихуярил к верхней границе экрана меню навигации поверх контента , благодаря чему навигация по якорям оказывается бесполезна чуть менее чем полностью.

UPD. Выяснилось, что теперь якори работают нормально.

Тестировал только в Firefox. Для комментов, подгруженных динамически не работает, так как кто-то (снова не будем показывать пальцами) сломал подсветку этих комментариев. Как починит - залью апдейт.

{ "author_name": "BlockRunet @Shara", "author_type": "self", "tags": [], "comments": 29, "likes": 38, "favorites": 0, "is_advertisement": false, "subsite_label": "flood", "id": 24950, "is_wide": true, "is_ugc": true, "date": "Fri, 18 Mar 2016 16:55:30 +0300", "is_special": false }
0
29 комментариев
Популярные
По порядку
Написать комментарий...
Пенсионный Даниль

Комментарий удален по просьбе пользователя

6
Сознательный Артем

А как раньше?

0
Американский бинокль

Могу показать как сейчас

6
Пенсионный Даниль

Комментарий удален по просьбе пользователя

7
Пенсионный Даниль

Комментарий удален по просьбе пользователя

0
Вертикальный якорь

Парни, вы же все одно коммунити. Я понимаю, что каждому хочется выпустить свой скрипт, но объединитесь и выпускайте релизы раз в неделю, презентуя их здесь. У меня сейчас стоит плагин от Поцелуева, который позволяет переходить к ответу на коммент, этот тоже хочу поставить. Было бы круто, если бы был один общий плагин с включающимися / отключающимися функциями.

Большое спасибо за все что вы делаете!

3
Американский бинокль

Модульность рулит, зачем запихивать всё в один комбайн, если вместо функций в настройках можно подключать скрипты в настройках?

1
Вертикальный якорь

Хрен знает... Видимо, у меня тяга к комбайнам и агрегаторам всего и вся :)

0
Бывший Никита

у меня тяга к комбайнам

Белорус хули.

29
Отечественный глобус

Спасибо!

0
Тупой магнит

Комментарий удален по просьбе пользователя

0
Американский бинокль

.anchor

Если уж делать костыли, то с :target

Кстати, не понял какой магией, но сейчас якори на комментарии работают правильно, с отступом для плашки

0
Тупой магнит

Комментарий удален по просьбе пользователя

0
Американский бинокль

Кстати, на правах оффтопа в оффтопе - есть идеи как без использования JS реализовать удерживание скролла на якоре во время подгрузки изображений? А то бывает откроешь страничку на определённом коментарии, а потом гоняешься за ним пока картинки раскрываются.

С JS легко - отслеживаем изменение размера документа и переносим скролл обратно под якорь пока пользователь самостоятельно не прокрутит страничку. А вот без?

2
Тупой магнит

Комментарий удален по просьбе пользователя

1
Тупой магнит

Комментарий удален по просьбе пользователя

0
Американский бинокль

У CSS действительно нет возможности отслеживать события такого уровня, а тем более выполнять какие-то функции вроде перехода.

Когда деревья были большими, а сайты не были резиновыми, можно было просто передать в тег img размеры изображения, чтобы зарезервировать под него место и избежать пересчёта страницы во время загрузки. Но когда высота изображения высчитывается на основании его ширины ничего подобного провернуть мы не можем, даже зная aspect ratio изображения. А может мы всётаки можем зарезезервировать место зная размеры изображения?

Вообще есть один вариант.. Можно указать в стилях для контейнера padding равный отношению высоты к ширине. Например для изображения 4:3 он будет равен 3/4*100 = 75%.

Набросал демку:
https://jsfiddle.net/7ptdtsy6/2/embedded/result,html,css,js/

Не самый красивый вариант, выглядит как хак. Есть идеи лучше?

1
Авиационный фонарь

На сайте уже какое-то время так и работает. По-моему, самый изящный способ в рамках css

1
Американский бинокль

Оп, внезапно!

0
Американский бинокль

Стоп, не везде - в теле поста ничего подобного нет.

0
Авиационный фонарь

А изображения в статье разве заставляют комментарии прыгать? Не вижу проблем даже с Good 2G и полусотней картинок. Единственная проблема на данный момент — загрузка твиттерских фреймов, если они есть на странице

0
Американский бинокль

Не уверен, но хром похоже научился подруливать. По крайней мере даже с отключенным js скролл ползёт самостоятельно пока не покрутишь страницу — тогда с якоря срывается. С Firefox непонятки, нужно щупать, но в нём троттлинга нет, а без него цупать неудобно.

0
Американский бинокль

Парсер, блжд!

0
Американский бинокль

Если скорость интернета больше мегабита - нужно включить троттлинг.

0
Тупой магнит

Комментарий удален по просьбе пользователя

0
Американский бинокль

C :before вариант хуже, его нельзя задать в инлайновом стиле. Если у нас изображения строго определённых пропорций - можно завести 3-4 класса, а если какие-попало, загруженные пользователем, то смысла заводить файл стилей для них нет, лучше выдавать пропорциональный паддинг сразу по месту.

1
Специальный волк

Этого мало? Это же каскадные таблицы стилей, а не язык программирования + DOM. В CSS и так уже всякого напихали, что действительно скоро на них именно что программировать будут.

Я тоже такого решения на голых стилях не вижу, если только корявые весьма (но формально выполняющие "как без использования JS реализовать удерживание скролла на якоре во время подгрузки изображений").

0
Тупой магнит

Комментарий удален по просьбе пользователя

0
Американский бинокль

Когда я писал себе скрипт, при переходе по якорю панель закрывала часть коммента. Это было с месяц назад. Теперь там такая затычка

<a name="comment1235306"></a>

Со стилем

a[name*="comment"] {

display: block;
width: 100%;
height: 0;
position: absolute;
top: 0;
margin-top: -50px;
}

Так что теперь всё ок, можно вычеркнуть.

А вот подсветка не появляется или сразу пропадает после подгрузки новых комментариев. Надо посмотреть в чём дело.

1
Читать все 29 комментариев
null