Galleries/PythonGallery
1
0
Fork 0
mirror of https://github.com/Derpy-Leggies/OnlyLegs.git synced 2025-06-29 03:26:16 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add Notification js system

Browse source 
Load full image on first click of full resolution button
Change background image
Change way images load into the view
Add Lazy Loading
This commit is contained in:
Michał Gdula 2023-01-14 01:46:11 +00:00
parent a10a5a8793
commit 7605e5ab40
13 changed files with 214 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

69
gallery/templates/layout.html
View file

@ -9,7 +9,7 @@
</script>
</head>
<body>
<div class="notification-list"></div>
<div class="sniffle"></div>
<nav id="navRoot">
<div>
<a href="{{url_for('gallery.index')}}">
@ -84,7 +84,72 @@
}
function imgFade(obj) {
$(obj).fadeIn(621);
$(obj).animate({opacity: 1}, 500);
}
function addNotification(text='Sample notification', type=4) {
var container = document.querySelector('.sniffle');
// Create notification element
var div = document.createElement('div');
div.classList.add('sniffle__notification');
div.onclick = function() {
if (div.parentNode) {
div.style.opacity = 0;
div.style.transform = 'translateX(100%)';
setTimeout(function() {
container.removeChild(div);
}, 500);
}
};
// Create icon element and append to notification
var icon = document.createElement('span');
icon.classList.add('sniffle__notification-icon');
if (type == 1) {
div.classList.add('sniffle__notification--success');
icon.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="-5 -7 24 24" fill="currentColor">\
<path d="M5.486 9.73a.997.997 0 0 1-.707-.292L.537 5.195A1 1 0 1 1 1.95 3.78l3.535 3.535L11.85.952a1 1 0 0 1 1.415 1.414L6.193 9.438a.997.997 0 0 1-.707.292z"></path>\
</svg>';
} else if (type == 2) {
div.classList.add('sniffle__notification--error');
icon.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="-6 -6 24 24" fill="currentColor">\
<path d="M7.314 5.9l3.535-3.536A1 1 0 1 0 9.435.95L5.899 4.485 2.364.95A1 1 0 1 0 .95 2.364l3.535 3.535L.95 9.435a1 1 0 1 0 1.414 1.414l3.535-3.535 3.536 3.535a1 1 0 1 0 1.414-1.414L7.314 5.899z"></path>\
</svg>';
} else if (type == 3) {
div.classList.add('sniffle__notification--warning');
icon.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="-2 -3 24 24" fill="currentColor">\
<path d="M12.8 1.613l6.701 11.161c.963 1.603.49 3.712-1.057 4.71a3.213 3.213 0 0 1-1.743.516H3.298C1.477 18 0 16.47 0 14.581c0-.639.173-1.264.498-1.807L7.2 1.613C8.162.01 10.196-.481 11.743.517c.428.276.79.651 1.057 1.096zm-2.22.839a1.077 1.077 0 0 0-1.514.365L2.365 13.98a1.17 1.17 0 0 0-.166.602c0 .63.492 1.14 1.1 1.14H16.7c.206 0 .407-.06.581-.172a1.164 1.164 0 0 0 .353-1.57L10.933 2.817a1.12 1.12 0 0 0-.352-.365zM10 14a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm0-9a1 1 0 0 1 1 1v4a1 1 0 0 1-2 0V6a1 1 0 0 1 1-1z"></path>\
</svg>';
} else if (type == 4) {
div.classList.add('sniffle__notification--info');
icon.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="-2 -2 24 24" fill="currentColor">\
<path d="M10 20C4.477 20 0 15.523 0 10S4.477 0 10 0s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm0-10a1 1 0 0 1 1 1v5a1 1 0 0 1-2 0V9a1 1 0 0 1 1-1zm0-1a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"></path>\
</svg>';
}
div.appendChild(icon);
// Create text element and append to notification
var gwagwa = document.createElement('span');
gwagwa.classList.add('sniffle__notification-text');
gwagwa.innerHTML = text;
div.appendChild(gwagwa);
// Append notification to container
container.appendChild(div);
// Remove notification after 6.9 seconds
setTimeout(function() {
if (div.parentNode) {
div.style.opacity = 0;
div.style.transform = 'translateX(100%)';
setTimeout(function() {
container.removeChild(div);
}, 500);
}
}, 2500);
}
</script>
</body>