Блоки с закрытием/открытием через кукисы.

[LaRok]

Тестировалось в работе на RUNCMS 1.1A. Насчет работы на других версиях нет никакой гарантии.

Часть первая. Создание необходимых файлов.

1. Создаем/личим/достаем две картинки для открывания/закрывания. По стандарту плюс и минус.

Обзываем их minus.gif и plus.gif

Бросаем картинки в themes\тема_портала\images\

2. Создаем файл collapse.js с ява скриптом на колапс/ункалапс + куки в themes\тема_портала\

В коде collapse.js меняем "www.сайт.ru" на путь к своему сайту. Меняем "тема_портала" на название используемой темы.

Код файла ниже:

// #############################################################################
// Хак на колапс/ункалапс + куки.
// #############################################################################
// LaRok [www.e-xoops.ru] 29.01.05
// #############################################################################
function toggle_block(block, icon)
{
if (document.getElementById)
{
if (document.getElementById(block).style.display == 'block')
{
document.getElementById(block).style.display = 'none';
icon.src = 'http://www.сайт.ru/themes/тема_портала/images/plus.gif';
save_collapsed(block, true);
}
else
{
document.getElementById(block).style.display = 'block';
icon.src = 'http://www.сайт.ru/themes/тема_портала/images/minus.gif';
save_collapsed(block, false);
}
}
else if (document.all)
{
if (document.all[block].style.display == 'block')
{
document.all[block].style.display = 'none';
icon.src = 'http://www.сайт.ru/themes/тема_портала/images/plus.gif';
save_collapsed(block, true);
}
else
{
document.all[block].style.display = 'block';
icon.src = 'http://www.сайт.ru/themes/тема_портала/images/minus.gif';
save_collapsed(block, false);
}
}
}
function save_collapsed(objid, addcollapsed)
{
var collapsed = get_cookie("collapse");
var tmp = "";
if (collapsed != null)
{
collapsed = collapsed.split(",");
for (i in collapsed)
{
if (collapsed[i] != objid && collapsed[i] != "")
{
tmp = tmp + collapsed[i];
tmp = tmp + ",";
}
}
}
if (addcollapsed)
{
tmp = tmp + objid;
}
expires = new Date();
expires.setTime(expires.getTime() + (1000 * 86400 * 365));
set_cookie("collapse", tmp, expires);
}
function set_cookie(name, value, expires)
{
if (!expires)
{
expires = new Date();
}
document.cookie = name + "=" + escape(value) + "; expires=" + expires.toGMTString() +  "; path=/";
}
function get_cookie(name)
{
cookie_name = name + "=";
cookie_length = document.cookie.length;
cookie_begin = 0;
while (cookie_begin < cookie_length)
{
value_begin = cookie_begin + cookie_name.length;
if (document.cookie.substring(cookie_begin, value_begin) == cookie_name)
{
var value_end = document.cookie.indexOf (";", value_begin);
if (value_end == -1)
{
value_end = cookie_length;
}
return unescape(document.cookie.substring(value_begin, value_end));
}
cookie_begin = document.cookie.indexOf(" ", cookie_begin) + 1;
if (cookie_begin == 0)
{
break;
}
}
return null;
}

Данный файл также доступен в атаче. Необходимо отредактировать его и поменять "САЙТ" на название вашего сайта и "ТЕМА" на название темы.

Часть вторая. Модификация файлов портала.

1. Открываем class\xoopsblock.php

Ищем код:

PHP код:

function showBlock($sideblock, $title, $content, $force=false)  
        {  
            global  $xoopsModule;  
            if ( $this->getVar('show_mid') != '0' && $force == false ) {  
                if ( $xoopsModule ) {  
                    if ( !in_array($xoopsModule->mid(), explode('|', $this->getVar('show_mid'))) ) return false;  
                } else {  
                    if ( !in_array('-1', explode('|', $this->getVar('show_mid'))) ) return false;  
                }  
            }
            $show_template = ($this->getVar('show_template') != '') ? $this->getVar('show_template') : 'standard' ;
            if ($show_template  == 'standard'){
            switch ($sideblock){ 
                case  XOOPS_SIDEBLOCK_LEFT:
                    themesidebox_left($title, $content);
            break;
        case XOOPS_SIDEBLOCK_RIGHT:
            themesidebox_right($title, $content);
            break;
        case XOOPS_CENTERBLOCK_TOPLEFT || XOOPS_CENTERBLOCK_BOTTOMLEFT:
            themecenterbox_left($title, $content);
            break;
        case XOOPS_CENTERBLOCK_TOPRIGHT || XOOPS_CENTERBLOCK_BOTTOMRIGHT:
            themecenterbox_right($title, $content);
            break;    
        case XOOPS_CENTERBLOCK_TOPCENTER || XOOPS_CENTERBLOCK_BOTTOMCENTER:
            themecenterbox_center($title, $content);
            break;
        
        }
    }else{
        themebox_template($title, $content, $show_template);
    }
            
        } 


