Start IconPositioner rewrite

LICENSE

@@ -1,5 +1,5 @@
 /*
-* appchan x - Version 2.3.4 - 2013-08-18
+* appchan x - Version 2.3.4 - 2013-08-19
 *
 * Licensed under the MIT license.
 * https://github.com/zixaphir/appchan-x/blob/master/LICENSE

src/General/Header.coffee

@@ -2,7 +2,7 @@ Header =
   init: ->
     @menu = new UI.Menu 'header'
 
-    @menuButton = $.el 'span',
+    menuButton = $.el 'span',
       className: 'menu-button'
       id:        'main-menu'
 
@@ -26,7 +26,7 @@ Header =
     @setBarFixed      Conf['Fixed Header']
     @setBarVisibility Conf['Header auto-hide']
 
-    $.on @menuButton,         'click',  @menuToggle
+    $.on menuButton,          'click',  @menuToggle
     $.on @barFixedToggler,    'change', @toggleBarFixed
     $.on @barPositionToggler, 'change', @toggleBarPosition
     $.on @headerToggler,      'change', @toggleBarVisibility
@@ -52,6 +52,9 @@ Header =
     $.on window, 'load hashchange', Header.hashScroll
     $.on d, 'CreateNotification', @createNotification
 
+    @enableDesktopNotifications()
+    @addShortcut menuButton, [110, 100]
+
     $.asap (-> d.body), =>
       return unless Main.isThisPageLegit()
       # Wait for #boardNavMobile instead of #boardNavDesktop,
@@ -60,9 +63,6 @@ Header =
       $.prepend d.body, @bar
       $.add d.body, Header.hover
       @setBarPosition Conf['Bottom Header']
-      @
-
-    @enableDesktopNotifications()
 
   bar: $.el 'div',
     id: 'header-bar'
@@ -92,9 +92,7 @@ Header =
 
     $.rm $ '#navtopright', fullBoardList
 
-    settings = $.id('navtopright')
+    $.prepend d.body, $.id 'navtopright'
-    $.prepend d.body, settings
-    $.add settings, Header.menuButton
 
     $.add boardList, fullBoardList
     $.add Header.bar, [Header.shortcuts, boardList, Header.notify, Header.toggle]
@@ -271,9 +269,11 @@ Header =
       top -= headRect.top + headRect.height
     window.scrollBy 0, top
 
-  addShortcut: (el) ->
+  addShortcut: (el, order) ->
+    order = order[if Conf["Icon Orientation"] is "horizontal" then 0 else 1]
     shortcut = $.el 'span',
       className: 'shortcut brackets-wrap'
+    shortcut.style.cssText = "order: #{order}; -webkit-order: #{order};"
     $.add shortcut, el
     $.prepend Header.shortcuts, shortcut
 

src/General/Settings.coffee

@@ -518,9 +518,6 @@ Settings =
           input.value = val
           $.on input, 'change', cb.value
 
-        if key is 'Icon Orientation'
-          $.on input, 'change', Style.iconPositions
-
       Rice.nodes nodes
       $.add section, nodes
 

src/General/css/icons.base.css

@@ -1,36 +1,25 @@
-#navtopright .exlinksOptionsLink::after,
 #main-menu,
 body > div.navLinks > a:first-of-type::after,
-.slideout-watcher #thread-watcher::after,
+.slideout-watcher #sowIcon,
-.announcements-slideout #globalMessage::after,
+.announcements-slideout #psaIcon,
-#boardNavDesktopFoot::after,
+#slideNav,
 #img-controls,
-#catalog::after,
+#catalog,
 #fappeTyme {
   z-index: 18;
-  position: fixed;
+  display: inline-block;
-  display: block;
   width: 15px;
   height: 15px;
   content: "";
   opacity: 0.5;
 }
-body::after {
-  content: "";
-  display: block;
-  position: fixed;
-  z-index: 5;
-  width: 18px;
-  height: 18px;
-}
-.invisible-icons #navtopright .exlinksOptionsLink::after,
 .invisible-icons #main-menu,
 .invisible-icons body > div.navLinks > a:first-of-type::after,
-.invisible-icons.slideout-watcher #thread-watcher::after,
+.invisible-icons.slideout-watcher #sowIcon,
-.invisible-icons.announcements-slideout #globalMessage::after,
+.invisible-icons.announcements-slideout #psaIcon,
-.invisible-icons #boardNavDesktopFoot::after,
+.invisible-icons #slideNav,
 .invisible-icons #img-controls,
-.invisible-icons #catalog::after,
+.invisible-icons #catalog,
 .invisible-icons #fappeTyme {
   opacity: 0;
 }
@@ -46,7 +35,7 @@ body > div.navLinks > a:first-of-type,
 body > div.navLinks > a:first-of-type:hover,
 .slideout-watcher #thread-watcher:hover,
 .announcements-slideout #globalMessage:hover,
-#boardNavDesktopFoot:hover,
+#slideNav:hover,
 #img-controls,
 #catalog:hover {
   z-index: 17;
@@ -60,13 +49,13 @@ body > div.navLinks > a:first-of-type::after {
   cursor: pointer;
   background-position: 0 -15px;
 }
-.slideout-watcher #thread-watcher::after {
+.slideout-watcher #sowIcon {
   background-position: 0 -30px;
 }
-.announcements-slideout #globalMessage::after {
+.announcements-slideout #psaIcon {
   background-position: 0 -45px;
 }
-#boardNavDesktopFoot::after {
+#slideNav {
   background-position: 0 -60px;
 }
 #img-controls {
@@ -75,22 +64,21 @@ body > div.navLinks > a:first-of-type::after {
 #navtopright .exlinksOptionsLink::after {
   background-position: 0 -105px;
 }
-#catalog::after {
+#catalog {
   visibility: visible;
   background-position: 0 -120px;
 }
 #fappeTyme {
   background-position: 0 -135px;
 }
-#boardNavDesktopFoot:hover::after,
+#slideNav:hover,
-.announcements-slideout #globalMessage:hover::after,
+.announcements-slideout #psaIcon:hover,
 #img-controls:hover,
 #navlinks a:hover,
 #appchanOptions:hover,
 #main-menu:hover,
-#navtopright .exlinksOptionsLink:hover::after,
 #qr #qrtab,
-.slideout-watcher #thread-watcher:hover::after,
+.slideout-watcher #sowIcon:hover,
 .thumbnail#selected,
 div.navLinks > a:first-of-type:hover::after,
 #catalog:hover::after,

src/General/css/icons.horz.css

@@ -1,6 +1,3 @@
-body::after {
-  #{align}: #{position[i] - 1}px;
-}
 /* Appchan X Options */
 #main-menu {
   #{align}: #{position[i++]}px;
