Add Footer Navigation toggling

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: "<input type=checkbox " + (Conf['Footer auto-hide'] ? 'checked' : '') + "> 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;
 

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: "<input type=checkbox " + (Conf['Footer auto-hide'] ? 'checked' : '') + "> 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;
 

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: "<input type=checkbox " + (Conf['Footer auto-hide'] ? 'checked' : '') + "> 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;
 

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]'

src/features/misc/header.coffee

@@ -31,6 +31,15 @@ Header =
       order: 105
       subEntries: subEntries
 
+    @footerToggler = $.el 'label',
+      innerHTML: "<input type=checkbox #{if Conf['Footer auto-hide'] then 'checked' else ''}> 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