» » {AJAX FULL-STORY} — модуль AJAX-загрузки полной новости для DLE

{AJAX FULL-STORY} — модуль AJAX-загрузки полной новости для DLE

10.01
140
34 499
{AJAX FULL-STORY} — модуль AJAX-загрузки полной новости для DLE


Бесплатный модуль {AJAX FULL-STORY} позволяет организовать на сайте под управлением DataLife Engine быстрый просмотр полной новости на AJAX. А благодаря правильному кешированию он работает очень эффективно.

Особенности модуля


- Не требует каких-либо правок движка.
- Учёт прав доступа к новости. Если пользователю по каким то причинам запрещено просматривать полную новость в настройках - он не сможет её посмотреть.
- Подсчёт количества просмотров. Модуль учитывает настройки DLE и если требуется - засчитывает просмотр новости.
- Корректная очистка кеша модуля. Кеш модуля очищается в соответствии с правилами автоочистки кеша DLE, поэтому в быстром просмотре новость будет всегда актуального содержания.
- Поддержка всех тегов. Модуль поддерживает все теги шаблона fullstory.tpl. Если тег не нужен в быстром просмотре - вместо него будет пустота. (форма добавления комментариев, сами комментарии).
- Кеширование на стороне клиента. Модуль отдаёт правильные заголовки. Если включено кеширование на сайте и пользователь повторно вызовет быстрый просмотр новости - браузер получит в ответ 304 статус и отдаст пользователю закешированную (в браузере) страницу.

Требования к установке


  • Версия DLE: 10.2+ (на более старых не проверялся, но должен работать вплоть до 9.6)
  • Прямые руки.


