274 lines
12 KiB
JavaScript
274 lines
12 KiB
JavaScript
var nullFunc = ()=>{};
|
|
var poppingState = false;
|
|
var closingGallery = false;
|
|
function onPopState(event){
|
|
resetAppState();
|
|
var hash = event.target.location.hash;
|
|
poppingState = true;
|
|
if(hash.startsWith('#js:'))
|
|
eval(decodeURIComponent(hash.substr(4)));
|
|
poppingState = false;
|
|
closingGallery = false;
|
|
}
|
|
|
|
window.onpopstate = onPopState
|
|
var imgQualities = {
|
|
'thumb': imgs_thumb,
|
|
'small': imgs_small,
|
|
'dcent': imgs_dcent,
|
|
'large': imgs_large,
|
|
'full': imgs_full
|
|
}
|
|
var qualityName = {
|
|
'thumb': 'Thumbnail',
|
|
'small': 'Small',
|
|
'dcent': 'Decent',
|
|
'large': 'Large',
|
|
'full': 'Full'
|
|
}
|
|
|
|
function formatFileSize(bytecount){
|
|
units = ['B', 'KB', 'MB', 'GB', 'TB'];
|
|
magnitude = 0;
|
|
while(bytecount>=2048){
|
|
bytecount/=1024;
|
|
magnitude++;
|
|
}
|
|
bytecount = Math.round(bytecount*10)/10;
|
|
return `${bytecount} ${units[magnitude]}`;
|
|
}
|
|
|
|
function openGallery(image, quality){
|
|
if(closingGallery){setTimeout(closeGallery, 50); return;}
|
|
if(typeof(quality)==typeof(undefined)) quality = 'dcent';
|
|
if(!poppingState)
|
|
window.history.pushState(null, document.title,
|
|
`#js:openGallery(${encodeURIComponent(JSON.stringify(image))}, ${encodeURIComponent(JSON.stringify(quality))})`
|
|
);
|
|
galleryBrowser.classList.remove('nodisplay');
|
|
item = images[image];
|
|
img = imgQualities[quality][image];
|
|
galleryImage.style.backgroundImage = `url('./${img}')`;
|
|
// Qualities highlight
|
|
if(quality=='thumb') qualityThumb.style.background = "#619A3588";
|
|
else qualityThumb.style.background = null;
|
|
if(quality=='small') qualitySmall.style.background = "#619A3588";
|
|
else qualitySmall.style.background = null;
|
|
if(quality=='dcent') qualityDcent.style.background = "#619A3588";
|
|
else qualityDcent.style.background = null;
|
|
if(quality=='large') qualityLarge.style.background = "#619A3588";
|
|
else qualityLarge.style.background = null;
|
|
if(quality=='full') qualityFull.style.background = "#619A3588";
|
|
else qualityFull.style.background = null;
|
|
// Set callback
|
|
seeThumb.setAttribute('onclick', `openGallery(${JSON.stringify(image)}, 'thumb')`);
|
|
seeSmall.setAttribute('onclick', `openGallery(${JSON.stringify(image)}, 'small')`);
|
|
seeDcent.setAttribute('onclick', `openGallery(${JSON.stringify(image)}, 'dcent')`);
|
|
seeLarge.setAttribute('onclick', `openGallery(${JSON.stringify(image)}, 'large')`);
|
|
seeFull.setAttribute('onclick', `openGallery(${JSON.stringify(image)}, 'full')`);
|
|
// Set download targets
|
|
downloadThumb.href = './' + imgQualities['thumb'][image];
|
|
downloadSmall.href = './' + imgQualities['small'][image];
|
|
downloadDcent.href = './' + imgQualities['dcent'][image];
|
|
downloadLarge.href = './' + imgQualities['large'][image];
|
|
downloadFull.href = './' + imgQualities['full'][image];
|
|
// Set download names
|
|
downloadThumb.setAttribute('download', `${name} - ${image} - ${artists[item.artist].name} - ${item.date.join('-')} (${qualityName['thumb']}).${formats[image]['thumb']}`);
|
|
downloadSmall.setAttribute('download', `${name} - ${image} - ${artists[item.artist].name} - ${item.date.join('-')} (${qualityName['small']}).${formats[image]['small']}`);
|
|
downloadDcent.setAttribute('download', `${name} - ${image} - ${artists[item.artist].name} - ${item.date.join('-')} (${qualityName['dcent']}).${formats[image]['dcent']}`);
|
|
downloadLarge.setAttribute('download', `${name} - ${image} - ${artists[item.artist].name} - ${item.date.join('-')} (${qualityName['large']}).${formats[image]['large']}`);
|
|
downloadFull.setAttribute('download', `${name} - ${image} - ${artists[item.artist].name} - ${item.date.join('-')} (${qualityName['full']}).${formats[image]['full']}`);
|
|
// Set image sizes
|
|
sizeThumb.innerText = `(${formatFileSize(sizes[image]['thumb'])}) - ${formats[image]['thumb']}`;
|
|
sizeSmall.innerText = `(${formatFileSize(sizes[image]['small'])}) - ${formats[image]['small']}`;
|
|
sizeDcent.innerText = `(${formatFileSize(sizes[image]['dcent'])}) - ${formats[image]['dcent']}`;
|
|
sizeLarge.innerText = `(${formatFileSize(sizes[image]['large'])}) - ${formats[image]['large']}`;
|
|
sizeFull.innerText = `(${formatFileSize(sizes[image]['full'])}) - ${formats[image]['full']}`;
|
|
}
|
|
|
|
function filterArtist(artist){
|
|
resetAppState();
|
|
if(!poppingState)
|
|
window.history.pushState(null, document.title,
|
|
`#js:filterArtist(${encodeURIComponent(JSON.stringify(artist))})`
|
|
);
|
|
nestedElements.classList.add('nodisplay');
|
|
listElements.classList.remove('nodisplay');
|
|
filterNav.classList.remove('nodisplay');
|
|
var item = artists[artist];
|
|
filterIcon.className = "fa fa-user";
|
|
filterText.innerText = item.name;
|
|
for(var key in images){
|
|
image = images[key];
|
|
var hideable_row = document.getElementById('row_'+key);
|
|
console.log(hideable_row, 'row_'+key)
|
|
if(image.artist == artist){
|
|
document.getElementById('list-'+key).classList.remove('nodisplay');
|
|
if(hideable_row!==null) hideable_row.classList.remove('nodisplay');
|
|
}else{
|
|
document.getElementById('list-'+key).classList.add('nodisplay');
|
|
if(hideable_row!==null) hideable_row.classList.add('nodisplay');
|
|
}
|
|
}
|
|
updateColorPaletteAverage();
|
|
}
|
|
|
|
function filterTag(tag){
|
|
resetAppState();
|
|
if(!poppingState)
|
|
window.history.pushState(null, document.title,
|
|
`#js:filterTag(${encodeURIComponent(JSON.stringify(tag))})`
|
|
);
|
|
nestedElements.classList.add('nodisplay');
|
|
listElements.classList.remove('nodisplay');
|
|
filterNav.classList.remove('nodisplay');
|
|
var item = tags[tag];
|
|
filterIcon.className = "fa fa-"+item.icon;
|
|
filterText.innerText = item.name;
|
|
for(var key in images){
|
|
image = images[key];
|
|
var hideable_row = document.getElementById('row_'+key);
|
|
if((image.technology == tag) || (image.tags.indexOf(tag) >= 0)){
|
|
document.getElementById('list-'+key).classList.remove('nodisplay');
|
|
if(hideable_row!==null) hideable_row.classList.remove('nodisplay');
|
|
}else{
|
|
document.getElementById('list-'+key).classList.add('nodisplay');
|
|
if(hideable_row!==null) hideable_row.classList.add('nodisplay');
|
|
}
|
|
}
|
|
updateColorPaletteAverage();
|
|
}
|
|
|
|
function resetAppState(skipScroll){
|
|
nestedElements.classList.remove('nodisplay');
|
|
listElements.classList.add('nodisplay');
|
|
filterNav.classList.add('nodisplay');
|
|
galleryBrowser.classList.add('nodisplay');
|
|
for(var item of Array.from(document.querySelectorAll('#colorAccuracy tr.hideablePaletteItem')))
|
|
item.classList.remove('nodisplay');
|
|
updateColorPaletteAverage();
|
|
if(!skipScroll)
|
|
window.scrollTo(0, 0);
|
|
}
|
|
|
|
var clearFilters = ()=>{resetAppState(); window.history.back();};
|
|
var closeGallery = ()=>{resetAppState(true); closingGallery=true; window.history.back();};
|
|
|
|
var parseHexColor = x=>/^#([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/.exec(x).slice(1).map(i=>parseInt(i, 16));
|
|
var toHexColor = l=>'#'+(l.map(i=>('0'+i.toString(16)).slice(-2)));
|
|
var zip = (...rows) => [...rows[0]].map((_,c) => rows.map(row => row[c]));
|
|
var euclideanDistance2 = (a1, a2) => zip(a1, a2).map(x=>x[0]-x[1]).map(x=>x*x).reduce((a,v)=>a+v, 0);
|
|
var euclideanDistance = (a1, a2) => Math.sqrt(euclideanDistance2(a1, a2));
|
|
|
|
function inflateFontAwesome(icon){
|
|
var fa = document.createElement('i');
|
|
fa.setAttribute('class', `fa fa-${icon}`);
|
|
fa.setAttribute('aria-hidden', 'true');
|
|
return fa;
|
|
}
|
|
|
|
function round(number, digits){
|
|
if(digits===undefined) digits=0;
|
|
var factor = Math.pow(10, digits);
|
|
return Math.round(number*factor)/factor;
|
|
}
|
|
|
|
function colorSimilarity(color1, color2){
|
|
var c1 = parseHexColor(color1).map(x=>x/255);
|
|
var c2 = parseHexColor(color2).map(x=>x/255);
|
|
return 1-(euclideanDistance(c1, c2)/Math.sqrt(3));
|
|
}
|
|
|
|
function updateColorPaletteAverage(){
|
|
var fields = Array.from(document.querySelectorAll('#row_avg td'));
|
|
for(var fld of fields){
|
|
fld.setAttribute("class", "clr_"+fld.id.slice(8));
|
|
fld.setAttribute("title", "");
|
|
fld.style.background = null;
|
|
while(fld.firstChild) fld.firstChild.remove();
|
|
}
|
|
var relevantColors = new Object();
|
|
for(var idx in images){
|
|
var image = images[idx];
|
|
|
|
}
|
|
}
|
|
|
|
function fillStaticPartOfColorPalette(){
|
|
//bodyparts => Display names for body parts
|
|
//canonical_colors => "Right" colors
|
|
var basecolors = color_list.slice(0, color_repeated[false]);
|
|
var deviatedcolors = color_list.slice(color_repeated[false]);
|
|
for(var color of basecolors){
|
|
var canonical = canonical_colors[color].color;
|
|
for(var imgid in images){
|
|
var image = images[imgid];
|
|
var colordef = image.color[color];
|
|
if(colordef!==undefined){
|
|
var cell = `#colorAccuracy table #row_${imgid} .clr_${color}`;
|
|
cell = document.querySelector(cell);
|
|
while(cell.firstChild) cell.firstChild.remove();
|
|
var similarity = round(colorSimilarity(colordef.colorUsed, canonical)*100, 2);
|
|
cell.style.background = colordef.colorUsed;
|
|
cell.classList.add(colordef.colorIsLight ? 'blackText' : 'whiteText');
|
|
cell.appendChild(document.createTextNode(colordef.colorUsed));
|
|
cell.appendChild(document.createElement('br'));
|
|
cell.appendChild(document.createTextNode(`(${similarity}%)`));
|
|
cell.title = `${similarity}% similar to the ideal value`;
|
|
}
|
|
}
|
|
}
|
|
for(var color of deviatedcolors){
|
|
var canonical = canonical_colors[color].color;
|
|
for(var imgid in images){
|
|
var image = images[imgid];
|
|
var colordef = image.color[color];
|
|
if(colordef!==undefined){
|
|
var cell = `#colorAccuracy table #row_${imgid} .clr_${color}`;
|
|
cell = document.querySelector(cell);
|
|
while(cell.firstChild) cell.firstChild.remove();
|
|
if(colordef===null){
|
|
cell.appendChild(inflateFontAwesome('2x fa-times-circle'));
|
|
cell.title = 'This feature is missing on the artwork';
|
|
cell.classList.add('featureMissing');
|
|
}else{
|
|
var problem = (colordef.colorUsed != canonical);
|
|
cell.style.background = colordef.colorUsed;
|
|
cell.classList.add(colordef.colorIsLight ? 'blackText' : 'whiteText');
|
|
cell.appendChild(document.createTextNode(colordef.colorUsed));
|
|
cell.appendChild(document.createElement('br'));
|
|
cell.appendChild(inflateFontAwesome(problem ? 'warning' : 'info-circle'));
|
|
var title = '';
|
|
if(problem)
|
|
title = `Should have the same color as "${bodyparts[colordef.targetAppropriate]}"`;
|
|
else
|
|
title = `Same color as "${bodyparts[colordef.targetAppropriate]}"`;
|
|
var parent = image.color[colordef.targetAppropriate].colorUsed;
|
|
var sp = round(colorSimilarity(colordef.colorUsed, parent)*100, 2);
|
|
var sc = round(colorSimilarity(colordef.colorUsed, canonical)*100, 2);
|
|
title+='\n';
|
|
title+=`${sp}% similar to the one used as "${bodyparts[colordef.targetAppropriate]}"`;
|
|
title+='\n';
|
|
title+=`${sc}% similar to the ideal value`;
|
|
cell.title = title;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
inflateFontAwesome
|
|
}
|
|
|
|
!function onInit(){
|
|
colorAccuracyJSWall.classList.add('nodisplay');
|
|
colorAccuracyJSProtectedContent.classList.remove('nodisplay');
|
|
fillStaticPartOfColorPalette();
|
|
var hash = window.location.hash;
|
|
poppingState = true;
|
|
if(hash==='')
|
|
window.history.replaceState(null, document.title, '#');
|
|
else if(hash.startsWith('#js:'))
|
|
eval(decodeURIComponent(hash.substr(4)));
|
|
poppingState = false;
|
|
updateColorPaletteAverage();
|
|
}();
|