mirror of
https://github.com/Derpy-Leggies/OnlyLegs.git
synced 2025-06-29 11:36:16 +00:00
Move JS into pre and post loading folders
This commit is contained in:
parent
266e959605
commit
654ab0eba3
7 changed files with 13 additions and 7 deletions
192
gallery/static/js/post/login.js
Normal file
192
gallery/static/js/post/login.js
Normal file
|
|
@ -0,0 +1,192 @@
|
|||
// Function to show login
|
||||
function showLogin() {
|
||||
// Create elements
|
||||
cancelBtn = document.createElement('button');
|
||||
cancelBtn.classList.add('btn-block');
|
||||
cancelBtn.innerHTML = 'nuuuuuuuu';
|
||||
cancelBtn.onclick = popupDissmiss;
|
||||
|
||||
loginBtn = document.createElement('button');
|
||||
loginBtn.classList.add('btn-block');
|
||||
loginBtn.classList.add('primary');
|
||||
loginBtn.innerHTML = 'Login';
|
||||
loginBtn.type = 'submit';
|
||||
loginBtn.setAttribute('form', 'loginForm');
|
||||
|
||||
// Create form
|
||||
loginForm = document.createElement('form');
|
||||
loginForm.id = 'loginForm';
|
||||
loginForm.setAttribute('onsubmit', 'return login(event);');
|
||||
|
||||
usernameInput = document.createElement('input');
|
||||
usernameInput.classList.add('input-block');
|
||||
usernameInput.type = 'text';
|
||||
usernameInput.placeholder = 'Namey';
|
||||
usernameInput.id = 'username';
|
||||
|
||||
passwordInput = document.createElement('input');
|
||||
passwordInput.classList.add('input-block');
|
||||
passwordInput.type = 'password';
|
||||
passwordInput.placeholder = 'Passywassy';
|
||||
passwordInput.id = 'password';
|
||||
|
||||
loginForm.appendChild(usernameInput);
|
||||
loginForm.appendChild(passwordInput);
|
||||
|
||||
popUpShow(
|
||||
'Login!',
|
||||
'Need an account? <span class="link" onclick="showRegister()">Register!</span>',
|
||||
loginForm,
|
||||
[cancelBtn, loginBtn]
|
||||
);
|
||||
}
|
||||
// Function to login
|
||||
function login(event) {
|
||||
// AJAX takes control of subby form :3
|
||||
event.preventDefault();
|
||||
|
||||
let formUsername = document.querySelector("#username").value;
|
||||
let formPassword = document.querySelector("#password").value;
|
||||
|
||||
if (formUsername === "" || formPassword === "") {
|
||||
addNotification("Please fill in all fields!!!!", 3);
|
||||
return;
|
||||
}
|
||||
|
||||
// Make form
|
||||
const formData = new FormData();
|
||||
formData.append("username", formUsername);
|
||||
formData.append("password", formPassword);
|
||||
|
||||
fetch('/auth/login', {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
}).then(response => {
|
||||
if (response.status === 200) {
|
||||
location.reload();
|
||||
} else {
|
||||
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;
|
||||
}
|
||||
}
|
||||
}).catch(error => {
|
||||
addNotification('Error logging in, blame someone', 2);
|
||||
});
|
||||
}
|
||||
// Function to show register
|
||||
function showRegister() {
|
||||
// Create buttons
|
||||
cancelBtn = document.createElement('button');
|
||||
cancelBtn.classList.add('btn-block');
|
||||
cancelBtn.innerHTML = 'nuuuuuuuu';
|
||||
cancelBtn.onclick = popupDissmiss;
|
||||
|
||||
registerBtn = document.createElement('button');
|
||||
registerBtn.classList.add('btn-block');
|
||||
registerBtn.classList.add('primary');
|
||||
registerBtn.innerHTML = 'Register';
|
||||
registerBtn.type = 'submit';
|
||||
registerBtn.setAttribute('form', 'registerForm');
|
||||
|
||||
// Create form
|
||||
registerForm = document.createElement('form');
|
||||
registerForm.id = 'registerForm';
|
||||
registerForm.setAttribute('onsubmit', 'return register(event);');
|
||||
|
||||
usernameInput = document.createElement('input');
|
||||
usernameInput.classList.add('input-block');
|
||||
usernameInput.type = 'text';
|
||||
usernameInput.placeholder = 'Namey';
|
||||
usernameInput.id = 'username';
|
||||
|
||||
emailInput = document.createElement('input');
|
||||
emailInput.classList.add('input-block');
|
||||
emailInput.type = 'text';
|
||||
emailInput.placeholder = 'E mail!';
|
||||
emailInput.id = 'email';
|
||||
|
||||
passwordInput = document.createElement('input');
|
||||
passwordInput.classList.add('input-block');
|
||||
passwordInput.type = 'password';
|
||||
passwordInput.placeholder = 'Passywassy';
|
||||
passwordInput.id = 'password';
|
||||
|
||||
passwordInputRepeat = document.createElement('input');
|
||||
passwordInputRepeat.classList.add('input-block');
|
||||
passwordInputRepeat.type = 'password';
|
||||
passwordInputRepeat.placeholder = 'Passywassy again!';
|
||||
passwordInputRepeat.id = 'password-repeat';
|
||||
|
||||
registerForm.appendChild(usernameInput);
|
||||
registerForm.appendChild(emailInput);
|
||||
registerForm.appendChild(passwordInput);
|
||||
registerForm.appendChild(passwordInputRepeat);
|
||||
|
||||
popUpShow(
|
||||
'Who are you?',
|
||||
'Already have an account? <span class="link" onclick="showLogin()">Login!</span>',
|
||||
registerForm,
|
||||
[cancelBtn, registerBtn]
|
||||
);
|
||||
}
|
||||
// Function to register
|
||||
function register(event) {
|
||||
// AJAX takes control of subby form
|
||||
event.preventDefault();
|
||||
|
||||
let formUsername = document.querySelector("#username").value;
|
||||
let formEmail = document.querySelector("#email").value;
|
||||
let formPassword = document.querySelector("#password").value;
|
||||
let formPasswordRepeat = document.querySelector("#password-repeat").value;
|
||||
|
||||
if (formUsername === "" || formEmail === "" || formPassword === "" || formPasswordRepeat === "") {
|
||||
addNotification("Please fill in all fields!!!!", 3);
|
||||
return;
|
||||
}
|
||||
|
||||
// Make form
|
||||
const formData = new FormData();
|
||||
formData.append("username", formUsername);
|
||||
formData.append("email", formEmail);
|
||||
formData.append("password", formPassword);
|
||||
formData.append("password-repeat", formPasswordRepeat);
|
||||
|
||||
// Send form to server
|
||||
fetch('/auth/login', {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
}).then(response => {
|
||||
if (response.status === 200) {
|
||||
if (response === "gwa gwa") {
|
||||
addNotification('Registered successfully! Now please login to continue', 1);
|
||||
showLogin();
|
||||
} else {
|
||||
for (let i = 0; i < response.length; i++) {
|
||||
addNotification(response[i], 2);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
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;
|
||||
}
|
||||
}
|
||||
}).catch(error => {
|
||||
addNotification('Error logging in, blame someone', 2);
|
||||
});
|
||||
}
|
||||
47
gallery/static/js/post/popup.js
Normal file
47
gallery/static/js/post/popup.js
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
function popUpShow(titleText, subtitleText, bodyContent=null, userActions=null) {
|
||||
// Get popup elements
|
||||
let popupSelector = document.querySelector('.pop-up');
|
||||
let headerSelector = document.querySelector('.pop-up-header');
|
||||
let actionsSelector = document.querySelector('.pop-up-controlls');
|
||||
|
||||
// Clear popup elements
|
||||
headerSelector.innerHTML = '';
|
||||
actionsSelector.innerHTML = '';
|
||||
|
||||
// Set popup header and subtitle
|
||||
let titleElement = document.createElement('h2');
|
||||
titleElement.innerHTML = titleText;
|
||||
headerSelector.appendChild(titleElement);
|
||||
|
||||
let subtitleElement = document.createElement('p');
|
||||
subtitleElement.innerHTML = subtitleText;
|
||||
headerSelector.appendChild(subtitleElement);
|
||||
|
||||
if (bodyContent) {
|
||||
headerSelector.appendChild(bodyContent);
|
||||
}
|
||||
|
||||
// Set buttons that will be displayed
|
||||
if (userActions) {
|
||||
// for each user action, add the element
|
||||
for (let i = 0; i < userActions.length; i++) {
|
||||
let action = userActions[i];
|
||||
actionsSelector.appendChild(action);
|
||||
}
|
||||
} else {
|
||||
actionsSelector.innerHTML = '<button class="btn-block" onclick="popupDissmiss()">Close</button>';
|
||||
}
|
||||
|
||||
// Stop scrolling and show popup
|
||||
document.querySelector("html").style.overflow = "hidden";
|
||||
popupSelector.style.display = 'block';
|
||||
setTimeout(function() { popupSelector.classList.add('active') }, 5); // 2ms delay to allow for css transition >:C
|
||||
}
|
||||
|
||||
function popupDissmiss() {
|
||||
let popupSelector = document.querySelector('.pop-up');
|
||||
|
||||
document.querySelector("html").style.overflow = "auto";
|
||||
popupSelector.classList.remove('active');
|
||||
setTimeout(function() { popupSelector.style.display = 'none'; }, 200);
|
||||
}
|
||||
313
gallery/static/js/post/uploadTab.js
Normal file
313
gallery/static/js/post/uploadTab.js
Normal file
|
|
@ -0,0 +1,313 @@
|
|||
// 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() {
|
||||
let uploadTab = document.querySelector(".upload-panel");
|
||||
|
||||
// Stop scrolling and open upload tab
|
||||
document.querySelector("html").style.overflow = "hidden";
|
||||
uploadTab.style.display = "block";
|
||||
setTimeout(function () { uploadTab.classList.add("open"); }, 5);
|
||||
}
|
||||
|
||||
// close upload tab
|
||||
function closeUploadTab() {
|
||||
let uploadTab = document.querySelector(".upload-panel");
|
||||
let uploadTabContainer = document.querySelector(".upload-panel .container");
|
||||
|
||||
// un-Stop scrolling and close upload tab
|
||||
document.querySelector("html").style.overflow = "auto";
|
||||
uploadTab.classList.remove("open");
|
||||
setTimeout(function () {
|
||||
uploadTab.style.display = "none";
|
||||
|
||||
uploadTabContainer.style.transform = "";
|
||||
uploadTab.dataset.lastY = 0;
|
||||
}, 250);
|
||||
}
|
||||
|
||||
// toggle upload tab
|
||||
function toggleUploadTab() {
|
||||
let uploadTab = document.querySelector(".upload-panel");
|
||||
|
||||
if (uploadTab.classList.contains("open")) {
|
||||
closeUploadTab();
|
||||
} else {
|
||||
openUploadTab();
|
||||
}
|
||||
}
|
||||
|
||||
function tabDragStart(event) {
|
||||
event.preventDefault();
|
||||
|
||||
let uploadTab = document.querySelector(".upload-panel .container");
|
||||
let offset = uploadTab.getBoundingClientRect().y;
|
||||
|
||||
uploadTab.classList.add("dragging");
|
||||
|
||||
document.addEventListener('touchmove', event => {
|
||||
if (uploadTab.classList.contains("dragging")) {
|
||||
if (event.touches[0].clientY - offset >= 0) {
|
||||
uploadTab.dataset.lastY = event.touches[0].clientY;
|
||||
} else {
|
||||
uploadTab.dataset.lastY = offset;
|
||||
}
|
||||
|
||||
uploadTab.style.transform = `translateY(${uploadTab.dataset.lastY - offset}px)`;
|
||||
}
|
||||
});
|
||||
}
|
||||
function tabDragStopped(event) {
|
||||
event.preventDefault();
|
||||
|
||||
let 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(function () { uploadTab.style.transition = ""; }, 250);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Edging the file plunge :3
|
||||
function fileActivate(event) {
|
||||
event.preventDefault()
|
||||
|
||||
let fileDrop = document.querySelector('.fileDrop-block');
|
||||
let fileDropTitle = fileDrop.querySelector('.status');
|
||||
|
||||
fileDrop.classList.remove('error');
|
||||
fileDrop.classList.add('edging');
|
||||
fileDropTitle.innerHTML = 'Drop to upload!';
|
||||
}
|
||||
function fileDefault() {
|
||||
let fileDrop = document.querySelector('.fileDrop-block');
|
||||
let fileDropTitle = fileDrop.querySelector('.status');
|
||||
|
||||
fileDrop.classList.remove('error');
|
||||
fileDrop.classList.remove('edging');
|
||||
fileDropTitle.innerHTML = 'Choose or Drop file';
|
||||
}
|
||||
|
||||
function fileDropHandle(event) {
|
||||
event.preventDefault()
|
||||
|
||||
let fileDrop = document.querySelector('.fileDrop-block');
|
||||
let fileUpload = fileDrop.querySelector('#file');
|
||||
|
||||
fileUpload.files = event.dataTransfer.files;
|
||||
|
||||
fileDefault();
|
||||
fileChanged();
|
||||
}
|
||||
|
||||
function fileChanged() {
|
||||
let dropBlock = document.querySelector('.fileDrop-block');
|
||||
let dropBlockStatus = dropBlock.querySelector('.status');
|
||||
let dropBlockInput = dropBlock.querySelector('#file');
|
||||
|
||||
if (dropBlockInput.value !== "") {
|
||||
dropBlock.classList.add('active');
|
||||
dropBlockStatus.innerHTML = dropBlockInput.files[0].name;
|
||||
} else {
|
||||
fileDefault();
|
||||
}
|
||||
}
|
||||
|
||||
function clearUpload() {
|
||||
let fileDrop = document.querySelector('#uploadForm');
|
||||
|
||||
let fileUpload = fileDrop.querySelector('#file');
|
||||
let fileAlt = fileDrop.querySelector('#alt');
|
||||
let fileDescription = fileDrop.querySelector('#description');
|
||||
let 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
|
||||
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");
|
||||
|
||||
let fileDrop = uploadForm.querySelector('.fileDrop-block');
|
||||
let fileDropTitle = fileDrop.querySelector('.status');
|
||||
let fileUpload = fileDrop.querySelector('#file');
|
||||
|
||||
let fileAlt = uploadForm.querySelector('#alt');
|
||||
let fileDescription = uploadForm.querySelector('#description');
|
||||
let 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
|
||||
let 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/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';
|
||||
});
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue