mirror of
https://github.com/Fluffy-Bean/image-gallery.git
synced 2024-12-29 10:56:12 +00:00
465 lines
16 KiB
PHP
465 lines
16 KiB
PHP
<?php
|
|
require_once __DIR__."/app/required.php";
|
|
|
|
use App\Make;
|
|
use App\Account;
|
|
use App\Image;
|
|
use App\Diff;
|
|
|
|
$make_stuff = new Make();
|
|
$image_info = new Image;
|
|
$user_info = new Account;
|
|
$diff = new Diff();
|
|
?>
|
|
|
|
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<?php require_once __DIR__."/assets/ui/header.php"; ?>
|
|
</head>
|
|
|
|
<body>
|
|
<?php
|
|
require_once __DIR__."/assets/ui/nav.php";
|
|
|
|
/*
|
|
|-------------------------------------------------------------
|
|
| Get image ID
|
|
|-------------------------------------------------------------
|
|
| Image ID should be written in the URL of the page as ?id=69
|
|
| If ID cannot be obtained, give error. ID going here ^^
|
|
|-------------------------------------------------------------
|
|
*/
|
|
if (isset($_GET['id'])) {
|
|
// Get all image info
|
|
$image = $image_info->get_image_info($conn, $_GET['id']);
|
|
|
|
// Check if image is avalible
|
|
if (!empty($image['imagename']) && isset($image['imagename'])) {
|
|
$image_present = True;
|
|
} else {
|
|
?>
|
|
<script>
|
|
sniffleAdd('Woops', 'Something happened, either image with the ID <?php echo $_GET['id']; ?> was deleted or never existed, either way it could not be found!', 'var(--warning)', 'assets/icons/cross.svg');
|
|
</script>
|
|
<?php
|
|
$image_present = False;
|
|
}
|
|
} else {
|
|
?>
|
|
<script>
|
|
sniffleAdd('Where is da image?', 'The link you followed seems to be broken, or there was some other error, who knows!', 'var(--warning)', 'assets/icons/cross.svg');
|
|
</script>
|
|
<?php
|
|
$image_present = False;
|
|
}
|
|
|
|
/*
|
|
|-------------------------------------------------------------
|
|
| Image verification
|
|
|-------------------------------------------------------------
|
|
| Doublechecking if all information on images exists, if yes
|
|
| display it, otherwise don't display at all or replace with
|
|
| blank or filler info
|
|
|-------------------------------------------------------------
|
|
*/
|
|
if ($image_present) {
|
|
/*
|
|
|-------------------------------------------------------------
|
|
| Check user details
|
|
|-------------------------------------------------------------
|
|
*/
|
|
if (isset($image['author'])) {
|
|
// Get all information on the user
|
|
$user = $user_info->get_user_info($conn, $image['author']);
|
|
|
|
if (isset($user['username'])) {
|
|
$image_author = $user['username'];
|
|
} else {
|
|
$image_author = "Deleted User";
|
|
}
|
|
} else {
|
|
$image_author = "No author";
|
|
}
|
|
|
|
/*
|
|
|-------------------------------------------------------------
|
|
| Check if image path is good
|
|
|-------------------------------------------------------------
|
|
*/
|
|
if (isset($image['imagename'])) {
|
|
$image_path = "images/".$image['imagename'];
|
|
$image_alt = $image['alt'];
|
|
|
|
$image_colour = $make_stuff->get_image_colour($image_path);
|
|
if (!empty($image_colour)) {
|
|
$image_colour = $image_colour;
|
|
} else {
|
|
$image_colour = "var(--bg)";
|
|
}
|
|
?>
|
|
<style>
|
|
.image-container, .fullscreen-image {
|
|
background-color: <?php echo $image_colour; ?>55 !important;
|
|
}
|
|
</style>
|
|
<?php
|
|
} else {
|
|
$image_path = "assets/no_image.png";
|
|
$image_alt = "No image could be found, sowwy";
|
|
}
|
|
|
|
/*
|
|
|-------------------------------------------------------------
|
|
| If description not set or empty, replace with filler
|
|
|-------------------------------------------------------------
|
|
*/
|
|
if (!isset($image_alt) || empty($image_alt)) {
|
|
$image_alt = "No description avalible";
|
|
}
|
|
} else {
|
|
/*
|
|
|-------------------------------------------------------------
|
|
| Image was not present
|
|
|-------------------------------------------------------------
|
|
*/
|
|
$image_path = "assets/no_image.png";
|
|
$image_alt = "No image could be found, sowwy";
|
|
}
|
|
|
|
/*
|
|
|-------------------------------------------------------------
|
|
| Check user privilge
|
|
|-------------------------------------------------------------
|
|
*/
|
|
if ($image_info->image_privilage($image['author']) || $user_info->is_admin($conn, $_SESSION['id'])) {
|
|
$privilaged = True;
|
|
} else {
|
|
$privilaged = False;
|
|
}
|
|
|
|
echo "<div class='fullscreen-image'>
|
|
<button onclick='closeFullScreen()'><img src='assets/icons/cross.svg'></button>
|
|
<img>
|
|
</div>";
|
|
|
|
if (is_file("images/previews/".$image['imagename'])) {
|
|
echo "<div class='image-container'>
|
|
<img class='image' id='".$image['id']."' src='images/previews/".$image['imagename']."' alt='".$image_alt."'>
|
|
<button class='preview-button' onclick='fullScreen()'><img src='assets/icons/scan.svg'></button>
|
|
</div>";
|
|
} else {
|
|
echo "<div class='image-container'>
|
|
<img class='image' id='".$image['id']."' src='".$image_path."' alt='".$image_alt."'>
|
|
<button class='preview-button' onclick='fullScreen()'><img src='assets/icons/scan.svg'></button>
|
|
</div>";
|
|
}
|
|
|
|
|
|
?>
|
|
<script>
|
|
function fullScreen() {
|
|
document.querySelector(".preview-button").style.display = "none";
|
|
document.querySelector("html").style.overflow = "hidden";
|
|
|
|
document.querySelector(".fullscreen-image").style.display = "block";
|
|
document.querySelector(".fullscreen-image > img").src = "<?php echo $image_path;?>";
|
|
setTimeout(function(){
|
|
document.querySelector(".fullscreen-image").style.opacity = 1;
|
|
}, 1);
|
|
}
|
|
|
|
function closeFullScreen() {
|
|
document.querySelector(".preview-button").style.display = "block";
|
|
document.querySelector("html").style.overflow = "auto";
|
|
|
|
document.querySelector(".fullscreen-image").style.opacity = 0;
|
|
setTimeout(function(){
|
|
document.querySelector(".fullscreen-image").style.display = "none";
|
|
}, 500);
|
|
}
|
|
</script>
|
|
<?php
|
|
|
|
/*
|
|
|-------------------------------------------------------------
|
|
| Start of displaying all info on image
|
|
|-------------------------------------------------------------
|
|
*/
|
|
if ($image_present) {
|
|
?>
|
|
|
|
<div class="defaultDecoration defaultSpacing defaultFonts">
|
|
<h2>Description</h2>
|
|
<p><?php echo htmlentities($image_alt, ENT_QUOTES); ?></p>
|
|
</div>
|
|
|
|
|
|
<div class="image-detail defaultDecoration defaultSpacing defaultFonts">
|
|
<h2>Details</h2>
|
|
<div>
|
|
<div>
|
|
<?php
|
|
// User
|
|
if (empty($image['author'])) {
|
|
echo "<p>Author: ".$image_author."</p>";
|
|
} else {
|
|
echo "<p>Author: <a href='profile.php?user=".$image['author']."' class='link'>".$image_author."</a></p>";
|
|
}
|
|
|
|
// Image ID
|
|
if ($image['id'] == 69) {
|
|
echo "<p>ID: ".$image['id'].", nice</p>";
|
|
} else {
|
|
echo "<p>ID: ".$image['id']."</p>";
|
|
}
|
|
|
|
$upload_time = new DateTime($image['upload_date']);
|
|
echo "<p id='updateTime'>Uploaded at: ".$upload_time->format('d/m/Y H:i:s T')."</p>";
|
|
?>
|
|
<script>
|
|
// Updating time to Viewers local
|
|
var updateDate = new Date('<?php echo $upload_time->format('m/d/Y H:i:s T'); ?>');
|
|
var format = {year: 'numeric',
|
|
month: 'short',
|
|
day: 'numeric',
|
|
hour: '2-digit',
|
|
minute: '2-digit'
|
|
};
|
|
|
|
updateDate = updateDate.toLocaleDateString('en-GB', format);
|
|
|
|
$("#updateTime").html("Uploaded at: "+updateDate);
|
|
</script>
|
|
|
|
<p>Last Modified: <?php echo $diff->time($image['last_modified']); ?></p>
|
|
</div>
|
|
<div>
|
|
<?php
|
|
// File name
|
|
$image_pathinfo = pathinfo($image['imagename']);
|
|
|
|
echo "<p>File Name: ".$image_pathinfo['filename']."</p>";
|
|
|
|
// File extention
|
|
echo "<p>File Type: ".pathinfo($image['imagename'], PATHINFO_EXTENSION)."</p>";
|
|
|
|
// Image resolution
|
|
list($width, $height) = getimagesize($image_path);
|
|
echo "<p>Image resolution: ".$width."x".$height."</p>";
|
|
|
|
function human_filesize($bytes, $decimals = 2) {
|
|
$sz = 'BKMGTP';
|
|
$factor = floor((strlen($bytes) - 1) / 3);
|
|
return sprintf("%.{$decimals}f", $bytes / pow(1024, $factor)) . @$sz[$factor];
|
|
}
|
|
echo "<p>File size: ".human_filesize(filesize($image_path), 2)."</p>";
|
|
?>
|
|
</div>
|
|
</div>
|
|
<!-- Download Image -->
|
|
<a id='download' class='btn btn-good' href='<?php echo "images/".$image['imagename']; ?>' download='<?php echo $image['imagename']; ?>'><img class='svg' src='assets/icons/download.svg'>Download image</a>
|
|
<script>
|
|
$("#download").click(function() {
|
|
sniffleAdd("Info", "Image download started!", "var(--success)", "assets/icons/download.svg");
|
|
});
|
|
</script>
|
|
|
|
<!-- Copy link -->
|
|
<button class='btn btn-good' onclick='copyLink()'><img class='svg' src='assets/icons/clipboard-text.svg'>Copy image link</button>
|
|
<script>
|
|
function copyLink() {
|
|
navigator.clipboard.writeText(window.location.href);
|
|
|
|
sniffleAdd("Info", "Link has been copied!", "var(--success)", "assets/icons/clipboard-text.svg");
|
|
}
|
|
</script>
|
|
</div>
|
|
|
|
<div class="defaultDecoration defaultSpacing defaultFonts">
|
|
<h2>Tags</h2>
|
|
<div class="tags">
|
|
<?php
|
|
// Get image tags
|
|
if (isset($image['tags']) && !empty($image['tags'])) {
|
|
$image_tags_array = explode(" ", $image['tags']);
|
|
foreach ($image_tags_array as $tag) {
|
|
if ($tag == "nsfw") {
|
|
echo "<p id='tag' class='tag btn-bad'>".$tag."</p>";
|
|
} else {
|
|
echo "<p id='tag' class='tag btn-good'>".$tag."</p>";
|
|
}
|
|
}
|
|
} else {
|
|
echo "<p>No tags present</p>";
|
|
}
|
|
?>
|
|
</div>
|
|
</div>
|
|
|
|
<?php
|
|
/*
|
|
|-------------------------------------------------------------
|
|
| Check if user is privilaged,
|
|
|-------------------------------------------------------------
|
|
| If yes, grant them access to the Danger zone, or "the place
|
|
| that can fuck things up"
|
|
|-------------------------------------------------------------
|
|
*/
|
|
if ($privilaged) {
|
|
?>
|
|
<!-- Danger zone -->
|
|
<div class='warningDecoration defaultSpacing defaultFonts'>
|
|
<h2>Danger zone</h2>
|
|
|
|
<!--
|
|
|-------------------------------------------------------------
|
|
| Delete
|
|
|-------------------------------------------------------------
|
|
| sus
|
|
| I cannot describe the anxiety this gives me. pls help
|
|
|-------------------------------------------------------------
|
|
-->
|
|
<button id='deleteButton' class='btn btn-bad'><img class='svg' src='assets/icons/trash.svg'>Delete image</button>
|
|
<script>
|
|
$('#deleteButton').click(function() {
|
|
var header = "Are you sure?";
|
|
var description = "Deleting this image is pernament, there is no going back after this!!!!!";
|
|
var actionBox = "<form id='deleteConfirm' method='POST'>\
|
|
<button id='deleteSubmit' class='btn btn-bad' type='submit'><img class='svg' src='assets/icons/trash.svg'>Delete image</button>\
|
|
</form>";
|
|
flyoutShow(header, description, actionBox);
|
|
|
|
$("#deleteConfirm").submit(function(event) {
|
|
event.preventDefault();
|
|
var deleteSubmit = $("#deleteSubmit").val();
|
|
$("#newSniff").load("app/image/image.php", {
|
|
id: <?php echo $_GET['id']; ?>,
|
|
submit_delete: deleteSubmit
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<!--
|
|
|-------------------------------------------------------------
|
|
| Edit Description
|
|
|-------------------------------------------------------------
|
|
| Most people reading through the code will probably say how
|
|
| shit it is. YOU HAVE NO FUCKING CLUE HOW LONG THIS TOOK ME
|
|
| TO FIGURE OUT. i hate js.
|
|
|-------------------------------------------------------------
|
|
-->
|
|
<button id='descriptionButton' class='btn btn-bad'><img class='svg' src='assets/icons/edit.svg'>Edit description</button>
|
|
<script>
|
|
$('#descriptionButton').click(function() {
|
|
var header = "Enter new Description/Alt";
|
|
var description = "Whatcha gonna put in there 👀";
|
|
var actionBox = "<form id='descriptionConfirm' action='app/image/edit_description.php' method='POST'>\
|
|
<input id='descriptionInput' class='btn btn-neutral space-bottom' type='text' placeholder='Description/Alt for image'>\
|
|
<button id='descriptionSubmit' class='btn btn-bad' type='submit'><img class='svg' src='assets/icons/edit.svg'>Update information</button>\
|
|
</form>";
|
|
flyoutShow(header, description, actionBox);
|
|
|
|
$('#descriptionInput').val("<?php if ($image_alt != "No description avalible") echo str_replace('"', '\"', $image_alt); ?>");
|
|
|
|
$("#descriptionConfirm").submit(function(event) {
|
|
event.preventDefault();
|
|
var descriptionInput = $("#descriptionInput").val();
|
|
var descriptionSubmit = $("#descriptionSubmit").val();
|
|
$("#newSniff").load("app/image/image.php", {
|
|
id: <?php echo $_GET['id']; ?>,
|
|
input: descriptionInput,
|
|
submit_description: descriptionSubmit
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<!--
|
|
|-------------------------------------------------------------
|
|
| Edit Tags
|
|
|-------------------------------------------------------------
|
|
| Literally no amount of work will get tags/lists to play well
|
|
| with SQL so I gave up and made my own shitty system. It
|
|
| works but once I re-add the search function this will make
|
|
| anyone cry. I am so sorry.
|
|
|-------------------------------------------------------------
|
|
-->
|
|
<button id='tagsButton' class='btn btn-bad'><img class='svg' src='assets/icons/tag.svg'>Add image tags</button>
|
|
<script>
|
|
$('#tagsButton').click(function() {
|
|
var header = "Tags";
|
|
var description = "Tags are seperated by spaces, only alowed characters are a-z and underscores, all hyphens are converted to underscores. There are also special tags such as nsfw that'll blur images in the overview";
|
|
var actionBox = "<form id='tagsConfirm' action='app/image/edit_tags.php' method='POST'>\
|
|
<input id='tagsInput' class='btn btn-neutral space-bottom' type='text' placeholder='Tags are seperated by spaces'>\
|
|
<button id='tagsSubmit' class='btn btn-bad' type='submit'><img class='svg' src='assets/icons/edit.svg'>Edit tags</button>\
|
|
</form>";
|
|
flyoutShow(header, description, actionBox);
|
|
|
|
$('#tagsInput').val("<?php echo $image['tags']; ?>");
|
|
|
|
$("#tagsConfirm").submit(function(event) {
|
|
event.preventDefault();
|
|
var tagsInput = $("#tagsInput").val();
|
|
var tagsSubmit = $("#tagsSubmit").val();
|
|
$("#newSniff").load("app/image/image.php", {
|
|
id: <?php echo $_GET['id']; ?>,
|
|
input: tagsInput,
|
|
submit_tags: tagsSubmit
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<!--
|
|
|-------------------------------------------------------------
|
|
| Edit Author
|
|
|-------------------------------------------------------------
|
|
| You must be a super cool person to see this section ;3
|
|
|-------------------------------------------------------------
|
|
-->
|
|
<?php
|
|
if ($user_info->is_admin($conn, $_SESSION['id'])) {
|
|
?>
|
|
<button id='authorButton' class='btn btn-bad'><img class='svg' src='assets/icons/edit.svg'>Edit author</button>
|
|
<script>
|
|
$('#authorButton').click(function() {
|
|
var header = "Who owns the image?????";
|
|
var description = "Enter ID of image owner";
|
|
var actionBox = "<form id='authorConfirm' action='app/image/edit_author.php' method='POST'>\
|
|
<input id='authorInput' class='btn btn-neutral space-bottom' type='text' placeholder='le author'>\
|
|
<button id='authorSubmit' class='btn btn-bad' type='submit'><img class='svg' src='assets/icons/edit.svg'>Edit author</button>\
|
|
</form>";
|
|
flyoutShow(header, description, actionBox);
|
|
|
|
$("#authorConfirm").submit(function(event) {
|
|
event.preventDefault();
|
|
var authorInput = $("#authorInput").val();
|
|
var authorSubmit = $("#authorSubmit").val();
|
|
$("#newSniff").load("app/image/image.php", {
|
|
id: <?php echo $_GET['id']; ?>,
|
|
input: authorInput,
|
|
submit_author: authorSubmit
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
<?php
|
|
}
|
|
echo "</div>";
|
|
}
|
|
|
|
/*
|
|
|-------------------------------------------------------------
|
|
| End of displaying all user info
|
|
|-------------------------------------------------------------
|
|
*/
|
|
}
|
|
?>
|
|
|
|
<?php require_once __DIR__."/assets/ui/footer.php"; ?>
|
|
</body>
|
|
|
|
</html>
|