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

Yeet JQuery in favor of vanilla JS

Browse source
This commit is contained in:
Michał Gdula 2023-04-02 22:07:14 +00:00
parent c7e38dfcfb
commit 6f759bb678
7 changed files with 106 additions and 94 deletions
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 // Make form
var formData = new FormData(); let formData = new FormData();
formData.append("username", formUsername); formData.append("username", formUsername);
formData.append("password", formPassword); formData.append("password", formPassword);
@ -153,7 +153,7 @@ function register(event) {
} }
// Make form // Make form
var formData = new FormData(); let formData = new FormData();
formData.append("username", formUsername); formData.append("username", formUsername);
formData.append("email", formEmail); formData.append("email", formEmail);
formData.append("password", formPassword); formData.append("password", formPassword);

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

@ -1,6 +1,7 @@
// fade in images // fade in images
function imgFade(obj, time = 250) { 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 // Lazy load images when they are in view
function loadOnView() { function loadOnView() {

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

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

10
gallery/templates/image.html
View file

@ -90,7 +90,12 @@
</div> </div>
<div class="image-fullscreen" onclick="imageFullscreenOff()"> <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>
<div class="image-grid"> <div class="image-grid">
@ -98,7 +103,8 @@
<img <img
src="{{ url_for('api.file', file_name=image.file_name) }}?r=prev" src="{{ url_for('api.file', file_name=image.file_name) }}?r=prev"
alt="{{ image.post_alt }}" 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')}}'" onerror="this.src='{{ url_for('static', filename='error.png')}}'"
{% if "File" in image.image_exif %} {% if "File" in image.image_exif %}
width="{{ image.image_exif.File.Width.raw }}" 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-subtitle"></p>
<p class="image-title"><span class="time">{{ image.created_at }}</span></p> <p class="image-title"><span class="time">{{ image.created_at }}</span></p>
</div> </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> </a>
{% endfor %} {% endfor %}
</div> </div>