Dialog class
This commit is contained in:
James Campos
parent
a9d95bb3c1
commit
044a1548e3
@ -71,9 +71,10 @@ AEOS =
|
||||
cursor: pointer;
|
||||
}
|
||||
'
|
||||
#dialog creation
|
||||
makeDialog: (id, position, html) ->
|
||||
dialog = document.createElement 'div'
|
||||
|
||||
class Dialog
|
||||
constructor: (id, position, html) ->
|
||||
@el = dialog = document.createElement 'div'
|
||||
dialog.className = 'reply dialog'
|
||||
dialog.innerHTML = html
|
||||
dialog.id = id
|
||||
@ -98,39 +99,36 @@ AEOS =
|
||||
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', AEOS.move, true
|
||||
$('div.move a[name=close]', dialog)?.addEventListener 'click', (-> remove $ '#'+id), true
|
||||
dialog
|
||||
#movement
|
||||
move: (e) ->
|
||||
div = @parentNode
|
||||
AEOS.div = div
|
||||
$('div.move', dialog).addEventListener 'mousedown', @move, true
|
||||
$('div.move a[name=close]', dialog)?.addEventListener 'click', (-> remove dialog), true
|
||||
move: (e) =>
|
||||
div = @el
|
||||
#distance from pointer to div edge is constant; calculate it here.
|
||||
AEOS.dx = e.clientX - div.offsetLeft
|
||||
AEOS.dy = e.clientY - div.offsetTop
|
||||
@dx = e.clientX - div.offsetLeft
|
||||
@dy = e.clientY - div.offsetTop
|
||||
#factor out div from document dimensions
|
||||
AEOS.width = document.body.clientWidth - div.offsetWidth
|
||||
AEOS.height = document.body.clientHeight - div.offsetHeight
|
||||
document.addEventListener 'mousemove', AEOS.moveMove, true
|
||||
document.addEventListener 'mouseup', AEOS.moveEnd, true
|
||||
moveMove: (e) ->
|
||||
div = AEOS.div
|
||||
left = e.clientX - AEOS.dx
|
||||
@width = document.body.clientWidth - div.offsetWidth
|
||||
@height = document.body.clientHeight - div.offsetHeight
|
||||
document.addEventListener 'mousemove', @moveMove, true
|
||||
document.addEventListener 'mouseup', @moveEnd, true
|
||||
moveMove: (e) =>
|
||||
div = @el
|
||||
left = e.clientX - @dx
|
||||
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'
|
||||
div.style.left = left
|
||||
div.style.right = right
|
||||
top = e.clientY - AEOS.dy
|
||||
top = e.clientY - @dy
|
||||
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'
|
||||
div.style.top = top
|
||||
div.style.bottom = bottom
|
||||
moveEnd: ->
|
||||
document.removeEventListener 'mousemove', AEOS.moveMove, true
|
||||
document.removeEventListener 'mouseup', AEOS.moveEnd, true
|
||||
div = AEOS.div
|
||||
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
|
||||
@ -603,7 +601,7 @@ options = ->
|
||||
html += "<div><textarea style=\"display: none;\" name=flavors>#{GM_getValue 'flavors', g.flavors}</textarea></div>"
|
||||
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
|
||||
input.addEventListener 'change', changeCheckbox, true
|
||||
@ -639,7 +637,7 @@ qrText = (link) ->
|
||||
quickReply = (link, text) ->
|
||||
unless qr = $ '#qr'
|
||||
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]'
|
||||
clone = form.cloneNode true
|
||||
@ -879,7 +877,7 @@ updaterMake = ->
|
||||
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><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.addEventListener 'click', updateAuto, true
|
||||
@ -1223,7 +1221,7 @@ if getConfig 'Quick Report'
|
||||
if getConfig 'Thread Watcher'
|
||||
#create watcher
|
||||
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
|
||||
watcherUpdate()
|
||||
|
||||
|
||||
77
4chan_x.js
77
4chan_x.js
@ -1,6 +1,6 @@
|
||||
(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 __slice = Array.prototype.slice;
|
||||
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 __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; }, __slice = Array.prototype.slice;
|
||||
config = {
|
||||
'404 Redirect': [true, 'Redirect dead threads'],
|
||||
'Anonymize': [false, 'Make everybody anonymous'],
|
||||
@ -71,10 +71,14 @@
|
||||
cursor: pointer;\
|
||||
}\
|
||||
');
|
||||
},
|
||||
makeDialog: function(id, position, html) {
|
||||
var dialog, left, top, _ref;
|
||||
dialog = document.createElement('div');
|
||||
}
|
||||
};
|
||||
Dialog = (function() {
|
||||
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;
|
||||
@ -111,57 +115,56 @@
|
||||
} else {
|
||||
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) {
|
||||
_ref.addEventListener('click', (function() {
|
||||
return remove($('#' + id));
|
||||
return remove(dialog);
|
||||
}), true);
|
||||
}
|
||||
return dialog;
|
||||
},
|
||||
move: function(e) {
|
||||
}
|
||||
Dialog.prototype.move = function(e) {
|
||||
var div;
|
||||
div = this.parentNode;
|
||||
AEOS.div = div;
|
||||
AEOS.dx = e.clientX - div.offsetLeft;
|
||||
AEOS.dy = e.clientY - div.offsetTop;
|
||||
AEOS.width = document.body.clientWidth - div.offsetWidth;
|
||||
AEOS.height = document.body.clientHeight - div.offsetHeight;
|
||||
document.addEventListener('mousemove', AEOS.moveMove, true);
|
||||
return document.addEventListener('mouseup', AEOS.moveEnd, true);
|
||||
},
|
||||
moveMove: function(e) {
|
||||
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;
|
||||
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 = AEOS.div;
|
||||
left = e.clientX - AEOS.dx;
|
||||
div = this.el;
|
||||
left = e.clientX - this.dx;
|
||||
if (left < 20) {
|
||||
left = '0px';
|
||||
} else if (AEOS.width - left < 20) {
|
||||
} else if (this.width - left < 20) {
|
||||
left = '';
|
||||
}
|
||||
right = left ? '' : '0px';
|
||||
div.style.left = left;
|
||||
div.style.right = right;
|
||||
top = e.clientY - AEOS.dy;
|
||||
top = e.clientY - this.dy;
|
||||
if (top < 20) {
|
||||
top = '0px';
|
||||
} else if (AEOS.height - top < 20) {
|
||||
} else if (this.height - top < 20) {
|
||||
top = '';
|
||||
}
|
||||
bottom = top ? '' : '0px';
|
||||
div.style.top = top;
|
||||
return div.style.bottom = bottom;
|
||||
},
|
||||
moveEnd: function() {
|
||||
};
|
||||
Dialog.prototype.moveEnd = function() {
|
||||
var div, id;
|
||||
document.removeEventListener('mousemove', AEOS.moveMove, true);
|
||||
document.removeEventListener('mouseup', AEOS.moveEnd, true);
|
||||
div = AEOS.div;
|
||||
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);
|
||||
}
|
||||
};
|
||||
};
|
||||
return Dialog;
|
||||
})();
|
||||
d = document;
|
||||
g = null;
|
||||
$ = function(selector, root) {
|
||||
@ -771,7 +774,7 @@
|
||||
html += "<div><a class=sauce>Flavors</a></div>";
|
||||
html += "<div><textarea style=\"display: none;\" name=flavors>" + (GM_getValue('flavors', g.flavors)) + "</textarea></div>";
|
||||
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);
|
||||
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
|
||||
input = _ref[_i];
|
||||
@ -812,7 +815,7 @@
|
||||
var auto, autoBox, clone, form, html, input, qr, script, submit, textarea, xpath, _i, _len, _ref, _ref2;
|
||||
if (!(qr = $('#qr'))) {
|
||||
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]');
|
||||
clone = form.cloneNode(true);
|
||||
_ref = $$('script', clone);
|
||||
@ -1111,7 +1114,7 @@
|
||||
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><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.addEventListener('click', updateAuto, true);
|
||||
interval = $('input[name=interval]', div);
|
||||
@ -1527,7 +1530,7 @@
|
||||
}
|
||||
if (getConfig('Thread Watcher')) {
|
||||
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);
|
||||
watcherUpdate();
|
||||
threads = g.watched[g.BOARD] || [];
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user