@@ -26,7 +23,7 @@ body::after {
   #{align}: #{position[i++]}px;
 }
 /* 4chan Catalog */
-#catalog::after {
+#catalog {
   #{align}: #{position[i++]}px;
 }
 /* Back */
@@ -48,10 +45,6 @@ div.navLinks > a:first-of-type::after {
 #navlinks a:first-of-type {
   #{align}: #{position[i++]}px;
 }
-body::after {
-  width: #{position[i] - 2}px;
-  top: 0;
-}
 #boardNavDesktopFoot::after,
 #navtopright .exlinksOptionsLink::after,
 #main-menu,
@@ -60,7 +53,7 @@ body::after {
 #img-controls,
 #fappeTyme,
 div.navLinks > a:first-of-type::after,
-#catalog::after {
+#catalog {
   top: 1px !important;
 }
 .slideout-watcher #globalMessage,

src/General/css/icons.vert.css

@@ -1,7 +1,3 @@
-/* Expand Images */
-body::after {
-  top: #{position[i] - 1}px;
-}
 #img-controls {
   top: #{position[i++]}px;
 }
@@ -29,7 +25,7 @@ body::after {
   top: #{position[i++]}px;
 }
 /* 4chan Catalog */
-#catalog::after {
+#catalog {
   top: #{position[i++]}px;
 }
 /* Back */
@@ -47,10 +43,6 @@ div.navLinks > a:first-of-type::after {
 #navlinks a:last-of-type {
   top: #{position[i++]}px !important;
 }
