Verified Commit d36ff64f authored by Che's avatar Che

Cleanup pure JS concept

- Fix leakage of login credentials on mouseover of a tags (by removing them)
- Cleanup stylesheet (and emulate link behaviour)
- Move script tag to end of body
- Bind onclick function to body instead of document
- Simplify onclick function (by removing preventDefault workaround)
parent 4d5647ff
......@@ -47,13 +47,7 @@ echo " height: " . $size . "px;\n";
margin: 0px 1px 0px 0px;
}
figure a {
width: inherit;
height: inherit;
line-height: inherit;
}
figure a img {
figure img {
height: inherit;
<?php
if (!isset($_GET['ratio']) || filter_var($_GET['ratio'], FILTER_SANITIZE_STRING) != "y") {
......@@ -63,6 +57,10 @@ if (!isset($_GET['ratio']) || filter_var($_GET['ratio'], FILTER_SANITIZE_STRING)
line-height: inherit;
}
figure img:hover {
cursor: pointer;
}
.wrapImages {
height: inherit;
max-height: inherit;
......@@ -140,7 +138,66 @@ if (!isset($_GET['ratio']) || filter_var($_GET['ratio'], FILTER_SANITIZE_STRING)
color: #fff;
}
</style>
</head>
<body>
<!-- The Net.Art Generator Gallery containing up to 2.800 images! -->
<!-- GCB (d7dd0d), 2018 -->
<div class="wrapImages">
<?php
// imgLimit defines the number of images which should be drawn
$imgLimit = 2800;
// fullpath is the pattern for selecting the images from the source directory
$fullpath = "/var/www/gallery/thumbs/*@*.*";
// newbase defines the base path to use for the image links
$newbase = "thumbs/";
// we use GLOB_NOSORT since we don't want to sort based on the file name
$images = glob( $fullpath, GLOB_NOSORT );
// we sort the array ourselves: depending on file modification date
usort($images, function($a, $b) {
return filemtime($a) < filemtime($b);
});
// Don't use captions by default.
$useCaption = false;
if (isset($_GET['caption'])) {
if (filter_var($_GET['caption'], FILTER_SANITIZE_URL) == "y") {
$useCaption = true;
}
}
foreach ($images as $image) {
$child = basename($image);
$expChild = explode("@", $child);
$signature = explode("-", $expChild[0], 2);
$author = $signature[0];
$title = str_replace("_", " ", $signature[1]);
$entry = "<figure><img src='" . $newbase . $child . "' alt='" . $author . ": " . $title . "'></figure>";
if ($useCaption) {
$expStamp = explode("_", pathinfo($expChild[1])['filename']);
$expTime = explode(".", $expStamp[2]);
$timestamp = $expStamp[1] . " " . $expStamp[0] . " " . $expStamp[3] . ", " . $expTime[0] . ":" . $expTime[1] . ":" . $expTime[2];
$entry = "<figure><img src='" . $newbase . $child . "' alt='" . $author . ": " . $title . "'><figcaption>" . $author . ": " . $title . "<br>" . $timestamp . "</figcaption></figure>";
}
echo $entry;
}
$imgCount = count($images);
if ($imgLimit > $imgCount) {
// Fill the remaining page with placeholders
$curLimit = $imgLimit - $imgCount;
$curVal = 0;
while ($curLimit > $curVal) {
echo "<figure></figure>";
$curVal++;
}
}
?>
</div>
<script>
function hideModal() {
var bg = document.getElementById("dim");
......@@ -205,10 +262,8 @@ if (!isset($_GET['ratio']) || filter_var($_GET['ratio'], FILTER_SANITIZE_STRING)
// Bind to document to grab clicks on thumbnails
(function() {
document.onclick = function(e) {
if (e.target.tagName === "IMG") {
e.preventDefault();
} else {
document.body.onclick = function(e) {
if (e.target.tagName !== "IMG") {
return
}
......@@ -217,65 +272,5 @@ if (!isset($_GET['ratio']) || filter_var($_GET['ratio'], FILTER_SANITIZE_STRING)
}
}());
</script>
</head>
<body>
<!-- The Net.Art Generator Gallery containing up to 2.800 images! -->
<!-- GCB (d7dd0d), 2018 -->
<div class="wrapImages">
<?php
// imgLimit defines the number of images which should be drawn
$imgLimit = 2800;
// fullpath is the pattern for selecting the images from the source directory
$fullpath = "/var/www/gallery/thumbs/*@*.*";
// newbase defines the base path to use for the image links
$newbase = "thumbs/";
// we use GLOB_NOSORT since we don't want to sort based on the file name
$images = glob( $fullpath, GLOB_NOSORT );
// we sort the array ourselves: depending on file modification date
usort($images, function($a, $b) {
return filemtime($a) < filemtime($b);
});
// Don't use captions by default.
$useCaption = false;
if (isset($_GET['caption'])) {
if (filter_var($_GET['caption'], FILTER_SANITIZE_URL) == "y") {
$useCaption = true;
}
}
foreach ($images as $image) {
$child = basename($image);
$expChild = explode("@", $child);
$signature = explode("-", $expChild[0], 2);
$author = $signature[0];
$title = str_replace("_", " ", $signature[1]);
$entry = "<figure><a href='#" . $child . "'><img src='" . $newbase . $child . "' alt='" . $author . ": " . $title . "'></a></figure>";
if ($useCaption) {
$expStamp = explode("_", pathinfo($expChild[1])['filename']);
$expTime = explode(".", $expStamp[2]);
$timestamp = $expStamp[1] . " " . $expStamp[0] . " " . $expStamp[3] . ", " . $expTime[0] . ":" . $expTime[1] . ":" . $expTime[2];
$entry = "<figure><a href='#" . $child . "'><img src='" . $newbase . $child . "' alt='" . $author . ": " . $title . "'></a><figcaption>" . $author . ": " . $title . "<br>" . $timestamp . "</figcaption></figure>";
}
echo $entry;
}
$imgCount = count($images);
if ($imgLimit > $imgCount) {
// Fill the remaining page with placeholders
$curLimit = $imgLimit - $imgCount;
$curVal = 0;
while ($curLimit > $curVal) {
echo "<figure></figure>";
$curVal++;
}
}
?>
</div>
</body>
</html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment