From 511d340c453a7d0f056cf081e0756626ffec820c Mon Sep 17 00:00:00 2001 From: ana Date: Thu, 27 Jul 2023 06:06:08 +0000 Subject: [PATCH] front end work; added search --- app/public/css/app.css | 35 ++++-- app/public/css/index.css | 22 +++- app/public/js/index.js | 225 +++++++++++++++++++++------------------ app/types/db.ts | 13 +++ app/views/index.ejs | 81 +++++++------- 5 files changed, 226 insertions(+), 150 deletions(-) diff --git a/app/public/css/app.css b/app/public/css/app.css index edbdcf0..5a72026 100644 --- a/app/public/css/app.css +++ b/app/public/css/app.css @@ -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; } \ No newline at end of file diff --git a/app/public/css/index.css b/app/public/css/index.css index 01d023a..dee2bb3 100644 --- a/app/public/css/index.css +++ b/app/public/css/index.css @@ -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; diff --git a/app/public/js/index.js b/app/public/js/index.js index bb96da2..8fbbf66 100644 --- a/app/public/js/index.js +++ b/app/public/js/index.js @@ -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); -} \ No newline at end of file +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"); + } + } + }); +}); \ No newline at end of file diff --git a/app/types/db.ts b/app/types/db.ts index 87fd102..f3e2bb2 100644 --- a/app/types/db.ts +++ b/app/types/db.ts @@ -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) => { diff --git a/app/views/index.ejs b/app/views/index.ejs index 483bc49..7ee3da2 100644 --- a/app/views/index.ejs +++ b/app/views/index.ejs @@ -19,53 +19,54 @@
-

Embedder

-
-
-

Upload a file, copy paste, or drag n' drop into the dashed region

- -

-
-
-

- Select file expiration date: - -

-

Click the file to copy the url

-
-
+
+
+
+

Upload a file, copy paste, or drag n' drop into the dashed region

+ +

+
+
+

+ Select file expiration date: + +

+

Click the file to copy the url

+
+
<% if (Count > 0) { %>
    <% files.forEach(function(file) { %> -
  • +
  • <% if (extension(file.path) == ".mp4" || extension(file.path) == ".mov" || extension(file.path) == "webp") { %>