diff --git a/4chan_x.user.js b/4chan_x.user.js index 5f8a70864..c8a026e46 100644 --- a/4chan_x.user.js +++ b/4chan_x.user.js @@ -73,7 +73,7 @@ */ (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 = { main: { @@ -222,7 +222,7 @@ d = document; - ui = { + UI = { dialog: function(id, position, html) { var el, saved; el = d.createElement('div'); @@ -230,30 +230,30 @@ el.innerHTML = html; el.id = id; 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; }, dragstart: function(e) { var el, rect; e.preventDefault(); - ui.el = el = this.parentNode; - d.addEventListener('mousemove', ui.drag, false); - d.addEventListener('mouseup', ui.dragend, false); + UI.el = el = this.parentNode; + d.addEventListener('mousemove', UI.drag, false); + d.addEventListener('mouseup', UI.dragend, false); rect = el.getBoundingClientRect(); - ui.dx = e.clientX - rect.left; - ui.dy = e.clientY - rect.top; - ui.width = d.body.clientWidth - el.offsetWidth; - return ui.height = d.body.clientHeight - el.offsetHeight; + UI.dx = e.clientX - rect.left; + UI.dy = e.clientY - rect.top; + UI.width = d.body.clientWidth - el.offsetWidth; + return UI.height = d.body.clientHeight - el.offsetHeight; }, drag: function(e) { var bottom, left, right, style, top; - left = e.clientX - ui.dx; - top = e.clientY - ui.dy; - left = left < 10 ? 0 : ui.width - left < 10 ? null : left; - top = top < 10 ? 0 : ui.height - top < 10 ? null : top; + left = e.clientX - UI.dx; + top = e.clientY - UI.dy; + left = left < 10 ? 0 : UI.width - left < 10 ? null : left; + top = top < 10 ? 0 : UI.height - top < 10 ? null : top; right = left === null ? 0 : null; bottom = top === null ? 0 : null; - style = ui.el.style; + style = UI.el.style; style.top = top; style.right = right; style.bottom = bottom; @@ -261,15 +261,15 @@ }, dragend: function() { var el; - el = ui.el; + el = UI.el; localStorage["" + NAMESPACE + el.id + ".position"] = el.style.cssText; - d.removeEventListener('mousemove', ui.drag, false); - return d.removeEventListener('mouseup', ui.dragend, false); + d.removeEventListener('mousemove', UI.drag, false); + return d.removeEventListener('mouseup', UI.dragend, false); }, hover: function(e) { var clientHeight, clientWidth, clientX, clientY, el, height, style, top, _ref; clientX = e.clientX, clientY = e.clientY; - el = ui.el; + el = UI.el; style = el.style; _ref = d.body, clientHeight = _ref.clientHeight, clientWidth = _ref.clientWidth; height = el.offsetHeight; @@ -284,8 +284,8 @@ } }, hoverend: function() { - $.rm(ui.el); - return delete ui.el; + $.rm(UI.el); + return delete UI.el; } }; @@ -1724,7 +1724,7 @@ }, dialog: function() { 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;', '\
\ Quick Reply \ ×\ @@ -2493,7 +2493,7 @@ } checked = Conf['Auto Update'] ? 'checked' : ''; html += "
"; - dialog = ui.dialog('updater', 'bottom: 0; right: 0;', html); + dialog = UI.dialog('updater', 'bottom: 0; right: 0;', html); this.count = $('#count', dialog); this.timer = $('#timer', dialog); this.br = $('br[clear]'); @@ -2647,7 +2647,7 @@ init: function() { var favicon, html, input, inputs, _i, _len; html = '
Thread Watcher
'; - 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); inputs = $$('.op > input'); for (_i = 0, _len = inputs.length; _i < _len; _i++) { @@ -3238,7 +3238,7 @@ mouseover: function(e) { var el, id, qp, quote, replyID, threadID, _i, _len, _ref; if (/\binlined\b/.test(this.className)) return; - qp = ui.el = $.el('div', { + qp = UI.el = $.el('div', { id: 'qp', className: 'reply dialog' }); @@ -3261,23 +3261,23 @@ $.cache(this.pathname, (function() { 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); return $.on(this, 'click', QuotePreview.mouseout); }, mouseout: function() { var el; if (el = $.id(this.hash.slice(1))) $.removeClass(el, 'qphl'); - ui.hoverend(); - $.off(this, 'mousemove', ui.hover); + UI.hoverend(); + $.off(this, 'mousemove', UI.hover); $.off(this, 'mouseout', QuotePreview.mouseout); return $.off(this, 'click', QuotePreview.mouseout); }, parse: function(req, id, threadID) { 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) { qp.textContent = "" + req.status + " " + req.statusText; return; @@ -3401,7 +3401,7 @@ ThreadStats = { init: function() { var dialog; - dialog = ui.dialog('stats', 'bottom: 0; left: 0;', '
0 / 0
'); + dialog = UI.dialog('stats', 'bottom: 0; left: 0;', '
0 / 0
'); dialog.className = 'dialog'; $.add(d.body, dialog); this.posts = this.images = 0; @@ -3606,27 +3606,27 @@ return $.on(post.img, 'mouseover', ImageHover.mouseover); }, mouseover: function() { - ui.el = $.el('img', { + UI.el = $.el('img', { id: 'ihover', src: this.parentNode.href }); - $.add(d.body, ui.el); - $.on(ui.el, 'load', ImageHover.load); - $.on(this, 'mousemove', ui.hover); + $.add(d.body, UI.el); + $.on(UI.el, 'load', ImageHover.load); + $.on(this, 'mousemove', UI.hover); return $.on(this, 'mouseout', ImageHover.mouseout); }, load: function() { var style; - if (this !== ui.el) return; + if (this !== UI.el) return; style = this.style; - return ui.hover({ + return UI.hover({ clientX: -45 + parseInt(style.left), clientY: 120 + parseInt(style.top) }); }, mouseout: function() { - ui.hoverend(); - $.off(this, 'mousemove', ui.hover); + UI.hoverend(); + $.off(this, 'mousemove', UI.hover); return $.off(this, 'mouseout', ImageHover.mouseout); } }; diff --git a/script.coffee b/script.coffee index 8e101af6f..ec0c90e3e 100644 --- a/script.coffee +++ b/script.coffee @@ -175,45 +175,45 @@ HOUR = 60*MINUTE DAY = 24*HOUR d = document -ui = +UI = dialog: (id, position, html) -> el = d.createElement 'div' el.className = 'reply dialog' el.innerHTML = html el.id = id 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 dragstart: (e) -> #prevent text selection e.preventDefault() - ui.el = el = @parentNode - d.addEventListener 'mousemove', ui.drag, false - d.addEventListener 'mouseup', ui.dragend, false + UI.el = el = @parentNode + d.addEventListener 'mousemove', UI.drag, false + d.addEventListener 'mouseup', UI.dragend, false #distance from pointer to el edge is constant; calculate it here. # XXX opera reports el.offsetLeft / el.offsetTop as 0 rect = el.getBoundingClientRect() - ui.dx = e.clientX - rect.left - ui.dy = e.clientY - rect.top + UI.dx = e.clientX - rect.left + UI.dy = e.clientY - rect.top #factor out el from document dimensions - ui.width = d.body.clientWidth - el.offsetWidth - ui.height = d.body.clientHeight - el.offsetHeight + UI.width = d.body.clientWidth - el.offsetWidth + UI.height = d.body.clientHeight - el.offsetHeight drag: (e) -> - left = e.clientX - ui.dx - top = e.clientY - ui.dy + left = e.clientX - UI.dx + top = e.clientY - UI.dy left = if left < 10 then 0 - else if ui.width - left < 10 then null + else if UI.width - left < 10 then null else left top = if top < 10 then 0 - else if ui.height - top < 10 then null + else if UI.height - top < 10 then null else top right = if left is null then 0 else null bottom = if top is null then 0 else null #using null instead of '' is 4% faster #these 4 statements are 40% faster than 1 style.cssText - {style} = ui.el + {style} = UI.el style.top = top style.right = right style.bottom = bottom @@ -222,13 +222,13 @@ ui = #$ coffee -bpe '{a} = {b} = c' #var a, b; #a = (b = c.b, c).a; - {el} = ui + {el} = UI localStorage["#{NAMESPACE}#{el.id}.position"] = el.style.cssText - d.removeEventListener 'mousemove', ui.drag, false - d.removeEventListener 'mouseup', ui.dragend, false + d.removeEventListener 'mousemove', UI.drag, false + d.removeEventListener 'mouseup', UI.dragend, false hover: (e) -> {clientX, clientY} = e - {el} = ui + {el} = UI {style} = el {clientHeight, clientWidth} = d.body height = el.offsetHeight @@ -250,8 +250,8 @@ ui = style.right = clientWidth - clientX + 45 hoverend: -> - $.rm ui.el - delete ui.el + $.rm UI.el + delete UI.el ### loosely follows the jquery api: @@ -1418,7 +1418,7 @@ QR = e.preventDefault() dialog: -> - QR.el = ui.dialog 'qr', 'top:0;right:0;', ' + QR.el = UI.dialog 'qr', 'top:0;right:0;', '
Quick Reply × @@ -2113,7 +2113,7 @@ Updater =
" - dialog = ui.dialog 'updater', 'bottom: 0; right: 0;', html + dialog = UI.dialog 'updater', 'bottom: 0; right: 0;', html @count = $ '#count', dialog @timer = $ '#timer', dialog @@ -2245,7 +2245,7 @@ Updater = Watcher = init: -> html = '
Thread Watcher
' - @dialog = ui.dialog 'watcher', 'top: 50px; left: 0px;', html + @dialog = UI.dialog 'watcher', 'top: 50px; left: 0px;', html $.add d.body, @dialog #add watch buttons @@ -2686,7 +2686,7 @@ QuotePreview = return mouseover: (e) -> return if /\binlined\b/.test @className - qp = ui.el = $.el 'div', + qp = UI.el = $.el 'div', id: 'qp' className: 'reply dialog' $.add d.body, qp @@ -2704,19 +2704,19 @@ QuotePreview = qp.textContent = "Loading #{id}..." threadID = @pathname.split('/').pop() or $.x('ancestor::div[@class="thread"]', @).firstChild.id $.cache @pathname, (-> QuotePreview.parse @, id, threadID) - ui.hover e - $.on @, 'mousemove', ui.hover + UI.hover e + $.on @, 'mousemove', UI.hover $.on @, 'mouseout', QuotePreview.mouseout $.on @, 'click', QuotePreview.mouseout mouseout: -> if el = $.id @hash[1..] $.removeClass el, 'qphl' - ui.hoverend() - $.off @, 'mousemove', ui.hover + UI.hoverend() + $.off @, 'mousemove', UI.hover $.off @, 'mouseout', QuotePreview.mouseout $.off @, 'click', QuotePreview.mouseout 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 qp.textContent = "#{req.status} #{req.statusText}" @@ -2845,7 +2845,7 @@ ReportButton = ThreadStats = init: -> - dialog = ui.dialog 'stats', 'bottom: 0; left: 0;', '
0 / 0
' + dialog = UI.dialog 'stats', 'bottom: 0; left: 0;', '
0 / 0
' dialog.className = 'dialog' $.add d.body, dialog @posts = @images = 0 @@ -3005,23 +3005,23 @@ ImageHover = return unless post.img $.on post.img, 'mouseover', ImageHover.mouseover mouseover: -> - ui.el = $.el 'img' + UI.el = $.el 'img' id: 'ihover' src: @parentNode.href - $.add d.body, ui.el - $.on ui.el, 'load', ImageHover.load - $.on @, 'mousemove', ui.hover + $.add d.body, UI.el + $.on UI.el, 'load', ImageHover.load + $.on @, 'mousemove', UI.hover $.on @, 'mouseout', ImageHover.mouseout load: -> - return if @ isnt ui.el + return if @ isnt UI.el # 'Fake' mousemove event by giving required values. {style} = @ - ui.hover + UI.hover clientX: - 45 + parseInt style.left clientY: 120 + parseInt style.top mouseout: -> - ui.hoverend() - $.off @, 'mousemove', ui.hover + UI.hoverend() + $.off @, 'mousemove', UI.hover $.off @, 'mouseout', ImageHover.mouseout AutoGif =