misuzu/templates/profile/index.twig

335 lines
20 KiB
Twig
Raw Permalink Normal View History

2022-09-13 13:14:49 +00:00
{% extends 'profile/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 %}
{% if profile_user is defined %}
{% set canonical_url = url('user-profile', {'user': profile_user.id}) %}
{% set title = profile_user.username %}
{% else %}
{% set title = 'User not found!' %}
{% endif %}
{% 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, 'res': 240})|raw }}";
preview = preview || document.getElementById('avatar-preview');
preview.src = 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 'profile/_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">{{ profile_user.avatarInfo.maxBytes|byte_symbol() }}</span> file size limit.</li>
<li class="profile__guidelines__line">May not be larger than <span class="profile__guidelines__emphasis">{{ profile_user.avatarInfo.maxWidth }}x{{ profile_user.avatarInfo.maxHeight }}</span>.</li>
<li class="profile__guidelines__line">Will be centre cropped and scaled to at most <span class="profile__guidelines__emphasis">240x240</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">{{ profile_user.backgroundInfo.maxBytes|byte_symbol() }}</span> file size limit.</li>
<li class="profile__guidelines__line">May not be larger than <span class="profile__guidelines__emphasis">{{ profile_user.backgroundInfo.maxWidth }}x{{ profile_user.backgroundInfo.maxHeight }}</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 %}
<p>{{ notice }}</p>
{% endfor %}
</div>
</div>
{% endif %}
<div class="profile__content">
{% set profile_fields = profile_user.profileFields(not (profile_is_editing and perms.edit_profile))|default([]) %}
{% set show_profile_fields = profile_is_editing ? perms.edit_profile : profile_fields|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 = show_profile_fields or show_background_settings %}
2022-09-13 13:14:49 +00:00
{% 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, key == profile_user.backgroundInfo.attachment, '', key, true, {'onchange':'profileChangeBackgroundAttach(this.value)'}) }}
{% endfor %}
{{ input_checkbox('background[attr][blend]', 'Blend', profile_user.backgroundInfo.blend, '', '', false, {'onchange':'profileToggleBackgroundAttr(\'blend\', this.checked)'}) }}
{{ input_checkbox('background[attr][slide]', 'Slide', profile_user.backgroundInfo.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 field in profile_fields %}
<label class="profile__accounts__item">
<div class="profile__accounts__title">
{{ field.field_title }}
</div>
{% if profile_is_editing %}
{{ input_text('profile[' ~ field.field_key ~ ']', 'profile__accounts__input', field.field_value, data.type|default('text')) }}
{% else %}
<div class="profile__accounts__value">
{% set profile_field_value = field.format_display|format(field.field_value) %}
{% if field.format_link is empty %}
{{ profile_field_value }}
{% else %}
<a href="{{ field.format_link|format(field.field_value) }}" class="profile__accounts__link" target="_blank" rel="noreferrer noopener">{{ profile_field_value }}</a>
{% endif %}
</div>
{% endif %}
</label>
{% endfor %}
</div>
</div>
{% endif %}
{% if show_birthdate %}
<div class="container profile__container profile__birthdate">
{{ container_title('Birthdate') }}
<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)), profile_user.hasBirthdate ? profile_user.birthdate.format('d') : 0, '', '', 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)), profile_user.hasBirthdate ? profile_user.birthdate.format('m') : 0, '', '', 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)), profile_user.birthdate.format('Y'), '', '', true, 'profile__birthdate__select profile__birthdate__select--year') }}
</label>
</div>
</div>
</div>
{% endif %}
</div>
{% endif %}
{% if profile_user is defined %}
<div class="profile__content__main">
{% if (profile_is_editing and perms.edit_about) or profile_user.hasProfileAbout %}
<div class="container profile__container profile__about" id="about">
{{ container_title('About ' ~ profile_user.username) }}
{% if profile_is_editing %}
<div class="profile__signature__editor">
{{ input_select('about[parser]', constant('\\Misuzu\\Parsers\\Parser::NAMES'), profile_user.profileAboutParser, '', '', false, 'profile__about__select') }}
<textarea name="about[text]" class="input__textarea profile__about__text" id="about-textarea">{{ profile_user.profileAboutText }}</textarea>
</div>
{% else %}
<div class="profile__about__content{% if profile_is_editing %} profile__about__content--edit{% elseif profile_user.profileAboutParser == constant('\\Misuzu\\Parsers\\Parser::MARKDOWN') %} markdown{% endif %}">
{{ profile_user.profileAboutParsed|raw }}
</div>
{% endif %}
</div>
{% endif %}
{% if (profile_is_editing and perms.edit_signature) or profile_user.hasForumSignature %}
<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('\\Misuzu\\Parsers\\Parser::NAMES'), profile_user.forumSignatureParser, '', '', false, 'profile__signature__select') }}
<textarea name="signature[text]" class="input__textarea profile__signature__text" id="signature-textarea">{{ profile_user.forumSignatureText }}</textarea>
</div>
{% else %}
<div class="profile__signature__content{% if profile_is_editing %} profile__signature__content--edit{% elseif profile_user.forumSignatureParser == constant('\\Misuzu\\Parsers\\Parser::MARKDOWN') %} markdown{% endif %}">
{{ profile_user.forumSignatureParsed|raw }}
</div>
{% endif %}
</div>
{% endif %}
{% if profile_warnings|length > 0 or profile_warnings_can_manage %}
<div class="container profile__container profile__warning__container" id="account-standing">
{{ container_title('Account Standing', false, profile_warnings_can_manage ? url('manage-users-warnings', {'user': 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">
Duration
</div>
<div class="profile__warning__note">
Note
</div>
</div>
</div>
{% for warning in profile_warnings %}
{{ user_profile_warning(warning, profile_warnings_view_private, profile_warnings_can_manage, profile_warnings_can_manage ? csrf_token() : '') }}
{% endfor %}
</div>
{% endif %}
{% 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 %}