Goyslop/4chan-x
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #1339 from ihavenoface/v3

Browse Source 
Add hide header on scroll. Close #1138
This commit is contained in:
Mayhem 2013-11-20 17:23:14 -08:00
commit 16a21fd087
4 changed files with 63 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
CHANGELOG.md
View File

@ -1,3 +1,5 @@
- **New option**: `Auto-hide header on scroll`.
## 3.13.0 - *2013-11-16*
- More index navigation improvements:

4
css/style.css
View File

@ -141,6 +141,10 @@ a[href="javascript:;"] {
box-shadow: none;
transition: all .8s .6s cubic-bezier(.55, .055, .675, .19);
}
#header-bar.scroll:not(:hover) {
transition: -webkit-transform .2s !important;
transition: transform .2s !important;
}
#header.top #header-bar.autohide:not(:hover) {
margin-bottom: -1em;
-webkit-transform: translateY(-100%);

13
src/General/Config.coffee
View File

@ -144,12 +144,13 @@ Config =
'Index Sort': 'bump'
'Show Replies': true
Header:
'Header auto-hide': false
'Bottom header': false
'Header catalog links': false
'Top Board List': false
'Bottom Board List': false
'Custom Board Navigation': true
'Header auto-hide': false
'Header auto-hide on scroll': false
'Bottom header': false
'Header catalog links': false
'Top Board List': false
'Bottom Board List': false
'Custom Board Navigation': true
QR:
'QR.personas': """
#email:"sage";boards:jp;always

71
src/General/Header.coffee
View File

@ -21,6 +21,8 @@ Header =
headerToggler = $.el 'label',
innerHTML: '<input type=checkbox name="Header auto-hide"> Auto-hide header'
scrollHeaderToggler = $.el 'label',
innerHTML: '<input type=checkbox name="Header auto-hide on scroll"> Auto-hide header on scroll'
barPositionToggler = $.el 'label',
innerHTML: '<input type=checkbox name="Bottom header"> Bottom header'
catalogToggler = $.el 'label',
@ -35,30 +37,34 @@ Header =
textContent: 'Edit custom board navigation'
href: 'javascript:;'
@headerToggler = headerToggler.firstElementChild
@barPositionToggler = barPositionToggler.firstElementChild
@catalogToggler = catalogToggler.firstElementChild
@topBoardToggler = topBoardToggler.firstElementChild
@botBoardToggler = botBoardToggler.firstElementChild
@customNavToggler = customNavToggler.firstElementChild
@headerToggler = headerToggler.firstElementChild
@scrollHeaderToggler = scrollHeaderToggler.firstElementChild
@barPositionToggler = barPositionToggler.firstElementChild
@catalogToggler = catalogToggler.firstElementChild
@topBoardToggler = topBoardToggler.firstElementChild
@botBoardToggler = botBoardToggler.firstElementChild
@customNavToggler = customNavToggler.firstElementChild
$.on @headerToggler, 'change', @toggleBarVisibility
$.on @barPositionToggler, 'change', @toggleBarPosition
$.on @catalogToggler, 'change', @toggleCatalogLinks
$.on @topBoardToggler, 'change', @toggleOriginalBoardList
$.on @botBoardToggler, 'change', @toggleOriginalBoardList
$.on @customNavToggler, 'change', @toggleCustomNav
$.on editCustomNav, 'click', @editCustomNav
$.on @headerToggler, 'change', @toggleBarVisibility
$.on @scrollHeaderToggler, 'change', @toggleHideBarOnScroll
$.on @barPositionToggler, 'change', @toggleBarPosition
$.on @catalogToggler, 'change', @toggleCatalogLinks
$.on @topBoardToggler, 'change', @toggleOriginalBoardList
$.on @botBoardToggler, 'change', @toggleOriginalBoardList
$.on @customNavToggler, 'change', @toggleCustomNav
$.on editCustomNav, 'click', @editCustomNav
@setBarVisibility Conf['Header auto-hide']
@setBarPosition Conf['Bottom header']
@setTopBoardList Conf['Top Board List']
@setBotBoardList Conf['Bottom Board List']
@setBarVisibility Conf['Header auto-hide']
@setHideBarOnScroll Conf['Header auto-hide on scroll']
@setBarPosition Conf['Bottom header']
@setTopBoardList Conf['Top Board List']
@setBotBoardList Conf['Bottom Board List']
$.sync 'Header auto-hide', @setBarVisibility
$.sync 'Bottom header', @setBarPosition
$.sync 'Top Board List', @setTopBoardList
$.sync 'Bottom Board List', @setBotBoardList
$.sync 'Header auto-hide', @setBarVisibility
$.sync 'Header auto-hide on scroll', @setHideBarOnScroll
$.sync 'Bottom header', @setBarPosition
$.sync 'Top Board List', @setTopBoardList
$.sync 'Bottom Board List', @setBotBoardList
$.event 'AddMenuEntry',
type: 'header'
@ -66,6 +72,7 @@ Header =
order: 105
subEntries: [
{el: headerToggler}
{el: scrollHeaderToggler}
{el: barPositionToggler}
{el: catalogToggler}
{el: topBoardToggler}
@ -178,6 +185,28 @@ Header =
'The header bar will remain visible.'
new Notice 'info', message, 2
setHideBarOnScroll: (hide) ->
Header.scrollHeaderToggler.checked = hide
if hide
$.on window, 'scroll', Header.hideBarOnScroll
return
$.off window, 'scroll', Header.hideBarOnScroll
$.rmClass Header.bar, 'scroll'
$.rmClass Header.bar, 'autohide' unless Conf['Header auto-hide']
toggleHideBarOnScroll: (e) ->
hide = @checked
$.set 'Header auto-hide on scroll', hide
Header.setHideBarOnScroll hide
hideBarOnScroll: ->
offsetY = window.pageYOffset
if offsetY > (Header.previousOffset or 0)
$.addClass Header.bar, 'autohide'
$.addClass Header.bar, 'scroll'
else
$.rmClass Header.bar, 'autohide'
$.rmClass Header.bar, 'scroll'
Header.previousOffset = offsetY
setBarPosition: (bottom) ->
Header.barPositionToggler.checked = bottom
$.event 'CloseMenu'