diff options
| -rw-r--r-- | static/client.js | 25 | ||||
| -rw-r--r-- | static/site.css | 3 | ||||
| -rwxr-xr-x | upd8.js | 84 |
3 files changed, 78 insertions, 34 deletions
diff --git a/static/client.js b/static/client.js index a4fb8243..b79539e4 100644 --- a/static/client.js +++ b/static/client.js @@ -231,12 +231,33 @@ const infoCard = (() => { const albumLink = container.querySelector('.info-card-album a'); link(albumLink, 'album', data.links.album); - const img = container.querySelector('.info-card-art'); + const [ containerNoReveal, containerReveal ] = [ + container.querySelector('.info-card-art-container.no-reveal'), + container.querySelector('.info-card-art-container.reveal') + ]; + + const [ containerShow, containerHide ] = (data.cover.warnings.length + ? [containerReveal, containerNoReveal] + : [containerNoReveal, containerReveal]); + + containerHide.style.display = 'none'; + containerShow.style.display = 'block'; + + const img = containerShow.querySelector('.info-card-art'); img.src = rebase(data.cover.paths.small, 'rebaseMedia'); - const imgLink = container.querySelector('.info-card-art-container a'); + const imgLink = containerShow.querySelector('a'); colorLink(imgLink, data.color); imgLink.href = rebase(data.cover.paths.original, 'rebaseMedia'); + + if (containerShow === containerReveal) { + // TODO: List localiz8tion? + const cw = containerShow.querySelector('.info-card-art-warnings'); + cw.innerText = data.cover.warnings.join(', '); + + const reveal = containerShow.querySelector('.reveal'); + reveal.classList.remove('revealed'); + } }); } diff --git a/static/site.css b/static/site.css index 83bddd37..d8d20dcc 100644 --- a/static/site.css +++ b/static/site.css @@ -795,6 +795,9 @@ li > ul { width: 40%; margin: 5px; font-size: 0.8em; + + /* Dynamically shown. */ + display: none; } .info-card-art-container .image-container { diff --git a/upd8.js b/upd8.js index db6f04ce..445ff8d7 100755 --- a/upd8.js +++ b/upd8.js @@ -2126,6 +2126,23 @@ function serializeContribs(contribs) { })); } +function serializeCover(thing, pathFunction) { + const coverPath = pathFunction(thing, { + to: urls.from('media.root').to + }); + + const { artTags } = thing; + + const cwTags = artTags.filter(tag => tag.isCW); + const linkTags = artTags.filter(tag => !tag.isCW); + + return { + paths: serializeImagePaths(coverPath), + tags: linkTags.map(serializeLink), + warnings: cwTags.map(tag => tag.name) + }; +} + function validateWritePath(path, urlGroup) { if (!Array.isArray(path)) { return {error: `Expected array, got ${path}`}; @@ -2407,7 +2424,7 @@ writePage.html = (pageFn, {paths, strings, to}) => { <div id="info-card-container"> <div class="info-card-decor"> <div class="info-card"> - <div class="info-card-art-container"> + <div class="info-card-art-container no-reveal"> ${img({ class: 'info-card-art', src: '', @@ -2415,6 +2432,15 @@ writePage.html = (pageFn, {paths, strings, to}) => { square: true })} </div> + <div class="info-card-art-container reveal"> + ${img({ + class: 'info-card-art', + src: '', + link: true, + square: true, + reveal: getRevealStringFromWarnings('<span class="info-card-art-warnings"></span>', {strings}) + })} + </div> <h1 class="info-card-name"><a></a></h1> <p class="info-card-album">${strings('releaseInfo.from', {album: '<a></a>'})}</p> </div> @@ -2519,7 +2545,7 @@ function getGridHTML({ thumb: 'small', lazy: (typeof lazy === 'number' ? i >= lazy : lazy), square: true, - reveal: getRevealString(item.artTags, {strings}) + reveal: getRevealStringFromTags(item.artTags, {strings}) })} <span>${item.name}</span> ${detailsFn && `<span>${detailsFn(item)}</span>`} @@ -2817,12 +2843,14 @@ function writeStaticPage(staticPage) { })); } -function getRevealString(tags, {strings}) { + +function getRevealStringFromWarnings(warnings, {strings}) { + return strings('misc.contentWarnings', {warnings}) + `<br><span class="reveal-interaction">${strings('misc.contentWarnings.reveal')}</span>` +} + +function getRevealStringFromTags(tags, {strings}) { return tags && tags.some(tag => tag.isCW) && ( - strings('misc.contentWarnings', { - warnings: tags.filter(tag => tag.isCW).map(tag => `<span class="reveal-tag">${tag.name}</span>`).join(', ') - }) + `<br><span class="reveal-interaction">${strings('misc.contentWarnings.reveal')}</span>` - ); + getRevealStringFromWarnings(tags.filter(tag => tag.isCW).map(tag => tag.name).join(', '), {strings})); } function generateCoverLink({ @@ -2840,7 +2868,7 @@ function generateCoverLink({ id: 'cover-art', link: true, square: true, - reveal: getRevealString(tags, {strings}) + reveal: getRevealStringFromTags(tags, {strings}) })} ${wikiInfo.features.artTagUI && tags.filter(tag => !tag.isCW).length && fixWS` <p class="tags"> @@ -3105,30 +3133,22 @@ function writeTrackPage(track) { const data = { type: 'data', path: ['track', track.directory], - data: () => { - const coverPath = getTrackCover(track, { - to: urls.from('media.root').to - }); - - return { - name: track.name, - directory: track.directory, - date: track.date, - duration: track.duration, - color: track.color, - cover: { - paths: serializeImagePaths(coverPath) - }, - links: { - artists: serializeContribs(track.artists), - contributors: serializeContribs(track.contributors), - album: serializeLink(track.album), - groups: track.album.groups.map(serializeLink), - references: track.references.map(serializeLink), - referencedBy: track.referencedBy.map(serializeLink) - } - }; - } + data: () => ({ + name: track.name, + directory: track.directory, + date: track.date, + duration: track.duration, + color: track.color, + cover: serializeCover(track, getTrackCover), + links: { + artists: serializeContribs(track.artists), + contributors: serializeContribs(track.contributors), + album: serializeLink(track.album), + groups: track.album.groups.map(serializeLink), + references: track.references.map(serializeLink), + referencedBy: track.referencedBy.map(serializeLink) + } + }) }; // const page = ({strings, writePage}) => writePage('track', track.directory, ({to}) => ({ |