last update 2014-11-23

haPages bay

Разработки скриптописателя spmbt
установить скрипт HabrAjax в браузер 

HabrAjax

Сборный юзерскрипт для расширения функций Habrahabr


(Большинство функций отключаемы и настраиваемы.)
Подгрузка статей по Ajax-протоколу без перезагрузки ленты или списка найденных статей;
просмотр картинок с увеличением и перемещением;
● юзерстили ZenComment (модификация стилей сайта);
принудительный кат - все аннотации - не более определённой высоты;
авторост полей ввода, без появления скролла, пока поле ввода не более 80% высоты окна;
краткие даты - без текущего года или без предыдущего, если дата не старее 8 месяцев;
ввод тегов <source>, <font>, <blockquote> и ряда других кнопками над полем ввода;
кнопки Google+ для "шаринга" статей с доступом к статистике;
скрытие/перенос сайдбара - перемещение сайдбара вниз или его удаление (на любителя);
Гугл/Яндекс-поиск по сайту, как из поля поиска, так и из контекстного меню по выделению;
nbsp и Tab вводятся в поле ввода комбинациями клавиш (Ctrl-Space, Shift-Tab)
фильтр по авторам и хабам - сворачивает аннотации указанных авторов и хабов в ленте до заголовка:
цитирование в местную почту (ЛС) в 1 клик из выделения по контекстному меню;
расцветка и подсчёт комментаторов - сортирует по активности и размечает имена цветами;
выделение автора топика - уже есть на сайте; позволяет выбрать цвет выделения;
уплотнение длинных заголовков - чем длиннее, тем мельче шрифт;
автообновление версий скрипта - следит за обновлением и предлагает обновить юзерскрипт;

● ... и ещё ряд функций, общим числом более 60.

Последние обновления

140
139.2014.11.12 всплывающие даты в "Похожих публикациях"; удаление времени в датах "похожих";
138 namespaces; похожие посты; сайдбар компаний;
136 показ Geektimes в сайдбаре;

На каких сайтах работает

Geektimes (частичный официальный клон),
кеш Гугла (для просмотра недавно удалённых статей),
локальный сайт под именем h.ru или haru/ (для разработчиков или для просмотра копий страниц).

Использование кеша Гугла: если статью недавно (до 2 недель назад) удалили с сайта - идём на http://webcache.googleusercontent.com/search?q=cache:<URL_этой_статьи>, и видим копию статьи, которую успел сохранить Гугл. Впрочем, скрипт HabrAjax сам подсказывает ссылку на странице "отбоя". И не только статью, но и оформление её с юзерстилями ZenComment, если они включены, и с применением скриптов HabrAjax.
Локальный сайт: будет полезен для оффлайн-чтения страниц сайта (или для тестирования при разработке юзерскриптов/стилей). На своём компьютере для его просмотра нужно установить веб-сервер (например, Apache) и создать в нём виртуальный хост под именем h.ru или haru/, и в его образ класть сохранённые через браузер страницы (которые с папками *_files/ при них). Для этого домена будут работать ZenComment, HabrAjax и HabraDarkAge (на выбор). Одна особенность: если страницы сохраняются (Ctrl+S) через Firefox или Chrome, перед сохранением лучше отключить скрипты HabrAjax и стили ZenComment, чтобы не сохранились их последствия. Старая Опера сохраняет страницы "чисто" (без артефактов) всегда - с подключением стилей и скриптов или без подключения. И есть проблемы с показом веб-шрифтов - браузер их не сохраняет в копии страницы, а они имеются в главном меню. (Если поправить стили и вытащить шрифты из веба - показывать будут. TODO nodeJS-скрипт для "доводки" копий и выделения общих скриптов и стилей из сохранённых страниц или полный "сейвер" страниц в формат JSON или HTML.)
    Служебное использование некоторых сайтов:
● Заходит в кнопки Google+, чтобы прочитать в них количество пайков и вывести не на фоне кнопки, а в дизайне подписи.
● Проверяет обновления себя, просматривая (если настройка установлена) сайт хостинга (spmbt.github.io) не чаще раза в сутки.
● Экспериментально работал с habrastorage.org, чтобы обеспечить загрузку картинок простым перетаскиванием в поле ввода.

В каких браузерах?

