From 8bb52b9bcceae331b10225e11869c1657b582a07 Mon Sep 17 00:00:00 2001 From: Jordan Bates Date: Mon, 22 Apr 2013 03:08:40 -0700 Subject: [PATCH] Add Footer Navigation toggling --- builds/4chan-X.js | 31 ++++++++++++++++++++++++++++++- builds/4chan-X.user.js | 31 ++++++++++++++++++++++++++++++- builds/crx/script.js | 31 ++++++++++++++++++++++++++++++- src/config.coffee | 2 ++ src/features/misc/header.coffee | 30 ++++++++++++++++++++++++++++++ 5 files changed, 122 insertions(+), 3 deletions(-) diff --git a/builds/4chan-X.js b/builds/4chan-X.js index 47746c960..ecef9e3c1 100644 --- a/builds/4chan-X.js +++ b/builds/4chan-X.js @@ -159,6 +159,7 @@ 'Custom CSS': false, 'Boards Navigation': 'sticky top', 'Header auto-hide': false, + 'Footer auto-hide': true, 'Header catalog links': false, boardnav: '[ toggle-all ] [current-title]', time: '%m/%d/%y(%a)%H:%M:%S', @@ -4643,6 +4644,15 @@ order: 105, subEntries: subEntries }); + this.footerToggler = $.el('label', { + innerHTML: " Hide Footer Nav" + }); + $.on(this.footerToggler.firstElementChild, 'change', this.toggleFooterVisibility); + $.event('AddMenuEntry', { + type: 'header', + el: this.footerToggler, + order: 100 + }); $.on(d, 'CreateNotification', this.createNotification); $.asap((function() { return d.body; @@ -4655,7 +4665,12 @@ }), Header.setBoardList); }); return $.ready(function() { - return $.add(d.body, Header.hover); + var footer; + + $.add(d.body, Header.hover); + Header.footer = footer = $.id('boardNavDesktopFoot'); + Header.setFooterVisibility(Conf['Footer auto-hide']); + return $.sync('Footer auto-hide', Header.setFooterVisibility); }); }, bar: $.el('div', { @@ -4813,6 +4828,10 @@ $.event('CloseMenu'); return (hide ? $.addClass : $.rmClass)(Header.nav, 'autohide'); }, + setFooterVisibility: function(hide) { + Header.footerToggler.firstElementChild.checked = hide; + return Header.footer.hidden = hide; + }, toggleBarVisibility: function(e) { var hide, message; @@ -4826,6 +4845,16 @@ message = hide ? 'The header bar will automatically hide itself.' : 'The header bar will remain visible.'; return new Notification('info', message, 2); }, + toggleFooterVisibility: function() { + var hide, message; + + $.event('CloseMenu'); + hide = this.nodeName === 'INPUT' ? this.checked : !Header.footer.hidden; + Header.setFooterVisibility(hide); + $.set('Footer auto-hide', hide); + message = hide ? 'The bottom navigation will now be hidden.' : 'The bottom navigation will remain visible.'; + return new Notification('info', message, 2); + }, hashScroll: function() { var hash, post; diff --git a/builds/4chan-X.user.js b/builds/4chan-X.user.js index 7982a66c8..599297e88 100644 --- a/builds/4chan-X.user.js +++ b/builds/4chan-X.user.js @@ -160,6 +160,7 @@ 'Custom CSS': false, 'Boards Navigation': 'sticky top', 'Header auto-hide': false, + 'Footer auto-hide': true, 'Header catalog links': false, boardnav: '[ toggle-all ] [current-title]', time: '%m/%d/%y(%a)%H:%M:%S', @@ -4634,6 +4635,15 @@ order: 105, subEntries: subEntries }); + this.footerToggler = $.el('label', { + innerHTML: " Hide Footer Nav" + }); + $.on(this.footerToggler.firstElementChild, 'change', this.toggleFooterVisibility); + $.event('AddMenuEntry', { + type: 'header', + el: this.footerToggler, + order: 100 + }); $.on(d, 'CreateNotification', this.createNotification); $.asap((function() { return d.body; @@ -4646,7 +4656,12 @@ }), Header.setBoardList); }); return $.ready(function() { - return $.add(d.body, Header.hover); + var footer; + + $.add(d.body, Header.hover); + Header.footer = footer = $.id('boardNavDesktopFoot'); + Header.setFooterVisibility(Conf['Footer auto-hide']); + return $.sync('Footer auto-hide', Header.setFooterVisibility); }); }, bar: $.el('div', { @@ -4804,6 +4819,10 @@ $.event('CloseMenu'); return (hide ? $.addClass : $.rmClass)(Header.nav, 'autohide'); }, + setFooterVisibility: function(hide) { + Header.footerToggler.firstElementChild.checked = hide; + return Header.footer.hidden = hide; + }, toggleBarVisibility: function(e) { var hide, message; @@ -4817,6 +4836,16 @@ message = hide ? 'The header bar will automatically hide itself.' : 'The header bar will remain visible.'; return new Notification('info', message, 2); }, + toggleFooterVisibility: function() { + var hide, message; + + $.event('CloseMenu'); + hide = this.nodeName === 'INPUT' ? this.checked : !Header.footer.hidden; + Header.setFooterVisibility(hide); + $.set('Footer auto-hide', hide); + message = hide ? 'The bottom navigation will now be hidden.' : 'The bottom navigation will remain visible.'; + return new Notification('info', message, 2); + }, hashScroll: function() { var hash, post; diff --git a/builds/crx/script.js b/builds/crx/script.js index 49f3dde72..3aaaf6c97 100644 --- a/builds/crx/script.js +++ b/builds/crx/script.js @@ -116,6 +116,7 @@ 'Custom CSS': false, 'Boards Navigation': 'sticky top', 'Header auto-hide': false, + 'Footer auto-hide': true, 'Header catalog links': false, boardnav: '[ toggle-all ] [current-title]', time: '%m/%d/%y(%a)%H:%M:%S', @@ -4557,6 +4558,15 @@ order: 105, subEntries: subEntries }); + this.footerToggler = $.el('label', { + innerHTML: " Hide Footer Nav" + }); + $.on(this.footerToggler.firstElementChild, 'change', this.toggleFooterVisibility); + $.event('AddMenuEntry', { + type: 'header', + el: this.footerToggler, + order: 100 + }); $.on(d, 'CreateNotification', this.createNotification); $.asap((function() { return d.body; @@ -4569,7 +4579,12 @@ }), Header.setBoardList); }); return $.ready(function() { - return $.add(d.body, Header.hover); + var footer; + + $.add(d.body, Header.hover); + Header.footer = footer = $.id('boardNavDesktopFoot'); + Header.setFooterVisibility(Conf['Footer auto-hide']); + return $.sync('Footer auto-hide', Header.setFooterVisibility); }); }, bar: $.el('div', { @@ -4727,6 +4742,10 @@ $.event('CloseMenu'); return (hide ? $.addClass : $.rmClass)(Header.nav, 'autohide'); }, + setFooterVisibility: function(hide) { + Header.footerToggler.firstElementChild.checked = hide; + return Header.footer.hidden = hide; + }, toggleBarVisibility: function(e) { var hide, message; @@ -4740,6 +4759,16 @@ message = hide ? 'The header bar will automatically hide itself.' : 'The header bar will remain visible.'; return new Notification('info', message, 2); }, + toggleFooterVisibility: function() { + var hide, message; + + $.event('CloseMenu'); + hide = this.nodeName === 'INPUT' ? this.checked : !Header.footer.hidden; + Header.setFooterVisibility(hide); + $.set('Footer auto-hide', hide); + message = hide ? 'The bottom navigation will now be hidden.' : 'The bottom navigation will remain visible.'; + return new Notification('info', message, 2); + }, hashScroll: function() { var hash, post; diff --git a/src/config.coffee b/src/config.coffee index 81c8941ce..2bb054190 100644 --- a/src/config.coffee +++ b/src/config.coffee @@ -384,6 +384,8 @@ http://iqdb.org/?url=%TURL 'Header auto-hide': false + 'Footer auto-hide': true + 'Header catalog links': false boardnav: '[ toggle-all ] [current-title]' diff --git a/src/features/misc/header.coffee b/src/features/misc/header.coffee index df668a4b7..6ce4d99ef 100644 --- a/src/features/misc/header.coffee +++ b/src/features/misc/header.coffee @@ -31,6 +31,15 @@ Header = order: 105 subEntries: subEntries + @footerToggler = $.el 'label', + innerHTML: " Hide Footer Nav" + $.on @footerToggler.firstElementChild, 'change', @toggleFooterVisibility + + $.event 'AddMenuEntry', + type: 'header' + el: @footerToggler + order: 100 + $.on d, 'CreateNotification', @createNotification $.asap (-> d.body), -> @@ -41,6 +50,9 @@ Header = $.ready -> $.add d.body, Header.hover + Header.footer = footer = $.id 'boardNavDesktopFoot' + Header.setFooterVisibility Conf['Footer auto-hide'] + $.sync 'Footer auto-hide', Header.setFooterVisibility bar: $.el 'div', id: 'notifications' @@ -178,6 +190,10 @@ Header = $.event 'CloseMenu' (if hide then $.addClass else $.rmClass) Header.nav, 'autohide' + setFooterVisibility: (hide) -> + Header.footerToggler.firstElementChild.checked = hide + Header.footer.hidden = hide + toggleBarVisibility: (e) -> return if e.type is 'mousedown' and e.button isnt 0 # not LMB hide = if @nodeName is 'INPUT' @@ -193,6 +209,20 @@ Header = 'The header bar will remain visible.' new Notification 'info', message, 2 + toggleFooterVisibility: -> + $.event 'CloseMenu' + hide = if @nodeName is 'INPUT' + @checked + else + !Header.footer.hidden + Header.setFooterVisibility hide + $.set 'Footer auto-hide', hide + message = if hide + 'The bottom navigation will now be hidden.' + else + 'The bottom navigation will remain visible.' + new Notification 'info', message, 2 + hashScroll: -> return unless (hash = @location.hash) and post = $.id hash[1..] return if (Get.postFromRoot post).isHidden