Модуль автоподгрузки страниц для InstantCMS 2.x [Deprecated]

+64
7.7K
Приветствую всех, уважаемое сообщество 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'а!!!

UPD:
В модуле исправлены недочеты отображения на стене пользователя, удаления заголовка страницы при прокрутке, а также адаптирован для версии InstantCMS 2.1.2

Скачать: pageautoload.zip

UPD2:
Внимание! Модуль автоподгрузки не поддерживается! Настоятельно рекомендую отказаться от его применения на ваших сайтах.
0
solitario84 solitario84 9 лет назад #
Файл не найден.
+2
Val Val 9 лет назад #
Перезалил файл.
+1
Val Val 9 лет назад #
Странно так получилось... Вроде проверял и все работало, в смысле качалось...
0
solitario84 solitario84 9 лет назад #
бывает,не смертельно... мой плюс..
+1
Val Val 9 лет назад #
только что еще раз проверил старую ссылку и она снова заработала!!! scratch
0
solitario84 solitario84 9 лет назад #
оперативно..
+2
Aryuts Aryuts 9 лет назад #
Отлично получилось и спасибо за подробные пояснения.
0
ValeraK ValeraK 9 лет назад #
Прошу прощения возможно за глупый вопрос, но интересует во всех ли стандартных компонентах второй ветки будет работать данный модуль.
+1
Val Val 9 лет назад #
в тексте поста я перечислил компоненты в которых модуль точно работает (те шаблоны куда он подключается), для других компонентов есть механизм адаптации модуля к компоненту (приводится на примере фотобитв).
Т.е. должен работать везде где есть пагинация, но если что то не получается пишите, будем смотреть и разбираться!
0
Romanovcmc Romanovcmc 9 лет назад #
А как pagebar сместить чуть чуть левее, перекрывает значок RSS?
0
Romanovcmc Romanovcmc 9 лет назад #
Разобрался. Надо было править в файле min
+1
Cobalt Cobalt 9 лет назад #
Отличный модуль, спасибо.
Нашел небольшую багу - при скроле на 2ую и все последующие страницы пропадает тайтл(<Title></Title>).
+2
Val Val 9 лет назад #
Спасибо за ваш отзыв! С багой будем бороться)) Как появятся еще несколько пожеланий/исправлений/баг-репортов доработаю и выложу обновление.
0
Cobalt Cobalt 9 лет назад #
Еще одну багу нашел - на второй и всех последующих страницах нельзя поставить плюс или минус записи, а также посмотреть кто ставил плюсы\минусы
0
Cobalt Cobalt 9 лет назад #
И еще как то непонятно работает на страницах "поиск" и "поиск по тегам" если тег или поисковый запрос состоит из двух и более слов
+1
Val Val 9 лет назад #
Спасибо за информацию, будем разбираться!
P.S. title исправил)))
0
nmsk nmsk 9 лет назад #
А обновление будет? v
+5
Val Val 9 лет назад #
Обязательно! Одно небольшое обновление я уже выложил, понемногу буду дорабатывать дальше.
0
RBJ RBJ 8 лет назад #
Неправильно работает в пользовательских разделах с контентом (ссылки на который в профиле под аватаром)
0
RBJ RBJ 7 лет назад #
те же бока и в поиске
автоподгрузка работает, а переход на уже подгруженные нет, прокручивает в самый верх
0
Def Def 8 лет назад #
2/4/1 будет поддерживать?)
0
Val Val 8 лет назад #
Как 2.4.1 выйдет проверим))
0
Def Def 7 лет назад #
на 2.6.1 работает?)
+1
Владимир Владимир 7 лет назад #
Да, работает, классная штука.
0
Val Val 7 лет назад #
Не проверял) Но вот пишут что вроде что-то работает))
0
Sergon Sergon 7 лет назад #
Val, отличная работа! На 2.6.1 работает отлично. Вопрос, как можно положение менять? У меня меню закрепляется сверху и хотелось бы выводить пониже, как это реализовать?
0
Sergon Sergon 7 лет назад #
разобрался! Вот только что происходит, при нажатии в блоке на ссылочки страниц и "следующая" у меня происходит перерисовка экрана и слетает шаблон. Пропадает сайдбар, остаётся только колонка с контентом где блок работает
0
Sergon Sergon 7 лет назад #
Заметил, что перерисовка и исчезновение сайтбара который пропадает, происходит когда нажимаешь на странички которые ещё не просмотрел, а если просмотрено, то все работает как надо. Там заметил ссылка вот так формируется, например в новостях "/news?page=2"
0
Sergon Sergon 7 лет назад #
Видимо это у меня баг. Так происходит и без этого модуля и почему-то только в заглавной директории, в поддериктори не вышибает(( буду разбираться
0
Sergon Sergon 7 лет назад #
оказалось сей проблема есть в дефолтном шаблоне даже на только установленной системе(((
0
Def Def 7 лет назад #
почему то в тайтл подставляется урл при скроле на 2 и последующие страницы
0
Def Def 7 лет назад #
и если на тсранице выведены записи по Связям, то не подгружает страницу следующую:(
+1
Def Def 7 лет назад #
при склейке скриптов в админке, контент в 2.7.0 перестает грузиться( видимо всеже где то конфликт
0
Нико Нико 6 лет назад #
Всем привет, все работает правильно но у меня такая проблема, у меня есть, тоже самое виджет новостей что и у всех, виджет который выводит новости на главной, и я задаю лимит сообщений например 10, как можно сделать и тут так же ?
0
Capitan Capitan 6 лет назад #
Дополнение работает? У кого стоит?
0
RBJ RBJ 6 лет назад #
работает на 2.8.2
всё без изменений
кроме этих локаций http://instantcms.ru/blogs/bitblog/modul-avtopodgruzki-stranic-dlja-instantcms-2-x.html#comment_81990
+1
Саня Саня 6 лет назад #
киньте ссылку на пример) хочется посмотреть...
+1
Capitan Capitan 6 лет назад #
Да. У кого стоит данное дополнение киньте ссылку? Посмотреть на рабочем примере
0
Pawell Pawell 6 лет назад #
Здравствуйте. Возможно ли подключение модуля непосредственно в контент, в тело новости? И как это реализовать, ведь там нет pagebar?

Код PHP:
  1. <?php if ($perpage < $total) { ?>
  2. <?php echo html_pagebar($page, $perpage, $total, $page_url, array_merge($filters, $ext_hidden_params)); ?>
  3. <?php } ?>
0
Val Val 6 лет назад #
Pawell:
Возможно ли подключение модуля непосредственно в контент, в тело новости?
Для этого нужно подключить скрипт только на страницу с новостями ;)
Pawell:
И как это реализовать, ведь там нет pagebar?
Вроде есть https://github.com/instantsoft/icms2/blob/master/templates/default/content/default_list.tpl.php

P.S. С момента публикации этого поста утело много воды, насколько он совместим с последней версией iCMS незнаю. Поэтому все изменения делайте на свой страх и риск, и желательно предварительно не на рабочем сайте))
0
Pawell Pawell 6 лет назад #
К списку вывода новостей templates/default/content/default_list.tpl.php я подключил - всё работает - спасибо. А мне надо непосредственно в тело новости - поста: templates/default/content/default_item.tpl.php Возможно ли такое?
0
Val Val 6 лет назад #
А что в самой новости можно подгружать? =)
Без доработки скрипта нельзя.
Олег Васильевич я Олег Васильевич я 6 лет назад #
Комментарий удален
0
Pawell Pawell 5 лет назад #
Абсолютно так. Но, чтобы это воплотить нужен pagebar, который, как я понял для тела новости не предусмотрен. Есть модуль
навигации: http://instantcms.ru/blogs/instantmedia/pole-navigaci.html (след., пред.) Как то к нему прикрутить, но у меня пока ни знаний, ни времени ни хватает.
0
Capitan Capitan 5 лет назад #
А можете показать рабочий вариант? Ссылку дайте :)
0
Саня Саня 5 лет назад #
Кто нибудь видел пример? Покажите всем... Тоже хочется такое себе на сайт))
0
Александр Александр 5 лет назад #
Конечно жаль что данную тему немного подзабыли - прекрасное дополнение на Инстант и отлично работает на последней версии, но никак не пойму как подключить в контейнер компонент InstanVideo и расширенную Доску объявлений и так пробовал
Код PHP:
  1. "#board-list", // список доски
  2. "#video_list", // список видео
