python-gallery/gallery/templates/image.html

{% extends 'layout.html' %}

{% block wrapper_class %}image-wrapper{% endblock %}

{% block content %}
    <div class="background">
        <img src="/api/uploads/{{ image['file_name'] }}?w=1000&h=1000" onload="imgFade(this)" style="opacity:0;"/>
        <span style="background-image: linear-gradient(to top, rgba({{ image['image_colours'][0][0] }}, {{ image['image_colours'][0][1] }}, {{ image['image_colours'][0][2] }}, 1), transparent);"></span>
    </div>

    <div class="image-fullscreen">
        <img src="" onload="imgFade(this);" style="opacity:0;" />
    </div>

    <div class="image-grid">
        <div class="image-container" id="image-container">
            <img
                src="/api/uploads/{{ image['file_name'] }}?w=1000&h=1000"
                onload="imgFade(this)" style="opacity:0;"
                onerror="this.src='/static/images/error.png'"
                width="{{ exif['File']['Width']['raw'] }}"
                height="{{ exif['File']['Height']['raw'] }}"
            />
        </div>

        <div class="pill-row" id="image-tools">
            {% if next_id %}
                <div>
                    <a class="pill-item" href="{{ url_for('gallery.image', image_id=next_id) }}">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="-5 -5 24 24" width="24" fill="currentColor">
                            <path d="M3.414 7.657l3.95 3.95A1 1 0 0 1 5.95 13.02L.293 7.364a.997.997 0 0 1 0-1.414L5.95.293a1 1 0 1 1 1.414 1.414l-3.95 3.95H13a1 1 0 0 1 0 2H3.414z"></path>
                        </svg>
                        <span class="tool-tip">
                            Previous
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,48,88H208a8,8,0,0,1,5.66,13.66Z"></path></svg>
                        </span>
                    </a>
                </div>
            {% endif %}
            <div>
                <button class="pill-item" 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
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,48,88H208a8,8,0,0,1,5.66,13.66Z"></path></svg>
                    </span>
                </button>
                <button class="pill-item" 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
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,48,88H208a8,8,0,0,1,5.66,13.66Z"></path></svg>
                    </span>
                </button>
                <a class="pill-item" id="img-download" href="/api/uploads/{{ image['file_name'] }}" download>
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="-5 -5 24 24" fill="currentColor">
                        <path d="M8 6.641l1.121-1.12a1 1 0 0 1 1.415 1.413L7.707 9.763a.997.997 0 0 1-1.414 0L3.464 6.934A1 1 0 1 1 4.88 5.52L6 6.641V1a1 1 0 1 1 2 0v5.641zM1 12h12a1 1 0 0 1 0 2H1a1 1 0 0 1 0-2z"></path>
                    </svg>
                    <span class="tool-tip">
                        Download
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,48,88H208a8,8,0,0,1,5.66,13.66Z"></path></svg>
                    </span>
                </a>
            </div>
            {% if g.user['id'] == image['author_id'] %}
                <div>
                    <button class="pill-item pill__critical" 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
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,48,88H208a8,8,0,0,1,5.66,13.66Z"></path></svg>
                        </span>
                    </button>
                    <button class="pill-item pill__critical" 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
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,48,88H208a8,8,0,0,1,5.66,13.66Z"></path></svg>
                        </span>
                    </button>
                </div>
            {% endif %}
            {% if prev_id %}
                <div>
                    <a class="pill-item" href="{{ url_for('gallery.image', image_id=prev_id) }}">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="-5 -5 24 24" width="24" fill="currentColor">
                            <path d="M10.586 5.657l-3.95-3.95A1 1 0 0 1 8.05.293l5.657 5.657a.997.997 0 0 1 0 1.414L8.05 13.021a1 1 0 1 1-1.414-1.414l3.95-3.95H1a1 1 0 1 1 0-2h9.586z"></path>
                        </svg>
                        <span class="tool-tip">
                            Next
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,48,88H208a8,8,0,0,1,5.66,13.66Z"></path></svg>
                        </span>
                    </a>
                </div>
            {% endif %}
        </div>
    
        <div class="info-container" id="image-info">
            {% if image['post_description'] %}
                <div class="info-tab">
                    <div class="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>
                        <svg class="collapse-indicator" xmlns="http://www.w3.org/2000/svg" viewBox="-5 -8 24 24" fill="currentColor">
                            <path d="M7.071 5.314l4.95-4.95a1 1 0 1 1 1.414 1.414L7.778 7.435a1 1 0 0 1-1.414 0L.707 1.778A1 1 0 1 1 2.121.364l4.95 4.95z"></path>
                        </svg>
                    </div>
                    <div class="info-table">
                        <p>{{ image['post_description'] }}</p>
                    </div>
                </div>
            {% endif %}
            <div class="info-tab">
                <div class="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>
                    <svg class="collapse-indicator" xmlns="http://www.w3.org/2000/svg" viewBox="-5 -8 24 24" fill="currentColor">
                        <path d="M7.071 5.314l4.95-4.95a1 1 0 1 1 1.414 1.414L7.778 7.435a1 1 0 0 1-1.414 0L.707 1.778A1 1 0 1 1 2.121.364l4.95 4.95z"></path>
                    </svg>
                </div>
                <div class="info-table">
                    <table>
                        <tr>
                            <td>Image ID</td>
                            <td>{{ image['id'] }}</td>
                        </tr>
                        <tr>
                            <td>Author</td>
                            <td>{{ image['author_username'] }}</td>
                        </tr>
                        <tr>
                            <td>Upload date</td>
                            <td><span class="time">{{ image['created_at'] }}</span></td>
                        </tr>
                    </table>
                    <div class="img-colours">
                        {% for col in image.image_colours %}
                            <span style="background-color: rgb({{col[0]}}, {{col[1]}}, {{col[2]}})"></span>
                        {% endfor %}
                    </div>
                </div>
            </div>       
            {% for tag in exif %}
                <div class="info-tab">
                    <div class="info-header">
                        {% if tag == 'Photographer' %}
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="-5 -2 24 24" fill="currentColor">
                                <path d="M3.534 10.07a1 1 0 1 1 .733 1.86A3.579 3.579 0 0 0 2 15.26V17a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-1.647a3.658 3.658 0 0 0-2.356-3.419 1 1 0 1 1 .712-1.868A5.658 5.658 0 0 1 14 15.353V17a3 3 0 0 1-3 3H3a3 3 0 0 1-3-3v-1.74a5.579 5.579 0 0 1 3.534-5.19zM7 0a4 4 0 0 1 4 4v2a4 4 0 1 1-8 0V4a4 4 0 0 1 4-4zm0 2a2 2 0 0 0-2 2v2a2 2 0 1 0 4 0V4a2 2 0 0 0-2-2z"></path>
                            </svg>
                            <h2>Photographer</h2>
                        {% elif tag == 'Camera' %}
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="-2 -4 24 24" fill="currentColor">
                                <path d="M5.676 5H4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-1.676l-.387-1.501A2.002 2.002 0 0 0 12 2H8a2 2 0 0 0-1.937 1.499L5.676 5zm-1.55-2C4.57 1.275 6.136 0 8 0h4a4.002 4.002 0 0 1 3.874 3H16a4 4 0 0 1 4 4v5a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V7a4 4 0 0 1 4-4h.126zM10 13a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm0-2a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm6-3a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"></path>
                            </svg>
                            <h2>Camera</h2>
                        {% elif tag == 'Software' %}
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="-2 -4 24 24" fill="currentColor">
                                <path d="M2 13v1h3V2H2v9h1v2H2zM1 0h5a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1zm9 3h8a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2zm0 2v6h8V5h-8zm2 9h4a1 1 0 0 1 0 2h-4a1 1 0 0 1 0-2z"></path>
                            </svg>
                            <h2>Software</h2>
                        {% elif tag == 'File' %}
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="-4 -2 24 24" fill="currentColor">
                                <path d="M14 8.322V2H2v12h3.576l3.97-5.292A3 3 0 0 1 14 8.322zm0 3.753l-1.188-2.066a1 1 0 0 0-1.667-.101L8.076 14H14v-1.925zM14 16H2v2h12v-2zM2 0h12a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2zm4 9a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0-2a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"></path>
                            </svg>
                            <h2>File</h2>
                        {% else %}
                            <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>{{tag}}</h2>
                        {% endif %}
                        <svg class="collapse-indicator" xmlns="http://www.w3.org/2000/svg" viewBox="-5 -8 24 24" fill="currentColor">
                            <path d="M7.071 5.314l4.95-4.95a1 1 0 1 1 1.414 1.414L7.778 7.435a1 1 0 0 1-1.414 0L.707 1.778A1 1 0 1 1 2.121.364l4.95 4.95z"></path>
                        </svg>
                    </div>
                    <div class="info-table">
                        <table>
                            {% for subtag in exif[tag] %}
                                <tr>
                                    <td>{{subtag}}</td>
                                    {% if exif[tag][subtag]['formatted'] %}
                                        {% if exif[tag][subtag]['type'] == 'date' %}
                                            <td><span class="time">{{exif[tag][subtag]['formatted']}}</span></td>
                                        {% else %}
                                            <td>{{exif[tag][subtag]['formatted']}}</td>
                                        {% endif %}
                                    {% elif exif[tag][subtag]['raw'] %}
                                        <td>{{exif[tag][subtag]['raw']}}</td>
                                    {% else %}
                                        <td class="empty-table">Oops, an error</td>
                                    {% endif %}
                                </tr>
                            {% endfor %}
                        </table>
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>
{% endblock %}