-body::after {
-  height: #{position[i] - 2}px;
-  #{align}: 2px;
-}
 #navlinks a,
 #navtopright .exlinksOptionsLink::after,
 #main-menu,
@@ -59,7 +51,7 @@ body::after {
 #img-controls,
 #fappeTyme,
 .slideout-watcher #thread-watcher::after,
-#catalog::after,
+#catalog,
 div.navLinks > a:first-of-type::after {
   #{align}: 3px !important;
 }

src/General/css/layout.css

@@ -55,7 +55,6 @@ body > hr {
   display: none !important;
 }
 /* Hidden UI */
-#catalog,
 #navlinks,
 #navtopright,
 #svg_filters,
@@ -258,6 +257,8 @@ th {
 }
 #shortcuts {
   float: right;
+  display: flex;
+  display: -webkit-flex;
 }
 .fixed #header-bar.autohide {
   z-index: 24;
@@ -485,25 +486,23 @@ th {
   margin: 0 3px;
 }
 /* Icons */
-.icons-4chan-ss #navtopright .exlinksOptionsLink::after,
 .icons-4chan-ss #main-menu,
 .icons-4chan-ss .navLinks > a:first-of-type::after,
-.icons-4chan-ss #thread-watcher::after,
+.icons-4chan-ss #sowIcon,
-.icons-4chan-ss #globalMessage::after,
+.icons-4chan-ss #psaIcon,
-.icons-4chan-ss #boardNavDesktopFoot::after,
+.icons-4chan-ss #slideNav,
 .icons-4chan-ss #img-controls,
-.icons-4chan-ss #catalog::after,
+.icons-4chan-ss #catalog,
 .icons-4chan-ss #fappeTyme {
   background-image: url("data:image/png;base64,<%= grunt.file.read("src/General/img/icons/4chanSS.png",  {encoding: "base64"}) %>");
 }
-.icons-oneechan #navtopright .exlinksOptionsLink::after,
 .icons-oneechan #main-menu,
 .icons-oneechan .navLinks > a:first-of-type::after,
-.icons-oneechan #thread-watcher::after,
+.icons-oneechan #sowIcon,
-.icons-oneechan #globalMessage::after,
+.icons-oneechan #psaIcon,
-.icons-oneechan #boardNavDesktopFoot::after,
+.icons-oneechan #slideNav,
 .icons-oneechan #img-controls,
-.icons-oneechan #catalog::after,
+.icons-oneechan #catalog,
 .icons-oneechan #fappeTyme {
   background-image: url("data:image/png;base64,<%= grunt.file.read("src/General/img/icons/oneechan.png", {encoding: "base64"}) %>");
 }

src/General/css/theme.css

@@ -348,7 +348,7 @@ a .name {
 #globalMessage::after,
 #boardNavDesktopFoot::after,
 #img-controls,
-#catalog::after,
+#catalog,
 #fappeTyme {
   #{unless Style.lightTheme then "<%= filter %>: url(\"#icons-filter\");" else ""}
 }

src/Images/FappeTyme.coffee

@@ -8,8 +8,7 @@ FappeTyme =
 
     $.on el, 'click', FappeTyme.toggle
 
-    $.asap (-> $.id 'boardNavMobile'), ->
+    Header.addShortcut el, [30, 30]
-      $.add $.id('navtopright'), el
 
     Post::callbacks.push
       name: 'Fappe Tyme'

src/Images/ImageExpand.coffee

@@ -10,13 +10,12 @@ ImageExpand =
 
     $.on @EAI, 'click', ImageExpand.cb.toggleAll
 
+    Header.addShortcut @EAI, [80, 130]
+
     Post::callbacks.push
       name: 'Image Expansion'
       cb: @node
 
-    $.asap (-> $.id 'delform'), ->
-      $.prepend $.id('delform'), ImageExpand.EAI
-
   node: ->
     return unless @file?.isImage
     {thumb} = @file

src/Miscellaneous/AnnouncementHiding.coffee

@@ -28,6 +28,7 @@ PSAHiding =
       className: 'hide-announcement' 
       href: 'javascript:;'
       textContent: '[ - ]'
