dwweb-h5/2018专题/多玩H5广告位/da-bbs.js

/*!
 * @project : 
 * @version : 1.0.0
 * @author  : baichun
 * @update  : 2018-04-19 
 */
// import './sass/bbs.scss';

(function (window, $) {
    var cssStr = `.m-recommend__hd{padding:0 10px;height:38px;background-color:#ececec;border-top:1px solid #dfdfdf;border-bottom:1px solid #dfdfdf;overflow:hidden;line-height:38px}
        .m-recommend__hd h5{font-size: 18px;color: #333;}
        .m-recommend{border:1px solid #dfdfdf;border-top:none;margin-bottom:10px}
        .m-recommend .m-game_link{display:-webkit-box;display: flex;padding:10px}
        .m-recommend .m-game_fl{-webkit-box-flex: 1;-ms-flex:1;flex:1;width:100px;margin-right:10px}
        .m-recommend .m-game_fl img{width:100%;display:block;overflow:hidden}
        .m-recommend .m-game_fr{-webkit-box-flex: 2;-ms-flex:2;flex:2;margin-right: 10px;}
        .m-recommend .m-game_fr h2{font-size:16px;line-height:22px;margin-top:-4px;height:44px;overflow:hidden}
        .m-recommend .m-game_fr p{font-size:12px;color:#999;text-align:right}
        .m-forumList__item.ad-forumList__item .m-forumList__info{font-size:12px;color:#999}
        .ico-common.ico-cg{background:url(//pub.dwstatic.com/common/img/da-bbs-cg.png) 50%/100% no-repeat}
        .m-comment__item--top .da-link{display:block}
        .m-comment__item--top .comment-control .control-da-tag{float:left;color:#999}
        .comment-header-da img{width:100%}`;

    var Util = {
        getParam : function(name) {
            //先获取#后面的参数
            var str = document.location.hash.substr(2);
            var value = this.getParam2(name, str);
            if (value == null) {
                str = document.location.search.substr(1);
                value = this.getParam2(name, str);
            }
        
            return value;
        },
        getParam2 : function(name, str) {
            //获取参数name的值
            var reg = new RegExp("(^|!|&|\\?)" + name + "=([^&]*)(&|$)");
        
            //再获取?后面的参数
            var r = str.match(reg);
            if (r != null) {
                try {
                    return decodeURIComponent(r[2]);
                } catch (e) {
                    console.log(e + "r[2]:" + r[2]);
                    return null;
                }
            }
            return null;
        },
        isFunction: function (obj) {
            return Object.prototype.toString.call(obj) === "[object Function]";
        },
        getScript: function (url, callback) {
            var head = document.getElementsByTagName("head")[0] || document.documentElement;
            var script = document.createElement("script");
            script.type = "text/javascript";
            script.async = true;
            script.charset = "utf-8";
            script.src = url;
            script.onload = script.onreadystatechange = function () {
                if (!script.readyState || /loaded|complete/.test(script.readyState)) {
                    if (Util.isFunction(callback)) {
                        callback();
                    }
                    script.onload = script.onreadystatechange = null;
                    if (script.parentNode) {
                        script.parentNode.removeChild(script);
                    }
                }
            };
            head.insertBefore(script,null);
        },
        getScriptArg: function (key) {
            var scripts = document.getElementsByTagName("script"),
                script = scripts[scripts.length - 1],
                src = script.src;

            return (src.match(new RegExp("(?:\\?|&)" + key + "=(.*?)(?=&|$)")) || ['', null])[1];
        },
        createStyleSheet : function(cssText) {
            var stylesheet;
            if (document.createStyleSheet) {
                stylesheet = document.createStyleSheet();
                stylesheet.cssText = cssText;
            } else {
                stylesheet = document.createElement("style");
                stylesheet.appendChild(document.createTextNode(cssText));
                document.getElementsByTagName("head")[0].appendChild(stylesheet);
            }
            return stylesheet;
        }
    }

    var winHeight = $(window).height()
    var adv = {
        isiOS : navigator.userAgent.match(/(iPhone|iPod|iPad);?/i), //ios终端
        indexRecommendLocid : 175, //每日推荐175
        indexBBsLocid : 176,       //帖子列表176
        detailPostLocid : 177,     //帖子详情177
        init(){
            // if(Util.getParam("isdebug")!=1) return

            $("head").append(`<style>${cssStr}</style>`)
            let curPage = Util.getScriptArg("type"),
                self = this;

            if (curPage=="detail") { //详情页
                self.initPostList()
            } else {  //首页
                self.initRecommendAdv()
                self.initBbsList()
            }

            Util.getScript("//pub.dwstatic.com/common/js/dastat.js",()=>{
                $(window).scroll(self.initScroll);
            });
        },
        recommendTmpl(t){
            var dom = `<div class="m-recommend">
                            <div class="m-recommend__hd">
                                <h5>每日推荐</h5>
                            </div>
                            <div class="m-recommend__bd">
                                <a href="${t.adLink}" class="m-game_link da-block-wrapper" locid="${t.adId}" pid="${t.adPid}" target="_blank">
                                    <div class="m-game_fl">
                                        <img src="${t.adSrc}">
                                    </div>
                                    <div class="m-game_fr">
                                        <h2>${t.title}</h2>
                                        <p></p>
                                    </div>
                                </a>
                            </div>
                        </div>`
            
            return dom;
        },
        bbsListTmpl(t){
            var dom = `<div class="m-forumList__item ad-forumList__item">
                            <a href="${t.adLink}" class="da-block-wrapper" locid="${t.adId}" pid="${t.adPid}" not-auto-report="1">
                                <p class="m-forumList__detail">
                                ${t.title}
                                    <i class="ico-common ico-cg"></i>
                                    <i class="ico-common ico-pic"></i>
                                </p>
                                <p class="m-forumList__info">
                                    <span class="m-forumList__info--fl"></span>
                                    <span class="m-forumList__info--fr">广告</span>
                                </p>
                            </a>
                        </div>`

            return dom
        },
        bbsPostTmpl(t){
            let dom = `<div class="m-comment__item m-comment__item--top">
                            <a href="${t.adLink}" target="_blank" class="da-link da-block-wrapper" locid="${t.adId}" pid="${t.adPid}" not-auto-report="1">
                                <div class="comment-header-da">
                                    <img src="${t.adSrc}">
                                </div>
                                <div class="comment-detail">
                                    <p>${t.title}</p>
                                </div>
                                <div class="comment-control">
                                    <span class="control-da-tag">广告</span>
                                    <span class="control-da-cheak">查看详情</span>
                                </div>
                            </a>
                        </div>`
            return dom
        },
        //首页-推荐位广告-每个UV每5小时展示一次
        initRecommendAdv(){
            let advInfoStr = localStorage.getItem("advInfo")

            if (advInfoStr) {
                let advInfo = JSON.parse(advInfoStr)
                let lastTime = advInfo["lastTime"]
                let curTime = (new Date()).getTime()
                let isShowRecommendAdv = curTime-lastTime > 5*60*60*1000 ? true : false

                // console.log("上次展示时间:"+lastTime+";当前时间:"+curTime)
                // console.log("时间间隔"+(curTime-lastTime)+"是否展示："+isShowRecommendAdv)
                if(isShowRecommendAdv) {
                    this.getDa(this.indexRecommendLocid,(ret)=>{
                        if(!ret.length) return

                        advInfo["lastTime"] = curTime
                        localStorage.setItem("advInfo",JSON.stringify(advInfo))

                        $(".m-forumList").prepend(this.recommendTmpl(ret[0]))
                        this.initScroll()
                    })
                }
            } else {
                console.log("从未展示过")

                this.getDa(this.indexRecommendLocid,(ret)=>{
                    if(!ret.length) return

                    let advInfo = {}
                    advInfo["lastTime"] = (new Date()).getTime()
                    
                    $(".m-forumList").prepend(this.recommendTmpl(ret[0]))
                    localStorage.setItem("advInfo",JSON.stringify(advInfo))
                    this.initScroll()
                });
            }
        },
        //首页-帖子列表置顶后的每3条内容显示1个游戏广告，最多显示3条广告（即第4、8、12位置）
        initBbsList (){
            this.getDa(this.indexBBsLocid,(ret)=>{
                if(!ret.length) return
                let adStartIndex = 0,
                    advPos = [2,6,10],
                    advPosLen = advPos.length,
                    retLen = ret.length,
                    ads = ret;

                if(retLen==0) return 

                //一个广告位只有1/2推广计划时，重复展示，共3个
                switch(retLen) {
                    case 1 :
                        ads = ads.concat(ret[0],ret[0])
                        break;
                    case 2 :
                        var index = Math.random()<0.5?0:1
                        ads = ads.concat(ret[index])
                        break;
                    default :
                        break;
                }

                $(".m-forumList__item").each(function(){
                    let isHasZd = $(this).find(".m-forumList__detail").children(".ico-zd").length>0 ? true : false

                    if(isHasZd) ++adStartIndex
                })

                ads.forEach((item,i)=>{
                    if(i>=advPosLen) return
                    $(".m-forumList__item").eq(adStartIndex+advPos[i]).after(this.bbsListTmpl(item))
                });
                this.initScroll()
            })
        },
        //详情页-沙发和板凳,10楼与11楼
        initPostList(){
            this.getDa(this.detailPostLocid,(ret)=>{
                let advPos = [1,10],
                    advPosLen = advPos.length,
                    retLen = ret.length,
                    ads = ret;

                //一个广告位只有1推广计划时，重复展示，共2个
                if(retLen==0) return 
                if(retLen==1) ads.push(ret[0])

                ads.forEach((item,i)=>{
                    if(i>=advPosLen) return
                    $(".m-comment__item").eq(advPos[i]).after(this.bbsPostTmpl(item))
                });
                this.initScroll()
            })
        },
        initScroll(){
            let itemTop=[],
                scrollTop = $(window).scrollTop(),
                $daItems = $(".da-block-wrapper"),
                len = $daItems.length;

            if(!len) return

            $daItems.each((index,element)=>{
                itemTop.push($(element).offset().top-winHeight+20)
            })

            itemTop.forEach((item,i)=>{
                if(itemTop[i] <= scrollTop) {
                    let $curItem = $daItems.eq(i)

                    if($curItem.attr("is-report")==1 || !window.dwDaStat) return

                    // console.log("上报第"+i+"个广告")
                    $curItem.attr("is-report",1);
                    window.dwDaStat.reportData($curItem.get(0),'loaded')
                }
            })
        },
        getDa(locid,callback){
            var platform = this.isiOS ? "ios" : "android"

            $.ajax({
                url: "http://da.duowan.com/loc/"+locid+"?platform="+platform,
                dataType: 'jsonp',
                success: function(ret) {
                    callback && callback(ret)
                }
            })
        }
    }

    adv.init()

})(window, $);