mirror of
https://github.com/Derpy-Leggies/OnlyLegs.git
synced 2025-01-01 04:16:07 +00:00
315 lines
10 KiB
JavaScript
315 lines
10 KiB
JavaScript
// Remove default events on file drop, otherwise the browser will open the file
|
|
window.addEventListener("dragover", (event) => {
|
|
event.preventDefault();
|
|
}, false);
|
|
window.addEventListener("drop", (event) => {
|
|
event.preventDefault();
|
|
}, false);
|
|
|
|
|
|
// open upload tab
|
|
function openUploadTab() {
|
|
const uploadTab = document.querySelector(".upload-panel");
|
|
|
|
// Stop scrolling and open upload tab
|
|
document.querySelector("html").style.overflow = "hidden";
|
|
uploadTab.style.display = "block";
|
|
setTimeout(() => { uploadTab.classList.add("open"); }, 5);
|
|
}
|
|
|
|
// close upload tab
|
|
function closeUploadTab() {
|
|
const uploadTab = document.querySelector(".upload-panel");
|
|
const uploadTabContainer = document.querySelector(".upload-panel .container");
|
|
|
|
// un-Stop scrolling and close upload tab
|
|
document.querySelector("html").style.overflow = "auto";
|
|
uploadTab.classList.remove("open");
|
|
setTimeout(() => {
|
|
uploadTab.style.display = "none";
|
|
|
|
uploadTabContainer.style.transform = "";
|
|
uploadTab.dataset.lastY = 0;
|
|
}, 250);
|
|
}
|
|
|
|
// toggle upload tab
|
|
function toggleUploadTab() {
|
|
const uploadTab = document.querySelector(".upload-panel");
|
|
|
|
if (uploadTab.classList.contains("open")) {
|
|
closeUploadTab();
|
|
} else {
|
|
openUploadTab();
|
|
}
|
|
}
|
|
|
|
function tabDragStart(event) {
|
|
event.preventDefault();
|
|
|
|
const uploadTab = document.querySelector(".upload-panel .container");
|
|
const offset = uploadTab.getBoundingClientRect().y;
|
|
|
|
uploadTab.classList.add("dragging");
|
|
|
|
document.addEventListener('touchmove', moving => {
|
|
if (uploadTab.classList.contains("dragging")) {
|
|
if (moving.touches[0].clientY - offset >= 0) {
|
|
uploadTab.dataset.lastY = moving.touches[0].clientY;
|
|
} else {
|
|
uploadTab.dataset.lastY = offset;
|
|
}
|
|
|
|
uploadTab.style.transform = `translateY(${uploadTab.dataset.lastY - offset}px)`;
|
|
}
|
|
});
|
|
}
|
|
function tabDragStopped(event) {
|
|
event.preventDefault();
|
|
|
|
const uploadTab = document.querySelector(".upload-panel .container");
|
|
|
|
uploadTab.classList.remove("dragging");
|
|
|
|
if (uploadTab.dataset.lastY > (screen.height * 0.3)) {
|
|
closeUploadTab();
|
|
} else {
|
|
uploadTab.style.transition = "transform 0.25s cubic-bezier(0.76, 0, 0.17, 1)";
|
|
uploadTab.style.transform = "translateY(0px)";
|
|
setTimeout(() => { uploadTab.style.transition = ""; }, 250);
|
|
}
|
|
}
|
|
|
|
|
|
// Edging the file plunge :3
|
|
function fileActivate(event) {
|
|
event.preventDefault()
|
|
|
|
const fileDrop = document.querySelector('.fileDrop-block');
|
|
const fileDropTitle = fileDrop.querySelector('.status');
|
|
|
|
fileDrop.classList.remove('error');
|
|
fileDrop.classList.add('edging');
|
|
fileDropTitle.innerHTML = 'Drop to upload!';
|
|
}
|
|
function fileDefault() {
|
|
const fileDrop = document.querySelector('.fileDrop-block');
|
|
const fileDropTitle = fileDrop.querySelector('.status');
|
|
|
|
fileDrop.classList.remove('error');
|
|
fileDrop.classList.remove('edging');
|
|
fileDropTitle.innerHTML = 'Choose or Drop file';
|
|
}
|
|
|
|
function fileDropHandle(event) {
|
|
event.preventDefault()
|
|
|
|
const fileDrop = document.querySelector('.fileDrop-block');
|
|
const fileUpload = fileDrop.querySelector('#file');
|
|
|
|
fileUpload.files = event.dataTransfer.files;
|
|
|
|
fileDefault();
|
|
fileChanged();
|
|
}
|
|
|
|
function fileChanged() {
|
|
const dropBlock = document.querySelector('.fileDrop-block');
|
|
const dropBlockStatus = dropBlock.querySelector('.status');
|
|
const dropBlockInput = dropBlock.querySelector('#file');
|
|
|
|
if (dropBlockInput.value !== "") {
|
|
dropBlock.classList.add('active');
|
|
dropBlockStatus.innerHTML = dropBlockInput.files[0].name;
|
|
} else {
|
|
fileDefault();
|
|
}
|
|
}
|
|
|
|
function clearUpload() {
|
|
const fileDrop = document.querySelector('#uploadForm');
|
|
|
|
const fileUpload = fileDrop.querySelector('#file');
|
|
const fileAlt = fileDrop.querySelector('#alt');
|
|
const fileDescription = fileDrop.querySelector('#description');
|
|
const fileTags = fileDrop.querySelector('#tags');
|
|
|
|
fileUpload.value = "";
|
|
fileAlt.value = "";
|
|
fileDescription.value = "";
|
|
fileTags.value = "";
|
|
}
|
|
|
|
|
|
// function createJob(file) {
|
|
// jobContainer = document.createElement("div");
|
|
// jobContainer.classList.add("job");
|
|
|
|
// jobStatus = document.createElement("span");
|
|
// jobStatus.classList.add("job__status");
|
|
// jobStatus.innerHTML = "Uploading...";
|
|
|
|
// jobProgress = document.createElement("span");
|
|
// jobProgress.classList.add("progress");
|
|
|
|
// jobImg = document.createElement("img");
|
|
// jobImg.src = URL.createObjectURL(file);
|
|
|
|
// jobImgFilter = document.createElement("span");
|
|
// jobImgFilter.classList.add("img-filter");
|
|
|
|
// jobContainer.appendChild(jobStatus);
|
|
// jobContainer.appendChild(jobProgress);
|
|
// jobContainer.appendChild(jobImg);
|
|
// jobContainer.appendChild(jobImgFilter);
|
|
|
|
// return jobContainer;
|
|
// }
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
// Function to upload images
|
|
const uploadTab = document.querySelector(".upload-panel");
|
|
|
|
if (!uploadTab) { return; } // If upload tab doesn't exist, don't run this code :3
|
|
|
|
const uploadTabDrag = uploadTab.querySelector("#dragIndicator");
|
|
const uploadForm = uploadTab.querySelector('#uploadForm');
|
|
// let jobList = document.querySelector(".upload-jobs");
|
|
|
|
const fileDrop = uploadForm.querySelector('.fileDrop-block');
|
|
const fileDropTitle = fileDrop.querySelector('.status');
|
|
const fileUpload = fileDrop.querySelector('#file');
|
|
|
|
const fileAlt = uploadForm.querySelector('#alt');
|
|
const fileDescription = uploadForm.querySelector('#description');
|
|
const fileTags = uploadForm.querySelector('#tags');
|
|
|
|
|
|
clearUpload();
|
|
fileDefault();
|
|
|
|
|
|
// Tab is dragged
|
|
uploadTabDrag.addEventListener('touchstart', tabDragStart, false);
|
|
uploadTabDrag.addEventListener('touchend', tabDragStopped, false);
|
|
|
|
// Drag over/enter event
|
|
fileDrop.addEventListener('dragover', fileActivate, false);
|
|
fileDrop.addEventListener('dragenter', fileActivate, false);
|
|
// Drag out
|
|
fileDrop.addEventListener('dragleave', fileDefault, false);
|
|
// Drop file into box
|
|
fileDrop.addEventListener('drop', fileDropHandle, false);
|
|
|
|
// File upload change
|
|
fileUpload.addEventListener('change', fileChanged, false);
|
|
// File upload clicked
|
|
fileUpload.addEventListener('click', fileDefault, false);
|
|
|
|
|
|
// Submit form
|
|
uploadForm.addEventListener('submit', (event) => {
|
|
// AJAX takes control of subby form
|
|
event.preventDefault()
|
|
|
|
if (fileUpload.value === "") {
|
|
fileDrop.classList.add('error');
|
|
fileDropTitle.innerHTML = 'No file selected!';
|
|
// Stop the function
|
|
return;
|
|
}
|
|
|
|
// Make form
|
|
const formData = new FormData();
|
|
|
|
formData.append("file", fileUpload.files[0]);
|
|
formData.append("alt", fileAlt.value);
|
|
formData.append("description", fileDescription.value);
|
|
formData.append("tags", fileTags.value);
|
|
|
|
// 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);
|
|
// }
|
|
// },
|
|
// });
|
|
|
|
|
|
fetch('/api/media/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
|
|
fileDrop.classList.remove('active');
|
|
fileDropTitle.innerHTML = 'Choose or Drop file';
|
|
});
|
|
});
|