+
     $.on btn, 'click', PSAHiding.toggle
 
     $.get 'hiddenPSA', 0, ({hiddenPSA}) ->
@@ -52,4 +53,3 @@ PSAHiding =
       false
     if (hr = psa.nextElementSibling) and hr.nodeName is 'HR'
       hr.hidden = psa.hidden
-    Style.iconPositions()

src/Miscellaneous/CatalogLinks.coffee

@@ -55,6 +55,6 @@ CatalogLinks =
 
   ready: ->
     if catalogLink = ($('.pages.cataloglink a', d.body) or $ '[href=".././catalog"]', d.body)
-      if g.VIEW isnt 'thread'
+      catalogLink.textContent = ''
-        $.add d.body, catalogLink
+      Header.addShortcut catalogLink, [70, 70]
       catalogLink.id = 'catalog'

src/Miscellaneous/Nav.coffee

@@ -8,20 +8,19 @@ Nav =
       else # catalog
         return
 
-    span = $.el 'span',
-      id: 'navlinks'
     prev = $.el 'a',
       href: 'javascript:;'
+      id:   'navPrev'
     next = $.el 'a',
       href: 'javascript:;'
+      id:   'navNext'
+
+    Header.addShortcut prev, [10, 10]
+    Header.addShortcut next, [20, 20]
 
     $.on prev, 'click', @prev
     $.on next, 'click', @next
 
-    $.add span, [prev, $.tn(' '), next]
-    append = ->
-      $.off d, '4chanXInitFinished', append
-      $.add d.body, span
     $.on d, '4chanXInitFinished', append
 
   prev: ->

src/Monitoring/ThreadStats.coffee

@@ -8,7 +8,7 @@ ThreadStats =
         id:        'thread-stats'
         title: 'Post Count / File Count' + (if Conf["Page Count in Stats"] then " / Page Count" else "")
       $.ready ->
-        Header.addShortcut sc
+        Header.addShortcut sc, [10,10]
     else 
       @dialog = sc = UI.dialog 'thread-stats', 'bottom: 0px; right: 0px;',
         "<div class=move title='Post Count / File Count#{if Conf["Page Count in Stats"] then " / Page Count" else ""}'><span id=post-count>0</span> / <span id=file-count>0</span>#{if Conf["Page Count in Stats"] then " / <span id=page-count>0</span>" else ""}</div>"

src/Monitoring/ThreadUpdater.coffee

@@ -9,7 +9,7 @@ ThreadUpdater =
         innerHTML: "<span id=update-status></span><span id=update-timer title='Update now'></span>"
         id:        'updater'
       $.ready ->
-        Header.addShortcut sc
+        Header.addShortcut sc [0,0]
     else 
       @dialog = sc = UI.dialog 'updater', 'bottom: 0px; left: 0px;',
         "<div class=move><span id=update-status></span><span id=update-timer title='Update now'></span></div>"

src/Monitoring/ThreadWatcher.coffee

@@ -41,7 +41,14 @@ ThreadWatcher =
     $.off d, '4chanXInitFinished', ThreadWatcher.ready
     return unless Main.isThisPageLegit()
     ThreadWatcher.refresh()
-    $.add d.body, ThreadWatcher.dialog
+
+    if Conf['Slideout Watcher']
+      el = $.el 'i', id: 'sowIcon'
+      Header.addShortcut el, [80, 70]
+    else
+      el = d.body
+
+    $.add el, ThreadWatcher.dialog
 
     return unless Conf['Auto Watch']
     $.get 'AutoWatch', 0, ({AutoWatch}) ->

src/Posting/QuickReply.coffee

@@ -31,7 +31,7 @@ QR =
         QR.close()
       $.toggleClass @, 'disabled'
 
-    return Header.addShortcut sc if Conf['Header Shortcut']
+    return Header.addShortcut sc, [20, 140] if Conf['Header Shortcut']
 
     $.addClass sc, 'on-page'
     sc.textContent = if g.VIEW is 'thread' then 'Reply to Thread' else 'Start a Thread'

src/Theming/Style.coffee

@@ -170,98 +170,24 @@ Style =
 
   iconPositions: ->
     css = """<%= grunt.file.read('src/General/css/icons.base.css').replace(/\s+/g, ' ').trim() %>"""
