detail320.js 10.7 KB
/*
 * @description: 详情页
 * @author: chenglong.wang@yoho.cn
 * @date: 2015/1/13
 */

var $      = require("jquery");
var tools  = require('yoho-tools');
var swiper = require('yoho.swiper');

var oShare = require("../plugin/share");
var flip   = require("../plugin/flip");
var slide  = require("../plugin/photoslide");

             require("../plugin/login");
             require("../plugin/comment");
             require("../plugin/contentPaging");

exports.init = function() {

    //轮播图
    var fashionSwiper = new swiper('.fashion-banner',{
        mode:'horizontal',
        loop: true,
        grabCursor: true,
        paginationClickable: true,
        slideElement: 'li',
        onSlideChangeEnd: fashionSwiperIndex
    });

    var fashionSwitch = $(".fashion-switch");

    var page;
    if (!!fashionSwiper.slides) {
        page = fashionSwiper.slides.length-2;
    }

    fashionSwitch.text(1+'/'+page);

    function fashionSwiperIndex () {
        var index = fashionSwiper.activeIndex;
        //index = index > page ? 1 : index;
        if (index > page) {
            index = 1;
        }else if (index <= 0) {
            index = page;
        }
        fashionSwitch.text(index+'/'+page);
        $(".relazy").lazyload({threshold: 100});
    }

    //变脸效果
    slide.initSlide({
        isMobile: true
    });

    var commentBox  =$(".comments-box");
    $(".comments").on("click",function(){

        var cidNum = commentBox.attr("cid");
        if($(".comment-textarea").size()>0){

            if(commentBox.css("display") == "none"){
                commentBox.show();
            }else{
                commentBox.hide();
            }
        }else{
            commentBox.comment({
                cid:cidNum,
                commentPageUrl:'/comment/default/list',
                publishUrl:'/comment/default/publish',
                deleteUrl:'/comment/default/delete',
                isMobile:true
            });
        }

    });

    //ajax参数
    var param = {
        id:commentBox.attr("cid"),
        type:commentBox.attr("ctype"),
        c:commentBox.attr("cc"),
        twoc:commentBox.attr("ctwoc")
    };
    //底部数据的获取
    $.ajax({
        type:'GET',
        url:YohoConfig.mainUrl+'/channel/detail/getbottom?id='+param.id+'&type='+param.type+'&c='+param.c+'&twoc='+param.twoc,
        success:function(response){

            var data = response.data;

            var relatedPost = data.related,
                prevnext = data.prevnext,
                attitude = data.attitude,
                commentnum = data.commentnum;

            //新品播报
            var relatedPostItem = '';
            for(var i=0;i<3;i++){
                if(relatedPost[i].isVideo === true){
                    var video = '<li>'+
                        '<a href="'+relatedPost[i].link+'" target="_blank" onclick="relatedClickEvent();">'+
                        '<div class="content-pic">'+
                        '<img src="'+relatedPost[i].cover+'" alt="" />'+
                        '<span class="play-icon"></span>'+
                        '</div>'+
                        '<div class="content-text">'+
                        '<h2>'+relatedPost[i].title+'</h2>'+
                        '<h3>'+relatedPost[i].subtitle+'</h3>'+
                        '</div>'+
                        '</a>'+
                        '</li>';
                    relatedPostItem += video;
                }else{
                    var img = '<li>'+
                        '<a href="'+relatedPost[i].link+'" target="_blank" onclick="relatedClickEvent();">'+
                        '<div class="content-pic">'+
                        '<img src="'+relatedPost[i].cover+'" alt="" />'+
                        '</div>'+
                        '<div class="content-text">'+
                        '<h2>'+relatedPost[i].title+'</h2>'+
                        '<h3>'+relatedPost[i].subtitle+'</h3>'+
                        '</div>'+
                        '</a>'+
                        '</li>';
                    relatedPostItem += img;
                }
            }
            $(".recomment ul").append($(relatedPostItem));

            //上一篇下一篇
            var pagePrev = $('.detail-prev');
            var pageNext = $('.detail-next');
            if(prevnext.prev.title){
                pagePrev.show();
                pagePrev.find("a").attr("href",prevnext.prev.link)
                    .attr("title",prevnext.prev.title).attr("onclick","prevOrNextClickEvent();");
            }
            if(prevnext.next.title){
                pageNext.show();
                pageNext.find("a").attr("href",prevnext.next.link)
                    .attr("title",prevnext.next.title).attr("onclick","prevOrNextClickEvent();");
            }


            //态度
            $(".stats-btn").find("li").removeClass("current");
            setattitude(attitude.wowCount,attitude.zzzCount,attitude.wtfCount);

            if(commentnum>0){
                $(".comment-num").text(commentnum);
            }else{
                $(".comment-num").html('<img src="'+YohoConfig.resUrl+'/assets/images/comment-mobile.png">');
            }

        }
    });
    //态度设置
    $(".stats-btn").on("click","li",function(){
        if($(this).index() == 3) return;
        var exType = $(this).index()+1;
        var isCancel = 0;

        if($(this).hasClass("current")){
            isCancel = 1;
        }
        //在请求开始之前先变色
        if($(this).hasClass("current")){
            $(this).removeClass('current');
        }else{
            $(".stats-btn").find("li").removeClass("current");
            $(this).addClass('current');
        }

        var attitudeData = {id:param.id,exType:exType,isCancel:isCancel};

        $.ajax({
            type:'POST',
            url:YohoConfig.mainUrl+'/channel/detail/setattitude',
            data:attitudeData,
            dataType:'json',
            success:function(response){
                var attitude = response.data;

                /*if(attitude.userWow>0){
                 $(".stats-btn .wow").addClass("current");
                 };
                 if(attitude.userWtf>0){
                 $(".stats-btn .wtf").addClass("current");
                 };
                 if(attitude.userZzz>0){
                 $(".stats-btn .zzz").addClass("current");
                 };*/
                setattitude(attitude.wowCount,attitude.zzzCount,attitude.wtfCount);
            }
        });
    });
    function setattitude(wow,zzz,wtf){
        if(wow ===0){
            $(".stats-btn .wow").find("span").find("img").show();
            $(".stats-btn .wow").find("span").find("i").hide();
        }else{
            $(".stats-btn .wow").find("span").find("i").text(wow).show();
            $(".stats-btn .wow").find("span").find("img").hide();
        }

        if(zzz ===0){
            $(".stats-btn .zzz").find("span").find("img").show();
            $(".stats-btn .zzz").find("span").find("i").hide();
        }else{
            $(".stats-btn .zzz").find("span").find("i").text(zzz).show();
            $(".stats-btn .zzz").find("span").find("img").hide();
        }

        if(wtf ===0){
            $(".stats-btn .wtf").find("span").find("img").show();
            $(".stats-btn .wtf").find("span").find("i").hide();
        }else{
            $(".stats-btn .wtf").find("span").find("i").text(wtf).show();
            $(".stats-btn .wtf").find("span").find("img").hide();
        }
    }
    exports.updateLogin = function(){
        $(".comments-box").login("updateLoginState");
        $(".comments-box").comment("publishComment");
    };
    $(".side-bar-header").login();
    $(".side-bar-header").on("click",function(){
        $(this).login("loginBoxAnimate");
    });

    //手机版弹出登录框
    /*$(".side-bar-header").on("click",function(){
     if($(this).hasClass("login-success")) return;
     $(".comments-box").comment("loginBoxAnimate");
     })*/
    //$(".comments-box").comment("initLoginState");

    //share
    var shareUrl = $("#share").attr("data-link");
    oShare.init({
        shareUrl:shareUrl,
        img:$("#share").attr("cover"),
        sinaText:'【Yoho!Boys】'+$(".share-h2").text()+'\r\n'+$(".share-h3").text(),
        fbTextFunction:function(){
            return {
                des:'【Yoho!Boys】'+$(".share-h2").text()+'\r\n'+$(".share-h3").text()+'#YohoBoy',
                name:'【Yoho!Boys】'+$(".share-h2").text()+'\r\n'+$(".share-h3").text()+'#YohoBoy',
                caption:'【Yoho!Boys】'+$(".share-h2").text()+'\r\n'+$(".share-h3").text()+'#YohoBoy',
                url:location.href
            }
        },
        tweetText:'【Yoho!Boys】'+$(".share-h2").text()+'\r\n'+$(".share-h3").text()+'@YOHO潮流志',
        qqText:'【Yoho!Boys】'+$(".share-h2").text()+'\r\n'+$(".share-h3").text()+'(来自Yoho!Boys)'
    });


    //hr分页
    (function () {
        // iphone上面的视频处理
        var UserAgent = navigator.userAgent.toLowerCase();
        var IsIphoneOs = UserAgent.match(/iphone os/i) == "iphone os";
        var videoWrap = $('.fashion-text');
        if (IsIphoneOs) {
            // 内容中视频播放器替换为H5的VIDEO标签
            if (videoWrap.find("object").length > 0) {
                var defaultCover = videoWrap.attr("cover-url");
                var playHref = "", videoUrl = "", videoCover = "", videoHtml = "";
                videoWrap.find("object").each(function() {
                    playHref = $(this).find('embed').attr('src');
                    videoUrl = tools.request('url', playHref);
                    videoCover = tools.request('coverpic', playHref);
                    if (videoCover === "") {
                        videoCover = defaultCover;
                    }
                    videoCover = videoCover.replace(/%3A/g, ':').replace(/%2F/g, '/');
                    videoHtml = '<video controls="controls" preload="auto" width="290px" height="163px" poster="'+videoCover+'">'+
                    '<source src="' + videoUrl + '" type="video/mp4">'+
                    '</video>';
                    $(this).replaceWith(videoHtml);
                });
            }
        }
    })();


    $(".fashion").contentPaging({
        pageContentWrap:".fashion-text",
        callback:function () {
            lifeFlip();
        }
    });

    //翻转
    function lifeFlip () {
        var lifestyleFlip = $('.lifestyle-flip').size();
        if (!!lifestyleFlip) {
            flip.init();
        }
    }
    lifeFlip();
};

/**
 * 点击关联关系区的事件
 */
function relatedClickEvent()
{
    _hmt.push(['_trackEvent', '2.0 related', '2.0 post mobile', '2.0 related mobile']);
}

/**
 * 点击上一页/下一页的事件
 */
function prevOrNextClickEvent()
{
    _hmt.push(['_trackEvent', '2.0 prev or next', '2.0 prev or next mobile', '2.0 prev or next mobile']);
}