2022-07-21 14:53:04 +00:00
<! DOCTYPE html >
< html >
< head >
< meta charset = " utf-8 " >
< meta name = " viewport " content = " width=device-width, initial-scale=1.0 " >
2022-08-03 16:46:50 +00:00
< title > Lynx Gallery </ title >
<!-- Google Fonts -->
2022-07-21 14:53:04 +00:00
< link rel = " stylesheet " href = " css/master.css " >
2022-07-23 14:03:11 +00:00
< link rel = " stylesheet " href = " https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@600&display=swap " >
< link rel = " stylesheet " href = " https://fonts.googleapis.com/css2?family=Fira+Code:wght@500&display=swap " >
2022-08-03 16:46:50 +00:00
<!-- JQuery -->
2022-08-07 09:59:27 +00:00
< script src = " https://code.jquery.com/jquery-3.6.0.min.js " integrity = " sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4= " crossorigin = " anonymous " ></ script >
2022-08-06 09:52:40 +00:00
2022-08-07 17:28:21 +00:00
< script >
</ script >
2022-08-06 09:52:40 +00:00
<!-- 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' >
2022-07-21 14:53:04 +00:00
</ head >
< body >
2022-08-01 13:09:53 +00:00
< ? php
2022-08-07 17:28:21 +00:00
/*
|-------------------------------------------------------------
| Import Required
|-------------------------------------------------------------
| These are common scripts used across all pages of the
| website . At some point I want the whole website to be only
| one index page . But that ' s going to require many many many
| many rewrites and hours of learning ....
|-------------------------------------------------------------
*/
2022-08-07 11:57:13 +00:00
include " ui/required.php " ;
2022-07-30 10:41:37 +00:00
/*
2022-08-07 17:28:21 +00:00
|-------------------------------------------------------------
| 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 ^^
|-------------------------------------------------------------
2022-07-30 10:41:37 +00:00
*/
2022-08-07 11:57:13 +00:00
if ( isset ( $_GET [ 'id' ])) {
// Get all image info
$image = get_image_info ( $conn , $_GET [ 'id' ]);
// Check if image is avalible
if ( isset ( $image [ 'imagename' ])) {
// Display image
$image_path = " images/ " . $image [ 'imagename' ];
$image_alt = $image [ 'alt' ];
2022-07-30 10:41:37 +00:00
} else {
2022-08-07 11:57:13 +00:00
// ID not avalible toast
echo " <p class='alert alert-low space-bottom-large'>Could not find image with ID: " . $_GET [ 'id' ] . " </p> " ;
2022-07-30 10:41:37 +00:00
2022-08-07 11:57:13 +00:00
// Replacement "no image" image and description
$image_path = " assets/no_image.png " ;
$image_alt = " No image could be found, sowwy " ;
2022-07-30 15:01:56 +00:00
}
2022-08-07 11:57:13 +00:00
} else {
// No ID toast
//echo "<p class='alert alert-low space-bottom-large'>No ID present</p>";
2022-07-30 15:01:56 +00:00
2022-08-07 11:57:13 +00:00
// Replacement "no image" image and description
//$image_path = "assets/no_image.png";
//$image_alt = "No image could be found, sowwy";
}
2022-07-30 15:01:56 +00:00
2022-08-07 11:57:13 +00:00
/*
2022-08-07 17:28:21 +00:00
|-------------------------------------------------------------
| Get all user details
|-------------------------------------------------------------
| This gets the user info from the image
|-------------------------------------------------------------
2022-08-07 11:57:13 +00:00
*/
if ( isset ( $image [ 'author' ])) {
$user = get_user_info ( $conn , $image [ 'author' ]);
2022-07-30 15:01:56 +00:00
}
2022-07-30 12:40:30 +00:00
/*
2022-08-07 17:28:21 +00:00
|-------------------------------------------------------------
| Check user privilge
|-------------------------------------------------------------
| This requires the user to be logged in or an admin
|-------------------------------------------------------------
2022-07-30 12:40:30 +00:00
*/
2022-08-07 11:57:13 +00:00
if ( image_privilage ( $image [ 'author' ]) || is_admin ( $_SESSION [ 'id' ])) {
$privilaged = True ;
} else {
$privilaged = False ;
2022-07-30 10:41:37 +00:00
}
2022-07-30 12:40:30 +00:00
2022-08-07 11:57:13 +00:00
include " ui/nav.php " ; ?>
2022-07-30 12:40:30 +00:00
2022-08-07 11:57:13 +00:00
< script >
if ( params . update == " success " ) {
sniffleAdd ( " Info " , " Image information updated " , " var(--green) " );
2022-07-30 12:40:30 +00:00
}
2022-08-07 11:57:13 +00:00
if ( params . del == " fail " ) {
sniffleAdd ( " Error " , " Failed to delete image " , " var(--red) " );
}
</ script >
2022-07-23 07:44:43 +00:00
2022-08-02 13:13:35 +00:00
< div class = " image-container space-bottom-large " >
2022-08-07 11:57:13 +00:00
< img class = 'image' id = '<?php echo $image[' id ']; ?>' src = '<?php echo $image_path; ?>' alt = '<?php echo $image_alt; ?>' >
2022-07-21 14:53:04 +00:00
</ div >
2022-08-03 16:46:50 +00:00
2022-07-27 11:46:10 +00:00
< div class = " image-description default-window " >
2022-07-22 00:21:48 +00:00
< h2 > Description </ h2 >
< ? php
2022-07-22 13:55:56 +00:00
// Image Description/Alt
2022-07-28 21:18:14 +00:00
if ( isset ( $image_alt ) && ! empty ( $image_alt )) {
2022-07-23 07:44:43 +00:00
echo " <p> " . $image_alt . " </p> " ;
2022-07-28 10:35:57 +00:00
} else {
echo " <p>No description provided</p> " ;
2022-07-22 13:55:56 +00:00
}
2022-07-22 00:21:48 +00:00
?>
</ div >
2022-08-03 16:46:50 +00:00
2022-07-27 11:46:10 +00:00
< div class = " image-detail flex-down default-window " >
2022-07-22 00:21:48 +00:00
< h2 > Details </ h2 >
2022-07-21 14:53:04 +00:00
< ? php
2022-07-25 17:28:55 +00:00
// Image ID
if ( isset ( $image [ 'author' ])) {
2022-07-28 10:35:57 +00:00
if ( isset ( $user [ 'username' ])) {
echo " <p>Author: " . $user [ 'username' ] . " </p> " ;
} else {
echo " <p>Author: Deleted User</p> " ;
}
2022-07-25 17:28:55 +00:00
} else {
echo " <p>Author: No author</p> " ;
}
2022-07-22 13:55:56 +00:00
// Image ID
2022-07-21 14:53:04 +00:00
echo " <p>ID: " . $image [ 'id' ] . " </p> " ;
2022-07-22 13:55:56 +00:00
// File name
2022-08-01 10:20:00 +00:00
if ( strlen ( $image [ 'imagename' ]) > 30 ) {
echo " <p>File Name: " . trim ( substr ( $image [ 'imagename' ], 0 , 30 )) . " ...</p> " ;
} else {
echo " <p>File Name: " . $image [ 'imagename' ] . " </p> " ;
}
2022-07-22 13:55:56 +00:00
2022-08-01 10:20:00 +00:00
// File extention
echo " <p>File Type: " . pathinfo ( $image [ 'imagename' ], PATHINFO_EXTENSION ) . " </p> " ;
2022-07-22 13:55:56 +00:00
// Image resolution
list ( $width , $height ) = getimagesize ( $image_path );
echo " <p>Image resolution: " . $width . " x " . $height . " </p> " ;
2022-07-23 14:03:11 +00:00
2022-08-01 10:20:00 +00:00
// Image Upload date
echo " <p>Last updated: " . $image [ 'upload' ] . " (+0)</p> " ;
2022-07-23 14:03:11 +00:00
// Image download
echo " <a class='btn alert-high space-top' href='images/ " . $image [ 'imagename' ] . " ' download=' " . $image [ 'imagename' ] . " '><img class='svg' src='assets/icons/download.svg'>Download image</a> " ;
2022-07-21 14:53:04 +00:00
?>
</ div >
2022-07-28 21:18:14 +00:00
< div class = " tags-root default-window " >
< h2 > Tags </ h2 >
2022-07-29 12:53:36 +00:00
< div class = " tags flex-left " >
2022-07-28 21:18:14 +00:00
< ? php
2022-07-30 15:01:56 +00:00
// Get image tags
if ( isset ( $image [ 'tags' ]) && ! empty ( $image [ 'tags' ])) {
$image_tags_array = explode ( " " , $image [ 'tags' ]);
foreach ( $image_tags_array as $tag ) {
echo " <p class='tag alert-high'> " . $tag . " </p> " ;
}
} else {
echo " <p>No tags present</p> " ;
2022-07-28 21:18:14 +00:00
}
?>
</ div >
</ div >
2022-07-25 17:28:55 +00:00
< ? php
2022-07-30 15:01:56 +00:00
/*
2022-08-07 17:28:21 +00:00
|-------------------------------------------------------------
| Check if user is privilaged ,
|-------------------------------------------------------------
| If yes , grant them access to the Danger zone , or " the place that can fuck things up "
| Checking is done prior to here
|-------------------------------------------------------------
2022-07-30 15:01:56 +00:00
*/
2022-07-30 10:41:37 +00:00
if ( $privilaged ) {
2022-08-06 21:14:05 +00:00
?>
<!-- Danger zone -->
< div class = 'danger-zone flex-down default-window' >
< h2 > Danger zone </ h2 >
2022-08-07 17:28:21 +00:00
< script id = " conformationMessage " ></ script >
2022-08-06 21:14:05 +00:00
<!-- Delete -->
< button id = 'deleteButton' class = 'btn alert-low' >< img class = 'svg' src = 'assets/icons/trash.svg' > Delete image </ button >
< script >
$ ( '#deleteButton' ) . click ( function (){
2022-08-07 08:07:18 +00:00
var header = " Are you sure? " ;
var description = " Deleting this image is pernament, there is no going back after this!!!!! " ;
var actionBox = " <button class='btn alert-low'><img class='svg' src='assets/icons/trash.svg'>Delete image</button> " ;
flyoutShow ( header , description , actionBox );
2022-08-06 21:14:05 +00:00
});
</ script >
2022-08-07 08:07:18 +00:00
<!--
|-------------------------------------------------------------
| Edit description
|-------------------------------------------------------------
2022-08-07 17:28:21 +00:00
| 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 .
|-------------------------------------------------------------
2022-08-07 08:07:18 +00:00
-->
< button id = 'descriptionButton' class = 'btn alert-low space-top-small' >< img class = 'svg' src = 'assets/icons/edit.svg' > Edit description </ button >
2022-08-06 21:14:05 +00:00
< script >
2022-08-07 08:07:18 +00:00
$ ( '#descriptionButton' ) . click ( function (){
var header = " Enter new Description/Alt " ;
var description = " Whatcha gonna put in there 👀 " ;
2022-08-07 17:28:21 +00:00
var actionBox = " <form id='descriptionConfirm' action='app/image/edit_description.php' method='POST'> \
< input id = 'descriptionInput' class = 'btn alert-default space-bottom' type = 'text' name = 'descriptionInput' placeholder = 'Description/Alt for image' > \
< button id = 'descriptionSubmit' class = 'btn alert-low' type = 'submit' name = 'descriptionSubmit' >< img class = 'svg' src = 'assets/icons/edit.svg' > Update information </ button > \
</ form > " ;
2022-08-07 08:07:18 +00:00
flyoutShow ( header , description , actionBox );
2022-08-07 17:28:21 +00:00
$ ( " #descriptionConfirm " ) . submit ( function ( event ) {
event . preventDefault ();
var descriptionInput = $ ( " #descriptionInput " ) . val ();
var descriptionSubmit = $ ( " #descriptionSubmit " ) . val ();
$ . post ( " app/image/edit_description.php " , {
id : < ? php echo $_GET [ 'id' ]; ?> ,
description : descriptionInput ,
submit : descriptionSubmit
}, function ( returnData ) {
$ ( " #conformationMessage " ) . html ( returnData );
});
2022-08-07 08:07:18 +00:00
});
2022-08-06 21:14:05 +00:00
});
</ script >
<!-- Edit tags -->
< button id = 'tagButton' class = 'btn alert-low space-top-small' >< img class = 'svg' src = 'assets/icons/edit.svg' > Add image tags </ button >
< script >
$ ( '#tagButton' ) . click ( function (){
2022-08-07 08:07:18 +00:00
var header = " Tags " ;
var description = " Add image tags here! This is still being tested so your tags may be removed later on. Tags ONLY accept, letters, numbers and underscores. Hyphens will be stitched to underscores and spaces will seperate the different tags from eachother " ;
var actionBox = " <input class='btn alert-default space-bottom' type='text' name='add_tags' placeholder='Tags are seperated by spaces'> \
< button class = 'btn alert-low' >< img class = 'svg' src = 'assets/icons/edit.svg' > Add tags </ button > " ;
flyoutShow ( header , description , actionBox );
2022-08-06 21:14:05 +00:00
});
</ script >
<!-- Edit authro -->
< ? php
2022-08-01 09:31:23 +00:00
if ( is_admin ( $_SESSION [ 'id' ])) {
2022-08-06 21:14:05 +00:00
?>
< form id = 'author_form' method = 'POST' action = 'ui/image_interaction.php' >
2022-08-03 16:46:50 +00:00
< input id = 'author_header' type = 'hidden' name = 'header' value = 'Who owns the image?????' >
< input id = 'author_description' type = 'hidden' name = 'description' value = 'Enter ID of image owner' >
2022-08-07 08:07:18 +00:00
< button id = 'author_submit' class = 'btn alert-low space-top-small' type = 'submit' name = 'author_flyout' >< img class = 'svg' src = 'assets/icons/edit.svg' > Edit author </ button >
2022-08-06 21:14:05 +00:00
</ form >
< ? php
2022-07-30 15:01:56 +00:00
}
2022-07-25 17:28:55 +00:00
echo " </div> " ;
}
?>
2022-07-21 14:53:04 +00:00
2022-08-07 08:07:18 +00:00
< ? php include " ui/footer.php " ; ?>
2022-07-21 14:53:04 +00:00
</ body >
</ html >
