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

Detect current style and style changes.

Browse Source 
doc = d.documentElement
This commit is contained in:
Nicolas Stepien 2013-02-11 22:25:04 +01:00
parent 0adc86b392
commit 9de0342dbd
6 changed files with 117 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

103
4chan_x.user.js
View File

@ -43,7 +43,7 @@
*/ */
(function() { (function() {
var $, $$, Anonymize, ArchiveLink, AutoGIF, Board, Build, Clone, Conf, Config, DeleteLink, DownloadLink, FileInfo, Filter, Get, Header, ImageHover, Main, Menu, Notification, Post, QuoteBacklink, QuoteCT, QuoteInline, QuoteOP, QuotePreview, Quotify, Recursive, Redirect, ReplyHiding, ReportLink, RevealSpoilers, Sauce, Settings, Thread, ThreadHiding, ThreadUpdater, Time, UI, d, g, var $, $$, Anonymize, ArchiveLink, AutoGIF, Board, Build, Clone, Conf, Config, DeleteLink, DownloadLink, FileInfo, Filter, Get, Header, ImageHover, Main, Menu, Notification, Post, QuoteBacklink, QuoteCT, QuoteInline, QuoteOP, QuotePreview, Quotify, Recursive, Redirect, ReplyHiding, ReportLink, RevealSpoilers, Sauce, Settings, Thread, ThreadHiding, ThreadUpdater, Time, UI, d, doc, g,
__indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; }, __indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; },
__hasProp = {}.hasOwnProperty, __hasProp = {}.hasOwnProperty,
__extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; }; __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
@ -181,6 +181,8 @@
d = document; d = document;
doc = d.documentElement;
g = { g = {
VERSION: '3.0.0', VERSION: '3.0.0',
NAMESPACE: "4chan_X_Alpha.", NAMESPACE: "4chan_X_Alpha.",
@ -263,10 +265,10 @@
$.add(d.body, menu); $.add(d.body, menu);
mRect = menu.getBoundingClientRect(); mRect = menu.getBoundingClientRect();
bRect = button.getBoundingClientRect(); bRect = button.getBoundingClientRect();
bTop = d.documentElement.scrollTop + d.body.scrollTop + bRect.top; bTop = doc.scrollTop + d.body.scrollTop + bRect.top;
bLeft = d.documentElement.scrollLeft + d.body.scrollLeft + bRect.left; bLeft = doc.scrollLeft + d.body.scrollLeft + bRect.left;
cHeight = d.documentElement.clientHeight; cHeight = doc.clientHeight;
cWidth = d.documentElement.clientWidth; cWidth = doc.clientWidth;
top = bRect.top + bRect.height + mRect.height < cHeight ? bTop + bRect.height + 2 : bTop - mRect.height - 2; top = bRect.top + bRect.height + mRect.height < cHeight ? bTop + bRect.height + 2 : bTop - mRect.height - 2;
left = bRect.left + mRect.width < cWidth ? bLeft : bLeft + bRect.width - mRect.width; left = bRect.left + mRect.width < cWidth ? bLeft : bLeft + bRect.width - mRect.width;
style = menu.style; style = menu.style;
@ -365,8 +367,8 @@
} }
sRect = submenu.getBoundingClientRect(); sRect = submenu.getBoundingClientRect();
eRect = entry.getBoundingClientRect(); eRect = entry.getBoundingClientRect();
cHeight = d.documentElement.clientHeight; cHeight = doc.clientHeight;
cWidth = d.documentElement.clientWidth; cWidth = doc.clientWidth;
if (eRect.top + sRect.height < cHeight) { if (eRect.top + sRect.height < cHeight) {
top = '0px'; top = '0px';
bottom = 'auto'; bottom = 'auto';
@ -427,8 +429,8 @@
e = e.changedTouches[e.changedTouches.length - 1]; e = e.changedTouches[e.changedTouches.length - 1];
} }
rect = el.getBoundingClientRect(); rect = el.getBoundingClientRect();
screenHeight = d.documentElement.clientHeight; screenHeight = doc.clientHeight;
screenWidth = d.documentElement.clientWidth; screenWidth = doc.clientWidth;
o = { o = {
id: el.id, id: el.id,
style: el.style, style: el.style,
@ -510,8 +512,8 @@
style: el.style, style: el.style,
cb: cb, cb: cb,
events: events.split(' '), events: events.split(' '),
clientHeight: d.documentElement.clientHeight, clientHeight: doc.clientHeight,
clientWidth: d.documentElement.clientWidth clientWidth: doc.clientWidth
}; };
o.hover = hover.bind(o); o.hover = hover.bind(o);
o.hoverend = hoverend.bind(o); o.hoverend = hoverend.bind(o);
@ -701,11 +703,7 @@
style = $.el('style', { style = $.el('style', {
textContent: css textContent: css
}); });
$.asap((function() { $.add(d.head, style);
return d.head;
}), (function() {
return $.add(d.head, style);
}));
return style; return style;
}, },
x: function(path, root) { x: function(path, root) {
@ -1977,12 +1975,12 @@
}); });
}, },
load: function(link, html) { load: function(link, html) {
var doc, msg, s; var msg, s, tmpDoc;
doc = d.implementation.createHTMLDocument(''); tmpDoc = d.implementation.createHTMLDocument('');
doc.documentElement.innerHTML = html; tmpDoc.documentElement.innerHTML = html;
if (doc.title === '4chan - Banned') { if (tmpDoc.title === '4chan - Banned') {
s = 'Banned!'; s = 'Banned!';
} else if (msg = doc.getElementById('errmsg')) { } else if (msg = tmpDoc.getElementById('errmsg')) {
s = msg.textContent; s = msg.textContent;
$.on(link, 'click', DeleteLink["delete"]); $.on(link, 'click', DeleteLink["delete"]);
} else { } else {
@ -3768,7 +3766,7 @@
} }
this.lastPost = posts[count - 1].ID; this.lastPost = posts[count - 1].ID;
Main.callbackNodes(Post, posts); Main.callbackNodes(Post, posts);
scroll = this['Auto Scroll'] && this.scrollBG() && this.threadRoot.getBoundingClientRect().bottom - d.documentElement.clientHeight < 25; scroll = this['Auto Scroll'] && this.scrollBG() && this.threadRoot.getBoundingClientRect().bottom - doc.clientHeight < 25;
$.add(this.threadRoot, nodes); $.add(this.threadRoot, nodes);
if (scroll) { if (scroll) {
return nodes[0].scrollIntoView(); return nodes[0].scrollIntoView();
@ -4126,9 +4124,6 @@
}); });
return; return;
} }
$.addStyle(Main.css);
$.addClass(d.documentElement, $.engine);
$.addClass(d.documentElement, 'fourchan_x');
initFeature = function(name, module) { initFeature = function(name, module) {
console.time("" + name + " initialization"); console.time("" + name + " initialization");
try { try {
@ -4171,12 +4166,51 @@
initFeature('Image Hover', ImageHover); initFeature('Image Hover', ImageHover);
initFeature('Thread Updater', ThreadUpdater); initFeature('Thread Updater', ThreadUpdater);
console.timeEnd('All initializations'); console.timeEnd('All initializations');
$.on(d, '4chanMainInit', Main.initStyle);
return $.ready(Main.initReady); return $.ready(Main.initReady);
}, },
initStyle: function() {
var MutationObserver, mainStyleSheet, observer, setStyle, style, styleSheets, _ref;
if ((_ref = $('link[href*=mobile]', d.head)) != null) {
_ref.disabled = true;
}
$.addStyle(Main.css);
style = null;
mainStyleSheet = $('link[title=switch]', d.head);
styleSheets = $$('link[rel="alternate stylesheet"]', d.head);
setStyle = function() {
var styleSheet, _i, _len;
if (style) {
$.rmClass(doc, style);
}
for (_i = 0, _len = styleSheets.length; _i < _len; _i++) {
styleSheet = styleSheets[_i];
if (styleSheet.href === mainStyleSheet.href) {
style = styleSheet.title.toLowerCase().replace('new', '').trim().replace(/\s+/g, '-');
break;
}
}
return $.addClass(doc, style);
};
$.addClass(doc, $.engine);
$.addClass(doc, 'fourchan_x');
setStyle();
if (MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.OMutationObserver) {
observer = new MutationObserver(setStyle);
return observer.observe(mainStyleSheet, {
attributes: true,
attributeFilter: ['href']
});
} else {
return $.on(mainStyleSheet, 'DOMAttrModified', setStyle);
}
},
initReady: function() { initReady: function() {
var boardChild, errors, posts, thread, threadChild, threads, _i, _j, _len, _len1, _ref, _ref1, _ref2; var boardChild, errors, posts, thread, threadChild, threads, _i, _j, _len, _len1, _ref, _ref1;
if (!$.hasClass(doc, 'fourchan_x')) {
Main.initStyle();
}
if (d.title === '4chan - 404 Not Found') { if (d.title === '4chan - 404 Not Found') {
$.rmClass(d.documentElement, 'fourchan_x');
if (Conf['404 Redirect'] && g.VIEW === 'thread') { if (Conf['404 Redirect'] && g.VIEW === 'thread') {
location.href = Redirect.to({ location.href = Redirect.to({
board: g.BOARD, board: g.BOARD,
@ -4186,22 +4220,19 @@
} }
return; return;
} }
if ((_ref = $('link[href*=mobile]', d.head)) != null) {
_ref.disabled = true;
}
threads = []; threads = [];
posts = []; posts = [];
_ref1 = $('.board').children; _ref = $('.board').children;
for (_i = 0, _len = _ref1.length; _i < _len; _i++) { for (_i = 0, _len = _ref.length; _i < _len; _i++) {
boardChild = _ref1[_i]; boardChild = _ref[_i];
if (!$.hasClass(boardChild, 'thread')) { if (!$.hasClass(boardChild, 'thread')) {
continue; continue;
} }
thread = new Thread(boardChild.id.slice(1), g.BOARD); thread = new Thread(boardChild.id.slice(1), g.BOARD);
threads.push(thread); threads.push(thread);
_ref2 = boardChild.children; _ref1 = boardChild.children;
for (_j = 0, _len1 = _ref2.length; _j < _len1; _j++) { for (_j = 0, _len1 = _ref1.length; _j < _len1; _j++) {
threadChild = _ref2[_j]; threadChild = _ref1[_j];
if (!$.hasClass(threadChild, 'postContainer')) { if (!$.hasClass(threadChild, 'postContainer')) {
continue; continue;
} }

6
lib/$.coffee
View File

@ -86,11 +86,7 @@ $.extend $,
addStyle: (css) -> addStyle: (css) ->
style = $.el 'style', style = $.el 'style',
textContent: css textContent: css
# XXX fix for scriptish: $.add d.head, style
# https://github.com/scriptish/scriptish/issues/16
$.asap (-> d.head), (->
$.add d.head, style
)
style style
x: (path, root=d.body) -> x: (path, root=d.body) ->
# XPathResult.ANY_UNORDERED_NODE_TYPE === 8 # XPathResult.ANY_UNORDERED_NODE_TYPE === 8

20
lib/ui.coffee
View File

@ -59,10 +59,10 @@ UI = (->
# Position # Position
mRect = menu.getBoundingClientRect() mRect = menu.getBoundingClientRect()
bRect = button.getBoundingClientRect() bRect = button.getBoundingClientRect()
bTop = d.documentElement.scrollTop + d.body.scrollTop + bRect.top bTop = doc.scrollTop + d.body.scrollTop + bRect.top
bLeft = d.documentElement.scrollLeft + d.body.scrollLeft + bRect.left bLeft = doc.scrollLeft + d.body.scrollLeft + bRect.left
cHeight = d.documentElement.clientHeight cHeight = doc.clientHeight
cWidth = d.documentElement.clientWidth cWidth = doc.clientWidth
top = top =
if bRect.top + bRect.height + mRect.height < cHeight if bRect.top + bRect.height + mRect.height < cHeight
bTop + bRect.height + 2 bTop + bRect.height + 2
@ -141,8 +141,8 @@ UI = (->
return unless submenu = $ '.submenu', entry return unless submenu = $ '.submenu', entry
sRect = submenu.getBoundingClientRect() sRect = submenu.getBoundingClientRect()
eRect = entry.getBoundingClientRect() eRect = entry.getBoundingClientRect()
cHeight = d.documentElement.clientHeight cHeight = doc.clientHeight
cWidth = d.documentElement.clientWidth cWidth = doc.clientWidth
if eRect.top + sRect.height < cHeight if eRect.top + sRect.height < cHeight
top = '0px' top = '0px'
bottom = 'auto' bottom = 'auto'
@ -189,8 +189,8 @@ UI = (->
e = e.changedTouches[e.changedTouches.length - 1] e = e.changedTouches[e.changedTouches.length - 1]
# distance from pointer to el edge is constant; calculate it here. # distance from pointer to el edge is constant; calculate it here.
rect = el.getBoundingClientRect() rect = el.getBoundingClientRect()
screenHeight = d.documentElement.clientHeight screenHeight = doc.clientHeight
screenWidth = d.documentElement.clientWidth screenWidth = doc.clientWidth
o = { o = {
id: el.id id: el.id
style: el.style style: el.style
@ -278,8 +278,8 @@ UI = (->
style: el.style style: el.style
cb: cb cb: cb
events: events.split ' ' events: events.split ' '
clientHeight: d.documentElement.clientHeight clientHeight: doc.clientHeight
clientWidth: d.documentElement.clientWidth clientWidth: doc.clientWidth
} }
o.hover = hover.bind o o.hover = hover.bind o
o.hoverend = hoverend.bind o o.hoverend = hoverend.bind o

10
src/features.coffee
View File

@ -888,11 +888,11 @@ DeleteLink =
form: $.formData form form: $.formData form
} }
load: (link, html) -> load: (link, html) ->
doc = d.implementation.createHTMLDocument '' tmpDoc = d.implementation.createHTMLDocument ''
doc.documentElement.innerHTML = html tmpDoc.documentElement.innerHTML = html
if doc.title is '4chan - Banned' # Ban/warn check if tmpDoc.title is '4chan - Banned' # Ban/warn check
s = 'Banned!' s = 'Banned!'
else if msg = doc.getElementById 'errmsg' # error! else if msg = tmpDoc.getElementById 'errmsg' # error!
s = msg.textContent s = msg.textContent
$.on link, 'click', DeleteLink.delete $.on link, 'click', DeleteLink.delete
else else
@ -2364,7 +2364,7 @@ ThreadUpdater =
Main.callbackNodes Post, posts Main.callbackNodes Post, posts
scroll = @['Auto Scroll'] and @scrollBG() and scroll = @['Auto Scroll'] and @scrollBG() and
@threadRoot.getBoundingClientRect().bottom - d.documentElement.clientHeight < 25 @threadRoot.getBoundingClientRect().bottom - doc.clientHeight < 25
$.add @threadRoot, nodes $.add @threadRoot, nodes
if scroll if scroll
nodes[0].scrollIntoView() nodes[0].scrollIntoView()

3
src/globals.coffee
View File

@ -3,7 +3,8 @@
return unless /^(boards|images|sys)\.4chan\.org$/.test location.hostname return unless /^(boards|images|sys)\.4chan\.org$/.test location.hostname
Conf = {} Conf = {}
d = document d = document
doc = d.documentElement
g = g =
VERSION: '<%= pkg.version %>' VERSION: '<%= pkg.version %>'
NAMESPACE: "<%= pkg.name.replace(/-/g, '_') %>." NAMESPACE: "<%= pkg.name.replace(/-/g, '_') %>."

40
src/main.coffee
View File

@ -277,10 +277,6 @@ Main =
location.href = url if url location.href = url if url
return return
$.addStyle Main.css
$.addClass d.documentElement, $.engine
$.addClass d.documentElement, 'fourchan_x'
initFeature = (name, module) -> initFeature = (name, module) ->
console.time "#{name} initialization" console.time "#{name} initialization"
try try
@ -322,11 +318,42 @@ Main =
initFeature 'Thread Updater', ThreadUpdater initFeature 'Thread Updater', ThreadUpdater
console.timeEnd 'All initializations' console.timeEnd 'All initializations'
$.on d, '4chanMainInit', Main.initStyle
$.ready Main.initReady $.ready Main.initReady
initStyle: ->
# disable the mobile layout
$('link[href*=mobile]', d.head)?.disabled = true
$.addStyle Main.css
style = null
mainStyleSheet = $ 'link[title=switch]', d.head
styleSheets = $$ 'link[rel="alternate stylesheet"]', d.head
setStyle = ->
$.rmClass doc, style if style
for styleSheet in styleSheets
if styleSheet.href is mainStyleSheet.href
style = styleSheet.title.toLowerCase().replace('new', '').trim().replace /\s+/g, '-'
break
$.addClass doc, style
$.addClass doc, $.engine
$.addClass doc, 'fourchan_x'
setStyle()
if MutationObserver = window.MutationObserver or window.WebKitMutationObserver or window.OMutationObserver
observer = new MutationObserver setStyle
observer.observe mainStyleSheet,
attributes: true
attributeFilter: ['href']
else
# XXX this doesn't seem to work?
$.on mainStyleSheet, 'DOMAttrModified', setStyle
initReady: -> initReady: ->
unless $.hasClass doc, 'fourchan_x'
# Something might go wrong!
Main.initStyle()
if d.title is '4chan - 404 Not Found' if d.title is '4chan - 404 Not Found'
$.rmClass d.documentElement, 'fourchan_x'
if Conf['404 Redirect'] and g.VIEW is 'thread' if Conf['404 Redirect'] and g.VIEW is 'thread'
location.href = Redirect.to location.href = Redirect.to
board: g.BOARD board: g.BOARD
@ -334,9 +361,6 @@ Main =
postID: location.hash postID: location.hash
return return
# disable the mobile layout
$('link[href*=mobile]', d.head)?.disabled = true
threads = [] threads = []
posts = [] posts = []