diff --git a/etersoft_typos.js b/etersoft_typos.js index c3d1367b51b161b0086282037531e02e7349e054..05b3b79361d23e5c6866e69733279b7b4b20435f 100644 --- a/etersoft_typos.js +++ b/etersoft_typos.js @@ -28,6 +28,15 @@ ETYPOS.prototype = { selection: '', + element: null, + + /* Переменные для перетаскивания */ + isDragged: false, + isVisible: false, + lastMousePos: { x: -1000, y: -1000 }, + lastBoxPos: { x: 0, y: 0 }, + dragPadding: 10, + //данные для отправки (сайт страницы, текст с ошибкой, комментарий, язык, броузер) userdata: { 'url': '', @@ -122,8 +131,14 @@ ETYPOS.prototype = { div.appendChild(controls); document.body.appendChild(div); + + this.element = document.querySelector(".e_typos_div"); }, + // Нужны для onmousemove + box_x : 0, + box_y : 0, + _handleEvents: function() { var self = this; @@ -143,6 +158,38 @@ ETYPOS.prototype = { self.controlPanel(); } }; + + this.element.addEventListener("mousedown", function(e) { + 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; + }); + + 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 ) ); + + 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 ) { + return; + } + + self.element.style.left = self.box_x + "px"; + self.element.style.top = self.box_y + "px"; + } + }); }, _init: function(options) { @@ -173,12 +220,13 @@ ETYPOS.prototype = { /*Скрытие/показ окна*/ controlPanel: function() { - (document.querySelector(".e_typos_div").style.display == "block") ? this.closeWindow() : this.openWindow(); + (this.element.style.display == "block") ? this.closeWindow() : this.openWindow(); }, /*Открытие окна*/ openWindow: function() { - var main_div = document.querySelector(".e_typos_div"); + //console.log(this.selection); + var main_div = this.element; //Определяем на какой позиции X, Y всплывет элемент var top = window.pageYOffset + window.innerHeight/3; @@ -191,11 +239,14 @@ ETYPOS.prototype = { main_div.querySelector(".e_typos_message").innerHTML = ""; main_div.style.display = "block"; + + this.isVisible = true; }, /*Закрытия окна*/ closeWindow: function() { - document.querySelector(".e_typos_div").style.display = "none"; + this.element.style.display = "none"; + this.isVisible = false; }, /*Проверка данных перед отправкой*/