dwweb-h5/2018专题/多玩H5广告位/tu-detail.js

/*!
 * @project : 
 * @version : 1.0.0
 * @author  : 
 * @update  : 2015-06-12 10:12:50 am
 */
console.log("dsad")
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);
    }
}

var adv = {
    isiOS : navigator.userAgent.match(/(iPhone|iPod|iPad);?/i), //ios终端
    swipeLocid : 166,     //大图locid
    picsLocid : 167,      //图集locid
    swiperAdvPos : false, //大图swiper id
    swiperGameInfo : {},
    cssTmpl : '#rec-imgs{overflow: scroll;}\
               .swiper-wrapper div.m-container{overflow: inherit;height: auto;}\
               .ui-picHeader__adv{position: absolute;right: 10px;top: 2px;height: 44px;padding-left: 28px;line-height: 44px;font-size: 18px;color: #fff;}\
               .ui-picShow__item .gameLink{position: absolute;top: 0;left: 0;width: 100%;height: 100%;    z-index: 2;}\
               .rec-list{overflow:hidden}\
               .img-info-n .da-title-link{position: absolute;bottom: 0;left: 0;z-index: 999;width: 100%;height: 100%;}',
    swipeItemTmpl : '<div class="swiper-slide swiper-item ui-picShow__item" id="swipeGame1">\
                    <img name="imgItems" data-original="">\
                    <a href="" target="_blank" class="gameLink da-block-wrapper" not-auto-report="1"></a>\
                </div>',

    init : function (){
        var self = this
        if(Util.getParam("isdebug")!=1) return

        $("head").append('<style>'+this.cssTmpl+'</style>')

        this.initSwiperAdvPos()
        this.getPicsDa()
        Util.getScript("//pub.dwstatic.com/common/js/dastat.js",function(){});

        //滑动大图第二个链接-点击上报
        $("body").on("click","#swContGameInfo",function(){
            if(window.dwDaStat) window.dwDaStat.reportData($(this).get(0))
        })

    },

    //大图广告
    getSwipeDa : function(){
        var self = this;

        console.log("获取大图广告")
        this.getDa(this.swipeLocid,function(ret){
            self.swiperGameInfo = ret[0]
            $("#swipeGame1 img").attr({
                "src" : self.swiperGameInfo.adSrc,
                "data-original":self.swiperGameInfo.adSrc
            })
            $("#swipeGame1 .gameLink").attr({
                "href":self.swiperGameInfo.adLink,
                "locid" : self.swipeLocid,
                "pid" : self.swiperGameInfo.adPid
            })

            imgJson.picInfo[self.swiperAdvPos]={
                add_intro : self.swiperGameInfo.title,
                title : self.swiperGameInfo.title
            }
        })
    },

    //图集广告
    getPicsDa : function(){
        // return;
        var self = this,
            $items = $(".rec-list").find("a"),
            advPos = [1,3];

        this.getDa(this.picsLocid,function(ret){
            for(var i=0;i<ret.length;i++) {
                $items.eq(advPos[i]).before(self.getPicsDaDom(ret[i]))
            }
        })
    },

    setDaTitleLink : function(t){
        var i = '<a href="'+t.adLink+'" target="_blank" id="swContGameInfo" class="da-title-link" locid="'+t.adId+'" pid="'+t.adPid+'" not-auto-report="1"></a>'

        return i;
    },

    getPicsDaDom : function(t){
        var i = '<li style="background-image: url('+t.adSrc+')"><a href="'+t.adLink+'" target="_blank" class="da-block-wrapper" locid="'+t.adId+'" pid="'+t.adPid+'" not-auto-report="1">\
                    <li style="background-image: url('+t.adSrc+')">\
                            <span class="r-l-txt">'+t.title+'</span>\
                    </li>\
                </a>'

        return i;
    },

    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)
            }
        })
    },

    //初始化swipe
    initSwiperAdvPos : function(){
        var len = imgJson.picInfo.length
        if(len>=10) {
            var random = len > 15 ? 9+Math.floor(Math.random() * 5) : 9+Math.floor(Math.random() * (len-10))

            console.log("广告位置："+random)
            this.swiperAdvPos = random
            this.getSwipeDa()
            imgJson.picInfo.splice(random,0,{})
            $(".swiper-wrapper").children(".swiper-item").eq(random).before(this.swipeItemTmpl);
        }
    },

    //展示上报
    showReport : function(curSwipe){
        if(Util.getParam("isdebug")!=1) return 

        //图集-广告
        if (this.swiperAdvPos && curSwipe==this.swiperAdvPos) {
            $(".img-info-n").append(this.setDaTitleLink(this.swiperGameInfo))
            $("#comment_url").before('<div class="ui-picHeader__adv" id="swHeaderGameTag">广告</div>')
            $("#comment_url,#imgInfoContent,.img-info-n .m-img_num").hide()

            console.log("上报统计-swipeItem")
            if(window.dwDaStat) window.dwDaStat.reportData($("#swipeGame1 a").get(0),'loaded')
        //图集推荐-广告
        } else if(curSwipe==imgJson.picInfo.length){
            console.log("上报统计-图集")
            $(".rec-list .da-block-wrapper").each(function(){
                if(window.dwDaStat) window.dwDaStat.reportData($(this).get(0),'loaded')
            })
        }else {
            $("#swHeaderGameTag,#swContGameInfo").remove()
            $("#comment_url,#imgInfoContent,.img-info-n .m-img_num").show()
        }
    }
}

