pinclub/pinclub

View on GitHub
picviews/topic/_pic_preview_modal.html

Summary

Maintainability
Test Coverage

<!-- 查看图片图层 -->
<div id="preview_modal" role="dialog" aria-hidden="true" aria-labelledby="previewModalLabel">

    <div class="pin-view" role="document">
        <div class="pin-view-wrapper">
            <div class="main-part">
                <div class="image-piece piece">
                    <div class="tool-bar">
                        <a data-id="" data-name="" data-src="" href="#" class="repin-btn btn rbtn get-pic-btn"
                           id="preview_modal_rpin_btn">
                            <span class="text"> Get</span>
                        </a>
                        <a id="preview_modal_like_btn" data-id="" data-name="" data-src="" href="#" class="like-btn btn-with-icon btn">
                            <i class="heart"></i>
                        </a>
                        <div class="right-part">
                            <a id="zoomBtn" href="/pins/324257310/zoom/" target="_blank" title="查看原图" class="zoomin btn-with-icon btn"><i class="class"></i></a>
                        </div>
                    </div>
                    <div class="main-image">
                        <div id="baidu_image_holder" class="image-holder">

                        </div>
                    </div>
                    <div class="tool-bar-bottom">
                        <a href="#" class="repin-btn btn-with-icon btn">
                            <i class="class"></i>
                            <span class="text"> 采集 <span class="num">88</span></span>
                            <iframe id="tmp_downloadhelper_iframe" style="display: none;"></iframe>
                        </a>
                        <a href="#" onclick="return false;" class="like-btn btn-with-icon btn">
                            <i class="class"></i><span class="text"> 喜欢 <span class="num">3</span></span>
                        </a>
                        <a href="#" onclick="return false;" class="comment-btn btn-with-icon btn">
                            <i class="class"></i>
                            <span class="text"> 评论 <span class="num"></span></span>
                        </a>
                        <div class="right-part">
                            <a title="举报" href="#" onclick="return false;" class="report-btn btn-with-icon btn"><i class="class"></i></a>

                            <a href="/go/?pin_id=1090982775" rel="nofollow" target="_blank" class="source btn">
                                <i class="class"></i>查看来源 dribbble.com
                            </a>
                        </div>
                    </div>
                </div>
                <div class="info-piece piece">

                </div>
            </div>
            <div class="side-part">
                <div class="board-piece piece">

                </div>
                <div class="side promotion">
                    <%- include ../static/image_ad_300.html %>
                </div>
            </div>
        </div>
    </div>
    <div class="close-layer"><i></i></div>
</div>
<!-- 预览图片时弹出的右侧Board信息 -->
<!-- DONE (hhdem) 点击图片Box, 弹出浏览图片的modal, 图片 Board 信息显示功能, Board统计信息和 Board 中的图片列表 -->
<script id="boardInfoTemplate" type="text/x-jquery-tmpl">
    <div class="board-info">
        <a href="/${author.loginname}" title="${author.loginname}" class="img x">
            <img src="${author.avatar_url}" data-baiduimageplus-ignore="1" class="avt">
        </a>
        <a href="/boards/${board.id}" class="name x">${board.title}</a>
        <div class="sub">${author.loginname}</div>
    </div>
    <div class="board-pins cst-scrollbar">
        <div id="board_pins_waterfall" class="board_grid">
            <div class="grid-sizer"></div>
            <!-- 瀑布流图片列表 -->
        </div>
    </div>
    <!--TODO 关注board按钮实现 -->
    <button data-id="${board.id}" href="#${board.id}" class="follow-board btn {{if board.is_collect}}rbtn{{/if}}"><i class="fa fa-plus"></i>{{if board.is_collect}}取消关注{{else}}关注{{/if}} Board (${board.topic_count})</button>
</script>

<!--预览图片时弹出的图片来源-->
<script id="profileSourceTemplate" type="text/x-jquery-tmpl">
    <a title="举报" href="#" onclick="return false;" class="report-btn btn-with-icon btn"><i class="class"></i></a>
    {{if profile_source == 'upload'}}
        <a href="#" onclick="return false;" class="source btn">
        © 来自 <span class="brown-link">${author.loginname}</span> 的上传
        </a>
    {{else}}
        <a href="${profile_source}" rel="nofollow" target="_blank" class="source btn">
            <i class="class"></i>查看来源
        </a>
    {{/if}}
</script>

<script id="boardImageTemplate" type="text/x-jquery-tmpl">
    <a href="#${_id || id}" id="pic_priview_{{if !!_id}}${_id}{{else}}${id}{{/if}}" data-id="{{if !!_id}}${_id}{{else}}${id}{{/if}}" data-name="${title}" data-src="{{if !!image_fixed}}${image_fixed}{{else}}${image}{{/if}}" class="item{{if selected}} selected{{else}} preview_image_btn{{/if}}">
        <img src="${image_86?image_86:image}" width="86">
        <div class="cover"></div>
    </a>
</script>

<!-- 预览图片时弹出的底侧图片信息 -->
<script id="imageInfoTemplate" type="text/x-jquery-tmpl">
    <div class="info">
        <a href="/${author.loginname}" title="${author.loginname}" rel="nofollow" class="img x">
            <img src="${author.avatar_url}" data-baiduimageplus-ignore="1" class="avt">
        </a>
        <div class="main">
            <a href="/${author.loginname}" rel="nofollow">${author.loginname}</a>
        </div>
        <div class="sub">
            创建于<span data-ts="1495091308" class="ts-words space">{{if create_at_ago}}${create_at_ago}{{else}}${create_at}{{/if}}</span>
        </div>
    </div>
    <div class="description">
    {{if title}}
        ${title}
    {{else}}
        未填写描述
    {{/if}}
    </div>
    <div class="comments"></div>
    <div class="likes clearfix">
        {{if like_users.length>0}}
            <h4>${like_count}喜欢</h4>
            {{each like_users}}
                <a href="/${loginname}" title="${loginname}" class="img x">
                    <img width="46" height="46" src="${avatar}" data-baiduimageplus-ignore="1" data-pin-nopin="true">
                </a>
            {{/each}}
        {{/if}}
    </div>
</script>

<%- Loader('/public/javascripts/_pic_preview_modal.min.js')
.js('/public/javascripts/pics_preview.js')
.js('/public/javascripts/board_collect.js')
.done(assets, config.site_static_host, config.mini_assets)
%>