rpiwebapp-public/comics/templates/comics/comicGallery.html

{% extends "base.html" %}

{% block head %}
    <script src="/static/hammer.js"></script>
    <style>
    /* The Modal (background) */
    .light-box {
      display: none;
      position: fixed;
      z-index: 1;
      padding-top: 100px;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      overflow: auto;
      background-color: black;
    }

    /* Modal Content */
    .light-box-content {
      position: relative;
      background-color: #fefefe;
      margin: auto;
      padding: 0;
      width: 90%;
      max-width: 1200px;
    }

    /* The Close Button */
    .close {
      color: white;
      position: absolute;
      top: 10px;
      right: 25px;
      font-size: 35px;
      font-weight: bold;
    }

    .close:hover,
    .close:focus {
      color: #999;
      text-decoration: none;
      cursor: pointer;
    }

    /* Hide the slides by default */
    .mySlides {
      display: none;
    }

    /* Next & previous buttons */
    .prev,
    .next {
      cursor: pointer;
      position: absolute;
      top: 50%;
      width: auto;
      padding: 16px;
      margin-top: -50px;
      color: white;
      font-weight: bold;
      font-size: 20px;
      transition: 0.6s ease;
      border-radius: 0 3px 3px 0;
      user-select: none;
      -webkit-user-select: none;
    }

    /* Position the "next button" to the right */
    .next {
      right: 0;
      border-radius: 3px 0 0 3px;
    }

    /* On hover, add a black background color with a little bit see-through */
    .prev:hover,
    .next:hover {
      background-color: rgba(0, 0, 0, 0.8);
    }

    /* Number text (1/3 etc) */
    .numbertext {
      color: #f2f2f2;
      font-size: 12px;
      padding: 8px 12px;
      position: absolute;
      top: 0;
    }
    </style>
{% endblock %}

{% block content %}
    <div style="text-align: center">
    {% include "pagination.html" %}
    </div>
    <div style="text-align: center">
    <div id="page-container" class="comic-grid"></div>
    </div>
    <div style="text-align: center">
    {% include "pagination.html" %}
    </div>

    <div id="page" class="light-box">
    <span class="close cursor" onclick="closeLightBox()">&times;</span>
    <div id="light-box-content" class="light-box-content">
        <a id="prev" class="prev" onclick="offsetImages(-1)">&#10094;</a>
        <a id="next" class="next" onclick="offsetImages(1)">&#10095;</a>
    </div>
    </div>
{% endblock %}

{% block footer %}
    <script>
    var comic = {{ comic|tojson }};
    function populate_page() {
        page_container.innerHTML = "";
        for (i = start;i < end; i++) {
            var list_element = `<div style="margin: auto" class="comic-thumbnail card bg-dark text-white">
            <img src="/comics/get_comic/${comic.id}/${i}/thumbnail" alt="" style="display: inline" onerror="this.src='/static/images/default.png';this.height='256'" onclick="openLightBox();currentImage(${1+i})">
            <p class="card-text">${1+i}/${comic.pagecount}</p>
            </div>`;
            page_container.innerHTML += list_element;
        }
    }
    go_to_page(page_num);
    </script>
    <script>
    let page_count = {{ comic.pagecount }};
    let comic_id = {{ comic.id }};

    let nav_display = document.getElementsByTagName("nav")[0].style.display;
    let light_box_content = document.getElementById("light-box-content");
    let next_image = document.getElementById("next");
    let prev_image = document.getElementById("prev");

    function load_next_image(page_number) {
        if (document.getElementById(page_number.toString())) {return;}
        if (page_number >= page_count) {return;}
        console.log("start loading: page "+(page_number+1).toString());
        let image = '<div class="images">';
        image += `<div class="numbertext">${1 + page_number} / ${page_count}</div>`;
        image += `<img id="${page_number}" style="width: 100%" src="/comics/get_comic/${comic_id}/${page_number}" alt="" onerror="this.src=\'/static/images/default.png\';load_next_image(${page_number + 1})" ondragstart="return false" onload="load_next_image(${page_number + 1})">`;
        image += '</div>';
        light_box_content.innerHTML += image;
    }

    // Open the Modal
    function openLightBox() {
        document.getElementById("page").style.display = "block";
        document.getElementsByTagName("nav")[0].style.display = "none";
    }

    // Close the Modal
    function closeLightBox() {
        document.getElementById("page").style.display = "none";
        document.getElementsByTagName("nav")[0].style.display = nav_display;
    }

    var imageIndex = 1;

    // Next/previous controls
    function offsetImages(n) {
        showImage(imageIndex += n);
        document.getElementById("page").scrollTo(0,0);
    }

    // Thumbnail image controls
    function currentImage(n) {
        showImage(imageIndex = n);
        document.getElementById("page").scrollTo(0,0);
    }

    function showImage(n) {
        var i;
        var slides = document.getElementsByClassName("images");
        if (n > slides.length) {imageIndex = 1}
        if (n < 1) {imageIndex = slides.length}
        for (i = 0; i < slides.length; i++) {
            slides[i].style.display = "none";
        }
        slides[imageIndex-1].style.display = "block";
    }

    document.addEventListener("keydown", function (event) {
        if (event.key == "ArrowRight") {
            next_image.click();
        }
        else if (event.key == "ArrowLeft") {
            prev_image.click();
        }
    })

    let page = document.getElementById("page");
    let hammer = new Hammer(page);

    hammer.on("swiperight", function (ev) {
        prev_image.click();
    });
    hammer.on("swipeleft", function (ev) {
        next_image.click();
    });
    load_next_image(0);
    </script>
{% endblock %}