pinclub/pinclub

View on GitHub
picviews/user/index.html

Summary

Maintainability
Test Coverage
<!-- DONE(hhdem) 用户首页中列表显示错误 -->
<!-- DONE(hhdem) 用户首页中样式调整 -->
<!-- TODO 我的页面中增加 Board 管理 -->
<%- partial('navbar') %>
<%- Loader('/public/stylesheets/user.index.min.css')
.css('/public/stylesheets/users.less')
.done(assets, config.site_static_host, config.mini_assets)
%>
<div id="user_content">
    <div class="right">
        <%- partial('_index_boards') %>
    </div>
    <div class="left">
        <div class="panel">
            <div class="cell">
                <table cellpadding="0" cellspacing="0" border="0" width="100%">
                    <tr>
                        <td width="54" valign="top" align="center" class="user_mid_avatar">
                            <img src="<%= avatarPath(user.avatar_url, '54') %>" title="<%= user.loginname %>"/>
                        </td>
                        <td width="10"></td>
                        <td width="auto" valign="top" align="left">
                            <div class="pull-right">

                            </div>
                            <h1 class="topic_full_title" style="line-height: 100%;"><%= user.loginname %></h1>
                            <span class="col_fade">
                                <span ><%= user.score %></span> 积分,于 <%= user.create_at_ago() %> 加入本站
                            </span>
                        </td>
                    </tr>
                </table>
            </div>
            <% if (user.collect_topic_count || user.collect_image_count || user.url || user.location || user.githubUsername || user.weibo) {%>
            <div class="cell widgets">
                <ul class='unstyled'>
                    <% if (user.collect_topic_count) {%>
                    <li>
                        <span class='big collect-topic-count'><%= user.collect_topic_count %></span>个话题收藏
                    </li>
                    <%}%>
                    <% if (user.collect_image_count) {%>
                    <li>
                        <span class='big collect-topic-count'><%= user.collect_image_count %></span>个图片收藏
                    </li>
                    <%}%>
                    <% if (user.image_count || user.get_image_count) {%>
                    <li>
                        <span class='big collect-topic-count'><a href="/user/<%= user.loginname %>/get"><%= user.image_count + user.get_image_count %></a></span> 图片
                    </li>
                    <%}%>
                    <% if (user.board_count) {%>
                    <li>
                        <span class='big collect-topic-count'><a href="/user/<%= user.loginname %>/boards"><%= user.board_count %></a></span> Board
                    </li>
                    <%}%>
                    <% if (user.url) { %>
                    <li>
                        <i class="fa fa-lg fa-fw fa-home"></i>
                        <a class='dark' href="<%= user.url %>" target='_blank'><%= user.url %></a>
                    </li>
                    <% } %>
                    <% if (user.location) { %>
                    <li>
                        <i class="fa fa-lg fa-fw fa-map-marker"></i>
                        <span class='dark'><%= user.location %></span>
                    </li>
                    <% } %>
                    <% if (user.githubUsername) { %>
                    <li>
                        <i class="fa fa-lg fa-fw fa-github"></i>
                        <a class='dark' href="https://github.com/<%= user.githubUsername %>" target='_blank'>
                            @<%= user.githubUsername %>
                        </a>
                    </li>
                    <% } %>
                    <% if (user.weibo) { %>
                    <li>
                        <i class="fa fa-lg fa-fw fa-twitter"></i>
                        <a class='dark' href="<%= user.weibo %>" target='_blank'><%= user.weibo %></a>
                    </li>
                    <% } %>
                </ul>
            </div>
            <% } %>
            <div class="cell">
                <% if (user.signature) {%>
                <%= user.signature %>
                <% } else { %>
                没有写签名. What a pity.
                <% } %>
            </div>
        </div>

        <div class="panel pd10">
            <div class="header">
                <!-- DONE (hhdem) 用户信息页面中板块切换修改为ajax请求-->
                <% [{_id:'all', title:'全部'}, {_id:'good', title:'精华'}].concat(forums).forEach(function (forum) {
                var value = forum._id;
                var text = forum.title;
                %>
                <a href="#" onclick="return false;"
                   class="topic-tab <%= value === 'all' ? 'current-tab' : '' %>" data-id="<%= value %>" data-author="<%= user.id %>" data-title="<%= text %>"><%= text %></a>
                <% }) %>
            </div>
            <div id="sub_header" class="cell" style="background-color: #f9f9f9; padding: 10px;font-size: 12px;color:#778087;">
                <div class="pull-right">
                    <a href="/topic/create">发布新话题</a>
                    <li class="fa fa-caret-right gray"></li>
                </div>
                <div class="pull-left">

                    <div id="total_count" class="pull-left"></div>
                    <div id="child_forums" class="pull-left"></div>
                </div>
            </div>
            <div id="topic_list" >
            </div>
        </div>

        <div class='panel pd10'>
            <div class='header'>
                <span class='col_fade'><%= user.loginname %> 回复的话题</span>
            </div>
            <% if (typeof(recent_replies) !== 'undefined' && recent_replies.length > 0) { %>
            <%- partial('../topic/abstractTopic', { collection: recent_replies, as: 'reply' }) %>
            <div class='cell more'>
                <a class='dark' href="/user/<%= user.loginname %>/replies">查看更多»</a>
            </div>
            <% } else { %>
            <div class='innerTopic'>
                <p>无话题</p>
            </div>
            <% } %>
        </div>
    </div>