Установка


  1. Скачать актуальную версию модуля
  2. Если сайт работает в кодировке windows-1251, необходимо перекодировать файлы модуля в эту кодировку.
  3. Распаковать содержимое папки upload в корень сайта.
  4. В нужном месте любого шаблона вставить минимальный код:

    <span data-afs-id="{news-id}">Быстрый просмотр</span>

    где
    {news-id}
    - ID новости (обязательный параметр).

  5. Так же можно использовать дополнительные атрибуты:

    <span 
    data-afs-id="{news-id}"
    data-afs-template="mytemplate"
    data-afs-preset="mypreset"
    >Быстрый просмотр</span>


    - data-afs-template="mytemplate" - Путь к шаблону модуля относительно текущей папки с шаблоном сайта. Если на сайте разрешена смена скина, то путь будет построен относительно активного в данный момент шаблона сайта. По умолчанию: **{THEME}/ajax/fullstory**. (Необязательный параметр).
    - data-afs-preset="mypreset" - Путь к файлу с настройками модуля. По умолчанию не используется.

  6. В js файл шаблона вставить:

    $(document).on('click', '[data-afs-id]', function () {
    var $this = $(this),
    $data = $this.data();

    $.ajax({
    url: dle_root + 'engine/ajax/full-story.php',
    type: 'GET',
    dataType: 'html',
    data: {
    newsId: $data.afsId, // Обязательная переменная
    preset: ($data.afsPreset) ? $data.afsPreset : '', // Название файла с настройками (необязательно)
    template: ($data.afsTemplate) ? $data.afsTemplate : '', // Название файла с шаблоном (необязательно)
    },
    })
    .done(function (data) {
    var $html = $(data);

    // Данные получены, можно заняться разбором и показать их в диалоге
    // Ниже простейший пример вывода контента в стандартном модальном окне DLE

    var modalId = 'afs-' + $data.afsId + '-' + $data.afsPreset + '-' + $data.afsTemplate;
    modalId = modalId.replace(///g, "-");

    var $modalBlock = $('<div style="display: none;"><div id="' + modalId + '"></div></div>');

    $modalBlock
    .appendTo('body') // Добавляем блок на страницу
    .find('#' + modalId) // Ищем интересующий нас селектор
    .html($html) // Вставляем в него полученный код
    .dialog({ // Показываем модальное окно
    width: 800
    });

    })
    .fail(function () {
    console.log("full-story error");
    });
    });



  7. В CSS-файл шаблона вставить код для стилизации выводимых ошибок:

    .afs-error {
    /*Общий стиль для всех ошибок*/
    padding: 20px;
    background: #fff;
    color: #424242;
    }
    .afs-news-error {
    /*Стиль ошибки, если новость не найдена*/
    background: #eceff1;
    }
    .afs-tpl-error {
    /*Стиль ошибки, если не найден шаблон*/
    color: #b71c1c;
    }
    .afs-perm-error {
    /*Стиль ошибки, если не достаточно прав для просмотра полной новости*/
    background: #e65100;
    color: #F5F5F5;
    }

  8. Не забудьте подправить JS и CSS код под свой сайт smile.

Параметры, принимаемые модулем


Модуль принимает через GET-запросы следующие параметры:
- newsId - Обязательный параметр. ID новости для показа.
- template - Путь к шаблону модуля относительно текущей папки с шаблоном сайта. Если на сайте разрешена смена скина, то путь будет построен относительно активного в данный момент шаблона сайта. По умолчанию:
{THEME}/ajax/fullstory

- preset - Путь к файлу с настройками модуля. По умолчанию не используется.

Настройки модуля


Настройки модуля хранятся в отдельном файле, это сделано для безопасной передачи настроек и уменьшения нагрузки на хостинг.
Для хранения настроек был выбран формат шаблона т.к. его можно отредактировать через админпанель.

При формировании настроек необходимо соблюдать следующий синтаксис:
- Параметры необходимо писать по одному в строке.
- Имя параметра и его значение необходимо разделять знаком равенства.

На данный момент возможно использование следующих параметров:
  • fields - Поля, отбираемые из БД.
    Доступны следующие поля для запроса:
    - short_story, full_story, xfields, comm_num, fixed, tags
    - Так же можно использовать поле all, тогда будут отобраны все возможные поля новости из БД. Аналогичный результат будет, если не передавать в модуль переменную preset или передать её пустой.
  • cachePrefix - Префикс кеша, создаваемого модулем. По умолчанию full. Если вы хотите, чтобы кеш модуля автоматически не чистился - можно изменить этот параметр.

Подробнее о настройках и работе с модулем читайте в обновляемой документации.

Надеюсь модуль будет полезен не только мне. Жду ваших отзывов!

Похожие материалы

Комментарии

ElefanD
ElefanD 10 февраля 2015 18:28
никто не знает ? ((
ПафНутиЙ
ПафНутиЙ 10 февраля 2015 22:30
Самый топорный вариант:
$(document).on('click', '[data-afs-id]', function () {
	var $this = $(this),
		$data = $this.data();

	$.ajax({
			url: dle_root + 'engine/ajax/full-story.php',
			type: 'GET',
			dataType: 'html',
			data: {
				newsId: $data.afsId, // Обязательная переменная
				preset: ($data.afsPreset) ? $data.afsPreset : '', // Название файла с настройками (необязательно)
				template: ($data.afsTemplate) ? $data.afsTemplate : '', // Название файла с шаблоном (необязательно)
			},
		})
		.done(function (data) {
			var $html = $(data);

			$.magnificPopup.open({
				items: {
					src: $html
				},
				type: 'inline'
			});

		})
		.fail(function () {
			console.log("full-story error");
		});
});
ElefanD
ElefanD 10 февраля 2015 22:44
ПафНутиЙ,
а какой код в шаблон новостей писать ? тот же ?
ПафНутиЙ
ПафНутиЙ 10 февраля 2015 22:47
Ну это уже зависит от того, что требуется вывести.
magnificpopup не требует каких либо определённых шаблонов вывода.
ElefanD
ElefanD 10 февраля 2015 22:52
ПафНутиЙ,
Нужно все как в статье выше, только вместо стандартного popup - magnific, попробовал код, содержимое полной новости появляется выше всего сайта, popup magnific не появляется (( в чем может быть проблема ?
ПафНутиЙ
ПафНутиЙ 10 февраля 2015 23:02
адрес сайта?
ElefanD
ElefanD 10 февраля 2015 23:03
ПафНутиЙ,
Написал в аську
ElefanD
ElefanD 10 февраля 2015 23:28
Прошу прощения, код работает, ошибка моя, забыл подключить css magnific, спасибо за помощь

P.S если качать magnific c офф сайта и подключать только какой-то определенный тип, то не работает, но если воспользоваться на сайте ихнем генератором кода и выбрать все типы, то все работает. Может кому пригодится инфа.
serik
serik 11 февраля 2015 00:48
Hi.
How can we run with slidepanel? (www.codebomber.com/jquery/slidepanel/)
Scaver
Scaver 11 февраля 2015 01:11
Спасибо Паш, заработало как и хотелось. Единственное пожелание, добавить функциональность комментариев
И в magnific замечено, что не работает всплывающее меню управления новостью
ПафНутиЙ
ПафНутиЙ 11 февраля 2015 08:53
<a href="/engine/ajax/full-story.php?newsId={news-id}&preset=defauls&template=youttemplatename" data-slidepanel="panel">Show Panel</a>
Scaver
Scaver 11 февраля 2015 19:11
Кстати, незнаю как в стандратном модальном окне, не проверял, но в magnific при нажатии на thumb изображения оно не увеличиваются, а открываются в отдельном окне. Есть решение ?
ElefanD
ElefanD 11 февраля 2015 19:16
Scaver,
Как вариант, прописать - что бы js magnific грузился только на главной странице
Scaver
Scaver 11 февраля 2015 19:42
Он же вызывает открытие окна, собственно [aviable main|cat] не поможет
serik
serik 11 февраля 2015 20:39
Thank you so much smile
ElefanD
ElefanD 12 февраля 2015 08:14
Scaver,
Чойто не поможет ? я себе прописал, magnific js грузятся только на главной
ПафНутиЙ
ПафНутиЙ 12 февраля 2015 08:48
Пример можно посмотреть?
ПафНутиЙ
ПафНутиЙ 12 февраля 2015 08:48
zindex побольше поставь для меню.
Scaver
Scaver 12 февраля 2015 09:30
ПафНутиЙ,
конечно можно.
tera-fun.info
На главной подробнее
ПафНутиЙ
ПафНутиЙ 12 февраля 2015 09:38
Там две новости ни в одной нет thumb
Scaver
Scaver 12 февраля 2015 09:44
а, точно http://tera-fun.info/tera/race/
в эльфах смотри в самом низу :-)
Scaver
Scaver 12 февраля 2015 09:53
Уже выставил, только найти не могу z-index:1002 для окна быстрого редактирования
ElefanD
ElefanD 12 февраля 2015 12:26
Цитата: Scaver
tera-fun.info

Это конечно не мое дело, но все же, мб стоит для кнопки подробнее, для span прописать cursor:pointer; ?
ПафНутиЙ
ПафНутиЙ 12 февраля 2015 13:12
где-нибудь в main.tpl (можно в самом конце) пропиши
<!-- highslide -->

должно заработать.
Scaver
Scaver 12 февраля 2015 15:53
Да ну я ж навожу марафет еще)
Scaver
Scaver 12 февраля 2015 15:58
Не помолгло
ПафНутиЙ
ПафНутиЙ 12 февраля 2015 19:16
значит hightslide не дружит с аяксом. Испольуйте другой плагин, или тот же magnificpopup
Scaver
Scaver 13 февраля 2015 02:37
Эх, не владею. Light тоже не хочет - а magnific незнаю как sad
Scaver
Scaver 13 февраля 2015 17:04
Есть предположение что внутри ajax\full-story.tpl вообще JS не работает, так как у меня и социальные кнопки не работают
Scaver
Scaver 13 февраля 2015 18:49
Перепроверил, с стандартным модальным окном DLE (по примеру с шапки), js тоже не работает

Добавить комментарий

Комментировать могут только зарегистрированные пользователи

Информация

Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.