Так как моей кармы не хватает, чтобы завести блог на сайте и делиться своими наработками в нем, а накручивать её не очень хочется, решил пока создать тему здесь на форуме.
Относительно недавно в Лунном блоге lokanaft выложил обновление своего плагина "Автоподгрузка", который, при просмотре пользователем сайта, автоматически подгружает страницы с помощью технологии ajax. Подробнее о плагине можно почитать здесь.
Я решил сделать похожую штуку, но для второй ветке Инстанта.
Назвать полноценным компонентом или плагином, в формулировке InstantCMS 2, мое решение нельзя, т.к. нет интеграции с системой которая выдает готовый ответ для аякса, например в формате JSON. Да и сам Instant толком не знает, что у него работает какой-то компонент, но в принципе это поправимо.
И так...
Плагин представляет собой javascript модуль, который подключаясь к странице, по мере ее прокрутки, посылает запрос серверу и подгружает необходимые данные. Как я писал выше, сервер не знает, что данные должны быть определенным образом оформлены и поэтому посылает их обычным html. Далее модуль разбирает полученную html-страницу и выводит ее на экран.
Кроме ajax, также использовалось HTML5 History API, чтобы при подгрузке страничек корректно отображать правильный адрес в адресной строке браузера. Зачем это надо можно почитать корявенький перевод здесь. А здесь, при необходимости, скачать последнюю версию скрипта, который позволяет легко работать с History API в разных браузерах, в том числе и старых HTML4.
Установка модуля достаточно проста. Для начала скачиваем архив со скриптами.
В архиве 3 файла:
— pageautoload.js — сам модуль с незамысловатым названием
— pageautoload.min.js — сжатая версия модуля
— jquery.history.js — скрипт для работы с History API
Кладем один из вариантов js-модуля pageautoload и файл jquery.history.js в папку со скриптами, по умолчанию она находится тут:
..\templates\default\js\
..\templates\default\content\albums_list.tpl.php ..\templates\default\content\default_list.tpl.php ..\templates\default\content\default_list_featured.tpl.php ..\templates\default\content\default_list_table.tpl.php ..\templates\default\content\default_list_tiles.tpl.php ..\templates\default\controllers\comments\list_index.tpl.php ..\templates\default\controllers\photos\album.tpl.php ..\templates\default\controllers\search\index.tpl.php ..\templates\default\controllers\users\profile_karma.tpl.php
<?php $this->addJS("templates/{$this->name}/js/jquery.history.js"); ?> <?php $this->addJS("templates/{$this->name}/js/pageautoload.min.js"); ?>
Это более правильный подход, но вместо кучи файлов шаблона можно попробовать подключить скрипты в файле
..\templates\default\main.tpl.php ниже после блока подключения других скриптов. В этом случае, плагин будет работать на всех страницах где используется пагинация. Но там, где нет разбиения на страницы и нет необходимости в работе скрипта, он всё равно будет грузиться. Этот способ хорош для тестовой проверки работоспособности, но не рекомендуется использовать его на рабочих сайтах, зачем постоянно грузить 26 килобайт ненужной информации?!
Немного о настройках...
Все, или почти все, изменяемые параметры скрипта вынесены в его начало, в разделе options. Рядом проставлены комментарии с описанием каждого параметра. Единственное на что хотел бы обратить внимание это раздел CONTAINERS, в котором перечислены классы и id блоков куда выводятся подгружаемые ajax данные. Например, структура ленты активности в стандартном шаблоне следующая:
<...> <article> <div id="breadcrumbs">...</div> <h1>Лента активности</h1> <div class="content_datasets">...</div> <div class="activity-list striped-list list-32">...</div> <div class="pagebar">...</div> </article> <...>
Чтобы добавить в плагин сторонний компонент или шаблон, ищем в нем тег-контейнер и дописываем в опциях pageautoload.js необходимый класс или идентификатор. Например для компонента "Фотобитвы", который был разработан r2 в процессе записи видео-туториалов, контент выводится внутри тега с классом ".photobattles-list". Его-то нам и необходимо добавить в раздел CONTAINERS. Далее подключаем плагин к компоненту (дописываем строки "<?php $this->addJS..." в файле шаблона ..\templates\default\controllers\photobattle\index.tpl.php) и проверяем результат его работы.
На этом всё.
Надеюсь получилось достаточно подробно и ясно описать базовый функционал плагина и принцип его работы. Всем большое спасибо и удачи в процессе постижения тайн второго Instant'а!!!
P.S. Буду рад благодарности в карме, чтобы создать блог и делиться в нем своими мыслями и наработками по расширению функционала всеми любимой iCMS.