Пишем модуль "нашли ошибку? - нажимай Ctrl+Q" для сайта своими руками
Заметили ошибку ?
Выделите это место и нажмите Ctrl + Q

Пишем модуль "нашли ошибку? - нажимай Ctrl+Q" для сайта своими руками


Всем привет! Давно не писал потому, что уже наступило жаркое лето, и я старался поменьше сидеть за компом, занимался спортом и принимал солнечные ванны. Сегодняшняя статья посвящена модулю: "Заметили Ошибку? - нажимай Ctrl + Q". Мне пришлось ввести данный модуль в связи с критикой моих посетителей, в частности Николая, за многочисленные ошибки по русскому языку. И этот модуль себя хорошо зарекомендовал. Уже множество ошибок исправлено благодаря нему и вам, неравнодушным читателям. Думаю, и Вам он может пригодится на вашем сайте. Также сегодня посоветовался с одним ГУРУ веб-программирования, который помог избавится от некрасивых мест в коде.

Так что, поехали!

Формулируем задачу: При обнаружении пользователем ошибки он выделяет данный текст и нажимает CTRL + Q. Всплывает модальное окно с текстовым полем, где уже находится выделенный текст, и кнопкой отправить. Пользователь поправляет ошибку в тексте и нажимает отправить. Нам на почту приходит: адрес страницы с которой произошла отправка формы, выделенный текст и поправленный вариант. Можно и не на почту сделать, а в админку CMS. Но у меня пока админка CMS не доделана, поэтому будем пока отсылать на почту.



Скрипт использует библиотеку jquery-1.9.0.min.js

Отслеживаем нажатие CTRL+Q
var isCtrl = false;

$(document).keyup(function (e) {
  if(e.which == 17) isCtrl=false;
}).keydown(function (e) {

  if(e.which == 17) isCtrl=true;
  if(e.which == 81 && isCtrl == true) {

     // Здесь можем писать действия, которые необходимы при нажатии CTRL+Q
  }

});

Далее необходимо, чтобы у нас всплывало модальное окно. Поискав немного в интернете, нашёлся отличный вариант. В него сразу прописываем форму с текстовым полем и кнопкой отправить. Вставляем перед закрывающимся тегом </body>.
<div id="modal_form"><!-- Сaмo oкнo --> 
      <span id="modal_close">X</span> <!-- Кнoпкa зaкрыть --> 
      <!-- Тут любoе сoдержимoе -->
	  <div id='content_modal_error'>
	  <h2 align='center' style='color:#490301;'>Опишите, пожалуйста, ошибку</h2>
	  
	  <form name='from_error' id='from_error'>
	  <textarea id='modal_form_text' align='left' maxlength="500">
	  </textarea>
	  <br><br>
	  <input type='submit' value='Отправить' class='button13' name='sub_from_error' style='margin-left:260px;'>
	  </form>
	  </div>
</div>
<div id="overlay">
</div><!-- Пoдлoжкa -->

Скрипт для модального окна + делаем в фокусе текстовое поле. При закрытии необходимо с помощью innerHTML в модальное окно вписать то, что было в первоначальном положении (т.е. нашу форму), иначе при повтором запуске у пользователя могут остаться предыдущие сообщения, например, об успешной отправке формы.
...
$('#overlay').fadeIn(400, // снaчaлa плaвнo пoкaзывaем темную пoдлoжку
   function(){ // пoсле выпoлнения предыдущей aнимaции
			
			
   $('#modal_form') 
	.css('display', 'block') // убирaем у мoдaльнoгo oкнa display: none;	
	.animate({opacity: 1, top: '50%'}, 200); // плaвнo прибaвляем прoзрaчнoсть oднoвременнo сo съезжaнием вниз
				 
    // Делаем текстовое поле в фокусе.
    var modal_form_text = document.getElementById("modal_form_text"); 			
    modal_form_text.focus();
			
});

/* Зaкрытие мoдaльнoгo oкнa, тут делaем тo же сaмoе нo в oбрaтнoм пoрядке */
$('#modal_close, #overlay').click( function(){ // лoвим клик пo крестику или пoдлoжке
  $('#modal_form')
	.animate({opacity: 0, top: '45%'}, 200,  // плaвнo меняем прoзрaчнoсть нa 0 и oднoвременнo двигaем oкнo вверх
	      function(){ // пoсле aнимaции
		    $(this).css('display', 'none'); // делaем ему display: none;
		    $('#overlay').fadeOut(400); // скрывaем пoдлoжку
               }
         );
			
			
  var content_modal = document.getElementById("content_modal_error");
			
  content_modal.innerHTML = "<h2 align='center' style='color:#490301;'>Опишите, пожалуйста, ошибку</h2><form name='from_error'      id='from_error'><textarea id='modal_form_text' align='left' maxlength='500'></textarea><br><br><input type='submit' value='Отправить' class='button13' name='sub_from_error' style='margin-left:260px;'></form>";
			
});
...

Стили (Также прикладываю стили для кнопки):
#modal_form {
	width: 700px; 
	height: 300px; /* Рaзмеры дoлжны быть фиксирoвaны */
	border-radius: 5px;
	border: 3px #000 solid;
	background: #fff;
	position: fixed; /* чтoбы oкнo былo в видимoй зoне в любoм месте */
	top: 45%; /* oтступaем сверху 45%, oстaльные 5% пoдвинет скрипт */
	left: 50%; /* пoлoвинa экрaнa слевa */
	margin-top: -150px;
	margin-left: -350px; /* тут вся мaгия центрoвки css, oтступaем влевo и вверх минус пoлoвину ширины и высoты сooтветственнo =) */
	display: none; /* в oбычнoм сoстoянии oкнa не дoлжнo быть */
	opacity: 0; /* пoлнoстью прoзрaчнo для aнимирoвaния */
	z-index: 9999; /* oкнo дoлжнo быть нaибoлее бoльшем слoе */
	padding: 20px 10px;
}
/* Кнoпкa зaкрыть  */
#modal_form #modal_close {
	width: 21px;
	height: 21px;
	position: absolute;
	top: 10px;
	right: 10px;
	cursor: pointer;
	display: block;
}
/* Пoдлoжкa */
#overlay {
	z-index:9998; /* пoдлoжкa дoлжнa быть выше слoев элементoв сaйтa, нo ниже слoя мoдaльнoгo oкнa */
	position:fixed; /* всегдa перекрывaет весь сaйт */
	background-color:#000; /* чернaя */
	opacity:0.8; /* нo немнoгo прoзрaчнa */
	-moz-opacity:0.8; /* фикс прозрачности для старых браузеров */
	filter:alpha(opacity=80);
	width:100%; 
	height:100%; /* рaзмерoм вo весь экрaн */
	top:0; /* сверху и слевa 0, oбязaтельные свoйствa! */
	left:0;
	cursor:pointer;
	display:none; /* в oбычнoм сoстoянии её нет) */
}

#modal_form_text {
	margin-top:20px;
	margin-left:50px;
	width:600px;
	height:150px;
	border:1px solid gray;
	resize: none;
	padding:5px;
	
}
input.button13 {
  display: inline-block;
  width: 15em;
  font-size: 80%;
  color: rgba(255,255,255,.8);
  text-shadow: #543e3c 0 1px 2px;
  text-decoration: none;
  text-align: center;
  line-height: 1.1;
  white-space: pre-line;
  padding: .7em 0;
  border: 1px solid;
  border-color: #72140c #72140c #72140c #72140c;
  border-radius: 6px;
  outline: none;
  background: #60a3d8 linear-gradient(#3c0b06, #580f08 50%, #72140c);
  box-shadow: inset rgba(255,255,255,.5) 1px 1px;
  height:40px;
}
input.button13:first-line{
  font-size: 140%;
  font-weight: 700;
}
input.button13:hover {
  color: rgb(255,255,255);
  background-image: linear-gradient(#3c0b06, #580f08 50%, #72140c);
}
input.button13:active {
  color: rgb(255,255,255);
  border-color: #2970a9;
  background-image: linear-gradient(#a40d00, #a40d00);
  box-shadow: none;
}

Отлично! Будем использовать для получении информации о выделенном тексте пользователя функцию:
function getSelectedText() 
{
    var text = "";
    if (window.getSelection) {
        text = window.getSelection().toString();
    }else if (document.getSelection) {
        text = document.getSelection().toString();
    }else if (document.selection) {
        text = document.selection.createRange().text.toString();
    }
    return text;
}
Таким образом, помещаем в текстовое поле то, что именно выделил пользователь:
...
if(e.which == 17) isCtrl=true;
if(e.which == 81 && isCtrl == true) {
		
  TextSelect = getSelectedText();		
  $('#modal_form_text').val(TextSelect);
 
   ...

}
...
Пишем обработчик события отправки формы. С помощью ajax отправляем три параметра: Выделенный текст, исправленный вариант с текстового поля модального окна и URL страницы (с которой отослали сообщение). Как только отправили, если сервер немного тормозит - ставим гиф-картинку с крутящимся колёсиком.
$('#from_error').submit(function(){
			
    var url = window.location.pathname;
    var modal_form_text = $('#modal_form_text').val();
			
    $.post('/ajax/detect_error.php', {TextSelect: TextSelect, url: url, modal_form_text: modal_form_text}, detect_func);			
    var content_modal = document.getElementById("content_modal_error");			
    content_modal.innerHTML = "<br><br><br><center><img src='/images/ajax_loader_red_512.gif' width='150' height='150'></center>";
    
    // Функция, которая запускается при ответе сервера при ajax запросе.	
    function detect_func(data) {
        var data_str = "";
	if(data == "") {
         data_str = "<center><br><br><br><Br><span style='color:red;'>Идут технические работы - попробуйте позже</span>  </center>";
    }
	else {	
	       data_str = data.toString();		
	}
			
	var content_modal = document.getElementById("content_modal_error");
	content_modal.innerHTML = data_str;
			
   } 
			
  return false;
			
});

Ловим с помощью php скрипта ajax запрос:
if(isset($_POST['TextSelect']) && isset($_POST['url']) && isset($_POST['modal_form_text'])) {
		
		
		$_POST['TextSelect'] = trim($_POST['TextSelect']);
		$_POST['url'] = trim($_POST['url']);
		$_POST['modal_form_text'] = trim($_POST['modal_form_text']);
		
		
		$_POST['TextSelect'] = strip_tags($_POST['TextSelect']);
		$_POST['url'] = strip_tags($_POST['url']);
		$_POST['modal_form_text'] = strip_tags($_POST['modal_form_text']);
		
		
		$_POST['TextSelect'] = substr($_POST['TextSelect'], 0, 500);
		$_POST['url'] = substr($_POST['url'], 0, 255);
		$_POST['modal_form_text']  = substr($_POST['modal_form_text'], 0, 500);
		
		
		$from = "Content-type: text/plain; charset=utf-8"."\r\n";
		$from = $from.'From: xxx@gmail.com';
		
		
		$subject = "Сайт yyy Присалил ошибку" ;
		$message = "\n\n URL:".$_POST['url'] ;
		$message = $message."\n\n Выделенный текст:".$_POST['TextSelect'];
		$message = $message."\n\n Описание ошибки:".$_POST['modal_form_text'];
		
		if (!mail( "zzz@yandex.ru", $subject, $message,  $from)) {
           
				echo "Письмо не отправлено. Ошибка 1. Сообщите Администратору.";
				exit;
			}
			else {
				
				echo "<br><Br><br><Br><br><h2 align='center' style='color:#742c2c;'>Спасибо за ваше замечание! В ближайшее время я его рассмотрю.</h2>";
				
			}
		
}

Именно он и отсылает данные на E-mail: zzz@yandex.ru

Файлы для данного скрипта: Скачать модуль "Нашли ошибку - нажимай Ctrl + Q"

Счастливого программирования!


23-06-2016 в 01:08:41





Если у Вас что-то не получилось или Вы не имеете достаточных навыков по программированию, но ВСЁ РАВНО хотите данный скрипт к себе на сайт - можете обратится ко мне за помощью, и я Вам помогу!
Хочу такой скрипт к себе на Сайт

Похожая статья:

Отличный выпадающий календарь на Jquery для Вашего сайта

Сегодня рассмотрим прекрасный календарь на Jquery для Вашего сайта. Ка...

Категория: JavaScript  Подкатегория: Скрипты
Дата: 15-01-2018 в 16:47:34 0



Оставить коментарий:



Напишите email, чтобы получать сообщения о новых комментариях (необязательно):


Задача против робота:

Ответ:


Последние
видео:



Шейкер-сортировка (С#)
ОГЭ по информатике. Задание 18


Подготовка к
ОГЭ


Подготовка к ОГЭ по информатике


Давайте
дружить!


Группа Вконтакте Code-Enjoy

Твиттер Александра Калужского

YouTube канал Code-Enjoy