Skip to content

R
retypos-webclient
Commit 51941ff0 authored by Георгий Попов's avatar Георгий Попов
Browse files
Options

improve typos script. Add messages about comment

parent a3105056
Show whitespace changes
Inline Side-by-side
Showing with 109 additions and 64 deletions
etersoft_typos.js
View file @ 51941ff0
/* Плагин: сервис опечаток от компании Etersoft /* Плагин: сервис опечаток от компании Etersoft
* email: info@etersoft.ru * email: info@etersoft.ru
* автор: barbass@etersoft.ru * автор: barbass@etersoft.ru
* дата: 2012-04-18 * дата: 2012-04-18
*/ */
function ETYPOS(options) { function ETYPOS(options) {
this._init(options); this._init(options);
...@@ -33,8 +33,8 @@ ETYPOS.prototype = { ...@@ -33,8 +33,8 @@ ETYPOS.prototype = {
/* Переменные для перетаскивания */ /* Переменные для перетаскивания */
isDragged: false, isDragged: false,
isVisible: false, isVisible: false,
lastMousePos: { x: -1000, y: -1000 }, lastMousePos: {x: -1000, y: -1000},
lastBoxPos: { x: 0, y: 0 }, lastBoxPos: {x: 0, y: 0},
dragPadding: 10, dragPadding: 10,
//данные для отправки (сайт страницы, текст с ошибкой, комментарий, язык, броузер) //данные для отправки (сайт страницы, текст с ошибкой, комментарий, язык, броузер)
...@@ -46,13 +46,14 @@ ETYPOS.prototype = { ...@@ -46,13 +46,14 @@ ETYPOS.prototype = {
'old_browser': 0, 'old_browser': 0,
}, },
language: { language: {
'ru': { 'ru': {
'error_url': 'Не определен URL сайта', 'error_url': 'Не определен URL сайта',
'error_text': 'Текст не выделен', 'error_text': 'Текст не выделен',
'error_text_length': 'Длина текста должна быть от %s до %s символов (сейчас: %s)', 'error_text_length': 'Длина текста должна быть от %s до %s символов (сейчас: %s)',
'error_comment': 'Длина комментария должна быть до 30 символов (сейчас: %s)', 'error_comment_lenght': 'Длина комментария должна быть до 30 символов (сейчас: %s)',
'error_comment': 'Пожалуйста, укажите исправленный вариант',
'error_comment_useless': 'Исправленный вариант идентичен исходному',
'error_time_activity': 'Вы слишком часто отправляете данные', 'error_time_activity': 'Вы слишком часто отправляете данные',
'error_response': 'Ошибка при получении ответа', 'error_response': 'Ошибка при получении ответа',
'error_parse_reposnse': 'Ошибка при обработке ответа', 'error_parse_reposnse': 'Ошибка при обработке ответа',
...@@ -65,7 +66,7 @@ ETYPOS.prototype = { ...@@ -65,7 +66,7 @@ ETYPOS.prototype = {
}, },
// Создает контейнер и добавляет его в конец body // Создает контейнер и добавляет его в конец body
_createControlPanel: function() { _createControlPanel: function () {
/* Main div */ /* Main div */
var div = document.createElement("div"); var div = document.createElement("div");
...@@ -80,7 +81,7 @@ ETYPOS.prototype = { ...@@ -80,7 +81,7 @@ ETYPOS.prototype = {
/* Description */ /* Description */
var desc = document.createElement("p"); var desc = document.createElement("p");
desc.className = "e_typos_desc"; desc.className = "e_typos_desc";
desc.innerHTML = "Выделите текст и нажмите кнопку \"Отправить\""; desc.innerHTML = "Текст с ошибкой: \"<span class='e_typos_text'></span>\"";
/* Comment */ /* Comment */
...@@ -94,7 +95,7 @@ ETYPOS.prototype = { ...@@ -94,7 +95,7 @@ ETYPOS.prototype = {
comment.placeholder = "Должна быть буква..."; comment.placeholder = "Должна быть буква...";
var nobr = document.createElement("nobr"); var nobr = document.createElement("nobr");
var nobrText = document.createTextNode("Комментарий: "); var nobrText = document.createTextNode("Исправленный вариант: ");
nobr.appendChild(nobrText); nobr.appendChild(nobrText);
nobr.appendChild(comment); nobr.appendChild(comment);
...@@ -136,10 +137,10 @@ ETYPOS.prototype = { ...@@ -136,10 +137,10 @@ ETYPOS.prototype = {
}, },
// Нужны для onmousemove // Нужны для onmousemove
box_x : 0, box_x: 0,
box_y : 0, box_y: 0,
_handleEvents: function() { _handleEvents: function () {
var self = this; var self = this;
document.querySelector('.e_typos_div .e_typos_close').addEventListener('click', function () { document.querySelector('.e_typos_div .e_typos_close').addEventListener('click', function () {
...@@ -155,34 +156,45 @@ ETYPOS.prototype = { ...@@ -155,34 +156,45 @@ ETYPOS.prototype = {
window.document.onkeydown = function (e) { window.document.onkeydown = function (e) {
if (e.ctrlKey == 1 && e.keyCode == 13) { if (e.ctrlKey == 1 && e.keyCode == 13) {
self.selection = self.getSelectText(); self.selection = self.getSelectText();
if (self.selection === "" || self.selection === " ") {
alert("Сервис опечаток.\nДля отчета об ошибке выделите текст!");
return;
}
document.querySelector('.e_typos_text').innerHTML = self.selection.trim();
self.controlPanel(); self.controlPanel();
} }
}; };
this.element.addEventListener("mousedown", function(e) { this.element.addEventListener("mousedown", function (e) {
self.clearSelectedText();
self.lastMousePos.x = e.clientX; self.lastMousePos.x = e.clientX;
self.lastMousePos.y = e.clientY; self.lastMousePos.y = e.clientY;
self.lastBoxPos.x = self.element.offsetLeft; self.lastBoxPos.x = self.element.offsetLeft;
self.lastBoxPos.y = self.element.offsetTop; self.lastBoxPos.y = self.element.offsetTop;
self.isDragged = true; self.isDragged = true;
return false;
}); });
this.element.addEventListener("mouseup", function() { this.element.addEventListener("mouseup", function () {
self.isDragged = false; self.isDragged = false;
}); });
document.addEventListener("mousemove", function(e) { document.addEventListener("mousemove", function (e) {
if ( self.isDragged && self.isVisible && ( e.buttons & 1 ) ) { if (self.isDragged && self.isVisible && (e.buttons & 1)) {
self.box_x = ( self.lastBoxPos.x + ( e.clientX - self.lastMousePos.x ) ); self.box_x = (self.lastBoxPos.x + (e.clientX - self.lastMousePos.x));
self.box_y = ( self.lastBoxPos.y + ( e.clientY - self.lastMousePos.y ) ); self.box_y = (self.lastBoxPos.y + (e.clientY - self.lastMousePos.y));
if ( self.box_x + self.element.scrollWidth + self.dragPadding > window.innerWidth || if (self.box_x + self.element.scrollWidth + self.dragPadding > window.innerWidth ||
self.box_x < 0 ) { self.box_x < 0) {
return; return;
} }
if ( self.box_y + self.element.scrollHeight + self.dragPadding > window.innerHeight || if (self.box_y + self.element.scrollHeight + self.dragPadding > window.innerHeight ||
self.box_y < 0 ) { self.box_y < 0) {
return; return;
} }
...@@ -192,7 +204,7 @@ ETYPOS.prototype = { ...@@ -192,7 +204,7 @@ ETYPOS.prototype = {
}); });
}, },
_init: function(options) { _init: function (options) {
this.options = (options) ? options : {}; this.options = (options) ? options : {};
...@@ -213,24 +225,35 @@ ETYPOS.prototype = { ...@@ -213,24 +225,35 @@ ETYPOS.prototype = {
}, },
clearSelectedText: function () {
if (window.getSelection) {
if (window.getSelection().empty) { // Chrome
window.getSelection().empty();
} else if (window.getSelection().removeAllRanges) { // Firefox
window.getSelection().removeAllRanges();
}
} else if (document.selection) { // IE?
document.selection.empty();
}
},
/*Получаем выделенный текст*/ /*Получаем выделенный текст*/
getSelectText: function() { getSelectText: function () {
return (window.getSelection()) ? String(window.getSelection()) : this.selection; return (window.getSelection()) ? String(window.getSelection()) : this.selection;
}, },
/*Скрытие/показ окна*/ /*Скрытие/показ окна*/
controlPanel: function() { controlPanel: function () {
(this.element.style.display == "block") ? this.closeWindow() : this.openWindow(); (this.element.style.display === "block") ? this.closeWindow() : this.openWindow();
}, },
/*Открытие окна*/ /*Открытие окна*/
openWindow: function() { openWindow: function () {
//console.log(this.selection);
var main_div = this.element; var main_div = this.element;
//Определяем на какой позиции X, Y всплывет элемент //Определяем на какой позиции X, Y всплывет элемент
var top = window.pageYOffset + window.innerHeight/3; var top = window.pageYOffset + window.innerHeight / 3;
var left = window.pageXOffset + window.innerWidth/3; var left = window.pageXOffset + window.innerWidth / 3;
main_div.style.top = top + "px"; main_div.style.top = top + "px";
main_div.style.left = left + "px"; main_div.style.left = left + "px";
main_div.style.display = "none"; main_div.style.display = "none";
...@@ -244,19 +267,19 @@ ETYPOS.prototype = { ...@@ -244,19 +267,19 @@ ETYPOS.prototype = {
}, },
/*Закрытия окна*/ /*Закрытия окна*/
closeWindow: function() { closeWindow: function () {
this.element.style.display = "none"; this.element.style.display = "none";
this.isVisible = false; this.isVisible = false;
}, },
/*Проверка данных перед отправкой*/ /*Проверка данных перед отправкой*/
validateData: function() { validateData: function () {
if (typeof(this.userdata) != 'object') { if (typeof (this.userdata) !== 'object') {
throw new Error(this.language[this.default_language]['error_userdata']); throw new Error(this.language[this.default_language]['error_userdata']);
return false; return false;
} }
if (this.userdata['url'] == '') { if (this.userdata['url'] === '') {
this.error = this.language[this.default_language]['error_url']; this.error = this.language[this.default_language]['error_url'];
return false; return false;
} }
...@@ -270,13 +293,21 @@ ETYPOS.prototype = { ...@@ -270,13 +293,21 @@ ETYPOS.prototype = {
return false; return false;
} }
if (!this.userdata['comment']) {
this.error = this.language[this.default_language]['error_comment'];
return false;
} else if ( this.userdata['comment'] == this.userdata['text'] ) {
this.error = this.language[this.default_language]['error_comment_useless'];
return false;
}
if (this.userdata['text'].length < 5 || this.userdata['text'].length > 30) { if (this.userdata['text'].length < 5 || this.userdata['text'].length > 30) {
this.error = "Выделенный текст должен быть длиной от 5 до 30 символов (сейчас: "+this.userdata['text'].length+")"; this.error = "Выделенный текст должен быть длиной от 5 до 30 символов (сейчас: " + this.userdata['text'].length + ")";
return false; return false;
} }
if (this.userdata['comment'].length > 30) { if (this.userdata['comment'].length > 30) {
this.error = "Комментарий должен быть длиной до 30 символов (сейчас: "+this.userdata['comment'].length+")"; this.error = "Комментарий должен быть длиной до 30 символов (сейчас: " + this.userdata['comment'].length + ")";
return false; return false;
} }
...@@ -284,17 +315,19 @@ ETYPOS.prototype = { ...@@ -284,17 +315,19 @@ ETYPOS.prototype = {
}, },
/*Сбор данных*/ /*Сбор данных*/
postData: function() { postData: function () {
this.userdata['url'] = window.location.href; this.userdata['url'] = window.location.href;
this.userdata['text'] = this.getSelectText(); this.userdata['text'] = this.selection.trim();
this.userdata['comment'] = (document.querySelector(".e_typos_div .e_typos_comment")) ? document.querySelector(".e_typos_div .e_typos_comment").value : ''; this.userdata['comment'] = (document.querySelector(".e_typos_div .e_typos_comment")) ? document.querySelector(".e_typos_div .e_typos_comment").value : '';
this.userdata['comment'] = this.userdata['comment'].trim();
try { try {
if (!this.validateData()) { if (!this.validateData()) {
this.printMessage('error', this.error); this.printMessage('error', this.error);
return false; return false;
} }
} catch(error) {alert(error); } catch (error) {
alert(error);
this.printMessage('error', error.message); this.printMessage('error', error.message);
return false; return false;
} }
...@@ -309,32 +342,34 @@ ETYPOS.prototype = { ...@@ -309,32 +342,34 @@ ETYPOS.prototype = {
}, },
/*Создание формы с данными*/ /*Создание формы с данными*/
formData: function() { formData: function () {
if (! new FormData()) { if (!new FormData()) {
throw new Error("FormData() не поддерживается"); throw new Error("FormData() не поддерживается");
return false; return false;
} }
var form_data = new FormData(); var form_data = new FormData();
for(var key in this.userdata) { for (var key in this.userdata) {
form_data.append(key, this.userdata[key]); form_data.append(key, this.userdata[key]);
} }
return form_data; return form_data;
}, },
/*Отправка данных на старых броузерах*/ /*Отправка данных на старых броузерах*/
ajaxQueryOldBrowser: function() { ajaxQueryOldBrowser: function () {
var this_object = this; var this_object = this;
window.open(this.server_url+'?old_browser='+encodeURIComponent(this.userdata['old_browser'])+'&url='+encodeURI(this.userdata['url'])+'&comment='+encodeURIComponent(this.userdata['comment'])+'&text='+encodeURIComponent(this.userdata['text']+'&language='+encodeURIComponent(this.userdata['language'])), '_blank'); window.open(this.server_url + '?old_browser=' + encodeURIComponent(this.userdata['old_browser']) + '&url=' + encodeURI(this.userdata['url']) + '&comment=' + encodeURIComponent(this.userdata['comment']) + '&text=' + encodeURIComponent(this.userdata['text'] + '&language=' + encodeURIComponent(this.userdata['language'])), '_blank');
window.parent.focus(); window.parent.focus();
this.printMessage("success", this.language[this.default_language]['text_success']); this.printMessage("success", this.language[this.default_language]['text_success']);
window.setTimeout(function() {this_object.closeWindow();}, 4000); window.setTimeout(function () {
this_object.closeWindow();
}, 4000);
return true; return true;
}, },
/*Отправка запроса*/ /*Отправка запроса*/
ajaxQuery: function() { ajaxQuery: function () {
var this_object = this; var this_object = this;
try { try {
...@@ -349,14 +384,14 @@ ETYPOS.prototype = { ...@@ -349,14 +384,14 @@ ETYPOS.prototype = {
return false; return false;
} else { } else {
this.last_query_time = this.getTime(); this.last_query_time = this.getTime();
this.setStorage("etersoft_typos/"+window.location.hostname+"", this.getTime()); this.setStorage("etersoft_typos/" + window.location.hostname + "", this.getTime());
} }
this.printMessage("attention", this.language[this.default_language]['text_post_data']); this.printMessage("attention", this.language[this.default_language]['text_post_data']);
this.request.open("POST", this.server_url, true); this.request.open("POST", this.server_url, true);
this.request.onload = function() { this.request.onload = function () {
try { try {
var response = window.JSON.parse(this_object.request.responseText); var response = window.JSON.parse(this_object.request.responseText);
...@@ -375,31 +410,32 @@ ETYPOS.prototype = { ...@@ -375,31 +410,32 @@ ETYPOS.prototype = {
this_object.printMessage('error', this_object.language[this_object.default_language]['error_response_parse']); this_object.printMessage('error', this_object.language[this_object.default_language]['error_response_parse']);
} }
}; };
this.request.onerror = function() { this.request.onerror = function () {
this_object.printMessage("error", this_object.language[this_object.default_language]['error_post_data']); this_object.printMessage("error", this_object.language[this_object.default_language]['error_post_data']);
}; };
this.request.send(form_data); this.request.send(form_data);
}, },
/*Печатаем сообщение пользователю в окно*/ /*Печатаем сообщение пользователю в окно*/
printMessage: function(status, text) { printMessage: function (status, text) {
document.querySelector(".e_typos_div .e_typos_message").innerHTML = "<span class='"+status+"'>"+text+"</span>"; document.querySelector(".e_typos_div .e_typos_message").innerHTML = "<span class='" + status + "'>" + text + "</span>";
}, },
//Вывод текста, выделенного пользователем //Вывод текста, выделенного пользователем
printUserText: function(text) { printUserText: function (text) {
document.querySelector(".e_typos_div .e_typos_user_text").style.display = "block"; document.querySelector(".e_typos_div .e_typos_user_text").style.display = "block";
document.querySelector(".e_typos_div .e_typos_user_text").innerHTML = "Ваш текст: "+text; document.querySelector(".e_typos_div .e_typos_user_text").innerHTML = "Ваш текст: " + text;
}, },
/*Проверяем время, прошедшее с последнего отправления данных*/ /*Проверяем время, прошедшее с последнего отправления данных*/
checkTime: function() { checkTime: function () {
var prev_time = (parseInt(this.getStorage("etersoft_typos/"+window.location.hostname))) ? parseInt(this.getStorage("etersoft_typos/"+window.location.hostname)) : parseInt(this.last_query_time); var prev_time = (parseInt(this.getStorage("etersoft_typos/" + window.location.hostname))) ? parseInt(this.getStorage("etersoft_typos/" + window.location.hostname)) : parseInt(this.last_query_time);
if (isNaN(prev_time)) { if (isNaN(prev_time)) {
return true; return true;
} }
if ( (this.getTime() - prev_time) < this.request_delay) { if ((this.getTime() - prev_time) < this.request_delay) {
return false; return false;
} }
...@@ -407,12 +443,12 @@ ETYPOS.prototype = { ...@@ -407,12 +443,12 @@ ETYPOS.prototype = {
}, },
/*Получаем текущее время*/ /*Получаем текущее время*/
getTime: function() { getTime: function () {
return new Date().getTime(); return new Date().getTime();
}, },
/*Получаем из sessionStorage данные*/ /*Получаем из sessionStorage данные*/
getStorage: function(key) { getStorage: function (key) {
if (window['sessionStorage']) { if (window['sessionStorage']) {
return (sessionStorage.getItem(key)) ? sessionStorage.getItem(key) : false; return (sessionStorage.getItem(key)) ? sessionStorage.getItem(key) : false;
} else { } else {
...@@ -421,9 +457,9 @@ ETYPOS.prototype = { ...@@ -421,9 +457,9 @@ ETYPOS.prototype = {
}, },
/*Устанавливаем в sessionStorage данные*/ /*Устанавливаем в sessionStorage данные*/
setStorage: function(key, data) { setStorage: function (key, data) {
if (window['sessionStorage']) { if (window['sessionStorage']) {
sessionStorage.setItem(key+"", data); sessionStorage.setItem(key + "", data);
return true; return true;
} }
return false; return false;
......
etersoft_typos_language-ru.js
View file @ 51941ff0
...@@ -2,7 +2,9 @@ ETYPOS.prototype.language['ru'] = { ...@@ -2,7 +2,9 @@ ETYPOS.prototype.language['ru'] = {
'error_url': 'Не определен URL сайта', 'error_url': 'Не определен URL сайта',
'error_text': 'Текст не выделен', 'error_text': 'Текст не выделен',
'error_text_length': 'Длина текста должна быть от %s до %s символов (сейчас: %s)', 'error_text_length': 'Длина текста должна быть от %s до %s символов (сейчас: %s)',
'error_comment': 'Длина комментария должна быть до 30 символов (сейчас: %s)', 'error_comment_lenght': 'Длина комментария должна быть до 30 символов (сейчас: %s)',
'error_comment': 'Пожалуйста, укажите исправленный вариант',
'error_comment_useless': 'Исправленный вариант идентичен исходному',
'error_time_activity': 'Вы слишком часто отправляете данные', 'error_time_activity': 'Вы слишком часто отправляете данные',
'error_response': 'Ошибка при получении ответа', 'error_response': 'Ошибка при получении ответа',
'error_response_parse': 'Ошибка при обработке ответа', 'error_response_parse': 'Ошибка при обработке ответа',
...@@ -10,6 +12,6 @@ ETYPOS.prototype.language['ru'] = { ...@@ -10,6 +12,6 @@ ETYPOS.prototype.language['ru'] = {
'error_userdata': 'userdata is not Object', 'error_userdata': 'userdata is not Object',
'text_post_data': 'Идет отправка данных...', 'text_post_data': 'Идет отправка данных...',
'text_success': 'Спасибо за ваше внимание!', 'text_success': 'Спасибо за ваше внимание!'
}; };
stylesheet.css
View file @ 51941ff0
...@@ -12,6 +12,7 @@ ...@@ -12,6 +12,7 @@
-moz-user-select: none; -moz-user-select: none;
-webkit-user-select: none; -webkit-user-select: none;
border: 1px solid #4169e1; border: 1px solid #4169e1;
cursor: pointer;
} }
.e_typos_div .e_typos_title { .e_typos_div .e_typos_title {
...@@ -87,3 +88,8 @@ ...@@ -87,3 +88,8 @@
.e_typos_div .e_typos_controll_buttons .e_typos_post { .e_typos_div .e_typos_controll_buttons .e_typos_post {
margin-right: 40px; margin-right: 40px;
} }
.e_typos_text {
color: red;
font-size: 110%;
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment