«Быстрая цитата» с помощью jQuery: помещаем цитату в textarea

Опубликовано 10.04.11 / Автор: Иван Саломатин

comments Комментариев 0

К сожалению, медленно, но, к счастью, верно, число читателей WEB-BRICKS.RU растёт. Всвязи с этим, растёт и число пользователей, у которых, по прочтении той или иной заметки, появляются вопросы, пожелания, предложения. Отвечая на комментарии, мы стали ощущать необходимость реализации на сайте инструмента, позволившего бы быстро поместить в textarea-поле цитату того или иного коммента. В результате, я решил потратить пару часиков и написать маленький jQuery-сценарий, которым, собственно, и собираюсь поделиться в данной статье.

Действие сценария вы можете наблюдать на странице любой заметки, имеющей хотя бы один комментарий - достаточно выполнить клик на ссылке «Цитировать» в поле комментария.

Постановка задачи

Необходимо добавить ко блоку каждого комментария кнопку/ссылку, при нажатии на которую в textarea-поле будет помещаться оформленный посредством bbcode-тегов текст соответствующего комментария, имя автора и дата комментария. При этом, страница должна прокручиваться до textarea-поля, которое, в свою очередь, должно становиться активным.

Как реализовать

Шаг первый: анализируем HTML-разметку

Прежде всего нам следует определить структуру вложенности HTML-элементов.

В нашем случае, HTML-разметка в общем виде будет выглядеть следующим образом:

и представлена следующим фрагментом:

<div class="comment">
	<div class="commenter">
		<div class="commenter_name"><a href="#">Автор коммента</a></div>
		<div class="comment_date">11:25 10.04.2011</div>
	</div>
	<div class="comment_text"><p>Текст комментария.</p></div>
	<a href="#" class="quote">Цитировать</a>
</div>
...
...
<form action="" method="">
	<textarea name="" id="comment" cols="60%" rows="10"></textarea>
</form>

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

Шаг второй: построение сценария

Итак, идея проста: основываясь на css-селекторах, поместить в некоторые переменные необходимую информацию, а затем собрать всё воедино и поместить в texarea-поле.

Разумеется, перво-наперво подключаем jQuery:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

и создаём функцию, когда DOM-элементов будет загружен:

<script type="text/javascript">
$(document).ready(function(){

});
</script>

Теперь, согласно нашей схеме вложенности, определим селекторы элементов HTML-разметки и поместим их в переменные - это позволит сэконимить время и избежать ошибок при повторном использовании сценария в других проектах.

var comment_area = '.comment' // класс родительского блока комментария
var commenter_info   = '.commenter'; // класс блока, содержащего инфо об авторе комментария (имя, дату, аватар и т.д.)
var commenter_name   = '.commenter_name'; // класс блока с именем автора комментария
var comment_date   = '.comment_date'; // класс блока с датой комментария
var comment_text   = '.comment_text'; // класс блока с текстом комментария
var quote_link_class   = '.quote'; // класс триггера для вставки цитаты
var textarea_id  = '#comment'; // id элемента textarea, в который помещаем цитату

Что ж, настало время написать основную функцию.

Согласно поставленной задаче, срабатывание сценария должно происходить при нажатии на некоторую кнопку/ссылку - иными словами, на некоторый триггер (англ. trigger - спусковой крючок). В нашем примере таким триггером выступает ссылка с селектором .quote, который мы поместили в переменную var quote_link_class. Соответственно, создаём функцию, которая будет вызываться сценарием при наступлении для нашего триггера события click.

$(quote_link_class).click(function () {
  
});

Далее необходимо получить нужные нам строковые значения (имя автора, дату комментария, текст комментария) и поместить их в некоторые переменные:

// Имя автора комментария
var qAuthor = $(this).parent(comment_area).find(commenter_name).text();
// Дата комментария
var qDate = $(this).parent(comment_area).find(comment_date).text();
// Текст коментария
var qComment = $(this).parent(comment_area).find(comment_text).text();

