content, client, css: tighter expandable grid

1 files changed, 39 insertions, 0 deletions

diff --git a/src/content/dependencies/generateGridExpando.js b/src/content/dependencies/generateGridExpando.js
new file mode 100644
index 00000000..71c2f970
--- /dev/null
+++ b/src/content/dependencies/generateGridExpando.js
@@ -0,0 +1,39 @@
+export default {
+  extraDependencies: ['html', 'language'],
+
+  slots: {
+    caption: {type: 'html', mutable: false},
+  },
+
+  generate: (slots, {html, language}) =>
+    language.encapsulate('misc.coverGrid', capsule =>
+      html.tag('div', {class: 'grid-expando'},
+        {[html.onlyIfSiblings]: true},
+
+        html.tag('p', {class: 'grid-expando-content'},
+          {[html.joinChildren]: html.tag('br')},
+
+          [
+            html.tag('span', {class: 'grid-caption'},
+              slots.caption),
+
+            !html.isBlank(slots.contentBelowCut) &&
+              language.$(capsule, 'expandCollapseCue', {
+                cue:
+                  html.tag('a', {class: 'grid-expando-toggle'},
+                    {href: '#'},
+
+                    {[html.joinChildren]: ''},
+                    {[html.noEdgeWhitespace]: true},
+
+                    [
+                      html.tag('span', {class: 'grid-expand-cue'},
+                        language.$(capsule, 'expand')),
+
+                      html.tag('span', {class: 'grid-collapse-cue'},
+                        {style: 'display: none'},
+                        language.$(capsule, 'collapse')),
+                    ]),
+              }),
+          ]))),
+};