<?php
/* ramka - a single page photo album
 * 2009, Paul Philippov, themactep.com
 *
 * It's a simple no-nonsense script to setup a quick image gallery.
 * Just upload it on a server supporting php and add some images to
 * a directory of your choice (same directory by default).
 * Supported files are *.gif, *.jpg, *.png, and *.webp.
 * Only one level of directories is supported, no subdirectories.
 *
 * Last updated 2021-03-04.
 */

// Name of the photo gallery
$album_title = "ramka - a single page photo album";

// Relative path to the directory with photos to display.
// Image's file name without extension will be uses as a title.
$image_dir = ".";

// You don't need to edit anything below, unless you know what you are doing! //

$image_path = realpath($image_dir);
$images = all_files($image_path);

function all_files($dir_name)
{
    $valid_extensions = ['gif', 'jpg', 'png', 'webp'];
    if (!file_exists($dir_name)) return;
    if (false == $di = new DirectoryIterator($dir_name)) return false;
    $array = array();
    foreach ($di as $file)
        if ($file->isFile() && in_array(strtolower($file->getExtension()), $valid_extensions))
            $array[] = $file->getFilename();
    sort($array);
    return $array;
}

function humanize($text)
{
    $file = pathinfo($text);
    return str_replace('_', ' ', $file['filename']) . ".";
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title><?php echo $album_title ?></title>
<meta charset="utf-8">
<link rel="icon" type="image/png" sizes="16x16" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9h
AAABFElEQVQ4y9WTP8rCQBDFfxv/hYidrZUWFjlHGm8g4l30DB5AEBSs1UIPoYWgIFa2doL/QhyLCfHjCyqayoFld3bfvGXe2zUiIiQIi4SRmCAdrW43nY3R
ARAEcL1qbttwuYDva+44YExIcDpBqwXnMzQaUCrBbAaTCWw2UC5DrwfdLnQ6UCzCaAT5fEgQBDAew3IJqRTM5+B50Gwq2HF03/cV47oQap+ONTWdwnAI1eqj
FYgK3otYr8eLP3KhUHiOPhy+tFEE1mvo91/Y+L9gtYLjEfZ7WCxUG89TEWMExqjarguZjLrSbsN2C5UK1GowGMBup2e2ra4ARkQEEb1NRAlyOX0TIpDNRmBE
Hm5Y1h+Cn/5Md3VcZ2brloOaAAAAAElFTkSuQmCC">
<style>
/* reset */
* {margin: 0;padding: 0;}
a {cursor: pointer;text-decoration: none;}
/* typography */
body {font: 1rem sans-serif;}
header h1 {font-size: 1.25rem;font-weight: 400;}
header h2 {font-size: 1.6rem;}
footer p {font-size: 0.75rem;}
/* layout */
main, footer {position: absolute;}
header {height: 4rem;padding: 1rem;}
header h1 {margin-bottom: 0.25rem;}
header h2 {margin-bottom: 0.5rem;}
main {display: flex;top: 6rem;bottom: 3rem;right: 1rem;left: 1rem;align-items: stretch;}
main article {flex: auto;background-position: top center;background-repeat: no-repeat;background-size: contain;}
main nav {flex: 10%;}
main nav ol {list-style: none;}
main nav ol li a {display: block;line-height: 2rem;padding: 0 1.5rem 0 2rem;}
main nav ol li a:hover {text-decoration: underline;}
main nav ol li.on {position: relative;}
main nav ol li.on a:before {content: "✅";position: absolute;margin-left: -1.5rem;}
footer {bottom: 0;left: 0;right: 0;text-align: right;}
footer p {margin: 0 1rem;line-height: 2rem;}
footer a.icon {display: inline-block;text-align: center;width: 1.5rem;}
/* themes */
body.light {color: #333;background-color: #eee;}
body.light a {color: #666;}
body.light header h1 {color: #666;}
body.light header h2 {color: #333;}
body.light header a {color: #369;}
body.light main nav ol {background: #f7f7f7;}
body.light footer p {color: #666;}
body.dark {color: #bbb;background: #333;}
body.dark header h1 {color: #aaa;}
body.dark header h2 {color: #ddd;}
body.dark a {color: #ccc;}
body.dark a:hover {color: #eee;}
body.dark main nav ol {background: #444;}
body.dark footer p {color: #888;}
/* responsiveness */
@media screen and (orientation: landscape) {
body main {flex-direction: row;}
body main nav {overflow: auto;max-width: 25rem;}
body main nav ol {overflow: visible;background: none !important;}
}
@media screen and (orientation: portrait) {
body main {flex-direction: column;}
body main nav {overflow: visible;max-height: 3rem;order: 1;padding: 0;}
body main nav ol {overflow: hidden;height: 2rem;}
body main nav.expand ol {height: 20rem;overflow: auto;z-index: 1000;}
body main article {order: 2;z-index: -1;}
}
</style>
<script>
function reportWindowSize() {
    document.body.style.height = document.body.scrollHeight + "px";
    const el = document.querySelector('nav li.on a');
    if (el) el.click();
}

function toggleTheme(event) {
    const el = document.querySelector('body');
    el.className = el.className === 'light' ? 'dark' : 'light';
    if (event) event.preventDefault();
}

function toggleZoom(event) {
    const el = document.querySelector('article');
    el.style.backgroundSize = el.style.backgroundSize === 'unset' ? 'contain' : 'unset';
}

function expandList() {
    document.querySelector('nav').className = 'expand';
}

function collapseList() {
    document.querySelector('nav').className = '';
    document.querySelector('nav ol').scrollTo(0, document.querySelector('nav ol li.on').offsetTop);
}

function loadImage(event) {
    document.querySelector('*').style.cursor = 'progress';
    document.querySelector('header h2').textContent = event.target.text;
    const img = new Image;
    img.src = event.target.href;
    img.addEventListener('load', function () {
        document.querySelector('article').style.backgroundImage = 'url(' + img.src + ')';
        document.querySelector('footer p span').innerHTML = 'Image size: ' + img.width + 'x' + img.height
            + ' <a class="icon" href="' + event.target.href + '" target="_blank" title="Download original file">⏬</a>';
    });
    document.querySelector('*').style.cursor = 'default';
    document.querySelectorAll('nav li.on').forEach(function (el) {
        el.className = ''
    })
    event.target.parentElement.className = 'on';
    collapseList();
    event.preventDefault();
}

function onLoad() {
    window.addEventListener('resize', reportWindowSize);
    document.querySelector('.theme').addEventListener('click', toggleTheme);
    document.querySelector('.zoom').addEventListener('click', toggleZoom);
    document.querySelector('nav').addEventListener('mouseover', expandList);
    document.querySelector('nav').addEventListener('mouseleave', collapseList);
    document.querySelectorAll('nav a').forEach(function (el) {
        el.addEventListener('click', loadImage);
    });
    reportWindowSize();
    toggleTheme();
}

window.addEventListener('load', onLoad);
window.addEventListener('load', function () {
    document.querySelector('nav a').click();
});
</script>
</head>
<body>
<header>
<h1><?php echo $album_title ?></h1>
<h2></h2>
<p></p>
</header>
<main>
<?php if (sizeof($images) > 0) { ?>
<article></article>
<nav>
<ol>
<?php foreach ($images as $filename)
    echo '<li><a href="' . rawurlencode($image_dir) . '/' . rawurlencode($filename) . '">' . humanize($filename) . "</a></li>\n"; ?>
</ol>
</nav>
<?php } else echo "<h3>Please upload photos to {$image_dir}/ directory</h3>"; ?>
</main>
<footer>
<p><span></span>
<a class="icon theme" href="#" title="Toggle theme">💡</a>
<a class="icon zoom" href="#" title="Toggle zoom">🔍</a>
Powered by <a href="https://themactep.com/apps/ramka">ramka</a>.</p>
</footer>
</body>
</html>
