fix html and css

parent d348ccf7
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
*/ */
function ETYPOS(options) { function ETYPOS(options) {
this.init(options); this._init(options);
this._createControlPanel(); this._createControlPanel();
this._handleEvents(); this._handleEvents();
} }
...@@ -26,6 +26,8 @@ ETYPOS.prototype = { ...@@ -26,6 +26,8 @@ ETYPOS.prototype = {
//язык по умочланияю //язык по умочланияю
default_language: 'ru', default_language: 'ru',
selection: '',
//данные для отправки (сайт страницы, текст с ошибкой, комментарий, язык, броузер) //данные для отправки (сайт страницы, текст с ошибкой, комментарий, язык, броузер)
userdata: { userdata: {
'url': '', 'url': '',
...@@ -63,13 +65,13 @@ ETYPOS.prototype = { ...@@ -63,13 +65,13 @@ ETYPOS.prototype = {
/* Title */ /* Title */
var title = document.createElement("div"); var title = document.createElement("div");
title.className = "e_typos_title"; title.className = "e_typos_title";
title.innerHtml = "<span>Сервис Опечаток</span>\n\ title.innerHTML = "<span>Сервис Опечаток</span>\n\
<span title='Закрыть окно' class='e_typos_close'><b>x</b></span>"; <span title='Закрыть окно' class='e_typos_close'><b>x</b></span>";
/* 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 = "Выделите текст и нажмите кнопку \"Отправить\"";
/* Comment */ /* Comment */
...@@ -90,7 +92,7 @@ ETYPOS.prototype = { ...@@ -90,7 +92,7 @@ ETYPOS.prototype = {
p.appendChild(nobr); p.appendChild(nobr);
/* Message */ /* Message */
var message = document.createElement("input"); var message = document.createElement("p");
message.className = "e_typos_message"; message.className = "e_typos_message";
/* Controls */ /* Controls */
...@@ -109,12 +111,12 @@ ETYPOS.prototype = { ...@@ -109,12 +111,12 @@ ETYPOS.prototype = {
closeButton.title = "Закрыть окно"; closeButton.title = "Закрыть окно";
closeButton.value = "Закрыть"; closeButton.value = "Закрыть";
controls.addChildNode(postButton); controls.appendChild(postButton);
controls.addChildNode(closeButton); controls.appendChild(closeButton);
/* Construct div */ /* Construct div */
div.appendChild(title); div.appendChild(title);
div.appendChild(description); div.appendChild(desc);
div.appendChild(p); div.appendChild(p);
div.appendChild(message); div.appendChild(message);
div.appendChild(controls); div.appendChild(controls);
...@@ -125,16 +127,20 @@ ETYPOS.prototype = { ...@@ -125,16 +127,20 @@ ETYPOS.prototype = {
_handleEvents: function() { _handleEvents: function() {
var self = this; var self = this;
document.querySelectorAll('.e_typos_div .e_typos_close')[0].addEventListener('click', function () { document.querySelector('.e_typos_div .e_typos_close').addEventListener('click', function () {
self.closeWindow();
}, false);
document.querySelector('.e_typos_button.e_typos_close').addEventListener('click', function () {
self.closeWindow(); self.closeWindow();
}, false); }, false);
document.querySelector('.e_typos_div .e_typos_post').addEventListener('click', function () { document.querySelector('.e_typos_button.e_typos_post').addEventListener('click', function () {
self.postData(); self.postData();
}, false); }, false);
window.document.onkeydown = function (e) { window.document.onkeydown = function (e) {
if (e.ctrlKey == 1 && e.keyCode == 13) { if (e.ctrlKey == 1 && e.keyCode == 13) {
typos.controlPanel(); self.selection = self.getSelectText();
self.controlPanel();
} }
}; };
}, },
...@@ -162,7 +168,7 @@ ETYPOS.prototype = { ...@@ -162,7 +168,7 @@ ETYPOS.prototype = {
/*Получаем выделенный текст*/ /*Получаем выделенный текст*/
getSelectText: function() { getSelectText: function() {
return (window.getSelection()) ? String(window.getSelection()) : ''; return (window.getSelection()) ? String(window.getSelection()) : this.selection;
}, },
/*Скрытие/показ окна*/ /*Скрытие/показ окна*/
......
.e_typos_div { .e_typos_div {
display:none; display:none;
z-index:10000; z-index:10000;
position:absolute; position:absolute;
font-family: Arial, Sans-Serif; font-family: Arial, Sans-Serif;
font-size: 15px; font-size: 15px;
background-color: white; background-color: white;
padding: 1px 3px 3px 3px; padding: 1px 3px 3px 3px;
width:350px; width:350px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
text-align: center; text-align: center;
-moz-user-select: none; -moz-user-select: none;
-webkit-user-select: none; -webkit-user-select: none;
border: 1px solid #4169e1; border: 1px solid #4169e1;
} }
.e_typos_div .e_typos_title { .e_typos_div .e_typos_title {
text-align: left; position: relative;
padding: 0.5em 0.5em 0.5em 1em; text-align: left;
background: #4169e1; padding: 0.5em 0.5em 0.5em 1em;
color: white; background: #4169e1;
margin-top: 2px; color: white;
margin-top: 2px;
} }
.e_typos_div .e_typos_title .e_typos_close { .e_typos_div .e_typos_title .e_typos_close {
cursor: pointer; position: absolute;
opacity: 0.5; right: 10px;
margin-left: 190px; top: 5px;
cursor: pointer;
opacity: 0.5;
} }
.e_typos_div .e_typos_title .e_typos_close:hover { .e_typos_div .e_typos_title .e_typos_close:hover {
opacity: 1; opacity: 1;
} }
.e_typos_div .e_typos_desc { .e_typos_div .e_typos_desc {
font-size: 13px; font-size: 13px;
} }
.e_typos_div input { .e_typos_div input {
font-family: Arial, Sans-Serif; font-family: Arial, Sans-Serif;
font-size: 13px; font-size: 13px;
margin-bottom: 5px; margin-bottom: 5px;
padding: 3px; padding: 3px;
} }
.e_typos_div .e_typos_message .error { .e_typos_div .e_typos_message .error {
color: red; color: red;
} }
.e_typos_div .e_typos_message .success { .e_typos_div .e_typos_message .success {
color: green; color: green;
} }
.e_typos_div .e_typos_message .attention { .e_typos_div .e_typos_message .attention {
color: blue; color: blue;
} }
.e_typos_div .e_typos_controll_buttons .e_typos_button { .e_typos_div .e_typos_controll_buttons .e_typos_button {
border-radius: 10px; width: 85px;
border: 1px solid #d0d0d0; border-radius: 10px;
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.2)); border: 1px solid #d0d0d0;
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.2)); background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.2));
background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.2)); background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.2));
background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.2)); background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.2));
background-image: linear-gradient(top, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.2)); background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.2));
background-color:#FFFFFF !important; background-image: linear-gradient(top, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.2));
background-color:#FFFFFF !important;
} }
.e_typos_div .e_typos_controll_buttons .e_typos_button:hover { .e_typos_div .e_typos_controll_buttons .e_typos_button:hover {
border: 1px solid #d0d0d0; border: 1px solid #d0d0d0;
background-color:#DDDDDD !important; background-color:#DDDDDD !important;
border-radius: 10px; border-radius: 10px;
}
.e_typos_div .e_typos_controll_buttons {
position: relative;
} }
.e_typos_div .e_typos_controll_buttons .e_typos_post {
}
.e_typos_div .e_typos_controll_buttons .e_typos_post {
margin-right: 40px;
}
\ 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