diff options
Diffstat (limited to 'src/content')
7 files changed, 180 insertions, 182 deletions
diff --git a/src/content/dependencies/generateContributionList.js b/src/content/dependencies/generateContributionList.js index b52afc6e..f22740b0 100644 --- a/src/content/dependencies/generateContributionList.js +++ b/src/content/dependencies/generateContributionList.js @@ -16,10 +16,9 @@ export default { .map(contributionLink => html.tag('li', contributionLink.slots({ - showIcons: true, + showExternalLinks: true, showContribution: true, showChronology: true, preventWrapping: false, - iconMode: 'tooltip', })))), }; diff --git a/src/content/dependencies/generateContributionTooltip.js b/src/content/dependencies/generateContributionTooltip.js new file mode 100644 index 00000000..c4df875c --- /dev/null +++ b/src/content/dependencies/generateContributionTooltip.js @@ -0,0 +1,42 @@ +export default { + contentDependencies: [ + 'generateContributionTooltipChronologySection', + 'generateContributionTooltipExternalLinkSection', + 'generateTooltip', + ], + + extraDependencies: ['html'], + + relations: (relation, contribution) => ({ + tooltip: + relation('generateTooltip'), + + externalLinkSection: + relation('generateContributionTooltipExternalLinkSection', contribution), + + chronologySection: + relation('generateContributionTooltipChronologySection', contribution), + }), + + slots: { + showExternalLinks: {type: 'boolean'}, + showChronology: {type: 'boolean'}, + }, + + generate: (relations, slots, {html}) => + relations.tooltip.slots({ + attributes: + {class: ['icons', 'icons-tooltip']}, + + contentAttributes: + {[html.joinChildren]: ''}, + + content: [ + slots.showExternalLinks && + relations.externalLinkSection, + + slots.showChronology && + relations.chronologySection, + ], + }), +}; diff --git a/src/content/dependencies/generateContributionTooltipChronologySection.js b/src/content/dependencies/generateContributionTooltipChronologySection.js new file mode 100644 index 00000000..85b19be9 --- /dev/null +++ b/src/content/dependencies/generateContributionTooltipChronologySection.js @@ -0,0 +1,51 @@ +export default { + contentDependencies: ['linkAnythingMan'], + extraDependencies: ['html', 'language'], + + query(contribution) { + let previous = contribution; + while (previous && previous.thing === contribution.thing) { + previous = previous.previousBySameArtist; + } + + let next = contribution; + while (next && next.thing === contribution.thing) { + next = next.nextBySameArtist; + } + + return {previous, next}; + }, + + relations: (relation, query, _contribution) => ({ + previousLink: + (query.previous + ? relation('linkAnythingMan', query.previous.thing) + : null), + + nextLink: + (query.next + ? relation('linkAnythingMan', query.next.thing) + : null), + }), + + generate: (relations, {html, language}) => + language.encapsulate('misc.artistLink.chronology', capsule => [ + html.tag('span', {class: 'chronology-link'}, + {[html.onlyIfContent]: true}, + + language.$(capsule, 'previous', { + [language.onlyIfOptions]: ['thing'], + + thing: relations.previousLink, + })), + + html.tag('span', {class: 'chronology-link'}, + {[html.onlyIfContent]: true}, + + language.$(capsule, 'next', { + [language.onlyIfOptions]: ['thing'], + + thing: relations.nextLink, + })), + ]), +}; diff --git a/src/content/dependencies/generateContributionTooltipExternalLinkSection.js b/src/content/dependencies/generateContributionTooltipExternalLinkSection.js new file mode 100644 index 00000000..3a124412 --- /dev/null +++ b/src/content/dependencies/generateContributionTooltipExternalLinkSection.js @@ -0,0 +1,48 @@ +import {stitchArrays} from '#sugar'; + +export default { + contentDependencies: ['linkExternalAsIcon'], + extraDependencies: ['html', 'language'], + + relations: (relation, contribution) => ({ + artistIcons: + contribution.artist.urls + .map(url => relation('linkExternalAsIcon', url)), + }), + + data: (contribution) => ({ + urls: contribution.artist.urls, + }), + + generate: (data, relations, {html, language}) => + language.encapsulate('misc.artistLink', capsule => + stitchArrays({ + icon: relations.artistIcons, + url: data.urls, + }).map(({icon, url}) => { + icon.setSlots({ + context: 'artist', + }); + + let platformText = + language.formatExternalLink(url, { + context: 'artist', + style: 'platform', + }); + + // This is a pretty ridiculous hack, but we currently + // don't have a way of telling formatExternalLink to *not* + // use the fallback string, which just formats the URL as + // its host/domain... so is technically detectable. + if (platformText.toString() === (new URL(url)).host) { + platformText = + language.$(capsule, 'noExternalLinkPlatformName'); + } + + const platformSpan = + html.tag('span', {class: 'icon-platform'}, + platformText); + + return [icon, platformSpan]; + })), +}; diff --git a/src/content/dependencies/generateReleaseInfoContributionsLine.js b/src/content/dependencies/generateReleaseInfoContributionsLine.js index 3aa51127..ed60886b 100644 --- a/src/content/dependencies/generateReleaseInfoContributionsLine.js +++ b/src/content/dependencies/generateReleaseInfoContributionsLine.js @@ -20,7 +20,7 @@ export default { stringKey: {type: 'string'}, showContribution: {type: 'boolean', default: true}, - showIcons: {type: 'boolean', default: true}, + showExternalLinks: {type: 'boolean', default: true}, showChronology: {type: 'boolean', default: true}, }, @@ -34,10 +34,9 @@ export default { language.formatConjunctionList( relations.contributionLinks.map(link => link.slots({ - showIcons: slots.showIcons, showContribution: slots.showContribution, + showExternalLinks: slots.showExternalLinks, showChronology: slots.showChronology, - iconMode: 'tooltip', }))), }); }, diff --git a/src/content/dependencies/generateTrackList.js b/src/content/dependencies/generateTrackList.js index bc3b6035..7c3b11c1 100644 --- a/src/content/dependencies/generateTrackList.js +++ b/src/content/dependencies/generateTrackList.js @@ -17,12 +17,7 @@ export default { .map(contrib => relation('linkContribution', contrib))), }), - slots: { - showContribution: {type: 'boolean', default: false}, - showIcons: {type: 'boolean', default: false}, - }, - - generate: (relations, slots, {html, language}) => + generate: (relations, {html, language}) => html.tag('ul', {[html.onlyIfContent]: true}, @@ -42,12 +37,7 @@ export default { html.metatag('chunkwrap', {split: ','}, language.$(itemCapsule, 'withArtists.by', { artists: - language.formatConjunctionList( - contributionLinks.map(link => - link.slots({ - showContribution: slots.showContribution, - showIcons: slots.showIcons, - }))), + language.formatConjunctionList(contributionLinks), }))); } diff --git a/src/content/dependencies/linkContribution.js b/src/content/dependencies/linkContribution.js index 4e1c8977..67a50e5b 100644 --- a/src/content/dependencies/linkContribution.js +++ b/src/content/dependencies/linkContribution.js @@ -1,148 +1,48 @@ -import {empty, stitchArrays} from '#sugar'; - export default { contentDependencies: [ + 'generateContributionTooltip', 'generateTextWithTooltip', - 'generateTooltip', 'linkArtist', - 'linkAnythingMan', - 'linkExternalAsIcon', ], extraDependencies: ['html', 'language'], - relations(relation, contribution) { - const relations = {}; - - relations.artistLink = - relation('linkArtist', contribution.artist); - - relations.textWithTooltip = - relation('generateTextWithTooltip'); - - relations.tooltip = - relation('generateTooltip'); - - let previous = contribution; - while (previous && previous.thing === contribution.thing) { - previous = previous.previousBySameArtist; - } - - let next = contribution; - while (next && next.thing === contribution.thing) { - next = next.nextBySameArtist; - } - - if (previous) { - relations.previousLink = - relation('linkAnythingMan', previous.thing); - } - - if (next) { - relations.nextLink = - relation('linkAnythingMan', next.thing); - } + relations: (relation, contribution) => ({ + artistLink: + relation('linkArtist', contribution.artist), - if (!empty(contribution.artist.urls)) { - relations.artistIcons = - contribution.artist.urls - .map(url => relation('linkExternalAsIcon', url)); - } + textWithTooltip: + relation('generateTextWithTooltip'), - return relations; - }, + tooltip: + relation('generateContributionTooltip', contribution), + }), - data(contribution) { - return { - contribution: contribution.annotation, - urls: contribution.artist.urls, - }; - }, + data: (contribution) => ({ + contribution: contribution.annotation, + urls: contribution.artist.urls, + }), slots: { showContribution: {type: 'boolean', default: false}, - showIcons: {type: 'boolean', default: false}, + showExternalLinks: {type: 'boolean', default: false}, showChronology: {type: 'boolean', default: false}, - preventWrapping: {type: 'boolean', default: true}, - iconMode: { - validate: v => v.is('inline', 'tooltip'), - default: 'inline' - }, + preventWrapping: {type: 'boolean', default: true}, }, - generate(data, relations, slots, {html, language}) { - const capsule = language.encapsulate('misc.artistLink'); - - const hasContribution = !!(slots.showContribution && data.contribution); - const hasExternalIcons = !!(slots.showIcons && relations.artistIcons); - - const parts = ['misc.artistLink']; - const options = {}; - - const tooltipContent = []; - - if (hasExternalIcons && slots.iconMode === 'tooltip') { - tooltipContent.push( - stitchArrays({ - icon: relations.artistIcons, - url: data.urls, - }).map(({icon, url}) => { - icon.setSlots({ - context: 'artist', - }); + generate: (data, relations, slots, {html, language}) => + html.tag('span', {class: 'contribution'}, + {[html.noEdgeWhitespace]: true}, - let platformText = - language.formatExternalLink(url, { - context: 'artist', - style: 'platform', - }); + slots.preventWrapping && + {class: 'nowrap'}, - // This is a pretty ridiculous hack, but we currently - // don't have a way of telling formatExternalLink to *not* - // use the fallback string, which just formats the URL as - // its host/domain... so is technically detectable. - if (platformText.toString() === (new URL(url)).host) { - platformText = - language.$(capsule, 'noExternalLinkPlatformName'); - } + language.encapsulate('misc.artistLink', workingCapsule => { + const workingOptions = {}; - const platformSpan = - html.tag('span', {class: 'icon-platform'}, - platformText); - - return [icon, platformSpan]; - })); - } - - if (slots.showChronology) { - tooltipContent.push( - language.encapsulate(capsule, 'chronology', capsule => [ - html.tag('span', {class: 'chronology-link'}, - {[html.onlyIfContent]: true}, - - language.$(capsule, 'previous', { - [language.onlyIfOptions]: ['thing'], - - thing: relations.previousLink, - })), - - html.tag('span', {class: 'chronology-link'}, - {[html.onlyIfContent]: true}, - - language.$(capsule, 'next', { - [language.onlyIfOptions]: ['thing'], - - thing: relations.nextLink, - })), - ])); - } - - // TODO: It probably shouldn't be necessary to do an isBlank call here. - options.artist = - (html.isBlank(tooltipContent) - ? relations.artistLink - : relations.textWithTooltip.slots({ + workingOptions.artist = + relations.textWithTooltip.slots({ customInteractionCue: true, text: @@ -152,48 +52,17 @@ export default { tooltip: relations.tooltip.slots({ - attributes: - {class: ['icons', 'icons-tooltip']}, - - contentAttributes: - {[html.joinChildren]: ''}, - - content: - tooltipContent, + showExternalLinks: slots.showExternalLinks, + showChronology: slots.showChronology, }), - })); - - if (hasContribution) { - parts.push('withContribution'); - options.contrib = data.contribution; - } - - if (hasExternalIcons && slots.iconMode === 'inline') { - parts.push('withExternalLinks'); - options.links = - html.tag('span', {class: ['icons', 'icons-inline']}, - {[html.noEdgeWhitespace]: true}, - language.formatUnitList( - relations.artistIcons - .slice(0, 4) - .map(icon => icon.slot('context', 'artist')))); - } + }); - const contributionPart = - language.formatString(...parts, options); + if (slots.showContribution && data.contribution) { + workingCapsule += '.withContribution'; + workingOptions.contrib = + data.contribution; + } - if (!hasContribution && !hasExternalIcons) { - return contributionPart; - } - - return ( - html.tag('span', {class: 'contribution'}, - {[html.noEdgeWhitespace]: true}, - - parts.length > 1 && - slots.preventWrapping && - {class: 'nowrap'}, - - contributionPart)); - }, + return language.formatString(workingCapsule, workingOptions); + })), }; |