</div>


</div>
<script>
    $(document).ready(function () {
        // 绑定板块连接的点击事件
        $(document).on('click', '.topic-tab', function (event) {
            var author, title;
            if (!!event.currentTarget.dataset.id) {
                topic_forum = event.currentTarget.dataset.id;
            }
            if (!!event.currentTarget.dataset.author) {
                author = event.currentTarget.dataset.author;
            }
            if (!!event.currentTarget.dataset.title) {
                title = event.currentTarget.dataset.title;
            }
            $('#topic_list').html('');
            $('#user_content .topic-tab').removeClass('current-tab');
            $(this).addClass('current-tab');
            loadUserTopicList(topic_forum, author, title);
        });
        loadUserTopicList('all', '<%= user.id %>', '全部');
        <% if (current_user) { %>
            $('#set_star_btn').click(function () {
                var $me = $(this);
                var action = $me.attr('action');
                var params = {
                    _csrf: '<%- csrf %>'
                };
                $.post('/user/<%= user.loginname %>/star', params, function (data) {
                    if (data.success === true) {
                        if (action === 'set_star') {
                            $me.html('取消达人');
                            $me.attr('action', 'cancel_star');
                        } else {
                            $me.html('设为达人');
                            $me.attr('action', 'set_star');
                        }
                    }
                }, 'json');
            });

            $('#set_block_btn').click(function () {
                var $me = $(this);
                var action = $me.attr('action');
                var params = {
                    _csrf: '<%- csrf %>',
                    action: action
                };
                if (action === 'set_block' && !confirm('确定要屏蔽该用户吗?')) {
                    return;
                }
                $.post('/user/<%- user.loginname %>/block', params, function (data) {
                    if (data.status === 'success') {
                        if (action === 'set_block') {
                            $me.html('取消屏蔽用户');
                            $me.attr('action', 'cancel_block');
                        } else if (action === 'cancel_block') {
                            $me.html('屏蔽用户');
                            $me.attr('action', 'set_block');
                        }
                    }
                }, 'json');
            });

            $('#delete_all').click(function () {
                var $me = $(this);
                var params = {
                    _csrf: '<%- csrf %>',
                };
                if (!confirm('确定要删除吗?(不会永久删除,只做标记位)')) {
                    return;
                }
                $.post('/user/<%- user.loginname %>/delete_all', params, function (data) {
                    if (data.status === 'success') {
                        alert('操作成功');
                    }
                }, 'json');
            });

        <% } %>
    });
</script>

<script id="topicListTmp" type="text/x-jquery-tmpl">
    <%- partial('../topic/_abstract') %>
</script>

<!-- scripts -->
<%- Loader('/public/javascripts/user.index.min.js')
.js('/public/javascripts/forum.js')
.done(assets, config.site_static_host, config.mini_assets)
%>