diff options
| -rw-r--r-- | common/common.js | 21 | ||||
| -rw-r--r-- | static/client.js | 15 | ||||
| -rwxr-xr-x | upd8.js | 87 |
3 files changed, 71 insertions, 52 deletions
diff --git a/common/common.js b/common/common.js index 56ee7b3..165e0f6 100644 --- a/common/common.js +++ b/common/common.js @@ -117,7 +117,26 @@ const C = { (artist.flashes ? artist.flashes.asContributor.length : 0) ), - getArtistCommentary: (artist, {justEverythingMan}) => justEverythingMan.filter(thing => thing.commentary && thing.commentary.replace(/<\/?b>/g, '').includes('<i>' + artist.name + ':</i>')) + getArtistCommentary: (artist, {justEverythingMan}) => justEverythingMan.filter(thing => thing.commentary && thing.commentary.replace(/<\/?b>/g, '').includes('<i>' + artist.name + ':</i>')), + + // Graciously stolen from https://stackoverflow.com/a/54071699! ::::) + // in: r,g,b in [0,1], out: h in [0,360) and s,l in [0,1] + rgb2hsl: (r,g,b) => { + let a=Math.max(r,g,b), n=a-Math.min(r,g,b), f=(1-Math.abs(a+a-n-1)); + let h= n && ((a==r) ? (g-b)/n : ((a==g) ? 2+(b-r)/n : 4+(r-g)/n)); + return [60*(h<0?h+6:h), f ? n/f : 0, (a+a-n)/2]; + }, + + getColors: primary => { + const [ r, g, b ] = primary.slice(1) + .match(/[0-9a-fA-F]{2,2}/g) + .slice(0, 3) + .map(val => parseInt(val, 16) / 255); + const [ h, s, l ] = C.rgb2hsl(r, g, b); + const dim = `hsl(${Math.round(h)}deg, ${Math.round(s * 50)}%, ${Math.round(l * 80)}%)`; + + return {primary, dim}; + } }; if (typeof module === 'object') { diff --git a/static/client.js b/static/client.js index 60bf62b..a4fb824 100644 --- a/static/client.js +++ b/static/client.js @@ -177,11 +177,16 @@ const HIDE_HOVER_DELAY = 250; let fastHover = false; let endFastHoverTimeout = null; -function link(a, type, {name, directory, color}) { +function colorLink(a, color) { if (color) { - a.style.setProperty('--primary-color', color); + const { primary, dim } = C.getColors(color); + a.style.setProperty('--primary-color', primary); + a.style.setProperty('--dim-color', dim); } +} +function link(a, type, {name, directory, color}) { + colorLink(a, color); a.innerText = name a.href = getLinkHref(type, directory); } @@ -227,7 +232,11 @@ const infoCard = (() => { link(albumLink, 'album', data.links.album); const img = container.querySelector('.info-card-art'); - img.src = rebase(data.cover.path, 'rebaseMedia'); + img.src = rebase(data.cover.paths.small, 'rebaseMedia'); + + const imgLink = container.querySelector('.info-card-art-container a'); + colorLink(imgLink, data.color); + imgLink.href = rebase(data.cover.paths.original, 'rebaseMedia'); }); } diff --git a/upd8.js b/upd8.js index 70fc89e..db6f04c 100755 --- a/upd8.js +++ b/upd8.js @@ -2103,6 +2103,14 @@ function img({ } } +function serializeImagePaths(original) { + return { + original, + medium: thumb.medium(original), + small: thumb.small(original) + }; +} + function serializeLink(thing) { return Object.fromEntries([ ['name', thing.name], @@ -2403,6 +2411,7 @@ writePage.html = (pageFn, {paths, strings, to}) => { ${img({ class: 'info-card-art', src: '', + link: true, square: true })} </div> @@ -3096,26 +3105,30 @@ function writeTrackPage(track) { const data = { type: 'data', path: ['track', track.directory], - data: () => ({ - name: track.name, - directory: track.directory, - date: track.date, - duration: track.duration, - color: track.color, - cover: { - path: getTrackCover(track, { - to: urls.from('media.root').to - }) - }, - 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: () => { + 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) + } + }; + } }; // const page = ({strings, writePage}) => writePage('track', track.directory, ({to}) => ({ @@ -4932,39 +4945,17 @@ function getArtistString(artists, {strings, to, showIcons = false, showContrib = })); } -// Graciously stolen from https://stackoverflow.com/a/54071699! ::::) -// in: r,g,b in [0,1], out: h in [0,360) and s,l in [0,1] -function rgb2hsl(r,g,b) { - let a=Math.max(r,g,b), n=a-Math.min(r,g,b), f=(1-Math.abs(a+a-n-1)); - let h= n && ((a==r) ? (g-b)/n : ((a==g) ? 2+(b-r)/n : 4+(r-g)/n)); - return [60*(h<0?h+6:h), f ? n/f : 0, (a+a-n)/2]; -} - -function getColorVariables(color) { - if (!color) { - color = wikiInfo.color; - } - - const [ r, g, b ] = color.slice(1) - .match(/[0-9a-fA-F]{2,2}/g) - .slice(0, 3) - .map(val => parseInt(val, 16) / 255); - const [ h, s, l ] = rgb2hsl(r, g, b); - const dim = `hsl(${Math.round(h)}deg, ${Math.round(s * 50)}%, ${Math.round(l * 80)}%)`; - - return [ - `--primary-color: ${color}`, - `--dim-color: ${dim}` - ]; -} - function getLinkThemeString(thing) { - return getColorVariables(thing.color).join('; '); + const { primary, dim } = C.getColors(thing.color || wikiInfo.color); + return `--primary-color: ${primary}; --dim-color: ${dim}`; } function getThemeString(thing, additionalVariables = []) { + const { primary, dim } = C.getColors(thing.color || wikiInfo.color); + const variables = [ - ...getColorVariables(thing.color), + `--primary-color: ${primary}`, + `--dim-color: ${dim}`, ...additionalVariables ].filter(Boolean); |