Pretty much finish up the Gallery

Gruntfile.coffee

@@ -171,6 +171,16 @@ module.exports = (grunt) ->
     else
       'order'
 
+    pkg.align = if type is 'crx'
+      '-webkit-align'
+    else
+      'align'
+
+    pkg.justify = if type is 'crx'
+      '-webkit-justify-content'
+    else
+      'justify-content'
+
     grunt.log.ok 'pkg.type = %s', type
 
   grunt.registerTask 'build', [

src/General/Config.coffee

@@ -127,6 +127,10 @@ Config =
         true
         'Show full image on mouseover.'
       ]
+      'Gallery': [
+        false
+        'Adds a cute gallery.'
+      ]
       'Sauce': [
         true
         'Add sauce links to images.'
@@ -947,6 +951,10 @@ box-shadow: inset 2px 2px 2px rgba(0,0,0,0.2);
       'e'
       'Expand all images.'
     ]
+    'Open Gallery': [
+      'g'
+      'Opens the gallery.'
+    ]
     'fappeTyme': [
       'f'
       'Fappe Tyme.'

src/General/css/icons.horz.css

@@ -0,0 +1,68 @@
+/* Appchan X Options */
+#main-menu {
+  #{align}: #{position[i++]}px;
+}
+/* Slideout Navigation */
+#boardNavDesktopFoot::after {
+  #{align}: #{position[i++]}px;
+}
+/* Global Message */
+.announcements-slideout #globalMessage::after {
+  #{align}: #{position[i++]}px;
+}
+/* Watcher */
+.slideout-watcher #thread-watcher::after {
+  #{align}: #{position[i++]}px;
+}
+/* ExLinks */
+#navtopright .exlinksOptionsLink::after {
+  #{align}: #{position[i++]}px;
+}
+/* Expand Images */
+#img-controls {
+  #{align}: #{position[i++]}px;
+}
+/* 4chan Catalog */
+#catalog {
+  #{align}: #{position[i++]}px;
+}
+/* Back */
+div.navLinks > a:first-of-type::after {
+  #{align}: #{position[i++]}px;
+}
+/* Fappe Tyme */
+#fappeTyme {
+  #{align}: #{position[i++]}px;
+}
+/* Thread Navigation Links */
+#navlinks a {
+  margin: 2px;
+  top: 1px;
+}
+#navlinks a:last-of-type {
+  #{align}: #{position[i++]}px;
+}
+#navlinks a:first-of-type {
+  #{align}: #{position[i++]}px;
+}
+#boardNavDesktopFoot::after,
+#navtopright .exlinksOptionsLink::after,
+#main-menu,
+.slideout-watcher #thread-watcher::after,
+.announcements-slideout #globalMessage::after,
+#img-controls,
+#fappeTyme,
+div.navLinks > a:first-of-type::after,
+#catalog {
+  top: 1px !important;
+}
+.fourchan-ss-navigation.fixed.top #header-bar,
+.fourchan-ss-navigation.pagination-top .pagelist,
+.fourchan-ss-navigation.pagination-sticky-top .pagelist {
+  padding-#{align}: #{iconOffset}px;
+}
+.fixed.top:not(.fourchan-ss-navigation) #header-bar,
+.pagination-top:not(.fourchan-ss-navigation) .pagelist,
+.pagination-sticky-top:not(.fourchan-ss-navigation) .pagelist {
+  margin-#{align}: #{iconOffset}px;
+}

src/General/css/layout.css

@@ -385,8 +385,7 @@ th {
   right: 0;
 }
 .sidebar-location-right .shortcut {
-  align-self: flex-end;
+  <%= align %>-self: flex-end;
-  -webkit-align-self: flex-end;
 }
 .sidebar-location-left #shortcuts {
   left: 0;
@@ -2227,35 +2226,87 @@ article li {
   right: 0;
   z-index: 30;
   display: <%= flex %>;
-  <%= flex %>-direction: column;
+  <%= flex %>-direction: row;
+  background: linear-gradient(rgba(0,0,0,1), rgba(0,0,0,0.5));
+}
+.gal-close {
+  position: fixed;
+  top: 10px;
+  left: 25px;
+  font-size: 20px;
 }
 .gal-viewport {
   display: <%= flex %>;
-  align-items: stretch;
+  <%= align %>-items: stretch;
   <%= flex %>-direction: row;
   <%= flex %>: 1 1 auto;
 }
 .gal-thumbnails {
-  <%= flex %>: 0 0 270px;
+  <%= flex %>: 0 0 150px;
-  overflow-x: auto;
+  overflow-y: auto;
+  display: <%= flex %>;
+  <%= flex %>-direction: column;
+  <%= align %>-items: flex-start;
+}
+.gal-thumbnails img {
+  max-width: 125px;
+  max-height: 125px;
+  height: auto;
+  width: auto;
+}
+.gal-thumbnails a {
+  <%= flex %>: 0 0 auto;
+  margin: 3px auto;
 }
 .gal-prev {
   order: 0;
-  <%= flex %>: 0 0 20px;
 }
 .gal-next {
   order: 2;
+}
+.gal-prev,
+.gal-next {
   <%= flex %>: 0 0 20px;
+  background-color: #000;
+  position: relative;
+  cursor: pointer;
+  opacity: 0.5;
+}
+.gal-prev:hover,
+.gal-next:hover {
+  opacity: 0.9;
+}
+.gal-prev::after,
+.gal-next::after {
+  position: absolute;
+  top: 50%;
+  right: 2px;
+  <%= transform %>: translateY(-50%)
+  display: inline-block;
+  border-top: 15px solid transparent;
+  border-bottom: 15px solid transparent;
+  content: "";
+}
+.gal-prev::after {
+  border-right: 15px solid #fff;
+}
+.gal-next::after {
+  border-left: 15px solid #fff;
 }
 .gal-image {
   order: 1;
   <%= flex %>: 1 0 auto;
   display: <%= flex %>;
-  align-items: center;
+  <%= align %>-items: flex-start;
-  justify-content: center;
+  <%= justify %>: space-around;
+  overflow: auto;
+  /* Flex > Non-Flex child max-width and overflow fix (Firefox only?) */
+  width: 1%;
+}
+.gal-image a {
+  margin: auto;
 }
 .gal-image img {
-  max-height: 100%;
   max-width: 100%;
 }
 /* Catalog */

