misuzu/templates/user/profile.twig

{% extends 'user/master.twig' %}
{% from 'macros.twig' import container_title %}
{% from '_layout/input.twig' import input_hidden, input_csrf, input_text, input_checkbox, input_file, input_file_raw %}

{% set image = '/profile.php?u=' ~ profile.user_id ~ '&m=avatar' %}
{% set canonical_url = '/profile.php?u=' ~ profile.user_id %}
{% set title = 'Profile of ' ~ profile.username %}
{% set manage_link = '/manage/users.php?v=view&u=' ~ profile.user_id %}

{% set stats = [
    {
        'title': 'Joined',
        'is_date': true,
        'value': profile.created_at,
    },
    {
        'title': 'Last seen',
        'is_date': true,
        'value': profile.last_seen,
    },
    {
        'title': 'Topics',
        'value': profile.forum_topic_count,
    },
    {
        'title': 'Posts',
        'value': profile.forum_post_count,
    },
    {
        'title': 'Comments',
        'value': profile.comments_count,
    },
    {
        'title': 'Changes',
        'value': profile.changelog_count,
    },
] %}

{% block content %}
    {% if is_editing %}
        <form class="profile" method="post" action="" enctype="multipart/form-data">
            {{ input_hidden('user', profile.user_id) }}
            {{ input_csrf('profile') }}

            {% if perms.edit_avatar %}
                {{ input_file_raw('avatar[file]', 'profile__hidden', ['image/png', 'image/jpeg', 'image/gif'], {'id':'avatar-selection'}) }}

                <script>
                    function updateAvatarPreview(name, url, preview) {
                        url = url || "/profile.php?u={{ profile.user_id }}&m=avatar";
                        preview = preview || document.getElementById('avatar-preview');
                        preview.style.backgroundImage = 'url(\'{0}\')'.replace('{0}', url);
                        preview.title = name;
                    }

                    document.getElementById('avatar-selection').addEventListener('change', function (ev) {
                        updateAvatarPreview(ev.target.files[0].name, URL.createObjectURL(ev.target.files[0]));
                    });
                </script>
            {% endif %}
    {% else %}
        <div class="profile">
    {% endif %}

            {% include 'user/_layout/header.twig' %}

            {% if is_editing %}
                <div class="container profile__guidelines">
                    <ul class="profile__guidelines__section">
                        <li class="profile__guidelines__line profile__guidelines__line--header">General</li>
                        <li class="profile__guidelines__line">Keep things sane and generally suitable for all ages.</li>
                        <li class="profile__guidelines__line">Make sure to adhere to the <a href="/info.php/rules" class="profile__guidelines__link">rules</a>.</li>
                    </ul>

                    {% if perms.edit_avatar %}
                        <ul class="profile__guidelines__section">
                            <li class="profile__guidelines__line profile__guidelines__line--header">Avatar</li>
                            <li class="profile__guidelines__line">May not exceed the <span class="profile__guidelines__emphasis">{{ guidelines.avatar.max_size|byte_symbol(true) }}</span> file size limit.</li>
                            <li class="profile__guidelines__line">May not be larger than <span class="profile__guidelines__emphasis">{{ guidelines.avatar.max_width }}x{{ guidelines.avatar.max_height }}</span>.</li>
                            <li class="profile__guidelines__line">Will be centre cropped and scaled to <span class="profile__guidelines__emphasis">200x200</span>.</li>
                            <li class="profile__guidelines__line">Animated gif images are allowed.</li>
                        </ul>
                    {% endif %}

                    {% if perms.edit_background %}
                        <ul class="profile__guidelines__section">
                            <li class="profile__guidelines__line profile__guidelines__line--header">Background</li>
                            <li class="profile__guidelines__line">May not exceed the <span class="profile__guidelines__emphasis">{{ guidelines.background.max_size|byte_symbol(true) }}</span> file size limit.</li>
                            <li class="profile__guidelines__line">May not be larger than <span class="profile__guidelines__emphasis">{{ guidelines.background.max_width }}x{{ guidelines.background.max_height }}</span>.</li>
                            <li class="profile__guidelines__line">Gif images, in general, are only allowed when tiling.</li>
                        </ul>
                    {% endif %}
                </div>
            {% endif %}

            {% if profile_notices|length > 0 %}
                <div class="warning">
                    <div class="warning__content">
                        {% for notice in profile_notices %}
                            {{ notice }}
                        {% endfor %}
                    </div>
                </div>
            {% endif %}

            <div class="profile__container">
                <div class="profile__container__side">
                    {% if is_editing and perms.edit_background %}
                        <div class="container profile__background-settings">
                            {{ container_title('Background') }}

                            <div class="profile__background-settings__content">
                                {{ input_file('background[file]', '', ['image/png', 'image/jpeg', 'image/gif'], {'id':'background-selection'}) }}

                                <select name="background[attach]" class="input__select" onchange="profileChangeBackgroundAttach(this.value)">
                                    {% for key, value in background_attachments %}
                                        <option value="{{ value }}"{% if profile.user_background_attachment == key %} selected{% endif %}>
                                            {{ value|capitalize }}
                                        </option>
                                    {% endfor %}
                                </select>

                                {{ input_checkbox('background[delete]', 'Delete', false, '', '', false, {'onchange':'profileToggleBackground(this.checked)'}) }}
                                {{ input_checkbox('background[attr][blend]', 'Blend', profile.user_background_blend, '', '', false, {'onchange':'profileToggleBackgroundAttr(\'blend\', this.checked)'}) }}
                                {{ input_checkbox('background[attr][slide]', 'Slide', profile.user_background_slide, '', '', false, {'onchange':'profileToggleBackgroundAttr(\'slide\', this.checked)'}) }}
                            </div>
                        </div>
                    {% endif %}
                    {% if current_user is not defined %}
                        <div class="container">
                            <div class="profile__accounts__notice">
                                You must <a href="/auth.php?m=login" class="profile__accounts__link">log in</a> to view full profiles!
                            </div>
                        </div>
                    {% elseif is_editing ? perms.edit_profile : profile_fields|default([])|length > 0 %}
                        <div class="container profile__accounts">
                            {{ container_title('Elsewhere') }}

                            <div class="profile__accounts__content">
                                {% for name, data in profile_fields %}
                                    <label class="profile__accounts__item">
                                        <div class="profile__accounts__title">
                                            {{ data.name }}
                                        </div>

                                        {% if is_editing %}
                                            {{ input_text('profile[' ~ name ~ ']', 'profile__accounts__input', profile['user_' ~ name], data.type|default('text')) }}
                                        {% else %}
                                            <div class="profile__accounts__value"
                                                {% if data.tooltip is defined %}title="{{ data.tooltip|format(data.value)|raw }}"{% endif %}>
                                                {% set profile_field_value = (data.format is defined ? data.format : '%s')|format(data.value) %}
                                                {% if data.link is defined %}
                                                    {{ data.link|format(data.value)|html_link(profile_field_value, 'profile__accounts__link')|raw }}
                                                {% else %}
                                                    {{ profile_field_value }}
                                                {% endif %}
                                            </div>
                                        {% endif %}
                                    </label>
                                {% endfor %}
                            </div>
                        </div>
                    {% endif %}
                </div>

                <div class="profile__container__main">
                    {% if (is_editing and perms.edit_about) or profile.user_about_content|length > 0 %}
                        <div class="container profile__about" id="about">
                            {{ container_title('About ' ~ profile.username) }}

                            <div class="profile__about__content{% if is_editing %} profile__about__content--edit{% endif %}">
                                {% if is_editing %}
                                    <select name="about[parser]" class="input__select profile__about__select">
                                        {% for parser, name in constant('MSZ_PARSERS_NAMES') %}
                                            <option value="{{ parser }}"{% if parser == profile.user_about_parser %} selected{% endif %}>{{ name }}</option>
                                        {% endfor %}
                                    </select>
                                    <textarea name="about[text]" class="input__textarea profile__about__editor" id="about-textarea">{{ profile.user_about_content|escape }}</textarea>
                                {% else %}
                                    {{ profile.user_about_content|escape|parse_text(profile.user_about_parser)|raw }}
                                {% endif %}
                            </div>
                        </div>
                    {% endif %}

                </div>
            </div>
    {% if is_editing %}
        </form>
        <script>
            let profilePreviousBackground = null;

            function profileToggleBackground(checked) {
                let currentBg = document.body.style.getPropertyValue('--background-image');

                if (currentBg != 'initial' && checked) {
                    profilePreviousBackground = currentBg;
                    currentBg = 'initial';
                } else if (!checked) {
                    currentBg = profilePreviousBackground;
                }

                document.body.style.setProperty('--background-image', currentBg);
            }

            function profileChangeBackgroundAttach(mode) {
                const modes = [
                    'cover',
                    'stretch',
                    'tile',
                    'contain',
                ];

                if (modes.indexOf(mode) < 0)
                    return;

                for (let i = 0; i < modes.length; i++)
                    document.body.classList.remove('main--bg-' + modes[i]);

                document.body.classList.add('main--bg-' + mode);
            }

            function profileToggleBackgroundAttr(attr, mode) {
                let className = '';

                switch (attr) {
                    case 'blend':
                        className = 'main--bg-blend';
                        break;

                    case 'slide':
                        className = 'main--bg-slide';
                        break;
                }

                if (className) {
                    if (mode)
                        document.body.classList.add(className);
                    else
                        document.body.classList.remove(className);
                }
            }

            document.getElementById('background-selection').addEventListener('change', ev => {
                const image = new Image();
                image.src = URL.createObjectURL(ev.target.files[0]);
                image.addEventListener('load', () => {
                    document.body.style.setProperty('--background-image', 'url(%)'.replace('%', image.src));
                    document.body.style.setProperty('--background-width', '%px'.replace('%', image.width));
                    document.body.style.setProperty('--background-height', '%px'.replace('%', image.height));
                });
            });
        </script>
    {% else %}
        </div>
    {% endif %}
{% endblock %}