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

ui -> UI

Browse Source
This commit is contained in:
James Campos 2012-03-15 23:25:21 -07:00
parent 9eebb9464b
commit aac5089b49
2 changed files with 77 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
4chan_x.user.js
View File

@ -73,7 +73,7 @@
*/ */
(function() { (function() {
var $, $$, Anonymize, AutoGif, Conf, Config, DAY, ExpandComment, ExpandThread, Favicon, FileInfo, Filter, GetTitle, HOUR, ImageExpand, ImageHover, Keybinds, MINUTE, Main, NAMESPACE, Nav, Options, QR, QuoteBacklink, QuoteCT, QuoteInline, QuoteOP, QuotePreview, Quotify, Redirect, ReplyHiding, ReportButton, RevealSpoilers, SECOND, Sauce, StrikethroughQuotes, ThreadHiding, ThreadStats, Threading, Time, TitlePost, Unread, Updater, VERSION, Watcher, d, flatten, ui, _base; var $, $$, Anonymize, AutoGif, Conf, Config, DAY, ExpandComment, ExpandThread, Favicon, FileInfo, Filter, GetTitle, HOUR, ImageExpand, ImageHover, Keybinds, MINUTE, Main, NAMESPACE, Nav, Options, QR, QuoteBacklink, QuoteCT, QuoteInline, QuoteOP, QuotePreview, Quotify, Redirect, ReplyHiding, ReportButton, RevealSpoilers, SECOND, Sauce, StrikethroughQuotes, ThreadHiding, ThreadStats, Threading, Time, TitlePost, UI, Unread, Updater, VERSION, Watcher, d, flatten, _base;
Config = { Config = {
main: { main: {
@ -222,7 +222,7 @@
d = document; d = document;
ui = { UI = {
dialog: function(id, position, html) { dialog: function(id, position, html) {
var el, saved; var el, saved;
el = d.createElement('div'); el = d.createElement('div');
@ -230,30 +230,30 @@
el.innerHTML = html; el.innerHTML = html;
el.id = id; el.id = id;
el.style.cssText = (saved = localStorage["" + NAMESPACE + id + ".position"]) ? saved : position; el.style.cssText = (saved = localStorage["" + NAMESPACE + id + ".position"]) ? saved : position;
el.querySelector('.move').addEventListener('mousedown', ui.dragstart, false); el.querySelector('.move').addEventListener('mousedown', UI.dragstart, false);
return el; return el;
}, },
dragstart: function(e) { dragstart: function(e) {
var el, rect; var el, rect;
e.preventDefault(); e.preventDefault();
ui.el = el = this.parentNode; UI.el = el = this.parentNode;
d.addEventListener('mousemove', ui.drag, false); d.addEventListener('mousemove', UI.drag, false);
d.addEventListener('mouseup', ui.dragend, false); d.addEventListener('mouseup', UI.dragend, false);
rect = el.getBoundingClientRect(); rect = el.getBoundingClientRect();
ui.dx = e.clientX - rect.left; UI.dx = e.clientX - rect.left;
ui.dy = e.clientY - rect.top; UI.dy = e.clientY - rect.top;
ui.width = d.body.clientWidth - el.offsetWidth; UI.width = d.body.clientWidth - el.offsetWidth;
return ui.height = d.body.clientHeight - el.offsetHeight; return UI.height = d.body.clientHeight - el.offsetHeight;
}, },
drag: function(e) { drag: function(e) {
var bottom, left, right, style, top; var bottom, left, right, style, top;
left = e.clientX - ui.dx; left = e.clientX - UI.dx;
top = e.clientY - ui.dy; top = e.clientY - UI.dy;
left = left < 10 ? 0 : ui.width - left < 10 ? null : left; left = left < 10 ? 0 : UI.width - left < 10 ? null : left;
top = top < 10 ? 0 : ui.height - top < 10 ? null : top; top = top < 10 ? 0 : UI.height - top < 10 ? null : top;
right = left === null ? 0 : null; right = left === null ? 0 : null;
bottom = top === null ? 0 : null; bottom = top === null ? 0 : null;
style = ui.el.style; style = UI.el.style;
style.top = top; style.top = top;
style.right = right; style.right = right;
style.bottom = bottom; style.bottom = bottom;
@ -261,15 +261,15 @@
}, },
dragend: function() { dragend: function() {
var el; var el;
el = ui.el; el = UI.el;
localStorage["" + NAMESPACE + el.id + ".position"] = el.style.cssText; localStorage["" + NAMESPACE + el.id + ".position"] = el.style.cssText;
d.removeEventListener('mousemove', ui.drag, false); d.removeEventListener('mousemove', UI.drag, false);
return d.removeEventListener('mouseup', ui.dragend, false); return d.removeEventListener('mouseup', UI.dragend, false);
}, },
hover: function(e) { hover: function(e) {
var clientHeight, clientWidth, clientX, clientY, el, height, style, top, _ref; var clientHeight, clientWidth, clientX, clientY, el, height, style, top, _ref;
clientX = e.clientX, clientY = e.clientY; clientX = e.clientX, clientY = e.clientY;
el = ui.el; el = UI.el;
style = el.style; style = el.style;
_ref = d.body, clientHeight = _ref.clientHeight, clientWidth = _ref.clientWidth; _ref = d.body, clientHeight = _ref.clientHeight, clientWidth = _ref.clientWidth;
height = el.offsetHeight; height = el.offsetHeight;
@ -284,8 +284,8 @@
} }
}, },
hoverend: function() { hoverend: function() {
$.rm(ui.el); $.rm(UI.el);
return delete ui.el; return delete UI.el;
} }
}; };
@ -1724,7 +1724,7 @@
}, },
dialog: function() { dialog: function() {
var e, event, fileInput, input, mimeTypes, name, spoiler, ta, thread, threads, _i, _j, _k, _len, _len2, _len3, _ref, _ref2, _ref3; var e, event, fileInput, input, mimeTypes, name, spoiler, ta, thread, threads, _i, _j, _k, _len, _len2, _len3, _ref, _ref2, _ref3;
QR.el = ui.dialog('qr', 'top:0;right:0;', '\ QR.el = UI.dialog('qr', 'top:0;right:0;', '\
<div class=move>\ <div class=move>\
Quick Reply <input type=checkbox id=autohide title=Auto-hide>\ Quick Reply <input type=checkbox id=autohide title=Auto-hide>\
<span> <a class=close title=Close>&times;</a></span>\ <span> <a class=close title=Close>&times;</a></span>\
@ -2493,7 +2493,7 @@
} }
checked = Conf['Auto Update'] ? 'checked' : ''; checked = Conf['Auto Update'] ? 'checked' : '';
html += " <div><label title='Controls whether *this* thread automatically updates or not'>Auto Update This<input name='Auto Update This' type=checkbox " + checked + "></label></div> <div><label>Interval (s)<input name=Interval value=" + Conf['Interval'] + " type=text></label></div> <div><input value='Update Now' type=button></div>"; html += " <div><label title='Controls whether *this* thread automatically updates or not'>Auto Update This<input name='Auto Update This' type=checkbox " + checked + "></label></div> <div><label>Interval (s)<input name=Interval value=" + Conf['Interval'] + " type=text></label></div> <div><input value='Update Now' type=button></div>";
dialog = ui.dialog('updater', 'bottom: 0; right: 0;', html); dialog = UI.dialog('updater', 'bottom: 0; right: 0;', html);
this.count = $('#count', dialog); this.count = $('#count', dialog);
this.timer = $('#timer', dialog); this.timer = $('#timer', dialog);
this.br = $('br[clear]'); this.br = $('br[clear]');
@ -2647,7 +2647,7 @@
init: function() { init: function() {
var favicon, html, input, inputs, _i, _len; var favicon, html, input, inputs, _i, _len;
html = '<div class=move>Thread Watcher</div>'; html = '<div class=move>Thread Watcher</div>';
this.dialog = ui.dialog('watcher', 'top: 50px; left: 0px;', html); this.dialog = UI.dialog('watcher', 'top: 50px; left: 0px;', html);
$.add(d.body, this.dialog); $.add(d.body, this.dialog);
inputs = $$('.op > input'); inputs = $$('.op > input');
for (_i = 0, _len = inputs.length; _i < _len; _i++) { for (_i = 0, _len = inputs.length; _i < _len; _i++) {
@ -3238,7 +3238,7 @@
mouseover: function(e) { mouseover: function(e) {
var el, id, qp, quote, replyID, threadID, _i, _len, _ref; var el, id, qp, quote, replyID, threadID, _i, _len, _ref;
if (/\binlined\b/.test(this.className)) return; if (/\binlined\b/.test(this.className)) return;
qp = ui.el = $.el('div', { qp = UI.el = $.el('div', {
id: 'qp', id: 'qp',
className: 'reply dialog' className: 'reply dialog'
}); });
@ -3261,23 +3261,23 @@
$.cache(this.pathname, (function() { $.cache(this.pathname, (function() {
return QuotePreview.parse(this, id, threadID); return QuotePreview.parse(this, id, threadID);
})); }));
ui.hover(e); UI.hover(e);
} }
$.on(this, 'mousemove', ui.hover); $.on(this, 'mousemove', UI.hover);
$.on(this, 'mouseout', QuotePreview.mouseout); $.on(this, 'mouseout', QuotePreview.mouseout);
return $.on(this, 'click', QuotePreview.mouseout); return $.on(this, 'click', QuotePreview.mouseout);
}, },
mouseout: function() { mouseout: function() {
var el; var el;
if (el = $.id(this.hash.slice(1))) $.removeClass(el, 'qphl'); if (el = $.id(this.hash.slice(1))) $.removeClass(el, 'qphl');
ui.hoverend(); UI.hoverend();
$.off(this, 'mousemove', ui.hover); $.off(this, 'mousemove', UI.hover);
$.off(this, 'mouseout', QuotePreview.mouseout); $.off(this, 'mouseout', QuotePreview.mouseout);
return $.off(this, 'click', QuotePreview.mouseout); return $.off(this, 'click', QuotePreview.mouseout);
}, },
parse: function(req, id, threadID) { parse: function(req, id, threadID) {
var doc, node, post, qp; var doc, node, post, qp;
if (!((qp = ui.el) && qp.textContent === ("Loading " + id + "..."))) return; if (!((qp = UI.el) && qp.textContent === ("Loading " + id + "..."))) return;
if (req.status !== 200) { if (req.status !== 200) {
qp.textContent = "" + req.status + " " + req.statusText; qp.textContent = "" + req.status + " " + req.statusText;
return; return;
@ -3401,7 +3401,7 @@
ThreadStats = { ThreadStats = {
init: function() { init: function() {
var dialog; var dialog;
dialog = ui.dialog('stats', 'bottom: 0; left: 0;', '<div class=move><span id=postcount>0</span> / <span id=imagecount>0</span></div>'); dialog = UI.dialog('stats', 'bottom: 0; left: 0;', '<div class=move><span id=postcount>0</span> / <span id=imagecount>0</span></div>');
dialog.className = 'dialog'; dialog.className = 'dialog';
$.add(d.body, dialog); $.add(d.body, dialog);
this.posts = this.images = 0; this.posts = this.images = 0;
@ -3606,27 +3606,27 @@
return $.on(post.img, 'mouseover', ImageHover.mouseover); return $.on(post.img, 'mouseover', ImageHover.mouseover);
}, },
mouseover: function() { mouseover: function() {
ui.el = $.el('img', { UI.el = $.el('img', {
id: 'ihover', id: 'ihover',
src: this.parentNode.href src: this.parentNode.href
}); });
$.add(d.body, ui.el); $.add(d.body, UI.el);
$.on(ui.el, 'load', ImageHover.load); $.on(UI.el, 'load', ImageHover.load);
$.on(this, 'mousemove', ui.hover); $.on(this, 'mousemove', UI.hover);
return $.on(this, 'mouseout', ImageHover.mouseout); return $.on(this, 'mouseout', ImageHover.mouseout);
}, },
load: function() { load: function() {
var style; var style;
if (this !== ui.el) return; if (this !== UI.el) return;
style = this.style; style = this.style;
return ui.hover({ return UI.hover({
clientX: -45 + parseInt(style.left), clientX: -45 + parseInt(style.left),
clientY: 120 + parseInt(style.top) clientY: 120 + parseInt(style.top)
}); });
}, },
mouseout: function() { mouseout: function() {
ui.hoverend(); UI.hoverend();
$.off(this, 'mousemove', ui.hover); $.off(this, 'mousemove', UI.hover);
return $.off(this, 'mouseout', ImageHover.mouseout); return $.off(this, 'mouseout', ImageHover.mouseout);
} }
}; };

76
script.coffee
View File

@ -175,45 +175,45 @@ HOUR = 60*MINUTE
DAY = 24*HOUR DAY = 24*HOUR
d = document d = document
ui = UI =
dialog: (id, position, html) -> dialog: (id, position, html) ->
el = d.createElement 'div' el = d.createElement 'div'
el.className = 'reply dialog' el.className = 'reply dialog'
el.innerHTML = html el.innerHTML = html
el.id = id el.id = id
el.style.cssText = if saved = localStorage["#{NAMESPACE}#{id}.position"] then saved else position el.style.cssText = if saved = localStorage["#{NAMESPACE}#{id}.position"] then saved else position
el.querySelector('.move').addEventListener 'mousedown', ui.dragstart, false el.querySelector('.move').addEventListener 'mousedown', UI.dragstart, false
el el
dragstart: (e) -> dragstart: (e) ->
#prevent text selection #prevent text selection
e.preventDefault() e.preventDefault()
ui.el = el = @parentNode UI.el = el = @parentNode
d.addEventListener 'mousemove', ui.drag, false d.addEventListener 'mousemove', UI.drag, false
d.addEventListener 'mouseup', ui.dragend, false d.addEventListener 'mouseup', UI.dragend, false
#distance from pointer to el edge is constant; calculate it here. #distance from pointer to el edge is constant; calculate it here.
# XXX opera reports el.offsetLeft / el.offsetTop as 0 # XXX opera reports el.offsetLeft / el.offsetTop as 0
rect = el.getBoundingClientRect() rect = el.getBoundingClientRect()
ui.dx = e.clientX - rect.left UI.dx = e.clientX - rect.left
ui.dy = e.clientY - rect.top UI.dy = e.clientY - rect.top
#factor out el from document dimensions #factor out el from document dimensions
ui.width = d.body.clientWidth - el.offsetWidth UI.width = d.body.clientWidth - el.offsetWidth
ui.height = d.body.clientHeight - el.offsetHeight UI.height = d.body.clientHeight - el.offsetHeight
drag: (e) -> drag: (e) ->
left = e.clientX - ui.dx left = e.clientX - UI.dx
top = e.clientY - ui.dy top = e.clientY - UI.dy
left = left =
if left < 10 then 0 if left < 10 then 0
else if ui.width - left < 10 then null else if UI.width - left < 10 then null
else left else left
top = top =
if top < 10 then 0 if top < 10 then 0
else if ui.height - top < 10 then null else if UI.height - top < 10 then null
else top else top
right = if left is null then 0 else null right = if left is null then 0 else null
bottom = if top is null then 0 else null bottom = if top is null then 0 else null
#using null instead of '' is 4% faster #using null instead of '' is 4% faster
#these 4 statements are 40% faster than 1 style.cssText #these 4 statements are 40% faster than 1 style.cssText
{style} = ui.el {style} = UI.el
style.top = top style.top = top
style.right = right style.right = right
style.bottom = bottom style.bottom = bottom
@ -222,13 +222,13 @@ ui =
#$ coffee -bpe '{a} = {b} = c' #$ coffee -bpe '{a} = {b} = c'
#var a, b; #var a, b;
#a = (b = c.b, c).a; #a = (b = c.b, c).a;
{el} = ui {el} = UI
localStorage["#{NAMESPACE}#{el.id}.position"] = el.style.cssText localStorage["#{NAMESPACE}#{el.id}.position"] = el.style.cssText
d.removeEventListener 'mousemove', ui.drag, false d.removeEventListener 'mousemove', UI.drag, false
d.removeEventListener 'mouseup', ui.dragend, false d.removeEventListener 'mouseup', UI.dragend, false
hover: (e) -> hover: (e) ->
{clientX, clientY} = e {clientX, clientY} = e
{el} = ui {el} = UI
{style} = el {style} = el
{clientHeight, clientWidth} = d.body {clientHeight, clientWidth} = d.body
height = el.offsetHeight height = el.offsetHeight
@ -250,8 +250,8 @@ ui =
style.right = clientWidth - clientX + 45 style.right = clientWidth - clientX + 45
hoverend: -> hoverend: ->
$.rm ui.el $.rm UI.el
delete ui.el delete UI.el
### ###
loosely follows the jquery api: loosely follows the jquery api:
@ -1418,7 +1418,7 @@ QR =
e.preventDefault() e.preventDefault()
dialog: -> dialog: ->
QR.el = ui.dialog 'qr', 'top:0;right:0;', ' QR.el = UI.dialog 'qr', 'top:0;right:0;', '
<div class=move> <div class=move>
Quick Reply <input type=checkbox id=autohide title=Auto-hide> Quick Reply <input type=checkbox id=autohide title=Auto-hide>
<span> <a class=close title=Close>&times;</a></span> <span> <a class=close title=Close>&times;</a></span>
@ -2113,7 +2113,7 @@ Updater =
<div><label>Interval (s)<input name=Interval value=#{Conf['Interval']} type=text></label></div> <div><label>Interval (s)<input name=Interval value=#{Conf['Interval']} type=text></label></div>
<div><input value='Update Now' type=button></div>" <div><input value='Update Now' type=button></div>"
dialog = ui.dialog 'updater', 'bottom: 0; right: 0;', html dialog = UI.dialog 'updater', 'bottom: 0; right: 0;', html
@count = $ '#count', dialog @count = $ '#count', dialog
@timer = $ '#timer', dialog @timer = $ '#timer', dialog
@ -2245,7 +2245,7 @@ Updater =
Watcher = Watcher =
init: -> init: ->
html = '<div class=move>Thread Watcher</div>' html = '<div class=move>Thread Watcher</div>'
@dialog = ui.dialog 'watcher', 'top: 50px; left: 0px;', html @dialog = UI.dialog 'watcher', 'top: 50px; left: 0px;', html
$.add d.body, @dialog $.add d.body, @dialog
#add watch buttons #add watch buttons
@ -2686,7 +2686,7 @@ QuotePreview =
return return
mouseover: (e) -> mouseover: (e) ->
return if /\binlined\b/.test @className return if /\binlined\b/.test @className
qp = ui.el = $.el 'div', qp = UI.el = $.el 'div',
id: 'qp' id: 'qp'
className: 'reply dialog' className: 'reply dialog'
$.add d.body, qp $.add d.body, qp
@ -2704,19 +2704,19 @@ QuotePreview =
qp.textContent = "Loading #{id}..." qp.textContent = "Loading #{id}..."
threadID = @pathname.split('/').pop() or $.x('ancestor::div[@class="thread"]', @).firstChild.id threadID = @pathname.split('/').pop() or $.x('ancestor::div[@class="thread"]', @).firstChild.id
$.cache @pathname, (-> QuotePreview.parse @, id, threadID) $.cache @pathname, (-> QuotePreview.parse @, id, threadID)
ui.hover e UI.hover e
$.on @, 'mousemove', ui.hover $.on @, 'mousemove', UI.hover
$.on @, 'mouseout', QuotePreview.mouseout $.on @, 'mouseout', QuotePreview.mouseout
$.on @, 'click', QuotePreview.mouseout $.on @, 'click', QuotePreview.mouseout
mouseout: -> mouseout: ->
if el = $.id @hash[1..] if el = $.id @hash[1..]
$.removeClass el, 'qphl' $.removeClass el, 'qphl'
ui.hoverend() UI.hoverend()
$.off @, 'mousemove', ui.hover $.off @, 'mousemove', UI.hover
$.off @, 'mouseout', QuotePreview.mouseout $.off @, 'mouseout', QuotePreview.mouseout
$.off @, 'click', QuotePreview.mouseout $.off @, 'click', QuotePreview.mouseout
parse: (req, id, threadID) -> parse: (req, id, threadID) ->
return unless (qp = ui.el) and qp.textContent is "Loading #{id}..." return unless (qp = UI.el) and qp.textContent is "Loading #{id}..."
if req.status isnt 200 if req.status isnt 200
qp.textContent = "#{req.status} #{req.statusText}" qp.textContent = "#{req.status} #{req.statusText}"
@ -2845,7 +2845,7 @@ ReportButton =
ThreadStats = ThreadStats =
init: -> init: ->
dialog = ui.dialog 'stats', 'bottom: 0; left: 0;', '<div class=move><span id=postcount>0</span> / <span id=imagecount>0</span></div>' dialog = UI.dialog 'stats', 'bottom: 0; left: 0;', '<div class=move><span id=postcount>0</span> / <span id=imagecount>0</span></div>'
dialog.className = 'dialog' dialog.className = 'dialog'
$.add d.body, dialog $.add d.body, dialog
@posts = @images = 0 @posts = @images = 0
@ -3005,23 +3005,23 @@ ImageHover =
return unless post.img return unless post.img
$.on post.img, 'mouseover', ImageHover.mouseover $.on post.img, 'mouseover', ImageHover.mouseover
mouseover: -> mouseover: ->
ui.el = $.el 'img' UI.el = $.el 'img'
id: 'ihover' id: 'ihover'
src: @parentNode.href src: @parentNode.href
$.add d.body, ui.el $.add d.body, UI.el
$.on ui.el, 'load', ImageHover.load $.on UI.el, 'load', ImageHover.load
$.on @, 'mousemove', ui.hover $.on @, 'mousemove', UI.hover
$.on @, 'mouseout', ImageHover.mouseout $.on @, 'mouseout', ImageHover.mouseout
load: -> load: ->
return if @ isnt ui.el return if @ isnt UI.el
# 'Fake' mousemove event by giving required values. # 'Fake' mousemove event by giving required values.
{style} = @ {style} = @
ui.hover UI.hover
clientX: - 45 + parseInt style.left clientX: - 45 + parseInt style.left
clientY: 120 + parseInt style.top clientY: 120 + parseInt style.top
mouseout: -> mouseout: ->
ui.hoverend() UI.hoverend()
$.off @, 'mousemove', ui.hover $.off @, 'mousemove', UI.hover
$.off @, 'mouseout', ImageHover.mouseout $.off @, 'mouseout', ImageHover.mouseout
AutoGif = AutoGif =