Замена на:

PHP код:

function showBlock($sideblock, $title, $content, $force=false)  
        {  
            $bbid = $this->getVar('bid');
            global  $xoopsModule;  
            if ( $this->getVar('show_mid') != '0' && $force == false ) {  
                if ( $xoopsModule ) {  
                    if ( !in_array($xoopsModule->mid(), explode('|', $this->getVar('show_mid'))) ) return false;  
                } else {  
                    if ( !in_array('-1', explode('|', $this->getVar('show_mid'))) ) return false;  
                }  
            }
            $show_template = ($this->getVar('show_template') != '') ? $this->getVar('show_template') : 'standard' ;
            if ($show_template  == 'standard'){
            switch ($sideblock){ 
                case  XOOPS_SIDEBLOCK_LEFT:
                    themesidebox_left($title, $content, $bbid);
            break;
        case XOOPS_SIDEBLOCK_RIGHT:
            themesidebox_right($title, $content, $bbid);
            break;
        case XOOPS_CENTERBLOCK_TOPLEFT || XOOPS_CENTERBLOCK_BOTTOMLEFT:
            themecenterbox_left($title, $content, $bbid);
            break;
        case XOOPS_CENTERBLOCK_TOPRIGHT || XOOPS_CENTERBLOCK_BOTTOMRIGHT:
            themecenterbox_right($title, $content, $bbid);
            break;    
        case XOOPS_CENTERBLOCK_TOPCENTER || XOOPS_CENTERBLOCK_BOTTOMCENTER:
            themecenterbox_center($title, $content, $bbid);
            break;
        
        }
    }else{
        themebox_template($title, $content, $show_template, $bbid);
    }
            
        } 


Закрываем class\xoopsblock.php, несём файл на сервер.

2. Открываем themes\тема_портала\theme.php

2.1 Ищем код:

</head>

!ВЫШЕ! добавляем:

<script type="text/javascript" src="<?php echo XOOPS_URL."/themes/".XOOPS_THEME;?>/collapse.js" ></script>

2.2 Ищем код:

PHP код:

