detail.js 14.1 KB
/*
 * detail页js
 * @author: yue.liu@yoho.cn
 * @date: 2015-04-16
 */

var $ = require('jquery'),
    share = require('../plugin/share'),
    box = require('../plugin/box'),
    imgZoom = require('../plugin/imgZoom'),
    tools = require('yoho-tools'),
    mustache = require('mustache'),
    mulLine = require('mlellipsis');

require('lazyload');
require('../plugin/slider');
require('../plugin/comment');

exports.init = function() {
    var shareUrl = $(".share").attr("data-link"),
        shareCover = $(".share").attr("cover-url"),
        detailTitle = $(".detail-title").find("h1"),
        detailSubtitle = $(".detail-title").find("h2"),
        ajaxParam,
        i,
        data,
        cidNum;

    //底部数据相关变量
    var adItem = '', //边栏广告
        sideVideoTpl = '', //边栏视频模板
        sideVideoData = '', //边栏视频数据
        sideVideoHtml = '', //边栏视频渲染的html
        sidePostTpl = '', //边栏relatedpost模板
        sidePostData = '', //边栏relatedpost数据
        sidePostHtml = ''; //边栏relatedpost渲染的html

    //related-post截行相关变量
    var relatedPost = '',
        postList = '', //post列表
        totalLineNum = '', //总行数
        titleLineNum = '', //title行数
        subTitleLineNum = ''; //subtitle行数

    //滑出边栏小视频side-video播放区域暂停相关变量
    var relatedPostsOffsetTop = '',
        relatedPostsTop = '',
        relatedPostsMarginLeft = '';

    //页面滑动热播位置变化相关变量
    var detailBodyOffsetTop = '',
        relatedPostsOffsetHeightTop = '',
        distance = '',
        eleTop = '',
        detailBodyHeight = '';


    //初始化截行插件
    mulLine.init();
    //分享
    share.init({
        shareUrl: shareUrl,
        img: shareCover,
        sinaText: '【Yoho!Girls】' + detailTitle.text() + '\r\n' + detailSubtitle.text(),
        fbTextFunction: function() {
            return {
                des: '【Yoho!Girls】' + detailTitle.text() + '\r\n' + detailSubtitle.text() + '#YohoGirl',
                name: '【Yoho!Girls】' + detailTitle.text() + '\r\n' + detailSubtitle.text() + '#YohoGirl',
                caption: '【Yoho!Girls】' + detailTitle.text() + '\r\n' + detailSubtitle.text() + '#YohoGirl',
                url: location.href
            }
        },
        tweetText: '【Yoho!Girls】' + detailTitle.text() + '\r\n' + detailSubtitle.text(),
        qqText: '【Yoho!Girls】' + detailTitle.text() + ' ' + detailSubtitle.text() + '(来自Yoho!Girls)'
    });

    //懒加载
    $(".detail-body").find("img.lazy").lazyload({
        placeholder: "data:image/gif;base64,R0lGODlhAQABAJEAAAAAAP///93d3f///yH5BAEAAAMALAAAAAABAAEAAAICVAEAOw=="
    });

    //订阅
    $(".focus-us .textbox a").click(function() {
        var input = $(this).prev();
        if ($.trim(input.val()) === "") {
            //box.alert(tips.getTips("emailEmpty"),5);
            box.alert(11);
            return;
        }
        if (!tools.IYOHO_isEmail(input.val())) {
            //box.alert(tips.getTips("emailError"),5);
            box.alert(22);
            return;
        }
        window.open('/passport/subscribe/index?email=' + input.val());
    });

    $(".focus-us .textbox input").keydown(function(event) {
        if (event.keyCode === 13) {
            $(this).next().trigger("click");
        }
    });

    //图片轮播
    if ($(".detail-slide-body").size() > 0) {
        $(".detail-slide-ctrl-tabs").find("img.lazy").lazyload();
        $(".detail-slide-body").imgZoom({
            styleClass: 'detail-zoom'
        });

        $(".detail-slide-piclist").slider({
            pageCtrl: $(".detail-slide-ctrl-tabs"),
            pageCtrlAnimate: true
        });
    };

    //调用评论插件
    $(".stats-btn").on("click", ".comments", function() {
        cidNum = $(".comments-box").attr("cid");
        if ($(".comments-box").find(".comment-textarea").size() > 0) {
            if ($(".comments-box").css("display") === "none") {
                $(".comments-box").show();
            } else {
                $(".comments-box").hide();
            }
        } else {
            $(".comments-box").comment({
                cid: cidNum,
                thirdLogin: true,
                commentPageUrl: '/comment/default/list',
                publishUrl: '/comment/default/publish',
                deleteUrl: '/comment/default/delete'
            });
        }
    });

    //ajax参数
    ajaxParam = {
        id: $(".comments-box").attr("cid"),
        type: $(".comments-box").attr("ctype"),
        c: $(".comments-box").attr("cc"),
        twoc: $(".comments-box").attr("ctwoc")
    };

    //右侧side的数据获取
    $.ajax({
        type: 'GET',
        url: YohoConfig.mainUrl + '/channel/detail/getright', //?id=' + ajaxParam.id + '&type=' + ajaxParam.type + '&c=' + ajaxParam.c + '&twoc=' + ajaxParam.twoc,
        success: function(response) {
            data = response.data;
            //广告
            for (i = 0; i < data.banners.length; i++) {
                adItem += '<a href="' + data.banners[i].link + '" target="_blank"><img src="' + data.banners[i].img + '" alt="" /></a>'
            }
            $(".detail-ad").html(adItem);

            //没有广告去掉margin
            if (data.banners.length == 0) {
                $(".detail-side .app-download").css("margin", 0);
            }

            //视频
            sideVideoTpl = $('#side-video-tpl').html();
            sideVideoData = {
                video: data.video
            }

            sideVideoHtml = mustache.render(sideVideoTpl, sideVideoData);

            $('.detail-side').append($(sideVideoHtml));
            if (navigator.userAgent.indexOf('iPad') !== -1) {
                // 封面视频播放器替换为H5的VIDEO标签
                if (!!$('.video-area').find('object').size()) {
                    $('.video-area').find('object').hide();
                    $('.side-video').find('video').show();
                }
            }

            //边栏related-post
            sidePostTpl = $('#side-related-posts').html();
            sidePostData = {
                relatedPost: {
                    postList: data.mosts
                }
            }
            sidePostHtml = mustache.render(sidePostTpl, sidePostData);
            $('.detail-side').append($(sidePostHtml));

            //边栏related-post根据行数截取字符
            relatedPost = $('.side-related-posts');
            postList = relatedPost.find("li");
            if (postList.length > 0) {
                totalLineNum = 3;
                postList.each(function(index, obj) {
                    titleLineNum = $(obj).find('h3').getTextLineNumber('title');
                    subTitleLineNum = $(obj).find('p').getTextLineNumber('subtitle');
                    if (titleLineNum > 2) {
                        $(obj).find('h3').mlellipsis(2);
                        titleLineNum = 2;
                    }
                    if (subTitleLineNum > totalLineNum - titleLineNum) {
                        $(obj).find('p').mlellipsis(totalLineNum - titleLineNum, 'detail');
                    }
                });
            }

            //滑出小视频播放区域暂停小视频
            $(window).resize(function() {
                relatedPostsOffsetTop = relatedPost.offset().top - $('#minEnterprise').outerHeight();
                relatedPostsTop = $('#minEnterprise').outerHeight();
                relatedPostsMarginLeft = $('.detail-container').width() / 2 - relatedPost.outerWidth();
            }).resize();
            $(window).bind('scroll', function() {
                function thisMovie(movieName) {
                    if (navigator.appName.indexOf('Microsoft') != -1) {
                        return window[movieName];
                    } else {
                        return document[movieName];
                    }
                }
                if ($('.side-video').size() > 0) {
                    if ($(window).scrollTop() >= $('.side-video').offset().top || $(window).scrollTop() < $('.side-video').offset().top - $(window).height()) {

                        try {
                            if (navigator.appName.indexOf('Microsoft') != -1) {
                                thisMovie('newestvideo').StopMovie();
                            } else if (navigator.userAgent.indexOf('iPad') !== -1) {
                                var videoId = document.getElementById('side-video-ipad');
                                videoId.pause();
                            } else {
                                $('.side-video').find('embed').get(0).StopMovie();
                            }

                        } catch (e) {}
                    }
                }

                if ($(window).scrollTop() >= relatedPostsOffsetTop && relatedPost.css('display') !== 'none') {
                    if (navigator.userAgent.indexOf('iPad') !== -1) return;
                    //right_tab_toped=true;
                    relatedPost.css({
                        'position': 'fixed',
                        'left': '50%',
                        'margin-left': relatedPostsMarginLeft,
                        'top': relatedPostsTop
                    });

                    //热播位置
                    detailBodyOffsetTop = $('.detail-body').offset().top;
                    detailBodyHeight = $('.detail-body').outerHeight();
                    relatedPostsOffsetHeightTop = relatedPost.offset().top + relatedPost.outerHeight();
                    distance = detailBodyHeight + detailBodyOffsetTop;
                    eleTop = distance - relatedPost.outerHeight();
                    if (relatedPostsOffsetHeightTop >= distance) {
                        relatedPost.css({
                            'position': 'absolute',
                            'top': eleTop - relatedPostsTop
                        });
                    }
                    if (relatedPost.offset().top - $(window).scrollTop() > relatedPostsTop) {
                        relatedPost.css({
                            'position': 'fixed',
                            'top': relatedPostsTop
                        });
                    }
                } else if ($(window).scrollTop() < relatedPostsOffsetTop && relatedPost.css('display') !== 'none') {
                    //right_tab_toped=false;
                    relatedPost.removeAttr('style').show();
                }


            });
        }
    });

    //底部数据的获取
    $.ajax({
        type: 'GET',
        url: YohoConfig.mainUrl + '/channel/detail/getbottom', //?id=' + ajaxParam.id + '&type=' + ajaxParam.type + '&c=' + ajaxParam.c + '&twoc=' + ajaxParam.twoc,
        success: function(response) {
            data = response.data;

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

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

                //新品播报根据行数截取字符
                var citems = $(".related-posts li");
                var totalLineNum = 3;
                if (citems.length > 0) {
                    citems.each(function(index, obj) {
                        var self = $(obj);
                        var titleLineNum = self.find("h4").getTextLineNumber("title");
                        var subTitleLineNum = self.find("p").getTextLineNumber("subtitle");
                        if (titleLineNum > 2) {
                            self.find("h4").mlellipsis(2);
                            titleLineNum = 2;
                        }
                        if (subTitleLineNum > totalLineNum - titleLineNum) {
                            self.find("p").mlellipsis(totalLineNum - titleLineNum, "detail");
                        }

                    });
                }
            };

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

            //态度
            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);

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