151 lines
6.4 KiB
JavaScript
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;
|
|
}();
|