- 2.1. Загрузите fullstory.php в директорию /engine/ajax/.
- 2.2. Загрузите файл шаблона ajax_fullstory.tpl в папку используемого шаблона.
3.1. Правки engine.css
Добавить в конец файла следующий CSS код:
/* ------------------------------------------------------
Стиль элементов окна для AJAX Fullstory
------------------------------------------------------ */
#af {
overflow:auto;
}
#af_layer {
position:fixed;
top:0;
width:100%;
height:100%;
background:#000;
opacity:.8;
filter:alpha(opacity=80);
}
.af_rate, .af_debug {
float:left;
}
/* AJAX Fullstory - Рейтинг */
.af_rate {
margin-top:8px;
}
/* AJAX Fullstory - Время выполнения */
.af_debug {
margin-left:16px;
line-height:32px;
}
/* AJAX Fullstory - Ссылка */
.af_more {
float:right;
display:block;
line-height:30px;
padding:0 10px;
font-size:13px;
color:#333;
font-family:Arial;
background-color:#f5f5f5;
background-image:-moz-linear-gradient(top,#ffffff,#e6e6e6);
background-image:-ms-linear-gradient(top,#ffffff,#e6e6e6);
background-image:-webkit-gradient(linear,0 0,0 100%,from(#ffffff),to(#e6e6e6));
background-image:-webkit-linear-gradient(top,#ffffff,#e6e6e6);
background-image:-o-linear-gradient(top,#ffffff,#e6e6e6);
background-image:linear-gradient(top,#ffffff,#e6e6e6);
background-repeat:repeat-x;
border-color:#e6e6e6 #e6e6e6 #bfbfbf;
border-color:rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.25);
border:1px solid #ccc;
border-bottom-color:#b3b3b3;
border-radius:4px;
-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
}
.af_more:hover {
text-decoration:none;
background-color:#e6e6e6;
background-position:0 -15px;
-webkit-transition:background-position 0.1s linear;
-moz-transition:background-position 0.1s linear;
-ms-transition:background-position 0.1s linear;
-o-transition:background-position 0.1s linear;
transition:background-position 0.1s linear;
}
- NOTE: Не обязательно использовать стили из пункта 3.1 для оформления элементов внизу окна. Вместо этого вы сами можете задать визуальное оформление элементов в CSS используя классы:
div.af_rate
- rating,div.af_debug
- debug,a.af_more
- full link.
3.2. Правки /engine/classes/js/dle_js.js
Найти:
setTimeout(function(){$("#blind-animation").show("blind",{},1500)},1100))})}
ниже добавить:
$(document).ready(function(){
$('[data-post]').click(function(){
ShowLoading('Загрузка публикации');
$.ajax({
type:'POST',
url:dle_root+'engine/ajax/fullstory.php',
data:{id:$(this).data('post'),template:$(this).data('tpl'),time:$(this).data('debug')},
dataType:'xml',
success:function(xml){
HideLoading();
$('#af,#af_layer').remove();
$(xml).find('result').each(
function(){
$('body').append("<div id=\"af\"></div><div id=\"af_layer\" onclick=\"$('#af').dialog('close');$('#af,#af_layer').remove();\"></div>");
$('#af').dialog({
title:$(this).find('title').text(),
autoOpen:true,
draggable:true,
zIndex:900,
width:666,
height:500,
buttons:[{
text:'Закрыть',click:function(){
$('#af,#af_layer').remove();
$(this).dialog("close");
}
}],
close:function(event,ui){
$('#af,#af_layer').remove();
}
});
$('.ui-dialog-buttonset').html('<div class="af_rate">'+$(this).find('rate').text()+'</div><div class="af_debug">'+$(this).find('time').text()+'</div><a href="'+$(this).find('link').text()+'" class="af_more">Подробнее</a>');
$('.ui-dialog').css({position:'fixed',top:$(window).height()/1.6-330});
$('#af').html($(this).find('full').text());
}
);
},
error:function(){
ShowLoading('Ошибка AJAX запроса');
setTimeout(HideLoading,3000);
}
}); return false;
});
});
3.3. Правки /engine/inc/editnews.php
Найти:
clear_cache( array('news_', 'full_'.$item_db[0], 'comm_'.$item_db[0], 'tagscloud_', 'archives_', 'calendar_', 'rss') );
заменить на:
clear_cache( array('news_', 'full_'.$item_db[0], 'af_'.$item_db[0], 'comm_'.$item_db[0], 'tagscloud_', 'archives_', 'calendar_', 'rss') );
- NOTE: Вызов окна с полной новостью происходит при помощи атрибута
data-post="id"
который может быть присвоен любому видимому HTML тегу по которому можно кликнуть при помощи мыши. Удобнее всего делать вызов окна из shortstory.tpl при помощи HTML тега a, например так:<a href="#" data-post="{news-id}">Просмотр</a>. - NOTE: Обязательный атрибут -
data-post="id"
. Необязательные -data-tpl="template_name"
иdata-debug="true"
. Таким образом HTML тег с полным набором параметров данного расширения будет выглядеть примерно так:<a href="#" data-post="{news-id}" data-tpl="ajax_fullstory" data-debug="true">Просмотр</a> - NOTE: Проделав действия из подпунктов 3.4 и 3.5 в разделе "Категории" админцентра вашего сайта появится поле под названием
"Шаблон для AJAX Fullstory" в котором вы можете указать шаблон для отображения дополнения в конкретной категории. По большому счету, эти действия полезны только в
случае множества категорий нуждающихся в разных шаблонах. Иначе же можно задавать шаблон в специальном атрибуте data-tpl и, например, использовать конструкцию вида:
<a href="#" data-post="{news-id}"[catlist=1] data-tpl="another_tpl"[/catlist]>Просмотр</a>
3.4. Добавить поле в базу данных
Запрос в phpMyAdmin:
ALTER TABLE `dle_category` ADD `af_tpl` VARCHAR(40) NOT NULL
3.5. Правки /engine/inc/categories.php
Найти:
$full_tpl = totranslit( stripslashes( trim( $_POST['full_tpl'] ) ) );
ниже добавить
$af_tpl = totranslit( stripslashes( trim( $_POST['af_tpl'] ) ) );
далее найти:
news_number, short_tpl, full_tpl, metatitle)
и заменить на:
news_number, short_tpl, full_tpl, af_tpl, metatitle)
далее найти:
'$news_number', '$short_tpl', '$full_tpl', '$meta_title'
и заменить на:
'$news_number', '$short_tpl', '$full_tpl', '$af_tpl', '$meta_title'
далее найти:
<tr>
<td style="padding:4px;">{$lang['cat_f_tpl']}</td>
<td><input class="edit bk" type="text" name="full_tpl" value="{$row['full_tpl']}">.tpl<a href="#" class="hintanchor" onMouseover="showhint('{$lang[cat_f_tpl_hit]}', this, event, '250px')">[?]</a></td>
</tr>
и ниже добавить:
<tr>
<td style="padding:4px;">Шаблон для AJAX Fullstory</td>
<td><input class="edit bk" type="text" name="af_tpl" value="{$row['af_tpl']}">.tpl</td>
</tr>
далее найти:
$full_tpl = totranslit( stripslashes( trim( $_POST['full_tpl'] ) ) );
и ниже добавить:
$af_tpl = totranslit( stripslashes( trim( $_POST['af_tpl'] ) ) );
далее найти:
full_tpl='$full_tpl', metatitle='$meta_title'
и заменить на:
full_tpl='$full_tpl', af_tpl='$af_tpl', metatitle='$meta_title'
далее найти:
<tr>
<td style="padding:4px;">{$lang['cat_f_tpl']}</td>
<td><input class="edit bk" type="text" name="full_tpl">.tpl<a href="#" class="hintanchor" onMouseover="showhint('{$lang[cat_f_tpl_hit]}', this, event, '250px')">[?]</a></td>
</tr>
и ниже добавить:
<tr>
<td style="padding:4px;">Шаблон для AJAX Fullstory</td>
<td><input class="edit bk" type="text" name="af_tpl">.tpl</td>
</tr>
- 5.1.
{full-story}- выведет полную новость как она есть. - 5.2.
{full-story limit="200"}- выведет 200 символов из полной новости. - 5.3.
{full-image-x}- выведет картинку из полной новости под номером "x". - 5.4.
[full-image-x]текст[/full-image-x]
- выведет "текст" если в полной новости есть изображение под номером x. - 5.5.
{short-image-x}- выведет картинку из краткой новости под номером "x". - 5.6.
[short-image-x]текст[/short-image-x]
- выведет "текст" если в краткой новости есть изображение под номером x. - 5.7.
{title}- выведет заглавие новости. - 5.8.
{category-url}- выведет ссылку(и) на котегорию(и) в которой(ых) расположена новость. - 5.9.
{category-name}- выведет название категории в которой находится новость. - 5.10.
{full-link}- выведет ссылку на полную новость в формате http://example.com/1-test.html. - 5.11.
[full-link]ссылка[/full-link]
- ссылка в виде:<a href="http://example.com/1-test.html">ссылка</a>
. - 5.12.
[xfvalue_x]
- выведет значение дополнительного поля x. - 5.13.
[xfgiven_x]текст[/xfgiven_x]
- выведет текст если заполнено доп. поле x. - 5.14.
[xfnotgiven_x]текст[/xfnotgiven_x]
- выведет текст если не заполнено доп. поле x. -
- NOTE: Невозможно одновременно использовать
{full-story}и{full-story limit="200"}. При использовании последнего, первый всегда будет лишаться работоспособности. - NOTE: Если картинка, выводимая макросом
{short-image-x}или{full-image-x}отсутствует, то вместо нее отобразится "заглушка", которая, по-умолчанию, должна находиться по адресу {THEME}/dleimages/no_image.jpg.
- NOTE: Невозможно одновременно использовать
- AJAX Fullstory, далее именуемое как дополнение или расширение, - это многофункциональное решение для загрузки полной новости в модальном окне с использованием технологии AJAX в CMS DataLife Engine.
-
- 6.1. Дополнение проверяет версию системы, запускает необходимую сессию и делает запрос к БД в зависимости от нее.
- 6.2. При загрузке публикации отображается прелоадер, который показывает состояние. В случае ошибки выводит текст "Ошибка AJAX запроса" и исчезает с экрана.
- 6.3. Публикации записываются в кэш с префиксом af_ и, если кэш для открываемой новости уже существует, материал взимается оттуда. Благодаря этому запросы к базе данных не постоянны. П.С. Не забывайте очищать кэш изменяя шаблон дополнения (при редактировании новости стирается автоматически).
- 6.4. Модальное окно дополнения AJAX Fullstory легко шаблонизируется двумя способами. Первый позволяет указывать шаблоны при редактировании категории в админцентре, а второй передает название шаблона с помощью параметра
data-tpl="название_шаблона"
. Помните, шаблона переданный с data-tpl имеет привилегию над указанным в настройках. - 6.5. Присутствует возможность отслеживать время выполнения скрипта.
data-debug="true"
- присвойте этот параметр для ссылки вызова и в окне, только для администратора, появиться время выполнения. - 6.6. Помните, вызов полной новости в модальном окне можно осуществлять не только в shortstory.tpl, а и в любом другом месте сайта. Присвойте атрибут
data-post="id"
любому HTML элементу и при клике на него будет открыта публикация идентификатор которой указан в атрибуте. - 6.7. Актуальная версия: 1.0 от 13 января 2013 года.
- Данное дополнение не является модификацией или каким-либо улучшением разработки от MSW и его автором является BR0kEN.
- Багрепорты и пожелания принимаються на электропочту: [email protected] с пометкой AJAX Fullstory.