Автоподгрузка страниц iCMS2

ЕСТЬ РЕШЕНИЕ ЗАКРЫТО

Компонент для InstantCMS 2

#1 20 июля 2014 в 17:49
Приветствую всех, уважаемое сообщество 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 в папку со скриптами, по умолчанию она находится тут:
  1. ..\templates\default\js\
И самое тяжелое — подключаем модуль в необходимых местах шаблона, там, где мы хотим, чтобы страницы, при пагинации, загружались автоматически через ajax. Для этого в файлах:
  1. ..\templates\default\content\albums_list.tpl.php
  2. ..\templates\default\content\default_list.tpl.php
  3. ..\templates\default\content\default_list_featured.tpl.php
  4. ..\templates\default\content\default_list_table.tpl.php
  5. ..\templates\default\content\default_list_tiles.tpl.php
  6. ..\templates\default\controllers\activity\list.tpl.php
  7. ..\templates\default\controllers\comments\list_index.tpl.php
  8. ..\templates\default\controllers\groups\list.tpl.php
  9. ..\templates\default\controllers\photos\album.tpl.php
  10. ..\templates\default\controllers\search\index.tpl.php
  11. ..\templates\default\controllers\users\list.tpl.php
  12. ..\templates\default\controllers\users\profile_karma.tpl.php
  13. ..\templates\default\controllers\wall\list.tpl.php
в самом начале прописываем строки:
  1. <?php $this->addJS("templates/{$this->name}/js/jquery.history.js"); ?>
  2. <?php $this->addJS("templates/{$this->name}/js/pageautoload.min.js"); ?>
(в данном случае, я использую сжатую версию pageautoload)

Это более правильный подход, но вместо кучи файлов шаблона можно попробовать подключить скрипты в файле
..\templates\default\main.tpl.php ниже после блока подключения других скриптов. В этом случае, плагин будет работать на всех страницах где используется пагинация. Но там, где нет разбиения на страницы и нет необходимости в работе скрипта, он всё равно будет грузиться. Этот способ хорош для тестовой проверки работоспособности, но не рекомендуется использовать его на рабочих сайтах, зачем постоянно грузить 26 килобайт ненужной информации?!

Немного о настройках...

Все, или почти все, изменяемые параметры скрипта вынесены в его начало, в разделе options. Рядом проставлены комментарии с описанием каждого параметра. Единственное на что хотел бы обратить внимание это раздел CONTAINERS, в котором перечислены классы и id блоков куда выводятся подгружаемые ajax данные. Например, структура ленты активности в стандартном шаблоне следующая:
  1. <...>
  2. <article>
  3. <div id="breadcrumbs">...</div>
  4. <h1>Лента активности</h1>
  5. <div class="content_datasets">...</div>
  6. <div class="activity-list striped-list list-32">...</div>
  7. <div class="pagebar">...</div>
  8. </article>
  9. <...>
Интересующий нас контент, который должен выводиться через 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) и проверяем результат его работы.

На этом всё.
Надеюсь получилось достаточно подробно и ясно описать базовый функционал плагина и принцип его работы. Всем большое спасибо и удачи в процессе постижения тайн второго Instant'а!!!

P.S. Буду рад благодарности в карме, чтобы создать блог и делиться в нем своими мыслями и наработками по расширению функционала всеми любимой iCMS.
Прикрепленный файл
pageautoload_4e29a.zip 13 Кб
#2 20 июля 2014 в 20:33
Скачал, позже гляну. Спасибо.
#3 20 июля 2014 в 21:03
Спасибо. Хорошая штука. Только к ней комплектом кнопку "Вверх" наверное надо прикрутить.
#4 21 июля 2014 в 10:33
Добавил +, чтобы завести блог на сайте
#5 22 июля 2014 в 21:35


lokonaft

Val
А вот ща обидно было sad

lokanaft
Прошу прощения… сейчас исправлю…
#6 5 августа 2014 в 20:56
Исправил небольшую ошибку в модуле:
если скрипт подключать "в лоб" в шаблоне main.tpl.php то на страницах где нет pagebar'а он выдавал ошибку (собственно потому что не мог найти этот самый pagebar =)) и, прекращалось выполнение скриптов которые подключаются ниже autopageload.js. Добавил дополнительную проверку и исправил описанный косячёк...

Также адаптировал к недавно вышедшему обновлению InstantCMS 2.1 с новым модулем пагинации! Проблем не обнаружил, но если кто заметит отпишитесь здесь, будем смотреть и править.

P.S. Перезалитые файлы качаем в первом посте.
#7 19 августа 2014 в 20:46
Плюсанул, дабы блог отдельный удобно очень.
#8 19 августа 2014 в 21:27
romanovcmc, большое спасибо! Наконец я набрал эти 33 бала и в скором будущем открою блог. Уже есть мысли о первых публикациях!
#9 19 августа 2014 в 21:48
Val в первую очередь текущую перенеси в блог. Не все форумы читают.
#10 19 августа 2014 в 23:24
Антон, обязательно!
#11 21 августа 2014 в 20:37
Всем большое спасибо за предоставленную мне возможность создать блог!
Эту тему я переношу в него😊
Буду рад услышать ваши пожелания и предложения.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.