intranet-pictures 1.0.6 → 2.0.0

data/spec/intranet/pictures/responder_spec.rb

@@ -48,54 +48,11 @@ RSpec.describe Intranet::Pictures::Responder do
     end
   end
 
-  describe '#css_dependencies' do
-    it 'should return the list of CSS dependencies' do
-      expect(@responder.css_dependencies).to include(
-        'design/style.css',
-        'design/photoswipe/photoswipe.css',
-        'design/photoswipe/default-skin/default-skin.css'
-      )
-    end
-  end
-
-  describe '#js_dependencies' do
-    it 'should return the list of JavaScript dependencies' do
-      expect(@responder.js_dependencies).to include(
-        'design/jpictures.js',
-        'design/photoswipe/photoswipe.min.js',
-        'design/photoswipe/photoswipe-ui-default.min.js'
-      )
-    end
-  end
-
   describe '#generate_page' do
-    def photoswipe_markup # rubocop:disable Metrics/MethodLength
-      "<div aria-hidden class='pswp' role='dialog' tabindex='-1'>\n" \
-        "<div class='pswp__bg'></div>\n" \
-        "<div class='pswp__scroll-wrap'>\n" \
-        "<div class='pswp__container'>\n" \
-        "<div class='pswp__item'></div>\n" \
-        "<div class='pswp__item'></div>\n" \
-        "<div class='pswp__item'></div>\n" \
-        "</div>\n" \
-        "<div class='pswp__ui pswp__ui--hidden'>\n" \
-        "<div class='pswp__top-bar'>\n" \
-        "<div class='pswp__counter'></div>\n" \
-        "<button class='pswp__button pswp__button--close' title='#{I18n.t('pictures.viewer.close')} (Esc)'></button>\n" \
-        "<button class='pswp__button pswp__button--fs' title='#{I18n.t('pictures.viewer.fullscreen')}'></button>\n" \
-        "<button class='pswp__button pswp__button--zoom' title='#{I18n.t('pictures.viewer.zoom')}'></button>\n" \
-        "<div class='pswp__preloader'>\n<div class='pswp__preloader__icn'>\n<div class='pswp__preloader__cut'>\n<div class='pswp__preloader__donut'></div>\n</div>\n</div>\n</div>\n</div>\n" \
-        "<div class='pswp__share-modal pswp__share-modal--hidden pswp__single-tap'>\n<div class='pswp__share-tooltip'></div>\n</div>\n" \
-        "<button class='pswp__button pswp__button--arrow--left' title='#{I18n.t('pictures.viewer.previous')}'></button>\n" \
-        "<button class='pswp__button pswp__button--arrow--right' title='#{I18n.t('pictures.viewer.next')}'></button>\n" \
-        "<div class='pswp__caption'>\n<div class='pswp__caption__center'></div>\n</div>\n" \
-        "</div>\n</div>\n</div>\n\n"
-    end
-
     context 'when asked for \'/index.html\'' do
       it 'should return a partial HTML content showing recent groups according to configuration' do
         # Nominal case with limit
-        recents = [{ group_type: 'group2', sort_by: 'value', asc: false, limit: 2 }]
+        recents = [{ 'group_by' => 'location', 'sort_by' => 'datetime', 'sort_order' => 'desc', 'limit' => 2 }]
         @responder.instance_variable_set(:@recents, recents)
         code, mime, content = @responder.generate_page('/index.html', {})
         expect(code).to eql(206)
@@ -108,19 +65,25 @@ RSpec.describe Intranet::Pictures::Responder do
                      "<li>#{I18n.t('pictures.menu')}</li>\n" \
                      "<li>My Gallery</li>\n" \
                      "</ul>\n\n" \
-                     "<h3>#{I18n.t('pictures.recents.group2')}</h3>\n" \
+                     "<h3>#{I18n.t('pictures.recents.location')}</h3>\n" \
                      "<ul class='groups'>\n" \
-                     "<li title='Group 2, Title 2'>\n<a onclick='openImagesGallery(&quot;group2=group2_title2&amp;sort_by=datetime&quot;);'>\n<figure>\n<div style='background-image: url(&quot;api/group/group2?group2=group2_title2&quot;)'></div>\n<figcaption>\nGroup 2, Title 2\n<br>\n<em>brief_text_2</em>\n</figcaption>\n</figure>\n</a>\n</li>\n" \
-                     "<li title='Group 2, Title 1'>\n<a onclick='openImagesGallery(&quot;group2=group2_title1&amp;sort_by=datetime&quot;);'>\n<figure>\n<div style='background-image: url(&quot;api/group/group2?group2=group2_title1&quot;)'></div>\n<figcaption>\nGroup 2, Title 1\n</figcaption>\n</figure>\n</a>\n</li>\n" \
+                     "<li title='New York, USA'>\n<a onclick='openImagesGallery(&quot;location=New York, USA&amp;sort_by=datetime&quot;);'>\n<figure>\n<div style='background-image: url(&quot;api/group_thumbnail?location=New York, USA&quot;)'></div>\n<figcaption>\nNew York, USA\n</figcaption>\n</figure>\n</a>\n</li>\n" \
+                     "<li title='Paris, France'>\n<a onclick='openImagesGallery(&quot;location=Paris, France&amp;sort_by=datetime&quot;);'>\n<figure>\n<div style='background-image: url(&quot;api/group_thumbnail?location=Paris, France&quot;)'></div>\n<figcaption>\nParis, France\n<br>\n<em>The City of Light</em>\n</figcaption>\n</figure>\n</a>\n</li>\n" \
                      "</ul>\n" \
