failed-galleries/python-gallery
1
0
Fork 0
mirror of https://github.com/Derpy-Leggies/OnlyLegs.git synced 2025-01-16 11:35:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

Move main JS into its own file

Browse source 
Fix Sass animations
When home button clicked from image view, it'll scroll down automagically
This commit is contained in:
Michał 2023-01-26 14:43:08 +00:00
parent 34d6dca2a9
commit 792cbd1884
13 changed files with 387 additions and 405 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
gallery/__init__.py
View file

@ -5,7 +5,7 @@ print("""
| |_| | | | | | |_| | |__| __/ (_| \\__ \\
\\___/|_| |_|_|\\__, |_____\\___|\\__, |___/
|___/ |___/
Created by Fluffy Bean - Version 250123
Created by Fluffy Bean - Version 260123
""")
from flask import Flask, render_template

37
gallery/gallery.py
View file

@ -1,10 +1,13 @@
from flask import Blueprint, flash, g, redirect, render_template, request, url_for, jsonify, current_app
from werkzeug.exceptions import abort
from werkzeug.utils import secure_filename
from gallery.auth import login_required
from gallery.db import get_db
from PIL import Image
from PIL.ExifTags import TAGS
import os
import datetime
@ -26,20 +29,18 @@ def index():
def image(id):
# Get image from database
db = get_db()
image = db.execute('SELECT * FROM posts'
' WHERE id = ?', (id, )).fetchone()
image = db.execute('SELECT * FROM posts WHERE id = ?', (id, )).fetchone()
if image is None:
abort(404)
# Get exif data from image
try:
file = Image.open(
os.path.join(current_app.config['UPLOAD_FOLDER'],
image['file_name']))
raw_exif = file.getexif()
human_exif = {}
file = Image.open(
os.path.join(current_app.config['UPLOAD_FOLDER'], image['file_name']))
raw_exif = file.getexif()
human_exif = {}
try:
for tag in raw_exif:
name = TAGS.get(tag, tag)
value = raw_exif.get(tag)
@ -48,19 +49,25 @@ def image(id):
value = value.decode()
human_exif[name] = value
if len(human_exif) == 0:
human_exif = False
except:
# Cringe, no file present
except Exception as e:
human_exif = False
file = False
def human_size(num, suffix="B"):
for unit in ["", "Ki", "Mi", "Gi", "Ti", "Pi", "Ei", "Zi"]:
if abs(num) < 1024.0:
return f"{num:3.1f}{unit}{suffix}"
num /= 1024.0
return f"{num:.1f}Yi{suffix}"
size = os.path.getsize(
os.path.join(current_app.config['UPLOAD_FOLDER'], image['file_name']))
# All in le head
return render_template('image.html',
image=image,
exif=human_exif,
file=file)
file=file,
size=human_size(size))
@blueprint.route('/group')

0
gallery/static/jquery-3.6.3.min.js → gallery/static/js/jquery-3.6.3.min.js vendored
View file

110
gallery/static/js/login.js Normal file
View file