function themesidebox_left($title='', $content) { 


Замена на:

PHP код:

function themesidebox_left($title='', $content, $bbid) {
    global $HTTP_COOKIE_VARS;
    $bShow = true;
    if (isset($HTTP_COOKIE_VARS['collapse']))
    {
        $arrCollapse = split(',',$HTTP_COOKIE_VARS['collapse']);
        $bShow = (in_array($bbid, $arrCollapse)) ? false : true;
    }
    $show = ($bShow) ? 'block;' : 'none;';
    $img  = ($bShow) ? ''.XOOPS_URL.'/themes/'.XOOPS_THEME.'/images/minus.gif' : ''.XOOPS_URL.'/themes/'.XOOPS_THEME.'/images/plus.gif'; 


2.3 Ищем код:

PHP код:

function themesidebox_right($title='', $content) { 


Замена на:

PHP код:

function themesidebox_right($title='', $content, $bbid) {
    global $HTTP_COOKIE_VARS;
    $bShow = true;
    if (isset($HTTP_COOKIE_VARS['collapse']))
    {
        $arrCollapse = split(',',$HTTP_COOKIE_VARS['collapse']);
        $bShow = (in_array($bbid, $arrCollapse)) ? false : true;
    }
    $show = ($bShow) ? 'block;' : 'none;';
    $img  = ($bShow) ? ''.XOOPS_URL.'/themes/'.XOOPS_THEME.'/images/minus.gif' : ''.XOOPS_URL.'/themes/'.XOOPS_THEME.'/images/plus.gif'; 


!!! Далее замена только для функций themesidebox_left и themesidebox_right.
$title и $content; встречается в файле доволно часто, но необходимо сменить только для этих функций.
Это самый сложный этап так как скины также бывают разные. Вполне возможно что в скине используется не таблица (<td>) а div или span и так далее.


2.4 Ищем код:

PHP код:

<?php echo $title;?>

Замена для themesidebox_left на:

PHP код:

<?php echo $title;?>&nbsp;<img src='<?php echo $img ;?>' onclick="toggle_block('<?php echo $bbid ?>', this)" align="absmiddle">

и для themesidebox_right на:

PHP код:

<img src='<?php echo $img ;?>' onclick="toggle_block('<?php echo $bbid ?>', this)" align="absmiddle">&nbsp;<?php echo $title;?>

2.5 Ищем код:

PHP код:

$content; 


Смещаемся влево к началу строки. Внутри тега <td добавляем(вполне может использоваться любой другой тег в скине):

для themesidebox_left и для themesidebox_right:

PHP код:

id='<?php echo $bbid;?>' style='display: <?php echo $show;?>'

На примере EXRU должно получиться:

PHP код:

<td id='<?php echo $bbid;?>' style='display: <?php echo $show;?>' class="rightsideboxcontent"><?php echo $content;?></td>

2.5 Сноска Метод редактирования темы для коллапса описанный выше (через style) может некоректно отображаться в различных типах обозревателей.
Дать же конкретный код для скина который не видел довольно сложно.
Я на сайте использовал код приведенный ниже для function themesidebox_right и function themesidebox_left.
При вставке в свой скин необходимо указать свои размеры для блока ( width="173" ) и поменять все классы ( class= ) для своего стиля, поменять cellpadding="6" cellspacing="1" по необходимости.

PHP код:

<table class="bbordertitle" cellpadding="6" cellspacing="1" border="0" width="173">
    <tr>
        <td class="leftsidboxtitle" style="background: #F7F7F7;">
        <?php echo $title;?>&nbsp;<img src="<?php echo $img ;?>" onClick="toggle_block('<?php echo $bbid ?>', this)" align="absmiddle" alt="Закрыть|Открыть Блок">
        </td>
    </tr>
</table>

<div id='<?php echo $bbid;?>' style='display: <?php echo $show;?>'>
<table class="bbordercontent" cellpadding="6" cellspacing="1" border="0" width="173">
    <tr>
        <td class="leftsidboxcontent" style="background: #F3F3F3;">
        <?php echo $content;?>
        </td>
    </tr>
</table>
</div>

3. Если в скине используются дополнительные шаблоны для блоков.

Ищем в themes\тема_портала\theme.php

PHP код:

function themebox_template($title='', $content, $show_template) {
          $dir  =   XOOPS_ROOT_PATH."/themes/".XOOPS_THEME."/template/";
          include($dir.$show_template); 
          } 


Замена на:

PHP код:

function themebox_template($title='', $content, $show_template, $bbid) {
        global $HTTP_COOKIE_VARS;
        $bShow = true;
        if (isset($HTTP_COOKIE_VARS['collapse']))
        {
            $arrCollapse = split(',',$HTTP_COOKIE_VARS['collapse']);
            $bShow = (in_array($bbid, $arrCollapse)) ? false : true;
        }
        $show = ($bShow) ? 'block;' : 'none;';
        $img  = ($bShow) ? ''.XOOPS_URL.'/themes/'.XOOPS_THEME.'/images/minus.gif' : ''.XOOPS_URL.'/themes/'.XOOPS_THEME.'/images/plus.gif';
          $dir  =   XOOPS_ROOT_PATH."/themes/".XOOPS_THEME."/template/";
          include($dir.$show_template); 
          } 


3.1 Теперь необходимо добавить колапс во все используемые шаблоны блоков.

Открываем шаблон в themes\название_темы\template\название_шаблона.php

Ищем:

$title

Замена на:

$title
<img src='$img' onclick=\"toggle_block('$bbid', this)\" align='absmiddle'>

Далее представляем себе структуру таблицы блока, спускаемся немного ниже, если шаблон блока построен при помощи таблиц то мы увидим что-то похожее:

PHP код:

</tr>
<tr>
<td width='180' style='

    padding:6px 6px 6px 6px;
    background: #C3F2E8;
    text-align: left;
    text-decoration: none;
    border-bottom:1px solid #ffffff;
    border-top:1px solid #ffffff;
    
'>
$content 


В тег <tr> ячейки отвечающий за показ содержания вставляем

PHP код:

id='$bbid' style='display: $show' 


Получаем подобное:

PHP код:

<tr id='$bbid' style='display: $show'>
<td width='180' style='

    padding:6px 6px 6px 6px;
    background: #C3F2E8;
    text-align: left;
    text-decoration: none;
    border-bottom:1px solid #ffffff;
    border-top:1px solid #ffffff;
    
'>
$content 


Для тех кто понял концепцию существует возможность по тому же принципу сделать центральные блоки с колапсом. В class\xoopsblock.php ничего менять не надо, просто по тому же принципу отредактировать theme.php и шаблоны.