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
* email: info@etersoft.ru
* автор: barbass@etersoft.ru
* дата: 2012-04-18
*/
* email: info@etersoft.ru
* автор: barbass@etersoft.ru
* дата: 2012-04-18
*/
function ETYPOS(options) {
this._init(options);
......@@ -33,8 +33,8 @@ ETYPOS.prototype = {
/* Переменные для перетаскивания */
isDragged: false,
isVisible: false,
lastMousePos: { x: -1000, y: -1000 },
lastBoxPos: { x: 0, y: 0 },
lastMousePos: {x: -1000, y: -1000},
lastBoxPos: {x: 0, y: 0},
dragPadding: 10,
//данные для отправки (сайт страницы, текст с ошибкой, комментарий, язык, броузер)
......@@ -46,13 +46,14 @@ ETYPOS.prototype = {
'old_browser': 0,
},
language: {
'ru': {
'error_url': 'Не определен URL сайта',
'error_text': 'Текст не выделен',
'error_text_length': 'Длина текста должна быть от %s до %s символов (сейчас: %s)',
'error_comment': 'Длина комментария должна быть до 30 символов (сейчас: %s)',
'error_comment_lenght': 'Длина комментария должна быть до 30 символов (сейчас: %s)',
'error_comment': 'Пожалуйста, укажите исправленный вариант',
'error_comment_useless': 'Исправленный вариант идентичен исходному',
'error_time_activity': 'Вы слишком часто отправляете данные',
'error_response': 'Ошибка при получении ответа',
'error_parse_reposnse': 'Ошибка при обработке ответа',
......@@ -65,7 +66,7 @@ ETYPOS.prototype = {
},
// Создает контейнер и добавляет его в конец body
_createControlPanel: function() {
_createControlPanel: function () {
/* Main div */
var div = document.createElement("div");
......@@ -80,7 +81,7 @@ ETYPOS.prototype = {
/* Description */
var desc = document.createElement("p");
desc.className = "e_typos_desc";
desc.innerHTML = "Выделите текст и нажмите кнопку \"Отправить\"";
desc.innerHTML = "Текст с ошибкой: \"<span class='e_typos_text'></span>\"";
/* Comment */
......@@ -94,7 +95,7 @@ ETYPOS.prototype = {
comment.placeholder = "Должна быть буква...";
var nobr = document.createElement("nobr");
var nobrText = document.createTextNode("Комментарий: ");
var nobrText = document.createTextNode("Исправленный вариант: ");
nobr.appendChild(nobrText);
nobr.appendChild(comment);
......@@ -136,10 +137,10 @@ ETYPOS.prototype = {
},
// Нужны для onmousemove
box_x : 0,
box_y : 0,
box_x: 0,
box_y: 0,
_handleEvents: function() {
_handleEvents: function () {
var self = this;
document.querySelector('.e_typos_div .e_typos_close').addEventListener('click', function () {
......@@ -155,34 +156,45 @@ ETYPOS.prototype = {
window.document.onkeydown = function (e) {
if (e.ctrlKey == 1 && e.keyCode == 13) {
self.selection = self.getSelectText();
if (self.selection === "" || self.selection === " ") {
alert("Сервис опечаток.\nДля отчета об ошибке выделите текст!");
return;
}
document.querySelector('.e_typos_text').innerHTML = self.selection.trim();
self.controlPanel();
}
};
this.element.addEventListener("mousedown", function(e) {
this.element.addEventListener("mousedown", function (e) {
self.clearSelectedText();
self.lastMousePos.x = e.clientX;
self.lastMousePos.y = e.clientY;
self.lastBoxPos.x = self.element.offsetLeft;
self.lastBoxPos.y = self.element.offsetTop;
self.isDragged = true;
return false;
});
this.element.addEventListener("mouseup", function() {
this.element.addEventListener("mouseup", function () {
self.isDragged = false;
});
document.addEventListener("mousemove", function(e) {
if ( self.isDragged && self.isVisible && ( e.buttons & 1 ) ) {
self.box_x = ( self.lastBoxPos.x + ( e.clientX - self.lastMousePos.x ) );
self.box_y = ( self.lastBoxPos.y + ( e.clientY - self.lastMousePos.y ) );
document.addEventListener("mousemove", function (e) {
if (self.isDragged && self.isVisible && (e.buttons & 1)) {
self.box_x = (self.lastBoxPos.x + (e.clientX - self.lastMousePos.x));
self.box_y = (self.lastBoxPos.y + (e.clientY - self.lastMousePos.y));
if ( self.box_x + self.element.scrollWidth + self.dragPadding > window.innerWidth ||
self.box_x < 0 ) {
if (self.box_x + self.element.scrollWidth + self.dragPadding > window.innerWidth ||
self.box_x < 0) {
return;
}
if ( self.box_y + self.element.scrollHeight + self.dragPadding > window.innerHeight ||
self.box_y < 0 ) {
if (self.box_y + self.element.scrollHeight + self.dragPadding > window.innerHeight ||
self.box_y < 0) {
return;
}
......@@ -192,7 +204,7 @@ ETYPOS.prototype = {
});
},
_init: function(options) {
_init: function (options) {
this.options = (options) ? options : {};
......@@ -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;
},
/*Скрытие/показ окна*/
controlPanel: function() {
(this.element.style.display == "block") ? this.closeWindow() : this.openWindow();
controlPanel: function () {
(this.element.style.display === "block") ? this.closeWindow() : this.openWindow();
},
/*Открытие окна*/
openWindow: function() {
//console.log(this.selection);
openWindow: function () {
var main_div = this.element;
//Определяем на какой позиции X, Y всплывет элемент
var top = window.pageYOffset + window.innerHeight/3;
var left = window.pageXOffset + window.innerWidth/3;
var top = window.pageYOffset + window.innerHeight / 3;
var left = window.pageXOffset + window.innerWidth / 3;
main_div.style.top = top + "px";
main_div.style.left = left + "px";
main_div.style.display = "none";
......@@ -244,19 +267,19 @@ ETYPOS.prototype = {
},
/*Закрытия окна*/
closeWindow: function() {
closeWindow: function () {
this.element.style.display = "none";
this.isVisible = false;
},
/*Проверка данных перед отправкой*/
validateData: function() {
if (typeof(this.userdata) != 'object') {
validateData: function () {
if (typeof (this.userdata) !== 'object') {
throw new Error(this.language[this.default_language]['error_userdata']);
return false;
}
if (this.userdata['url'] == '') {
if (this.userdata['url'] === '') {
this.error = this.language[this.default_language]['error_url'];
return false;
}
......@@ -270,13 +293,21 @@ ETYPOS.prototype = {
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) {
this.error = "Выделенный текст должен быть длиной от 5 до 30 символов (сейчас: "+this.userdata['text'].length+")";
this.error = "Выделенный текст должен быть длиной от 5 до 30 символов (сейчас: " + this.userdata['text'].length + ")";
return false;
}
if (this.userdata['comment'].length > 30) {
this.error = "Комментарий должен быть длиной до 30 символов (сейчас: "+this.userdata['comment'].length+")";
this.error = "Комментарий должен быть длиной до 30 символов (сейчас: " + this.userdata['comment'].length + ")";
return false;
}
......@@ -284,17 +315,19 @@ ETYPOS.prototype = {
},
/*Сбор данных*/
postData: function() {
postData: function () {
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'] = this.userdata['comment'].trim();
try {
if (!this.validateData()) {
this.printMessage('error', this.error);
return false;
}
} catch(error) {alert(error);
} catch (error) {
alert(error);
this.printMessage('error', error.message);
return false;
}
......@@ -309,32 +342,34 @@ ETYPOS.prototype = {
},
/*Создание формы с данными*/
formData: function() {
if (! new FormData()) {
formData: function () {
if (!new FormData()) {
throw new Error("FormData() не поддерживается");
return false;
}
var form_data = new FormData();
for(var key in this.userdata) {
for (var key in this.userdata) {
form_data.append(key, this.userdata[key]);
}
return form_data;
},
/*Отправка данных на старых броузерах*/
ajaxQueryOldBrowser: function() {
ajaxQueryOldBrowser: function () {
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();
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;
},
/*Отправка запроса*/
ajaxQuery: function() {
ajaxQuery: function () {
var this_object = this;
try {
......@@ -349,14 +384,14 @@ ETYPOS.prototype = {
return false;
} else {
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.request.open("POST", this.server_url, true);
this.request.onload = function() {
this.request.onload = function () {
try {
var response = window.JSON.parse(this_object.request.responseText);
......@@ -375,31 +410,32 @@ ETYPOS.prototype = {
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.request.send(form_data);
},
/*Печатаем сообщение пользователю в окно*/
printMessage: function(status, text) {
document.querySelector(".e_typos_div .e_typos_message").innerHTML = "<span class='"+status+"'>"+text+"</span>";
printMessage: function (status, text) {
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").innerHTML = "Ваш текст: "+text;
document.querySelector(".e_typos_div .e_typos_user_text").innerHTML = "Ваш текст: " + text;
},
/*Проверяем время, прошедшее с последнего отправления данных*/
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);
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);
if (isNaN(prev_time)) {
return true;
}
if ( (this.getTime() - prev_time) < this.request_delay) {
if ((this.getTime() - prev_time) < this.request_delay) {
return false;
}
......@@ -407,12 +443,12 @@ ETYPOS.prototype = {
},
/*Получаем текущее время*/
getTime: function() {
getTime: function () {
return new Date().getTime();
},
/*Получаем из sessionStorage данные*/
getStorage: function(key) {
getStorage: function (key) {
if (window['sessionStorage']) {
return (sessionStorage.getItem(key)) ? sessionStorage.getItem(key) : false;
} else {
......@@ -421,9 +457,9 @@ ETYPOS.prototype = {
},
/*Устанавливаем в sessionStorage данные*/
setStorage: function(key, data) {
setStorage: function (key, data) {
if (window['sessionStorage']) {
sessionStorage.setItem(key+"", data);
sessionStorage.setItem(key + "", data);
return true;
}
return false;
......
etersoft_typos_language-ru.js
View file @ 51941ff0
......@@ -2,7 +2,9 @@ ETYPOS.prototype.language['ru'] = {
'error_url': 'Не определен URL сайта',
'error_text': 'Текст не выделен',
'error_text_length': 'Длина текста должна быть от %s до %s символов (сейчас: %s)',
'error_comment': 'Длина комментария должна быть до 30 символов (сейчас: %s)',
'error_comment_lenght': 'Длина комментария должна быть до 30 символов (сейчас: %s)',
'error_comment': 'Пожалуйста, укажите исправленный вариант',
'error_comment_useless': 'Исправленный вариант идентичен исходному',
'error_time_activity': 'Вы слишком часто отправляете данные',
'error_response': 'Ошибка при получении ответа',
'error_response_parse': 'Ошибка при обработке ответа',
......@@ -10,6 +12,6 @@ ETYPOS.prototype.language['ru'] = {
'error_userdata': 'userdata is not Object',
'text_post_data': 'Идет отправка данных...',
'text_success': 'Спасибо за ваше внимание!',
'text_success': 'Спасибо за ваше внимание!'
};
stylesheet.css
View file @ 51941ff0
......@@ -12,6 +12,7 @@
-moz-user-select: none;
-webkit-user-select: none;
border: 1px solid #4169e1;
cursor: pointer;
}
.e_typos_div .e_typos_title {
......@@ -87,3 +88,8 @@
.e_typos_div .e_typos_controll_buttons .e_typos_post {
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