@ -0,0 +1,110 @@
function showLogin() {
popUpShow(
'idk what to put here, just login please',
'Need an account? <span class="pop-up__link" onclick="showRegister()">Register!</span>',
'',
'<form onsubmit="return login(event)">\
<input class="pop-up__input" type="text" placeholder="Namey" id="username"/>\
<input class="pop-up__input" type="password" placeholder="Passywassy" id="password"/>\
<button class="pop-up__btn pop-up__btn-primary-fill">Login</button>\
</form>'
);
};
function showRegister() {
popUpShow(
'Who are you?',
'Already have an account? <span class="pop-up__link" onclick="showLogin()">Login!</span>',
'',
'<form onsubmit="return register(event)">\
<input class="pop-up__input" type="text" placeholder="Namey" id="username"/>\
<input class="pop-up__input" type="text" placeholder="E mail!" id="email"/>\
<input class="pop-up__input" type="password" placeholder="Passywassy" id="password"/>\
<input class="pop-up__input" type="password" placeholder="Passywassy again!" id="password-repeat"/>\
<button class="pop-up__btn pop-up__btn-primary-fill">Register</button>\
</form>'
);
};
function login(event) {
// AJAX takes control of subby form
event.preventDefault();
if ($("#username").val() === "" || $("#password").val() === "") {
addNotification("Please fill in all fields", 3);
} else {
// Make form
var formData = new FormData();
formData.append("username", $("#username").val());
formData.append("password", $("#password").val());
$.ajax({
url: '/auth/login',
type: 'post',
data: formData,
contentType: false,
processData: false,
success: function (response) {
location.reload();
},
error: function (response) {
switch (response.status) {
case 500:
addNotification('Server exploded, F\'s in chat', 2);
break;
case 403:
addNotification('None but devils play past here... Wrong information', 2);
break;
default:
addNotification('Error logging in, blame someone', 2);
break;
}
}
});
}
}
function register(obj) {
// AJAX takes control of subby form
event.preventDefault();
if ($("#username").val() === "" || $("#email").val() === "" || $("#password").val() === "" || $("#password-repeat").val() === "") {
addNotification("Please fill in all fields", 3);
} else {
// Make form
var formData = new FormData();
formData.append("username", $("#username").val());
formData.append("email", $("#email").val());
formData.append("password", $("#password").val());
formData.append("password-repeat", $("#password-repeat").val());
$.ajax({
url: '/auth/register',
type: 'post',
data: formData,
contentType: false,
processData: false,
success: function (response) {
if (response === "gwa gwa") {
addNotification('Registered successfully! Now please login to continue', 1);
showLogin();
} else {
for (var i = 0; i < response.length; i++) {
addNotification(response[i], 2);
}
}
},
error: function (response) {
switch (response.status) {
case 500:
addNotification('Server exploded, F\'s in chat', 2);
break;
case 403:
addNotification('None but devils play past here...', 2);
break;
default:
addNotification('Error logging in, blame someone', 2);
break;
}
}
});
}
}

136
gallery/static/js/main.js Normal file
View file

@ -0,0 +1,136 @@
let navToggle = true;
document.onscroll = function() {
document.querySelector('.background-decoration').style.opacity = `${1 - window.scrollY / 621}`;
document.querySelector('.background-decoration').style.top = `-${window.scrollY / 5}px`;
if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 20) {
document.querySelector('.jumpUp').style.opacity = 1;
document.querySelector('.jumpUp').style.right = "0.75rem";
} else {
document.querySelector('.jumpUp').style.opacity = 0;
document.querySelector('.jumpUp').style.right = "-3rem";
}
}
document.querySelector('.jumpUp').onclick = function() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
function imgFade(obj) {
$(obj).animate({opacity: 1}, 500);
//$(obj).parent().style.backgroundColor = 'transparent';
}
function addNotification(text='Sample notification', type=4) {
var container = document.querySelector('.notifications');
// Create notification element
var div = document.createElement('div');
div.classList.add('sniffle__notification');
div.onclick = function() {
if (div.parentNode) {
div.classList.add('sniffle__notification--hide');
setTimeout(function() {
container.removeChild(div);
}, 500);
}
};
// Create icon element and append to notification
var icon = document.createElement('span');
icon.classList.add('sniffle__notification-icon');
switch (type) {
case 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>';
break;
case 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>';
break;
case 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>';
break;
default:
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>';
break;
}
div.appendChild(icon);
// Create text element and append to notification
var description = document.createElement('span');
description.classList.add('sniffle__notification-text');
description.innerHTML = text;
div.appendChild(description);
// Create span to show time remaining
var timer = document.createElement('span');
timer.classList.add('sniffle__notification-time');
div.appendChild(timer);
// Append notification to container
container.appendChild(div);
setTimeout(function() {
div.classList.add('sniffle__notification-show');
}, 100);
// Remove notification after 5 seconds
setTimeout(function() {
if (div.parentNode) {
div.classList.add('sniffle__notification--hide');
setTimeout(function() {
container.removeChild(div);
}, 500);
}
}, 5000);
}
function popUpShow(title, body, actions, content) {
var popup = document.querySelector('.pop-up');
var popupContent = document.querySelector('.pop-up-content');
var popupActions = document.querySelector('.pop-up-controlls');
// Set tile and description
h3 = document.createElement('h3');
h3.innerHTML = title;
p = document.createElement('p');
p.innerHTML = body;
popupContent.innerHTML = '';
popupContent.appendChild(h3);
popupContent.appendChild(p);
// Set content
if (content != '') {
popupContent.innerHTML += content;
}
// Set buttons that will be displayed
popupActions.innerHTML = '';
if (actions != '') {
popupActions.innerHTML += actions;
}
popupActions.innerHTML += '<button class="pop-up__btn pop-up__btn-fill" onclick="popupDissmiss()">Nooooooo</button>';
// Show popup
popup.classList.add('pop-up__active');
}
function popupDissmiss() {
var popup = document.querySelector('.pop-up');
popup.classList.remove('pop-up__active');
}

