content, client, css: quick description: expand, link externally

1 files changed, 121 insertions, 30 deletions

diff --git a/src/content/dependencies/generateQuickDescription.js b/src/content/dependencies/generateQuickDescription.js
index 136769ac..c67dd1ec 100644
--- a/src/content/dependencies/generateQuickDescription.js
+++ b/src/content/dependencies/generateQuickDescription.js
@@ -2,40 +2,131 @@ export default {
   contentDependencies: ['transformContent'],
   extraDependencies: ['html', 'language'],
 
-  relations: (relation, thing) =>
-    ({description:
-        (thing.descriptionShort || thing.description
-          ? relation('transformContent',
-              thing.descriptionShort ?? thing.description)
-          : null)}),
-
-  data: (thing) =>
-    ({hasLongerDescription:
-        thing.description &&
-        thing.descriptionShort &&
-        thing.descriptionShort !== thing.description}),
+  query: (thing) => ({
+    hasDescription:
+      !!thing.description,
+
+    hasLongerDescription:
+      thing.description &&
+      thing.descriptionShort &&
+      thing.descriptionShort !== thing.description,
+  }),
+
+  relations: (relation, query, thing) => ({
+    description:
+      (query.hasLongerDescription || !thing.description
+        ? null
+        : relation('transformContent', thing.description)),
+
+    descriptionShort:
+      (query.hasLongerDescription
+        ? relation('transformContent', thing.descriptionShort)
+        : null),
+
+    descriptionLong:
+      (query.hasLongerDescription
+        ? relation('transformContent', thing.description)
+        : null),
+  }),
+
+  data: (query) => ({
+    hasDescription: query.hasDescription,
+    hasLongerDescription: query.hasLongerDescription,
+  }),
 
   slots: {
-    infoPageLink: {type: 'html'},
+    extraReadingLinks: {validate: v => v.sparseArrayOf(v.isHTML)},
   },
 
   generate(data, relations, slots, {html, language}) {
-    return html.tag('p',
-      {
-        [html.joinChildren]: html.tag('br'),
+    const prefix = 'misc.quickDescription';
+
+    const actionsWithoutLongerDescription =
+      (data.hasLongerDescription
+        ? null
+     : slots.extraReadingLinks
+        ? language.$(prefix, 'readMore', {
+            links:
+              language.formatDisjunctionList(slots.extraReadingLinks),
+          })
+        : null);
+
+    const wrapExpandCollapseLink = (expandCollapse, content) =>
+      html.tag('a',
+        {href: '#', class: `${expandCollapse}-link`},
+        content);
+
+    const actionsWhenCollapsed =
+      (!data.hasLongerDescription
+        ? null
+     : slots.extraReadingLinks
+        ? language.$(prefix, 'expandDescription.orReadMore', {
+            links:
+              language.formatDisjunctionList(slots.extraReadingLinks),
+            expand:
+              wrapExpandCollapseLink('expand',
+                language.$(prefix, 'expandDescription.orReadMore.expand')),
+          })
+        : language.$(prefix, 'expandDescription', {
+            expand:
+              wrapExpandCollapseLink('expand',
+                language.$(prefix, 'expandDescription.expand')),
+          }));
+
+    const actionsWhenExpanded =
+      (!data.hasLongerDescription
+        ? null
+      : slots.extraReadingLinks
+        ? language.$(prefix, 'collapseDescription.orReadMore', {
+            links:
+              language.formatDisjunctionList(slots.extraReadingLinks),
+            collapse:
+              wrapExpandCollapseLink('collapse',
+                language.$(prefix, 'collapseDescription.orReadMore.collapse')),
+          })
+        : language.$(prefix, 'collapseDescription', {
+            collapse:
+              wrapExpandCollapseLink('collapse',
+                language.$(prefix, 'collapseDescription.collapse')),
+          }));
+
+    const wrapActions = (classes, children) =>
+      html.tag('p',
+        {[html.onlyIfContent]: true, class: [
+          'quick-description-actions',
+          ...classes]},
+        children);
+
+    const wrapContent = (classes, content) =>
+      html.tag('div',
+        {[html.onlyIfContent]: true, class: classes},
+        content?.slot('mode', 'multiline'));
+
+    return (
+      html.tag('div', {
         [html.onlyIfContent]: true,
-        class:' quick-info',
-      },
-      [
-        relations.description?.slot('mode', 'inline'),
-
-        data.hasLongerDescription &&
-        slots.infoPageLink &&
-          language.$('misc.quickDescription.moreInfo', {
-            link:
-              slots.infoPageLink
-                .slot('content', language.$('misc.quickDescription.moreInfo.link')),
-          }),
-      ]);
-  },
+        class: [
+          'quick-description',
+
+          data.hasLongerDescription &&
+            'collapsed',
+
+          !data.hasLongerDescription &&
+          !slots.extraReadingLinks &&
+            'has-content-only',
+
+          !data.hasDescription &&
+          slots.extraReadingLinks &&
+            'has-external-links-only',
+        ],
+      }, [
+        wrapContent(['description-content'], relations.description),
+        wrapContent(['description-content', 'short'], relations.descriptionShort),
+        wrapContent(['description-content', 'long'], relations.descriptionLong),
+
+        wrapActions([], actionsWithoutLongerDescription),
+        wrapActions(['when-collapsed'], actionsWhenCollapsed),
+        wrapActions(['when-expanded'], actionsWhenExpanded),
+      ]));
+  }
 };