Add Mayhem X's Header and options to disable it.

css/style.css

@@ -62,7 +62,7 @@ a[href="javascript:;"] {
 #fourchanx-settings,
 #qp, #ihover,
 #updater, #thread-stats,
-#navlinks, #header,
+#navlinks, #boardNavDesktop.fixed,
 #watcher,
 #qr {
   position: fixed;
@@ -91,7 +91,7 @@ a[href="javascript:;"] {
 #watcher:hover {
   z-index: 20;
 }
-#header {
+#boardNavDesktop.fixed {
   z-index: 10;
 }
 #watcher {
@@ -103,46 +103,46 @@ a[href="javascript:;"] {
   -moz-box-sizing: border-box;
   box-sizing: border-box;
 }
-#header {
+#boardNavDesktop.fixed {
   right: 0;
   left: 0;
 }
-#header.top {
+#boardNavDesktop.fixed.top {
   top: 0;
 }
-#header.bottom {
+#boardNavDesktop.fixed.bottom {
   bottom: 0;
 }
-#header-bar {
+#boardNavDesktop {
   border-width: 0;
   padding: 3px 4px 4px;
   position: relative;
   transition: all .1s .05s ease-in-out;
 }
-#header.top #header-bar {
+#boardNavDesktop.fixed.top {
   border-bottom-width: 1px;
 }
-#header.bottom #header-bar {
+#boardNavDesktop.fixed.bottom {
   box-shadow: 0 -1px 2px rgba(0, 0, 0, .15);
   border-top-width: 1px;
 }
-#header.bottom .menu-button i {
+#boardNavDesktop.fixed.bottom .menu-button i {
   border-top: none;
   border-bottom: 6px solid;
 }
 #board-list {
   text-align: center;
 }
-#header-bar.autohide:not(:hover) {
+#boardNavDesktop.fixed.autohide:not(:hover) {
   box-shadow: none;
   transition: all .8s .6s cubic-bezier(.55, .055, .675, .19);
 }
-#header.top #header-bar.autohide:not(:hover) {
+#boardNavDesktop.fixed.top.autohide:not(:hover) {
   margin-bottom: -1em;
   -webkit-transform: translateY(-100%);
   transform: translateY(-100%);
 }
-#header.bottom #header-bar.autohide:not(:hover) {
+#boardNavDesktop.fixed.bottom.autohide:not(:hover) {
   -webkit-transform: translateY(100%);
   transform: translateY(100%);
 }
@@ -152,33 +152,22 @@ a[href="javascript:;"] {
   height: 10px;
   position: absolute;
 }
-#header.top #toggle-header-bar {
+#boardNavDesktop:not(.fixed) #toggle-header-bar {
-  cursor: n-resize;
+  display: none;
-  bottom: -8px;
 }
-#header.bottom #toggle-header-bar {
+#boardNavDesktop.fixed #toggle-header-bar {
-  cursor: s-resize;
-  top: -8px;
-}
-#header-bar.autohide:not(:hover) #toggle-header-bar,
-#toggle-header-bar:hover {
-  height: 18px;
-}
-#header.top #header-bar.autohide:not(:hover) #toggle-header-bar,
-#header.top #toggle-header-bar:hover {
-  bottom: -16px;
-}
-#header.bottom #header-bar.autohide:not(:hover) #toggle-header-bar,
-#header.bottom #toggle-header-bar:hover {
-  top: -16px;
-}
-#header.top #header-bar.autohide #toggle-header-bar {
-  cursor: s-resize;
-}
-#header.bottom #header-bar.autohide #toggle-header-bar {
   cursor: n-resize;
 }
-#header-bar a:not(.entry) {
+#boardNavDesktop.fixed.top #toggle-header-bar {
+  top: 100%;
+}
+#boardNavDesktop.fixed.bottom #toggle-header-bar {
+  bottom: 100%;
+}
+##boardNavDesktop.fixed #header-bar.autohide #toggle-header-bar {
+  cursor: s-resize;
+}
+#boardNavDesktop a:not(.entry) {
   text-decoration: none;
   padding: 1px;
 }
@@ -204,12 +193,10 @@ a[href="javascript:;"] {
   top: 0;
   right: 0;
   left: 0;
+  transition: all .8s .6s cubic-bezier(.55, .055, .675, .19);
 }
-#header.bottom #notifications {
+.top:not(.autohide) ~ #notifications {
-  position: fixed;
+  top: 2em;
-  top: 0;
-  left: 0;
-  width: 100%;
 }
 .notification {
   color: #FFF;

src/config.coffee

@@ -13,6 +13,10 @@ Config =
         false
         'Compatibility between <%= meta.name %> and 4chan\'s inline extension is NOT guaranteed.'
       ]
