diff options
| -rw-r--r-- | src/content/dependencies/generateDatetimestampTemplate.js | 20 | ||||
| -rw-r--r-- | src/content/dependencies/generateTextWithTooltip.js | 47 | ||||
| -rw-r--r-- | src/content/dependencies/linkContribution.js | 78 | ||||
| -rw-r--r-- | src/static/client3.js | 22 | ||||
| -rw-r--r-- | src/static/site6.css | 18 | ||||
| -rw-r--r-- | tap-snapshots/test/snapshot/generateAlbumReleaseInfo.js.test.cjs | 8 | ||||
| -rw-r--r-- | tap-snapshots/test/snapshot/linkContribution.js.test.cjs | 94 |
7 files changed, 168 insertions, 119 deletions
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 { diff --git a/tap-snapshots/test/snapshot/generateAlbumReleaseInfo.js.test.cjs b/tap-snapshots/test/snapshot/generateAlbumReleaseInfo.js.test.cjs index 2874ac16..58f157ef 100644 --- a/tap-snapshots/test/snapshot/generateAlbumReleaseInfo.js.test.cjs +++ b/tap-snapshots/test/snapshot/generateAlbumReleaseInfo.js.test.cjs @@ -7,10 +7,10 @@ 'use strict' exports[`test/snapshot/generateAlbumReleaseInfo.js > TAP > generateAlbumReleaseInfo (snapshot) > basic behavior 1`] = ` <p> - By <span class="contribution nowrap"><a href="artist/toby-fox/">Toby Fox</a> (music probably)</span> and <span class="contribution has-tooltip nowrap"><a href="artist/tensei/">Tensei</a> (hot jams)<span class="icons tooltip icons-tooltip"><span class="tooltip-content"><a class="icon has-text" href="https://tenseimusic.bandcamp.com/"> - <svg><use href="static/icons.svg#icon-bandcamp"></use></svg> - <span class="icon-text">tenseimusic</span> - </a></span></span></span>. + By <span class="contribution nowrap"><a href="artist/toby-fox/">Toby Fox</a> (music probably)</span> and <span class="contribution nowrap"><span class="text-with-tooltip"><a href="artist/tensei/">Tensei</a><span class="tooltip icons icons-tooltip"><span class="tooltip-content"><a class="icon has-text" href="https://tenseimusic.bandcamp.com/"> + <svg><use href="static/icons.svg#icon-bandcamp"></use></svg> + <span class="icon-text">tenseimusic</span> + </a></span></span></span> (hot jams)</span>. <br> Cover art by <a href="artist/hb/">Hanni Brosh</a>. <br> diff --git a/tap-snapshots/test/snapshot/linkContribution.js.test.cjs b/tap-snapshots/test/snapshot/linkContribution.js.test.cjs index cc3e8ff9..4a1051f9 100644 --- a/tap-snapshots/test/snapshot/linkContribution.js.test.cjs +++ b/tap-snapshots/test/snapshot/linkContribution.js.test.cjs @@ -30,31 +30,31 @@ exports[`test/snapshot/linkContribution.js > TAP > linkContribution (snapshot) > ` exports[`test/snapshot/linkContribution.js > TAP > linkContribution (snapshot) > loads of links (tooltip) 1`] = ` -<span class="contribution has-tooltip"><a href="artist/lorem-ipsum-lover/">Lorem Ipsum Lover</a><span class="icons tooltip icons-tooltip"><span class="tooltip-content"><a class="icon has-text" href="https://loremipsum.io"> - <svg><use href="static/icons.svg#icon-globe"></use></svg> - <span class="icon-text">loremipsum.io</span> - </a><a class="icon has-text" href="https://loremipsum.io/generator/"> - <svg><use href="static/icons.svg#icon-globe"></use></svg> - <span class="icon-text">loremipsum.io</span> - </a><a class="icon has-text" href="https://loremipsum.io/#meaning"> - <svg><use href="static/icons.svg#icon-globe"></use></svg> - <span class="icon-text">loremipsum.io</span> - </a><a class="icon has-text" href="https://loremipsum.io/#usage-and-examples"> - <svg><use href="static/icons.svg#icon-globe"></use></svg> - <span class="icon-text">loremipsum.io</span> - </a><a class="icon has-text" href="https://loremipsum.io/#controversy"> - <svg><use href="static/icons.svg#icon-globe"></use></svg> - <span class="icon-text">loremipsum.io</span> - </a><a class="icon has-text" href="https://loremipsum.io/#when-to-use-lorem-ipsum"> - <svg><use href="static/icons.svg#icon-globe"></use></svg> - <span class="icon-text">loremipsum.io</span> - </a><a class="icon has-text" href="https://loremipsum.io/#lorem-ipsum-all-the-things"> - <svg><use href="static/icons.svg#icon-globe"></use></svg> - <span class="icon-text">loremipsum.io</span> - </a><a class="icon has-text" href="https://loremipsum.io/#original-source"> - <svg><use href="static/icons.svg#icon-globe"></use></svg> - <span class="icon-text">loremipsum.io</span> - </a></span></span></span> +<span class="contribution"><span class="text-with-tooltip"><a href="artist/lorem-ipsum-lover/">Lorem Ipsum Lover</a><span class="tooltip icons icons-tooltip"><span class="tooltip-content"><a class="icon has-text" href="https://loremipsum.io"> + <svg><use href="static/icons.svg#icon-globe"></use></svg> + <span class="icon-text">loremipsum.io</span> + </a><a class="icon has-text" href="https://loremipsum.io/generator/"> + <svg><use href="static/icons.svg#icon-globe"></use></svg> + <span class="icon-text">loremipsum.io</span> + </a><a class="icon has-text" href="https://loremipsum.io/#meaning"> + <svg><use href="static/icons.svg#icon-globe"></use></svg> + <span class="icon-text">loremipsum.io</span> + </a><a class="icon has-text" href="https://loremipsum.io/#usage-and-examples"> + <svg><use href="static/icons.svg#icon-globe"></use></svg> + <span class="icon-text">loremipsum.io</span> + </a><a class="icon has-text" href="https://loremipsum.io/#controversy"> + <svg><use href="static/icons.svg#icon-globe"></use></svg> + <span class="icon-text">loremipsum.io</span> + </a><a class="icon has-text" href="https://loremipsum.io/#when-to-use-lorem-ipsum"> + <svg><use href="static/icons.svg#icon-globe"></use></svg> + <span class="icon-text">loremipsum.io</span> + </a><a class="icon has-text" href="https://loremipsum.io/#lorem-ipsum-all-the-things"> + <svg><use href="static/icons.svg#icon-globe"></use></svg> + <span class="icon-text">loremipsum.io</span> + </a><a class="icon has-text" href="https://loremipsum.io/#original-source"> + <svg><use href="static/icons.svg#icon-globe"></use></svg> + <span class="icon-text">loremipsum.io</span> + </a></span></span></span></span> ` exports[`test/snapshot/linkContribution.js > TAP > linkContribution (snapshot) > no accents 1`] = ` @@ -112,18 +112,18 @@ exports[`test/snapshot/linkContribution.js > TAP > linkContribution (snapshot) > ` exports[`test/snapshot/linkContribution.js > TAP > linkContribution (snapshot) > only showIcons (tooltip) 1`] = ` -<span class="contribution has-tooltip"><a href="artist/clark-powell/">Clark Powell</a><span class="icons tooltip icons-tooltip"><span class="tooltip-content"><a class="icon has-text" href="https://soundcloud.com/plazmataz"> - <svg><use href="static/icons.svg#icon-soundcloud"></use></svg> - <span class="icon-text">plazmataz</span> - </a></span></span></span> +<span class="contribution"><span class="text-with-tooltip"><a href="artist/clark-powell/">Clark Powell</a><span class="tooltip icons icons-tooltip"><span class="tooltip-content"><a class="icon has-text" href="https://soundcloud.com/plazmataz"> + <svg><use href="static/icons.svg#icon-soundcloud"></use></svg> + <span class="icon-text">plazmataz</span> + </a></span></span></span></span> <span class="contribution nowrap"><a href="artist/the-big-baddies/">Grounder & Scratch</a> (Snooping)</span> -<span class="contribution has-tooltip nowrap"><a href="artist/toby-fox/">Toby Fox</a> (Arrangement)<span class="icons tooltip icons-tooltip"><span class="tooltip-content"><a class="icon has-text" href="https://tobyfox.bandcamp.com/"> - <svg><use href="static/icons.svg#icon-bandcamp"></use></svg> - <span class="icon-text">tobyfox</span> - </a><a class="icon has-text" href="https://toby.fox/"> - <svg><use href="static/icons.svg#icon-globe"></use></svg> - <span class="icon-text">toby.fox</span> - </a></span></span></span> +<span class="contribution nowrap"><span class="text-with-tooltip"><a href="artist/toby-fox/">Toby Fox</a><span class="tooltip icons icons-tooltip"><span class="tooltip-content"><a class="icon has-text" href="https://tobyfox.bandcamp.com/"> + <svg><use href="static/icons.svg#icon-bandcamp"></use></svg> + <span class="icon-text">tobyfox</span> + </a><a class="icon has-text" href="https://toby.fox/"> + <svg><use href="static/icons.svg#icon-globe"></use></svg> + <span class="icon-text">toby.fox</span> + </a></span></span></span> (Arrangement)</span> ` exports[`test/snapshot/linkContribution.js > TAP > linkContribution (snapshot) > showContribution & showIcons (inline) 1`] = ` @@ -148,16 +148,16 @@ exports[`test/snapshot/linkContribution.js > TAP > linkContribution (snapshot) > ` exports[`test/snapshot/linkContribution.js > TAP > linkContribution (snapshot) > showContribution & showIcons (tooltip) 1`] = ` -<span class="contribution has-tooltip"><a href="artist/clark-powell/">Clark Powell</a><span class="icons tooltip icons-tooltip"><span class="tooltip-content"><a class="icon has-text" href="https://soundcloud.com/plazmataz"> - <svg><use href="static/icons.svg#icon-soundcloud"></use></svg> - <span class="icon-text">plazmataz</span> - </a></span></span></span> +<span class="contribution"><span class="text-with-tooltip"><a href="artist/clark-powell/">Clark Powell</a><span class="tooltip icons icons-tooltip"><span class="tooltip-content"><a class="icon has-text" href="https://soundcloud.com/plazmataz"> + <svg><use href="static/icons.svg#icon-soundcloud"></use></svg> + <span class="icon-text">plazmataz</span> + </a></span></span></span></span> <span class="contribution nowrap"><a href="artist/the-big-baddies/">Grounder & Scratch</a> (Snooping)</span> -<span class="contribution has-tooltip nowrap"><a href="artist/toby-fox/">Toby Fox</a> (Arrangement)<span class="icons tooltip icons-tooltip"><span class="tooltip-content"><a class="icon has-text" href="https://tobyfox.bandcamp.com/"> - <svg><use href="static/icons.svg#icon-bandcamp"></use></svg> - <span class="icon-text">tobyfox</span> - </a><a class="icon has-text" href="https://toby.fox/"> - <svg><use href="static/icons.svg#icon-globe"></use></svg> - <span class="icon-text">toby.fox</span> - </a></span></span></span> +<span class="contribution nowrap"><span class="text-with-tooltip"><a href="artist/toby-fox/">Toby Fox</a><span class="tooltip icons icons-tooltip"><span class="tooltip-content"><a class="icon has-text" href="https://tobyfox.bandcamp.com/"> + <svg><use href="static/icons.svg#icon-bandcamp"></use></svg> + <span class="icon-text">tobyfox</span> + </a><a class="icon has-text" href="https://toby.fox/"> + <svg><use href="static/icons.svg#icon-globe"></use></svg> + <span class="icon-text">toby.fox</span> + </a></span></span></span> (Arrangement)</span> ` |