sakura/resources/views/yuuno/user/profile.twig

{% extends 'master.twig' %}
{% from 'macros.twig' import profile_image_changer as pic %}

{% set profileHidden = profile.id == 0 or not profile.activated and (user.id != profile.id and not (user.perms.isMod or user.perms.isAdmin)) %}
{% set noUserpage = profile.userPage|length < 1 %}
{% set title = profileHidden ? 'User not found!' : 'Profile of ' ~ profile.username %}
{% set youtubeIsChannelId = profile.youtube|slice(0, 2) == 'UC' and profile.youtube|length == 24 %}

{% 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 %}

{% block js %}
    {% if not profileHidden %}
    <script type="text/javascript">
        window.addEventListener('load', function () {
            {% if profile.lastfm %}
            var np = new Sakura.AJAX();
            np.SetUrl("{{ route('user.nowplaying', profile.id) }}");
            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 %}

            // 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';
        }

        function handleImageChange(file, url, query) {
            var ajax = new Sakura.AJAX,
                formData = new FormData;

            formData.append('session', Sakura.Config.SessionId);
            formData.append('file', file, file.name);

            ajax.SetFormData(formData);
            ajax.SetUrl(url);

            ajax.AddCallback(200, function () {
                var result = ajax.JSON();

                if (result.error) {
                    var diag = new Sakura.Dialogue;
                    diag.Title = "Error";
                    diag.Text = result.error;
                    diag.Display();
                } else {
                    refreshImage(url, query);
                }
            });

            ajax.Start(Sakura.HTTPMethod.POST);
        }

        function handleImageDelete(url, query) {
            var confirm = new Sakura.Dialogue;

            confirm.SetType(Sakura.DialogueType.ConfirmNegative);
            confirm.Title = "Deleting image";
            confirm.Text = "Are you sure?";

            confirm.AddCallback(Sakura.DialogueButton.Yes, function () {
                var client = new Sakura.AJAX;
                client.SetUrl(url + "?session=" + Sakura.Config.SessionId);
                client.AddCallback(200, function () {
                    refreshImage(url, query);
                });
                client.Start(Sakura.HTTPMethod.DELETE);
                this.Close();
            });

            confirm.Display();
        }

        function refreshImage(url, query) {
            var elements = document.querySelectorAll(query);

            for (var i = 0; i < elements.length; i++) {
                var element = elements[i],
                    url = url + "?" + Date.now();

                if (element.tagName === "IMG") {
                    element.src = url;
                } else {
                    element.style.backgroundImage = "url('" + url + ")";
                }
            }
        }
    </script>
    {% endif %}
{% endblock %}

{% block content %}
    {% if profileHidden %}
        <div class="content content--alt">
            <div style="padding: 20px;">
                <h1>The requested user does not exist!</h1>
                There are a few possible reasons for this:
                <ul style="padding-left: 40px; list-style: square">
                    <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 %}
        {% if (user.id == profile.id and not user.restricted and user.activated and user.perms.changeBackground) or user.perms.manageProfileImages %}
            {{ pic(route('user.background', profile.id), '.container') }}
        {% endif %}
        <div class="content profile">
            <div class="profile__container">
                <div class="profile__header" style="background-image: url({{ route('user.header', profile.id) }});">
                    <div class="profile__info">
                        {% if (user.id == profile.id and not user.restricted and user.activated and user.perms.changeHeader) or user.perms.manageProfileImages %}
                            {{ pic(route('user.header', profile.id), '.profile__header') }}
                        {% endif %}
                        <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 %};">
                            {% if (user.id == profile.id and not user.restricted and user.activated and user.perms.changeAvatar) or user.perms.manageProfileImages %}
                                {{ pic(route('user.avatar', profile.id), '.avatar') }}
                            {% endif %}
                        </div>
                        <div class="profile__username">
                            <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>
                            {% 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>
                        <div class="profile__dates">
                            {% spaceless %}
                                <div class="profile__date">
                                    <b>Joined</b>&nbsp;<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>&nbsp;<time class="time-ago" datetime="{{ profile.lastOnline|date('r') }}">{{ profile.lastOnline|date(config('general.date_format')) }}</time>
                                    {% endif %}
                                </div>
                                {% if profile.birthday != '0000-00-00' and profile.birthday|split('-')[0] > 0 %}
                                    <div class="profile__date">
                                        <b>Age</b>&nbsp;<span title="{{ profile.birthday }}">{{ profile.birthday(true) }} years old</span>
                                    </div>
                                {% endif %}
                            {% endspaceless %}
                        </div>
                    </div>
                </div>
                <div class="profile__interactions">
                    <div class="profile__navigation">
                        {% if not noUserpage %}
                            <a class="profile__interactions-item fa fa-file-text-o" title="View {{ profile.username }}'s user page" href="#_userpage" onclick="profileMode('userpage');"></a>
                        {% endif %}
                        <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>
                    </div>
                    {% if user.isActive %}
                    <div class="profile__actions">
                        {% if user.id == profile.id %}
                        <a class="profile__interactions-item fa fa-pencil-square-o" title="Edit your profile" href="{{ route('settings.account.profile') }}"></a>
                        {% else %}
                        {% 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 %}
                        <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>
                        {% endif %}
                        {% if user.perms.canRestrict %}
                            <a class="profile__interactions-item fa fa-trash" title="Restrict {{ profile.username }}" href="?restrict={{ session_id() }}"></a>
                        {% endif %}
                    </div>
                    {% endif %}
                </div>
                <div class="profile__content">
                    <div class="profile__mode">
                        {% if profile.lastfm %}
                        <div class="profile__now-playing">
                            <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>
                                <a href="#" id="np-track" class="profile__now-playing-link"></a>
                                <span id="np-by" class="hidden">by</span>
                                <a href="#" id="np-artist" class="profile__now-playing-link"></a>
                            </div>
                        </div>
                        {% endif %}
                        <noscript><h1 style="text-align: center;">Please enable Javascript!</h1></noscript>
                        <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>
                        <div id="profile-mode-topics" class="hidden">
                            {% include 'profile/topics.twig' %}
                        </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>
                    </div>
                    <div class="profile__data">
                        <table style="width: 100%;">
                            <tr>
                                <td style="text-align: left; font-weight: bold;">Topics</td>
                                <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>
                        <hr>
                        {% if user.perms.viewUserLinks or user.perms.viewUserDetails %}
                            <table style="width: 100%;">
                            {% for id, data in fields %}
                                {% if data.value != null %}
                                    <tr>
                                        <td style="text-align: left; font-weight: bold;">
                                            {{ data.title }}
                                        </td>
                                        <td style="text-align: right;">
                                            {% if data.link is defined %}
                                                <a href="{{ data.link|format(data.value) }}">{{ (data.disp is defined ? data.disp : '%s')|format(data.value) }}</a>
                                            {% else %}
                                                {{ (data.disp is defined ? data.disp : '%s')|format(data.value) }}
                                            {% endif %}
                                        </td>
                                    </tr>
                                {% endif %}
                            {% endfor %}
                            </table>
                        {% elseif user.id == 0 %}
                            <div><b>Log in to view the full profile!</b></div>
                        {% else %}
                            <div><b>You aren't allowed to view profile details!</b></div>
                        {% endif %}
                        <b>Account Standing</b>
                        {% if not profile.activated %}
                            <h2 style="color: #888; text-shadow: 0 0 7px #888; margin-top: 0;">Deactivated</h2>
                        {% elseif profile.restricted %}
                            <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 %}