Galleries/PHPGallery
1
0
Fork 0
mirror of https://github.com/Fluffy-Bean/image-gallery.git synced 2025-05-20 18:34:53 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Adding modules

Browse source
This commit is contained in:
Michał Gdula 2022-08-06 10:52:40 +01:00
parent dc89737cfc
commit c8f434e106
10 changed files with 93 additions and 91 deletions
Download patch file Download diff file Expand all files Collapse all files

6
.gitmodules vendored Normal file
View file

@ -0,0 +1,6 @@
[submodule "Sniffle"]
path = Sniffle
url = https://github.com/Fluffy-Bean/Sniffle.git
[submodule "Flyout"]
path = Flyout
url = https://github.com/Fluffy-Bean/Flyout.git

1
Flyout Submodule

@ -0,0 +1 @@
Subproject commit 57d63d741f57eaaa8b863b1ecd5d6df8c1d00834

1
Sniffle Submodule

@ -0,0 +1 @@
Subproject commit 471cd363a78fd2b73d960211a33829bada62e849

6
css/master.css
View file

@ -337,7 +337,7 @@ body {
This is the notification system used by the website. Probably a little too much for what its used for This is the notification system used by the website. Probably a little too much for what its used for
*/ */
.notify-root { .notify-root {
margin: 0; padding: 1rem; margin: 0; padding: 0;
max-width: 621px; width: calc(100% - 2rem); max-width: 621px; width: calc(100% - 2rem);
height: auto; height: auto;
@ -447,7 +447,7 @@ a.btn {
/* /*
-=-=-= FLYOUT =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- -=-=-= FLYOUT =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
*/ */
.flyout { /*.flyout {
margin: 0; padding: 0.5rem 0.5rem 1.5rem; margin: 0; padding: 0.5rem 0.5rem 1.5rem;
max-width: 621px; width: calc(100% - 2.5rem + 3px); max-width: 621px; width: calc(100% - 2.5rem + 3px);
@ -487,7 +487,7 @@ a.btn {
backdrop-filter: blur(5px); backdrop-filter: blur(5px);
transition: opacity 2s cubic-bezier(.19,1,.22,1); transition: opacity 2s cubic-bezier(.19,1,.22,1);
} }*/
/* /*
-=-=-= FONT SIZES =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- -=-=-= FONT SIZES =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-

36
image.php
View file

@ -93,28 +93,26 @@ if (image_privilage($image['author']) || is_admin($_SESSION['id'])) {
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"> crossorigin="anonymous">
</script> </script>
<!-- Sniffle script! -->
<script src="Sniffle/sniffle.js"></script>
<link rel='stylesheet' href='Sniffle/sniffle.css'>
<!-- Flyout script! -->
<script src="Flyout/flyout.js"></script>
<link rel='stylesheet' href='Flyout/flyout.css'>
</head> </head>
<body> <body>
<?php include"ui/nav.php"; ?> <?php include"ui/nav.php"; ?>
<div class="alert-banner"> <script>
<?php if (params.update == "success") {
/* sniffleAdd("Info", "Image information updated", "var(--green)");
If theres a success in updating the image,
it'll let the user know
*/
if ($_GET["update"] == "success") {
echo notify("Information updated", "high");
} elseif ($_GET["update"] == "error") {
echo notify("Something went fuckywucky, please try later", "default");
} }
if ($_GET["del"] == "fail") { if (params.del == "fail") {
echo notify("Failed to delete image", "low"); sniffleAdd("Error", "Failed to delete image", "var(--red)");
} }
?> </script>
<p class='alert alert-high space-bottom-large' onclick='closeAlert(this)'></p>
<script src='scripts/alert.js'></script>
</div>
<?php <?php
/* /*
@ -408,6 +406,12 @@ if (image_privilage($image['author']) || is_admin($_SESSION['id'])) {
</form>"; </form>";
} }
echo "<button id='flyoutShow' class='btn'>Show flyout!</button>";
echo"<script>$('#flyoutShow').click(function(){
flyoutShow('Flyout Header', 'A very very cool description', '<button>Im a cool button!</button>');
});</script>";
echo "</div>"; echo "</div>";
} }
?> ?>

54
index.php
View file

@ -18,29 +18,28 @@
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"> crossorigin="anonymous">
</script> </script>
<!-- Sniffle script! -->
<script src="Sniffle/sniffle.js"></script>
<link rel='stylesheet' href='Sniffle/sniffle.css'>
<!-- Flyout script! -->
<script src="Flyout/flyout.js"></script>
<link rel='stylesheet' href='Flyout/flyout.css'>
</head> </head>
<body> <body>
<?php <?php
include "ui/nav.php"; include "ui/nav.php";
?> ?>
<div class="alert-banner"> <script>
<?php if (params.del == "true") {
/* sniffleAdd("Image Deleted", "Successfully deleted image: <?php echo $_GET['id']; ?>", "var(--green)");
If theres a success in updating the image,
it'll let the user know
*/
// Deletion toast
if ($_GET["del"] == "true") {
echo notify("Successfully deleted image: ".$_GET['id'], "high");
} }
// Account toast if (params.login == "success") {
if ($_GET["login"] == "success") { sniffleAdd("Logged in", "O hi <?php echo $_SESSION['username']; ?>", "var(--green)");
echo notify("O hi ".$_SESSION['username'], "high");
} }
?> </script>
<script src='scripts/alert.js'></script>
</div>
<?php <?php
// Show search // Show search
@ -92,30 +91,6 @@
$image_request = mysqli_query($conn, "SELECT * FROM swag_table ORDER BY id DESC"); $image_request = mysqli_query($conn, "SELECT * FROM swag_table ORDER BY id DESC");
while ($image = mysqli_fetch_array($image_request)) { while ($image = mysqli_fetch_array($image_request)) {
// If search is set
if (isset($_GET['q']) && !empty($_GET['q'])) {
// Make search into an array
$search_array = explode(" ", $_GET['q']);
// Get images tags for comparing
$image_tag_array = explode(" ", $image['tags']);
// Compare arrays
$compare_results = array_intersect($image_tag_array, $search_array);
if (count($compare_results) > 0) {
// Getting thumbnail
if (file_exists("images/thumbnails/".$image['imagename'])) {
$image_path = "images/thumbnails/".$image['imagename'];
} else {
$image_path = "images/".$image['imagename'];
}
// Image loading
echo "<div class='gallery-item'>";
echo "<a href='image.php?id=".$image['id']."'><img class='gallery-image' loading='lazy' src='".$image_path."' id='".$image['id']."'></a>";
echo "</div>";
}
} else {
// Getting thumbnail // Getting thumbnail
if (file_exists("images/thumbnails/".$image['imagename'])) { if (file_exists("images/thumbnails/".$image['imagename'])) {
$image_path = "images/thumbnails/".$image['imagename']; $image_path = "images/thumbnails/".$image['imagename'];
@ -127,7 +102,6 @@
echo "<div class='gallery-item'>"; echo "<div class='gallery-item'>";
echo "<a href='image.php?id=".$image['id']."'><img class='gallery-image' loading='lazy' src='".$image_path."' id='".$image['id']."'></a>"; echo "<a href='image.php?id=".$image['id']."'><img class='gallery-image' loading='lazy' src='".$image_path."' id='".$image['id']."'></a>";
echo "</div>"; echo "</div>";
}
} }
?> ?>
</div> </div>

10
scripts/alert.js
View file

@ -1,10 +0,0 @@
let alertClose = document.querySelectorAll(".alert");
function closeAlert(gone) {
gone.closest(".alert").style.transform="translateY(-10rem) scale(0.8)";
gone.closest(".alert").style.opacity="0";
setTimeout(function(){
gone.closest(".alert").style.display="none";
}, 200);
};

22
scripts/flyout.js
View file

@ -1,22 +0,0 @@
$(document).ready(function() {
let show = document.querySelectorAll(".flyout-display");
let hide = document.querySelector(".flyout-close");
show.forEach(function(){
document.querySelector(".flyout").style.transform= "translateX(-50%) scale(1)";
document.querySelector(".flyout").style.bottom= "-1rem";
document.querySelector(".flyout-dim").style.display= "block";
});
hide.addEventListener("click", function(){
document.querySelector(".flyout").style.transform= "translateX(-50%) scale(0.8)";
document.querySelector(".flyout").style.bottom= "-20rem";
document.querySelector(".flyout-dim").style.opacity= "0";
setTimeout(function(){
document.querySelector(".flyout-dim").style.display= "none";
}, 621);
});
});

25
search.php Normal file
View file

@ -0,0 +1,25 @@
<?php
if (isset($_GET['q']) && !empty($_GET['q'])) {
// Make search into an array
$search_array = explode(" ", $_GET['q']);
// Get images tags for comparing
$image_tag_array = explode(" ", $image['tags']);
// Compare arrays
$compare_results = array_intersect($image_tag_array, $search_array);
if (count($compare_results) > 0) {
// Getting thumbnail
if (file_exists("images/thumbnails/".$image['imagename'])) {
$image_path = "images/thumbnails/".$image['imagename'];
} else {
$image_path = "images/".$image['imagename'];
}
// Image loading
echo "<div class='gallery-item'>";
echo "<a href='image.php?id=".$image['id']."'><img class='gallery-image' loading='lazy' src='".$image_path."' id='".$image['id']."'></a>";
echo "</div>";
}
}
?>

23
ui/required.php
View file

@ -52,5 +52,28 @@ include $root_dir."ui/functions.php";
echo "<div id='notify-root' class='notify-root'></div>"; echo "<div id='notify-root' class='notify-root'></div>";
?> ?>
<script> <script>
/*
This is a little secrete for the ones who care, nothing important
*/
console.log(" . . /|/| . . . . . . . \n .. /0 0 \\ . . . . . .. \n (III% . \\________, . . \n .. .\\_, .%###%/ \\'\\,.. \n . . . .||#####| |'\\ \\. \n .. . . ||. . .|/. .\\V. \n . . . .|| . . || . . . \n .. . . ||. . .||. . .. \n . . . .|| . . || . . . \n .. . . ||. . .||. . .. \n . . . .|| . . || . . . \n .. . . ||. . .||. . .. \n . . . .|| . . || . . . \n .. . . ||. . .||. . .. \n . . . .|| . . || . . . \n .. . . ||. . .||. . .. \n . . . .|| . . || . . . \n .. . . ||. . .||. . .. \n . . . .|| . . || . . . \n .. . . ||. . .||. . .. \n . . . .|| . . || . . . \n .. . . ||. . .||. . .. \n . . . cc/ . .cc/ . . ."); console.log(" . . /|/| . . . . . . . \n .. /0 0 \\ . . . . . .. \n (III% . \\________, . . \n .. .\\_, .%###%/ \\'\\,.. \n . . . .||#####| |'\\ \\. \n .. . . ||. . .|/. .\\V. \n . . . .|| . . || . . . \n .. . . ||. . .||. . .. \n . . . .|| . . || . . . \n .. . . ||. . .||. . .. \n . . . .|| . . || . . . \n .. . . ||. . .||. . .. \n . . . .|| . . || . . . \n .. . . ||. . .||. . .. \n . . . .|| . . || . . . \n .. . . ||. . .||. . .. \n . . . .|| . . || . . . \n .. . . ||. . .||. . .. \n . . . .|| . . || . . . \n .. . . ||. . .||. . .. \n . . . .|| . . || . . . \n .. . . ||. . .||. . .. \n . . . cc/ . .cc/ . . .");
/*
Gets Querys from the URL the user is at
Used by Sniffle to display notificaions
*/
const params = new Proxy(new URLSearchParams(window.location.search), {
get: (searchParams, prop) => searchParams.get(prop),
});
</script> </script>
<!-- Used by Sniffle to add Notifications, div can be displayed all time as it has no width or height initself -->
<div id='sniffle' class='sniffle'></div>
<!-- Div for information flyouts, controlled by Flyout.js -->
<div id='flyoutDim' class='flyout-dim'></div>
<div id='flyoutRoot' class='flyout'>
<p id='flyoutHeader' class='flyout-header'>Header</p>
<p id='flyoutDescription' class='flyout-description'>Description</p>
<div id='flyoutActionbox' class='flyout-actionbox'></div>
<button onclick='flyoutClose()'>Close</button>
</div>