From 3c8ee4341f682edb419f9193e07f214d96209384 Mon Sep 17 00:00:00 2001 From: "(quasar) nebula" Date: Sat, 13 Jan 2024 19:05:57 -0400 Subject: content, css, client: generateTextWithTooltip --- .../dependencies/generateDatetimestampTemplate.js | 20 +++--- .../dependencies/generateTextWithTooltip.js | 47 +++++++++++++ src/content/dependencies/linkContribution.js | 78 +++++++++++----------- 3 files changed, 99 insertions(+), 46 deletions(-) create mode 100644 src/content/dependencies/generateTextWithTooltip.js (limited to 'src/content/dependencies') diff --git a/src/content/dependencies/generateDatetimestampTemplate.js b/src/content/dependencies/generateDatetimestampTemplate.js index 9b1d7aa8..d9ed036a 100644 --- a/src/content/dependencies/generateDatetimestampTemplate.js +++ b/src/content/dependencies/generateDatetimestampTemplate.js @@ -1,6 +1,12 @@ export default { + contentDependencies: ['generateTextWithTooltip'], extraDependencies: ['html'], + relations: (relation) => ({ + textWithTooltip: + relation('generateTextWithTooltip'), + }), + slots: { mainContent: { type: 'html', @@ -15,20 +21,18 @@ export default { datetime: {type: 'string'}, }, - generate: (slots, {html}) => - html.tag('span', {class: 'datetimestamp'}, - {[html.joinChildren]: ''}, - - !html.isBlank(slots.tooltip) && - {class: 'has-tooltip'}, + generate: (relations, slots, {html}) => + relations.textWithTooltip.slots({ + attributes: {class: 'datetimestamp'}, - [ + text: html.tag('time', {datetime: slots.datetime}, slots.mainContent), + tooltip: slots.tooltip?.slots({ attributes: [{class: 'datetimestamp-tooltip'}], }), - ]), + }), }; diff --git a/src/content/dependencies/generateTextWithTooltip.js b/src/content/dependencies/generateTextWithTooltip.js new file mode 100644 index 00000000..518e8782 --- /dev/null +++ b/src/content/dependencies/generateTextWithTooltip.js @@ -0,0 +1,47 @@ +export default { + extraDependencies: ['html'], + + slots: { + attributes: { + type: 'attributes', + mutable: false, + }, + + text: { + type: 'html', + mutable: false, + }, + + tooltip: { + type: 'html', + mutable: false, + }, + }, + + generate(slots, {html}) { + const hasTooltip = + !html.isBlank(slots.tooltip); + + if (slots.attributes.blank && !hasTooltip) { + return slots.text; + } + + let {attributes} = slots; + + if (hasTooltip) { + attributes = attributes.clone(); + attributes.add({ + [html.joinChildren]: '', + [html.noEdgeWhitespace]: true, + class: 'text-with-tooltip', + }); + } + + const content = + (hasTooltip + ? [slots.text, slots.tooltip] + : slots.text); + + return html.tag('span', attributes, content); + }, +}; diff --git a/src/content/dependencies/linkContribution.js b/src/content/dependencies/linkContribution.js index f3d6e4f2..0b0884ef 100644 --- a/src/content/dependencies/linkContribution.js +++ b/src/content/dependencies/linkContribution.js @@ -2,6 +2,7 @@ import {empty} from '#sugar'; export default { contentDependencies: [ + 'generateTextWithTooltip', 'generateTooltip', 'linkArtist', 'linkExternalAsIcon', @@ -15,6 +16,9 @@ export default { relations.artistLink = relation('linkArtist', contribution.who); + relations.textWithTooltip = + relation('generateTextWithTooltip'); + relations.tooltip = relation('generateTooltip'); @@ -49,7 +53,30 @@ export default { const hasExternalIcons = !!(slots.showIcons && relations.artistIcons); const parts = ['misc.artistLink']; - const options = {artist: relations.artistLink}; + const options = {}; + + options.artist = + (hasExternalIcons && slots.iconMode === 'tooltip' + ? relations.textWithTooltip.slots({ + text: relations.artistLink, + tooltip: + relations.tooltip.slots({ + attributes: + {class: ['icons', 'icons-tooltip']}, + + contentAttributes: + {[html.joinChildren]: ''}, + + content: + relations.artistIcons + .map(icon => + icon.slots({ + context: 'artist', + withText: true, + })), + }), + }) + : relations.artistLink); if (hasContribution) { parts.push('withContribution'); @@ -67,46 +94,21 @@ export default { .map(icon => icon.slot('context', 'artist')))); } - let content = language.formatString(...parts, options); - - if (hasExternalIcons && slots.iconMode === 'tooltip') { - content = [ - content, - relations.tooltip.slots({ - attributes: - {class: ['icons', 'icons-tooltip']}, - - contentAttributes: - {[html.joinChildren]: ''}, + const contributionPart = + language.formatString(...parts, options); - content: - relations.artistIcons - .map(icon => - icon.slots({ - context: 'artist', - withText: true, - })), - }), - ]; + if (!hasContribution && !hasExternalIcons) { + return contributionPart; } - if (hasContribution || hasExternalIcons) { - content = - html.tag('span', {class: 'contribution'}, - {[html.noEdgeWhitespace]: true}, - {[html.joinChildren]: ''}, + return ( + html.tag('span', {class: 'contribution'}, + {[html.noEdgeWhitespace]: true}, - hasExternalIcons && - slots.iconMode === 'tooltip' && - {class: 'has-tooltip'}, + parts.length > 1 && + slots.preventWrapping && + {class: 'nowrap'}, - parts.length > 1 && - slots.preventWrapping && - {class: 'nowrap'}, - - content); - } - - return content; - } + contributionPart)); + }, }; -- cgit 1.3.0-6-gf8a5