-                     "<p class='see_more'>\n<a href='browse_group2.html?sort_by=value&amp;sort_order=desc'>#{I18n.t('pictures.see_more')}</a>\n</p>\n" \
-                     "</section>\n" + photoswipe_markup,
-            title: 'My Gallery'
+                     "<p class='see_more'>\n<a href='browse.html?group_by=location&amp;sort_by=datetime&amp;sort_order=desc'>#{I18n.t('pictures.see_more')}</a>\n</p>\n" \
+                     "</section>\n",
+            title: 'My Gallery',
+            stylesheets: [
+              'design/style.css',
+              'design/photoswipe/photoswipe.css',
+              'design/photoswipe/photoswipe-dynamic-caption-plugin.css'
+            ],
+            scripts: [{ src: 'design/jpictures.js', type: 'module' }]
           }
         )
 
         # Nominal case with limit
-        recents = [{ group_type: 'group2', sort_by: 'value', asc: true, limit: 2 }]
+        recents = [{ 'group_by' => 'location', 'sort_by' => 'datetime', 'limit' => 2 }]
         @responder.instance_variable_set(:@recents, recents)
         code, mime, content = @responder.generate_page('/index.html', {})
         expect(code).to eql(206)
@@ -133,19 +96,25 @@ RSpec.describe Intranet::Pictures::Responder do
                      "<li>#{I18n.t('pictures.menu')}</li>\n" \
                      "<li>My Gallery</li>\n" \
                      "</ul>\n\n" \
-                     "<h3>#{I18n.t('pictures.recents.group2')}</h3>\n" \
+                     "<h3>#{I18n.t('pictures.recents.location')}</h3>\n" \
                      "<ul class='groups'>\n" \
-                     "<li title='Group 2, Title 3'>\n<a onclick='openImagesGallery(&quot;group2=group2_title3&amp;sort_by=datetime&quot;);'>\n<figure>\n<div style='background-image: url(&quot;api/group/group2?group2=group2_title3&quot;)'></div>\n<figcaption>\nGroup 2, Title 3\n</figcaption>\n</figure>\n</a>\n</li>\n" \
-                     "<li title='Group 2, Title 1'>\n<a onclick='openImagesGallery(&quot;group2=group2_title1&amp;sort_by=datetime&quot;);'>\n<figure>\n<div style='background-image: url(&quot;api/group/group2?group2=group2_title1&quot;)'></div>\n<figcaption>\nGroup 2, Title 1\n</figcaption>\n</figure>\n</a>\n</li>\n" \
+                     "<li title='Paris, France'>\n<a onclick='openImagesGallery(&quot;location=Paris, France&amp;sort_by=datetime&quot;);'>\n<figure>\n<div style='background-image: url(&quot;api/group_thumbnail?location=Paris, France&quot;)'></div>\n<figcaption>\nParis, France\n<br>\n<em>The City of Light</em>\n</figcaption>\n</figure>\n</a>\n</li>\n" \
+                     "<li title='Tokyo, Japan'>\n<a onclick='openImagesGallery(&quot;location=Tokyo, Japan&amp;sort_by=datetime&quot;);'>\n<figure>\n<div style='background-image: url(&quot;api/group_thumbnail?location=Tokyo, Japan&quot;)'></div>\n<figcaption>\nTokyo, Japan\n</figcaption>\n</figure>\n</a>\n</li>\n" \
                      "</ul>\n" \
-                     "<p class='see_more'>\n<a href='browse_group2.html?sort_by=value'>#{I18n.t('pictures.see_more')}</a>\n</p>\n" \
-                     "</section>\n" + photoswipe_markup,
-            title: 'My Gallery'
+                     "<p class='see_more'>\n<a href='browse.html?group_by=location&amp;sort_by=datetime'>#{I18n.t('pictures.see_more')}</a>\n</p>\n" \
+                     "</section>\n",
+            title: 'My Gallery',
+            stylesheets: [
+              'design/style.css',
+              'design/photoswipe/photoswipe.css',
+              'design/photoswipe/photoswipe-dynamic-caption-plugin.css'
+            ],
+            scripts: [{ src: 'design/jpictures.js', type: 'module' }]
           }
         )
 
         # Nominal case without limit
-        recents = [{ group_type: 'group2' }]
+        recents = [{ 'group_by' => 'location', 'sort_by' => 'location', 'sort_order' => 'desc' }]
         @responder.instance_variable_set(:@recents, recents)
         code, mime, content = @responder.generate_page('/index.html', {})
         expect(code).to eql(206)
@@ -158,19 +127,25 @@ RSpec.describe Intranet::Pictures::Responder do
                      "<li>#{I18n.t('pictures.menu')}</li>\n" \
                      "<li>My Gallery</li>\n" \
                      "</ul>\n\n" \
-                     "<h3>#{I18n.t('pictures.recents.group2')}</h3>\n" \
+                     "<h3>#{I18n.t('pictures.recents.location')}</h3>\n" \
                      "<ul class='groups'>\n" \
