Gallery stuff.

src/General/Config.coffee

@@ -397,6 +397,12 @@ Config =
       'Advance to next post when contracting an expanded image.'
     ]
   
+  gallery:
+    # Gallery mostly gets its config from imageExpansion
+    'Hide thumbnails': [
+      false
+    ]
+
   threadWatcher:
     'Current Board': [
       false

src/General/css/style.css

@@ -1097,7 +1097,6 @@ a:only-of-type > .remove {
   <%= align %>-items: stretch;
   <%= flex %>-direction: row;
   <%= flex %>: 1 1 auto;
-  position: relative;
 }
 .gal-thumbnails {
   <%= flex %>: 0 0 150px;
@@ -1107,24 +1106,29 @@ a:only-of-type > .remove {
   <%= align %>-items: stretch;
   text-align: center;
 }
-.gal-thumbnails img {
+.hide-thumbnails .gal-thumbnails {
+  display: none;
+}
+.gal-thumb img {
   max-width: 125px;
   max-height: 125px;
   height: auto;
   width: auto;
 }
-.gal-thumbnails a {
+.gal-thumb {
   <%= flex %>: 0 0 auto;
   padding: 3px;
   line-height: 0;
   transition: background .3s linear;
   background: rgba(0,0,0,.5);
+  border-left: 1px solid #222;
 }
 .gal-highlight {
   background: rgb(190, 190, 255);
 }
 .gal-prev {
   order: 0;
+  border-right: 1px solid #222;
 }
 .gal-next {
   order: 2;
@@ -1135,7 +1139,6 @@ a:only-of-type > .remove {
   <%= flex %>: 0 0 20px;
   position: relative;
   cursor: pointer;
-  border-right: 1px solid #222;
   opacity: 0.7;
   background-color: rgba(0, 0, 0, 0.3);
 }
@@ -1167,30 +1170,46 @@ a:only-of-type > .remove {
   display: <%= flex %>;
   <%= align %>-items: flex-start;
   <%= justify %>: space-around;
-  overflow: hidden;
+  overflow: auto;
   /* Flex > Non-Flex child max-width and overflow fix (Firefox only?) */
   width: 1%;
 }
 .gal-image a {
   margin: auto;
+  line-height: 0;
 }
-.gal-image img {
+.fit-width .gal-image img {
   max-width: 100%;
-  max-height: 100vh;
 }
-.gal-close {
+.fit-height .gal-image img {
+  max-height: calc(100vh - 25px);
+}
+.gal-buttons {
   font-size: 2em;
-  padding-right: 8px;
+  margin-right: 10px;
-  position: fixed;
   top: 5px;
-  right: 180px;
   color: #ffffff;
   text-shadow: 0px 0px 1px #000000;
 }
-.gal-name {
+.gal-buttons i {
+  vertical-align: baseline;
+  border-top-width: .5em;
+  border-right-width: .3em;
+  border-left-width: .3em;
+}
+.gal-buttons,
+.gal-name,
+.gal-count {
   position: fixed;
-  bottom: 5px;
   right: 178px;
+}
+.hide-thumbnails .gal-buttons,
+.hide-thumbnails .gal-count,
+.hide-thumbnails .gal-name {
+  right: 28px;
+}
+.gal-name {
+  bottom: 5px;
   background: rgba(0,0,0,0.6) !important;
   border-radius: 3px;
   padding: 1px 5px 2px 5px;
@@ -1202,9 +1221,7 @@ a:only-of-type > .remove {
   color: rgb(95, 95, 101) !important;
 }
 .gal-count {
-  position: fixed;
   bottom: 26px;
-  right: 178px;
   background: rgba(0,0,0,0.6) !important;
   border-radius: 3px;
   padding: 1px 5px 2px 5px;

src/Images/Gallery.coffee

@@ -19,19 +19,25 @@ Gallery =
 
   node: ->
     return unless @file?.isImage
-    if Gallery.el
+    if Gallery.nodes
       Gallery.generateThumb $ '.file', @nodes.root
-      Gallery.total.textContent = Gallery.images.length
+      Gallery.nodes.total.textContent = Gallery.images.length
 
     unless Conf['Image Expansion']
       $.on @file.thumb.parentNode, 'click', Gallery.cb.image
 
   build: (image) ->
-    Gallery.el = dialog = $.el 'div',
+    Gallery.images  = []
+    nodes = Gallery.nodes = {}
+
+    nodes.el = dialog = $.el 'div',
       id: 'a-gallery'
       innerHTML: """
 <div class=gal-viewport>
+  <span class=gal-buttons>
+    <a class="menu-button" href="javascript:;"><i></i></a>
     <a href=javascript:; class=gal-close>×</a>
+  </span>
   <a class=gal-name target="_blank"></a>
   <span class=gal-count><span class='count'></span> / <span class='total'></span></a></span>
   <div class=gal-prev></div>
@@ -42,7 +48,8 @@ Gallery =
 </div>
 <div class=gal-thumbnails></div>
 """
-    Gallery[key] = $ value, dialog for key, value of {
+
+    nodes[key] = $ value, dialog for key, value of {
       frame:   '.gal-image'
       name:    '.gal-name'
       count:   '.count'
@@ -52,26 +59,41 @@ Gallery =
       current: '.gal-image img'
     }
     
-    Gallery.images  = []
+    menuButton = $ '.menu-button', dialog
+    nodes.menu = new UI.Menu 'gallery'
 
-    $.on Gallery.frame,            'click', Gallery.cb.blank
+    {cb} = Gallery
-    $.on Gallery.current,          'click', Gallery.cb.download
+    $.on nodes.frame,              'click', cb.blank
-    $.on Gallery.next,             'click', Gallery.cb.next
+    $.on nodes.current,            'click', cb.download
-    $.on ($ '.gal-prev',  dialog), 'click', Gallery.cb.prev
+    $.on nodes.next,               'click', cb.next
-    $.on ($ '.gal-next',  dialog), 'click', Gallery.cb.next
+    $.on ($ '.gal-prev',  dialog), 'click', cb.prev
-    $.on ($ '.gal-close', dialog), 'click', Gallery.cb.close
+    $.on ($ '.gal-next',  dialog), 'click', cb.next
+    $.on ($ '.gal-close', dialog), 'click', cb.close
 
-    $.on  d, 'keydown', Gallery.cb.keybinds
+    $.on menuButton, 'click', (e) ->
+      nodes.menu.toggle e, @, g
+
+    {createSubEntry} = Gallery.menu
+    for name in ['Fit width', 'Fit height', 'Hide thumbnails']
+      {el} = createSubEntry name
+
+      $.event 'AddMenuEntry',
+        type: 'gallery'
+        el: el
+        order: 0
+
+    $.on  d, 'keydown', cb.keybinds
     $.off d, 'keydown', Keybinds.keydown
 
     i = 0
     files = $$ '.post .file'
     while file = files[i++]
+      continue if $ '.fileDeletedRes, .fileDeleted', file
       Gallery.generateThumb file
     $.add d.body, dialog
 
-    Gallery.thumbs.scrollTop = 0
+    nodes.thumbs.scrollTop = 0
-    Gallery.current.parentElement.scrollTop = 0
+    nodes.current.parentElement.scrollTop = 0
 
     Gallery.cb.open.call if image
       $ "[href='#{image.href.replace /https?:/, ''}']", Gallery.thumbs
@@ -79,7 +101,7 @@ Gallery =
       Gallery.images[0]
 
     d.body.style.overflow = 'hidden'
-    Gallery.total.textContent = --i
+    nodes.total.textContent = --i
 
   generateThumb: (file) ->
     title = ($ '.fileText a', file).textContent
@@ -87,7 +109,7 @@ Gallery =
     if double = $ 'img + img', thumb
       $.rm double
 
-    thumb.className = 'a-thumb'
+    thumb.className = 'gal-thumb'
     thumb.title = title
     thumb.dataset.id = Gallery.images.length
     thumb.firstElementChild.style.cssText = ''
@@ -95,7 +117,7 @@ Gallery =
     $.on thumb, 'click', Gallery.cb.open
 
     Gallery.images.push thumb
-    $.add Gallery.thumbs, thumb
+    $.add Gallery.nodes.thumbs, thumb
 
   cb:
     keybinds: (e) ->
@@ -116,35 +138,67 @@ Gallery =
         
     open: (e) ->
       e.preventDefault() if e
+      {nodes} = Gallery
+      {name}  = nodes
 
       $.rmClass  el, 'gal-highlight' if el = $ '.gal-highlight', Gallery.thumbs
       $.addClass @,  'gal-highlight'
 
       img = $.el 'img',
-        src:   Gallery.name.href     = @href
+        src:   name.href     = @href
-        title: Gallery.name.download = Gallery.name.textContent = @title
+        title: name.download = name.textContent = @title
 
       img.dataset.id = @dataset.id
-      $.replace Gallery.current, img
+      $.replace nodes.current, img
-      Gallery.count.textContent = +@dataset.id + 1
+      nodes.count.textContent = +@dataset.id + 1
-      Gallery.current = img
+      nodes.current = img
-      Gallery.frame.scrollTop = 0
+      nodes.frame.scrollTop = 0
-      Gallery.current.focus()
+      nodes.current.focus()
 
     image: (e) ->
       e.preventDefault()
       e.stopPropagation()
       Gallery.build @
 
-    prev:   -> Gallery.cb.open.call Gallery.images[+Gallery.current.dataset.id - 1]
+    prev:   -> Gallery.cb.open.call Gallery.images[+Gallery.nodes.current.dataset.id - 1]
-    next:   -> Gallery.cb.open.call Gallery.images[+Gallery.current.dataset.id + 1]
+    next:   -> Gallery.cb.open.call Gallery.images[+Gallery.nodes.current.dataset.id + 1]
-    toggle: -> (if Gallery.el then Gallery.cb.close else Gallery.build)()
+    toggle: -> (if Gallery.nodes then Gallery.cb.close else Gallery.build)()
     blank: (e) -> Gallery.cb.close() if e.target is @
 
     close: ->
-      $.rm Gallery.el
+      $.rm Gallery.nodes.el
-      delete Gallery.el
+      delete Gallery.nodes
       d.body.style.overflow = ''
 
       $.off d, 'keydown', Gallery.cb.keybinds
       $.on  d, 'keydown', Keybinds.keydown
+
+  menu:
+    init: ->
+      return if g.VIEW is 'catalog' or !Conf['Gallery'] or Conf['Image Expansion']
+
+      el = $.el 'span',
+        textContent: 'Gallery'
+        className: 'gallery-link'
+
+      {createSubEntry} = Gallery.menu
+      subEntries = []
+      for name in ['Fit width', 'Fit height', 'Hide thumbnails']
+        subEntries.push createSubEntry name
+
+      $.event 'AddMenuEntry',
+        type: 'header'
+        el: el
+        order: 105
+        subEntries: subEntries
+
+    createSubEntry: (name) ->
+      label = $.el 'label',
+        innerHTML: "<input type=checkbox name='#{name}'> #{name}"
+      input = label.firstElementChild
+      # Reusing ImageExpand here because this code doesn't need any auditing to work for what we need
+      $.on input, 'change', ImageExpand.cb.setFitness
+      input.checked = Conf[name]
+      $.event 'change', null, input
+      $.on input, 'change', $.cb.checked
+      el: label

src/Images/ImageExpand.coffee

@@ -189,6 +189,3 @@ ImageExpand =
       $.event 'change', null, input
       $.on input, 'change', $.cb.checked
       el: label
-
-  menuToggle: (e) ->
-    ImageExpand.opmenu.toggle e, @, g