Goyslop/4chan-x
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Dialog class

Browse Source
This commit is contained in:
James Campos 2011-01-15 17:15:50 -08:00
parent a9d95bb3c1
commit 044a1548e3
2 changed files with 68 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
4chan_x.coffee
View File

@ -71,9 +71,10 @@ AEOS =
cursor: pointer; cursor: pointer;
} }
' '
#dialog creation
makeDialog: (id, position, html) -> class Dialog
dialog = document.createElement 'div' constructor: (id, position, html) ->
@el = dialog = document.createElement 'div'
dialog.className = 'reply dialog' dialog.className = 'reply dialog'
dialog.innerHTML = html dialog.innerHTML = html
dialog.id = id dialog.id = id
@ -98,39 +99,36 @@ AEOS =
if left then dialog.style.left = left else dialog.style.right = '0px' if left then dialog.style.left = left else dialog.style.right = '0px'
if top then dialog.style.top = top else dialog.style.bottom = '0px' if top then dialog.style.top = top else dialog.style.bottom = '0px'
$('div.move', dialog).addEventListener 'mousedown', AEOS.move, true $('div.move', dialog).addEventListener 'mousedown', @move, true
$('div.move a[name=close]', dialog)?.addEventListener 'click', (-> remove $ '#'+id), true $('div.move a[name=close]', dialog)?.addEventListener 'click', (-> remove dialog), true
dialog move: (e) =>
#movement div = @el
move: (e) ->
div = @parentNode
AEOS.div = div
#distance from pointer to div edge is constant; calculate it here. #distance from pointer to div edge is constant; calculate it here.
AEOS.dx = e.clientX - div.offsetLeft @dx = e.clientX - div.offsetLeft
AEOS.dy = e.clientY - div.offsetTop @dy = e.clientY - div.offsetTop
#factor out div from document dimensions #factor out div from document dimensions
AEOS.width = document.body.clientWidth - div.offsetWidth @width = document.body.clientWidth - div.offsetWidth
AEOS.height = document.body.clientHeight - div.offsetHeight @height = document.body.clientHeight - div.offsetHeight
document.addEventListener 'mousemove', AEOS.moveMove, true document.addEventListener 'mousemove', @moveMove, true
document.addEventListener 'mouseup', AEOS.moveEnd, true document.addEventListener 'mouseup', @moveEnd, true
moveMove: (e) -> moveMove: (e) =>
div = AEOS.div div = @el
left = e.clientX - AEOS.dx left = e.clientX - @dx
if left < 20 then left = '0px' if left < 20 then left = '0px'
else if AEOS.width - left < 20 then left = '' else if @width - left < 20 then left = ''
right = if left then '' else '0px' right = if left then '' else '0px'
div.style.left = left div.style.left = left
div.style.right = right div.style.right = right
top = e.clientY - AEOS.dy top = e.clientY - @dy
if top < 20 then top = '0px' if top < 20 then top = '0px'
else if AEOS.height - top < 20 then top = '' else if @height - top < 20 then top = ''
bottom = if top then '' else '0px' bottom = if top then '' else '0px'
div.style.top = top div.style.top = top
div.style.bottom = bottom div.style.bottom = bottom
moveEnd: -> moveEnd: =>
document.removeEventListener 'mousemove', AEOS.moveMove, true document.removeEventListener 'mousemove', @moveMove, true
document.removeEventListener 'mouseup', AEOS.moveEnd, true document.removeEventListener 'mouseup', @moveEnd, true
div = AEOS.div div = @el
id = div.id id = div.id
GM_setValue "#{id}Left", div.style.left GM_setValue "#{id}Left", div.style.left
GM_setValue "#{id}Top", div.style.top GM_setValue "#{id}Top", div.style.top
@ -603,7 +601,7 @@ options = ->
html += "<div><textarea style=\"display: none;\" name=flavors>#{GM_getValue 'flavors', g.flavors}</textarea></div>" html += "<div><textarea style=\"display: none;\" name=flavors>#{GM_getValue 'flavors', g.flavors}</textarea></div>"
html += "<input type=\"button\" value=\"hidden: #{hiddenNum}\"><br>" html += "<input type=\"button\" value=\"hidden: #{hiddenNum}\"><br>"
div = AEOS.makeDialog 'options', 'center', html div = new Dialog('options', 'center', html).el
for input in $$ 'input[type="checkbox"]', div for input in $$ 'input[type="checkbox"]', div
input.addEventListener 'change', changeCheckbox, true input.addEventListener 'change', changeCheckbox, true
@ -639,7 +637,7 @@ qrText = (link) ->
quickReply = (link, text) -> quickReply = (link, text) ->
unless qr = $ '#qr' unless qr = $ '#qr'
html = "<div class=move>Quick Reply <input type=checkbox title=autohide><a name=close title=close>X</a></div>" html = "<div class=move>Quick Reply <input type=checkbox title=autohide><a name=close title=close>X</a></div>"
qr = AEOS.makeDialog 'qr', 'topleft', html qr = new Dialog('qr', 'topleft', html).el
form = $ 'form[name=post]' form = $ 'form[name=post]'
clone = form.cloneNode true clone = form.cloneNode true
@ -879,7 +877,7 @@ updaterMake = ->
html += "<div><label>Auto Update<input type=checkbox name=auto></label></div>" html += "<div><label>Auto Update<input type=checkbox name=auto></label></div>"
html += "<div><label>Interval (s)<input type=text name=interval></label></div>" html += "<div><label>Interval (s)<input type=text name=interval></label></div>"
html += "<div><input type=button value='Update Now'></div>" html += "<div><input type=button value='Update Now'></div>"
div = AEOS.makeDialog 'updater', 'topright', html div = new Dialog('updater', 'topright', html).el
auto = $ 'input[name=auto]', div auto = $ 'input[name=auto]', div
auto.addEventListener 'click', updateAuto, true auto.addEventListener 'click', updateAuto, true
@ -1223,7 +1221,7 @@ if getConfig 'Quick Report'
if getConfig 'Thread Watcher' if getConfig 'Thread Watcher'
#create watcher #create watcher
html = '<div class="move">Thread Watcher</div><div></div>' html = '<div class="move">Thread Watcher</div><div></div>'
watcher = AEOS.makeDialog 'watcher', 'topleft', html watcher = new Dialog('watcher', 'topleft', html).el
addTo d.body, watcher addTo d.body, watcher
watcherUpdate() watcherUpdate()