и так
Код PHP:
  1. ".board-list", // список доски
  2. ".video-list", // список видео
и по другому ... что то никак
+1
Val Val 5 лет назад #
Изначально "дополлнение" делалось в виде "Proof of Concept" - проверить получится ли грузить с бэка html в его исходном виде и выводить все это по скроллу. Именно по этому я не добавлял этот скрипт в каталог дополнений, т.к. не место ему там.
Если делать нормальную подгрузку контента, данные должны подготавливаться на бэкенде, и отправляться без лишнего "мусора" в виде разметки и прочего. А затем уже на фронте выводиться в в шаблон.

остальное отписал в личке ;)
+1
TOPg TOPg 5 лет назад #
а правильное решение, не хотите реализовать для общественности? можно конечно и обсуждать благодарность далее
0
Val Val 5 лет назад #
Спасибо за предложение, но пока нет ни времени ни желания заниматься этим функционалом.
0
Sich Sich 5 лет назад #
<blockquote>UPD2: Внимание! Модуль автоподгрузки не поддерживается! Настоятельно рекомендую отказаться от его применения на ваших сайтах.</blockquote>
почему?
0
Val Val 5 лет назад #
smile потому что не поддерживается))
Если вас устраивает его работа, то конечно проблем с использованием нет. Если не устраивает или чего-то не хватает - то доработка это дело пользователя а не автора ;)
0
Sich Sich 5 лет назад #
Только установил его, вроде всё устраивает, разве есть какие то недочёты в нём?
0
Sich Sich 5 лет назад #
Только установил его, вроде всё устраивает, разве есть какие то недочёты в нём?
0
elv elv 5 лет назад #
Спасибо за Автоподгрузку страниц, все работает. Окно с страницами наезжает на Стиль списка и Кнопку "Подписаться" , instantcms 2.11.
0
elv elv 5 лет назад #
Странно, что в браузере Опера работает, в Хроме нет cry
0
Pawell Pawell 5 лет назад #
У меня везде работал, но подгрузка списка новостей ничего не дала сайту, удалил. Подгрузка новостей или постов следом друг за другом даст больший результат.
0
elv elv 5 лет назад #
Для новостей может так и лучше, где в Записях меньше текста может и не лучше
0
elv elv 5 лет назад #
Доброе время суток. Может кто-нибудь может перенести PAGEBAR ка в коробке , под списком записей ? /forum/thread30402-2.html
0
elv elv 5 лет назад #
Доброе время суток. Может кто-нибудь может перенести PAGEBAR как в коробке , под списком записей ? /forum/thread30402-2.html
0
4 года назад #
Придумал костыль: над контентом создал пустой html блок, перекрывает немного слайдер ... Может Вы придумаете что-нибудь получше ?

Еще от автора

СтопХам - userscript для instantcms.ru
Всем привет! Презентую чужую разработку со своей небольшой доработкой .
Предпросмотр для InstantCMS 2
Всем привет!
Just4Fun - Аватарки!
Здравствуйте, любители InstantCMS 2.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.