Add Footer Navigation toggling

This commit is contained in:
Jordan Bates 2013-04-22 03:08:40 -07:00
parent 0b802fdd56
commit 8bb52b9bcc
5 changed files with 122 additions and 3 deletions

View File

@ -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;

View File

@ -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;

View File

@ -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;

View File

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

View File

@ -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