77
4chan_x.js
View File

@ -1,6 +1,6 @@
(function() { (function() {
var $, $$, AEOS, DAY, a, addTo, arr, as, autoWatch, autohide, b, board, callback, changeCheckbox, changeText, clearHidden, closeQR, config, cooldown, cutoff, d, delform, down, editSauce, el, expand, expandComment, expandThread, formSubmit, g, getConfig, getThread, getTime, hide, hideReply, hideThread, href, html, i, id, iframe, iframeLoad, imageClick, imageExpandClick, imageFull, imageThumb, imageToggle, img, inAfter, inBefore, input, inputs, keyModeInsert, keyModeNormal, keydown, keypress, l1, lastChecked, m, n, navbotr, navtopr, nodeInserted, now, omitted, onloadComment, onloadThread, options, parseResponse, pathname, qrListener, qrText, quickReply, recaptcha, recaptchaListener, recaptchaReload, redirect, remove, replace, replyNav, report, request, scroll, scrollThread, show, showReply, showThread, slice, span, src, start, stopPropagation, temp, text, textContent, thread, threadF, threads, tn, tzOffset, up, updateAuto, updateCallback, updateFavicon, updateInterval, updateNow, updateTime, updateTitle, updaterMake, watch, watchX, watcher, watcherUpdate, x, zeroPad, _, _base, _i, _j, _k, _l, _len, _len2, _len3, _len4, _len5, _len6, _m, _ref, _ref2, _ref3, _ref4, _ref5; var $, $$, AEOS, DAY, Dialog, a, addTo, arr, as, autoWatch, autohide, b, board, callback, changeCheckbox, changeText, clearHidden, closeQR, config, cooldown, cutoff, d, delform, down, editSauce, el, expand, expandComment, expandThread, formSubmit, g, getConfig, getThread, getTime, hide, hideReply, hideThread, href, html, i, id, iframe, iframeLoad, imageClick, imageExpandClick, imageFull, imageThumb, imageToggle, img, inAfter, inBefore, input, inputs, keyModeInsert, keyModeNormal, keydown, keypress, l1, lastChecked, m, n, navbotr, navtopr, nodeInserted, now, omitted, onloadComment, onloadThread, options, parseResponse, pathname, qrListener, qrText, quickReply, recaptcha, recaptchaListener, recaptchaReload, redirect, remove, replace, replyNav, report, request, scroll, scrollThread, show, showReply, showThread, slice, span, src, start, stopPropagation, temp, text, textContent, thread, threadF, threads, tn, tzOffset, up, updateAuto, updateCallback, updateFavicon, updateInterval, updateNow, updateTime, updateTitle, updaterMake, watch, watchX, watcher, watcherUpdate, x, zeroPad, _, _base, _i, _j, _k, _l, _len, _len2, _len3, _len4, _len5, _len6, _m, _ref, _ref2, _ref3, _ref4, _ref5;
var __slice = Array.prototype.slice; var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; }, __slice = Array.prototype.slice;
config = { config = {
'404 Redirect': [true, 'Redirect dead threads'], '404 Redirect': [true, 'Redirect dead threads'],
'Anonymize': [false, 'Make everybody anonymous'], 'Anonymize': [false, 'Make everybody anonymous'],
@ -71,10 +71,14 @@
cursor: pointer;\ cursor: pointer;\
}\ }\
'); ');
}, }
makeDialog: function(id, position, html) { };
var dialog, left, top, _ref; Dialog = (function() {
dialog = document.createElement('div'); 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.className = 'reply dialog';
dialog.innerHTML = html; dialog.innerHTML = html;
dialog.id = id; dialog.id = id;
@ -111,57 +115,56 @@
} else { } else {
dialog.style.bottom = '0px'; dialog.style.bottom = '0px';
} }
$('div.move', dialog).addEventListener('mousedown', AEOS.move, true); $('div.move', dialog).addEventListener('mousedown', this.move, true);
if ((_ref = $('div.move a[name=close]', dialog)) != null) { if ((_ref = $('div.move a[name=close]', dialog)) != null) {
_ref.addEventListener('click', (function() { _ref.addEventListener('click', (function() {
return remove($('#' + id)); return remove(dialog);
}), true); }), true);
} }
return dialog; }
}, Dialog.prototype.move = function(e) {
move: function(e) {
var div; var div;
div = this.parentNode; div = this.el;
AEOS.div = div; this.dx = e.clientX - div.offsetLeft;
AEOS.dx = e.clientX - div.offsetLeft; this.dy = e.clientY - div.offsetTop;
AEOS.dy = e.clientY - div.offsetTop; this.width = document.body.clientWidth - div.offsetWidth;
AEOS.width = document.body.clientWidth - div.offsetWidth; this.height = document.body.clientHeight - div.offsetHeight;
AEOS.height = document.body.clientHeight - div.offsetHeight; document.addEventListener('mousemove', this.moveMove, true);
document.addEventListener('mousemove', AEOS.moveMove, true); return document.addEventListener('mouseup', this.moveEnd, true);
return document.addEventListener('mouseup', AEOS.moveEnd, true); };
}, Dialog.prototype.moveMove = function(e) {
moveMove: function(e) {
var bottom, div, left, right, top; var bottom, div, left, right, top;
div = AEOS.div; div = this.el;
left = e.clientX - AEOS.dx; left = e.clientX - this.dx;
if (left < 20) { if (left < 20) {
left = '0px'; left = '0px';
} else if (AEOS.width - left < 20) { } else if (this.width - left < 20) {
left = ''; left = '';
} }
right = left ? '' : '0px'; right = left ? '' : '0px';
div.style.left = left; div.style.left = left;
div.style.right = right; div.style.right = right;
top = e.clientY - AEOS.dy; top = e.clientY - this.dy;
if (top < 20) { if (top < 20) {
top = '0px'; top = '0px';
} else if (AEOS.height - top < 20) { } else if (this.height - top < 20) {
top = ''; top = '';
} }
bottom = top ? '' : '0px'; bottom = top ? '' : '0px';
div.style.top = top; div.style.top = top;
return div.style.bottom = bottom; return div.style.bottom = bottom;
}, };
moveEnd: function() { Dialog.prototype.moveEnd = function() {
var div, id; var div, id;
document.removeEventListener('mousemove', AEOS.moveMove, true); document.removeEventListener('mousemove', this.moveMove, true);
document.removeEventListener('mouseup', AEOS.moveEnd, true); document.removeEventListener('mouseup', this.moveEnd, true);
div = AEOS.div; div = this.el;
id = div.id; id = div.id;
GM_setValue("" + id + "Left", div.style.left); GM_setValue("" + id + "Left", div.style.left);
return GM_setValue("" + id + "Top", div.style.top); return GM_setValue("" + id + "Top", div.style.top);
} };
}; return Dialog;
})();
d = document; d = document;
g = null; g = null;
$ = function(selector, root) { $ = function(selector, root) {
@ -771,7 +774,7 @@
html += "<div><a class=sauce>Flavors</a></div>"; html += "<div><a class=sauce>Flavors</a></div>";
html += "<div><textarea style=\"display: none;\" name=flavors>" + (GM_getValue('flavors', g.flavors)) + "</textarea></div>"; html += "<div><textarea style=\"display: none;\" name=flavors>" + (GM_getValue('flavors', g.flavors)) + "</textarea></div>";
html += "<input type=\"button\" value=\"hidden: " + hiddenNum + "\"><br>"; html += "<input type=\"button\" value=\"hidden: " + hiddenNum + "\"><br>";
div = AEOS.makeDialog('options', 'center', html); div = new Dialog('options', 'center', html).el;
_ref = $$('input[type="checkbox"]', div); _ref = $$('input[type="checkbox"]', div);
for (_i = 0, _len = _ref.length; _i < _len; _i++) { for (_i = 0, _len = _ref.length; _i < _len; _i++) {
input = _ref[_i]; input = _ref[_i];
@ -812,7 +815,7 @@
var auto, autoBox, clone, form, html, input, qr, script, submit, textarea, xpath, _i, _len, _ref, _ref2; var auto, autoBox, clone, form, html, input, qr, script, submit, textarea, xpath, _i, _len, _ref, _ref2;
if (!(qr = $('#qr'))) { if (!(qr = $('#qr'))) {
html = "<div class=move>Quick Reply <input type=checkbox title=autohide><a name=close title=close>X</a></div>"; html = "<div class=move>Quick Reply <input type=checkbox title=autohide><a name=close title=close>X</a></div>";
qr = AEOS.makeDialog('qr', 'topleft', html); qr = new Dialog('qr', 'topleft', html).el;
form = $('form[name=post]'); form = $('form[name=post]');
clone = form.cloneNode(true); clone = form.cloneNode(true);
_ref = $$('script', clone); _ref = $$('script', clone);
@ -1111,7 +1114,7 @@
html += "<div><label>Auto Update<input type=checkbox name=auto></label></div>"; html += "<div><label>Auto Update<input type=checkbox name=auto></label></div>";
html += "<div><label>Interval (s)<input type=text name=interval></label></div>"; html += "<div><label>Interval (s)<input type=text name=interval></label></div>";
html += "<div><input type=button value='Update Now'></div>"; html += "<div><input type=button value='Update Now'></div>";
div = AEOS.makeDialog('updater', 'topright', html); div = new Dialog('updater', 'topright', html).el;
auto = $('input[name=auto]', div); auto = $('input[name=auto]', div);
auto.addEventListener('click', updateAuto, true); auto.addEventListener('click', updateAuto, true);
interval = $('input[name=interval]', div); interval = $('input[name=interval]', div);
@ -1527,7 +1530,7 @@
} }
if (getConfig('Thread Watcher')) { if (getConfig('Thread Watcher')) {
html = '<div class="move">Thread Watcher</div><div></div>'; html = '<div class="move">Thread Watcher</div><div></div>';
watcher = AEOS.makeDialog('watcher', 'topleft', html); watcher = new Dialog('watcher', 'topleft', html).el;
addTo(d.body, watcher); addTo(d.body, watcher);
watcherUpdate(); watcherUpdate();
threads = g.watched[g.BOARD] || []; threads = g.watched[g.BOARD] || [];