front end work; added search
This commit is contained in:
parent
525ab410a6
commit
511d340c45
5 changed files with 226 additions and 150 deletions
|
|
@ -1,13 +1,15 @@
|
|||
.nav {
|
||||
position: absolute;
|
||||
top: -130px;
|
||||
right: 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
left: 0;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.nav ul {
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
text-align: center;
|
||||
text-align: left;
|
||||
padding-inline-start: 0px;
|
||||
}
|
||||
|
||||
.nav li {
|
||||
|
|
@ -19,6 +21,23 @@
|
|||
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 {
|
||||
display: block;
|
||||
color: inherit;
|
||||
|
|
@ -30,7 +49,7 @@
|
|||
}
|
||||
|
||||
.nav button {
|
||||
height: 40px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
.nav button:hover {
|
||||
|
|
@ -72,7 +91,7 @@
|
|||
}
|
||||
|
||||
#dropArea {
|
||||
border: 2px dashed #ccc;
|
||||
border: 2px dashed #cccccc4f;
|
||||
border-radius: 20px;
|
||||
width: 100%;
|
||||
font-family: sans-serif;
|
||||
|
|
@ -158,4 +177,8 @@ label {
|
|||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.main {
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
|
@ -41,6 +41,24 @@ body {
|
|||
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 {
|
||||
background: #121212;
|
||||
margin: 130px 0 40px 0;
|
||||
|
|
@ -99,7 +117,7 @@ body {
|
|||
}
|
||||
|
||||
.new-embedder {
|
||||
padding: 16px 16px 16px 60px;
|
||||
padding: 16px 16px 16px 16px;
|
||||
height: 65px;
|
||||
border: none;
|
||||
background: rgba(0, 0, 0, 0.003);
|
||||
|
|
@ -212,7 +230,7 @@ body {
|
|||
|
||||
.embedder-list li label {
|
||||
word-break: break-all;
|
||||
padding: 15px 15px 15px 60px;
|
||||
padding: 15px 15px 15px 15px;
|
||||
display: block;
|
||||
line-height: 1.2;
|
||||
transition: color 0.4s;
|
||||
|
|
|
|||
|
|
@ -1,170 +1,191 @@
|
|||
/* eslint-env browser: true */
|
||||
|
||||
function copyURI(evt) {
|
||||
evt.preventDefault();
|
||||
navigator.clipboard.writeText(absolutePath(evt.target.getAttribute("src"))).then(() => {
|
||||
/* clipboard successfully set */
|
||||
console.log("copied");
|
||||
}, () => {
|
||||
/* clipboard write failed */
|
||||
console.log("failed");
|
||||
});
|
||||
evt.preventDefault();
|
||||
navigator.clipboard.writeText(absolutePath(evt.target.getAttribute("src"))).then(() => {
|
||||
/* clipboard successfully set */
|
||||
console.log("copied");
|
||||
}, () => {
|
||||
/* clipboard write failed */
|
||||
console.log("failed");
|
||||
});
|
||||
}
|
||||
|
||||
function copyA(evt) {
|
||||
evt.preventDefault();
|
||||
navigator.clipboard.writeText(absolutePath(evt.target.getAttribute("href"))).then(() => {
|
||||
console.log("copied");
|
||||
}, () => {
|
||||
console.log("failed");
|
||||
});
|
||||
evt.preventDefault();
|
||||
navigator.clipboard.writeText(absolutePath(evt.target.getAttribute("href"))).then(() => {
|
||||
console.log("copied");
|
||||
}, () => {
|
||||
console.log("failed");
|
||||
});
|
||||
}
|
||||
|
||||
function copyPath(evt) {
|
||||
navigator.clipboard.writeText(absolutePath(evt)).then(() => {
|
||||
console.log("copied");
|
||||
}, () => {
|
||||
console.log("failed");
|
||||
});
|
||||
navigator.clipboard.writeText(absolutePath(evt)).then(() => {
|
||||
console.log("copied");
|
||||
}, () => {
|
||||
console.log("failed");
|
||||
});
|
||||
}
|
||||
|
||||
function absolutePath (href) {
|
||||
let link = document.createElement("a");
|
||||
link.href = href;
|
||||
return link.href;
|
||||
let link = document.createElement("a");
|
||||
link.href = href;
|
||||
return link.href;
|
||||
}
|
||||
|
||||
function extension(string) {
|
||||
return string.slice((string.lastIndexOf(".") - 2 >>> 0) + 2);
|
||||
return string.slice((string.lastIndexOf(".") - 2 >>> 0) + 2);
|
||||
}
|
||||
|
||||
let dropArea = document.getElementById("dropArea");
|
||||
|
||||
["dragenter", "dragover", "dragleave", "drop"].forEach(eventName => {
|
||||
dropArea.addEventListener(eventName, preventDefaults, false);
|
||||
dropArea.addEventListener(eventName, preventDefaults, false);
|
||||
});
|
||||
|
||||
function preventDefaults (e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}
|
||||
|
||||
["dragenter", "dragover"].forEach(eventName => {
|
||||
dropArea.addEventListener(eventName, highlight, false);
|
||||
dropArea.addEventListener(eventName, highlight, false);
|
||||
})
|
||||
|
||||
;["dragleave", "drop"].forEach(eventName => {
|
||||
dropArea.addEventListener(eventName, unhighlight, false);
|
||||
dropArea.addEventListener(eventName, unhighlight, false);
|
||||
});
|
||||
|
||||
function highlight(e) {
|
||||
dropArea.classList.add("highlight");
|
||||
dropArea.classList.add("highlight");
|
||||
}
|
||||
|
||||
function unhighlight(e) {
|
||||
dropArea.classList.remove("highlight");
|
||||
dropArea.classList.remove("highlight");
|
||||
}
|
||||
|
||||
dropArea.addEventListener("drop", handleDrop, false);
|
||||
window.addEventListener("paste", handlePaste);
|
||||
|
||||
function handleDrop(e) {
|
||||
let dt = e.dataTransfer;
|
||||
let files = dt.files;
|
||||
handleFiles(files);
|
||||
let dt = e.dataTransfer;
|
||||
let files = dt.files;
|
||||
handleFiles(files);
|
||||
}
|
||||
|
||||
function handlePaste(e) {
|
||||
// Get the data of clipboard
|
||||
const clipboardItems = e.clipboardData.items;
|
||||
const items = [].slice.call(clipboardItems).filter(function (item) {
|
||||
// Filter the image items only
|
||||
return item.type.indexOf("image") !== -1;
|
||||
});
|
||||
if (items.length === 0) {
|
||||
return;
|
||||
}
|
||||
// Get the data of clipboard
|
||||
const clipboardItems = e.clipboardData.items;
|
||||
const items = [].slice.call(clipboardItems).filter(function (item) {
|
||||
// Filter the image items only
|
||||
return item.type.indexOf("image") !== -1;
|
||||
});
|
||||
if (items.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
const item = items[0];
|
||||
// Get the blob of image
|
||||
const blob = item.getAsFile();
|
||||
console.log(blob);
|
||||
const item = items[0];
|
||||
// Get the blob of image
|
||||
const blob = item.getAsFile();
|
||||
console.log(blob);
|
||||
|
||||
uploadFile(blob);
|
||||
previewFile(blob);
|
||||
uploadFile(blob);
|
||||
previewFile(blob);
|
||||
}
|
||||
|
||||
function handleFiles(files) {
|
||||
files = [...files];
|
||||
files.forEach(uploadFile);
|
||||
files.forEach(previewFile);
|
||||
files = [...files];
|
||||
files.forEach(uploadFile);
|
||||
files.forEach(previewFile);
|
||||
}
|
||||
|
||||
|
||||
function previewFile(file) {
|
||||
let reader = new FileReader();
|
||||
reader.readAsDataURL(file);
|
||||
reader.onloadend = function() {
|
||||
let img = document.createElement("img");
|
||||
img.src = reader.result;
|
||||
img.className = "image";
|
||||
document.getElementById("gallery").appendChild(img);
|
||||
console.log(document.getElementById("fileupload"));
|
||||
document.getElementById("fileupload").src = img.src;
|
||||
};
|
||||
let reader = new FileReader();
|
||||
reader.readAsDataURL(file);
|
||||
reader.onloadend = function() {
|
||||
let img = document.createElement("img");
|
||||
img.src = reader.result;
|
||||
img.className = "image";
|
||||
document.getElementById("gallery").appendChild(img);
|
||||
console.log(document.getElementById("fileupload"));
|
||||
document.getElementById("fileupload").src = img.src;
|
||||
};
|
||||
}
|
||||
|
||||
function uploadFile(file) {
|
||||
let xhr = new XMLHttpRequest();
|
||||
let formData = new FormData();
|
||||
let reader = new FileReader();
|
||||
let xhr = new XMLHttpRequest();
|
||||
let formData = new FormData();
|
||||
let reader = new FileReader();
|
||||
|
||||
xhr.open("POST", "/", true);
|
||||
xhr.open("POST", "/", true);
|
||||
|
||||
xhr.addEventListener("readystatechange", function(e) {
|
||||
if (xhr.readyState == 4 && xhr.status == 200) {
|
||||
location.reload();
|
||||
}
|
||||
else if (xhr.readyState == 4 && xhr.status != 200) {
|
||||
// Error. Inform the user
|
||||
}
|
||||
});
|
||||
xhr.addEventListener("readystatechange", function(e) {
|
||||
if (xhr.readyState == 4 && xhr.status == 200) {
|
||||
location.reload();
|
||||
}
|
||||
else if (xhr.readyState == 4 && xhr.status != 200) {
|
||||
// Error. Inform the user
|
||||
}
|
||||
});
|
||||
|
||||
if (file == null || file == undefined) {
|
||||
file = document.querySelector("#fileupload").files[0];
|
||||
}
|
||||
if (file == null || file == undefined) {
|
||||
file = document.querySelector("#fileupload").files[0];
|
||||
}
|
||||
|
||||
formData.append("fileupload", file);
|
||||
formData.append("expire", document.getElementById("expire").value);
|
||||
console.log(formData);
|
||||
xhr.send(formData);
|
||||
formData.append("fileupload", file);
|
||||
formData.append("expire", document.getElementById("expire").value);
|
||||
console.log(formData);
|
||||
xhr.send(formData);
|
||||
}
|
||||
|
||||
function openFullSize(imageUrl) {
|
||||
let modal = document.createElement("div");
|
||||
modal.classList.add("modal");
|
||||
let img = document.createElement("img");
|
||||
let video = document.createElement("video");
|
||||
img.src = imageUrl;
|
||||
video.src = imageUrl;
|
||||
video.controls = true;
|
||||
let modal = document.createElement("div");
|
||||
modal.classList.add("modal");
|
||||
let img = document.createElement("img");
|
||||
let video = document.createElement("video");
|
||||
img.src = imageUrl;
|
||||
video.src = imageUrl;
|
||||
video.controls = true;
|
||||
|
||||
if (extension(imageUrl) == ".jpg" || extension(imageUrl) == ".png" || extension(imageUrl) == ".gif" || extension(imageUrl) == ".jpeg" || extension(imageUrl) == ".webp") {
|
||||
modal.appendChild(img);
|
||||
}
|
||||
else if (extension(imageUrl) == ".mp4" || extension(imageUrl) == ".webm" || extension(imageUrl) == ".mov") {
|
||||
modal.appendChild(video);
|
||||
}
|
||||
if (extension(imageUrl) == ".jpg" || extension(imageUrl) == ".png" || extension(imageUrl) == ".gif" || extension(imageUrl) == ".jpeg" || extension(imageUrl) == ".webp") {
|
||||
modal.appendChild(img);
|
||||
}
|
||||
else if (extension(imageUrl) == ".mp4" || extension(imageUrl) == ".webm" || extension(imageUrl) == ".mov") {
|
||||
modal.appendChild(video);
|
||||
}
|
||||
|
||||
// Add the modal to the page
|
||||
document.body.appendChild(modal);
|
||||
// Add the modal to the page
|
||||
document.body.appendChild(modal);
|
||||
|
||||
// Add an event listener to close the modal when the user clicks on it
|
||||
modal.addEventListener('click', function() {
|
||||
modal.remove();
|
||||
});
|
||||
// Add an event listener to close the modal when the user clicks on it
|
||||
modal.addEventListener("click", function() {
|
||||
modal.remove();
|
||||
});
|
||||
}
|
||||
|
||||
function extension(string) {
|
||||
return string.slice((string.lastIndexOf(".") - 2 >>> 0) + 2);
|
||||
}
|
||||
let searchInput = document.getElementById("search");
|
||||
|
||||
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");
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
@ -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 */
|
||||
export function createUser(username: string, password: string) {
|
||||
return new Promise((resolve, reject) => {
|
||||
|
|
|
|||
|
|
@ -19,53 +19,54 @@
|
|||
</head>
|
||||
<body>
|
||||
<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">
|
||||
<h1>Embedder</h1>
|
||||
<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>
|
||||
<nav class="nav">
|
||||
<ul class="left-ul">
|
||||
<li class="user"><%= user.name || user.username %></li>
|
||||
<li>
|
||||
<form action="/logout" method="post">
|
||||
<button class="logout" type="submit"></button>
|
||||
</form>
|
||||
</li>
|
||||
<% if (user.name == "admin" || user.username == "admin") { %>
|
||||
<li>
|
||||
<button class="adduser" onclick="location.href='/adduser';"></a></button>
|
||||
</li>
|
||||
<% } %>
|
||||
</ul>
|
||||
<input type="text" id="search" name="search" placeholder="Search" value=""/>
|
||||
</nav>
|
||||
</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) { %>
|
||||
<section class="main">
|
||||
<ul class="embedder-list">
|
||||
<% files.forEach(function(file) { %>
|
||||
<li>
|
||||
<li id="<%= file.path %>" class="show">
|
||||
<form action="<%= file.url %>" method="post">
|
||||
<div class="view">
|
||||
<% if (extension(file.path) == ".mp4" || extension(file.path) == ".mov" || extension(file.path) == "webp") { %>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue