failed-galleries/python-gallery
1
0
Fork 0
mirror of https://github.com/Derpy-Leggies/OnlyLegs.git synced 2024-12-29 10:56:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

Yeet JQuery in favor of vanilla JS

Browse source
This commit is contained in:
Michał 2023-04-02 22:07:14 +00:00
parent c7e38dfcfb
commit 6f759bb678
7 changed files with 106 additions and 94 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

File diff suppressed because one or more lines are too long

25
gallery/static/js/lable.js
View file

@ -1,25 +0,0 @@
document.addEventListener('DOMContentLoaded', function() {
let labels = document.querySelectorAll('[data-label]');
for (let i = 0; i < labels.length; i++) {
labels[i].addEventListener('mouseover', function() {
let label = document.createElement('div');
label.classList.add('label');
label.innerHTML = this.dataset.label;
document.body.appendChild(label);
label.style.left = (this.offsetLeft + this.offsetWidth + 8) + 'px';
label.style.top = (this.offsetTop + (label.offsetHeight / 2) - 2) + 'px';
setTimeout(function() {
label.style.opacity = 1;
}, 250);
});
labels[i].addEventListener('mouseout', function() {
let label = document.querySelector('.label');
label.parentNode.removeChild(label);
});
}
});

4
gallery/static/js/login.js
View file

@ -54,7 +54,7 @@ function login(event) {
}
// Make form
var formData = new FormData();
let formData = new FormData();
formData.append("username", formUsername);
formData.append("password", formPassword);
@ -153,7 +153,7 @@ function register(event) {
}
// Make form
var formData = new FormData();
let formData = new FormData();
formData.append("username", formUsername);
formData.append("email", formEmail);
formData.append("password", formPassword);

3
gallery/static/js/main.js
View file

