waveringana/embedder
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

front end work; added search

Browse source
This commit is contained in:
ana 2023-07-27 06:06:08 +00:00
parent 525ab410a6
commit 511d340c45
5 changed files with 226 additions and 150 deletions
Download patch file Download diff file Expand all files Collapse all files

35
app/public/css/app.css
View file

@ -1,13 +1,15 @@
.nav { .nav {
position: absolute; display: flex;
top: -130px; justify-content: space-between;
right: 0; left: 0;
padding-bottom: 10px;
} }
.nav ul { .nav ul {
margin: 0; margin: 0;
list-style: none; list-style: none;
text-align: center; text-align: left;
padding-inline-start: 0px;
} }
.nav li { .nav li {
@ -19,6 +21,23 @@
line-height: 40px; line-height: 40px;
} }
#search {
padding: 6px 12px;
background: rgb(31, 32, 35);
border: 1px solid rgb(60, 63, 68);
border-radius: 4px;
font-size: 13px;
color: rgb(247, 248, 248);
appearance: none;
transition: border 0.15s ease 0s;
:focus{
outline: none;
box-shadow: none;
border-color: rgb(100, 153, 255);
}
}
.nav a { .nav a {
display: block; display: block;
color: inherit; color: inherit;
@ -30,7 +49,7 @@
} }
.nav button { .nav button {
height: 40px; height: 14px;
} }
.nav button:hover { .nav button:hover {
@ -72,7 +91,7 @@
} }
#dropArea { #dropArea {
border: 2px dashed #ccc; border: 2px dashed #cccccc4f;
border-radius: 20px; border-radius: 20px;
width: 100%; width: 100%;
font-family: sans-serif; font-family: sans-serif;
@ -158,4 +177,8 @@ label {
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
}
.main {
padding-top: 10px;
} }

22
app/public/css/index.css
View file