-                     "<li title='Group 2, Title 3'>\n<a onclick='openImagesGallery(&quot;group2=group2_title3&amp;sort_by=datetime&quot;);'>\n<figure>\n<div style='background-image: url(&quot;api/group/group2?group2=group2_title3&quot;)'></div>\n<figcaption>\nGroup 2, Title 3\n</figcaption>\n</figure>\n</a>\n</li>\n" \
-                     "<li title='Group 2, Title 2'>\n<a onclick='openImagesGallery(&quot;group2=group2_title2&amp;sort_by=datetime&quot;);'>\n<figure>\n<div style='background-image: url(&quot;api/group/group2?group2=group2_title2&quot;)'></div>\n<figcaption>\nGroup 2, Title 2\n<br>\n<em>brief_text_2</em>\n</figcaption>\n</figure>\n</a>\n</li>\n" \
-                     "<li title='Group 2, Title 1'>\n<a onclick='openImagesGallery(&quot;group2=group2_title1&amp;sort_by=datetime&quot;);'>\n<figure>\n<div style='background-image: url(&quot;api/group/group2?group2=group2_title1&quot;)'></div>\n<figcaption>\nGroup 2, Title 1\n</figcaption>\n</figure>\n</a>\n</li>\n" \
+                     "<li title='Tokyo, Japan'>\n<a onclick='openImagesGallery(&quot;location=Tokyo, Japan&amp;sort_by=datetime&quot;);'>\n<figure>\n<div style='background-image: url(&quot;api/group_thumbnail?location=Tokyo, Japan&quot;)'></div>\n<figcaption>\nTokyo, Japan\n</figcaption>\n</figure>\n</a>\n</li>\n" \
+                     "<li title='Paris, France'>\n<a onclick='openImagesGallery(&quot;location=Paris, France&amp;sort_by=datetime&quot;);'>\n<figure>\n<div style='background-image: url(&quot;api/group_thumbnail?location=Paris, France&quot;)'></div>\n<figcaption>\nParis, France\n<br>\n<em>The City of Light</em>\n</figcaption>\n</figure>\n</a>\n</li>\n" \
+                     "<li title='New York, USA'>\n<a onclick='openImagesGallery(&quot;location=New York, USA&amp;sort_by=datetime&quot;);'>\n<figure>\n<div style='background-image: url(&quot;api/group_thumbnail?location=New York, USA&quot;)'></div>\n<figcaption>\nNew York, USA\n</figcaption>\n</figure>\n</a>\n</li>\n" \
                      "</ul>\n" \
-                     "</section>\n" + photoswipe_markup,
-            title: 'My Gallery'
+                     "</section>\n",
+            title: 'My Gallery',
+            stylesheets: [
+              'design/style.css',
+              'design/photoswipe/photoswipe.css',
+              'design/photoswipe/photoswipe-dynamic-caption-plugin.css'
+            ],
+            scripts: [{ src: 'design/jpictures.js', type: 'module' }]
           }
         )
 
         # Incorrect recents specification
-        recents = [{ group_type: 'invalid', sort_by: 'id' }]
+        recents = [{ 'group_by' => 'invalid', 'sort_by' => 'location' }]
         @responder.instance_variable_set(:@recents, recents)
         code, mime, content = @responder.generate_page('/index.html', {})
         expect(code).to eql(404)
@@ -180,7 +155,8 @@ RSpec.describe Intranet::Pictures::Responder do
 
       it 'should return a partial HTML content showing all groups according to configuration' do
         # Nominal case without recents
-        home_groups = [{ group_type: 'group2', asc: true, browse: 'group1', browse_sort_by: 'uri', browse_asc: true }]
+        home_groups = [{ 'group_by' => 'location', 'sort_by' => 'location',
+                         'browse_group_by' => 'author' }]
         @responder.instance_variable_set(:@home_groups, home_groups)
         code, mime, content = @responder.generate_page('/index.html', {})
         expect(code).to eql(206)
@@ -193,21 +169,28 @@ RSpec.describe Intranet::Pictures::Responder do
                      "<li>#{I18n.t('pictures.menu')}</li>\n" \
                      "<li>My Gallery</li>\n" \
                      "</ul>\n\n" \
-                     "<h3>#{I18n.t('pictures.browse_by.group2')}</h3>\n" \
+                     "<h3>#{I18n.t('pictures.browse_by.location')}</h3>\n" \
                      "<ul class='groups wide'>\n" \
-                     "<li title='Group 2, Title 1'>\n<a href='browse_group1.html?sort_by=uri&amp;group2=group2_title1'>\n<figure>\n<div style='background-image: url(&quot;api/group/group2?group2=group2_title1&quot;)'></div>\n<figcaption>\nGroup 2, Title 1\n</figcaption>\n</figure>\n</a>\n</li>\n" \
-                     "<li title='Group 2, Title 2'>\n<a href='browse_group1.html?sort_by=uri&amp;group2=group2_title2'>\n<figure>\n<div style='background-image: url(&quot;api/group/group2?group2=group2_title2&quot;)'></div>\n<figcaption>\nGroup 2, Title 2\n<br>\n<em>brief_text_2</em>\n</figcaption>\n</figure>\n</a>\n</li>\n" \
-                     "<li title='Group 2, Title 3'>\n<a href='browse_group1.html?sort_by=uri&amp;group2=group2_title3'>\n<figure>\n<div style='background-image: url(&quot;api/group/group2?group2=group2_title3&quot;)'></div>\n<figcaption>\nGroup 2, Title 3\n</figcaption>\n</figure>\n</a>\n</li>\n" \
+                     "<li title='New York, USA'>\n<a href='browse.html?group_by=author&amp;location=New York, USA'>\n<figure>\n<div style='background-image: url(&quot;api/group_thumbnail?location=New York, USA&quot;)'></div>\n<figcaption>\nNew York, USA\n</figcaption>\n</figure>\n</a>\n</li>\n" \
+                     "<li title='Paris, France'>\n<a href='browse.html?group_by=author&amp;location=Paris, France'>\n<figure>\n<div style='background-image: url(&quot;api/group_thumbnail?location=Paris, France&quot;)'></div>\n<figcaption>\nParis, France\n<br>\n<em>The City of Light</em>\n</figcaption>\n</figure>\n</a>\n</li>\n" \
+                     "<li title='Tokyo, Japan'>\n<a href='browse.html?group_by=author&amp;location=Tokyo, Japan'>\n<figure>\n<div style='background-image: url(&quot;api/group_thumbnail?location=Tokyo, Japan&quot;)'></div>\n<figcaption>\nTokyo, Japan\n</figcaption>\n</figure>\n</a>\n</li>\n" \
                      "</ul>\n" \
                      "</section>\n",