@ -1,6 +1,7 @@
// fade in images
function imgFade(obj, time = 250) {
$(obj).animate({ opacity: 1 }, time);
obj.style.transition = `opacity ${time}ms`;
obj.style.opacity = 1;
}
// Lazy load images when they are in view
function loadOnView() {

154
gallery/static/js/uploadTab.js
View file

@ -141,35 +141,38 @@ function clearUpload() {
}
function createJob(file) {
jobContainer = document.createElement("div");
jobContainer.classList.add("job");
// function createJob(file) {
// jobContainer = document.createElement("div");
// jobContainer.classList.add("job");
jobStatus = document.createElement("span");
jobStatus.classList.add("job__status");
jobStatus.innerHTML = "Uploading...";
// jobStatus = document.createElement("span");
// jobStatus.classList.add("job__status");
// jobStatus.innerHTML = "Uploading...";
jobProgress = document.createElement("span");
jobProgress.classList.add("progress");
// jobProgress = document.createElement("span");
// jobProgress.classList.add("progress");
jobImg = document.createElement("img");
jobImg.src = URL.createObjectURL(file);
// jobImg = document.createElement("img");
// jobImg.src = URL.createObjectURL(file);
jobImgFilter = document.createElement("span");
jobImgFilter.classList.add("img-filter");
// jobImgFilter = document.createElement("span");
// jobImgFilter.classList.add("img-filter");
jobContainer.appendChild(jobStatus);
jobContainer.appendChild(jobProgress);
jobContainer.appendChild(jobImg);
jobContainer.appendChild(jobImgFilter);
// jobContainer.appendChild(jobStatus);
// jobContainer.appendChild(jobProgress);
// jobContainer.appendChild(jobImg);
// jobContainer.appendChild(jobImgFilter);
return jobContainer;
}
// return jobContainer;
// }
document.addEventListener('DOMContentLoaded', function() {
// Function to upload images
let uploadTab = document.querySelector(".upload-panel");
if (!uploadTab) { return; } // If upload tab doesn't exist, don't run this code :3
let uploadTabDrag = uploadTab.querySelector("#dragIndicator");
let uploadForm = uploadTab.querySelector('#uploadForm');
let jobList = document.querySelector(".upload-jobs");
@ -225,53 +228,82 @@ document.addEventListener('DOMContentLoaded', function() {
formData.append("description", fileDescription.value);
formData.append("tags", fileTags.value);
jobItem = createJob(fileUpload.files[0]);
jobStatus = jobItem.querySelector(".job__status");
// jobItem = createJob(fileUpload.files[0]);
// jobStatus = jobItem.querySelector(".job__status");
// Upload the information
$.ajax({
url: '/api/upload',
type: 'post',
data: formData,
contentType: false,
processData: false,
beforeSend: function () {
// Add job to list
jobList.appendChild(jobItem);
},
success: function (response) {
jobItem.classList.add("success");
jobStatus.innerHTML = "Uploaded successfully";
if (!document.querySelector(".upload-panel").classList.contains("open")) {
addNotification("Image uploaded successfully", 1);
}
},
error: function (response) {
jobItem.classList.add("critical");
switch (response.status) {
case 500:
jobStatus.innerHTML = "Server exploded, F's in chat";
break;
case 400:
case 404:
jobStatus.innerHTML = "Error uploading. Blame yourself";
break;
case 403:
jobStatus.innerHTML = "None but devils play past here...";
break;
case 413:
jobStatus.innerHTML = "File too large!!!!!!";
break;
default:
jobStatus.innerHTML = "Error uploading file, blame someone";
break;
}
if (!document.querySelector(".upload-panel").classList.contains("open")) {
addNotification("Error uploading file", 2);
}
},
// $.ajax({
// url: '/api/upload',
// type: 'post',
// data: formData,
// contentType: false,
// processData: false,
// beforeSend: function () {
// // Add job to list
// jobList.appendChild(jobItem);
// },
// success: function (response) {
// jobItem.classList.add("success");
// jobStatus.innerHTML = "Uploaded successfully";
// if (!document.querySelector(".upload-panel").classList.contains("open")) {
// addNotification("Image uploaded successfully", 1);
// }
// },
// error: function (response) {
// jobItem.classList.add("critical");
// switch (response.status) {
// case 500:
// jobStatus.innerHTML = "Server exploded, F's in chat";
// break;
// case 400:
// case 404:
// jobStatus.innerHTML = "Error uploading. Blame yourself";
// break;
// case 403:
// jobStatus.innerHTML = "None but devils play past here...";
// break;
// case 413:
// jobStatus.innerHTML = "File too large!!!!!!";
// break;
// default:
// jobStatus.innerHTML = "Error uploading file, blame someone";
// break;
// }
// if (!document.querySelector(".upload-panel").classList.contains("open")) {
// addNotification("Error uploading file", 2);
// }
// },
// });
fetch('/api/upload', {
method: 'POST',
body: formData
})
// .then(response => response.json())
.then(data => { addNotification("Image uploaded successfully", 1); })
.catch(error => {
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!!!!!!", 2);
break;
default:
addNotification("Error uploading file, blame someone", 2)
break;
}
});
clearUpload();
// Reset drop

10
gallery/templates/image.html
View file

@ -90,7 +90,12 @@
</div>
<div class="image-fullscreen" onclick="imageFullscreenOff()">
<img src="" alt="{{ image.post_alt }}" onload="imgFade(this);" style="opacity:0;" />
<img
src=""
alt="{{ image.post_alt }}"
onload="imgFade(this);"
style="opacity:0;"
/>
</div>
<div class="image-grid">
@ -98,7 +103,8 @@
<img
src="{{ url_for('api.file', file_name=image.file_name) }}?r=prev"
alt="{{ image.post_alt }}"
onload="imgFade(this)" style="opacity:0;"
onload="imgFade(this)"
style="opacity: 0;"
onerror="this.src='{{ url_for('static', filename='error.png')}}'"
{% if "File" in image.image_exif %}
width="{{ image.image_exif.File.Width.raw }}"

2
gallery/templates/index.html
View file

@ -21,7 +21,7 @@
<p class="image-subtitle"></p>
<p class="image-title"><span class="time">{{ image.created_at }}</span></p>
</div>
<img alt="{{ image.post_alt }}" data-src="{{ image.file_name }}" onload="this.classList.add('loaded');" id="lazy-load"/>
<img fetchpriority="low" alt="{{ image.post_alt }}" data-src="{{ image.file_name }}" onload="this.classList.add('loaded');" id="lazy-load"/>
</a>
{% endfor %}
</div>