Modal view, navbar, js folder structure

This commit is contained in:
Felix Albrigtsen 2022-01-24 16:12:31 +01:00
parent a500b5eecc
commit 9e7436684c
6 changed files with 144 additions and 19 deletions

View File

@ -10,6 +10,7 @@ function navbar($depth, $active = NULL) {
'Kontakt' => 'kontakt', 'Kontakt' => 'kontakt',
'Webmail' => 'mail', 'Webmail' => 'mail',
//'Webmail' => 'https://webmail.pvv.ntnu.no/', //'Webmail' => 'https://webmail.pvv.ntnu.no/',
'Galleri' => 'galleri',
'Wiki' => 'pvv', 'Wiki' => 'pvv',
'Git' => 'https://git.pvv.ntnu.no/', 'Git' => 'https://git.pvv.ntnu.no/',
]; ];

View File

@ -2,6 +2,9 @@ body, main {
width: 100%; width: 100%;
margin: 0; margin: 0;
} }
main {
background-color: #ddd;
}
.gallery-container { .gallery-container {
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
@ -21,6 +24,91 @@ figure {
max-height: 45vh; 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) { @media only screen and (min-width:320px) {
.gallery-container {grid-template-columns: 1fr !important; } .gallery-container {grid-template-columns: 1fr !important; }
} }
@ -32,4 +120,5 @@ figure {
} }
@media only screen and (min-width: 1281px) { @media only screen and (min-width: 1281px) {
.gallery-container { grid-template-columns: repeat(4, 1fr) !important;} .gallery-container { grid-template-columns: repeat(4, 1fr) !important;}
} }
/* #endregion */

View File

@ -9,9 +9,9 @@ $userManager = new \pvv\admin\UserManager($pdo);
$as = new SimpleSAML_Auth_Simple('default-sp'); $as = new SimpleSAML_Auth_Simple('default-sp');
$as->requireAuth(); $as->requireAuth();
$attrs = $as->getAttributes(); $attrs = $as->getAttributes();
$uname = $attrs['uid'][0]; $loginname = $attrs['uid'][0];
if(!$uname){ if(!$loginname) {
header('Content-Type: text/plain', true, 403); header('Content-Type: text/plain', true, 403);
echo "Du må være logget inn for å se bildegalleriet.\r\n"; echo "Du må være logget inn for å se bildegalleriet.\r\n";
exit(); exit();
@ -19,9 +19,10 @@ if(!$uname){
$unamefile = __DIR__ . '/usernames.txt'; $unamefile = __DIR__ . '/usernames.txt';
$unamepairs = file($unamefile);
$relativePath = "/bilder/pvv-photos/"; $relativePath = "/bilder/pvv-photos/";
$allowedExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'svg', 'webp'];
$unamepairs = file($unamefile);
$fullPath = getcwd() . $relativePath; $fullPath = getcwd() . $relativePath;
function getDirContents($dir, &$results = array()) { function getDirContents($dir, &$results = array()) {
@ -29,13 +30,17 @@ function getDirContents($dir, &$results = array()) {
foreach ($files as $key => $value) { foreach ($files as $key => $value) {
$path = realpath($dir . DIRECTORY_SEPARATOR . $value); $path = realpath($dir . DIRECTORY_SEPARATOR . $value);
if (!is_dir($path)) { 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"]); $pos = strpos($path, $GLOBALS["fullPath"]);
if ($pos !== false) { if ($pos !== false) {
$cleanPath = substr_replace($path, "", $pos, strlen($GLOBALS["fullPath"])); $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 != "..") { } else if ($value != "." && $value != "..") {
//recursively scan directories //recursively scan directories
getDirContents($path, $results); getDirContents($path, $results);
@ -46,10 +51,10 @@ function getDirContents($dir, &$results = array()) {
$images = getDirContents($fullPath); $images = getDirContents($fullPath);
$imageTemplate = ' $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"> <div class="card-image">
<figure class="image"> <figure class="image">
<img src="%path" alt="%name" class="card-image"> <img src="%path" alt="%name" class="card-image modal-target">
</figure> </figure>
</div> </div>
<div class="card-content"> <div class="card-content">
@ -79,16 +84,14 @@ $imageTemplate = '
<link rel="shortcut icon" href="favicon.ico"> <link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="../css/normalize.css"> <link rel="stylesheet" href="../css/normalize.css">
<link rel="stylesheet" href="../css/style.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/gallery.css">
<link rel="stylesheet" href="../css/bulma.min.css"> <link rel="stylesheet" href="../css/bulma.min.css">
<meta name="theme-color" content="#024" /> <meta name="theme-color" content="#024" />
<title>Fotoverkstedet</title> <title>Fotoverkstedet</title>
</head> </head>
<body> <body>
<header>Fotoverkstedet</header>
<nav id="navbar" class=""> <nav id="navbar" class="">
<?php echo navbar(0, ''); ?> <?php echo navbar(1, 'galleri'); ?>
<?php echo loginbar(null, $pdo); ?> <?php echo loginbar(null, $pdo); ?>
</nav> </nav>
<main class="card gallery-container"> <main class="card gallery-container">
@ -107,15 +110,22 @@ $imageTemplate = '
} }
$vars = [ $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); echo strtr($imageTemplate, $vars);
} }
?> ?>
</main> </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> </body>
</html> </html>

View File

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

25
www/js/galleri.js Normal file
View File

@ -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