2016-07-31 19:36:13 +00:00
{% extends 'master.twig' %}
2016-07-29 19:31:36 +00:00
2016-12-07 14:26:52 +00:00
{% set profileHidden = profile .id == 0 or not profile .activated and ( user .id != profile .id and not ( user .perms .isMod or user .perms .isAdmin ) ) %}
2016-07-29 19:31:36 +00:00
{% set noUserpage = profile .userPage | length < 1 %}
2016-08-03 17:47:46 +00:00
{% set title = profileHidden ? 'User not found!' : 'Profile of ' ~ profile .username %}
{% set youtubeIsChannelId = profile .youtube | slice ( 0 , 2 ) == 'UC' and profile .youtube | length == 2 4 %}
2016-12-07 14:32:08 +00:00
{% if user .perms .viewUserLinks or user .perms .viewUserDetails %}
{% set fields = {
"website": {
"title": "Website",
"value": profile.website,
"link": "%s",
},
"twitter": {
"title": "Twitter",
"value": profile.twitter,
"link": "https://twitter.com/%s",
"disp": "@%s",
},
"github": {
"title": "GitHub",
"value": profile.github,
"link": "https://github.com/%s",
},
"skype": {
"title": "Skype",
"value": profile.skype,
"link": "skype:%s?userinfo",
},
"discord": {
"title": "Discord",
"value": profile.discord,
},
"youtube": {
"title": "YouTube",
"value": profile.youtube,
"link": "https://youtube.com/" ~ (youtubeIsChannelId ? 'channel/' : '') ~ "%s",
"disp": youtubeIsChannelId ? profile.username ~ "'s channel" : "%s",
},
"steam": {
"title": "Steam",
"value": profile.steam,
"link": "https://steamcommunity.com/id/%s",
},
"osu": {
"title": "osu!",
"value": profile.osu,
"link": "https://osu.ppy.sh/u/%s",
},
"lastfm": {
"title": "Last.fm",
"value": profile.lastfm,
"link": "http://last.fm/user/%s",
},
"email": {
"title": "E-mail address",
"value": user.perms.viewUserDetails ? profile.email : null,
"link": "mailto:%s"
},
"registerip": {
"title": "Register IP",
"value": user.perms.viewUserDetails ? profile.registerIp : null,
},
"lastip": {
"title": "Last IP",
"value": user.perms.viewUserDetails ? profile.lastIp : null,
},
} %}
{% endif %}
2016-07-29 19:31:36 +00:00
{% block js %}
{% if not profileHidden %}
<script type="text/javascript">
window.addEventListener('load', function () {
2016-09-19 15:33:52 +00:00
{% if profile .lastfm %}
var np = new Sakura.AJAX();
2016-09-22 20:14:28 +00:00
np.SetUrl(" {{ route ( 'user.nowplaying' , profile .id ) }} ");
2016-09-19 15:33:52 +00:00
np.AddCallback(200, function () {
var data = np.JSON(),
artist = Sakura.DOM.ID('np-artist'),
track = Sakura.DOM.ID('np-track'),
state = Sakura.DOM.ID('np-state'),
by = Sakura.DOM.ID('np-by');
artist.href = data.artist_url;
artist.textContent = data.artist;
track.href = data.track_url;
track.textContent = data.track;
state.className = 'fa ' + (data.listening ? 'fa-play-circle' : 'fa-history');
by.className = data.track === '' || data.artist === '' ? 'hidden' : '';
});
setInterval(function () { np.Start(Sakura.HTTPMethod.GET); }, 20000);
np.Start(Sakura.HTTPMethod.GET);
{% endif %}
2016-07-29 19:31:36 +00:00
// Check if location.hash is set
if (location.hash) {
var open = location.hash.slice(2);
// Check if the element exists
if (document.getElementById('profile-mode-' + open)) {
profileMode(open);
return;
}
}
var profileUserpage = document.getElementById('profile-mode-userpage');
// Check if the user page has contents
if (profileUserpage.children[0].innerHTML.trim().length) {
profileMode('userpage');
} else {
profileMode('comments');
}
});
// Switch to a different mode
function profileMode(id) {
// Get other active modes and fetch the new element
var current = document.getElementsByClassName('profile-mode-current'),
newMode = document.getElementById('profile-mode-' + id);
// Check if the new mode exists
if (typeof newMode == 'undefined') {
return;
}
// Check if there's any active
if (current) {
// Hide them all
for (i in current) {
current[i].className = 'hidden';
}
}
// Set the new to active
newMode.className = 'profile-mode-current';
}
2016-11-04 19:48:17 +00:00
function handleImageChange(elem, cont) {
var ajax = new Sakura.AJAX(),
target = elem.getAttribute('data-target'),
formData = new FormData(),
file = elem.files[0];
formData.append('session', Sakura.Config.SessionId);
formData.append('file', file, file.name);
ajax.SetFormData(formData);
ajax.SetUrl(target);
ajax.AddCallback(200, function () {
var result = ajax.JSON();
if (result.error) {
var diag = new Sakura.Dialogue;
2016-12-08 23:10:56 +00:00
diag.Title = "Error";
2016-11-04 19:48:17 +00:00
diag.Text = result.error;
diag.AddCallback(Sakura.DialogueButton.Ok, function () {
this.Close();
});
diag.Display();
}
cont.style.backgroundImage = "url('" + target + "?" + Date.now() + ")";
});
ajax.Start(Sakura.HTTPMethod.POST);
}
2016-07-29 19:31:36 +00:00
</script>
{% endif %}
{% endblock %}
{% block content %}
{% if profileHidden %}
2016-11-08 19:56:37 +00:00
<div class="content content--alt">
2016-07-29 19:31:36 +00:00
<div style="padding: 20px;">
<h1>The requested user does not exist!</h1>
There are a few possible reasons for this:
2016-12-09 21:31:15 +00:00
<ul style="padding-left: 40px; list-style: square">
2016-07-29 19:31:36 +00:00
<li>They changed their username.</li>
<li>They may have been restricted.</li>
<li>You made a typo.</li>
<li>They never existed.</li>
</ul>
</div>
</div>
{% else %}
2016-11-09 18:32:23 +00:00
<div class="content profile">
<div class="profile__container">
<div class="profile__header" style="background-image: url( {{ route ( 'user.header' , profile .id ) }} );">
2016-12-07 23:34:59 +00:00
{% if ( user .id == profile .id and not user .restricted and user .activated and user .perms .changeHeader ) or user .perms .manageProfileImages %}
<label class="uploader__label">
<input type="file" data-target=" {{ route ( 'user.header' , profile .id ) }} " class="uploader" onchange="handleImageChange(this, this.parentElement.parentElement)">
</label>
{% endif %}
2016-11-09 18:32:23 +00:00
<div class="profile__info">
<div class="avatar avatar--border profile__avatar" style="background-image: url( {{ route ( 'user.avatar' , profile .id ) }} ); box-shadow: 0 0 5px # {% if profile .isOnline %} 484 {% else %} 844 {% endif %} ;">
2016-12-07 23:34:59 +00:00
{% if ( user .id == profile .id and not user .restricted and user .activated and user .perms .changeAvatar ) or user .perms .manageProfileImages %}
<label class="uploader__label">
<input type="file" data-target=" {{ route ( 'user.avatar' , profile .id ) }} " class="uploader" onchange="handleImageChange(this, this.parentElement.parentElement)">
</label>
{% endif %}
2016-11-04 19:48:17 +00:00
</div>
2016-11-09 18:32:23 +00:00
<div class="profile__username">
2016-08-04 21:24:08 +00:00
<h1 style="color: {{ profile .colour }} ; text-shadow: 0 0 7px {% if profile .colour != 'inherit' %} {{ profile .colour }} {% else %} #222 {% endif %} ; padding: 0 0 2px;" {% if profile .getUsernameHistory %} title="Known as {{ profile .getUsernameHistory [ 0 ] .username_old }} before {{ profile .getUsernameHistory [ 0 ] .change_time | date ( config ( 'general.date_format' ) ) }} ." {% endif %} > {{ profile .username }} </h1>
2016-07-29 19:31:36 +00:00
{% if profile .isPremium %} <img src="/images/tenshi.png" alt="Tenshi" style="vertical-align: middle;"> {% endif %} <img src="/images/flags/ {{ profile .country | lower }} .png" alt=" {{ profile .country }} " style="vertical-align: middle;" title=" {{ profile .country ( true ) }} "> <span style="font-size: .8em;"> {{ profile .title }} </span>
</div>
2016-11-09 18:32:23 +00:00
<div class="profile__dates">
{% spaceless %}
<div class="profile__date">
<b>Joined</b> <time class="time-ago" datetime=" {{ profile .registered | date ( 'r' ) }} "> {{ profile .registered | date ( config ( 'general.date_format' ) ) }} </time>
</div>
<div class="profile__date">
{% if profile .lastOnline < 1 %}
<b> {{ profile .username }} hasn't logged in yet.</b>
{% else %}
<b>Last online</b> <time class="time-ago" datetime=" {{ profile .lastOnline | date ( 'r' ) }} "> {{ profile .lastOnline | date ( config ( 'general.date_format' ) ) }} </time>
{% endif %}
</div>
2016-07-29 19:31:36 +00:00
{% if profile .birthday != '0000-00-00' and profile .birthday | split ( '-' ) [ 0 ] > 0 %}
2016-11-09 18:32:23 +00:00
<div class="profile__date">
<b>Age</b> <span title=" {{ profile .birthday }} "> {{ profile .birthday ( true ) }} years old</span>
</div>
2016-07-29 19:31:36 +00:00
{% endif %}
2016-11-09 18:32:23 +00:00
{% endspaceless %}
2016-07-29 19:31:36 +00:00
</div>
</div>
</div>
2016-11-09 18:32:23 +00:00
<div class="profile__interactions">
<div class="profile__navigation">
2016-07-29 19:31:36 +00:00
{% if not noUserpage %}
2016-11-09 18:32:23 +00:00
<a class="profile__interactions-item fa fa-file-text-o" title="View {{ profile .username }} 's user page" href="#_userpage" onclick="profileMode('userpage');"></a>
2016-07-29 19:31:36 +00:00
{% endif %}
2016-11-09 18:32:23 +00:00
<a class="profile__interactions-item fa fa-list" title="View {{ profile .username }} 's topics" href="#_topics" onclick="profileMode('topics');"></a>
<a class="profile__interactions-item fa fa-reply" title="View {{ profile .username }} 's posts" href="#_posts" onclick="profileMode('posts');"></a>
<a class="profile__interactions-item fa fa-star" title="View {{ profile .username }} 's friends" href="#_friends" onclick="profileMode('friends');"></a>
<a class="profile__interactions-item fa fa-comments-o" title="View {{ profile .username }} 's profile comments" href="#_comments" onclick="profileMode('comments');"></a>
2016-11-01 21:14:02 +00:00
{% if ( profile .isActive and profile .id == user .id ) or user .perms .manageProfileImages %}
2016-11-09 18:32:23 +00:00
<a class="profile__interactions-item fa fa-picture-o" title="Edit your avatar, background and header" href="#_images" onclick="profileMode('images');"></a>
2016-09-16 21:00:46 +00:00
{% endif %}
2016-07-29 19:31:36 +00:00
</div>
{% if user .isActive %}
2016-11-09 18:32:23 +00:00
<div class="profile__actions">
2016-07-29 19:31:36 +00:00
{% if user .id == profile .id %}
2016-11-09 18:32:23 +00:00
<a class="profile__interactions-item fa fa-pencil-square-o" title="Edit your profile" href=" {{ route ( 'settings.account.profile' ) }} "></a>
2016-07-29 19:31:36 +00:00
{% else %}
2016-11-10 22:32:45 +00:00
{% if user .isFriends ( profile .id ) != 0 %} <a class="profile__interactions-item fa fa- {% if user .isFriends ( profile .id ) == 2 %} heart {% else %} star {% endif %} " title="You are friends"></a> {% endif %}
2016-11-09 18:32:23 +00:00
<a class="profile__interactions-item fa fa-user- {% if user .isFriends ( profile .id ) == 0 %} plus {% else %} times {% endif %} " title=" {% if user .isFriends ( profile .id ) == 0 %} Add {{ profile .username }} as a friend {% else %} Remove friend {% endif %} " href="javascript:void(0);" onclick="Sakura.Friend. {% if user .isFriends ( profile .id ) == 0 %} Add( {{ profile .id }} ) {% else %} Remove( {{ profile .id }} ) {% endif %} "></a>
<a class="profile__interactions-item fa fa-exclamation-circle" title="Report {{ profile .username }} " href=" {{ route ( 'user.report' , profile .id ) }} "></a>
2016-07-29 19:31:36 +00:00
{% endif %}
2016-11-01 21:14:02 +00:00
{% if user .perms .canRestrict %}
2016-11-09 18:32:23 +00:00
<a class="profile__interactions-item fa fa-trash" title="Restrict {{ profile .username }} " href="?restrict= {{ session_id ( ) }} "></a>
2016-07-29 19:31:36 +00:00
{% endif %}
</div>
{% endif %}
</div>
2016-11-09 18:32:23 +00:00
<div class="profile__content">
<div class="profile__mode">
2016-09-19 15:33:52 +00:00
{% if profile .lastfm %}
2016-11-09 18:32:23 +00:00
<div class="profile__now-playing">
2016-09-19 15:33:52 +00:00
<div class="np-icon">
<span class="fa fa-music"></span>
</div>
<div class="np-text">
<span class="fa fa-ellipsis-h" id="np-state"></span>
2016-11-09 18:32:23 +00:00
<a href="#" id="np-track" class="profile__now-playing-link"></a>
2016-09-19 15:33:52 +00:00
<span id="np-by" class="hidden">by</span>
2016-11-09 18:32:23 +00:00
<a href="#" id="np-artist" class="profile__now-playing-link"></a>
2016-09-19 15:33:52 +00:00
</div>
</div>
{% endif %}
2016-11-08 19:56:37 +00:00
<noscript><h1 style="text-align: center;">Please enable Javascript!</h1></noscript>
2016-07-29 19:31:36 +00:00
<div id="profile-mode-userpage" class="hidden">
{% include 'profile/userpage.twig' %}
</div>
<div id="profile-mode-friends" class="hidden">
{% include 'profile/friends.twig' %}
</div>
<div id="profile-mode-groups" class="hidden">
{% include 'profile/groups.twig' %}
</div>
2016-07-30 13:48:09 +00:00
<div id="profile-mode-topics" class="hidden">
{% include 'profile/topics.twig' %}
2016-07-29 19:31:36 +00:00
</div>
<div id="profile-mode-posts" class="hidden">
{% include 'profile/posts.twig' %}
</div>
<div id="profile-mode-comments" class="hidden">
{% include 'profile/comments.twig' %}
</div>
2016-09-16 21:00:46 +00:00
<div id="profile-mode-images" class="hidden">
{% include 'profile/images.twig' %}
</div>
2016-07-29 19:31:36 +00:00
</div>
2016-11-09 18:32:23 +00:00
<div class="profile__data">
2016-07-29 19:31:36 +00:00
<table style="width: 100%;">
<tr>
2016-07-30 13:48:09 +00:00
<td style="text-align: left; font-weight: bold;">Topics</td>
2016-07-29 19:31:36 +00:00
<td style="text-align: right;"> {{ profile .forumStats .topics }} </td>
</tr>
<tr>
<td style="text-align: left; font-weight: bold;">Posts</td>
<td style="text-align: right;"> {{ profile .forumStats .posts }} </td>
</tr>
<tr>
<td style="text-align: left; font-weight: bold;">Friends</td>
<td style="text-align: right;"> {{ profile .friends ( 2 ) | length }} </td>
</tr>
</table>
2016-11-09 18:32:23 +00:00
<hr>
2016-12-07 14:32:08 +00:00
{% if user .perms .viewUserLinks or user .perms .viewUserDetails %}
2016-08-04 15:34:25 +00:00
<table style="width: 100%;">
{% for id , data in fields %}
{% if data .value != null %}
2016-07-29 19:31:36 +00:00
<tr>
2016-08-04 15:34:25 +00:00
<td style="text-align: left; font-weight: bold;">
{{ data .title }}
</td>
<td style="text-align: right;">
2016-11-04 16:45:53 +00:00
{% if data .link is defined %}
2016-11-09 18:32:23 +00:00
<a href=" {{ data .link | format ( data .value ) }} "> {{ ( data .disp is defined ? data .disp : '%s' ) | format ( data .value ) }} </a>
2016-08-04 15:34:25 +00:00
{% else %}
2016-11-04 16:45:53 +00:00
{{ ( data .disp is defined ? data .disp : '%s' ) | format ( data .value ) }}
2016-08-04 15:34:25 +00:00
{% endif %}
</td>
2016-07-29 19:31:36 +00:00
</tr>
{% endif %}
2016-08-04 15:34:25 +00:00
{% endfor %}
</table>
2016-12-07 14:32:08 +00:00
{% elseif user .id == 0 %}
<div><b>Log in to view the full profile!</b></div>
2016-08-04 15:34:25 +00:00
{% else %}
2016-12-07 14:32:08 +00:00
<div><b>You aren't allowed to view profile details!</b></div>
2016-07-29 19:31:36 +00:00
{% endif %}
<b>Account Standing</b>
2016-11-01 21:14:02 +00:00
{% if not profile .activated %}
2016-07-29 19:31:36 +00:00
<h2 style="color: #888; text-shadow: 0 0 7px #888; margin-top: 0;">Deactivated</h2>
2016-11-01 21:14:02 +00:00
{% elseif profile .restricted %}
2016-07-29 19:31:36 +00:00
<h2 style="color: #222; text-shadow: 0 0 7px #800; margin-top: 0;">Restricted</h2>
{% elseif false %}
<h2 style="color: #A00; text-shadow: 0 0 7px #A00; margin-top: 0;">Bad</h2>
{% else %}
<h2 style="color: #080; text-shadow: 0 0 7px #080; margin-top: 0;">Good</h2>
{% endif %}
</div>
</div>
</div>
</div>
{% endif %}
{% endblock %}