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

Add hide header on scroll. Close #1138

Browse Source
This commit is contained in:
noface 2013-11-16 23:52:12 +01:00
parent b8a2269f44
commit 216dca44ae
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* ## 3.13.0 - *2013-11-16*
- More index navigation improvements: - More index navigation improvements:

4
css/style.css
View File

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

13
src/General/Config.coffee
View File

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

71
src/General/Header.coffee
View File

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