371 lines
20 KiB
Twig
371 lines
20 KiB
Twig
{% extends 'user/master.twig' %}
|
|
{% from 'macros.twig' import container_title %}
|
|
{% from 'user/macros.twig' import user_profile_warning %}
|
|
{% from '_layout/input.twig' import input_hidden, input_csrf, input_text, input_checkbox, input_file, input_file_raw, input_select %}
|
|
|
|
{% set image = url('user-avatar', {'user': profile.user_id}) %}
|
|
{% set canonical_url = url('user-profile', {'user': 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.user_created,
|
|
},
|
|
{
|
|
'title': 'Last seen',
|
|
'is_date': true,
|
|
'value': profile.user_active,
|
|
},
|
|
{
|
|
'title': 'Following',
|
|
'value': profile.following_count,
|
|
'url': url('user-profile-following', {'user': profile.user_id}),
|
|
},
|
|
{
|
|
'title': 'Followers',
|
|
'value': profile.followers_count,
|
|
'url': url('user-profile-followers', {'user': profile.user_id}),
|
|
},
|
|
{
|
|
'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 profile_is_editing %}
|
|
<form class="profile" method="post" action="{{ url('user-profile', {'user': profile.user_id}) }}" enctype="multipart/form-data">
|
|
{{ 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 || "{{ url('user-avatar', {'user': profile.user_id})|raw }}";
|
|
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 profile_is_editing %}
|
|
<div class="container profile__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="{{ url('info', {'title': '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__content">
|
|
{% set show_profile_fields = profile_is_editing ? perms.edit_profile : profile_fields|default([])|length > 0 %}
|
|
{% set show_background_settings = profile_is_editing and perms.edit_background %}
|
|
{% set show_birthdate = profile_is_editing and perms.edit_birthdate %}
|
|
{% set show_sidebar = current_user is not defined or show_profile_fields or show_background_settings %}
|
|
|
|
{% if show_sidebar %}
|
|
<div class="profile__content__side">
|
|
{% if show_background_settings %}
|
|
<div class="container profile__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'}) }}
|
|
|
|
{{ input_checkbox('background[attach]', 'None', true, '', 0, true, {'onchange':'profileChangeBackgroundAttach(this.value)'}) }}
|
|
{% for key, value in background_attachments %}
|
|
{{ input_checkbox('background[attach]', value|capitalize, key == profile.user_background_attachment, '', key, true, {'onchange':'profileChangeBackgroundAttach(this.value)'}) }}
|
|
{% endfor %}
|
|
|
|
{{ 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 profile__container">
|
|
<div class="profile__accounts__notice">
|
|
You must <a href="{{ url('auth-login') }}" class="profile__accounts__link">log in</a> to view full profiles!
|
|
</div>
|
|
</div>
|
|
{% elseif show_profile_fields %}
|
|
<div class="container profile__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 profile_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 %}
|
|
{% if show_birthdate %}
|
|
<div class="container profile__container profile__birthdate">
|
|
{{ container_title('Birthdate') }}
|
|
|
|
{% set birthdate = profile.user_birthdate|split('-') %}
|
|
|
|
<div class="profile__birthdate__content">
|
|
<div class="profile__birthdate__date">
|
|
<label class="profile__birthdate__label">
|
|
<div class="profile__birthdate__title">
|
|
Day
|
|
</div>
|
|
{{ input_select('birthdate[day]', ['-']|merge(range(1, 31)), birthdate[2]|default(0)|trim('0', 'left'), '', '', true, 'profile__birthdate__select profile__birthdate__select--day') }}
|
|
</label>
|
|
|
|
<label class="profile__birthdate__label">
|
|
<div class="profile__birthdate__title">
|
|
Month
|
|
</div>
|
|
{{ input_select('birthdate[month]', ['-']|merge(range(1, 12)), birthdate[1]|default(0)|trim('0', 'left'), '', '', true, 'profile__birthdate__select profile__birthdate__select--month') }}
|
|
</label>
|
|
</div>
|
|
|
|
<div class="profile__birthdate__year">
|
|
<label class="profile__birthdate__label">
|
|
<div class="profile__birthdate__title">
|
|
Year (may be left empty)
|
|
</div>
|
|
{{ input_select('birthdate[year]', ['-']|merge(range(null|date('Y'), null|date('Y') - 100)), birthdate[0]|default(0)|trim('0', 'left'), '', '', true, 'profile__birthdate__select profile__birthdate__select--year') }}
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="profile__content__main">
|
|
{% if (profile_is_editing and perms.edit_about) or profile.user_about_content|length > 0 %}
|
|
<div class="container profile__container profile__about" id="about">
|
|
{{ container_title('About ' ~ profile.username) }}
|
|
|
|
{% if profile_is_editing %}
|
|
<div class="profile__signature__editor">
|
|
{{ input_select('about[parser]', constant('MSZ_PARSERS_NAMES'), profile.user_about_parser, '', '', false, 'profile__about__select') }}
|
|
<textarea name="about[text]" class="input__textarea profile__about__text" id="about-textarea">{{ profile.user_about_content|escape }}</textarea>
|
|
</div>
|
|
{% else %}
|
|
<div class="profile__about__content{% if profile_is_editing %} profile__about__content--edit{% elseif profile.user_about_parser == constant('MSZ_PARSER_MARKDOWN') %} markdown{% endif %}">
|
|
{{ profile.user_about_content|escape|parse_text(profile.user_about_parser)|raw }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if (profile_is_editing and perms.edit_signature) or profile.user_signature_content|length > 0 %}
|
|
<div class="container profile__container profile__signature" id="signature">
|
|
{{ container_title('Signature') }}
|
|
|
|
{% if profile_is_editing %}
|
|
<div class="profile__signature__editor">
|
|
{{ input_select('signature[parser]', constant('MSZ_PARSERS_NAMES'), profile.user_signature_parser, '', '', false, 'profile__signature__select') }}
|
|
<textarea name="signature[text]" class="input__textarea profile__signature__text" id="signature-textarea">{{ profile.user_signature_content|escape }}</textarea>
|
|
</div>
|
|
{% else %}
|
|
<div class="profile__signature__content{% if profile_is_editing %} profile__signature__content--edit{% elseif profile.user_signature_parser == constant('MSZ_PARSER_MARKDOWN') %} markdown{% endif %}">
|
|
{{ profile.user_signature_content|escape|parse_text(profile.user_signature_parser)|raw }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if profile_warnings|length > 0 %}
|
|
<div class="container profile__container profile__warning__container" id="account-standing">
|
|
{{ container_title('Account Standing', false, profile_warnings_can_manage ? '/manage/users.php?v=warnings&u=' ~ profile.user_id : '') }}
|
|
|
|
<div class="profile__warning">
|
|
<div class="profile__warning__background"></div>
|
|
|
|
{% if profile_warnings_can_manage %}
|
|
<div class="profile__warning__tools">
|
|
<div class="profile__warning__user">
|
|
<div class="profile__warning__user__ip">
|
|
User IP
|
|
</div>
|
|
</div>
|
|
|
|
<div class="profile__warning__user">
|
|
<div class="profile__warning__user__username">
|
|
Issuer
|
|
</div>
|
|
<div class="profile__warning__user__ip">
|
|
Issuer IP
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="profile__warning__content">
|
|
<div class="profile__warning__type">
|
|
Type
|
|
</div>
|
|
|
|
<div class="profile__warning__created">
|
|
Created
|
|
</div>
|
|
|
|
<div class="profile__warning__duration">
|
|
Expires
|
|
</div>
|
|
|
|
<div class="profile__warning__note">
|
|
Note
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% for warning in profile_warnings %}
|
|
{{ user_profile_warning(warning, prpfile_warnings_view_private, profile_warnings_can_manage, profile_warnings_can_manage ? csrf_token('warning-delete[%d]'|format(warning.warning_id)) : '') }}
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% if profile_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 (currentBg == 'initial' && !checked) {
|
|
currentBg = profilePreviousBackground;
|
|
}
|
|
|
|
document.body.style.setProperty('--background-image', currentBg);
|
|
}
|
|
|
|
function profileChangeBackgroundAttach(mode) {
|
|
const modes = {
|
|
1: 'cover',
|
|
2: 'stretch',
|
|
3: 'tile',
|
|
4: 'contain',
|
|
};
|
|
|
|
profileToggleBackground(mode == 0);
|
|
|
|
for (let i = 1; i <= Object.keys(modes).length; i++)
|
|
document.body.classList.remove('main--bg-' + modes[i]);
|
|
|
|
if (!modes[mode])
|
|
return;
|
|
|
|
document.body.classList.add('main--bg-' + modes[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 %}
|