misuzu/views/mio/settings/avatar.twig

{% extends '@mio/settings/master.twig' %}

{% block settings_content %}
    <div class="settings__avatar">
        <div class="settings__avatar__sections">
            <div class="settings__avatar__requirements">
                <ul class="settings__avatar__requirements__list">
                    <li>Your avatar may not be larger than <strong>{{ avatar_max_width }}x{{ avatar_max_height }}</strong>.</li>
                    <li>The avatar will be centre cropped to be <strong>200x200</strong>.</li>
                    <li>Your avatar may not exceed the <strong>{{ avatar_max_filesize|byte_symbol(true) }}</strong> filesize limit.</li>
                    <li>Animated gif images are allowed.</li>
                    <li>Keep things sane and suitable for all ages.</li>
                </ul>
            </div>
            <div class="settings__avatar__forms">
                <form class="settings__avatar__form" method="post" action="?m=avatar" enctype="multipart/form-data">
                    <input type="hidden" name="MAX_FILE_SIZE" value="{{ avatar_max_filesize }}">
                    <label class="input__upload__label">
                        <input accept="image/png,image/jpeg,image/gif" type="file" name="avatar" class="input__upload" id="avatar-selection">
                        Pick file...
                    </label>
                    <button class="input__button" name="upload" value="{{ csrf_token() }}">Upload</button>
                </form>

                <form class="settings__avatar__form" method="post" action="?m=avatar">
                    <button class="input__button{% if not user_has_avatar %} input__button--disabled{% endif %}" name="delete" value="{{ csrf_token() }}"{% if not user_has_avatar %} disabled{% endif %}>Delete</button>
                </form>
            </div>
        </div>
        <div class="settings__avatar__preview__container">
            <div class="avatar settings__avatar__preview" id="avatar-preview" style="background-image:url('/profile.php?u={{ settings_user.user_id }}&amp;m=avatar')"></div>
        </div>
    </div>
    <script>
        function updateAvatarPreview(url, element) {
            url = url || "/profile.php?u={{ settings_user.user_id }}&m=avatar";
            element = element || document.getElementById('avatar-preview');
            element.style.backgroundImage = 'url(\'' + url + '\')';
        }

        document.getElementById('avatar-selection').addEventListener('change', function (ev) {
            updateAvatarPreview(URL.createObjectURL(ev.target.files[0]));
        });
    </script>
{% endblock %}