detail.js 6.82 KB
/**
 * 逛详情页
 * @author: liuyue<yue.liu@yoho.cn>
 * @date: 2015/12/16
 */

var $ = require('yoho.jquery'),
    lazyLoad = require('yoho.lazyload'),
    $commentArea = $('#comment-area'),
    articleId = $('#detail-container').data('id'),
    yoShare = require('../common/share');

var $commentList = $commentArea.find('.comments-wrap'),
    $commentNum = $('#article-comment > .comment-num'),
    commenting = false, //评论请求尚未返回变量
    locating = false, //评论页面正在跳转
    $commentBtn = $('#comment-btn'),
    MAX_COMMENTS_WORDS = 100,
    $wordCountTip = $('#word-count-tip');

require('./right-side');
require('./img-blink');

//Pjax
require('yoho.pjax');

lazyLoad({
    failure_limit: 50
});

//点击评论滑到评论区
$('#article-comment').click(function() {
    $('html, body').animate({
        scrollTop: $commentArea.offset().top
    }, 800);
});

//文章点赞与取消点赞
$('#prise-btn').click(function() {
    var prising = false,
        url,
        $this = $(this);

    if (prising) {
        return;
    }
    $this.toggleClass('liked');
    if ($this.hasClass('liked')) {

        //点赞
        url = '/msg/prise';
    } else {

        //取消点赞
        url = '/msg/cancelprise';
    }
    prising = true;
    $.ajax({
        type: 'GET',
        url: url,
        data: {
            id: articleId
        }
    }).then(function(data) {
        if (data.code === 200) {
            $this.find('.like-num').html(data.data);
        }
        prising = false;
    });
}).bind('mouseenter mouseleave', function() {
    $(this).toggleClass('hover');
});

//文章收藏与取消收藏
$('#collect-btn').click(function() {
    var collecting = false,
        url,
        col,
        $this = $(this);

    if (collecting) {
        return;
    }
    if ($this.hasClass('collected')) {

        //取消点赞
        url = '/msg/cancelcollect';
        col = 0;
    } else {

        //点赞
        url = '/msg/collect';
        col = 1;
    }
    collecting = true;
    $.ajax({
        type: 'GET',
        url: url,
        data: {
            id: articleId
        }
    }).then(function(data) {
        var hrefUrl;

        switch (data.code) {
            case 401:

                //防止从已有col的页面再次进行跳转后出错的情况
                if (/\?col=(1|0)/.test(location.href)) {
                    hrefUrl = location.href.replace(/\?col=(1|0)/, '?col=' + col);
                } else {
                    hrefUrl = location.href + '?col=' + col;
                }
                location.href = 'http://www.yohobuy.com/signin.html?refer=' + encodeURI(hrefUrl);
                break;
            case 400:
                alert(data.message);
                break;
            case 200:
                if (/\?col=(1|0)/.test(location.href)) {

                    //如果页面url中含有col,为了防止页面刷新时收藏或者取消收藏会根据col来的问题,进行页面跳转拿掉参数
                    location.href = location.href.replace(/\?col=(1|0)/, '');
                } else {
                    $this.toggleClass('collected');
                }
                break;
        }
        collecting = false;
    });
}).bind('mouseenter mouseleave', function() {
    $(this).toggleClass('hover');
});

//Share
function share(channel, self) {
    var title = $('#share-title').val();
    var desc = document.title.replace(/(^\s*)|(\s*$)/g, '');
    var image = $('#share-img').val();
    var weixinUrl = $('#weixin-url').val();

    if (channel === 'weibo' || channel === 'tqq') {
        yoShare({
            channel: channel,
            title: title,
            image: image
        });
    } else {
        yoShare({
            channel: channel,
            title: '【YOHO!有货】最快、最全、最权威的潮流品牌型录发布平台',
            desc: desc,
            image: image,
            self: self,
            weixinUrl: weixinUrl
        });
    }
}

$('.article-share').delegate('.share-a', 'click', function(e) {
    var $el = $(this),
        type = $el.data('type');

    e.preventDefault();
    if (type === 'weixin') {
        share(type, $el);
    } else {
        share(type);
    }
});

//评论
function comment(id) {
    var commentInfo = $('#comment-info').val();

    if (commentInfo === '') {
        alert('评论不能为空');
        return false;
    }
    commenting = true;
    $.ajax({
        url: '/msg/comment',
        data: {
            article_id: id,
            comment: commentInfo
        },
        type: 'post',
        success: function(data) {
            switch (data.code) {
                case 401:
                    locating = true;
                    location.href = 'http://www.yohobuy.com/signin.html?refer=' +
                                    window.escape(location.href + '#comment-info');
                    break;
                case 400:
                    alert(data.message);
                    break;
                case 200:
                    if (data.data) {
                        $commentList.html(data.data.content);
                        $commentNum.html(data.data.count);

                        //clear comment-text
                        $('#comment-info').val('').keyup();
                    }
                    break;
            }
            commenting = false;
        }
    });
}



$commentBtn.click(function(e) {

    //页面正在跳转或者正在AJAX请求时评论无效
    if (locating || commenting) {
        return false;
    }

    //字数不符合要求
    if ($('#comment-info').val().length - MAX_COMMENTS_WORDS > 0) {
        return;
    }
    e.preventDefault();
    comment($('#detail-container').data('id'));
});

//comment pager pjax
$(document).pjax('.comment-pager a', '#pjax-container', {
    timeout: 5000
});

//分页后移动到评论框的位置
$(document).on('pjax:end', function() {
    $('html,body').scrollTop($('#comment-info').offset().top);
});

$(document).ready(function() {
    var commonlist = $('.comments-list').find('li').length;

    if (commonlist === 0) {
        $('.commnets-resultwrapper').hide();
        $('.comments-empty').show();
    } else {
        $('.commnets-resultwrapper').show();
        $('.comments-empty').hide();
    }
});

$('#comment-info').keyup(function() {
    var len = $(this).val().length,
        showTxt;

    if (len === 0) {
        $wordCountTip.html('');
        $commentBtn.addClass('disable');
    } else {
        if (len - MAX_COMMENTS_WORDS <= 0) {
            showTxt = '还可以输入' + (MAX_COMMENTS_WORDS - len) + '字';
            $commentBtn.removeClass('disable');
        } else {
            showTxt = '已超过<span class="exceed-count">' + (len - MAX_COMMENTS_WORDS) + '</span>字';
            $commentBtn.addClass('disable');
        }
    }
    $wordCountTip.html(showTxt);
});

//init
$('#comment-info').trigger('keyup');