-            title: 'My Gallery'
+            title: 'My Gallery',
+            stylesheets: [
+              'design/style.css',
+              'design/photoswipe/photoswipe.css',
+              'design/photoswipe/photoswipe-dynamic-caption-plugin.css'
+            ],
+            scripts: [{ src: 'design/jpictures.js', type: 'module' }]
           }
         )
 
         # Nominal case with recents
-        recents = [{ group_type: 'group2' }]
+        recents = [{ 'group_by' => 'location', 'sort_by' => 'location', 'sort_order' => 'asc' }]
         @responder.instance_variable_set(:@recents, recents)
-        home_groups = [{ group_type: 'group1', asc: false, browse: 'group2', browse_sort_by: 'value', browse_asc: false }]
+        home_groups = [{ 'group_by' => 'author', 'sort_by' => 'author', 'sort_order' => 'asc',
+                         'browse_group_by' => 'location', 'browse_sort_by' => 'location', 'browse_sort_order' => 'desc' }]
         @responder.instance_variable_set(:@home_groups, home_groups)
         code, mime, content = @responder.generate_page('/index.html', {})
         expect(code).to eql(206)
@@ -220,29 +203,35 @@ RSpec.describe Intranet::Pictures::Responder do
                      "<li>#{I18n.t('pictures.menu')}</li>\n" \
                      "<li>My Gallery</li>\n" \
                      "</ul>\n\n" \
-                     "<h3>#{I18n.t('pictures.recents.group2')}</h3>\n" \
+                     "<h3>#{I18n.t('pictures.recents.location')}</h3>\n" \
                      "<ul class='groups'>\n" \
-                     "<li title='Group 2, Title 3'>\n<a onclick='openImagesGallery(&quot;group2=group2_title3&amp;sort_by=datetime&quot;);'>\n<figure>\n<div style='background-image: url(&quot;api/group/group2?group2=group2_title3&quot;)'></div>\n<figcaption>\nGroup 2, Title 3\n</figcaption>\n</figure>\n</a>\n</li>\n" \
-                     "<li title='Group 2, Title 2'>\n<a onclick='openImagesGallery(&quot;group2=group2_title2&amp;sort_by=datetime&quot;);'>\n<figure>\n<div style='background-image: url(&quot;api/group/group2?group2=group2_title2&quot;)'></div>\n<figcaption>\nGroup 2, Title 2\n<br>\n<em>brief_text_2</em>\n</figcaption>\n</figure>\n</a>\n</li>\n" \
-                     "<li title='Group 2, Title 1'>\n<a onclick='openImagesGallery(&quot;group2=group2_title1&amp;sort_by=datetime&quot;);'>\n<figure>\n<div style='background-image: url(&quot;api/group/group2?group2=group2_title1&quot;)'></div>\n<figcaption>\nGroup 2, Title 1\n</figcaption>\n</figure>\n</a>\n</li>\n" \
+                     "<li title='New York, USA'>\n<a onclick='openImagesGallery(&quot;location=New York, USA&amp;sort_by=datetime&quot;);'>\n<figure>\n<div style='background-image: url(&quot;api/group_thumbnail?location=New York, USA&quot;)'></div>\n<figcaption>\nNew York, USA\n</figcaption>\n</figure>\n</a>\n</li>\n" \
+                     "<li title='Paris, France'>\n<a onclick='openImagesGallery(&quot;location=Paris, France&amp;sort_by=datetime&quot;);'>\n<figure>\n<div style='background-image: url(&quot;api/group_thumbnail?location=Paris, France&quot;)'></div>\n<figcaption>\nParis, France\n<br>\n<em>The City of Light</em>\n</figcaption>\n</figure>\n</a>\n</li>\n" \
+                     "<li title='Tokyo, Japan'>\n<a onclick='openImagesGallery(&quot;location=Tokyo, Japan&amp;sort_by=datetime&quot;);'>\n<figure>\n<div style='background-image: url(&quot;api/group_thumbnail?location=Tokyo, Japan&quot;)'></div>\n<figcaption>\nTokyo, Japan\n</figcaption>\n</figure>\n</a>\n</li>\n" \
                      "</ul>\n" \
-                     "<h3>#{I18n.t('pictures.browse_by.group1')}</h3>\n" \
+                     "<h3>#{I18n.t('pictures.browse_by.author')}</h3>\n" \
                      "<ul class='groups wide'>\n" \
-                     "<li title='Group 1, Title 2'>\n<a href='browse_group2.html?sort_by=value&amp;sort_order=desc&amp;group1=group1_title2'>\n<figure>\n<div style='background-image: url(&quot;api/group/group1?group1=group1_title2&quot;)'></div>\n<figcaption>\nGroup 1, Title 2\n</figcaption>\n</figure>\n</a>\n</li>\n" \
-                     "<li title='Group 1, Title 1'>\n<a href='browse_group2.html?sort_by=value&amp;sort_order=desc&amp;group1=group1_title1'>\n<figure>\n<div style='background-image: url(&quot;api/group/group1?group1=group1_title1&quot;)'></div>\n<figcaption>\nGroup 1, Title 1\n<br>\n<em>brief_text_1</em>\n</figcaption>\n</figure>\n</a>\n</li>\n" \
+                     "<li title='Jane Doe'>\n<a href='browse.html?group_by=location&amp;sort_by=location&amp;sort_order=desc&amp;author=Jane Doe'>\n<figure>\n<div style='background-image: url(&quot;api/group_thumbnail?author=Jane Doe&quot;)'></div>\n<figcaption>\nJane Doe\n</figcaption>\n</figure>\n</a>\n</li>\n" \
+                     "<li title='John Doe'>\n<a href='browse.html?group_by=location&amp;sort_by=location&amp;sort_order=desc&amp;author=John Doe'>\n<figure>\n<div style='background-image: url(&quot;api/group_thumbnail?author=John Doe&quot;)'></div>\n<figcaption>\nJohn Doe\n<br>\n<em>Best photographer ever</em>\n</figcaption>\n</figure>\n</a>\n</li>\n" \
                      "</ul>\n" \
