Modal view, navbar, js folder structure

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/',
 	];

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;}
-}
+}
+/* #endregion */

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 on disk, keep username and relative path to image. ( $results[] = str_replace($GLOBALS["fullPath"], "", $path); is insecure.)
-            //Remove the full path to the gallery from the image path. Keep username and path to image.
             $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 = '
-<div class="card is-flex is-flex-direction-column is-justify-content-space-between gallery-img-card">
+<div class="card is-flex is-flex-direction-column is-justify-content-space-between gallery-img-card" data-user="%user" data-date="%timestamp" data-fname="%name">
     <div class="card-image">
         <figure class="image">
-            <img src="%path" alt="%name" class="card-image">
+            <img src="%path" alt="%name" class="card-image modal-target">
         </figure>
     </div>
     <div class="card-content">
@@ -79,16 +84,14 @@ $imageTemplate = '
     <link rel="shortcut icon" href="favicon.ico">
     <link rel="stylesheet" href="../css/normalize.css">
     <link rel="stylesheet" href="../css/style.css">
-    <link rel="stylesheet" href="../css/events.css">
     <link rel="stylesheet" href="../css/gallery.css">
     <link rel="stylesheet" href="../css/bulma.min.css">
     <meta name="theme-color" content="#024" />
     <title>Fotoverkstedet</title>
 </head>
 <body>
-    <header>Fotoverkstedet</header>
     <nav id="navbar" class="">
-		<?php echo navbar(0, ''); ?>
+        <?php echo navbar(1, 'galleri'); ?>
 		<?php echo loginbar(null, $pdo); ?>
 	</nav>
     <main class="card gallery-container">
@@ -107,15 +110,22 @@ $imageTemplate = '
             }
 
             $vars = [
-                "%user" =>  $imguser,
+                "%user"         =>  $imguser,
-                "%time" =>  $modTime,
+                "%time"         =>  $modTime,
-                "%name" =>  $displaypath,
+                "%timestamp"    =>  filemtime($fullPath . $value),
-                "%path" =>  "/galleri/" . $relativePath .$value,
+                "%name"         =>  $displaypath,
-                "%realname" =>  $realname
+                "%path"         =>  "/galleri/" . $relativePath .$value,
+                "%realname"     =>  $realname
             ];
             echo strtr($imageTemplate, $vars);
         }
         ?>
     </main>
+    <div id="modal" class="modal">
+        <span id="modal-close" class="modal-close">&times;</span>
+        <img id="modal-content" class="modal-content">
+        <div id="modal-caption" class="modal-caption"></div>
+    </div>
+    <script type="text/javascript" src="../js/galleri.js"></script>
 </body>
 </html>

www/index.php

@@ -42,7 +42,7 @@ $doorTime = date("H:i", $doorEntry->time);
 	<header class="landing">
 		<div id="imageSlideshow">
 			<?php  include("galleri/slideshow.php"); ?>
-			<script src="galleri/slideshow.js"></script>
+			<script src="js/slideshow.js"></script>
 		</div>
 		
 		<div class="info">

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