Предпросмотр комментариев с помощью jQuery

27 января 2013 | Автор: | Категория: JQuery и PHP

В сегодняшней статье расскажу, как с помощью jQuery можно реализовать функцию предпросмотра комментариев.

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

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

Начнём с подключения внешних файлов, для этого между тегами <head></head> нужно вставить следующие строки:

<link rel="stylesheet" type="text/css" href="style.css" />
<script type='text/javascript' src='library/jquery-1.7.2.min.js'></script>
<script type='text/javascript' src='library/jquery.md5.js'></script>
<script type='text/javascript' src='script.js'></script>

Здесь мы подключаем файл со стилями для формы комментариев и окна предпросмотра, библиотеку jQuery, скрипт хеширования мыла пользователя для формировнаия ссылки на его граватар и скрипт, который будет отвечать за реализацию функции предпросмотра комментариев.

На том, как реализовать саму форму комментариев с помощью html разметки и оформить её с помощью каскадных таблиц стилей я подробно останавливаться не буду. Все исходные коды можно будет посмотреть в примере. А вот содержимое файла script.js постараюсь разобрать как можно детальнее, чтоб было понятно, что и как работает.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
$(document).ready(function(){
 
	var show_text     = 'Предпросмотр';
	var hide_text     = 'Режим редактирования';
	var textarea = $('textarea[name="comment"]'); 
 
	var comment = '';
 
	$(textarea).wrap('<div id="jquery-comment-wrap"></div>');
	$(textarea).before('<div id="jquery-comment-preview"></div>');
	$('#jquery-comment-preview').prepend('<div id="preview-tab"><div><a>'+ show_text +'</a></div></div>');
 
	$('#jquery-comment-wrap, #jquery-comment-preview').width($(textarea).width());
 
	$('#preview-tab div').toggle(
		function() {
			comment = $(textarea).val(); // записываем в переменную текст комментария
			comment_preview = comment.replace(/\n/g, '<br />');
 
			var author = $('#author').val(); // значение параметра "value" поля Имя автора
			var url = $('#url').val();      // значение параметра "value" поля Сайт
			var email = $('#email').val();  // значение параметра "value" поля Email
			if(!email) email = '';
			var md5 = MD5(email);
			var avatar = '<img src="http://www.gravatar.com/avatar/' + md5 + '?s=32" alt="" class="avatar" />'; // граватар комментатора размером 32x32
 
			if (url != '') { author = '<a href="'+ url +'">'+ author +'</a>'; } // формируем html код ссылки на сайт автора, если комментатор указал ссылку
			var preview_html = '<ol id="comment-preview"><li><div style="float:left; padding-right: 5px;">' + avatar + '<p><strong>' + author +'</strong></p></div>' + comment_preview +'</li></ol>';
 
			$(textarea).after('<div id="textarea_clone"></div>');
			$(textarea).clone().prependTo($('#textarea_clone'));
			$('#textarea_clone textarea').text(comment);
			$('#textarea_clone').hide();
			$(textarea).replaceWith('<div id="comment_preview"></div>');
			$('#comment_preview').html(preview_html);
			$('#preview-tab a').text(hide_text); // меняем текст блока отвечающего за переход в режим предпросмотра на "Режим редактирования"
		},
		function() {
			$('#textarea_clone').remove();
			$('#comment_preview').replaceWith(textarea);
			$(textarea).text(comment);
			$('#preview-tab a').text(show_text);  // меняем текст блока отвечающего за переход в режим предпросмотра на "Предпросмотр"
		}
	)
 
})

Часть кода закомментирована, думаю там всё должно быть понятно. Переменным присвоены значения, взятые из стандартной формы комментирования WordPress. Так что, если Вы будете делать предпросмотр комментариев для блога на движке WordPress то, скорее всего, здесь можно будет ничего не менять, но перепроверить на всякий случай всё-таки стоит.

Если пользователь не указал свой email, то в качестве граватара будет отображаться стандартная картинка.

Вообще с граватарами пришлось немного повозиться пока разобрался как ссылку на персональную картинку комментатора сформировать. Как писал Выше для этого подключается отдельный файл, который отвечает за хеширование email-адреса. Полученный MD5 Хэш электронного адреса добавляется в url, цифра 32 в самом конце обозначает размер картинки.

Средствами php ссылку на граватар пользователя получить гораздо проще, никаких дополнительных скриптов подключать не нужно, есть стандартная функция для шифрования.

<?php 
	$avatar_link = "http://www.gravatar.com/avatar/" . md5( strtolower( trim( $email ) ) ) . "&s=" . "32";
?>

где $email — значение параметра value поля Email, т.е то мыло, которое ввёл комментатор. Естественно, что в javascript файле данный код работать не будет.

Средствами WordPress получить ссылку на граватар и вывести его на блоге тоже не составит особого труда, сделать это можно следующим образом:

 <?php   
$comment = get_the_author_meta('user_email');  
echo get_avatar( $comment, 32 ); 
?>

Это было небольшое отступление от темы сегодняшнего поста, а теперь продолжаем разбираться с тем, как работает скрипт предпросмотра комментариев.

Функция .wrap() обёртывает текст комментария в элемент <div>, а функция .before() добавляет новый элемент <div> перед комментарием. В этом блоке будет находиться кнопка предпросмотра за добавление которой отвечает функция .prepend().

Функция .toggle() отвечает за переключение между двумя функциями по нажатию левой кнопки мыши. Первая функция отвечает за отображение комментария в режиме предпросмотра, а вторая за возврат к режиму редактирования.

Если в тексте комментария есть перенос строки, функция .replace() заменит его тегом <br />. Если не вызвать эту функцию, то при предпросмотре перенос потеряется.

Функция .after() добавляет элемент <div> сразу после блока с комментарием, .clone() клонирует все элементы textarea и вставляет их внутри блока textarea_clone.

Функция .text() заменяет содержимое у выбранного элемента, на текст комментария.

Функция .hide() скрывает блок textarea_clone. Метод .replaceWith() удаляет исходный блок комментария, и вставляет на его место новое содержание.

Функция .html() заменяет содержимое блока comment_preview на значение переменной preview_html.

Метод .remove() удаляет элемент textarea_clone из DOM, далее снова выполняется замена текста для предпросмотра на исходный текст введённый комментатором.

Как видите всё не так сложно, как может показаться на первый взгляд.

Пример работы скрипта можно посмотреть здесь.
Скачать все файлы примера JQuery_Example4.zip

На сегодня всё.

Недавно обновил список ресурсов для добавления пресс-релизов, удалил старые не рабочие и добавил около десятка новых. Если Вы занимаетесь продвижением сайтов под буржунет, данная подборка должна быть Вам интересна.

Комментарии к "Предпросмотр комментариев с помощью jQuery"

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *