site_fursona_refs/html/main.js
2019-12-28 11:10:02 -03:00

151 lines
6.4 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];
if(image.artist == artist)
document.getElementById('list-'+key).classList.remove('nodisplay');
else
document.getElementById('list-'+key).classList.add('nodisplay');
}
}
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];
if((image.technology == tag) || (image.tags.indexOf(tag) >= 0))
document.getElementById('list-'+key).classList.remove('nodisplay');
else
document.getElementById('list-'+key).classList.add('nodisplay');
}
}
function resetAppState(skipScroll){
nestedElements.classList.remove('nodisplay');
listElements.classList.add('nodisplay');
filterNav.classList.add('nodisplay');
galleryBrowser.classList.add('nodisplay');
if(!skipScroll)
window.scrollTo(0, 0);
}
var clearFilters = ()=>{resetAppState(); window.history.back();}
var closeGallery = ()=>{resetAppState(true); closingGallery=true; window.history.back();}
!function onInit(){
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;
}();