Приветствую всех, уважаемое сообщество InstantCMS!
Относительно недавно в Лунном блоге 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 в папку со скриптами, по умолчанию она находится тут:И самое тяжелое — подключаем модуль в необходимых местах шаблона, там, где мы хотим, чтобы страницы, при пагинации, загружались автоматически через ajax. Для этого в файлах:
в самом начале прописываем строки:
(в данном случае, я использую сжатую версию pageautoload)
Это более правильный подход, но вместо кучи файлов шаблона можно попробовать подключить скрипты в файле
..\templates\default\main.tpl.php ниже после блока подключения других скриптов. В этом случае, плагин будет работать на всех страницах где используется пагинация. Но там, где нет разбиения на страницы и нет необходимости в работе скрипта, он всё равно будет грузиться. Этот способ хорош для тестовой проверки работоспособности, но не рекомендуется использовать его на рабочих сайтах, зачем постоянно грузить 26 килобайт ненужной информации?!
Интересующий нас контент, который должен выводиться через ajax, находится внутри тега div с классом ".activity-list". Именно его (класс) мы добавляем в раздел CONTAINERS, чтобы плагин подключился к выводу страниц ленты активности. Для комментариев — тег с id "#comments_list", для показа списка пользователей — "#users_profiles_list" и т.д. По умолчанию в плагине уже присутствуют все компоненты стандартного шаблона где используется пагинация, собственно файлы шаблонов перечислены выше.
Чтобы добавить в плагин сторонний компонент или шаблон, ищем в нем тег-контейнер и дописываем в опциях pageautoload.js необходимый класс или идентификатор. Например для компонента "Фотобитвы", который был разработан r2 в процессе записи видео-туториалов, контент выводится внутри тега с классом ".photobattles-list". Его-то нам и необходимо добавить в раздел CONTAINERS. Далее подключаем плагин к компоненту (дописываем строки "<?php $this->addJS..." в файле шаблона ..\templates\default\controllers\photobattle\index.tpl.php) и проверяем результат его работы.
UPD:
В модуле исправлены недочеты отображения на стене пользователя, удаления заголовка страницы при прокрутке, а также адаптирован для версии InstantCMS 2.1.2
Скачать: pageautoload.zip
UPD2:
Внимание! Модуль автоподгрузки не поддерживается! Настоятельно рекомендую отказаться от его применения на ваших сайтах.
Относительно недавно в Лунном блоге 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'а!!!UPD:
В модуле исправлены недочеты отображения на стене пользователя, удаления заголовка страницы при прокрутке, а также адаптирован для версии InstantCMS 2.1.2
Скачать: pageautoload.zip
UPD2:
Внимание! Модуль автоподгрузки не поддерживается! Настоятельно рекомендую отказаться от его применения на ваших сайтах.
Т.е. должен работать везде где есть пагинация, но если что то не получается пишите, будем смотреть и разбираться!
Нашел небольшую багу - при скроле на 2ую и все последующие страницы пропадает тайтл(<Title></Title>).
P.S. title исправил)))
автоподгрузка работает, а переход на уже подгруженные нет, прокручивает в самый верх
всё без изменений
кроме этих локаций http://instantcms.ru/blogs/bitblog/modul-avtopodgruzki-stranic-dlja-instantcms-2-x.html#comment_81990
P.S. С момента публикации этого поста утело много воды, насколько он совместим с последней версией iCMS незнаю. Поэтому все изменения делайте на свой страх и риск, и желательно предварительно не на рабочем сайте))
Без доработки скрипта нельзя.
Если бы ещё и полем регулировать, была бы весьма интересно.
навигации: http://instantcms.ru/blogs/instantmedia/pole-navigaci.html (след., пред.) Как то к нему прикрутить, но у меня пока ни знаний, ни времени ни хватает.
Если делать нормальную подгрузку контента, данные должны подготавливаться на бэкенде, и отправляться без лишнего "мусора" в виде разметки и прочего. А затем уже на фронте выводиться в в шаблон.
остальное отписал в личке ;)
почему?
Если вас устраивает его работа, то конечно проблем с использованием нет. Если не устраивает или чего-то не хватает - то доработка это дело пользователя а не автора ;)