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

3 files changed, 67 insertions, 8 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,
+              ]),
         ]))),
 };