● Firefox 3.6+ (недавно, во времена Firefox 22-24, проверялась работа в IceWeasel в Debian и в натуральном Fx 3.6 на Windows).
● Chrome 15+ или около того.
● Opera 11-12.
Не исключена работа с Safari/Mac+NinjaKit (не тестировалась), кроме сложных функций, которые потребуется настраивать. Во времена Safari 5 они не могли работать в NinjaKit, поэтому поддержка тогда была "почти полной".

Функции HabrAjax

Умеет (к настоящему моменту; всё отключаемо):
*) подгружать статьи в ленте статей без перезагрузки страницы, показывать и сворачивать статьи или комментарии к ним (без возможности оценивать и комментировать);
*) показывать масштабируемые копии картинок, уменьшенных по ширине, из потока статьи и комментариев;
*) показывать превью картинок, на которые присутствует только ссылка;
*) искать похожие картинки через Tineye, Google Search By Image и т.п.;
*) 3 комбинации скриптов и стилей: HabrAjax, HabrAjax+ZenComment, ZenComment;
*) подключать или отключать функции, сохраняя настройки в хранилище браузера;
*) искать по сайту через Гугл или Яндекс (в дополнение к внутреннему поиску сайта);
*) собирать багрепорты и идеи через виджет reformal.ru (рекомендуется);
*) смена адреса ссылки "посты" на "новые";
*) смена названия "посты" на дату загрузки страницы;
*) сворачивание аннотаций блогов компаний;
*) сворачивание аннотаций подкастов;
*) принудительное ограничение высоты аннотации с рядом функций компактного показа материала;
*) подкраска заголовков переводов, топиков-ссылок, новостей (по списку авторов-новостников);
*) просмотр персональных страниц, поиска, составления писем в фрейме половинной высоты;
*) выравнивание колонок в стиле justify;
*) удаление текущего года в дате или года у дат за последние 8 месяцев;
*) проставление дня недели для дат, старее вчерашних;
*) сокращение названий хабов и компаний до 13 символов;
*) скрывать неактивные стрелки голосования за статьи;
*) скрывать кнопки соцсетей, не нужные читателю;
*) подгружать кнопки Google+;
*) оптимизация вида заголовков статей в лентах;
*) замена флажков "перевод", "песочница", "обучение" и т.д. в лентах на уменьшенные копии на CSS;
*) подключать встроенные в скрипт стили ZenComment (или работать совместно с внешними);
*) переключение режимов показа комментариев: классика, компакт, дзен;
*) сокращать высоту вертикальных отступов до 3 пикселей;
*) скрывать аватары в комментариях;
*) отмечать комментарии авторов цветами в зависмости от их активности в топике (3 схемы расцветки);
*) показывать список, сколько авторов сколько комментариев написали к статье;
*) инфографика показателей комментариев (сумма оценок, длина, ссылки) в заголовке списка;
*) показывать превью картинок, найденных в ветках комментариев, через ссылки на инфографике;
*) навигация по корневым веткам комментариев "вперёд-назад" из каждого комментария;
*) помогает вводить теги <source> c языками (41) и другие через 2 тулбара над полем ввода;
*) подсказывает в блоке просмотра кода, подсветка какого языка выбрана для него;
*) вводит цвета для тегов <font> выбором из всплывающих тулбаров над полем ввода;
*) ввод символов &nbsp; и Tab комбинациями клавиш;
*) авторост полей ввода; ручное увеличение/уменьшение высоты поля ввода;
*) отключать некоторые разделы сайдбара (колонки справа) вплоть до полного его удаления;
*) располагать сайдбар внизу, под аннотациями и комментариями (полезно для узких окон).
*) отмечает в списке "Прямой эфир" ссылки на старые статьи (1-2 месяца и старше);
*) переносит комментарии из "Прямого эфира" на статьи, которые есть в списке "Лучших";
*) переносит "Похожие статьи" или "... вопросы" в ссылку на заголовок комментариев;
*) прикреплённый к низу окна футер;
*) форматирование ссылок статей над футером для вертикальной симметричности;
*) определяет приблизительные даты статей (до месяца) и вопросов по номеру в ссылке;
*) сокращает даты до "вчера" и отсутствия слова "сегодня";
*) сокращение длинных служебных слов интерфейса (меню, даты, комментарии);
*) сокращение слова "хабра" до "χ·";
*) подгрузка статьи и комментариев к 1 из 3 статей над футером;
*) ссылки на сайты копировщиков страниц (типа кеша Гугла) со страницы с удалённой статьёй;
*) переформатирование нотификации почты и подписки на статьи;
*) переформатирование сообщения об оставшихся своих голосах на меню на свои списки сообщений;
*) отмена кнопки "Наверх" (важно для неавторизованных);
*) интеграция со смежными скриптами (KarmaView, Percentage Rings);
*) отправка комментариев в Habraquotes.ru;
*) копирование имени автора в поле адресата ЛС 1 кликом;
*) копирование выделенной цитаты в поле содержания ЛС;
*) фильтр по авторам статей или ключевым словам - сворачивает аннотацию до заголовка;
*) фильтр (сворачивание аннотации до названия) по именам хабов, компаний;
*) поиск среди добавивших в избранное (при пустом поле поиска - читает заголовок статьи);
*) проверка обновления скрипта по расписанию, с показом анонса новых функций;
*) выделение новостей от авторов-новостников (жёлтый фон заголовка и флажок "Н");
*) контекстные кнопки для поиска по сайту Гуглом, Яндексом или сайтовым поиском через выделение текста;
*) распространение ссылки на Песочницу на все подменю;
*) подготовка письма или комментария автору или комментартору через выделение цитаты;
*) устранение дублирования ссылок в "Что обсуждают?" и в "Лучших";
Итого, 61-62 функции .

Настройки скрипта

Причины появления HabrAjax

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

История развития HabrAjax

    Так, свои скрипты я стремился согласовывать по стилю кода, а с некоторых пор ряд мелких функций начал объединять в один скрипт. Этим экономился объём кода для общих функций, и скрипт под названием HabrAjax (потому что ядром его была подгрузка статей в ленту по AJAX) появился на публике в конце 2011 года. За несколько месяцев до этого сформировались стили для сайта, существующие под названием ZenComment ("комментарии в стиле дзен"), в которых, кроме особого внимания к компактности комментариев, уделено внимание всем страницам и общему стилю сайта с уклоном к компактности и удалению пустот. Общая идея состоит в том, что при равных удобствах можно достичь меньшего количества скроллов мышью и видеть на экране болше информации. Скрипты и стили имеют своих предшественников.
    Часть скриптов оставалась как отдельные скрипты, т.е. желание объединить скрипты в один не было ввсеобъемлющим. Тем не менее, несколько скриптов имеют механизм общения через события (Custom Events), поэтому могут согласованно работать. Например, HabrAjax вызывает HabrPercentageRing для последующей обработки подгруженных блоков статей (для версий Firefox 3.6-5 сохраняется прямой вызов функций известных скриптов, т.к. там Custom Events не поддерживаются).

Дизайн HabrAjax

    Так как скрипты и стили выполняли лишь необходимые функции, некоторое время назад было сформулировано обращение к "сообществу критиков":
    "Скрипт выполняет много работы по представлению и обработке данных. Говорят, он не очень обращает внимание на дизайн. Если он пошатнул в вас веру во вселенское равновесие и чувство прекрасного, у Вас есть выход - включиться в проект и нарисовать макет того, как всё должно быть. Если вы уверены, что половине людей это понравится - у нас есть все основания воплотить ваш дизайн через скрипт и стили на страницах сайта."
    Наблюдались 2 попытки разработчиков сделать собственные стили. Отсутствие интереса показывает, что желания дорабатывать у сообщества очень мало. Это объясняется как специфичностью задачи, так и недостаточной дружественностью имеющегося кода. Тем не менее, код свои функции выполняет, а открытое его размещение позволило ему иметь более 50 длительных пользователей (не менее 6 просмотров в течение более 3 недель) при более 200 устанавливавших за 2-3 месяца в 2013 году. Около 90% из них использовали ZenComment.

Новинки прежних версий

