diff --git a/4chan_x.coffee b/4chan_x.coffee index 83f80c8ee..c3311c7fd 100644 --- a/4chan_x.coffee +++ b/4chan_x.coffee @@ -74,10 +74,10 @@ AEOS = class Dialog constructor: (id, position, html) -> - @el = dialog = document.createElement 'div' - dialog.className = 'reply dialog' - dialog.innerHTML = html - dialog.id = id + @el = el = document.createElement 'div' + el.className = 'reply dialog' + el.innerHTML = html + el.id = id switch position when 'topleft' left = '0px' @@ -96,42 +96,41 @@ class Dialog top = '25%' left = GM_getValue "#{id}Left", left top = GM_getValue "#{id}Top", top - if left then dialog.style.left = left else dialog.style.right = '0px' - if top then dialog.style.top = top else dialog.style.bottom = '0px' - - $('div.move', dialog).addEventListener 'mousedown', @move, true - $('div.move a[name=close]', dialog)?.addEventListener 'click', (-> remove dialog), true + if left then el.style.left = left else el.style.right = '0px' + if top then el.style.top = top else el.style.bottom = '0px' + $('div.move', el).addEventListener 'mousedown', @move, true + $('div.move a[name=close]', el)?.addEventListener 'click', (-> remove el), true move: (e) => - div = @el - #distance from pointer to div edge is constant; calculate it here. - @dx = e.clientX - div.offsetLeft - @dy = e.clientY - div.offsetTop - #factor out div from document dimensions - @width = document.body.clientWidth - div.offsetWidth - @height = document.body.clientHeight - div.offsetHeight + el = @el + #distance from pointer to el edge is constant; calculate it here. + @dx = e.clientX - el.offsetLeft + @dy = e.clientY - el.offsetTop + #factor out el from document dimensions + @width = document.body.clientWidth - el.offsetWidth + @height = document.body.clientHeight - el.offsetHeight document.addEventListener 'mousemove', @moveMove, true document.addEventListener 'mouseup', @moveEnd, true moveMove: (e) => - div = @el + el = @el left = e.clientX - @dx if left < 20 then left = '0px' else if @width - left < 20 then left = '' right = if left then '' else '0px' - div.style.left = left - div.style.right = right + el.style.left = left + el.style.right = right top = e.clientY - @dy if top < 20 then top = '0px' else if @height - top < 20 then top = '' bottom = if top then '' else '0px' - div.style.top = top - div.style.bottom = bottom + el.style.top = top + el.style.bottom = bottom moveEnd: => document.removeEventListener 'mousemove', @moveMove, true document.removeEventListener 'mouseup', @moveEnd, true - div = @el - id = div.id - GM_setValue "#{id}Left", div.style.left - GM_setValue "#{id}Top", div.style.top + el = @el + id = el.id + GM_setValue "#{id}Left", el.style.left + GM_setValue "#{id}Top", el.style.top #convenience d = document diff --git a/4chan_x.js b/4chan_x.js index c1024b039..e76ef1b48 100644 --- a/4chan_x.js +++ b/4chan_x.js @@ -77,11 +77,11 @@ function Dialog(id, position, html) { this.moveEnd = __bind(this.moveEnd, this);; this.moveMove = __bind(this.moveMove, this);; - this.move = __bind(this.move, this);; var dialog, left, top, _ref; - this.el = dialog = document.createElement('div'); - dialog.className = 'reply dialog'; - dialog.innerHTML = html; - dialog.id = id; + this.move = __bind(this.move, this);; var el, left, top, _ref; + this.el = el = document.createElement('div'); + el.className = 'reply dialog'; + el.innerHTML = html; + el.id = id; switch (position) { case 'topleft': left = '0px'; @@ -106,35 +106,35 @@ left = GM_getValue("" + id + "Left", left); top = GM_getValue("" + id + "Top", top); if (left) { - dialog.style.left = left; + el.style.left = left; } else { - dialog.style.right = '0px'; + el.style.right = '0px'; } if (top) { - dialog.style.top = top; + el.style.top = top; } else { - dialog.style.bottom = '0px'; + el.style.bottom = '0px'; } - $('div.move', dialog).addEventListener('mousedown', this.move, true); - if ((_ref = $('div.move a[name=close]', dialog)) != null) { + $('div.move', el).addEventListener('mousedown', this.move, true); + if ((_ref = $('div.move a[name=close]', el)) != null) { _ref.addEventListener('click', (function() { - return remove(dialog); + return remove(el); }), true); } } Dialog.prototype.move = function(e) { - var div; - div = this.el; - this.dx = e.clientX - div.offsetLeft; - this.dy = e.clientY - div.offsetTop; - this.width = document.body.clientWidth - div.offsetWidth; - this.height = document.body.clientHeight - div.offsetHeight; + var el; + el = this.el; + this.dx = e.clientX - el.offsetLeft; + this.dy = e.clientY - el.offsetTop; + this.width = document.body.clientWidth - el.offsetWidth; + this.height = document.body.clientHeight - el.offsetHeight; document.addEventListener('mousemove', this.moveMove, true); return document.addEventListener('mouseup', this.moveEnd, true); }; Dialog.prototype.moveMove = function(e) { - var bottom, div, left, right, top; - div = this.el; + var bottom, el, left, right, top; + el = this.el; left = e.clientX - this.dx; if (left < 20) { left = '0px'; @@ -142,8 +142,8 @@ left = ''; } right = left ? '' : '0px'; - div.style.left = left; - div.style.right = right; + el.style.left = left; + el.style.right = right; top = e.clientY - this.dy; if (top < 20) { top = '0px'; @@ -151,17 +151,17 @@ top = ''; } bottom = top ? '' : '0px'; - div.style.top = top; - return div.style.bottom = bottom; + el.style.top = top; + return el.style.bottom = bottom; }; Dialog.prototype.moveEnd = function() { - var div, id; + var el, id; document.removeEventListener('mousemove', this.moveMove, true); document.removeEventListener('mouseup', this.moveEnd, true); - div = this.el; - id = div.id; - GM_setValue("" + id + "Left", div.style.left); - return GM_setValue("" + id + "Top", div.style.top); + el = this.el; + id = el.id; + GM_setValue("" + id + "Left", el.style.left); + return GM_setValue("" + id + "Top", el.style.top); }; return Dialog; })();