@ -41,6 +41,24 @@ body {
display: none; display: none;
} }
@keyframes slideaway {
0% { transform: translateY(0); opacity: 1; }
100% { transform: translateY(40px); opacity: 0; }
}
.hide {
animation: slideaway 200ms forwards;
}
@keyframes slideback {
0% { transform: translateY(40px); opacity: 0; }
100% { transform: translateY(0); opacity: 1; }
}
.show {
animation: slideback 200ms forwards;
}
.embedderapp { .embedderapp {
background: #121212; background: #121212;
margin: 130px 0 40px 0; margin: 130px 0 40px 0;
@ -99,7 +117,7 @@ body {
} }
.new-embedder { .new-embedder {
padding: 16px 16px 16px 60px; padding: 16px 16px 16px 16px;
height: 65px; height: 65px;
border: none; border: none;
background: rgba(0, 0, 0, 0.003); background: rgba(0, 0, 0, 0.003);
@ -212,7 +230,7 @@ body {
.embedder-list li label { .embedder-list li label {
word-break: break-all; word-break: break-all;
padding: 15px 15px 15px 60px; padding: 15px 15px 15px 15px;
display: block; display: block;
line-height: 1.2; line-height: 1.2;
transition: color 0.4s; transition: color 0.4s;

225
app/public/js/index.js
View file

@ -1,170 +1,191 @@
/* eslint-env browser: true */ /* eslint-env browser: true */
function copyURI(evt) { function copyURI(evt) {
evt.preventDefault(); evt.preventDefault();
navigator.clipboard.writeText(absolutePath(evt.target.getAttribute("src"))).then(() => { navigator.clipboard.writeText(absolutePath(evt.target.getAttribute("src"))).then(() => {
/* clipboard successfully set */ /* clipboard successfully set */
console.log("copied"); console.log("copied");
}, () => { }, () => {
/* clipboard write failed */ /* clipboard write failed */
console.log("failed"); console.log("failed");
}); });
} }
function copyA(evt) { function copyA(evt) {
evt.preventDefault(); evt.preventDefault();
navigator.clipboard.writeText(absolutePath(evt.target.getAttribute("href"))).then(() => { navigator.clipboard.writeText(absolutePath(evt.target.getAttribute("href"))).then(() => {
console.log("copied"); console.log("copied");
}, () => { }, () => {
console.log("failed"); console.log("failed");
}); });
} }
function copyPath(evt) { function copyPath(evt) {
navigator.clipboard.writeText(absolutePath(evt)).then(() => { navigator.clipboard.writeText(absolutePath(evt)).then(() => {
console.log("copied"); console.log("copied");
}, () => { }, () => {
console.log("failed"); console.log("failed");
}); });
} }
function absolutePath (href) { function absolutePath (href) {
let link = document.createElement("a"); let link = document.createElement("a");
link.href = href; link.href = href;
return link.href; return link.href;
} }
function extension(string) { function extension(string) {
return string.slice((string.lastIndexOf(".") - 2 >>> 0) + 2); return string.slice((string.lastIndexOf(".") - 2 >>> 0) + 2);
} }
let dropArea = document.getElementById("dropArea"); let dropArea = document.getElementById("dropArea");
["dragenter", "dragover", "dragleave", "drop"].forEach(eventName => { ["dragenter", "dragover", "dragleave", "drop"].forEach(eventName => {
dropArea.addEventListener(eventName, preventDefaults, false); dropArea.addEventListener(eventName, preventDefaults, false);
}); });
function preventDefaults (e) { function preventDefaults (e) {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
} }
["dragenter", "dragover"].forEach(eventName => { ["dragenter", "dragover"].forEach(eventName => {
dropArea.addEventListener(eventName, highlight, false); dropArea.addEventListener(eventName, highlight, false);
}) })
;["dragleave", "drop"].forEach(eventName => { ;["dragleave", "drop"].forEach(eventName => {
dropArea.addEventListener(eventName, unhighlight, false); dropArea.addEventListener(eventName, unhighlight, false);
}); });
function highlight(e) { function highlight(e) {
dropArea.classList.add("highlight"); dropArea.classList.add("highlight");
} }
function unhighlight(e) { function unhighlight(e) {
dropArea.classList.remove("highlight"); dropArea.classList.remove("highlight");
} }
dropArea.addEventListener("drop", handleDrop, false); dropArea.addEventListener("drop", handleDrop, false);
window.addEventListener("paste", handlePaste); window.addEventListener("paste", handlePaste);
function handleDrop(e) { function handleDrop(e) {
let dt = e.dataTransfer; let dt = e.dataTransfer;
let files = dt.files; let files = dt.files;
handleFiles(files); handleFiles(files);
} }
function handlePaste(e) { function handlePaste(e) {
// Get the data of clipboard // Get the data of clipboard
const clipboardItems = e.clipboardData.items; const clipboardItems = e.clipboardData.items;
const items = [].slice.call(clipboardItems).filter(function (item) { const items = [].slice.call(clipboardItems).filter(function (item) {
// Filter the image items only // Filter the image items only
return item.type.indexOf("image") !== -1; return item.type.indexOf("image") !== -1;
}); });
if (items.length === 0) { if (items.length === 0) {
return; return;
} }
const item = items[0]; const item = items[0];
// Get the blob of image // Get the blob of image
const blob = item.getAsFile(); const blob = item.getAsFile();
console.log(blob); console.log(blob);
uploadFile(blob); uploadFile(blob);
previewFile(blob); previewFile(blob);
} }
function handleFiles(files) { function handleFiles(files) {
files = [...files]; files = [...files];
files.forEach(uploadFile); files.forEach(uploadFile);
files.forEach(previewFile); files.forEach(previewFile);
} }
function previewFile(file) { function previewFile(file) {
let reader = new FileReader(); let reader = new FileReader();
reader.readAsDataURL(file); reader.readAsDataURL(file);
reader.onloadend = function() { reader.onloadend = function() {
let img = document.createElement("img"); let img = document.createElement("img");
img.src = reader.result; img.src = reader.result;
img.className = "image"; img.className = "image";
document.getElementById("gallery").appendChild(img); document.getElementById("gallery").appendChild(img);
console.log(document.getElementById("fileupload")); console.log(document.getElementById("fileupload"));
document.getElementById("fileupload").src = img.src; document.getElementById("fileupload").src = img.src;
}; };
} }
function uploadFile(file) { function uploadFile(file) {
let xhr = new XMLHttpRequest(); let xhr = new XMLHttpRequest();
let formData = new FormData(); let formData = new FormData();
let reader = new FileReader(); let reader = new FileReader();
xhr.open("POST", "/", true); xhr.open("POST", "/", true);
xhr.addEventListener("readystatechange", function(e) { xhr.addEventListener("readystatechange", function(e) {
if (xhr.readyState == 4 && xhr.status == 200) { if (xhr.readyState == 4 && xhr.status == 200) {
location.reload(); location.reload();
} }
else if (xhr.readyState == 4 && xhr.status != 200) { else if (xhr.readyState == 4 && xhr.status != 200) {
// Error. Inform the user // Error. Inform the user
} }
}); });
if (file == null || file == undefined) { if (file == null || file == undefined) {
file = document.querySelector("#fileupload").files[0]; file = document.querySelector("#fileupload").files[0];
} }
formData.append("fileupload", file); formData.append("fileupload", file);
formData.append("expire", document.getElementById("expire").value); formData.append("expire", document.getElementById("expire").value);
console.log(formData); console.log(formData);
xhr.send(formData); xhr.send(formData);
} }
function openFullSize(imageUrl) { function openFullSize(imageUrl) {
let modal = document.createElement("div"); let modal = document.createElement("div");
modal.classList.add("modal"); modal.classList.add("modal");
let img = document.createElement("img"); let img = document.createElement("img");
let video = document.createElement("video"); let video = document.createElement("video");
img.src = imageUrl; img.src = imageUrl;
video.src = imageUrl; video.src = imageUrl;
video.controls = true; video.controls = true;
if (extension(imageUrl) == ".jpg" || extension(imageUrl) == ".png" || extension(imageUrl) == ".gif" || extension(imageUrl) == ".jpeg" || extension(imageUrl) == ".webp") { if (extension(imageUrl) == ".jpg" || extension(imageUrl) == ".png" || extension(imageUrl) == ".gif" || extension(imageUrl) == ".jpeg" || extension(imageUrl) == ".webp") {
modal.appendChild(img); modal.appendChild(img);
} }
else if (extension(imageUrl) == ".mp4" || extension(imageUrl) == ".webm" || extension(imageUrl) == ".mov") { else if (extension(imageUrl) == ".mp4" || extension(imageUrl) == ".webm" || extension(imageUrl) == ".mov") {
modal.appendChild(video); modal.appendChild(video);
} }
// Add the modal to the page // Add the modal to the page
document.body.appendChild(modal); document.body.appendChild(modal);
// Add an event listener to close the modal when the user clicks on it // Add an event listener to close the modal when the user clicks on it
modal.addEventListener('click', function() { modal.addEventListener("click", function() {
modal.remove(); modal.remove();
}); });
} }
function extension(string) { let searchInput = document.getElementById("search");
return string.slice((string.lastIndexOf(".") - 2 >>> 0) + 2);
} searchInput.addEventListener("input", () => {
let searchValue = searchInput.value;
let mediaList = document.querySelectorAll("ul.embedder-list li");
mediaList.forEach((li) => {
if (!li.id.toLowerCase().includes(searchValue)) { //make lowercase to allow case insensitivity
li.classList.add("hide");
li.classList.remove("show");
li.addEventListener("animationend", function() {
if (searchInput.value !== "") {
this.style.display = "none";
}
}, {once: true}); // The {once: true} option automatically removes the event listener after it has been called
} else {
li.style.display = "";
li.classList.remove("hide");
if (searchValue === "" && !li.classList.contains("show")) {
li.classList.add("show");
}
}
});
});

13
app/types/db.ts
View file

@ -46,6 +46,19 @@ export function updateDatabase(oldVersion: number, newVersion: number){
} }
} }
/**Searches the database and returns images with partial or exact keysearches */
export function searchImages(imagename: string, partial: boolean) {
return new Promise((resolve, reject) => {
console.log(`searching for ${imagename}`);
});
}
export function updateImageName(oldimagename: string, newname:string) {
return new Promise((resolve, reject) => {
console.log(`updating ${oldimagename} to ${newname}`);
});
}
/**Inserts a new user to the database */ /**Inserts a new user to the database */
export function createUser(username: string, password: string) { export function createUser(username: string, password: string) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {

81
app/views/index.ejs
View file

@ -19,53 +19,54 @@
</head> </head>
<body> <body>
<section class="embedderapp"> <section class="embedderapp">
<nav class="nav">
<ul>
<li class="user"><%= user.name || user.username %></li>
<li>
<form action="/logout" method="post">
<button class="logout" type="submit">Sign out</button>
</form>
</li>
<% if (user.name == "admin" || user.username == "admin") { %>
<li>
<button class="adduser" onclick="location.href='/adduser';">Add user</a></button>
</li>
<% } %>
</ul>
</nav>
<header class="header"> <header class="header">
<h1>Embedder</h1> <h1>Embedder</h1>
<form action="/" method="post" encType="multipart/form-data"> <nav class="nav">
<div id="dropArea"> <ul class="left-ul">
<p class="dragregion">Upload a file, copy paste, or drag n' drop into the dashed region</p> <li class="user"><%= user.name || user.username %></li>
<div id="gallery"></div> <li>
<p class="dragregion"><input class="" type="file" id="fileupload" name="fileupload"><input type="button" value="Upload" id="submit" onclick="uploadFile()"></p> <form action="/logout" method="post">
<br> <button class="logout" type="submit"></button>
<br> </form>
<p class="dragregion"> </li>
Select file expiration date: <% if (user.name == "admin" || user.username == "admin") { %>
<select name="expire" id="expire"> <li>
<option value="0.00069">1 minute</option> <button class="adduser" onclick="location.href='/adduser';"></a></button>
<option value="0.00347">5 minutes</option> </li>
<option value="0.0417">1 hour</option> <% } %>
<option value="0.25">6 hours</option> </ul>
<option value="1">1 day</option> <input type="text" id="search" name="search" placeholder="Search" value=""/>
<option value="7">7 days</option> </nav>
<option value="14">14 days</option>
<option value="30">30 days</option>
<option selected value="">never</option>
</select>
</p>
<p class="dragregion">Click the file to copy the url</p>
</div>
</form>
</header> </header>
<form action="/" method="post" encType="multipart/form-data">
<div id="dropArea">
<p class="dragregion">Upload a file, copy paste, or drag n' drop into the dashed region</p>
<div id="gallery"></div>
<p class="dragregion"><input class="" type="file" id="fileupload" name="fileupload"><input type="button" value="Upload" id="submit" onclick="uploadFile()"></p>
<br>
<br>
<p class="dragregion">
Select file expiration date:
<select name="expire" id="expire">
<option value="0.00069">1 minute</option>
<option value="0.00347">5 minutes</option>
<option value="0.0417">1 hour</option>
<option value="0.25">6 hours</option>
<option value="1">1 day</option>
<option value="7">7 days</option>
<option value="14">14 days</option>
<option value="30">30 days</option>
<option selected value="">never</option>
</select>
</p>
<p class="dragregion">Click the file to copy the url</p>
</div>
</form>
<% if (Count > 0) { %> <% if (Count > 0) { %>
<section class="main"> <section class="main">
<ul class="embedder-list"> <ul class="embedder-list">
<% files.forEach(function(file) { %> <% files.forEach(function(file) { %>
<li> <li id="<%= file.path %>" class="show">
<form action="<%= file.url %>" method="post"> <form action="<%= file.url %>" method="post">
<div class="view"> <div class="view">
<% if (extension(file.path) == ".mp4" || extension(file.path) == ".mov" || extension(file.path) == "webp") { %> <% if (extension(file.path) == ".mp4" || extension(file.path) == ".mov" || extension(file.path) == "webp") { %>