tag.js 5.58 KB
/**
 * tag相关js
 * @author: yue.liu@yoho.cn
 * @date;2015/3/31
 */

var $ = require('yoho.jquery'),
    ellipsis = require('mlellipsis'),
    lazyLoad = require('yoho.lazyload'),
    Mustache = require('yoho.mustache');

/**
 * 初始化页面加载时的文字截取和图片懒加载功能
 */
exports.init = function() {
    var tpl;

    $(function() {
        var $tagList = $('#tag-list'),
            $loadMore = $('#load-more-info'),
            $loadStatus = $loadMore.children('.status'),
            $noMore = $loadStatus.filter('.no-more'),
            $loading = $loadStatus.filter('.loading'),
            $loginTip = $('#login-tip'),
            winH = $(window).height(),
            loadMoreH = $loadMore.height(),
            canScroll = true,
            dataEnd = false,
            hasAuthor = false,
            authorId,
            winW,
            tipH,
            tipW;

        //请求相关数据
        var page = 1,
            query = $('#query').val(), //无author时
            gender = $('#gender').val(),
            clientType = $('#client-type').val();

        //是否包含作者信息
        if ($('#author-infos').length > 0) {
            hasAuthor = true;
            authorId = $('#author-infos').data('id');
        }

        //定位登录提示
        winW = $(window).width();
        tipH = $loginTip.height();
        tipW = $loginTip.width();

        $loginTip.css({
            top: (winH - tipH) / 2,
            left: (winW - tipW) / 2
        });

        //读取模板
        $.get('/common/tagtpl', function(data) {
            tpl = data;
            Mustache.parse(tpl);
        });

        //img-lazyload
        lazyLoad();

        //相关文章截取文字
        ellipsis.init();
        $('.tag-text, .tag-title').each(function() {
            this.mlellipsis(2);
        });

        //文章点赞和取消点赞
        $('.tag-container').delegate('.like-btn', 'touchstart', function(e) {
            var $cur = $(e.currentTarget),
                $info = $cur.closest('.tag-content'),
                id = $info.data('id'),
                url;

            $cur.toggleClass('like');

            if ($cur.hasClass('like')) {
                url = '/guang/info/praise';
            } else {
                url = '/guang/info/cancelpraise';
            }
            $.ajax({
                type: 'GET',
                url: url,
                data: {
                    id: id
                }
            }).then(function(data) {
                if (data.code === 200) {

                    //更新点赞数
                    $cur.next('span.like-count').text(data.data);
                } else if (data.code === 400) {

                    //提示登录信息
                    $('#login-tip').fadeIn(500, function() {
                        setTimeout(function() {
                            $('#login-tip').fadeOut(500);
                        }, 1000);
                    });
                }
            });
        });

        /**
         * 加载更多
         */
        function loadMore() {
            var setting,
                hasNum = $tagList.find('.tag-content').length;

            if (hasAuthor) {
                setting = {
                    page: ++page,
                    id: authorId,
                    client_type: clientType
                };
            } else {
                setting = {
                    page: ++page,
                    query: query,
                    gender: gender,
                    client_type: clientType
                };
            }

            canScroll = false;
            $.ajax({
                type: 'GET',
                url: '/tags/get',
                data: setting
            }).then(function(data) {
                var html = '',
                    res,
                    infos,
                    i;

                if (data.code === 200) {
                    res = data.data;
                    if (res.end) {
                        dataEnd = true;
                        $loading.addClass('hide');
                        $noMore.removeClass('hide');
                    }

                    infos = res.infos;
                    for (i = 0; i < infos.length; i++) {
                        html += Mustache.render(tpl, infos[i]);
                    }
                    if (html !== '') {
                        $tagList.append(html);

                        //lazyload新加载的项
                        lazyLoad($tagList.find('.tag-content:gt(' + (hasNum - 1) + ') img.lazy'));

                        //文字截取
                        $tagList.find('.tag-text, .tag-title').each(function() {
                            this.mlellipsis(2);
                        });
                    }
                    canScroll = true;
                }
            });
        }

        $(document).on('scroll', function() {

            //正在请求数据或者数据请求结束时返回
            if (!canScroll || dataEnd) {
                return;
            }

            if ($(window).scrollTop() + winH >= $(document).height() - loadMoreH) {
                loadMore();
            }
        });

        if ($(document).height() === winH) {

            //应对初始加载时数据不满屏不能触发scroll的情况
            $(document).one('touchmove', function() {
                if (!canScroll || dataEnd) {
                    return;
                }

                //显示LoadMore
                $loading.removeClass('hide');
                loadMore();
            });
        } else {
            $loading.removeClass('hide');
        }
    });
};