diff options
| author | LarsVomMars | 2021-01-27 22:16:22 +0100 |
|---|---|---|
| committer | LarsVomMars | 2021-01-27 22:16:22 +0100 |
| commit | 0c45adc72d0f5c276509f2a6c5971be5dc7679aa (patch) | |
| tree | f565675db700190f239caf4e58bf01620cb4faf4 /profile/public | |
| parent | ed758229f14b2b609158357ed30527c0213d8fa7 (diff) | |
Hm
Diffstat (limited to 'profile/public')
| -rw-r--r-- | profile/public/index.html | 56 | ||||
| -rw-r--r-- | profile/public/script.js | 32 | ||||
| -rw-r--r-- | profile/public/style.css | 6 |
3 files changed, 69 insertions, 25 deletions
diff --git a/profile/public/index.html b/profile/public/index.html index 672f409..f8fdee5 100644 --- a/profile/public/index.html +++ b/profile/public/index.html @@ -1,32 +1,40 @@ <!DOCTYPE html> <html lang="de"> - <head> - <meta charset="UTF-8" /> - <meta name="viewport" content="width=device-width, initial-scale=1.0" /> - <link +<head> + <meta charset="UTF-8"/> + <meta name="viewport" content="width=device-width, initial-scale=1.0"/> + <link rel="stylesheet" href="https://unpkg.com/purecss@2.0.3/build/pure-min.css" integrity="sha384-cg6SkqEOCV1NbJoCu11+bm0NvBRc8IYLRGXkmNrqUBfTjmMYwNKPWBTIKyw9mHNJ" crossorigin="anonymous" - /> - <link rel="stylesheet" href="style.css" type="text/css" media="all" /> - <title>Steckbrief</title> - </head> + /> + <script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.9/cropper.min.js" + integrity="sha512-9pGiHYK23sqK5Zm0oF45sNBAX/JqbZEP7bSDHyt+nT3GddF+VFIcYNqREt0GDpmFVZI3LZ17Zu9nMMc9iktkCw==" + crossorigin="anonymous"></script> + <link rel="stylesheet" href="style.css" type="text/css" media="all"/> + <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.9/cropper.min.css" + integrity="sha512-w+u2vZqMNUVngx+0GVZYM21Qm093kAexjueWOv9e9nIeYJb1iEfiHC7Y+VvmP/tviQyA5IR32mwN/5hTEJx6Ng==" + crossorigin="anonymous"/> + <title>Steckbrief</title> +</head> - <body> - <div class="pure-menu pure-menu-horizontal"> - <a href="/" class="pure-menu-item pure-menu-link">Home</a> - <a href="/auth/api/logout" class="pure-menu-item pure-menu-link">Logout</a> - </div> - <main> - <h2 id="username"></h2> - <form class="pure-form pure-form-stacked"> - <fieldset> - <!-- TODO: Consider autosave --> - <button type="submit" class="pure-button pure-button-primary">Wohooo</button> - </fieldset> - </form> - </main> - <script src="script.js"></script> - </body> +<body> +<div class="pure-menu pure-menu-horizontal"> + <a href="/" class="pure-menu-item pure-menu-link">Home</a> + <a href="/auth/api/logout" class="pure-menu-item pure-menu-link">Logout</a> +</div> +<main> + <h2 id="username"></h2> + <form class="pure-form pure-form-stacked"> + <fieldset> + <button type="submit" class="pure-button pure-button-primary">Senden!?</button> + </fieldset> + </form> +</main> +<div class="popup"> + <img id="popup-img"> +</div> +<script src="script.js"></script> +</body> </html> diff --git a/profile/public/script.js b/profile/public/script.js index b927f9f..ba2284b 100644 --- a/profile/public/script.js +++ b/profile/public/script.js @@ -2,6 +2,21 @@ const fs = document.querySelector("fieldset"); const form = document.querySelector("form"); let init = true; +const popup = document.querySelector(".popup"); +const popupImage = document.querySelector("#popup-img"); +const cropper = new Cropper(popupImage, { // ration 2/3 + dragMode: 'move', + aspectRatio: 2 / 3, + autoCropArea: 0.65, + restore: false, + guides: false, + center: false, + highlight: false, + cropBoxMovable: false, + cropBoxResizable: false, + toggleDragModeOnDblclick: false, +}); + function updateHeading(user) { document.getElementById("username").textContent = `Steckbrief: ${user.name} ${user.middlename || ""} ${user.surname}`; } @@ -28,7 +43,22 @@ function appendQuestions(question) { field.value = question.answer || ""; field.placeholder = question.question; field.type = question.type; - if (question.type === "file") field.accept = "image/*"; + if (question.type === "file") { + field.accept = "image/*"; + field.addEventListener("input", e => { + const file = e.target.files[0]; + popupImage.file = file; + const reader = new FileReader(); + reader.onload = (function (aImg) { + return function (e) { + aImg.src = e.target.result; + }; + })(popupImage); + reader.readAsDataURL(file); + popupImage.style.display = "block !important"; + console.log(cropper); + }); + } div.appendChild(field); fs.insertBefore(div, fs.querySelector("button")); diff --git a/profile/public/style.css b/profile/public/style.css index 106e590..a30e7ef 100644 --- a/profile/public/style.css +++ b/profile/public/style.css @@ -132,3 +132,9 @@ img { height: 80%; margin-bottom: 12px; } + +.popup { + z-index: 10; + position: absolute; + display: none; +}
\ No newline at end of file |