+      'Fixed Header': [
+        false
+        'Mayhem X\'s Fixed Header (kinda).'
+      ]
       'Custom Board Navigation': [
         true
         'Show custom links instead of the full board list.'
@@ -364,7 +368,9 @@ http://iqdb.org/?url=%TURL
 #//archive.installgentoo.net/%board/image/%MD5;text:View same on installgentoo /%board/
 """
 
-  'Custom CSS': false 
+  'Custom CSS': false
+
+  'Bottom header': false
 
   'Header auto-hide': false
 

src/features.coffee

@@ -6,8 +6,28 @@ Header =
       id: 'shortcuts'
     @hover = $.el 'div',
       id: 'hoverUI'
+    @toggle = $.el 'div',
+      id: 'toggle-header-bar'
 
-    $.on window, 'load hashchange', Header.hashScroll
+    $.on @toggle, 'mousedown',       @toggleBarVisibility
+    $.on window,  'load hashchange', Header.hashScroll
+
+    @positionToggler = $.el 'label',
+      innerHTML: "<input type=checkbox #{if Conf['Bottom header'] then 'checked' else ''}> Bottom header"
+    $.on @positionToggler.firstElementChild, 'change', @toggleBarPosition
+    $.event 'AddMenuEntry',
+      type: 'header'
+      el: @positionToggler
+      order: 108
+
+    @headerToggler = $.el 'label',
+      innerHTML: "<input type=checkbox #{if Conf['Header auto-hide'] then 'checked' else ''}> Auto-hide header"
+    $.on @headerToggler.firstElementChild, 'change', @toggleBarVisibility
+
+    $.event 'AddMenuEntry',
+      type: 'header'
+      el: @headerToggler
+      order: 109
 
     $.on d, 'CreateNotification', @createNotification
 
@@ -21,17 +41,21 @@ Header =
       $.add d.body, Header.hover
 
   setBoardList: ->
-    
     Header.nav = nav = $.id 'boardNavDesktop'
     if a = $ "a[href*='/#{g.BOARD}/']", nav
       a.className = 'current'
+
     fullBoardList = $.el 'span',
       id:     'full-board-list'
       hidden: true
+
     customBoardList = $.el 'span',
       id:     'custom-board-list'
+
+    Header.fixedHeader nav if Conf['Fixed Header']
+
     $.add fullBoardList, [nav.childNodes...]
-    $.add nav, [customBoardList, fullBoardList, Header.shortcuts, $ '#navtopright', fullBoardList]
+    $.add nav, [customBoardList, fullBoardList, Header.shortcuts, $('#navtopright', fullBoardList), Header.toggle]
     $.add d.body, Header.bar
 
     if Conf['Custom Board Navigation']
@@ -46,6 +70,16 @@ Header =
       $.rm $ '#custom-board-list', nav
       fullBoardList.hidden = false
 
+  fixedHeader: (nav) ->
+    $.addClass nav, 'fixed'
+    $.addClass nav, 'dialog'
+
+    @setBarPosition Conf['Bottom header']
+    $.sync 'Bottom header', @setBarPosition
+
+    @setBarVisibility Conf['Header auto-hide']
+    $.sync 'Header auto-hide', @setBarVisibility
+
   generateBoardList: (text) ->
     list = $ '#custom-board-list', Header.nav
     list.innerHTML = null
@@ -93,6 +127,26 @@ Header =
     custom.hidden = !showBoardList
     full.hidden   =  showBoardList
 
+  setBarPosition: (bottom) ->
+    $.event 'CloseMenu'
+    Header.positionToggler.firstElementChild.checked = bottom
+    if bottom
+      $.addClass Header.nav, 'bottom'
+      $.rmClass  Header.nav, 'top'
+    else
+      $.addClass Header.nav, 'top'
+      $.rmClass  Header.nav, 'bottom'
+
+  toggleBarPosition: ->
+    bottom = @checked
+    Header.setBarPosition bottom
+    Conf['Bottom header'] = bottom
+    $.set 'Bottom header', bottom
+
+  setBarVisibility: (hide) ->
+    Header.headerToggler.firstElementChild.checked = hide
+    (if hide then $.addClass else $.rmClass) Header.nav, 'autohide'
+
   hashScroll: ->
     return unless post = $.id @location.hash[1..]
     return if (Get.postFromRoot post).isHidden
@@ -105,6 +159,20 @@ Header =
       top += - headRect.top - headRect.height
     (if $.engine is 'webkit' then d.body else doc).scrollTop += top
 
+  toggleBarVisibility: (e) ->
+    return if e.type is 'mousedown' and e.button isnt 0 # not LMB
+    hide = if @nodeName is 'INPUT'
+      @checked
+    else
+      !$.hasClass Header.nav, 'autohide'
+    Header.setBarVisibility hide
+    message = if hide
+      'The header bar will automatically hide itself.'
+    else
+      'The header bar will remain visible.'
+    new Notification 'info', message, 2
+    $.set 'Header auto-hide', hide
+
   addShortcut: (el) ->
     shortcut = $.el 'span',
       className: 'shortcut'
@@ -264,7 +332,7 @@ Settings =
 
     Settings.overlay = overlay = $.el 'div',
       id: 'overlay'
-    
+
     Settings.dialog = dialog = $.el 'div',
       id:        'fourchanx-settings'
       className: 'dialog'
@@ -1889,7 +1957,7 @@ Keybinds =
       location.href = url
 
   hl: (delta, thread) ->
-    if Conf['Bottom header']
+    if Conf['Fixed Header'] and Conf['Bottom header']
       topMargin = 0
     else
       headRect  = Header.bar.getBoundingClientRect()
@@ -4084,7 +4152,7 @@ ThreadUpdater =
     unless d.hidden
       # Lower the max refresh rate limit on visible tabs.
       j = Math.min j, 7
-    ThreadUpdater.seconds = 
+    ThreadUpdater.seconds =
       if Conf['Optional Increase']
         Math.max i, [0, 5, 10, 15, 20, 30, 60, 90, 120, 240, 300][j]
       else
@@ -4533,7 +4601,7 @@ Linkify =
 
   embedder: (a) ->
     return [a] unless Conf['Embedding']
-    
+
     callbacks = ->
       a.textContent = switch @status
         when 200, 304