src/Images/Gallery.coffee

@@ -1,5 +1,7 @@
 Gallery =
   init: ->
+    return if g.VIEW is 'catalog' or g.BOARD is 'f'
+    
     el = $.el 'a',
       href: 'javascript:;'
       id:   'appchan-gal'
@@ -14,7 +16,7 @@ Gallery =
     Post::callbacks.push
       name: 'Gallery'
       cb: @node
-  
+
   node: ->
     return unless Gallery.el and @file?.isImage
 
@@ -24,50 +26,82 @@ Gallery =
     Gallery.el = dialog = $.el 'div',
       id: 'a-gallery'
       innerHTML: """
-<a href=javascript:; class=gal-close></a>
+<a href=javascript:; class=gal-close>✖</a>
 <div class=gal-viewport>
   <div class=gal-prev></div>
   <div class=gal-image>
-    <img>
+    <a><img></a>
   </div>
   <div class=gal-next></div>
 </div>
 <div class=gal-thumbnails></div>
 """
-    files = $$ '.post .file'
+    Gallery.current = $ '.gal-image img',  dialog
-    Gallery.current = $ '.gal-image img', dialog
+    Gallery.url     = $ '.gal-image a',    dialog
     Gallery.thumbs  = $ '.gal-thumbnails', dialog
     Gallery.images  = []
 
-    $.on ($ '.gal-prev', dialog), 'click', Gallery.cb.prev
+    $.on Gallery.current, 'click', Gallery.cb.download
-    $.on ($ '.gal-next', dialog), 'click', Gallery.cb.next
+
-    
+    $.on ($ '.gal-prev',  dialog), 'click', Gallery.cb.prev
+    $.on ($ '.gal-next',  dialog), 'click', Gallery.cb.next
+    $.on ($ '.gal-close', dialog), 'click', Gallery.cb.close
+
+    $.on  d, 'keydown', Gallery.cb.keybinds
+    $.off d, 'keydown', Keybinds.keydown
+
     i = 0
+    files = $$ '.post .file'
     while file = files[i++]
       Gallery.generateThumb file
     $.add d.body, dialog
 
+    Gallery.thumbs.scrollTop = 0
+    Gallery.current.parentElement.scrollTop = 0
+
+    Gallery.cb.open.call if @ isnt Gallery
+      $ "[href=#{@href}]", Gallery.thumbs
+    else
+      Gallery.images[0]
+
   generateThumb: (file) ->
-    image = $ '.fileThumb', file
+    title = ($ '.fileText a', file).textContent
-    name  = ($ '.fileText a', file).textContent
+    thumb = ($ '.fileThumb', file).cloneNode true
-    thumb = image.cloneNode true
+    if double = $ 'img + img', thumb
+      $.rm double
 
     thumb.className = 'a-thumb'
-    thumb.name = name
+    thumb.title = title
-    thumb.dataset.id   = Gallery.images.length
+    thumb.dataset.id = Gallery.images.length
+    thumb.firstElementChild.style.cssText = ''
 
     $.on thumb, 'click', Gallery.cb.open
 
     Gallery.images.push thumb
     $.add Gallery.thumbs, thumb
-  
+
   cb:
+    keybinds: (e) ->
+      return unless key = Keybinds.keyCode e
+      e.stopPropagation()
+      switch key
+        when 'Esc'
+          e.stopPropagation()
+          Gallery.cb.close()
+        when 'Right', 'Enter'
+          Gallery.cb.next()
+        when 'Left', ''
+          Gallery.cb.prev()
+        when Conf['Open Gallery']
+          Gallery.cb.close()
     open: (e) ->
       if e
         e.preventDefault()
       Gallery.current.dataset.id = @dataset.id
-      Gallery.current.src = @href
+      Gallery.url.href = Gallery.current.src = @href
-      Gallery.current.name = @name
+      Gallery.url.download = Gallery.current.title = @title
+      Gallery.current.parentElement.scrollTop = 0
+      d.body.style.overflow = 'hidden'
     prev: ->
       Gallery.cb.open.call Gallery.images[+Gallery.current.dataset.id - 1]
     next: ->
@@ -78,4 +112,8 @@ Gallery =
       Gallery.build()
     close: ->
       $.rm Gallery.el
-      delete Gallery.el
+      delete Gallery.el
+      d.body.style.overflow = ''
+
+      $.off d, 'keydown', Gallery.cb.keybinds
+      $.on  d, 'keydown', Keybinds.keydown

src/Miscellaneous/Keybinds.coffee

@@ -69,6 +69,8 @@ Keybinds =
         Keybinds.img threadRoot
       when Conf['Expand images']
         Keybinds.img threadRoot, true
+      when Conf['Open Gallery']
+        Gallery.cb.toggle()
       when Conf['fappeTyme']
         FappeTyme.cb.fappe()
       when Conf['werkTyme']
@@ -119,8 +121,8 @@ Keybinds =
         QuoteYou.cb.seek 'following'
       else
         return
-    do e.preventDefault
+    e.preventDefault()
-    do e.stopPropagation
+    e.stopPropagation()
 
   keyCode: (e) ->
     key = switch kc = e.keyCode