content, css: gGIPAlbumsSection: by series/date dot switcher

5 files changed, 84 insertions, 9 deletions

diff --git a/src/content/dependencies/generateGroupInfoPageAlbumsListByDate.js b/src/content/dependencies/generateGroupInfoPageAlbumsListByDate.js
index af6c3ed9..079cb56c 100644
--- a/src/content/dependencies/generateGroupInfoPageAlbumsListByDate.js
+++ b/src/content/dependencies/generateGroupInfoPageAlbumsListByDate.js
@@ -26,8 +26,19 @@ export default {
             group)),
   }),
 
-  generate: (relations, {html}) =>
+  slots: {
+    hidden: {
+      type: 'boolean',
+      default: false,
+    },
+  },
+
+  generate: (relations, slots, {html}) =>
     html.tag('ul',
+      {id: 'group-album-list-by-date'},
+
+      slots.hidden && {style: 'display: none'},
+
       {[html.onlyIfContent]: true},
 
       relations.items),
diff --git a/src/content/dependencies/generateGroupInfoPageAlbumsListBySeries.js b/src/content/dependencies/generateGroupInfoPageAlbumsListBySeries.js
index 8fa90877..2e439897 100644
--- a/src/content/dependencies/generateGroupInfoPageAlbumsListBySeries.js
+++ b/src/content/dependencies/generateGroupInfoPageAlbumsListBySeries.js
@@ -30,7 +30,10 @@ export default {
 
   generate: (data, relations, {html, language}) =>
     language.encapsulate('groupInfoPage.albumList', listCapsule =>
-      html.tag('dl', {class: 'group-series-list'},
+      html.tag('dl',
+        {id: 'group-album-list-by-series'},
+        {class: 'group-series-list'},
+
         {[html.onlyIfContent]: true},
 
         stitchArrays({
diff --git a/src/content/dependencies/generateGroupInfoPageAlbumsSection.js b/src/content/dependencies/generateGroupInfoPageAlbumsSection.js
index 90e0bd8a..0b678e9d 100644
--- a/src/content/dependencies/generateGroupInfoPageAlbumsSection.js
+++ b/src/content/dependencies/generateGroupInfoPageAlbumsSection.js
@@ -3,6 +3,7 @@ export default {
     'generateContentHeading',
     'generateGroupInfoPageAlbumsListByDate',
     'generateGroupInfoPageAlbumsListBySeries',
+    'generateIntrapageDotSwitcher',
     'linkGroupGallery',
   ],
 
@@ -20,6 +21,9 @@ export default {
 
     albumsListBySeries:
       relation('generateGroupInfoPageAlbumsListBySeries', group),
+
+    viewSwitcher:
+      relation('generateIntrapageDotSwitcher'),
   }),
 
   generate: (relations, {html, language}) =>
@@ -35,14 +39,55 @@ export default {
           html.tag('p',
             {[html.onlyIfSiblings]: true},
 
-            language.encapsulate(pageCapsule, 'viewAlbumGallery', capsule =>
-              language.$(capsule, {
-                link:
+            language.encapsulate(pageCapsule, 'viewAlbumGallery', viewAlbumGalleryCapsule =>
+              language.encapsulate(viewAlbumGalleryCapsule, workingCapsule => {
+                const workingOptions = {};
+
+                workingOptions.link =
                   relations.galleryLink
-                    .slot('content', language.$(capsule, 'link')),
+                    .slot('content',
+                      language.$(viewAlbumGalleryCapsule, 'link'));
+
+                if (
+                  !html.isBlank(relations.albumsListByDate) &&
+                  !html.isBlank(relations.albumsListBySeries)
+                ) {
+                  workingCapsule += '.withViewSwitcher';
+                  workingOptions.viewSwitcher =
+                    html.tag('span', {class: 'group-view-switcher'},
+                      language.encapsulate(pageCapsule, 'viewSwitcher', switcherCapsule =>
+                        language.$(switcherCapsule, {
+                          options:
+                            relations.viewSwitcher.slots({
+                              initialOptionIndex: 0,
+
+                              titles: [
+                                language.$(switcherCapsule, 'bySeries'),
+                                language.$(switcherCapsule, 'byDate'),
+                              ],
+
+                              targetIDs: [
+                                'group-album-list-by-series',
+                                'group-album-list-by-date',
+                              ],
+                            }),
+                        })));
+                }
+
+                return language.$(workingCapsule, workingOptions);
               }))),
 
-          relations.albumsListByDate,
-          relations.albumsListBySeries,
+          ((!html.isBlank(relations.albumsListByDate) &&
+            !html.isBlank(relations.albumsListBySeries))
+
+            ? [
+                relations.albumsListBySeries,
+                relations.albumsListByDate.slot('hidden', true),
+              ]
+
+            : [
+                relations.albumsListBySeries,
+                relations.albumsListByDate,
+              ]),
         ]))),
 };
diff --git a/src/static/css/site.css b/src/static/css/site.css
index d4d9deb1..9d17fd0f 100644
--- a/src/static/css/site.css
+++ b/src/static/css/site.css
@@ -1608,6 +1608,10 @@ ul > li.has-details {
   font-style: oblique;
 }
 
+.group-view-switcher {
+  margin-left: 1ch;
+}
+
 #content hr {
   border: 1px inset #808080;
   width: 100%;
diff --git a/src/strings-default.yaml b/src/strings-default.yaml
index 146facee..aaa38c59 100644
--- a/src/strings-default.yaml
+++ b/src/strings-default.yaml
@@ -1275,9 +1275,21 @@ groupInfoPage:
   title: "{GROUP}"
 
   viewAlbumGallery:
-    _: "View {LINK}! Or browse the list:"
+    _: >-
+      View {LINK}! Or browse the list:
+
     link: "album gallery"
 
+    withViewSwitcher:
+      _: >-
+        View {LINK}! Or browse the list: {VIEW_SWITCHER}
+
+  viewSwitcher:
+    _: "({OPTIONS})"
+
+    bySeries: "By series"
+    byDate: "By date"
+
   # albumList:
   #   Many albums are present under multiple groups, and these get an
   #   accent indicating what other group is highest on the album's