Pull to refresh

Habrahabr Sausage Navigation

Reading time 2 min
Views 1.1K
Сегодня в рассылке DayliJS я открыл для себя одно прекрасное расширение — jQuery Sausage, которое позволяет добавлять на страницу очень удобную схему навигации — блоки, разделенные заголовками, масштабируются относительно высоты контента и отображаются как diff-аннотации в WebStorm или NetBeans (нечто подобное можно видеть слева поста).

image
Картинка кликабильна ведет на пример jQuery Sausage

Это очень удобный способ навигации по большим спискам статей и по параграфам статей. Эксперимента ради я решил воссоздать этот плагин отдельно от jQuery и jQuery UI и заточить его под хабр (оригинальный плагин тянет за собой несколько Кб лишних скриптов). Моё расширение сканирует блоки статей или блоки заголовков и отображает их в виде цепочки блоков. При наведении на блок отображается заголовок, по клику на блок страница скроллится на соответствующий заголовок страницы. К сожалению, не все посты хорошо отформатированы, поэтому такой способ навигации не всегда эффективен. Т.к. это эксперимент, то некоторые фичи jQuery Sausage пока урезаны.

Блок в неактивном режиме полупрозрачный — не отвлекает от чтения.

Цвета в режиме список статей


Зеленый — топик-ссылка.
Голубой — топик.
Черный — перевод.
Фиолетовый — топик в блоке компании.

Цвета в режиме топик


Красный — комментарии.
Серый — в зависимости от насыщенности отражает уровень заголовка.
Синяя рамка — видео, аудио или любая флэшка.
Желтая рамка — картинка.
Зеленая рамка — код (только хабратег <source>).

Общий вид в режиме «список статей»




Ссылки


Страница скрипта на userscripts
Исходник

Предложения и пожелания по улучшению способа навигации и критика приветствуются!

UPD
Добавил скругление блоков
При наведении на столбец он расширяется для удобства навигации
При наведении на блок отображаются всплывающие подсказки с заголовком блока
Исходный вид «сосиска из блоков» заменен на вид «список вертикальных закладок»
Исправил баги с ссылками в заголовке и с заголовком топика-ссылки
Исправил баг с z-index всплывающих заголовков в Опере
Исправлен баг «Не показывается блок комментариев» в Опере

UPD2
По совету altspam добавлена подсветка специальных блоков внутри параграфов: код, медиа плееры, картинки.
Tags:
Hubs:
+43
Comments 29
Comments Comments 29

Articles