From 1733b2276b35eea466e9d6034440ab13f1857da9 Mon Sep 17 00:00:00 2001 From: Nicolas Stepien Date: Tue, 12 Mar 2013 04:38:22 +0100 Subject: [PATCH] Sync Header bar visibility across tabs. #932 --- 4chan_x.user.js | 56 ++++++++++++++++++++++++--------------------- src/features.coffee | 44 +++++++++++++++++++---------------- src/qr.coffee | 4 ++-- 3 files changed, 56 insertions(+), 48 deletions(-) diff --git a/4chan_x.user.js b/4chan_x.user.js index 6fc05dc75..91b6acaed 100644 --- a/4chan_x.user.js +++ b/4chan_x.user.js @@ -1014,19 +1014,18 @@ Header = { init: function() { - var catalogToggler, headerBar; - this.headerEl = $.el('div', { + var catalogToggler, headerEl; + headerEl = $.el('div', { id: 'header', innerHTML: ("
\n \n \n \n +\n \n /" + g.BOARD + "/ - ...\n \n \n
\n
\n
").replace(/>\s+<') }); - headerBar = $('#header-bar', this.headerEl); - if ($.get('autohideHeaderBar', false)) { - $.addClass(headerBar, 'autohide'); - } + this.headerBar = $('#header-bar', headerEl); + Header.setBarVisibility($.get('autohideHeaderBar', false)); + $.sync('autohideHeaderBar', Header.setBarVisibility); this.menu = new UI.Menu('header'); - $.on($('.menu-button', headerBar), 'click', this.menuToggle); - $.on($('.show-board-list-button', headerBar), 'click', this.toggleBoardList); - $.on($('#toggle-header-bar', headerBar), 'click', this.toggleBar); + $.on($('.menu-button', this.headerBar), 'click', this.menuToggle); + $.on($('.show-board-list-button', this.headerBar), 'click', this.toggleBoardList); + $.on($('#toggle-header-bar', this.headerBar), 'click', this.toggleBar); catalogToggler = $.el('label', { innerHTML: " Use catalog board links" }); @@ -1040,7 +1039,7 @@ return d.body; }), function() { if (Main.isThisPageLegit()) { - return $.prepend(d.body, Header.headerEl); + return $.prepend(d.body, headerEl); } }); return $.asap((function() { @@ -1052,13 +1051,13 @@ if (nav = $.id('boardNavDesktop')) { if (a = $("a[href*='/" + g.BOARD + "/']", nav)) { 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() { - var headerEl, node, showBoardList; + var headerBar, node, showBoardList; node = this.firstElementChild.firstChild; if (showBoardList = $.hasClass(this, 'show-board-list-button')) { $.rmClass(this, 'show-board-list-button'); @@ -1069,26 +1068,31 @@ $.addClass(this, 'show-board-list-button'); node.data = node.data.replace('-', '+'); } - headerEl = Header.headerEl; - $('.board-name', headerEl).hidden = showBoardList; - return $('.board-list', headerEl).hidden = !showBoardList; + headerBar = Header.headerBar; + $('.board-name', headerBar).hidden = showBoardList; + return $('.board-list', headerBar).hidden = !showBoardList; }, toggleCatalogLinks: function() { var a, as, root, useCatalog, _i, _len; useCatalog = this.checked; - root = $('.board-list', Header.headerEl); + root = $('.board-list', Header.headerBar); 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++) { a = as[_i]; a.pathname = "/" + (a.pathname.split('/')[1]) + "/" + (useCatalog ? 'catalog' : ''); } }, + setBarVisibility: function(hide) { + return (hide ? $.addClass : $.rmClass)(Header.headerBar, 'autohide'); + }, toggleBar: function() { - var isAutohiding, message; - message = (isAutohiding = $.id('header-bar').classList.toggle('autohide')) ? 'The header bar will automatically hide itself.' : 'The header bar will remain visible.'; + var hide, message; + 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); - return $.set('autohideHeaderBar', isAutohiding); + return $.set('autohideHeaderBar', hide); }, menuToggle: function(e) { return Header.menu.toggle(e, this, g); @@ -3019,7 +3023,7 @@ }, hl: function(delta, thread) { 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; if (postEl = $('.reply.highlight', thread)) { $.rmClass(postEl, 'highlight'); @@ -3097,7 +3101,7 @@ }, getThread: function(full) { var headRect, i, rect, thread, threads, topMargin, _i, _len; - headRect = $.id('header-bar').getBoundingClientRect(); + headRect = Header.headerBar.getBoundingClientRect(); topMargin = headRect.top + headRect.height; threads = $$('.thread:not([hidden])'); for (i = _i = 0, _len = threads.length; _i < _len; i = ++_i) { @@ -4587,7 +4591,7 @@ rect = thumb.parentNode.getBoundingClientRect(); if (rect.bottom > 0) { postRect = post.nodes.root.getBoundingClientRect(); - headRect = $.id('header-bar').getBoundingClientRect(); + headRect = Header.headerBar.getBoundingClientRect(); top = postRect.top - headRect.top - headRect.height - 2; root = $.engine === 'webkit' ? d.body : doc; if (rect.top < 0) { @@ -6610,7 +6614,7 @@ } $.on(imgContainer, 'click', this.reload.bind(this)); $.on(input, 'keydown', this.keydown.bind(this)); - $.sync('captchas', this.sync.bind(this)); + $.sync('captchas', this.sync); this.sync($.get('captchas', [])); this.reload(); $.addClass(QR.nodes.el, 'has-captcha'); @@ -6618,7 +6622,7 @@ }, sync: function(captchas) { this.captchas = captchas; - return this.count(); + return QR.captcha.count(); }, getOne: function() { var captcha, challenge, response; diff --git a/src/features.coffee b/src/features.coffee index 22d2995ee..2b2579c51 100644 --- a/src/features.coffee +++ b/src/features.coffee @@ -1,6 +1,6 @@ Header = init: -> - @headerEl = $.el 'div', + headerEl = $.el 'div', id: 'header' innerHTML: """
@@ -17,14 +17,14 @@ Header =
""".replace />\s+<' # get rid of spaces between elements - headerBar = $ '#header-bar', @headerEl - if $.get 'autohideHeaderBar', false - $.addClass headerBar, 'autohide' + @headerBar = $ '#header-bar', headerEl + Header.setBarVisibility $.get 'autohideHeaderBar', false + $.sync 'autohideHeaderBar', Header.setBarVisibility @menu = new UI.Menu 'header' - $.on $('.menu-button', headerBar), 'click', @menuToggle - $.on $('.show-board-list-button', headerBar), 'click', @toggleBoardList - $.on $('#toggle-header-bar', headerBar), 'click', @toggleBar + $.on $('.menu-button', @headerBar), 'click', @menuToggle + $.on $('.show-board-list-button', @headerBar), 'click', @toggleBoardList + $.on $('#toggle-header-bar', @headerBar), 'click', @toggleBar catalogToggler = $.el 'label', innerHTML: " Use catalog board links" @@ -36,15 +36,15 @@ Header = $.asap (-> d.body), -> if Main.isThisPageLegit() - $.prepend d.body, Header.headerEl + $.prepend d.body, headerEl $.asap (-> $.id 'boardNavDesktop'), @setBoardList setBoardList: -> if nav = $.id 'boardNavDesktop' if a = $ "a[href*='/#{g.BOARD}/']", nav a.className = 'current' - $('.board-title', Header.headerEl).textContent = a.title - $.add $('.board-list', Header.headerEl), [nav.childNodes...] + $('.board-title', Header.headerBar).textContent = a.title + $.add $('.board-list', Header.headerBar), [nav.childNodes...] toggleBoardList: -> node = @firstElementChild.firstChild @@ -56,26 +56,30 @@ Header = $.rmClass @, 'hide-board-list-button' $.addClass @, 'show-board-list-button' node.data = node.data.replace '-', '+' - {headerEl} = Header - $('.board-name', headerEl).hidden = showBoardList - $('.board-list', headerEl).hidden = !showBoardList + {headerBar} = Header + $('.board-name', headerBar).hidden = showBoardList + $('.board-list', headerBar).hidden = !showBoardList toggleCatalogLinks: -> useCatalog = @checked - root = $ '.board-list', Header.headerEl + root = $ '.board-list', Header.headerBar as = $$ 'a[href*="boards.4chan.org"]', root - as.push $ '.board-name', Header.headerEl + as.push $ '.board-name', Header.headerBar for a in as a.pathname = "/#{a.pathname.split('/')[1]}/#{if useCatalog then 'catalog' else ''}" return + setBarVisibility: (hide) -> + (if hide then $.addClass else $.rmClass) Header.headerBar, 'autohide' 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.' else 'The header bar will remain visible.' new Notification 'info', message, 2 - $.set 'autohideHeaderBar', isAutohiding + $.set 'autohideHeaderBar', hide menuToggle: (e) -> Header.menu.toggle e, @, g @@ -1698,7 +1702,7 @@ Keybinds = location.href = url hl: (delta, thread) -> - headRect = $.id('header-bar').getBoundingClientRect() + headRect = Header.headerBar.getBoundingClientRect() topMargin = headRect.top + headRect.height if postEl = $ '.reply.highlight', thread $.rmClass postEl, 'highlight' @@ -1758,7 +1762,7 @@ Nav = Nav.scroll +1 getThread: (full) -> - headRect = $.id('header-bar').getBoundingClientRect() + headRect = Header.headerBar.getBoundingClientRect() topMargin = headRect.top + headRect.height threads = $$ '.thread:not([hidden])' for thread, i in threads @@ -3059,7 +3063,7 @@ ImageExpand = # Scroll back to the thumbnail when contracting the image # to avoid being left miles away from the relevant post. postRect = post.nodes.root.getBoundingClientRect() - headRect = $.id('header-bar').getBoundingClientRect() + headRect = Header.headerBar.getBoundingClientRect() top = postRect.top - headRect.top - headRect.height - 2 root = if $.engine is 'webkit' d.body diff --git a/src/qr.coffee b/src/qr.coffee index 1b14e729d..07d6e42a0 100644 --- a/src/qr.coffee +++ b/src/qr.coffee @@ -601,7 +601,7 @@ QR = $.on imgContainer, 'click', @reload.bind @ $.on input, 'keydown', @keydown.bind @ - $.sync 'captchas', @sync.bind @ + $.sync 'captchas', @sync @sync $.get 'captchas', [] # start with an uncached captcha @reload() @@ -609,7 +609,7 @@ QR = $.addClass QR.nodes.el, 'has-captcha' $.after QR.nodes.com.parentNode, [imgContainer, input] sync: (@captchas) -> - @count() + QR.captcha.count() getOne: -> @clear() if captcha = @captchas.shift()