-                     "</section>\n" + photoswipe_markup,
-            title: 'My Gallery'
+                     "</section>\n",
+            title: 'My Gallery',
+            stylesheets: [
+              'design/style.css',
+              'design/photoswipe/photoswipe.css',
+              'design/photoswipe/photoswipe-dynamic-caption-plugin.css'
+            ],
+            scripts: [{ src: 'design/jpictures.js', type: 'module' }]
           }
         )
       end
     end
 
-    context 'when asked for \'/browse_*.html\'' do
-      it 'should return a partial HTML content with selected groups' do
-        # Existing group, no selector nor sort order
-        query = {}
-        code, mime, content = @responder.generate_page('/browse_group1.html', query)
+    context 'when asked for \'/browse.html\'' do
+      it 'should return a partial HTML content with selected pictures grouped as requested' do
+        # No selector nor sort order
+        query = { 'group_by' => 'author' }
+        code, mime, content = @responder.generate_page('/browse.html', query)
         expect(code).to eql(206)
         expect(mime).to eql('text/html')
         expect(content).to eql(
@@ -252,20 +241,26 @@ RSpec.describe Intranet::Pictures::Responder do
                      "<li>\n<a href='/index.html'>#{I18n.t('nav.home')}</a>\n</li>\n" \
                      "<li>#{I18n.t('pictures.menu')}</li>\n" \
                      "<li>\n<a href='index.html'>My Gallery</a>\n</li>\n" \
-                     "<li>#{I18n.t('pictures.nav.group1')}</li>\n" \
+                     "<li>#{I18n.t('pictures.nav.author')}</li>\n" \
                      "</ul>\n\n" \
                      "<ul class='groups'>\n" \
-                     "<li title='Group 1, Title 1'>\n<a onclick='openImagesGallery(&quot;group1=group1_title1&amp;sort_by=datetime&quot;);'>\n<figure>\n<div style='background-image: url(&quot;api/group/group1?group1=group1_title1&quot;)'></div>\n<figcaption>\nGroup 1, Title 1\n<br>\n<em>brief_text_1</em>\n</figcaption>\n</figure>\n</a>\n</li>\n" \
-                     "<li title='Group 1, Title 2'>\n<a onclick='openImagesGallery(&quot;group1=group1_title2&amp;sort_by=datetime&quot;);'>\n<figure>\n<div style='background-image: url(&quot;api/group/group1?group1=group1_title2&quot;)'></div>\n<figcaption>\nGroup 1, Title 2\n</figcaption>\n</figure>\n</a>\n</li>\n" \
+                     "<li title='John Doe'>\n<a onclick='openImagesGallery(&quot;author=John Doe&amp;sort_by=datetime&quot;);'>\n<figure>\n<div style='background-image: url(&quot;api/group_thumbnail?author=John Doe&quot;)'></div>\n<figcaption>\nJohn Doe\n<br>\n<em>Best photographer ever</em>\n</figcaption>\n</figure>\n</a>\n</li>\n" \
+                     "<li title='Jane Doe'>\n<a onclick='openImagesGallery(&quot;author=Jane Doe&amp;sort_by=datetime&quot;);'>\n<figure>\n<div style='background-image: url(&quot;api/group_thumbnail?author=Jane Doe&quot;)'></div>\n<figcaption>\nJane Doe\n</figcaption>\n</figure>\n</a>\n</li>\n" \
                      "</ul>\n" \
-                     "</section>\n" + photoswipe_markup,
-            title: 'My Gallery'
+                     "</section>\n",
+            title: 'My Gallery',
+            stylesheets: [
+              'design/style.css',
+              'design/photoswipe/photoswipe.css',
+              'design/photoswipe/photoswipe-dynamic-caption-plugin.css'
+            ],
+            scripts: [{ src: 'design/jpictures.js', type: 'module' }]
           }
         )
 
