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 +++++++++++----------- src/static/client3.js | 22 +++--- src/static/site6.css | 18 ++--- 5 files changed, 117 insertions(+), 68 deletions(-) create mode 100644 src/content/dependencies/generateTextWithTooltip.js (limited to 'src') 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)); + }, }; diff --git a/src/static/client3.js b/src/static/client3.js index 51b1e7d7..77e7e92e 100644 --- a/src/static/client3.js +++ b/src/static/client3.js @@ -2086,28 +2086,28 @@ for (const info of groupContributionsTableInfo) { }); } -// Artist link icon tooltips ------------------------------ +// Generic links with tooltips ---------------------------- -const externalIconTooltipInfo = initInfo('externalIconTooltipInfo', { +const textWithTooltipInfo = initInfo('textWithTooltipInfo', { hoverables: null, tooltips: null, }); -function getExternalIconTooltipReferences() { - const info = externalIconTooltipInfo; +function getTextWithTooltipReferences() { + const info = textWithTooltipInfo; const spans = - Array.from(document.querySelectorAll('span.contribution.has-tooltip')); + Array.from(document.querySelectorAll('.text-with-tooltip')); info.hoverables = - spans.map(span => span.querySelector('a')); + spans.map(span => span.children[0]); info.tooltips = - spans.map(span => span.querySelector('span.icons-tooltip')); + spans.map(span => span.children[1]); } -function addExternalIconTooltipPageListeners() { - const info = externalIconTooltipInfo; +function addTextWithTooltipPageListeners() { + const info = textWithTooltipInfo; for (const {hoverable, tooltip} of stitchArrays({ hoverable: info.hoverables, @@ -2118,8 +2118,8 @@ function addExternalIconTooltipPageListeners() { } } -clientSteps.getPageReferences.push(getExternalIconTooltipReferences); -clientSteps.addPageListeners.push(addExternalIconTooltipPageListeners); +clientSteps.getPageReferences.push(getTextWithTooltipReferences); +clientSteps.addPageListeners.push(addTextWithTooltipPageListeners); // Datetimestamp tooltips --------------------------------- diff --git a/src/static/site6.css b/src/static/site6.css index baa2efdf..5f4ed7ad 100644 --- a/src/static/site6.css +++ b/src/static/site6.css @@ -503,26 +503,22 @@ a:not([href]):hover { display: inline-block; } -.contribution.has-tooltip, -.datetimestamp.has-tooltip { +.text-with-tooltip { position: relative; } -.contribution.has-tooltip > a, -.datetimestamp.has-tooltip > time { +.text-with-tooltip > :first-child { text-decoration: underline; text-decoration-style: dotted; } -.datetimestamp.has-tooltip > time { - cursor: default; +.text-with-tooltip > :first-child:hover, +.text-with-tooltip > :first-child.has-visible-tooltip { + text-decoration-style: wavy !important; } -.contribution.has-tooltip > a:hover, -.contribution.has-tooltip > a.has-visible-tooltip, -.datetimestamp.has-tooltip > time:hover, -.datetimestamp.has-tooltip > time.has-visible-tooltip { - text-decoration-style: wavy !important; +.text-with-tooltip.datetimestamp > :first-child { + cursor: default; } .tooltip { -- cgit 1.3.0-6-gf8a5