« get me outta code hell

content, css: generateAlbumTrackList: handle missing durations - hsmusic-wiki - HSMusic - static wiki software cataloguing collaborative creation
about summary refs log tree commit diff
path: root/src/content/dependencies/generateAlbumTrackListMissingDuration.js
diff options
context:
space:
mode:
author(quasar) nebula <qznebula@protonmail.com>2024-02-06 18:20:51 -0400
committer(quasar) nebula <qznebula@protonmail.com>2024-02-10 13:31:05 -0400
commitc53d9751c7a8d8687a6a27b308462c5ca77953e5 (patch)
tree44af9d5ebe76f7f3c1c0ea29171f363fd032c6db /src/content/dependencies/generateAlbumTrackListMissingDuration.js
parentb451bcdea910c463f63bb2d1f9293d3f91aa1914 (diff)
content, css: generateAlbumTrackList: handle missing durations
With bad CSS, at the moment.
Diffstat (limited to 'src/content/dependencies/generateAlbumTrackListMissingDuration.js')
-rw-r--r--src/content/dependencies/generateAlbumTrackListMissingDuration.js33
1 files changed, 33 insertions, 0 deletions
diff --git a/src/content/dependencies/generateAlbumTrackListMissingDuration.js b/src/content/dependencies/generateAlbumTrackListMissingDuration.js
new file mode 100644
index 00000000..40c0e353
--- /dev/null
+++ b/src/content/dependencies/generateAlbumTrackListMissingDuration.js
@@ -0,0 +1,33 @@
+export default {
+  contentDependencies: ['generateTextWithTooltip', 'generateTooltip'],
+  extraDependencies: ['html', 'language'],
+
+  relations: (relation) => ({
+    textWithTooltip:
+      relation('generateTextWithTooltip'),
+
+    tooltip:
+      relation('generateTooltip'),
+  }),
+
+  generate: (relations, {html, language}) =>
+    relations.textWithTooltip.slots({
+      attributes: {class: 'missing-duration'},
+
+      text:
+        html.tag('span',
+          language.$('trackList.item.withDuration.duration', {
+            duration:
+              html.tag('span', {class: 'duration-text'},
+                language.$('trackList.item.withDuration.duration.missing')),
+          })),
+
+      tooltip:
+        relations.tooltip.slots({
+          attributes: {class: 'missing-duration-tooltip'},
+
+          content:
+            language.$('trackList.item.withDuration.duration.missing.info'),
+        }),
+    }),
+};