-        # Existing group, valid selector, valid sort order
-        query = { 'group1' => 'group1_title1', 'sort_by' => 'id', 'sort_order' => 'desc' }
-        code, mime, content = @responder.generate_page('/browse_group2.html', query)
+        # Valid selector, valid sort order
+        query = { 'group_by' => 'location', 'author' => 'John Doe', 'sort_by' => 'location', 'sort_order' => 'desc' }
+        code, mime, content = @responder.generate_page('/browse.html', query)
         expect(code).to eql(206)
         expect(mime).to eql('text/html')
         expect(content).to eql(
@@ -275,20 +270,26 @@ RSpec.describe Intranet::Pictures::Responder do
                      "<li>\n<a href='/index.html'>#{I18n.t('nav.home')}</a>\n</li>\n" \
                      "<li>#{I18n.t('pictures.menu')}</li>\n" \
                      "<li>\n<a href='index.html'>My Gallery</a>\n</li>\n" \
-                     "<li>#{I18n.t('pictures.nav.group2')} (Group 1, Title 1)</li>\n" \
+                     "<li>#{I18n.t('pictures.nav.location')} (John Doe)</li>\n" \
                      "</ul>\n\n" \
                      "<ul class='groups'>\n" \
-                     "<li title='Group 2, Title 3'>\n<a onclick='openImagesGallery(&quot;group1=group1_title1&amp;group2=group2_title3&amp;sort_by=datetime&quot;);'>\n<figure>\n<div style='background-image: url(&quot;api/group/group2?group2=group2_title3&quot;)'></div>\n<figcaption>\nGroup 2, Title 3\n</figcaption>\n</figure>\n</a>\n</li>\n" \
-                     "<li title='Group 2, Title 2'>\n<a onclick='openImagesGallery(&quot;group1=group1_title1&amp;group2=group2_title2&amp;sort_by=datetime&quot;);'>\n<figure>\n<div style='background-image: url(&quot;api/group/group2?group2=group2_title2&quot;)'></div>\n<figcaption>\nGroup 2, Title 2\n<br>\n<em>brief_text_2</em>\n</figcaption>\n</figure>\n</a>\n</li>\n" \
+                     "<li title='Tokyo, Japan'>\n<a onclick='openImagesGallery(&quot;author=John Doe&amp;location=Tokyo, Japan&amp;sort_by=datetime&quot;);'>\n<figure>\n<div style='background-image: url(&quot;api/group_thumbnail?location=Tokyo, Japan&quot;)'></div>\n<figcaption>\nTokyo, Japan\n</figcaption>\n</figure>\n</a>\n</li>\n" \
+                     "<li title='Paris, France'>\n<a onclick='openImagesGallery(&quot;author=John Doe&amp;location=Paris, France&amp;sort_by=datetime&quot;);'>\n<figure>\n<div style='background-image: url(&quot;api/group_thumbnail?location=Paris, France&quot;)'></div>\n<figcaption>\nParis, France\n<br>\n<em>The City of Light</em>\n</figcaption>\n</figure>\n</a>\n</li>\n" \
                      "</ul>\n" \
-                     "</section>\n" + photoswipe_markup,
-            title: 'My Gallery'
+                     "</section>\n",
+            title: 'My Gallery',
+            stylesheets: [
+              'design/style.css',
+              'design/photoswipe/photoswipe.css',
+              'design/photoswipe/photoswipe-dynamic-caption-plugin.css'
+            ],
+            scripts: [{ src: 'design/jpictures.js', type: 'module' }]
           }
         )
 
         # Invalid selector
-        query = { 'foo' => 'bar' }
-        code, mime, content = @responder.generate_page('/browse_group2.html', query)
+        query = { 'group_by' => 'location', 'foo' => 'bar' }
+        code, mime, content = @responder.generate_page('/browse.html', query)
         expect(code).to eql(206)
         expect(mime).to eql('text/html')
         expect(content).to eql(
@@ -298,120 +299,104 @@ RSpec.describe Intranet::Pictures::Responder do
                      "<li>\n<a href='/index.html'>#{I18n.t('nav.home')}</a>\n</li>\n" \
                      "<li>#{I18n.t('pictures.menu')}</li>\n" \
                      "<li>\n<a href='index.html'>My Gallery</a>\n</li>\n" \
-                     "<li>#{I18n.t('pictures.nav.group2')} (bar)</li>\n" \
+                     "<li>#{I18n.t('pictures.nav.location')} (bar)</li>\n" \
                      "</ul>\n\n" \
                      "<ul class='groups'>\n</ul>\n" \
-                     "</section>\n" + photoswipe_markup,
-            title: 'My Gallery'
+                     "</section>\n",
+            title: 'My Gallery',
+            stylesheets: [
+              'design/style.css',
+              'design/photoswipe/photoswipe.css',
+              'design/photoswipe/photoswipe-dynamic-caption-plugin.css'
+            ],
+            scripts: [{ src: 'design/jpictures.js', type: 'module' }]
           }
         )
 
-        # Invalid group type
-        code, mime, content = @responder.generate_page('/browse_foo.html', {})
+        # Invalid grouping criteria
+        query = { 'group_by' => 'foo' }
+        code, mime, content = @responder.generate_page('/browse.html', query)
         expect(code).to eql(404)
         expect(mime).to be_empty
         expect(content).to be_empty
 
-        # Invalid sort order
-        query = { 'sort_order' => 'foo' }
-        code, mime, content = @responder.generate_page('/browse_group2.html', query)
+        # Invalid sorting criteria
+        query = { 'group_by' => 'location', 'sort_order' => 'foo' }
+        code, mime, content = @responder.generate_page('/browse.html', query)
         expect(code).to eql(404)
         expect(mime).to be_empty
         expect(content).to be_empty
       end
     end
 
-    context 'when asked for \'/api/groups\'' do
-      it 'should return a JSON representation of the selected groups' do
-        # Existing group, no selector nor sort order
-        query = {}
-        code, mime, content = @responder.generate_page('/api/groups/group1', query)
+    context 'when asked for \'/i18n.js\'' do
+      it 'should return the internationalized version of required JavaScript variables' do
+        code, mime, content = @responder.generate_page('/i18n.js', {})
         expect(code).to eql(200)
