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

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

10.01
130
15059
{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. Если вы хотите, чтобы кеш модуля автоматически не чистился - можно изменить этот параметр.

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

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

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

  • EditRating — модуль для лёгкого редактирования рейтинга в DataLife Engine
  • UniForm — модуль универсальных ajax-форм для DataLife Engine
  • RSS Comments Pro модуль rss-ленты комментариев для DLE
  • Easy Like - модуль организации системы лайков новостей для DLE 9.x - 10.x (обновлено до 1.4)
Закрыть

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

+

Комментарии

BIG
BIG 11 января 2015 08:58
Ответов: 7 #4467
Блин ну все делаю как тут сказано. Вообще не работает !!!
ПафНутиЙ
ПафНутиЙ 11 января 2015 09:48
Ответов: 6 #4468
Давайте адрес сайта - посмотрим.
BIG
BIG 11 января 2015 18:24
Ответов: 5 #4473
93sport.ru
ПафНутиЙ
ПафНутиЙ 11 января 2015 21:08
Ответов: 4 #4485
Сайт похоже закрыт. И с кодировкой беда.
BIG
BIG 11 января 2015 21:20
Ответов: 3 #4486
Блин ))) Неусмотрел ) Открыл ) Посмотри пжста )
ПафНутиЙ
ПафНутиЙ 11 января 2015 21:32
Ответов: 2 #4487
парсер DLE сожрал код, возьмите отсюда
BIG
BIG 11 января 2015 21:40
Ответов: 0 #4488
Ошибка. Отсутствует файл шаблона: /templates/sport/ajax/fullstory.tpl

Вот что выдает теперь ))))
BIG
BIG 11 января 2015 21:43
Ответов: 0 #4489
Решил вопрос с ошибкой ) Теперь просто модальное окно с пустым содержимым выскакивает. Ссылка "Быстрый просмотр 2" на сайте
Serj
Serj 11 января 2015 19:12
Ответов: 1 #4479
Надеюсь модуль

а что дальше? в самом низу

быстрый просмотр полной ноости на AJAX.

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

я понимаю..торопился wink
ПафНутиЙ
ПафНутиЙ 11 января 2015 21:07
Ответов: 0 #4484
Люблю внимательных пользователей. Спасибо, поправил.
Marek
Marek 14 января 2015 20:59
Ответов: 2 #4494
Модуль хороший но доп поля не выводит :( Дле 10.3
[img]https://www.dropbox.com/s/dqc8pdpb2wp7704/Безымянный.png?dl=0[/img]
shim
shim 14 января 2015 22:09
Ответов: 0 #4495
подтверждаю, не работают доп.поля.
ПафНутиЙ
ПафНутиЙ 14 января 2015 22:24
Ответов: 0 #4497
Не удалось вчера проверить работу допполей, не дошли руки. Сегодня проверю обязательно, я даже подозреваю в чём ошибка.
ПафНутиЙ
ПафНутиЙ 14 января 2015 23:42
Ответов: 2 #4498
Ошибка с допполями исправлена, как и думал - дело было в одной строке, которую я забыл вставить.
Marek
Marek 15 января 2015 01:08
Ответов: 0 #4499
Теперь работает, спасибо
shim
shim 15 января 2015 08:52
Ответов: 0 #4501
спасибо
shim
shim 15 января 2015 08:56
Ответов: 1 #4502
А можно этот модуль подружить с Block.Pro.3?
чтоб тоже можно было просто вставлять "минимальный код" в его шаблон.
ПафНутиЙ
ПафНутиЙ 15 января 2015 09:27
Ответов: 0 #4503
Этот модуль можно подружить с чем угодно.
Достаточно добиться вызова ajax-запроса к подулю с передачей ID новости.
rety
rety 19 января 2015 08:40
Ответов: 2 #4527
Здравствуйте, Павел.
Благодарю за модуль, хорошая разработка. Нашёл несколько небольших проблем:

1. Не хотят отображаться ссылки на изображения выводимые с помощью тегов [image-x] {image-x} [/image-x], если эти изображения были добавлены только в полную новость и не добавлены в краткую.

2. Модальное окно можно открыть неограниченное количество раз кликами на "Быстрый просмотр". Новые окна открываются поверх предыдуще открытых.

3. Изображения выводимые в {full-story} в модальном окне не увеличиваются по клику, а открываются в новой странице.

Тестировал Ваш модуль в DLE 10.3, стандартный шаблон "Default".
Если у Вас будет время, пожалуйста сделайте багфикс. Спасибо.
ПафНутиЙ
ПафНутиЙ 19 января 2015 13:13
Ответов: 1 #4528
1. Для вывода картинки из полной новости используетй {fullimage-x} т.к. {image-x} выводит картинку из краткой новости.

2. Тут уже вам придётся самостоятельно реализовать необходимый функционал, но я бы рекомендовал использовать сторонний скрипт модальных окон. Например Magnificpopup, он гораздо проще в использовании и позволяет более гибко управлять дизайном, ну и открыть два окна не получится в принципе.
Возможно позже я добавлю пример с magnificpopup.

3. Скорее всего это из-за непродуманной реализации вызова библиотеки hislide.js.
rety
rety 19 января 2015 13:54
Ответов: 0 #4529
Спасибо за помощь, Павел.
vadims
vadims 2 февраля 2015 01:05
Ответов: 2 #4555
Скажите, как сделать не модальным окном, а чтобы при нажатие на ссылку подгружался/открывлся спойлер?
ПафНутиЙ
ПафНутиЙ 2 февраля 2015 20:35
Ответов: 1 #4557
$(document).on('click', '.spoiler', function(){
ajax-запрос;
резульат запроса вставляем в блок со спойлером;
открываем спойлер.
} );
serik
serik 4 февраля 2015 15:10
Ответов: 2 #4559
Thank you so much.
How can we integrate dynamicdrive.com/dynamicindex17/ajaxsidepanel.htm
ПафНутиЙ
ПафНутиЙ 4 февраля 2015 17:36
Ответов: 1 #4561
Вот это интересный вариант вывода, пожалуй сделаю пример вечером.
serik
serik 4 февраля 2015 19:00
Ответов: 0 #4562
Other examples

* producthunt.com (click to comment image)

* https://business.disqus.com/blog/5-fun-facts-about-the-disqus-audience/ (click to "Disqus for Business" text.
serik
serik 6 февраля 2015 15:41
Ответов: 0 #4567
Are you going to help?
black_wolf
black_wolf 6 февраля 2015 16:39
Ответов: 1 #4568
Здравствуйте, простите за глупый вопрос, но я не совсем понял как все это работает!
Вставил:
<span data-afs-id="{news-id}">Быстрый просмотр</span>

в маин, shorstory, fullstory но выводит просто текст: Быстрый просмотр
ПафНутиЙ
ПафНутиЙ 9 февраля 2015 19:41
Ответов: 0 #4572
попробуйте кликнуть по этому тексту.
ElefanD
ElefanD 10 февраля 2015 10:41
Ответов: 0 #4581
Подскажите пожалуйста, как сделать, что бы модальное окно появлялось не стандартное, а magnific popup

Информация

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