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

new Dialog -> ui.dialog

Browse Source
This commit is contained in:
James Campos 2011-03-25 22:54:32 -07:00
parent 36293dfb57
commit fde1813f1b
2 changed files with 76 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
4chan_x.js
View File

@ -56,8 +56,8 @@
*/ */
(function() { (function() {
var $, $$, DAY, Dialog, a, arr, as, autoWatch, autohide, b, board, callback, changeCheckbox, changeValue, 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, imageExpand, imageExpandClick, imageHover, imageResize, imageThumb, imageToggle, imageType, imageTypeChange, img, inAfter, inBefore, input, inputs, keyModeInsert, keyModeNormal, keydown, keypress, l1, lastChecked, log, m, mv, n, navbotr, navtopr, nodeInserted, now, omitted, onloadComment, onloadThread, option, options, parseResponse, pathname, qrListener, qrText, quickReply, recaptcha, recaptchaListener, recaptchaReload, redirect, replace, replyNav, report, request, rm, 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, updateVerbose, updaterMake, util, watch, watchX, watcher, watcherUpdate, x, zeroPad, _, _base, _i, _j, _k, _l, _len, _len2, _len3, _len4, _len5, _len6, _len7, _m, _n, _ref, _ref2, _ref3, _ref4, _ref5; var $, $$, DAY, a, arr, as, autoWatch, autohide, b, board, callback, changeCheckbox, changeValue, 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, imageExpand, imageExpandClick, imageHover, imageResize, imageThumb, imageToggle, imageType, imageTypeChange, img, inAfter, inBefore, input, inputs, keyModeInsert, keyModeNormal, keydown, keypress, l1, lastChecked, log, m, mv, n, navbotr, navtopr, nodeInserted, now, omitted, onloadComment, onloadThread, option, options, parseResponse, pathname, qrListener, qrText, quickReply, recaptcha, recaptchaListener, recaptchaReload, redirect, replace, replyNav, report, request, rm, scroll, scrollThread, show, showReply, showThread, slice, span, src, start, stopPropagation, temp, text, textContent, thread, threadF, threads, tn, tzOffset, ui, up, updateAuto, updateCallback, updateFavicon, updateInterval, updateNow, updateTime, updateTitle, updateVerbose, updaterMake, util, watch, watchX, watcher, watcherUpdate, x, zeroPad, _, _base, _i, _j, _k, _l, _len, _len2, _len3, _len4, _len5, _len6, _len7, _m, _n, _ref, _ref2, _ref3, _ref4, _ref5;
var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; }, __slice = Array.prototype.slice; var __slice = Array.prototype.slice;
if (typeof console != "undefined" && console !== null) { if (typeof console != "undefined" && console !== null) {
log = console.log; log = console.log;
} }
@ -130,12 +130,10 @@
cursor: pointer;\ cursor: pointer;\
}\ }\
'); ');
Dialog = (function() { ui = {
function Dialog(id, position, html) { dialog: function(id, position, html) {
this.moveEnd = __bind(this.moveEnd, this);; var el, left, top, _ref;
this.moveMove = __bind(this.moveMove, this);; ui.el = el = document.createElement('div');
this.move = __bind(this.move, this);; var el, left, top, _ref;
this.el = el = document.createElement('div');
el.className = 'reply dialog'; el.className = 'reply dialog';
el.innerHTML = html; el.innerHTML = html;
el.id = id; el.id = id;
@ -164,8 +162,8 @@
top = '25%'; top = '25%';
} }
} }
left = GM_getValue("" + id + "Left", left); left = localStorage["" + id + "Left"] || left;
top = GM_getValue("" + id + "Top", top); top = localStorage["" + id + "Top"] || top;
if (left) { if (left) {
el.style.left = left; el.style.left = left;
} else { } else {
@ -176,56 +174,56 @@
} else { } else {
el.style.bottom = '0px'; el.style.bottom = '0px';
} }
$('div.move', el).addEventListener('mousedown', this.move, true); el.querySelector('div.move').addEventListener('mousedown', ui.move, true);
if ((_ref = $('div.move a[name=close]', el)) != null) { if ((_ref = el.querySelector('div.move a[name=close]')) != null) {
_ref.addEventListener('click', (function() { _ref.addEventListener('click', (function() {
return rm(el); return el.parentNode.removeChild(el);
}), true); }), true);
} }
} return el;
Dialog.prototype.move = function(e) { },
move: function(e) {
var el; var el;
el = this.el; el = ui.el;
this.dx = e.clientX - el.offsetLeft; ui.dx = e.clientX - el.offsetLeft;
this.dy = e.clientY - el.offsetTop; ui.dy = e.clientY - el.offsetTop;
this.width = document.body.clientWidth - el.offsetWidth; ui.width = document.body.clientWidth - el.offsetWidth;
this.height = document.body.clientHeight - el.offsetHeight; ui.height = document.body.clientHeight - el.offsetHeight;
document.addEventListener('mousemove', this.moveMove, true); document.addEventListener('mousemove', ui.moveMove, true);
return document.addEventListener('mouseup', this.moveEnd, true); return document.addEventListener('mouseup', ui.moveEnd, true);
}; },
Dialog.prototype.moveMove = function(e) { moveMove: function(e) {
var bottom, el, left, right, top; var bottom, el, left, right, top;
el = this.el; el = ui.el;
left = e.clientX - this.dx; left = e.clientX - ui.dx;
if (left < 20) { if (left < 20) {
left = '0px'; left = '0px';
} else if (this.width - left < 20) { } else if (ui.width - left < 20) {
left = ''; left = '';
} }
right = left ? '' : '0px'; right = left ? '' : '0px';
el.style.left = left; el.style.left = left;
el.style.right = right; el.style.right = right;
top = e.clientY - this.dy; top = e.clientY - ui.dy;
if (top < 20) { if (top < 20) {
top = '0px'; top = '0px';
} else if (this.height - top < 20) { } else if (ui.height - top < 20) {
top = ''; top = '';
} }
bottom = top ? '' : '0px'; bottom = top ? '' : '0px';
el.style.top = top; el.style.top = top;
return el.style.bottom = bottom; return el.style.bottom = bottom;
}; },
Dialog.prototype.moveEnd = function() { moveEnd: function() {
var el, id; var el, id;
document.removeEventListener('mousemove', this.moveMove, true); document.removeEventListener('mousemove', ui.moveMove, true);
document.removeEventListener('mouseup', this.moveEnd, true); document.removeEventListener('mouseup', ui.moveEnd, true);
el = this.el; el = ui.el;
id = el.id; id = el.id;
GM_setValue("" + id + "Left", el.style.left); localStorage["" + id + "Left"] = el.style.left;
return GM_setValue("" + id + "Top", el.style.top); return localStorage["" + id + "Top"] = el.style.top;
}; }
return Dialog; };
})();
d = document; d = document;
g = null; g = null;
$ = function(selector, root) { $ = function(selector, root) {
@ -954,7 +952,7 @@
html += "<hr>"; html += "<hr>";
html += "<div><a href=\"http://chat.now.im/x/aeos\">support</a></div>"; html += "<div><a href=\"http://chat.now.im/x/aeos\">support</a></div>";
html += '<div><a href="https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=2DBVZBUAM4DHC&lc=US&item_name=Aeosynth&currency_code=USD&bn=PP%2dDonationsBF%3abtn_donate_LG%2egif%3aNonHosted"><img alt="Donate" src="https://www.paypal.com/en_US/i/btn/btn_donate_LG.gif"/></a></div>'; html += '<div><a href="https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=2DBVZBUAM4DHC&lc=US&item_name=Aeosynth&currency_code=USD&bn=PP%2dDonationsBF%3abtn_donate_LG%2egif%3aNonHosted"><img alt="Donate" src="https://www.paypal.com/en_US/i/btn/btn_donate_LG.gif"/></a></div>';
div = new Dialog('options', 'center', html).el; div = ui.dialog('options', 'center', html);
_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];
@ -995,7 +993,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 = new Dialog('qr', 'topleft', html).el; qr = ui.dialog('qr', 'topleft', html);
$('input[title=autohide]', qr).addEventListener('click', autohide, true); $('input[title=autohide]', qr).addEventListener('click', autohide, true);
form = $('form[name=post]'); form = $('form[name=post]');
clone = form.cloneNode(true); clone = form.cloneNode(true);
@ -1339,7 +1337,7 @@
html += "<div><label title=\"Make this thread auto update\">Auto Update Local<input type=checkbox name=autoL></label></div>"; html += "<div><label title=\"Make this thread auto update\">Auto Update Local<input type=checkbox name=autoL></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 = new Dialog('updater', 'bottomright', html).el; div = ui.dialog('updater', 'bottomright', html);
_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];
@ -1833,10 +1831,10 @@
} }
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 = new Dialog('watcher', { watcher = ui.dialog('watcher', {
top: '50px', top: '50px',
left: '0px' left: '0px'
}, html).el; }, html);
mv(watcher, d.body); mv(watcher, d.body);
watcherUpdate(); watcherUpdate();
threads = g.watched[g.BOARD] || []; threads = g.watched[g.BOARD] || [];