-        expect(mime).to eql('application/json')
+        expect(mime).to eql('text/javascript')
         expect(content).to eql(
-          [
-            { 'id' => 'group1_title1', 'title' => 'Group 1, Title 1', 'brief' => 'brief_text_1' },
-            { 'id' => 'group1_title2', 'title' => 'Group 1, Title 2' }
-          ].to_json
+          "export default {\n" \
+          "  viewer_close: '#{I18n.t('pictures.viewer.close')}',\n" \
+          "  viewer_zoom: '#{I18n.t('pictures.viewer.zoom')}',\n" \
+          "  viewer_previous: '#{I18n.t('pictures.viewer.previous')}',\n" \
+          "  viewer_next: '#{I18n.t('pictures.viewer.next')}' };"
         )
+      end
+    end
 
-        # Existing group, valid selector, no sort order
-        query = { 'group1' => 'group1_title1' }
-        code, mime, content = @responder.generate_page('/api/groups/group2', query)
+    context 'when asked for \'/api/group_thumbnail\'' do
+      it 'should return the selected group thumnail' do
+        # Existing group with thumbnail
+        query = { 'location' => 'New York, USA' }
+        code, mime, content = @responder.generate_page('/api/group_thumbnail', query)
         expect(code).to eql(200)
-        expect(mime).to eql('application/json')
-        expect(content).to eql(
-          [
-            { 'id' => 'group2_title2', 'title' => 'Group 2, Title 2', 'value' => 'bcde', 'brief' => 'brief_text_2' },
-            { 'id' => 'group2_title3', 'title' => 'Group 2, Title 3', 'value' => 'aabb' }
-          ].to_json
-        )
+        expect(mime).to eql('image/png')
+        expect(content).to eql(File.read(File.join(__dir__, 'alpha.png')))
 
-        # Existing group, valid selector, valid sort order
-        query = { 'group1' => 'group1_title1', 'sort_by' => 'value', 'sort_order' => 'asc' }
-        code, mime, content = @responder.generate_page('/api/groups/group2', query)
-        expect(code).to eql(200)
-        expect(mime).to eql('application/json')
-        expect(content).to eql(
-          [
-            { 'id' => 'group2_title3', 'title' => 'Group 2, Title 3', 'value' => 'aabb' },
-            { 'id' => 'group2_title2', 'title' => 'Group 2, Title 2', 'value' => 'bcde', 'brief' => 'brief_text_2' }
-          ].to_json
-        )
-        query = { 'group1' => 'group1_title1', 'sort_by' => 'id', 'sort_order' => 'desc' }
-        code, mime, content = @responder.generate_page('/api/groups/group2', query)
+        # Existing group with no specified thumbnail
+        query = { 'location' => 'Paris, France' }
+        code, mime, content = @responder.generate_page('/api/group_thumbnail', query)
         expect(code).to eql(200)
-        expect(mime).to eql('application/json')
+        expect(mime).to eql('image/svg+xml')
         expect(content).to eql(
-          [
-            { 'id' => 'group2_title3', 'title' => 'Group 2, Title 3', 'value' => 'aabb' },
-            { 'id' => 'group2_title2', 'title' => 'Group 2, Title 2', 'value' => 'bcde', 'brief' => 'brief_text_2' }
-          ].to_json
+          File.read(File.join(__dir__, '../../../lib/intranet/resources/www/group_thumbnail.svg'))
         )
 
-        # Invalid selector
-        query = { 'foo' => 'bar' }
-        code, mime, content = @responder.generate_page('/api/groups/group2', query)
-        expect(code).to eql(200)
-        expect(mime).to eql('application/json')
-        expect(content).to eql([].to_json)
-
-        # Invalid group type
-        code, mime, content = @responder.generate_page('/api/groups/foo', {})
+        # Existing group with non-existant thumbnail
+        query = { 'author' => 'Jane Doe' }
+        code, mime, content = @responder.generate_page('/api/group_thumbnail', query)
         expect(code).to eql(404)
         expect(mime).to be_empty
         expect(content).to be_empty
 
-        # Invalid sort order
-        query = { 'sort_order' => 'foo' }
-        code, mime, content = @responder.generate_page('/api/groups/group2', query)
+        # Invalid query
+        query = { 'location' => 'Tokyo, Japan', 'camera' => 'Canon EOS 5D MARK IV' }
+        code, mime, content = @responder.generate_page('/api/group_thumbnail', query)
         expect(code).to eql(404)
         expect(mime).to be_empty
         expect(content).to be_empty
       end
     end
 
-    context 'when asked for \'/api/group\'' do
-      it 'should return the selected group thumnail' do
-        # Existing group with thumbnail
-        query = { 'group2' => 'group2_title1' }
-        code, mime, content = @responder.generate_page('/api/group/group2', query)
+    context 'when asked for \'/api/group_brief\'' do
+      it 'should return the selected group brief text' do
+        # Existing group with brief text
+        query = { 'location' => 'Paris, France' }
+        code, mime, content = @responder.generate_page('/api/group_brief', query)
         expect(code).to eql(200)
-        expect(mime).to eql('image/png')
-        expect(content).to eql(File.read(File.join(__dir__, 'alpha.png')))
+        expect(mime).to eql('application/json')
+        expect(content).to eql('The City of Light'.to_json)
 
-        # Existing group with no specified thumbnail
-        query = { 'group2' => 'group2_title2' }
-        code, mime, content = @responder.generate_page('/api/group/group2', query)
+        # Existing group with no brief text
+        query = { 'location' => 'Tokyo, Japan' }
+        code, mime, content = @responder.generate_page('/api/group_brief', query)
         expect(code).to eql(200)
-        expect(mime).to eql('image/svg+xml')
-        expect(content).to eql(
-          File.read(File.join(__dir__, '../../../lib/intranet/resources/www/group_thumbnail.svg'))
-        )
+        expect(mime).to eql('application/json')
+        expect(content).to eql(''.to_json)
 
