detail.js 11.5 KB
define("portal/detail", ['utils', 'zepto', 'juicer'], function (_u) {
    var constants = require('constants');
    var tmpls = {
        versionLog: '\
{@each datas as d}\
<div class= "ver-log" >\
    <header>\
        <span class="ver-title">${d.serial}</span>\
        <span class="update-time">${d.createdate}</span>\
    </header>\
    <div class="log-content">\
        $${d.descriptions}\
    </div>\
</div >\
{@/each}',
        comment: '\
{@each datas as d}\
<div class="comment-wrapper">\
    <div>\
        <div class="comment-header">\
            <h4>${d.title}</h4>\
            <div class="comment-rate">\
                {@each i in range(1, 6)}\
                    <div class=\'star ${i<=d.score ? "active" : ""}\'></div>\
                {@/each}\
            </div>\
            <div class="comment-sub">\
                <span class="date">${d.createdate}</span>\
                <span class="username">${d.username}</span>\
            </div>\
        </div>\
        <div class="comment-content"><div>$${decodeURIComponent(d.content)}</div><div class="more-btn"><a href="javascript:;">'+ constants.MORE +'</a></div></div>\
    </div>\
</div>\
{@/each}',
        baseInfo: '\
<img src="${icon}" />\
<div>\
    <h4 class="ellipsis">${name}</h4>\
    <p class= "desc ellipsis" >${desc ? desc : "'+ constants.NO_DESC +'"}</p>\
    <span class=\'switch ${inuse == 1 ? " switch-checked" : ""}\'>\
        <span class="switch-inner"></span>\
    </span>\
</div>',
        thumInfo: '\
{@each previmgs as i}\
    <img src="${i}"/>\
{@/each}',
        scoreInfo: '\
<div class="score">${rate > 0 ? rate : ""}\
    <div class= "stars" >\
        {@each stars as s}\
        <div class=\'star ${ s > 0.5 ? "active" : (s > 0 ? "half" : "")}\'></div>\
        {@/each}\
    </div>\
</div >\
<span class="desc">${count ? count + "'+ constants.USER_SCORING + '" : "' + constants.NO_USER_SCORING + '"}</span>'
    };
    var detail = {
        el: "#page-detail",
        animationName: "slide_noop",
        formdata: null,
        getAppid: function() {
            return this.formdata.appid;
        },
        reset: function(formdata) {
            this.formdata = formdata || null;
            this.baseInfo.data = null;
            this.comment.currPageNo = 1;
            this.comment.totalSize = 0;
            this.comment.initialize = false;
        },
        render: function(formdata) {
            var $el = $(this.el);

            // 初始化模块对象
            this.reset(formdata);
            // 初始化撰写评论的formdata
            $el.find(".review").attr("data-formdata", "appid=" + detail.getAppid());
            // 初始化tab,默认打开日志的tab
            _u.toggleTab($el.find('[data-tab="log"]'));
            // 初始化tabpanel
            $el.find(".ver-logs").html("");
            $el.find(".comments").html("");
            this.comment.toggleMore(false);
            // 初始化应用开关
            $el.find(".swtich").removeClass(".switch-selected");
            // 隐藏编辑评论按钮
            $el.find(".review").hide();
        },
        baseInfo: {
            data: null,
            get: function() {
                var that = this;

                if(this.data) return $.Deferred().resolve(this.data);

                return _u.ajax({
                    action: "detail",
                    data: { appid: detail.getAppid() }
                });
            },
            render: function (res) {
                var data = res.data;
                var $detail = $(detail.el);
                var bTmpl = juicer(tmpls.baseInfo, data);
                var tTmpl = juicer(tmpls.thumInfo, data);

                $detail.find(".base-info").html(bTmpl);
                $detail.find(".thumbnail-info").html(tTmpl);
                this.renderVersionInfo(data);
            },
            renderVersionInfo: function (data) {
                var $detail = $(detail.el);

                data.versionCount = data.versionCount || 0;
                data.versionSerial = data.versionSerial || "-/-";
                
                $detail.find(".version").find("p").html(data.versionSerial);

                var count = data.versionCount ? "(" + data.versionCount + ")" : "";

                $detail.find("[data-tab='log']").find(".count").html(count);
            }
        },
        versionLog: {
            el: ".ver-logs",
            init: function() {
                var that = this;
                var $el = $(this.el);

                detail.toggleLoadding(true);
                this.get().then(function(res) {
                    that.render(res);
                    detail.toggleLoadding(false);
                });
            },
            get: function() {
                return _u.ajax({
                    action: "listVersions",
                    data: { appid: detail.getAppid() }
                });
            },
            render: function (result) {
                var tmpl = '<p class="no-logs">' + constants.NO_LOG + '</p>';

                if (result.datas && result.datas.length) {
                    tmpl = juicer(tmpls.versionLog, result);
                }

                $(detail.el).find(".ver-logs").html(tmpl);
            }
        },
        comment: {
            currPageNo: 1,
            pageSize: 10,
            totalSize: 0,
            initialize: false,
            init: function() {
                return this.get().then(this.render.bind(this));
            },
            initScore: function() {
                var that = this;

                this.getScore().then(function(res) {
                    that.renderScore(res);
                    that.renderCommentCount();
                });
            },
            get: function() {
                var that = this;

                return _u.ajax({
                    action: "listComments",
                    data: {
                        appid: detail.getAppid(),
                        pageNo: this.currPageNo,
                        pageSize: this.pageSize
                    }
                }, function() {
                    that.initialize = true;
                });
            },
            getScore: function() {
                return _u.ajax({
                    action: "commentMeta",
                    data: { appid: detail.getAppid() }
                });
            },
            render: function (result) {
                var $el = $(detail.el);
                var tmpl = '<p class="no-comments">' + constants.NO_COMMENT + '</p>';
                var totalSize = result.data.totalSize;
                var hasMore = this.currPageNo * this.pageSize < totalSize;
                
                this.totalSize = totalSize;

                if (totalSize) {
                    tmpl = juicer(tmpls.comment, result.data);
                    this.renderCommentCount();
                }
                
                $el.find(".comments")[this.currPageNo === 1 ? "html" : "append"](tmpl);
                this.renderMore($el.find(".comment-content"));
                this.toggleMore(hasMore);
            },
            renderMore: function($contents) {
                $contents.each(function() {
                    var $content = $(this);
                    var $all = $content.children("div");

                    if($all.height() < $content.height()) return;

                    var $wrapper = $content.parents(".comment-wrapper");

                    $wrapper.addClass("more");
                    $content.children(".more-btn").on("click", "a", function() {
                        $wrapper.removeClass("more").addClass("all");
                    });
                });
            },
            renderScore: function(res) {
                var $el = $(detail.el);
                var data = res.data, tmpl;
                var avgScore = data.avgScore;

                // 初始化评分总数和星级
                data.avgScore = avgScore;
                data.rate = avgScore && String(avgScore).length === 1 ? avgScore + ".0" : String(avgScore);
                data.stars = [0,0,0,0,0];

                for(var i = 1; i <= Math.ceil(avgScore); i++) {
                    if (i != Math.ceil(avgScore) || avgScore == 1) {
                        data.stars[i - 1] = (1);
                        continue;
                    }
                    data.stars[i - 1] = (parseFloat(avgScore - i + 1).toFixed(1));
                }
                
                tmpl = juicer(tmpls.scoreInfo, res.data);

                $el.find(".rate").html(tmpl);
                this.totalSize = data.count;
            },
            renderCommentCount: function() {
                // 初始化评论总数和
                var $el = $(detail.el);
                var count = this.totalSize ? "(" + this.totalSize + ")" : "";
                
                $el.find(".comment").find("p").html(this.totalSize);
                $el.find("[data-tab='comment']").find(".count").html(count);
            },
            toggleMore: function (hasMore) {
                $(detail.el).find(".more-comments").toggle(hasMore);
            }
        },
        bindEvent: function() {
            var that = this;
            var $el = $(this.el);

            $el.on("click", ".more-comments", function() {
                var comment = that.comment;

                comment.currPageNo++;
                that.toggleLoadding(true);
                comment.toggleMore(false);
                comment.get().then(function(res) {
                    that.toggleLoadding(false);
                    comment.render(res);
                });
            }).on("click.init", ".tab", function() {
                var $tab = $(this);
                var type = $tab.data("tab"),
                    iscomment = type == "comment";
                
                if (iscomment && !that.comment.initialize) {
                    that.toggleLoadding(true);
                    that.comment.init().then(function() {
                        that.toggleLoadding(false);
                    });
                }
                $el.find(".review").toggle(iscomment);
            }).on("click.comment", ".review", function() {
                $el.attr("data-form", that.animationName);
            });
        },
        toggleLoadding: function (flag) {
            var $el = $(this.el);

            $el.find(".portal-loading").toggle(flag);
        },
        toggleSwitch: function(inuse) {
            return _u.ajax({
                action: inuse == 1 ? "unuse" : "use",
                data: { appid: detail.getAppid() }
            });
        },
        clearPageAnimation: function() {
            var that = this;
            // 清除配合评论页面的自定义动画
            setTimeout(function() {
                $(that.el).removeAttr("data-form").removeClass(that.animationName);    
            }, 250);
        }
    };

    detail.bindEvent();

    return {
        init: function (formdata, isback) {
            if(isback) return detail.clearPageAnimation();

            var baseInfo = detail.baseInfo;
            var versionLog = detail.versionLog;
            var comment = detail.comment;

            formdata = _u.strToJson(formdata, "&", "=");
            detail.render(formdata);
            baseInfo.get().then(baseInfo.render.bind(baseInfo));
            versionLog.init();
            comment.initScore();
        },
        getAppid: function() {
            return detail.getAppid();
        },
        renderComment: function() {
            var comment = detail.comment;

            comment.currPageNo = 1;
            comment.initScore();
            comment.init();
        },
        toggleSwitch: detail.toggleSwitch
    };
});