70
gallery/static/js/upload.js Normal file
View file

@ -0,0 +1,70 @@
function showUpload() {
popUpShow(
'Upload funny stuff',
'May the world see your stuff 👀',
'',
'<form onsubmit="return uploadFile(event)">\
<input class="pop-up__input" type="file" id="file"/>\
<input class="pop-up__input" type="text" placeholder="alt" id="alt"/>\
<input class="pop-up__input" type="text" placeholder="description" id="description"/>\
<input class="pop-up__input" type="text" placeholder="tags" id="tags"/>\
<button class="pop-up__btn pop-up__btn-primary-fill">Upload</button>\
</form>'
);
};
function uploadFile(){
// AJAX takes control of subby form
event.preventDefault();
// Check for empty upload
if ($("#file").val() === "") {
addNotification("Please select a file to upload", 2);
} else {
// Make form
var formData = new FormData();
formData.append("file", $("#file").prop("files")[0]);
formData.append("alt", $("#alt").val());
formData.append("description", $("#description").val());
formData.append("tags", $("#tags").val());
formData.append("submit", $("#submit").val());
// Upload the information
$.ajax({
url: '/api/upload',
type: 'post',
data: formData,
contentType: false,
processData: false,
success: function (response) {
addNotification("File uploaded successfully!", 1);
// popupDissmiss(); // Close popup
},
error: function (response) {
switch (response.status) {
case 500:
addNotification('Server exploded, F\'s in chat', 2);
break;
case 400:
case 404:
addNotification('Error uploading. Blame yourself', 2);
break;
case 403:
addNotification('None but devils play past here...', 2);
break;
case 413:
addNotification('File too large!!!!!!', 3);
break;
default:
addNotification('Error uploading file, blame someone', 2);
break;
}
}
});
// Empty values
$("#file").val("");
$("#alt").val("");
$("#description").val("");
$("#tags").val("");
}
};

16
gallery/templates/image.html
View file