-    i = 0
-    align = Conf['Sidebar Location']
-    sidebar = {
-      minimal:  20
-      hide:     2
-      normal:   252
-      large:    303
-    }[Conf['Sidebar']]
 
-    notCatalog = g.VIEW isnt 'catalog'
+    # Slideout Navigation
-    notEither  = notCatalog and g.BOARD isnt 'f'
+    slideNav = $.el 'i', id: 'slideNav'
+    $.add $.id('boardNavDesktopFoot'), slideNav
+    Header.addShortcut slideNav, [120, 110] if Conf['Slideout Navigation'] isnt 'hide'
 
-    aligner = (first, checks) ->
+    # Announcements
-      # Create a position to hold values
+    if Conf['Announcements'] is 'slideout'
-      position = [first]
+      if (psa = $.id '#globalMessage') and !psa.hidden
+        psaIcon = $.el 'i', id: 'psaIcon'
+        $.add psa, psaIcon
+        Header.addShortcut psaIcon, [90, 80]
 
-      # Check which elements we actually have. Some are easy, because the script creates them so we'd know they're here
+    if g.VIEW is 'thread'
-      # Some are hard, like 4sight, which we have no way of knowing if available without looking for it.
+      el = $('body > div.navLinks > a')
-      for enabled in checks
+      el.textContent = ''
-        position.push(
+      el.id = 'returnIcon'
-          if enabled
+      Header.addShortcut el, [40, 40]
-            first += 19
-          else
-            first
-        )
-
-      position
-
-    if Conf["Icon Orientation"] is "horizontal"
-      position = aligner(
-        2
-        [
-          true
-          Conf['Slideout Navigation'] isnt 'hide'
-          Conf['Announcements'] is 'slideout' and (psa = $ '#globalMessage', d.body) and !psa.hidden
-          Conf['Thread Watcher'] and Conf['Slideout Watcher']
-          $ '#navtopright .exlinksOptionsLink', d.body
-          notEither and Conf['Image Expansion']
-          notEither
-          g.VIEW is 'thread'
-          notEither and Conf['Fappe Tyme']
-          navlinks = ((g.VIEW isnt 'thread' and Conf['Index Navigation']) or (g.VIEW is 'thread' and Conf['Reply Navigation'])) and notCatalog
-          navlinks
-        ]
-      )
-
-      iconOffset =
-        position[position.length - 1] - (if Conf['4chan SS Navigation']
-          0
-        else
-          sidebar + parseInt(Conf["Right Thread Padding"], 10))
-
-      if iconOffset < 0 then iconOffset = 0
-
-      css += """<%= grunt.file.read('src/General/css/icons.horz.css').replace(/\s+/g, ' ').trim() %>"""
-
-    else
-
-      position = aligner(
-        2
-        [
-          notEither and Conf['Image Expansion']
-          true
-          Conf['Slideout Navigation'] isnt 'hide'
-          Conf['Announcements'] is 'slideout' and (psa = $ '#globalMessage', d.body) and !psa.hidden
-          Conf['Thread Watcher'] and Conf['Slideout Watcher']
-          $ '#navtopright .exlinksOptionsLink', d.body
-          notEither
-          g.VIEW is 'thread'
-          notEither and Conf['Fappe Tyme']
-          navlinks = ((g.VIEW isnt 'thread' and Conf['Index Navigation']) or (g.VIEW is 'thread' and Conf['Reply Navigation'])) and notCatalog
-          navlinks
-        ]
-      )
-
-      iconOffset = (
-        20 + (
-          if g.VIEW is 'thread' and Conf['Updater Position'] is 'top'
-            100
-          else
-            0
-        )
-      ) - (
-        if Conf['4chan SS Navigation']
-          0
-        else
-          sidebar + parseInt Conf[align.charAt(0).toUpperCase() + align.slice(1) + " Thread Padding"], 10
-      )
-
-      if iconOffset < 0 then iconOffset = 0
-
-      css += """<%= grunt.file.read('src/General/css/icons.vert.css').replace(/\s+/g, ' ').trim() %>"""
 
     Style.icons.textContent = css