Rice gallery a little harder

Focus frame on open()

src/General/css/layout.css

@@ -2246,7 +2246,8 @@ article li {
   overflow-y: auto;
   display: <%= flex %>;
   <%= flex %>-direction: column;
-  <%= align %>-items: flex-start;
+  <%= align %>-items: stretch;
+  text-align: center;
 }
 .gal-thumbnails img {
   max-width: 125px;
@@ -2256,7 +2257,12 @@ article li {
 }
 .gal-thumbnails a {
   <%= flex %>: 0 0 auto;
-  margin: 3px auto;
+  padding: 3px;
+  line-height: 0;
+  transition: background .3s linear;
+}
+.gal-highlight {
+  background: rgb(190, 190, 255);
 }
 .gal-prev {
   order: 0;

src/Images/Gallery.coffee

@@ -19,10 +19,12 @@ Gallery =
 
   node: ->
     return unless Gallery.el and @file?.isImage
-
     Gallery.generateThumb $ '.file', @nodes.root
 
-  build: ->
+    unless Conf['Image Expansion']
+      $.on @file.thumb.parentNode, 'click', Gallery.cb.image
+
+  build: (image) ->
     Gallery.el = dialog = $.el 'div',
       id: 'a-gallery'
       innerHTML: """
@@ -36,8 +38,9 @@ Gallery =
 </div>
 <div class=gal-thumbnails></div>
 """
-    Gallery.current = $ '.gal-image img',  dialog
+    Gallery.frame   = $ '.gal-image', dialog
-    Gallery.url     = $ '.gal-image a',    dialog
+    Gallery.url     = $ 'a',          Gallery.frame
+    Gallery.current = $ 'img',        Gallery.url
     Gallery.thumbs  = $ '.gal-thumbnails', dialog
     Gallery.images  = []
 
@@ -59,8 +62,8 @@ Gallery =
     Gallery.thumbs.scrollTop = 0
     Gallery.current.parentElement.scrollTop = 0
 
-    Gallery.cb.open.call if @ isnt Gallery
+    Gallery.cb.open.call if image
-      $ "[href=#{@href}]", Gallery.thumbs
+      $ "[href=#{image.href}]", Gallery.thumbs
     else
       Gallery.images[0]
 
@@ -85,20 +88,25 @@ Gallery =
   cb:
     keybinds: (e) ->
       return unless key = Keybinds.keyCode e
-      e.stopPropagation()
+      cb = switch key
-      switch key
+        when 'Esc', Conf['Open Gallery']
-        when 'Esc'
+          Gallery.cb.close
-          e.stopPropagation()
-          Gallery.cb.close()
         when 'Right', 'Enter'
-          Gallery.cb.next()
+          Gallery.cb.next
         when 'Left', ''
-          Gallery.cb.prev()
+          Gallery.cb.prev
-        when Conf['Open Gallery']
+
-          Gallery.cb.close()
+      return unless cb
+      e.stopPropagation()
+      e.preventDefault()
+      cb()
+        
     open: (e) ->
       if e
         e.preventDefault()
+      
+      $.rmClass  el, 'gal-highlight' if el = $ '.gal-highlight', Gallery.thumbs
+      $.addClass @,  'gal-highlight'
 
       img = $.el 'img',
         src:   Gallery.url.href     = @href
@@ -107,14 +115,17 @@ Gallery =
       img.dataset.id = @dataset.id
       $.replace Gallery.current, img
       Gallery.current = img
-      Gallery.url.parentElement.scrollTop = 0
+      Gallery.frame.scrollTop = 0
+      Gallery.url.focus()
     prev: ->
       Gallery.cb.open.call Gallery.images[+Gallery.current.dataset.id - 1]
     next: ->
       Gallery.cb.open.call Gallery.images[+Gallery.current.dataset.id + 1]
+    image: ->
+      Gallery.build @
     toggle: ->
       if Gallery.el
-        return Gallery.close()
+        return Gallery.cb.close()
       Gallery.build()
     close: ->
       $.rm Gallery.el