-        # Existing group with non-existant thumbnail
-        query = { 'group1' => 'group1_title2' }
-        code, mime, content = @responder.generate_page('/api/group/group1', query)
+        # Invalid query
+        query = { 'location' => 'Tokyo, Japan', 'camera' => 'Canon EOS 5D MARK IV' }
+        code, mime, content = @responder.generate_page('/api/group_brief', query)
         expect(code).to eql(404)
         expect(mime).to be_empty
         expect(content).to be_empty
@@ -426,46 +411,46 @@ RSpec.describe Intranet::Pictures::Responder do
         expect(mime).to eql('application/json')
         expect(content).to eql(
           [
-            { 'datetime' => '2019:07:22 09:41:31', 'group1' => 'group1_title1', 'group2' => 'group2_title2', 'group3' => 'group3_title1' },
-            { 'datetime' => '2020:06:19 07:51:05', 'value' => false, 'group1' => 'group1_title2', 'group2' => 'group2_title2' },
-            { 'datetime' => '2020:06:20 18:14:09', 'value' => true, 'group1' => 'group1_title2', 'group2' => 'group2_title1' },
-            { 'datetime' => '2020:06:20 06:09:54', 'value' => true, 'group1' => 'group1_title2', 'group2' => 'group2_title3', 'group3' => 'group3_title2' },
-            { 'datetime' => '2019:07:22 09:45:17', 'group1' => 'group1_title1', 'group2' => 'group2_title3' }
+            { 'datetime' => '2019:07:22 09:41:31', 'author' => 'John Doe', 'location' => 'Paris, France', 'camera' => 'Apple iPhone 11' },
+            { 'datetime' => '2020:06:19 07:51:05', 'flash' => false, 'author' => 'Jane Doe', 'location' => 'Tokyo, Japan' },
+            { 'datetime' => '2020:06:20 18:14:09', 'flash' => true, 'author' => 'Jane Doe', 'location' => 'New York, USA' },
+            { 'datetime' => '2020:06:20 06:09:54', 'flash' => true, 'author' => 'Jane Doe', 'location' => 'Paris, France', 'camera' => 'Canon EOS 5D MARK IV' },
+            { 'datetime' => '2019:07:22 09:45:17', 'author' => 'John Doe', 'location' => 'Tokyo, Japan' }
           ].to_json
         )
 
         # Valid selector, no sort order
-        query = { 'group1' => 'group1_title2', 'value' => true }
+        query = { 'author' => 'Jane Doe', 'flash' => true }
         code, mime, content = @responder.generate_page('/api/pictures', query)
         expect(code).to eql(200)
         expect(mime).to eql('application/json')
         expect(content).to eql(
           [
-            { 'datetime' => '2020:06:20 18:14:09', 'value' => true, 'group1' => 'group1_title2', 'group2' => 'group2_title1' },
-            { 'datetime' => '2020:06:20 06:09:54', 'value' => true, 'group1' => 'group1_title2', 'group2' => 'group2_title3', 'group3' => 'group3_title2' }
+            { 'datetime' => '2020:06:20 18:14:09', 'flash' => true, 'author' => 'Jane Doe', 'location' => 'New York, USA' },
+            { 'datetime' => '2020:06:20 06:09:54', 'flash' => true, 'author' => 'Jane Doe', 'location' => 'Paris, France', 'camera' => 'Canon EOS 5D MARK IV' }
           ].to_json
         )
 
         # Valid selector, valid sort order
-        query = { 'group1' => 'group1_title2', 'value' => true, 'sort_by' => 'datetime' }
+        query = { 'author' => 'Jane Doe', 'flash' => true, 'sort_by' => 'datetime' }
         code, mime, content = @responder.generate_page('/api/pictures', query)
         expect(code).to eql(200)
         expect(mime).to eql('application/json')
         expect(content).to eql(
           [
-            { 'datetime' => '2020:06:20 06:09:54', 'value' => true, 'group1' => 'group1_title2', 'group2' => 'group2_title3', 'group3' => 'group3_title2' },
-            { 'datetime' => '2020:06:20 18:14:09', 'value' => true, 'group1' => 'group1_title2', 'group2' => 'group2_title1' }
+            { 'datetime' => '2020:06:20 06:09:54', 'flash' => true, 'author' => 'Jane Doe', 'location' => 'Paris, France', 'camera' => 'Canon EOS 5D MARK IV' },
+            { 'datetime' => '2020:06:20 18:14:09', 'flash' => true, 'author' => 'Jane Doe', 'location' => 'New York, USA' }
           ].to_json
         )
-        query = { 'group1' => 'group1_title2', 'value' => true, 'sort_by' => 'group2',
+        query = { 'author' => 'Jane Doe', 'flash' => true, 'sort_by' => 'location',
                   'sort_order' => 'desc' }
         code, mime, content = @responder.generate_page('/api/pictures', query)
         expect(code).to eql(200)
         expect(mime).to eql('application/json')
         expect(content).to eql(
           [
-            { 'datetime' => '2020:06:20 06:09:54', 'value' => true, 'group1' => 'group1_title2', 'group2' => 'group2_title3', 'group3' => 'group3_title2' },
-            { 'datetime' => '2020:06:20 18:14:09', 'value' => true, 'group1' => 'group1_title2', 'group2' => 'group2_title1' }
+            { 'datetime' => '2020:06:20 06:09:54', 'flash' => true, 'author' => 'Jane Doe', 'location' => 'Paris, France', 'camera' => 'Canon EOS 5D MARK IV' },
+            { 'datetime' => '2020:06:20 18:14:09', 'flash' => true, 'author' => 'Jane Doe', 'location' => 'New York, USA' }
           ].to_json
         )