73
script.coffee
View File

@ -1,11 +1,4 @@
{log} = console if console? {log} = console if console?
#todo: remove close()?, make hiddenReplies/hiddenThreads local, comments, gc
#todo: remove stupid 'obj', arr el, make hidden an object, smarter xhr, text(), @this, images, clear hidden
#todo: watch - add board in updateWatcher?, redundant move divs?, redo css / hiding, manual clear
#
#TODO - 4chan time
#addClass, removeClass; remove hide / show; makeDialog el, 'center'
#TODO - expose 'hidden' configs
config = config =
'404 Redirect': [true, 'Redirect dead threads'] '404 Redirect': [true, 'Redirect dead threads']
@ -71,9 +64,9 @@ GM_addStyle '
} }
' '
class Dialog ui =
constructor: (id, position, html) -> dialog: (id, position, html) ->
@el = el = document.createElement 'div' ui.el = el = document.createElement 'div'
el.className = 'reply dialog' el.className = 'reply dialog'
el.innerHTML = html el.innerHTML = html
el.id = id el.id = id
@ -96,43 +89,45 @@ class Dialog
when 'center' when 'center'
left = '50%' left = '50%'
top = '25%' top = '25%'
left = GM_getValue "#{id}Left", left left = localStorage["#{id}Left"] or left
top = GM_getValue "#{id}Top", top top = localStorage["#{id}Top"] or top
if left then el.style.left = left else el.style.right = '0px' if left then el.style.left = left else el.style.right = '0px'
if top then el.style.top = top else el.style.bottom = '0px' if top then el.style.top = top else el.style.bottom = '0px'
$('div.move', el).addEventListener 'mousedown', @move, true el.querySelector('div.move').addEventListener 'mousedown', ui.move, true
$('div.move a[name=close]', el)?.addEventListener 'click', (-> rm el), true el.querySelector('div.move a[name=close]')?.addEventListener 'click',
move: (e) => (-> el.parentNode.removeChild(el)), true
el = @el el
move: (e) ->
{el} = ui
#distance from pointer to el edge is constant; calculate it here. #distance from pointer to el edge is constant; calculate it here.
@dx = e.clientX - el.offsetLeft ui.dx = e.clientX - el.offsetLeft
@dy = e.clientY - el.offsetTop ui.dy = e.clientY - el.offsetTop
#factor out el from document dimensions #factor out el from document dimensions
@width = document.body.clientWidth - el.offsetWidth ui.width = document.body.clientWidth - el.offsetWidth
@height = document.body.clientHeight - el.offsetHeight ui.height = document.body.clientHeight - el.offsetHeight
document.addEventListener 'mousemove', @moveMove, true document.addEventListener 'mousemove', ui.moveMove, true
document.addEventListener 'mouseup', @moveEnd, true document.addEventListener 'mouseup', ui.moveEnd, true
moveMove: (e) => moveMove: (e) ->
el = @el {el} = ui
left = e.clientX - @dx left = e.clientX - ui.dx
if left < 20 then left = '0px' if left < 20 then left = '0px'
else if @width - left < 20 then left = '' else if ui.width - left < 20 then left = ''
right = if left then '' else '0px' right = if left then '' else '0px'
el.style.left = left el.style.left = left
el.style.right = right el.style.right = right
top = e.clientY - @dy top = e.clientY - ui.dy
if top < 20 then top = '0px' if top < 20 then top = '0px'
else if @height - top < 20 then top = '' else if ui.height - top < 20 then top = ''
bottom = if top then '' else '0px' bottom = if top then '' else '0px'
el.style.top = top el.style.top = top
el.style.bottom = bottom el.style.bottom = bottom
moveEnd: => moveEnd: ->
document.removeEventListener 'mousemove', @moveMove, true document.removeEventListener 'mousemove', ui.moveMove, true
document.removeEventListener 'mouseup', @moveEnd, true document.removeEventListener 'mouseup', ui.moveEnd, true
el = @el {el} = ui #{id} = {el} = ui doesn't work
id = el.id {id} = el
GM_setValue "#{id}Left", el.style.left localStorage["#{id}Left"] = el.style.left
GM_setValue "#{id}Top", el.style.top localStorage["#{id}Top"] = el.style.top
#convenience #convenience
d = document d = document
@ -688,7 +683,7 @@ options = ->
html += "<div><a href=\"http://chat.now.im/x/aeos\">support</a></div>" html += "<div><a href=\"http://chat.now.im/x/aeos\">support</a></div>"
html += '<div><a href="https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=2DBVZBUAM4DHC&lc=US&item_name=Aeosynth&currency_code=USD&bn=PP%2dDonationsBF%3abtn_donate_LG%2egif%3aNonHosted"><img alt="Donate" src="https://www.paypal.com/en_US/i/btn/btn_donate_LG.gif"/></a></div>' html += '<div><a href="https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=2DBVZBUAM4DHC&lc=US&item_name=Aeosynth&currency_code=USD&bn=PP%2dDonationsBF%3abtn_donate_LG%2egif%3aNonHosted"><img alt="Donate" src="https://www.paypal.com/en_US/i/btn/btn_donate_LG.gif"/></a></div>'
div = new Dialog('options', 'center', html).el div = ui.dialog 'options', 'center', html
for input in $$ 'input[type="checkbox"]', div for input in $$ 'input[type="checkbox"]', div
input.addEventListener 'change', changeCheckbox, true input.addEventListener 'change', changeCheckbox, true
@ -724,7 +719,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 = new Dialog('qr', 'topleft', html).el qr = ui.dialog 'qr', 'topleft', html
$('input[title=autohide]', qr).addEventListener 'click', autohide, true $('input[title=autohide]', qr).addEventListener 'click', autohide, true
form = $ 'form[name=post]' form = $ 'form[name=post]'
@ -986,7 +981,7 @@ updaterMake = ->
html += "<div><label title=\"Make this thread auto update\">Auto Update Local<input type=checkbox name=autoL></label></div>" html += "<div><label title=\"Make this thread auto update\">Auto Update Local<input type=checkbox name=autoL></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 = new Dialog('updater', 'bottomright', html).el div = ui.dialog 'updater', 'bottomright', html
for input in $$ 'input[type=checkbox]', div for input in $$ 'input[type=checkbox]', div
input.addEventListener 'click', changeCheckbox, true input.addEventListener 'click', changeCheckbox, true
@ -1410,7 +1405,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 = new Dialog('watcher', top: '50px', left: '0px', html).el watcher = ui.dialog 'watcher', top: '50px', left: '0px', html
mv watcher, d.body mv watcher, d.body
watcherUpdate() watcherUpdate()