Как видите, здесь мы получаем содержимое HTML-элементов с помощью метода .text, позволяющего исключить html-теги.

Принцип, который используется для обхода HTML-элементов представлен на следующем рисунке:

Как видите, отталкиваясь от элемента, для которого произошло событие .click (a.quote), мы осуществляем переход на уровень родительского элемента (div.comment_area) и затем ищем следующий элемент, удовлетворяющий определёному условию (в нашем случае - значению соответсвующей переменной).

Теперь, когда необходимые строки получены, казалось бы, пора собрать всё воедино и поместить результат в textarea... но! мы упустили важную деталь. А что, если в нашем textarea пользователь уже ввёл какой-нибудь текст? Тогда, он попросту будет очищен! Такого допустить никак нельзя, поэтому давайте не поленимся и создадим ещё одну переменную, в которую поместим значение textarea-поля.

// Сушествующее содержимое textarea
var exText = $(textarea_id).val();

Ну, а вот теперь уже можно собирать всё воедино, добавить требуемое оформление и поместить результат внутрь нашего texarea.

$(textarea_id).val(exText + '[quote][b]' + qAuthor + '[/b] в ' + qDate + '\r\n' + qComment + '[/quote]\r\n');

Что ж, большая часть сценария написана. Теперь сделаем нашу функцию, так сказать, «юзерфрендли».

Заставим страницу прокручиваться до уровня texarea-поля. Для этого воспользуемся методом .offset(), который возвращает значения отступов элемента от верхней (top) и левой (left) границ документа. А затем значение верхнего отступа передадим в параметре функции .animate(), с помощью которой и прокрутим нашу страницу.

var target_offset = $(textarea_id).offset();
var scroll_to = target_offset.top;
$('html, body').animate({scrollTop:scroll_to}, 50);

Ну, теперь осталось сделать активным наше textarea-поле:

$(textarea_id).focus();

и предотвратить событие по-умолчанию для нашего триггера:

return false;

Вот и всё. Наш сценарий готов:

<script type="text/javascript">
$(document).ready(function(){
    var comment_area = '.comment' // класс родительского блока комментария
    var commenter_info   = '.commenter'; // класс блока, содержащего инфо об авторе комментария
    var commenter_name   = '.commenter_name'; // класс блока с именем автора комментария
    var comment_date   = '.comment_date'; // класс блока с датой комментария
    var comment_text   = '.comment_text'; // класс блока с текстом комментария
    var quote_link_class   = '.quote'; // класс триггера для вставки цитаты
    var textarea_id  = '#comment'; // id элемента textarea, в который помещаем цитату
    
    $(quote_link_class).click(function () {
    // Имя автора комментария
    var qAuthor = $(this).parent(comment_area).find(commenter_name).text();
    // Дата комментария
    var qDate = $(this).parent(comment_area).find(comment_date).text();
    // Текст коментария
    var qComment = $(this).parent(comment_area).find(comment_text).text();
    // Сушествующее содержимое textarea
    var exText = $(textarea_id).val();
    $(textarea_id).val(exText + '[quote][b]' + qAuthor + '[/b] в ' + qDate + '\r\n' + qComment + '[/quote]\r\n');
    // Прокручиваем страницу
    var target_offset = $(textarea_id).offset();
    var scroll_to = target_offset.top;
    $('html, body').animate({scrollTop:scroll_to}, 50);
    // Активизируем textarea
    $(textarea_id).focus();
    // Предотвращаем дефолтовую обработку события для триггера 
    return false;
});
});
</script>

Следует помнить!!! Используя метод .text(), мы вычищаем из текста цитируемого комментария весь html-код, что делает невозможным сохранение форматирования цитируемых комментариев. Если сохранить форматирование необходимо, то в таком случае метод .text() следует заменить на .html(), но тогда обязательно предусмотрите функцию для замены HTML-тегов их bbcode-эквивалентами.