From 44da6f3720ade8e47f28e309a3fcafa32ede40ee Mon Sep 17 00:00:00 2001 From: waveringana Date: Sun, 4 Dec 2022 08:54:47 +0000 Subject: [PATCH] replace todo with embedder; add fullscreen support --- app/app.ts | 2 +- app/public/css/app.css | 28 ++++++++++++ app/public/css/home.css | 12 +++--- app/public/css/index.css | 92 ++++++++++++++++++++++++++-------------- app/public/js/index.js | 29 +++++++++++++ app/views/home.ejs | 2 +- app/views/index.ejs | 7 +-- 7 files changed, 130 insertions(+), 42 deletions(-) diff --git a/app/app.ts b/app/app.ts index e23229a..1fa2ff4 100644 --- a/app/app.ts +++ b/app/app.ts @@ -69,7 +69,7 @@ function onError(error: any) { } db.serialize(function() { - // create the database schema for the todos app + // create the database schema for the embedders app db.run("CREATE TABLE IF NOT EXISTS users ( \ id INTEGER PRIMARY KEY, \ username TEXT UNIQUE, \ diff --git a/app/public/css/app.css b/app/public/css/app.css index d2f2227..f871b6d 100644 --- a/app/public/css/app.css +++ b/app/public/css/app.css @@ -114,3 +114,31 @@ label { line-height: 20px; text-align: center; } + +.modal { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.8); + z-index: 9999; + } + + .modal img { + max-width: 100%; + max-height: 100%; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + } + + .modal video { + max-width: 100%; + max-height: 100%; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + } \ No newline at end of file diff --git a/app/public/css/home.css b/app/public/css/home.css index 7f54514..ecaf64d 100644 --- a/app/public/css/home.css +++ b/app/public/css/home.css @@ -1,9 +1,9 @@ -.todohome { +.embedderhome { margin: 130px 0 40px 0; position: relative; } -.todohome h1 { +.embedderhome h1 { position: absolute; top: -140px; width: 100%; @@ -16,19 +16,19 @@ text-rendering: optimizeLegibility; } -.todohome section { +.embedderhome section { padding-top: 1px; text-align: center; } -.todohome h2 { +.embedderhome h2 { padding-bottom: 48px; font-size: 28px; font-weight: 300; line-height: 1.5; } -.todohome .button { +.embedderhome .button { padding: 13px 45px; font-size: 16px; font-weight: 500; @@ -37,6 +37,6 @@ background: #d83f45; } -.todohome a.button { +.embedderhome a.button { text-decoration: none; } diff --git a/app/public/css/index.css b/app/public/css/index.css index 8238dbf..01d023a 100644 --- a/app/public/css/index.css +++ b/app/public/css/index.css @@ -41,7 +41,7 @@ body { display: none; } -.todoapp { +.embedderapp { background: #121212; margin: 130px 0 40px 0; position: relative; @@ -49,28 +49,28 @@ body { 0 25px 50px 0 rgba(0, 0, 0, 0.1); } -.todoapp input::-webkit-input-placeholder { +.embedderapp input::-webkit-input-placeholder { font-style: italic; font-weight: 400; color: #f5f5f5; text-align: center; } -.todoapp input::-moz-placeholder { +.embedderapp input::-moz-placeholder { font-style: italic; font-weight: 400; color: #f5f5f5; text-align: center; } -.todoapp input::input-placeholder { +.embedderapp input::input-placeholder { font-style: italic; font-weight: 400; color: #f5f5f5; text-align: center; } -.todoapp h1 { +.embedderapp h1 { position: absolute; top: -140px; width: 100%; @@ -83,7 +83,7 @@ body { text-rendering: optimizeLegibility; } -.new-todo, +.new-embedder, .edit { position: relative; margin: 0; @@ -98,7 +98,7 @@ body { -moz-osx-font-smoothing: grayscale; } -.new-todo { +.new-embedder { padding: 16px 16px 16px 60px; height: 65px; border: none; @@ -147,38 +147,38 @@ body { color: #484848; } -.todo-list { +.embedder-list { margin: 0; padding: 0; list-style: none; } -.todo-list li { +.embedder-list li { position: relative; font-size: 24px; } -.todo-list li:last-child { +.embedder-list li:last-child { border-bottom: none; } -.todo-list li.editing { +.embedder-list li.editing { border-bottom: none; padding: 0; } -.todo-list li.editing .edit { +.embedder-list li.editing .edit { display: block; width: calc(100% - 43px); padding: 12px 16px; margin: 0 0 0 43px; } -.todo-list li.editing .view { +.embedder-list li.editing .view { display: none; } -.todo-list li .toggle { +.embedder-list li .toggle { text-align: center; width: 40px; /* auto, since non-WebKit browsers doesn't support input styling */ @@ -192,11 +192,11 @@ body { appearance: none; } -.todo-list li .toggle { +.embedder-list li .toggle { opacity: 0; } -.todo-list li .toggle + label { +.embedder-list li .toggle + label { /* Firefox requires `#` to be escaped - https://bugzilla.mozilla.org/show_bug.cgi?id=922433 IE and Edge requires *everything* to be escaped to render, so we do that instead of just the `#` - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7157459/ @@ -206,11 +206,11 @@ body { background-position: center left; } -.todo-list li .toggle:checked + label { +.embedder-list li .toggle:checked + label { background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%2359A193%22%20stroke-width%3D%223%22%2F%3E%3Cpath%20fill%3D%22%233EA390%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22%2F%3E%3C%2Fsvg%3E'); } -.todo-list li label { +.embedder-list li label { word-break: break-all; padding: 15px 15px 15px 60px; display: block; @@ -220,16 +220,16 @@ body { color: #BB86FC; } -.todo-list li.completed label { +.embedder-list li.completed label { color: #949494; text-decoration: line-through; } -.todo-list li .destroy { +.embedder-list li .fullsize { display: none; position: absolute; top: 0; - right: 10px; + left: 0px; bottom: 0; width: 40px; height: 40px; @@ -239,27 +239,57 @@ body { transition: color 0.2s ease-out; } -.todo-list li .destroy:hover, -.todo-list li .destroy:focus { +.embedder-list li .fullsize:hover, +.embedder-list li .fullsize:focus { color: #C18585; } -.todo-list li .destroy:after { +.embedder-list li .fullsize:after { + content: '[]'; + display: block; + height: 100%; + line-height: 1.1; +} + +.embedder-list li:hover .fullsize { + display: block; +} + +.embedder-list li .destroy { + display: none; + position: absolute; + top: 0; + right: 0px; + bottom: 0; + width: 40px; + height: 40px; + margin: auto 0; + font-size: 30px; + color: #949494; + transition: color 0.2s ease-out; +} + +.embedder-list li .destroy:hover, +.embedder-list li .destroy:focus { + color: #C18585; +} + +.embedder-list li .destroy:after { content: '×'; display: block; height: 100%; line-height: 1.1; } -.todo-list li:hover .destroy { +.embedder-list li:hover .destroy { display: block; } -.todo-list li .edit { +.embedder-list li .edit { display: none; } -.todo-list li.editing:last-child { +.embedder-list li.editing:last-child { margin-bottom: -1px; } @@ -286,12 +316,12 @@ body { 0 17px 2px -6px rgba(0, 0, 0, 0.2); } -.todo-count { +.embedder-count { float: left; text-align: left; } -.todo-count strong { +.embedder-count strong { font-weight: 300; } @@ -366,11 +396,11 @@ html .clear-completed:active { */ @media screen and (-webkit-min-device-pixel-ratio:0) { .toggle-all, - .todo-list li .toggle { + .embedder-list li .toggle { background: none; } - .todo-list li .toggle { + .embedder-list li .toggle { height: 40px; } } diff --git a/app/public/js/index.js b/app/public/js/index.js index 7a8abb2..6033f43 100644 --- a/app/public/js/index.js +++ b/app/public/js/index.js @@ -141,3 +141,32 @@ function uploadFile(file) { 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; + + 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 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 diff --git a/app/views/home.ejs b/app/views/home.ejs index 9ad55f2..fb4aed5 100644 --- a/app/views/home.ejs +++ b/app/views/home.ejs @@ -13,7 +13,7 @@ -
+

Embedder

diff --git a/app/views/index.ejs b/app/views/index.ejs index fa99fcf..cb2de8c 100644 --- a/app/views/index.ejs +++ b/app/views/index.ejs @@ -18,7 +18,7 @@ return string.slice((string.lastIndexOf(".") - 2 >>> 0) + 2); %> -
+