Волнения в виде негодований

Каты в эгее

22 января 2012, 5:44

Нужны каты?


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

Сказал — сделал


Я как-то заикнулся, что решение задачи очень простое. Немного js, немного форматирования и проблема решена. Итак, решение под катом (давно хотели увидеть на эгее эту фразу?)

Скачать

Ссылки на версии будут построены по тому же принципу, по которому они у jQuery. По этой ссылке всегда будет доступна последняя версия: http://gurylev.com/js/cat/cat.js Она же, минимизированная: http://gurylev.com/js/cat/cat.min.js По этой ссылке первая, нынешняя, версия: http://gurylev.com/js/cat/cat-0.1.js Она же, минимизированная: http://gurylev.com/js/cat/cat-0.1.min.js

Установка

Итак, начнём с html. Для начала включите форматтер «Нисден». Он проще, удобнее и т. д. и т. п. После мы выделим сам кат. В тексте обособляем скрытый текст дивом вот таким образом:
<div id="cat" class="cat">тут текст, который под катом</div>
<p id="link_cat" class="link_cat">далее</p>
В первой статье можно указать link_cat и cat, но в последующих нужно приписывать число. Например link_cat1 и cat1. В каждой новой статье нужно увеличивать число на единицу. Иначе ссылка будет открывать не то. Далее установим сам скрипт. Скрипт выполняется по загрузке DOM-дерева страницы, так что можно поставить его в конец, перед закрывающим тегом <body>. Я сделал это с помощью дополнительного блока. В папке /user/extras создал файл footer-post.tmpl.php, а в нём прописал вызов скрипта следующим образом:
<script type="text/javascript" src="user/js/cat.js"></script>
Дальше в css темы или прямо после скрипта в файле footer-post.tmpl.php задаём стили для ката и ссылки ката:
<style>
div.cat {display: none}
p.link_cat {тут все свойства, которые указаны для обычных ссылок}
</style>
На этом установка закончена =)

Тонкости

Почему «показать дальше» я сделал тегом <p>, а не тегом <a>? По спецификации ссылка должна вести на другую страницу, а при исполнении этого скрипта другой страницы не открывается. Потому что href — обязательный атрибут тега ссылки, а в нём указать нечего. Решётку (#) я считаю ужасом. И подобные методы типа исполнения ява скрипта в ссылке тоже. Иначе говоря, я заменил ссылку любым строчным тегом, а вы делайте уж как хотите. Ещё в эгее есть какой-то более правильный способ вызова js из этой папки (макросы), но, если быть честным, я его не понял. Буду благодарен, если в комментариях или в своей статье кто-нибудь объяснит.

Настройка

Теперь разберём сам скрипт. Как я писал выше, выполняется он после загрузки DOM-дерева. Далее идёт сама функция. В ней главное — переключатель toggle. В первом состоянии: щёлкаешь по ссылке, текст ссылки заменяется на «скрыть» и раскрывается скрытая часть текста. Во втором состоянии: щёлкаешь по ссылке, заменяется текст ссылки на «далее» и прячется открытая часть текста. Вот эти состояния и переключаются. На странице может быть до ста записей, поэтому дальше идёт повторение этой операции до 100 раз или тех пор, пока он сможет находить на странице catN и link_catN. Если у вас в настройках эгеи указано меньше статей на страницу, настоятельно рекомендую уменьшить число 101 на ваше число плюс 1 (N+1). Это уменьшит нагрузку на браузер посетителя.

Планы на развитие

Лениво каждый раз вычислять, какой по счёту номер ката, поэтому в следующей версии скрипта я планирую сделать автоматическое вычисление ката. Но в этой версии только так. Планируется, чтобы ссылка на скрытие была слева от всей статьи каким-то блоком. Чтобы можно было скрыть открытую статью, не прокручивая скролл до её окончания При открытии комментариев статьи, она будет развёрнута с возможностью свернуть. На этом, вроде бы, всё. Обсуждайте, пожалуйста, в комментариях этот скрипт, пишите пожелания, критикуйте. Буду рад.
Популярное