Merge pull request #252 from seaweedchan/v3

Add Footer Navigation toggling

builds/4chan-X.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',
@@ -4644,6 +4645,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;
@@ -4656,7 +4666,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', {
@@ -4818,6 +4833,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;
 
@@ -4831,6 +4850,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

@@ -161,6 +161,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',
@@ -4635,6 +4636,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;
@@ -4647,7 +4657,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', {
@@ -4809,6 +4824,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;
 
@@ -4822,6 +4841,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

@@ -117,6 +117,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',
@@ -4558,6 +4559,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;
@@ -4570,7 +4580,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', {
@@ -4732,6 +4747,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;
 
@@ -4745,6 +4764,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

@@ -388,6 +388,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'
@@ -181,6 +193,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'
@@ -196,6 +212,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