@ -6,16 +6,12 @@
<span></span>
</div>
{% endblock %}
{% block scrollPosition %}?src={{ image['id'] }}{% endblock %}
{% block wrapper_class %}image-wrapper{% endblock %}
{% block content %}
<div class="image-fullscreen">
<img
src=""
onload="imgFade(this);"
style="opacity:0;"
/>
<img src="" onload="imgFade(this);" style="opacity:0;" />
</div>
<div class="image-container">
@ -116,12 +112,11 @@
<p>Image ID: {{ image['id'] }}</p>
<p>Author: {{ image['author_id'] }}</p>
<p>Upload date: {{ image['created_at'] }}</p>
{% if file is not false %}
<p>Dimensions: {{ file['width'] }}x{{ file['height'] }}</p>
{% endif %}
<p>Dimensions: {{ file['width'] }}x{{ file['height'] }}</p>
<p>File size: {{ size }}</p>
</div>
</div>
{% if exif is not false %}
{% if exif %}
<div class="image-info">
<div class="image-info__header">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-2 -2 24 24" fill="currentColor">
@ -147,6 +142,7 @@
$('#img-fullscreen').click(function() {
$('.image-fullscreen').addClass('image-fullscreen__active');
if ($('.image-fullscreen img').attr('src') == '') {
$('.image-fullscreen img').attr('src', '/api/uploads/{{ image['file_name'] }}/0');
}

56
gallery/templates/index.html
View file

@ -6,12 +6,11 @@
{% block content %}
<div class="gallery">
{% for image in images %}
<a class="gallery__item" href="/image/{{ image['id'] }}">
<div class="gallery__item-info">
<a id="image-{{ image['id'] }}" class="gallery__item" href="/image/{{ image['id'] }}">
<span class="gallery__item-info">
<p>{{ image['id'] }}</p>
<h2>{{ image['created_at'] }}</h2>
</div>
<span class="gallery__item-filter"></span>
</span>
<img
class="gallery__item-image"
src="/api/uploads/{{ image['file_name'] }}/400"
@ -26,46 +25,17 @@
{% block script %}
<script>
let imageList = [];
let imageIndex = 0;
const urlParams = new URLSearchParams(window.location.search);
const src = urlParams.get('src');
function loadMore(startIndex, amount = 20) {
for (let i = startIndex; i < startIndex + amount; i++) {
if (i < imageList.length) {
loadImg(imageList[i][0], imageList[i][1]);
}
}
imageIndex = startIndex + amount;
if (src) {
var imgOffset = document.getElementById('image-' + src).offsetTop;
var imgHeight = document.getElementById('image-' + src).offsetHeight;
var windowHeight = window.innerHeight;
document.querySelector('html').style.scrollBehavior = 'auto';
window.scrollTo(0, imgOffset + (imgHeight / 2) - (windowHeight / 2));
document.querySelector('html').style.scrollBehavior = 'smooth';
}
function loadImg(id, fileName) {
var imgDiv = `
<a class="gallery__item" href="/image/${id}">
<div class="gallery__item-info">
<p>${id}</p>\
<h2>${fileName}</h2>
</div>
<span class="gallery__item-filter"></span>
<img class="gallery__item-image" src="https://supersecreteuploadtest.leggy.dev/usr/images/${fileName}" onload="imgFade(this)" style="display:none;">
</a>
`;
$(imgDiv).hide().appendTo('#gallery').fadeIn(250);
}
$.ajax({
url: '/fileList/original',
type: 'get',
success: function(response) {
imageList = response;
loadMore(0, 30);
}
});
$(window).scroll(function() {
if ($(window).height() + $(window).scrollTop() >= $(document).height() - 500) {
loadMore(imageIndex);
}
});
</script>
{% endblock %}

331
gallery/templates/layout.html
View file

@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gallery</title>
<link rel="stylesheet" href="{{url_for('static', filename='theme/style.css')}}" defer>
<script src="{{url_for('static', filename='jquery-3.6.3.min.js')}}"></script>
<script src="{{url_for('static', filename='js/jquery-3.6.3.min.js')}}"></script>
</head>
<body>
<div class="wrapper">
@ -18,7 +18,7 @@
{% block header %}{% endblock %}
<div class="navigation">
<a href="{{url_for('gallery.index')}}" class="navigation-item {% block nav_home %}{% endblock %}">
<a href="{{url_for('gallery.index')}}{% block scrollPosition %}{% endblock %}" class="navigation-item {% block nav_home %}{% endblock %}">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-2 -2 24 24" width="24" fill="currentColor">
<path d="M2 8v10h12V8H2zm2-2V2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-2v4a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h2zm2 0h8a2 2 0 0 1 2 2v4h2V2H6v4zm0 9a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0-2a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"></path><path d="M7 6a3 3 0 1 1 6 0h-2a1 1 0 0 0-2 0H7zm1.864 13.518l2.725-4.672a1 1 0 0 1 1.6-.174l1.087 1.184 1.473-1.354-1.088-1.183a3 3 0 0 0-4.8.52L7.136 18.51l1.728 1.007zm6.512-12.969a2.994 2.994 0 0 1 3.285.77l1.088 1.183-1.473 1.354-1.087-1.184A1 1 0 0 0 16 8.457V8c0-.571-.24-1.087-.624-1.451z"></path>
</svg>
@ -85,328 +85,13 @@
</div>
</div>
<script src="{{ url_for('static', filename='js/main.js') }}"></script>
{% if g.user %}
<script src="{{ url_for('static', filename='js/upload.js') }}"></script>
{% else %}
<script src="{{ url_for('static', filename='js/login.js') }}"></script>
{% endif %}
<script>
let navToggle = true;
document.onscroll = function() {
document.querySelector('.background-decoration').style.opacity = `${1 - window.scrollY / 621}`;
document.querySelector('.background-decoration').style.top = `-${window.scrollY / 5}px`;
if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 20) {
document.querySelector('.jumpUp').style.opacity = 1;
document.querySelector('.jumpUp').style.right = "0.75rem";
} else {
document.querySelector('.jumpUp').style.opacity = 0;
document.querySelector('.jumpUp').style.right = "-3rem";
}
}
document.querySelector('.jumpUp').onclick = function() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
function imgFade(obj) {
$(obj).animate({opacity: 1}, 500);
//$(obj).parent().style.backgroundColor = 'transparent';
}
function addNotification(text='Sample notification', type=4) {
var container = document.querySelector('.notifications');
// Create notification element
var div = document.createElement('div');
div.classList.add('sniffle__notification');
div.onclick = function() {
if (div.parentNode) {
div.classList.add('sniffle__notification--hide');
setTimeout(function() {
container.removeChild(div);
}, 500);
}
};
// Create icon element and append to notification
var icon = document.createElement('span');
icon.classList.add('sniffle__notification-icon');
switch (type) {
case 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>';
break;
case 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>';
break;
case 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>';
break;
default:
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>';
break;
}
div.appendChild(icon);
// Create text element and append to notification
var description = document.createElement('span');
description.classList.add('sniffle__notification-text');
description.innerHTML = text;
div.appendChild(description);
// Create span to show time remaining
var timer = document.createElement('span');
timer.classList.add('sniffle__notification-time');
div.appendChild(timer);
// Append notification to container
container.appendChild(div);
setTimeout(function() {
div.classList.add('sniffle__notification-show');
}, 100);
// Remove notification after 5 seconds
setTimeout(function() {
if (div.parentNode) {
div.classList.add('sniffle__notification--hide');
setTimeout(function() {
container.removeChild(div);
}, 500);
}
}, 5000);
}
function popUpShow(title, body, actions, content) {
var popup = document.querySelector('.pop-up');
var popupContent = document.querySelector('.pop-up-content');
var popupActions = document.querySelector('.pop-up-controlls');
// Set tile and description
h3 = document.createElement('h3');
h3.innerHTML = title;
p = document.createElement('p');
p.innerHTML = body;
popupContent.innerHTML = '';
popupContent.appendChild(h3);
popupContent.appendChild(p);
// Set content
if (content != '') {
popupContent.innerHTML += content;
}
// Set buttons that will be displayed
popupActions.innerHTML = '';
if (actions != '') {
popupActions.innerHTML += actions;
}
popupActions.innerHTML += '<button class="pop-up__btn pop-up__btn-fill" onclick="popupDissmiss()">Nooooooo</button>';
// Show popup
popup.classList.add('pop-up__active');
}
function popupDissmiss() {
var popup = document.querySelector('.pop-up');
popup.classList.remove('pop-up__active');
}
{% if g.user %}
function showUpload() {
popUpShow(
'Upload funny stuff',
'May the world see your stuff 👀',
'',
'<form onsubmit="return uploadFile(event)">\
<input class="pop-up__input" type="file" id="file"/>\
<input class="pop-up__input" type="text" placeholder="alt" id="alt"/>\
<input class="pop-up__input" type="text" placeholder="description" id="description"/>\
<input class="pop-up__input" type="text" placeholder="tags" id="tags"/>\
<button class="pop-up__btn pop-up__btn-primary-fill">Upload</button>\
</form>'
);
};
function uploadFile(){
// AJAX takes control of subby form
event.preventDefault();
// Check for empty upload
if ($("#file").val() === "") {
addNotification("Please select a file to upload", 2);
} else {
// Make form
var formData = new FormData();
formData.append("file", $("#file").prop("files")[0]);
formData.append("alt", $("#alt").val());
formData.append("description", $("#description").val());
formData.append("tags", $("#tags").val());
formData.append("submit", $("#submit").val());
// Upload the information
$.ajax({
url: '/api/upload',
type: 'post',
data: formData,
contentType: false,
processData: false,
success: function (response) {
addNotification("File uploaded successfully!", 1);
// popupDissmiss(); // Close popup
},
error: function (response) {
switch (response.status) {
case 500:
addNotification('Server exploded, F\'s in chat', 2);
break;
case 400:
case 404:
addNotification('Error uploading. Blame yourself', 2);
break;
case 403:
addNotification('None but devils play past here...', 2);
break;
case 413:
addNotification('File too large!!!!!!', 3);
break;
default:
addNotification('Error uploading file, blame someone', 2);
break;
}
}
});
// Empty values
$("#file").val("");
$("#alt").val("");
$("#description").val("");
$("#tags").val("");
}
};
{% else %}
function showLogin() {
popUpShow(
'idk what to put here, just login please',
'Need an account? <span class="pop-up__link" onclick="showRegister()">Register!</span>',
'',
'<form onsubmit="return login(event)">\
<input class="pop-up__input" type="text" placeholder="Namey" id="username"/>\
<input class="pop-up__input" type="password" placeholder="Passywassy" id="password"/>\
<button class="pop-up__btn pop-up__btn-primary-fill">Login</button>\
</form>'
);
};
function showRegister() {
popUpShow(
'Who are you?',
'Already have an account? <span class="pop-up__link" onclick="showLogin()">Login!</span>',
'',
'<form onsubmit="return register(event)">\
<input class="pop-up__input" type="text" placeholder="Namey" id="username"/>\
<input class="pop-up__input" type="text" placeholder="E mail!" id="email"/>\
<input class="pop-up__input" type="password" placeholder="Passywassy" id="password"/>\
<input class="pop-up__input" type="password" placeholder="Passywassy again!" id="password-repeat"/>\
<button class="pop-up__btn pop-up__btn-primary-fill">Register</button>\
</form>'
);
};
function login(event) {
// AJAX takes control of subby form
event.preventDefault();
if ($("#username").val() === "" || $("#password").val() === "") {
addNotification("Please fill in all fields", 3);
} else {
// Make form
var formData = new FormData();
formData.append("username", $("#username").val());
formData.append("password", $("#password").val());
$.ajax({
url: '/auth/login',
type: 'post',
data: formData,
contentType: false,
processData: false,
success: function (response) {
location.reload();
},
error: function (response) {
switch (response.status) {
case 500:
addNotification('Server exploded, F\'s in chat', 2);
break;
case 403:
addNotification('None but devils play past here... Wrong information', 2);
break;
default:
addNotification('Error logging in, blame someone', 2);
break;
}
}
});
}
}
function register(obj) {
// AJAX takes control of subby form
event.preventDefault();
if ($("#username").val() === "" || $("#email").val() === "" || $("#password").val() === "" || $("#password-repeat").val() === "") {
addNotification("Please fill in all fields", 3);
} else {
// Make form
var formData = new FormData();
formData.append("username", $("#username").val());
formData.append("email", $("#email").val());
formData.append("password", $("#password").val());
formData.append("password-repeat", $("#password-repeat").val());
$.ajax({
url: '/auth/register',
type: 'post',
data: formData,
contentType: false,
processData: false,
success: function (response) {
if (response === "gwa gwa") {
addNotification('Registered successfully! Now please login to continue', 1);
showLogin();
} else {
for (var i = 0; i < response.length; i++) {
addNotification(response[i], 2);
}
}
},
error: function (response) {
switch (response.status) {
case 500:
addNotification('Server exploded, F\'s in chat', 2);
break;
case 403:
addNotification('None but devils play past here...', 2);
break;
default:
addNotification('Error logging in, blame someone', 2);
break;
}
}
});
}
}
{% endif %}
{% for message in get_flashed_messages() %}
// Show notifications on page load
addNotification('{{ message[0] }}', '{{ message[1] }}');

7
gallery/user/themes/default/animations.sass
View file

@ -1,13 +1,16 @@
@keyframes imgLoading
0%
background-position: -468px 0
100%
background-position: 468px 0
@keyframes notificationTimeout
0%
left: -100%
opacity: 1
90%
left: 0%
opacity: 1
100%
left: 0%
opacity: 0

9
gallery/user/themes/default/ui/notification.sass
View file

@ -19,7 +19,7 @@
flex-direction: column
gap: 0.3rem
z-index: 70
z-index: 621
.sniffle__notification
margin: 0
@ -27,6 +27,7 @@
width: 450px
height: auto
max-height: 100px
display: flex
flex-direction: row
@ -90,8 +91,9 @@
left: 0px
background-color: $white
opacity: 0
animation: notificationTimeout 4.9s linear
animation: notificationTimeout 5.1s linear
.sniffle__notification--success
@include notification($succes)
@ -110,6 +112,9 @@
transform: scale(1)
.sniffle__notification--hide
margin-bottom: -0.3rem // compensate for gap
max-height: 0 // prevent divs from jumping when removed
opacity: 0
transform: translateX(100%)

16
gallery/user/themes/default/ui/pop-up.sass
View file

@ -28,7 +28,7 @@
backdrop-filter: blur(1rem)
opacity: 0
z-index: 68
z-index: 101
transition: opacity 0.2s ease
@ -224,26 +224,26 @@
@media (max-width: $breakpoint)
.pop-up
width: 100%
height: calc(100vh - 3.5rem)
height: calc(100dvh - 3.5rem)
height: 100vh
height: 100dvh
position: fixed
left: 0
bottom: 3.5rem
bottom: 0
backdrop-filter: blur(0.5rem)
.pop-up-wrapper
width: 100%
width: calc(100vw - 1rem)
max-height: calc(100vh - 1rem)
max-height: calc(100dvh - 1rem)
left: 0
bottom: 0
left: 0.5rem
bottom: 0.5rem
border-radius: $rad
transform: translateY(5rem)
box-shadow: 0px 8px 0px $black2;
//box-shadow: 0px 8px 0px $black2;
.pop-up-content
max-height: 100%

2
setup.py
View file

@ -2,7 +2,7 @@ from setuptools import find_packages, setup
setup(
name='onlylegs',
version='250123',
version='260123',
packages=find_packages(),
include_package_data=True,
install_requires=[