Шахматные сайты не прошли мимо современной моды на Веб 2.0 и тоже начинают внедрять у себя функционал социальных сетей. Нишевые социальные сети — это один из самых горячих трендов в современной интернет-индустрии. Аудитория любителей шахмат просто идеально подходит для коммьюнити-билдинга.

На портале Cnet выложен видеоcюжет на тему трансформации в духе Веб 2.0 одного из самых популярных шахматных сайтов Chess.com, который объединяет более 100 000 игроков. Основатель проекта Эрик Аллебест (Erik Allebest) рассказывает, что они добавили на сайт подробные профили пользователей, личную почту, блоги, отслеживание комментариев, возможность добавления френдов, мешапы с Google Maps, клубы по интересам, рейтинги и другие типичные функции социальных сетей. Любители шахмат могут даже публиковать здесь свои личные фотоальбомы.

В Рунете шахматные сайты остаются на прежнем довольно убогом уровне, хотя в России эта игра популярна как нигде в мире. Пожалуй, дальше всех на пути построения социальной сети продвинулся сайт LiveChess.ru, но и его уровень технической реализации оставляет желать лучшего.

С помощью JavaScript можно без проблем манипулировать всеми характеристиками узлов на html-странице. Но, как правило, изменение характеристик узлов «вручную» средствами JavaScript слишком трудоемкая работа, и требует от программиста знание тонкостей HTML и CSS.

Возможности CSS позволяют большую часть этой задачи переложить на верстальщика, а программисту останется лишь реализовать манипуляцию состояниями этих узлов. Такой подход к решению задачи позволяет обойти большую часть «подводных камней» и решить многие задачи без особых трудностей.

Самый простейший пример — скрытие/отображение блока на странице средствами JavaScript. Обычно это делается так:

<script>
function hide(nodeId)
{
    var node = document.getElementById(nodeId);
    if (node)
    {
        node.style.display = 'none';
    }
} 

function show(nodeId)
{
    var node = document.getElementById(nodeId);
    if (node)
    {
        node.style.display = 'block';
    }
}
</script>
<input type="button" value="Скрыть" onclick="hide('test')" />
<input type="button" value="Показать" onclick="show('test')" />
<div id="test">Текст для примера. Текст для примера.</div>

Посмотрим что получилось.

Тут все отлично работает, и придраться не к чему. Возьмем другой пример:

 <p>Мама мыла <span id="lie">раму. Сын любит</span> папу.</p>
 <input type="button" value="Показать всю правду" />
 <input type="button" value="Вернуть, как было" />

Допустим, по клику на кнопке «Показать всю правду» нам нужно скрыть узел span#lie (тег span c идентификатором lie). А при клике на кнопке «Вернуть, как было» показать этот узел снова. Попробуем применить ту же самую функциональность для реализации этой задачи:

<script>
function hide(nodeId)
{
    var node = document.getElementById(nodeId);
    if (node)
    {
        node.style.display = 'none';
    }
} 

function show(nodeId)
{
    var node = document.getElementById(nodeId);
    if (node)
    {
        node.style.display = 'block';
    }
}
</script>
<p>Мама мыла <span id="lie">раму. Сын любит </span>папу.</p>
<input type="button" value="Показать всю правду" onclick="hide('lie')" />
<input type="button" value="Вернуть, как было" onclick="show('lie')" />

Результат работы проверим в действии.

Как видно из примера, кнопка «Показать всю правду» выполняет свою задачу так, как и хотелось. А вот при клике на кнопку «Вернуть, как было»текст появляется вновь, но с некоторыми искажениями — появляются совершенно ненужные переносы строк.

В чем причина? Те, кто немного знают CSS уже давно поняли, куда я клоню. Все дело в том что, если свойству display любого узла установить значение block, то узел становится блочным элементом, который занимает по умолчанию 100% ширины. В нашем случае необходимо устанавливать значение inline, а не block. И зачем программисту знать такие тонкости? В данном случае вовсе не обязательно.

Можно пойти другим путем — например, изменить код функции hide, добавив сохранение исходного значения в промежуточную переменнную. Но есть способ лучше.

Повернем возможности CSS в нашу сторону. Создадим специальный CSS-класс hidden, в котором зададим нужные нам свойства. Теперь остается только назначить этот класс нужному узлу, и он исчезнет с экрана. Убрав этот класс, он без проблем вернется в строй.

<style>
.hidden {display: none;}
</style>
<script>
function hide(nodeId)
{
    var node = document.getElementById(nodeId);
    if (node)
    {
        node.className = 'hidden';
    }
} 

function show(nodeId)
{
    var node = document.getElementById(nodeId);
    if (node)
    {
        node.className = '';
    }
}
</script>
<p>Мама мыла <span id="lie">раму. Сын любит </span>папу.</p>
<input type="button" value="Показать всю правду" onclick="hide('lie')" />
<input type="button" value="Вернуть, как было" onclick="show('lie')" />

Вот теперь пример работает так, как нужно.

Остается, правда, еще одна проблема — не учитывается случай, при котором узел уже имеет какой-либо класс. Попробуйте решить эту проблему самостоятельно.

В общем случае данный подход можно охарактеризовать так: нужно стремиться манипулировать не характеристиками узлов, а их состояниями. Наличие того или иного класса у узла и есть то самое состояние. Учитывая что узел может сочитать несколько классов, можно даже довольно сложные манипуляции свести к простой схеме переключения состояний. А потом попросить верстальщика подготовить в таблице стилей специальные правила для этих состояний.