(Здесь есть ссылки на детали, не описанные в основных возможностях.)
125 (5.11) фильтр по брендам смартфонов (настройка); аплоуд файлов до 10КБ на habrastorage.org перетаскиванием; поправка прибитого футера.
124 (9.09) Загрузка картинок перетаскиванием в Firefox (альфа), но пока не более 10К размер проходит по XHR;
123 (9.08) страница 404 перестала анимироваться, а 403 перестала быть пустой - стала похожей на 404-ю; баннер сверху (в ZenComment);
120 (6.06) ряд мелких, но нужных исправлений в последних версиях: ссылки в футере, корректная первая ссылка в меню для неавторизованных, если включена смена ссылки; поправка стилей комментариев для ZenComment;
114 группировка настроек скрипта, подсказки к настройкам. Добавлением примерно 40 КБ текстов в скрипт получили самодокументированные настройки, в которых также описаны некоторые постоянные функции скрипта и стилей.
113 (20.04) поддержка Iceweasel (Debian Linux) и Fx3.6; кнопка H3 для создания тега H3 при составлении статьи, вопроса; рамки таблиц в подгруженных статьях; редактировать свою статью по контекстной кнопке <Е>, начиная с выделеннной цитаты;
111 (7.04) отображение версии скрипта и его даты в настройках;
109 (1.04.2013) добавки номеров статьи и вопроса за 1-е число (для вычисления приблизительных дат); CSS ZenComment, баг с 2 стрелками в "Фрилансим";
108 проверка версии - счёт дат по новому формату версий; кнопки "Пожаловаться";
107 исправлено изменение вёрстки на сайте (.comment_body, кнопки ответов на комментарии);
106 (6 мар) переход на нумерацию версий "по сборкам"; реагирование на пустую 500-ю страницу сайта;
0.909 (3 мар) сворачивание новостей до заголовка; responsive в ZenComment при ширине 320-640px; комментирование в фрейме прямо из подгруженной статьи или вопроса (выделить цитату - <-> - прокомментировать - "Ответ");
0.907 (22 фев) - скрыты стрелки оцениваний для read-only; приведение почты в порядок после обновлений сайта; восстановлена отправка выделенных цитат в почту;
0.906 заполнение правой колонки в корпоративных блогах; положение номера лайков в G+; просмотр страниц /special/* без скрипта; восстановление Youtube-заставок в "принудительном кате";
0.905 заполнение пустых сайдбаров корпоративных блогов последней копией из обычной страницы;
0.902 (3 фев) - центрирование картинок в Опере, Хроме по align=center; отступы в списках работ; футер и номера страниц - от Zen; скрытие "подфутера" (4 ссылок); выделение новостей от авторов-новостников (жёлтая подложка заголовка и флажок "Н"); просмотр webcache.googleusercontent через скрипты и стили; комментирование через выделение цитаты (контекстная кнопка " <_>" - "Ответ"); письмо через выделение цитаты; Песочница - во всех подменю;
0.901 (21 янв.) - просмотр картинок без перезагрузки; инструкция по публикации комментариев на HabraQuotes; поправка показа своих оставшихся голосов в меню пользователя после отправки оценок; видимость метки "Решение" в QA при подгрузке;
0.90 (8 января 2013) - поправка стилей в футере; логотипы в футере (исправлены в стилях; подключение habraquotes.ru; обновления месяцев по номерам статей (обычная ручная процедура); поправки инфографики в комментариях (облегчение нажатия стрелок оценок); "изм." комментов в QA (в ответ на недавнее дополнение функций сайта); подгрузка 1 из 3 статей над футером (частично - может быть подгружена только одна из 3 статей);
...

Общие принципы работы скрипта и стилей

1. Идея раздельного пользования стилями и скриптом. Если есть желание проверить работу стаилей без их установки, включите настройку "встроенные стили ZenComment".
2. Идея компактности текстов. Много белого места разделяет блоки, но требует больше работы колесом мыши. Будем стремиться "Читать, а не скроллить!".
3. Отключения различных возможностей. Любые существенные возможности должны уметь отключаться, даже самые важные на взгляд разработчика.

Лицензия / License

    Код распространяется под лицензией GNU LGPL v.3, на русском, wiki; . Она призвана поддерживать распространение функций работы с интерфейсами, использованными в скрипте и формирование их в библиотеки. Основные возможности и следствия из лицензии:
* не ограничивает права по запуску или использованию ПО;
* дает права на:
.. импортирование (использование в своём продукте с любой лицензией),
.. изменение (необходимо внести явные указания о том, что и когда изменено),
.. тиражирование (с сохранением авторства, указаний на лицензию, с приложением полного исходного кода и всего необходимого для повторной сборки и запуска);
* запрещает менять текст лицензии
Подробнее все права и требования приведены в тексте лицензии.