python-gallery/gallery/templates/image.html

{% extends 'layout.html' %}

{% block header %}
    <img src="/api/uploads/{{ image['file_name'] }}/1000" alt="leaves" onload="imgFade(this)" style="opacity:0;"/>
{% endblock %}

{% block content %}
    <div class="image__fullscreen">
        <img
            src=""
            onload="imgFade(this)"
            style="opacity:0;"
        />
    </div>

    <div class="app">
        <div class="image__container">
            <img
                class="image__item"
                src="/api/uploads/{{ image['file_name'] }}/1000"
                onload="imgFade(this)" style="opacity:0;"
                onerror="this.src='/static/images/error.png'"
            />
        </div>
        <div class="img-tools">
            <div>
                <button class="tool-btn" id="img-fullscreen">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="-4 -4 24 24" fill="currentColor">
                        <path d="M12.586 2H11a1 1 0 0 1 0-2h4a1 1 0 0 1 1 1v4a1 1 0 0 1-2 0V3.414L9.414 8 14 12.586V11a1 1 0 0 1 2 0v4a1 1 0 0 1-1 1h-4a1 1 0 0 1 0-2h1.586L8 9.414 3.414 14H5a1 1 0 0 1 0 2H1a1 1 0 0 1-1-1v-4a1 1 0 0 1 2 0v1.586L6.586 8 2 3.414V5a1 1 0 1 1-2 0V1a1 1 0 0 1 1-1h4a1 1 0 1 1 0 2H3.414L8 6.586 12.586 2z"></path>
                    </svg>
                    <span class="tool-tip">Fullscreen</span>
                </button>
                <button class="tool-btn" id="img-share">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="-3 -3 24 24" fill="currentColor">
                        <path d="M3.19 9.345a.97.97 0 0 1 1.37 0 .966.966 0 0 1 0 1.367l-2.055 2.052a1.932 1.932 0 0 0 0 2.735 1.94 1.94 0 0 0 2.74 0l4.794-4.787a.966.966 0 0 0 0-1.367.966.966 0 0 1 0-1.368.97.97 0 0 1 1.37 0 2.898 2.898 0 0 1 0 4.103l-4.795 4.787a3.879 3.879 0 0 1-5.48 0 3.864 3.864 0 0 1 0-5.47L3.19 9.344zm11.62-.69a.97.97 0 0 1-1.37 0 .966.966 0 0 1 0-1.367l2.055-2.052a1.932 1.932 0 0 0 0-2.735 1.94 1.94 0 0 0-2.74 0L7.962 7.288a.966.966 0 0 0 0 1.367.966.966 0 0 1 0 1.368.97.97 0 0 1-1.37 0 2.898 2.898 0 0 1 0-4.103l4.795-4.787a3.879 3.879 0 0 1 5.48 0 3.864 3.864 0 0 1 0 5.47L14.81 8.656z"></path>
                    </svg>
                    <span class="tool-tip">Share</span>
                </button>
            </div>
            {% if g.user['id'] == image['author_id'] %}
                <div>
                    <button class="tool-btn tool-btn--evil" id="img-delete">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="-3 -2 24 24" fill="currentColor">
                            <path d="M6 2V1a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1h4a2 2 0 0 1 2 2v1a2 2 0 0 1-2 2h-.133l-.68 10.2a3 3 0 0 1-2.993 2.8H5.826a3 3 0 0 1-2.993-2.796L2.137 7H2a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h4zm10 2H2v1h14V4zM4.141 7l.687 10.068a1 1 0 0 0 .998.932h6.368a1 1 0 0 0 .998-.934L13.862 7h-9.72zM7 8a1 1 0 0 1 1 1v7a1 1 0 0 1-2 0V9a1 1 0 0 1 1-1zm4 0a1 1 0 0 1 1 1v7a1 1 0 0 1-2 0V9a1 1 0 0 1 1-1z"></path>
                        </svg>
                        <span class="tool-tip">Delete</span>
                    </button>
                    <button class="tool-btn tool-btn--evil" id="img-edit">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="-2.5 -2.5 24 24" fill="currentColor">
                            <path d="M12.238 5.472L3.2 14.51l-.591 2.016 1.975-.571 9.068-9.068-1.414-1.415zM13.78 3.93l1.414 1.414 1.318-1.318a.5.5 0 0 0 0-.707l-.708-.707a.5.5 0 0 0-.707 0L13.781 3.93zm3.439-2.732l.707.707a2.5 2.5 0 0 1 0 3.535L5.634 17.733l-4.22 1.22a1 1 0 0 1-1.237-1.241l1.248-4.255 12.26-12.26a2.5 2.5 0 0 1 3.535 0z"></path>
                        </svg>
                        <span class="tool-tip">Edit</span>
                    </button>
                </div>
            {% endif %}
            <div>
                <button class="tool-btn" id="img-info">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="-2 -2 24 24" fill="currentColor">
                        <path d="M10 20C4.477 20 0 15.523 0 10S4.477 0 10 0s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm0-10a1 1 0 0 1 1 1v5a1 1 0 0 1-2 0V9a1 1 0 0 1 1-1zm0-1a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"></path>
                    </svg>
                    <span class="tool-tip">Info</span>
                </button>
            </div>
        </div>
        {% if image['alt'] != '' %}
            <div class="image__info">
                <div class="image__info-header">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="-2 -2.5 24 24" fill="currentColor">
                        <path d="M3.656 17.979A1 1 0 0 1 2 17.243V15a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h11a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H8.003l-4.347 2.979zm.844-3.093a.536.536 0 0 0 .26-.069l2.355-1.638A1 1 0 0 1 7.686 13H12a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v5c0 .54.429.982 1 1 .41.016.707.083.844.226.128.134.135.36.156.79.003.063.003.177 0 .37a.5.5 0 0 0 .5.5z"></path><path d="M16 10.017a7.136 7.136 0 0 0 0 .369v-.37c.02-.43.028-.656.156-.79.137-.143.434-.21.844-.226.571-.018 1-.46 1-1V3a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1H5V2a2 2 0 0 1 2-2h11a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2v2.243a1 1 0 0 1-1.656.736L16 13.743v-3.726z"></path>
                    </svg>
                    <h2>Alt</h2>
                </div>
                <div class="image__info-content">
                    <p>{{ image['alt'] }}</p>
                </div>
            </div>
        {% endif %}
        {% if image['description'] != '' %}
            <div class="image__info">
                <div class="image__info-header">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="-4 -2 24 24" fill="currentColor">
                        <path d="M3 0h10a3 3 0 0 1 3 3v14a3 3 0 0 1-3 3H3a3 3 0 0 1-3-3V3a3 3 0 0 1 3-3zm0 2a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H3zm2 1h6a1 1 0 0 1 0 2H5a1 1 0 1 1 0-2zm0 12h2a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2zm0-4h6a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2zm0-4h6a1 1 0 0 1 0 2H5a1 1 0 1 1 0-2z"></path>
                    </svg>
                    <h2>Description</h2>
                </div>
                <div class="image__info-content">
                    <p>{{ image['description'] }}</p>
                </div>
            </div>
        {% endif %}
        <div class="image__info">
            <div class="image__info-header">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="-2 -2 24 24" fill="currentColor">
                    <path d="M10 20C4.477 20 0 15.523 0 10S4.477 0 10 0s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm0-10a1 1 0 0 1 1 1v5a1 1 0 0 1-2 0V9a1 1 0 0 1 1-1zm0-1a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"></path>
                </svg>
                <h2>Info</h2>
            </div>
            <div class="image__info-content">
                <p>Filename: {{ image['file_name'] }}</p>
                <p>Image ID: {{ image['id'] }}</p>
                <p>Author: {{ image['author_id'] }}</p>
                <p>Upload date: {{ image['created_at'] }}</p>
                {% if file is not false %}
                    <p>Dimensions: {{ file['width'] }}x{{ file['height'] }}</p>
                {% endif %}
            </div>
        </div>
        {% if exif is not false %}
            <div class="image__info">
                <div class="image__info-header">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="-2 -2 24 24" fill="currentColor">
                        <path d="M14.95 7.879l-.707-.707a1 1 0 0 1 1.414-1.415l.707.707 1.414-1.414-2.828-2.828L2.222 14.95l2.828 2.828 1.414-1.414L5.05 14.95a1 1 0 0 1 1.414-1.414L7.88 14.95l1.414-1.414-.707-.708A1 1 0 0 1 10 11.414l.707.707 1.414-1.414-1.414-1.414a1 1 0 0 1 1.414-1.414l1.415 1.414 1.414-1.414zM.808 13.536L13.536.808a2 2 0 0 1 2.828 0l2.828 2.828a2 2 0 0 1 0 2.828L6.464 19.192a2 2 0 0 1-2.828 0L.808 16.364a2 2 0 0 1 0-2.828z"></path>
                    </svg>
                    <h2>Metadata</h2>
                </div>
                <div class="image__info-content">
                    {% for tag in exif %}
                        <p>{{ tag }}: {{ exif[tag] }}</p>
                    {% endfor %}
                </div>
            </div>
        {% endif %}
    </div>
    <script>
        /*
        const url = new URL(window.location);
        if (url.searchParams.get('i') == 'full') {
            $('.image__fullscreen').addClass('image__fullscreen--active');
            $('.image__fullscreen img').attr('src', '/api/uploads/{{ image['file_name'] }}/0');
        } else {
            $('.image__fullscreen').removeClass('image__fullscreen--active');
        }
        */

        $('.image__fullscreen').click(function() {
            $('.image__fullscreen').removeClass('image__fullscreen--active');
            //window.history.replaceState({}, '', `${url}`);
        });

        $('#img-fullscreen').click(function() {
            $('.image__fullscreen').addClass('image__fullscreen--active');
            $('.image__fullscreen img').attr('src', '/api/uploads/{{ image['file_name'] }}/0');
            //window.history.replaceState({}, '', url+'?i=full');
        });
        $('#img-share').click(function() {
            //navigator.clipboard.writeText(window.location.href);
            addNotification("Copied link!", 4);
        });
        $('#img-info').click(function() {
            
        });

        {% if g.user['id'] == image['author_id'] %}
            $('#img-delete').click(function() {
                $.ajax({
                    url: '/api/remove/{{ image['id'] }}',
                    type: 'post',
                    data: {
                        action: 'delete'
                    },
                    
                    success: function (response) {
                        addNotification("Image was all in le head", 1);
                        setTimeout(function() {
                            window.location.href = '/';
                        }, 1000);
                    },
                    error: function (response) {
                        addNotification(`Image *clings*: ${response}`, 2);
                    }
                });
            });
            $('#img-edit').click(function() {
                window.location.href = '/image/{{ image['id'] }}/edit';
            });
        {% endif %}
    </script>
{% endblock %}