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

Sync Header bar visibility across tabs. #932

Browse Source
This commit is contained in:
Nicolas Stepien 2013-03-12 04:38:22 +01:00
parent b36b9540d3
commit 1733b2276b
3 changed files with 56 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
4chan_x.user.js
View File

@ -1014,19 +1014,18 @@
Header = { Header = {
init: function() { init: function() {
var catalogToggler, headerBar; var catalogToggler, headerEl;
this.headerEl = $.el('div', { headerEl = $.el('div', {
id: 'header', id: 'header',
innerHTML: ("<div id=header-bar class=dialog>\n <span class=brackets-wrap><a class=menu-button href=javascript:;><span></span></a></span>\n <span class=brackets-wrap hidden>top secret</span>\n <span class=brackets-wrap id=board-list hidden>next-gen board-list</span>\n <span class='show-board-list-button brackets-wrap' title=\"Toggle the board list.\"><a href=javascript:;>+</a></span>\n <a class=board-name href=\"/" + g.BOARD + "/" + (g.VIEW === 'catalog' ? 'catalog' : '') + "\">\n <span class=board-path>/" + g.BOARD + "/</span> - <span class=board-title>...</span>\n </a>\n <span class=board-list hidden></span>\n <div id=toggle-header-bar title=\"Toggle the header auto-hiding.\"></div>\n</div>\n<div id=notifications></div>").replace(/>\s+</g, '><') innerHTML: ("<div id=header-bar class=dialog>\n <span class=brackets-wrap><a class=menu-button href=javascript:;><span></span></a></span>\n <span class=brackets-wrap hidden>top secret</span>\n <span class=brackets-wrap id=board-list hidden>next-gen board-list</span>\n <span class='show-board-list-button brackets-wrap' title=\"Toggle the board list.\"><a href=javascript:;>+</a></span>\n <a class=board-name href=\"/" + g.BOARD + "/" + (g.VIEW === 'catalog' ? 'catalog' : '') + "\">\n <span class=board-path>/" + g.BOARD + "/</span> - <span class=board-title>...</span>\n </a>\n <span class=board-list hidden></span>\n <div id=toggle-header-bar title=\"Toggle the header auto-hiding.\"></div>\n</div>\n<div id=notifications></div>").replace(/>\s+</g, '><')
}); });
headerBar = $('#header-bar', this.headerEl); this.headerBar = $('#header-bar', headerEl);
if ($.get('autohideHeaderBar', false)) { Header.setBarVisibility($.get('autohideHeaderBar', false));
$.addClass(headerBar, 'autohide'); $.sync('autohideHeaderBar', Header.setBarVisibility);
}
this.menu = new UI.Menu('header'); this.menu = new UI.Menu('header');
$.on($('.menu-button', headerBar), 'click', this.menuToggle); $.on($('.menu-button', this.headerBar), 'click', this.menuToggle);
$.on($('.show-board-list-button', headerBar), 'click', this.toggleBoardList); $.on($('.show-board-list-button', this.headerBar), 'click', this.toggleBoardList);
$.on($('#toggle-header-bar', headerBar), 'click', this.toggleBar); $.on($('#toggle-header-bar', this.headerBar), 'click', this.toggleBar);
catalogToggler = $.el('label', { catalogToggler = $.el('label', {
innerHTML: "<input type=checkbox " + (g.VIEW === 'catalog' ? 'checked' : '') + "> Use catalog board links" innerHTML: "<input type=checkbox " + (g.VIEW === 'catalog' ? 'checked' : '') + "> Use catalog board links"
}); });
@ -1040,7 +1039,7 @@
return d.body; return d.body;
}), function() { }), function() {
if (Main.isThisPageLegit()) { if (Main.isThisPageLegit()) {
return $.prepend(d.body, Header.headerEl); return $.prepend(d.body, headerEl);
} }
}); });
return $.asap((function() { return $.asap((function() {
@ -1052,13 +1051,13 @@
if (nav = $.id('boardNavDesktop')) { if (nav = $.id('boardNavDesktop')) {
if (a = $("a[href*='/" + g.BOARD + "/']", nav)) { if (a = $("a[href*='/" + g.BOARD + "/']", nav)) {
a.className = 'current'; a.className = 'current';
$('.board-title', Header.headerEl).textContent = a.title; $('.board-title', Header.headerBar).textContent = a.title;
} }
return $.add($('.board-list', Header.headerEl), __slice.call(nav.childNodes)); return $.add($('.board-list', Header.headerBar), __slice.call(nav.childNodes));
} }
}, },
toggleBoardList: function() { toggleBoardList: function() {
var headerEl, node, showBoardList; var headerBar, node, showBoardList;
node = this.firstElementChild.firstChild; node = this.firstElementChild.firstChild;
if (showBoardList = $.hasClass(this, 'show-board-list-button')) { if (showBoardList = $.hasClass(this, 'show-board-list-button')) {
$.rmClass(this, 'show-board-list-button'); $.rmClass(this, 'show-board-list-button');
@ -1069,26 +1068,31 @@
$.addClass(this, 'show-board-list-button'); $.addClass(this, 'show-board-list-button');
node.data = node.data.replace('-', '+'); node.data = node.data.replace('-', '+');
} }
headerEl = Header.headerEl; headerBar = Header.headerBar;
$('.board-name', headerEl).hidden = showBoardList; $('.board-name', headerBar).hidden = showBoardList;
return $('.board-list', headerEl).hidden = !showBoardList; return $('.board-list', headerBar).hidden = !showBoardList;
}, },
toggleCatalogLinks: function() { toggleCatalogLinks: function() {
var a, as, root, useCatalog, _i, _len; var a, as, root, useCatalog, _i, _len;
useCatalog = this.checked; useCatalog = this.checked;
root = $('.board-list', Header.headerEl); root = $('.board-list', Header.headerBar);
as = $$('a[href*="boards.4chan.org"]', root); as = $$('a[href*="boards.4chan.org"]', root);
as.push($('.board-name', Header.headerEl)); as.push($('.board-name', Header.headerBar));
for (_i = 0, _len = as.length; _i < _len; _i++) { for (_i = 0, _len = as.length; _i < _len; _i++) {
a = as[_i]; a = as[_i];
a.pathname = "/" + (a.pathname.split('/')[1]) + "/" + (useCatalog ? 'catalog' : ''); a.pathname = "/" + (a.pathname.split('/')[1]) + "/" + (useCatalog ? 'catalog' : '');
} }
}, },
setBarVisibility: function(hide) {
return (hide ? $.addClass : $.rmClass)(Header.headerBar, 'autohide');
},
toggleBar: function() { toggleBar: function() {
var isAutohiding, message; var hide, message;
message = (isAutohiding = $.id('header-bar').classList.toggle('autohide')) ? 'The header bar will automatically hide itself.' : 'The header bar will remain visible.'; hide = !$.hasClass(Header.headerBar, 'autohide');
Header.setBarVisibility(hide);
message = hide ? 'The header bar will automatically hide itself.' : 'The header bar will remain visible.';
new Notification('info', message, 2); new Notification('info', message, 2);
return $.set('autohideHeaderBar', isAutohiding); return $.set('autohideHeaderBar', hide);
}, },
menuToggle: function(e) { menuToggle: function(e) {
return Header.menu.toggle(e, this, g); return Header.menu.toggle(e, this, g);
@ -3019,7 +3023,7 @@
}, },
hl: function(delta, thread) { hl: function(delta, thread) {
var headRect, next, postEl, rect, replies, reply, root, topMargin, _i, _len; var headRect, next, postEl, rect, replies, reply, root, topMargin, _i, _len;
headRect = $.id('header-bar').getBoundingClientRect(); headRect = Header.headerBar.getBoundingClientRect();
topMargin = headRect.top + headRect.height; topMargin = headRect.top + headRect.height;
if (postEl = $('.reply.highlight', thread)) { if (postEl = $('.reply.highlight', thread)) {
$.rmClass(postEl, 'highlight'); $.rmClass(postEl, 'highlight');
@ -3097,7 +3101,7 @@
}, },
getThread: function(full) { getThread: function(full) {
var headRect, i, rect, thread, threads, topMargin, _i, _len; var headRect, i, rect, thread, threads, topMargin, _i, _len;
headRect = $.id('header-bar').getBoundingClientRect(); headRect = Header.headerBar.getBoundingClientRect();
topMargin = headRect.top + headRect.height; topMargin = headRect.top + headRect.height;
threads = $$('.thread:not([hidden])'); threads = $$('.thread:not([hidden])');
for (i = _i = 0, _len = threads.length; _i < _len; i = ++_i) { for (i = _i = 0, _len = threads.length; _i < _len; i = ++_i) {
@ -4587,7 +4591,7 @@
rect = thumb.parentNode.getBoundingClientRect(); rect = thumb.parentNode.getBoundingClientRect();
if (rect.bottom > 0) { if (rect.bottom > 0) {
postRect = post.nodes.root.getBoundingClientRect(); postRect = post.nodes.root.getBoundingClientRect();
headRect = $.id('header-bar').getBoundingClientRect(); headRect = Header.headerBar.getBoundingClientRect();
top = postRect.top - headRect.top - headRect.height - 2; top = postRect.top - headRect.top - headRect.height - 2;
root = $.engine === 'webkit' ? d.body : doc; root = $.engine === 'webkit' ? d.body : doc;
if (rect.top < 0) { if (rect.top < 0) {
@ -6610,7 +6614,7 @@
} }
$.on(imgContainer, 'click', this.reload.bind(this)); $.on(imgContainer, 'click', this.reload.bind(this));
$.on(input, 'keydown', this.keydown.bind(this)); $.on(input, 'keydown', this.keydown.bind(this));
$.sync('captchas', this.sync.bind(this)); $.sync('captchas', this.sync);
this.sync($.get('captchas', [])); this.sync($.get('captchas', []));
this.reload(); this.reload();
$.addClass(QR.nodes.el, 'has-captcha'); $.addClass(QR.nodes.el, 'has-captcha');
@ -6618,7 +6622,7 @@
}, },
sync: function(captchas) { sync: function(captchas) {
this.captchas = captchas; this.captchas = captchas;
return this.count(); return QR.captcha.count();
}, },
getOne: function() { getOne: function() {
var captcha, challenge, response; var captcha, challenge, response;

44
src/features.coffee
View File

@ -1,6 +1,6 @@
Header = Header =
init: -> init: ->
@headerEl = $.el 'div', headerEl = $.el 'div',
id: 'header' id: 'header'
innerHTML: """ innerHTML: """
<div id=header-bar class=dialog> <div id=header-bar class=dialog>
@ -17,14 +17,14 @@ Header =
<div id=notifications></div> <div id=notifications></div>
""".replace />\s+</g, '><' # get rid of spaces between elements """.replace />\s+</g, '><' # get rid of spaces between elements
headerBar = $ '#header-bar', @headerEl @headerBar = $ '#header-bar', headerEl
if $.get 'autohideHeaderBar', false Header.setBarVisibility $.get 'autohideHeaderBar', false
$.addClass headerBar, 'autohide' $.sync 'autohideHeaderBar', Header.setBarVisibility
@menu = new UI.Menu 'header' @menu = new UI.Menu 'header'
$.on $('.menu-button', headerBar), 'click', @menuToggle $.on $('.menu-button', @headerBar), 'click', @menuToggle
$.on $('.show-board-list-button', headerBar), 'click', @toggleBoardList $.on $('.show-board-list-button', @headerBar), 'click', @toggleBoardList
$.on $('#toggle-header-bar', headerBar), 'click', @toggleBar $.on $('#toggle-header-bar', @headerBar), 'click', @toggleBar
catalogToggler = $.el 'label', catalogToggler = $.el 'label',
innerHTML: "<input type=checkbox #{if g.VIEW is 'catalog' then 'checked' else ''}> Use catalog board links" innerHTML: "<input type=checkbox #{if g.VIEW is 'catalog' then 'checked' else ''}> Use catalog board links"
@ -36,15 +36,15 @@ Header =
$.asap (-> d.body), -> $.asap (-> d.body), ->
if Main.isThisPageLegit() if Main.isThisPageLegit()
$.prepend d.body, Header.headerEl $.prepend d.body, headerEl
$.asap (-> $.id 'boardNavDesktop'), @setBoardList $.asap (-> $.id 'boardNavDesktop'), @setBoardList
setBoardList: -> setBoardList: ->
if nav = $.id 'boardNavDesktop' if nav = $.id 'boardNavDesktop'
if a = $ "a[href*='/#{g.BOARD}/']", nav if a = $ "a[href*='/#{g.BOARD}/']", nav
a.className = 'current' a.className = 'current'
$('.board-title', Header.headerEl).textContent = a.title $('.board-title', Header.headerBar).textContent = a.title
$.add $('.board-list', Header.headerEl), [nav.childNodes...] $.add $('.board-list', Header.headerBar), [nav.childNodes...]
toggleBoardList: -> toggleBoardList: ->
node = @firstElementChild.firstChild node = @firstElementChild.firstChild
@ -56,26 +56,30 @@ Header =
$.rmClass @, 'hide-board-list-button' $.rmClass @, 'hide-board-list-button'
$.addClass @, 'show-board-list-button' $.addClass @, 'show-board-list-button'
node.data = node.data.replace '-', '+' node.data = node.data.replace '-', '+'
{headerEl} = Header {headerBar} = Header
$('.board-name', headerEl).hidden = showBoardList $('.board-name', headerBar).hidden = showBoardList
$('.board-list', headerEl).hidden = !showBoardList $('.board-list', headerBar).hidden = !showBoardList
toggleCatalogLinks: -> toggleCatalogLinks: ->
useCatalog = @checked useCatalog = @checked
root = $ '.board-list', Header.headerEl root = $ '.board-list', Header.headerBar
as = $$ 'a[href*="boards.4chan.org"]', root as = $$ 'a[href*="boards.4chan.org"]', root
as.push $ '.board-name', Header.headerEl as.push $ '.board-name', Header.headerBar
for a in as for a in as
a.pathname = "/#{a.pathname.split('/')[1]}/#{if useCatalog then 'catalog' else ''}" a.pathname = "/#{a.pathname.split('/')[1]}/#{if useCatalog then 'catalog' else ''}"
return return
setBarVisibility: (hide) ->
(if hide then $.addClass else $.rmClass) Header.headerBar, 'autohide'
toggleBar: -> toggleBar: ->
message = if isAutohiding = $.id('header-bar').classList.toggle 'autohide' hide = !$.hasClass Header.headerBar, 'autohide'
Header.setBarVisibility hide
message = if hide
'The header bar will automatically hide itself.' 'The header bar will automatically hide itself.'
else else
'The header bar will remain visible.' 'The header bar will remain visible.'
new Notification 'info', message, 2 new Notification 'info', message, 2
$.set 'autohideHeaderBar', isAutohiding $.set 'autohideHeaderBar', hide
menuToggle: (e) -> menuToggle: (e) ->
Header.menu.toggle e, @, g Header.menu.toggle e, @, g
@ -1698,7 +1702,7 @@ Keybinds =
location.href = url location.href = url
hl: (delta, thread) -> hl: (delta, thread) ->
headRect = $.id('header-bar').getBoundingClientRect() headRect = Header.headerBar.getBoundingClientRect()
topMargin = headRect.top + headRect.height topMargin = headRect.top + headRect.height
if postEl = $ '.reply.highlight', thread if postEl = $ '.reply.highlight', thread
$.rmClass postEl, 'highlight' $.rmClass postEl, 'highlight'
@ -1758,7 +1762,7 @@ Nav =
Nav.scroll +1 Nav.scroll +1
getThread: (full) -> getThread: (full) ->
headRect = $.id('header-bar').getBoundingClientRect() headRect = Header.headerBar.getBoundingClientRect()
topMargin = headRect.top + headRect.height topMargin = headRect.top + headRect.height
threads = $$ '.thread:not([hidden])' threads = $$ '.thread:not([hidden])'
for thread, i in threads for thread, i in threads
@ -3059,7 +3063,7 @@ ImageExpand =
# Scroll back to the thumbnail when contracting the image # Scroll back to the thumbnail when contracting the image
# to avoid being left miles away from the relevant post. # to avoid being left miles away from the relevant post.
postRect = post.nodes.root.getBoundingClientRect() postRect = post.nodes.root.getBoundingClientRect()
headRect = $.id('header-bar').getBoundingClientRect() headRect = Header.headerBar.getBoundingClientRect()
top = postRect.top - headRect.top - headRect.height - 2 top = postRect.top - headRect.top - headRect.height - 2
root = if $.engine is 'webkit' root = if $.engine is 'webkit'
d.body d.body

4
src/qr.coffee
View File

@ -601,7 +601,7 @@ QR =
$.on imgContainer, 'click', @reload.bind @ $.on imgContainer, 'click', @reload.bind @
$.on input, 'keydown', @keydown.bind @ $.on input, 'keydown', @keydown.bind @
$.sync 'captchas', @sync.bind @ $.sync 'captchas', @sync
@sync $.get 'captchas', [] @sync $.get 'captchas', []
# start with an uncached captcha # start with an uncached captcha
@reload() @reload()
@ -609,7 +609,7 @@ QR =
$.addClass QR.nodes.el, 'has-captcha' $.addClass QR.nodes.el, 'has-captcha'
$.after QR.nodes.com.parentNode, [imgContainer, input] $.after QR.nodes.com.parentNode, [imgContainer, input]
sync: (@captchas) -> sync: (@captchas) ->
@count() QR.captcha.count()
getOne: -> getOne: ->
@clear() @clear()
if captcha = @captchas.shift() if captcha = @captchas.shift()