{% block script %}
    <script>
        var infoTab = document.querySelectorAll('.info-tab');
        for (var i = 0; i < infoTab.length; i++) {
            infoTab[i].querySelector('.info-header').addEventListener('click', function() {
                this.parentNode.classList.toggle('collapsed');
            });
        }

        $('.image-fullscreen').click(function() {
            // un-Stop scrolling
            document.querySelector("html").style.overflow = "auto";

            $('.image-fullscreen').addClass('image-fullscreen__hide');

            setTimeout(function() {
                $('.image-fullscreen').removeClass('image-fullscreen__active image-fullscreen__hide');
            }, 200);
        });
        $('#img-fullscreen').click(function() {
            // Stop scrolling
            document.querySelector("html").style.overflow = "hidden";
            
            $('.image-fullscreen').addClass('image-fullscreen__active');
            
            if ($('.image-fullscreen img').attr('src') == '') {
                $('.image-fullscreen img').attr('src', '/api/uploads/{{ image['file_name'] }}');
            }
        });

        $('#img-share').click(function() {
            try {
                navigator.clipboard.writeText(window.location.href);
                addNotification("Copied link!", 4);
            } catch (err) {
                addNotification("Failed to copy link! Are you on HTTP?", 2);
            }
        });
        $('#img-download').click(function() {
            addNotification("Download started!", 4);
        });

        {% if g.user['id'] == image['author_id'] %}
            $('#img-delete').click(function() {
                popUpShow(
                    'DESTRUCTION!!!!!!',
                    'This will delete the image and all of its data!!! This action is irreversible!!!!! Are you sure you want to do this?????',
                    '<button class="pop-up__btn pop-up__btn-critical-fill" onclick="deleteImage()">Dewww eeeet!</button>',
                    '<img src="/api/uploads/{{ image['file_name'] }}?w=1000&h=1000" />'
                    );
            });
            $('#img-edit').click(function() {
                window.location.href = '/image/{{ image['id'] }}/edit';
            });

            function deleteImage() {
                popupDissmiss();

                $.ajax({
                    url: '/api/remove/{{ image['id'] }}',
                    type: 'post',
                    data: {
                        action: 'delete'
                    },
                    success: function (response) {
                        window.location.href = '/';
                    },
                    error: function (response) {
                        addNotification(`Image *clings*: ${response}`, 2);
                    }
                });
            }
        {% endif %}
    </script>
{% endblock %}