refactor(ts/color): improve code style and change name of some variables for more clarity

This commit is contained in:
Jimmy Cai 2020-08-29 11:43:00 +02:00
parent 746537a801
commit 6b1e660327
4 changed files with 24 additions and 13 deletions

View File

@ -1,5 +1,5 @@
interface colorScheme { interface colorScheme {
key: string, /// Regenerate color scheme when the image is changed hash: string, /// Regenerate color scheme when the image hash is changed
DarkMuted: { DarkMuted: {
hex: string, hex: string,
rgb: Number[], rgb: Number[],
@ -23,12 +23,22 @@ if (localStorage.hasOwnProperty('StackColorsCache')) {
} }
} }
async function getColor(id: string, key: string, imageURL: string) { async function getColor(key: string, hash: string, imageURL: string) {
if (!id || !colorsCache.hasOwnProperty(id) || colorsCache[id].key !== key) { if (!key) {
/**
* If no key is provided, do not cache the result
*/
return await Vibrant.from(imageURL).getPalette();
}
if (!colorsCache.hasOwnProperty(key) || colorsCache[key].hash !== hash) {
/**
* If key is provided, but not found in cache, or the hash mismatches => Regenerate color scheme
*/
const palette = await Vibrant.from(imageURL).getPalette(); const palette = await Vibrant.from(imageURL).getPalette();
colorsCache[id] = { colorsCache[key] = {
key: key, hash: hash,
Vibrant: { Vibrant: {
hex: palette.Vibrant.hex, hex: palette.Vibrant.hex,
rgb: palette.Vibrant.rgb, rgb: palette.Vibrant.rgb,
@ -41,10 +51,11 @@ async function getColor(id: string, key: string, imageURL: string) {
} }
} }
/* Save the result in localStorage */
localStorage.setItem('StackColorsCache', JSON.stringify(colorsCache)); localStorage.setItem('StackColorsCache', JSON.stringify(colorsCache));
} }
return colorsCache[id]; return colorsCache[key];
} }
export { export {

View File

@ -26,10 +26,10 @@ let Stack = {
*/ */
document.querySelectorAll('.color-tag').forEach(async (tag: HTMLLinkElement) => { document.querySelectorAll('.color-tag').forEach(async (tag: HTMLLinkElement) => {
const imageURL = tag.getAttribute('data-image'), const imageURL = tag.getAttribute('data-image'),
id = tag.getAttribute('data-id'), key = tag.getAttribute('data-key'),
key = tag.getAttribute('data-key'); hash = tag.getAttribute('data-hash');
const colors = await getColor(id, key, imageURL); const colors = await getColor(key, hash, imageURL);
tag.style.color = colors.Vibrant.bodyTextColor; tag.style.color = colors.Vibrant.bodyTextColor;
tag.style.background = colors.Vibrant.hex; tag.style.background = colors.Vibrant.hex;
@ -49,11 +49,11 @@ let Stack = {
articles.forEach(async articles => { articles.forEach(async articles => {
const image = articles.querySelector('img'), const image = articles.querySelector('img'),
imageURL = image.src, imageURL = image.src,
id = image.getAttribute('data-id'),
key = image.getAttribute('data-key'), key = image.getAttribute('data-key'),
hash = image.getAttribute('data-hash'),
articleDetails: HTMLDivElement = articles.querySelector('.article-details'); articleDetails: HTMLDivElement = articles.querySelector('.article-details');
const colors = await getColor(id, key, imageURL); const colors = await getColor(key, hash, imageURL);
articleDetails.style.background = ` articleDetails.style.background = `
linear-gradient(0deg, linear-gradient(0deg,

View File

@ -5,7 +5,7 @@
{{- $thumbnail := $image.Fill .size -}} {{- $thumbnail := $image.Fill .size -}}
<div class="article-image"> <div class="article-image">
<img src="{{ $thumbnail.RelPermalink }}" width="{{ $thumbnail.Width }}" height="{{ $thumbnail.Height }}" <img src="{{ $thumbnail.RelPermalink }}" width="{{ $thumbnail.Width }}" height="{{ $thumbnail.Height }}"
loading="lazy" data-id="{{ .context.Slug }}" data-key="{{ $image.Data.Integrity }}"> loading="lazy" data-key="{{ .context.Slug }}" data-hash="{{ $image.Data.Integrity }}">
</div> </div>
{{ end }} {{ end }}

View File

@ -9,7 +9,7 @@
{{- $image := partial "helper/image" $context | resources.Fingerprint "md5" -}} {{- $image := partial "helper/image" $context | resources.Fingerprint "md5" -}}
{{- $20x := $image.Fill "20x20 smart" -}} {{- $20x := $image.Fill "20x20 smart" -}}
<a href="/categories/{{ . | urlize }}" class="color-tag" <a href="/categories/{{ . | urlize }}" class="color-tag"
data-image="{{ $20x.RelPermalink }}" data-id="{{ $context.Slug }}" data-key="{{ $image.Data.Integrity }}">{{ . | humanize }}</a> data-image="{{ $20x.RelPermalink }}" data-key="{{ $context.Slug }}" data-hash="{{ $image.Data.Integrity }}">{{ . | humanize }}</a>
{{ else }} {{ else }}
<a href="/categories/{{ . | urlize }}">{{ . | humanize }}</a> <a href="/categories/{{ . | urlize }}">{{ . | humanize }}</a>
{{ end }} {{ end }}