saunter-home.js 5.91 KB
var $ = require('yoho.jquery'),
    lazyLoad = require('yoho.lazyload'),
    Mustache = require('yoho.mustache'),
    Swiper = require('yoho.iswiper');

var $nav = $('#saunter-nav'),
    $msgList = $('#msg-list'),
    $loadMore = $('#load-more-info'),
    $noMore = $loadMore.children('.no-more'),
    $loading = $loadMore.children('.loading'),
    loadH = $loadMore.height(),
    cached = {},
    reloadFirst = false, //重新加载首页数据标志
    loading = false, //正在ajax标志
    winH = $(window).height(),

    query = $('#query').val(), //无author时
    gender = $('#gender').val(),
    clientType = $('#client-type').val(),

    tpl,
    swiper,
    baseFontSize,
    baseFont;

require('./wxshare')();
require('yoho.dotdotdot');

//初始化focus
$('.saunter-nav > li:first-child').addClass('focus');

//初始化cached
$('.saunter-nav li').each(function() {
    var $el = $(this),
        page = $el.index() === 0 ? 1 : 0;

    cached[$el.data('type')] = {
        page: page,
        end: false,
        msgs: []
    };
});

swiper = new Swiper('.swiper-container', {
    pagination: '.swiper-pagination',
    lazyLoading: true,
    lazyLoadingInPrevNext: true,
    autoplayDisableOnInteraction: false
});

lazyLoad();

//相关文章截取文字
baseFont = getComputedStyle(document.documentElement, null).fontSize;
baseFontSize = baseFont.substring(0, baseFont.length - 2);
function dot($container) {
    $container.find('.tag-title').dotdotdot({
        height: 2.2 * baseFontSize,
        wrap: 'letter'
    }).end().find('.tag-text').dotdotdot({
        height: 3.4 * baseFontSize,
        wrap: 'letter'
    });
}

//dotdotdot
dot($msgList);

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

/**
 * 生成资讯HTML
 * @param data Array 渲染数据
 * @return html String 返回的HTML
 */
function getMsgHtml(msgs) {
    var html = '',
        i;

    for (i = 0; i < msgs.length; i++) {
        html += Mustache.render(tpl, msgs[i]);
    }
    return html;
}

$nav.delegate('li', 'click', function () {
    var $el = $(this),
        type = $el.data('type');

    if ($el.hasClass('foucs')) {
        return;
    }


    $nav.find('li.focus').removeClass('focus');
    $el.addClass('focus');

    if (cached[type].msgs.length > 0 && ($el.index() !== 0 || reloadFirst)) {
        $msgList.html(getMsgHtml(cached[type].msgs));
        lazyLoad($msgList.find('img.lazy'));
        return;
    }

    $.ajax({
        type: 'GET',
        url: '/tags/get',
        data: {
            max_sort_id: type,
            page: 1,
            query: query,
            gender: gender,
            client_type: clientType
        }
    }).then(function (data) {
        var res;

        if (data.code === 200) {
            res = data.data.infos;
            $msgList.html(getMsgHtml(res));

            //
            if ($el.index() === 0) {

                //点击第一个项只需更新cachedMsg,不需要更新page
                reloadFirst = true;
                cached[type].msgs = res.concat(cached[type].msgs);
            } else {
                cached[type].page++;

                //cache
                cached[type].msgs = res;
            }

            //lazyload
            lazyLoad($msgList.find('img.lazy'));
        }
    });
});

//下拉加载数据
function loadMore() {
    var $focusNav = $nav.find('li.focus'),
        type = $focusNav.data('type'),
        num;

    //-30,for chrome计算差
    if (loading || cached[type].end || $(window).scrollTop() + winH < $(document).height() - loadH - 30) {
        return;
    }

    if ($focusNav.index() !== 0 || reloadFirst) {
        num = cached[type].msgs.length;
    } else {
        num = $msgList.children('.tag-content').length;
    }

    $loading.removeClass('hide');
    $noMore.addClass('hide');

    $.ajax({
        type: 'GET',
        url: '/tags/get',
        data: {
            max_sort_id: type,
            page: cached[type].page + 1,
            query: query,
            gender: gender,
            client_type: clientType
        }
    }).then(function (data) {
        var res, msgs, html,
            $newContent;

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

            msgs = res.infos;
            html = getMsgHtml(msgs);
            $msgList.append(html);

            //update cache
            cached[type].msgs = cached[type].msgs.concat(msgs);
            cached[type].page++;

            //lazyload & mlellipsis
            if (num === 0) {
                $newContent = $msgList.children('.tag-content');
            } else {
                $newContent = $msgList.children('.tag-content:gt(' + (num - 1) + ')');
            }
            lazyLoad($newContent.find('img.lazy'));
            dot($newContent);
        }
        loading = false;
    });
}

$(window).scroll(loadMore);

//资讯点赞和取消点赞
$('.msg-list').delegate('.like-btn', 'touchstart', function (e) {
    var $cur = $(e.currentTarget),
        $info = $cur.closest('.tag-content'),
        id = $info.data('id'),
        url,
        udid = $('.client-ip').val();

    $cur.toggleClass('like');

    if ($cur.hasClass('like')) {
        url = '/guang/info/praise';
    } else {
        url = '/guang/info/cancelpraise';
    }
    $.ajax({
        type: 'GET',
        url: url,
        data: {
            id: id,
            udid: udid
        }
    }).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);
            });
        }
    });
});