seajs.use(["zepto", "touch", "swiper", "iscroll", "hammer", "hbURL"], function() {
    
    function e(e) {
        $(".rec-list").css("visibility", "visible"),
        $("#comment_url").attr("href", imgJson.picInfo[e].comment_url),
        $(".ui-picHeader__reply").text(imgJson.picInfo[e].num),
        $(".ui-picHeader__title").hide(),
        $(".ui-picHeader__reply").show(),
        $(".ui-picHeader__backBtn").show(),
        $(".img-info-title").text(imgJson.picInfo[e].title),
        $(".m-img_num").html("<span>" + (e + 1) + "</span>/" + imgJson.picInfo.length),
        $("#imgInfoContent").html(imgJson.picInfo[e].add_intro),
        $(".ui-picHeader").show(),
        $(".img-info-n").show(),
        o && o.refresh()
    }
    function t() {
        transform = {
            scale: 1,
            startX: 0,
            startY: 0,
            endX: 0,
            endY: 0
        },
        r()
    }
    function n(e) {
        $('[name="imgItems"]').eq(e).attr("src", $('[name="imgItems"]').eq(e).attr("data-original")),
        $('[name="imgItems"]').eq(e + 1).attr("src", $('[name="imgItems"]').eq(e + 1).attr("data-original")),
        c = new Hammer($('[name="imgItems"]').eq(e)[0]),
        c.add(new Hammer.Pinch),
        c.add(new Hammer.Pan),
        c.on("pinchmove", function(e) {
            var t = $(e.target);
            $(t).removeClass("imgBackMin imgBackMax dbTap backTap"),
            e.scale >= 1 ? transform.scale < 3.5 && (transform.scale = transform.scale + .2 * (e.scale - 1)) : transform.scale >= .8 && (f.unlockSwipes(),
            transform.scale = transform.scale - .1 * (1 - e.scale)),
            r(t)
        }),
        c.on("pinchend", function(e) {
            if (transform.scale < 1)
                transform.scale = 1,
                $(e.target).addClass("imgBackMin"),
                setTimeout(function() {
                    t()
                }, 200);
            else if (transform.scale > 2.8) {
                transform.scale = 2.8,
                $(e.target).addClass("imgBackMax");
                var n = $(e.target);
                setTimeout(function() {
                    r(n)
                }, 200)
            }
        }),
        c.on("panmove", function(e) {
            $(e.target).removeClass("imgBackMin imgBackMax dbTap backTap");
            var t = e.target;
            if (transform.scale > 1 || $(t).width() <= $(document).width() && $(t).height() >= $(document).height()) {
                f.lockSwipes();
                var n = ($(t).offset().top,
                $(document).height())
                  , a = $(t).height()
                  , s = (a - n) / 2 + 100
                  , i = -(a - n) / 2 - 200
                  , o = ($(t).offset().left,
                $(document).width())
                  , m = $(t).width()
                  , c = (m - o) / 4
                  , d = -c;
                if ($(t).width() <= $(document).width() && $(t).height() >= $(document).height()) {
                    f.unlockSwipes();
                    var l = $(t);
                    transform.endY = transform.startY + .8 * e.deltaY,
                    transform.endY < s && transform.startY < transform.endY ? r(l) : transform.endY > i && transform.startY > transform.endY ? r(l) : transform.endY = transform.startY < transform.endY ? s : i
                } else if ($(t).width() > $(document).width() && $(t).height() <= $(document).height()) {
                    var l = $(t);
                    transform.endX = transform.startX + .8 * e.deltaX,
                    transform.endX < c && transform.startX < transform.endX ? r(l) : transform.endX > d && transform.startX > transform.endX ? r(l) : (transform.endX = transform.startX < transform.endX ? c : d,
                    f.unlockSwipes())
                } else if ($(document).width() - ($(t).width() + $(t).offset().left) >= 0)
                    f.unlockSwipes();
                else if ($(t).offset().left >= 0)
                    f.unlockSwipes();
                else {
                    var l = $(t);
                    transform.endX = transform.startX + .8 * e.deltaX,
                    transform.endY = transform.startY + .8 * e.deltaY,
                    transform.endY < s && transform.startY < transform.endY ? r(l) : transform.endY > i && transform.startY > transform.endY ? r(l) : transform.endY = transform.startY < transform.endY ? s : i
                }
            }
        }),
        c.on("panend", function() {
            transform.startX = transform.endX,
            transform.startY = transform.endY
        })
    }
    function r(e) {
        ("" === e || "undefined" == typeof e) && $('[name="imgItems"]').css({
            "-webkit-transform": "scale3d(" + transform.scale + "," + transform.scale + "," + transform.scale + ")  translate3d(" + transform.endX + "px," + transform.endY + "px,0)"
        }),
        $(e).css({
            "-webkit-transform": "scale3d(" + transform.scale + "," + transform.scale + "," + transform.scale + ")  translate3d(" + transform.endX + "px," + transform.endY + "px,0)"
        })
    }
    document.ontouchmove = function() {
        return !1
    }
    ,
    $(".ui-picShow").css("height", $(document).height() - 30);
    for (var a = "", s = 0, i = imgJson.picInfo.length; i > s; s++)
        a += '<div class="swiper-slide swiper-item ui-picShow__item">\
                    <img name="imgItems" data-original="' + imgJson.picInfo[s].url + '">\
              </div>';
    
    $(".swiper-wrapper").children(".swiper-item").first().before(a);

    //swipe广告位
    adv.init()
    new IScroll("#rec-imgs",{
        scrollbars: !0,
        mouseWheel: !0,
        shrinkScrollbars: "scale"
    })

    var o, m, f = new Swiper(".ui-picShow",{
        resizeReInit: !0,
        onInit: function() {
            var n = $(".swiper-slide ");
            $(".swiper-wrapper").width(n.width() * n.length),
            t(),
            e(0),
            o = new IScroll("#infoContent",{
                scrollbars: !0,
                mouseWheel: !0,
                shrinkScrollbars: "scale"
            })
        },
        onSlideChangeEnd: function() {
            t(),
            f.activeIndex >= f.slides.length - 1 ? ($(".ui-picHeader").show(),
            $(".ui-picHeader__title").show(),
            $(".img-info-n").hide(),
            $(".ui-picHeader__reply").hide(),
            $(".ui-picHeader__backBtn").hide()) : (e(f.activeIndex),
            n(f.activeIndex)),
            $(".swiper-slide-active").find("img").attr("id", "onImg")

            adv.showReport(f.activeIndex)
        }
    });
    $(".swiper-container").find("img").on("touchstart", function() {
        m = setTimeout(function() {
            "none" !== $(".ui-picHeader").css("display") ? ($(".ui-picHeader").hide(),
            $(".img-info-n").hide()) : ($(".ui-picHeader").show(),
            $(".img-info-n").show())
        }, 100)
    }),
    $(".swiper-container").on("touchmove", function() {
        clearTimeout(m)
    }),
    $(".swiper-slide").find("img").on("doubleTap", function() {
        if (clearTimeout(m),
        1 === transform.scale && 0 === transform.endX && 0 === transform.endY) {
            transform.scale = 2,
            $(this).removeClass("backTap").addClass("dbTap");
            var e = $(this);
            setTimeout(function() {
                r(e)
            }, 200)
        } else
            f.unlockSwipes(),
            $(this).removeClass("dbTap").addClass("backTap"),
            setTimeout(function() {
                t()
            }, 200)
    });
    var c;
    n(0)
});