From 9e7436684cad5b7b42a48d50cd7c7cfd9a592d1e Mon Sep 17 00:00:00 2001 From: Felix Albrigtsen Date: Mon, 24 Jan 2022 16:12:31 +0100 Subject: [PATCH] Modal view, navbar, js folder structure --- inc/navbar.php | 1 + www/css/gallery.css | 91 +++++++++++++++++++++++++++++++- www/galleri/index.php | 44 +++++++++------ www/index.php | 2 +- www/js/galleri.js | 25 +++++++++ www/{galleri => js}/slideshow.js | 0 6 files changed, 144 insertions(+), 19 deletions(-) create mode 100644 www/js/galleri.js rename www/{galleri => js}/slideshow.js (100%) diff --git a/inc/navbar.php b/inc/navbar.php index 3c2643e..9d8475d 100644 --- a/inc/navbar.php +++ b/inc/navbar.php @@ -10,6 +10,7 @@ function navbar($depth, $active = NULL) { 'Kontakt' => 'kontakt', 'Webmail' => 'mail', //'Webmail' => 'https://webmail.pvv.ntnu.no/', + 'Galleri' => 'galleri', 'Wiki' => 'pvv', 'Git' => 'https://git.pvv.ntnu.no/', ]; diff --git a/www/css/gallery.css b/www/css/gallery.css index 7eb5656..d139179 100644 --- a/www/css/gallery.css +++ b/www/css/gallery.css @@ -2,6 +2,9 @@ body, main { width: 100%; margin: 0; } +main { + background-color: #ddd; +} .gallery-container { display: grid; grid-template-columns: repeat(3, 1fr); @@ -21,6 +24,91 @@ figure { max-height: 45vh; } +/* #region modal */ + +.modal-target:hover {opacity: 0.7;} + +/* The Modal (background) */ +.modal { + display: none; /* Hidden by default */ + position: fixed; /* Stay in place */ + z-index: 1; /* Sit on top */ + padding-top: 5vh; + left: 0; + top: 0; + width: 100%; + height: 100%; + overflow: auto; /* Enable scroll if needed */ + background-color: rgb(0,0,0); /* Fallback color */ + background-color: rgba(0,0,0,0.8); /* Black w/ opacity */ +} + +/* Modal Content (image) */ +.modal-content { + margin: auto; + display: block; + object-fit: scale-down; + overflow: visible; + + /* yolo, it all goes down from here */ + min-width: 60vw; + max-width: 90vw !important; + min-height: 60vh; + max-height: 80vh !important; + + width: auto; + height: auto; + opacity: 1 !important; +} + +/* Caption of Modal Image */ +.modal-caption { + margin: auto; + display: block; + width: 80%; + max-width: 90vw; + text-align: center; + color: white; + font-weight: 700; + font-size: 1em; + margin-top: 32px; +} + +.modal-content, .modal-caption { + -webkit-animation-name: zoom; + -webkit-animation-duration: 0.6s; + animation-name: zoom; + animation-duration: 0.6s; +} + +@-webkit-keyframes zoom { + from {-webkit-atransform:scale(0)} + to {-webkit-transform:scale(1)} +} + +@keyframes zoom { + from {transform:scale(0)} + to {transform:scale(1)} +} + +.modal-close { + position: absolute; + top: 15px; + right: 35px; + color: #f1f1f1; + font-size: 72px; + font-weight: bold; + transition: 0.3s; +} + +.modal-close:hover, .modal-close:focus { + color: #bbb; + text-decoration: none; + cursor: pointer; +} +/* #endregion modal */ + +/* #region screen-size media-rules */ @media only screen and (min-width:320px) { .gallery-container {grid-template-columns: 1fr !important; } } @@ -32,4 +120,5 @@ figure { } @media only screen and (min-width: 1281px) { .gallery-container { grid-template-columns: repeat(4, 1fr) !important;} -} \ No newline at end of file +} +/* #endregion */ \ No newline at end of file diff --git a/www/galleri/index.php b/www/galleri/index.php index 691b635..f596fef 100644 --- a/www/galleri/index.php +++ b/www/galleri/index.php @@ -9,9 +9,9 @@ $userManager = new \pvv\admin\UserManager($pdo); $as = new SimpleSAML_Auth_Simple('default-sp'); $as->requireAuth(); $attrs = $as->getAttributes(); -$uname = $attrs['uid'][0]; +$loginname = $attrs['uid'][0]; -if(!$uname){ +if(!$loginname) { header('Content-Type: text/plain', true, 403); echo "Du må være logget inn for å se bildegalleriet.\r\n"; exit(); @@ -19,9 +19,10 @@ if(!$uname){ $unamefile = __DIR__ . '/usernames.txt'; -$unamepairs = file($unamefile); - $relativePath = "/bilder/pvv-photos/"; +$allowedExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'svg', 'webp']; + +$unamepairs = file($unamefile); $fullPath = getcwd() . $relativePath; function getDirContents($dir, &$results = array()) { @@ -29,13 +30,17 @@ function getDirContents($dir, &$results = array()) { foreach ($files as $key => $value) { $path = realpath($dir . DIRECTORY_SEPARATOR . $value); if (!is_dir($path)) { - //$results[] = str_replace($GLOBALS["fullPath"], "", $path); // Works, but breaks if the image path contains the path to the gallery on the server - //Remove the full path to the gallery from the image path. Keep username and path to image. + //Remove the full path on disk, keep username and relative path to image. ( $results[] = str_replace($GLOBALS["fullPath"], "", $path); is insecure.) $pos = strpos($path, $GLOBALS["fullPath"]); if ($pos !== false) { $cleanPath = substr_replace($path, "", $pos, strlen($GLOBALS["fullPath"])); } - $results[] = $cleanPath; + + //Check if the file is an image + $ext = pathinfo($path, PATHINFO_EXTENSION); + if (in_array($ext, $GLOBALS["allowedExtensions"])) { + $results[] = $cleanPath; + } } else if ($value != "." && $value != "..") { //recursively scan directories getDirContents($path, $results); @@ -46,10 +51,10 @@ function getDirContents($dir, &$results = array()) { $images = getDirContents($fullPath); $imageTemplate = ' -
+
- %name + %name
@@ -79,16 +84,14 @@ $imageTemplate = ' - Fotoverkstedet -
Fotoverkstedet
@@ -107,15 +110,22 @@ $imageTemplate = ' } $vars = [ - "%user" => $imguser, - "%time" => $modTime, - "%name" => $displaypath, - "%path" => "/galleri/" . $relativePath .$value, - "%realname" => $realname + "%user" => $imguser, + "%time" => $modTime, + "%timestamp" => filemtime($fullPath . $value), + "%name" => $displaypath, + "%path" => "/galleri/" . $relativePath .$value, + "%realname" => $realname ]; echo strtr($imageTemplate, $vars); } ?>
+ + diff --git a/www/index.php b/www/index.php index 0edf990..74fd626 100644 --- a/www/index.php +++ b/www/index.php @@ -42,7 +42,7 @@ $doorTime = date("H:i", $doorEntry->time);
- +
diff --git a/www/js/galleri.js b/www/js/galleri.js new file mode 100644 index 0000000..9ba7960 --- /dev/null +++ b/www/js/galleri.js @@ -0,0 +1,25 @@ +// #region Modal +var modal = document.getElementById('modal'); + +var modalClose = document.getElementById('modal-close'); +modalClose.addEventListener('click', function() { + modal.style.display = "none"; +}); + +// global handler +document.addEventListener('click', function (e) { + if (e.target.className.indexOf('modal-target') !== -1) { + var img = e.target; + var modalImg = document.getElementById("modal-content"); + var captionText = document.getElementById("modal-caption"); + modal.style.display = "block"; + modalImg.src = img.src; + captionText.innerHTML = img.alt; + } +}); +// #endregion + +// #region sorting + + +// #endregion \ No newline at end of file diff --git a/www/galleri/slideshow.js b/www/js/slideshow.js similarity index 100% rename from www/galleri/slideshow.js rename to www/js/slideshow.js