star.page.js 5.59 KB
/**
 * 星潮教室首页
 * @author: wsl<shuiling.wang@yoho.cn>
 * @date: 2016/5/31
 */

var $ = require('yoho-jquery'),
    Swiper = require('yoho-swiper'),
    loading = require('../plugin/loading'),
    PullRefresh = require('../plugin/pull-refresh');

var $window = $(window),
    stopLoading = false,
    $mainContent = $('.main-content'),
    $loadingTip = $('.loading-tip'),
    u = navigator.userAgent,
    isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);

var avatarKey, bannerLen, res, avatarSwiper, getIndexHtml, bannerSwiper,
    $avatarWrap, starIScroll;

var swiperNum = $('.avatar-wrap .swiper-slide').width() / 2,
    topBanner = $('.banner-top');

if ($('.star-main').css('height') === '0px') {
    $('.star-main').css('height', $window.height() - $('.head-tab').height());
}

if ($window.width() === 375 && isiOS) {
    swiperNum = 32;
}

require('../common');
require('yoho-jquery-lazyload');

$window.on('mousewheel', false);
$('#yoho-header, .head-tab').on('touchmove', function() {
    return false;
});

// 明星头像点击居中显示或跳转
function bindAvatar(dom) {
    avatarKey = dom.index();

    if (!dom.hasClass('swiper-slide-active')) {

        return false;
    }
}

function setIndexAction() {
    // 明星头像 swiper 初始化
    if (bannerLen > 1) {
        avatarSwiper = new Swiper($avatarWrap.find('.avatar-swiper')[0], {
            lazyLoading: true,
            lazyLoadingInPrevNextAmount: 3,

            // loop: true,
            initialSlide: 2,
            centeredSlides: true,
            slidesPerView: 'auto',
            loopedSlides: bannerLen,
            spaceBetween: 10,
            slidesOffsetBefore: -swiperNum,
            watchSlidesProgress: true,
            watchSlidesVisibility: true,
            onInit: function() {
                $avatarWrap.on('click', 'li', function() {
                    res = bindAvatar($(this));
                    return res;
                });
            }
        });
    }

    // banner swiper 初始化
    if ($('.banner-swiper').find('li').length > 1) {
        bannerSwiper = new Swiper('.banner-swiper', {
            lazyLoading: true,
            lazyLoadingInPrevNext: true,
            loop: true,
            autoplay: 3000,
            autoplayDisableOnInteraction: false,
            paginationClickable: true,
            slideElement: 'li',
            pagination: '.banner-top .pagination-inner'
        });
    }
}

function initAction() {
    $avatarWrap = $('.avatar-wrap');
    bannerLen = $('.avatar-wrap').find('.swiper-slide').length;

    $loadingTip.before($('.avatar-swiper').clone().addClass('avatar-clone').hide());

    $('img.lazy').lazyload({
        effect: 'fadeIn'
    });

    setIndexAction();
}

initAction();

// 首页数据请求
getIndexHtml = function() {
    loading.showLoadingMask();
    $.ajax({
        url: '/guang/star/getIndexHtml',
        dataType: 'html',
        timeout: 5000
    })
    .done(function(data) {
        if (data) {
            $mainContent.html(data);

            initAction();
        }
    })
    .always(function() {
        stopLoading = false;
        loading.hideLoadingMask();
    });
};

// 下拉刷新,上拉加载
starIScroll = new PullRefresh('.star-main', {
    pullDown: function() {
        if (!stopLoading) {
            stopLoading = true;
            getIndexHtml();
        }
    }
});

starIScroll.iScroll.on('scrollStart', function() {
    bannerSwiper && bannerSwiper.stopAutoplay();
});

starIScroll.iScroll.on('scroll', function() {
    $window.trigger('scroll');
});

starIScroll.iScroll.on('scrollEnd', function() {
    if (-this.y <= topBanner.height()) {
        bannerSwiper && bannerSwiper.startAutoplay();
    }
});

window.setCookie('guangStarUid', window.queryString.uid);

// app埋点
var C_ID = window._ChannelVary[window.cookie('_Channel')];

// 点击星潮教室页面中的banner
$('.banner-top').find('li').on('click', function() {
    if (!window._yas || !window._yas.sendAppLogs) {
        return;
    }
    window._yas.sendAppLogs({
        appop: 'YB_H5_STROLL_STAR_BANNER_C',
        param: JSON.stringify({
            C_ID: C_ID,
            TAB_INDEX: 0,
            TAB_NAME: '全部',
            POS_ID: 2, // 轮播图
            TO_URL: $(this).find('a')[0].href
        })
    }, true);
});

$('.swiper-slide-active').on('click', function() {
    if (!window._yas || !window._yas.sendAppLogs) {
        return;
    }
    window._yas.sendAppLogs({
        appop: 'YB_H5_STROLL_STAR_BANNER_C',
        param: JSON.stringify({
            C_ID: C_ID,
            TAB_INDEX: 0,
            TAB_NAME: '全部',
            POS_ID: 2, // 轮播图
            TO_URL: $(this).find('a')[0].href
        })
    }, true);
});

// 点击星潮教室页面中的文章时
$('.star-info').on('click', function(e) {
    if (!window._yas || !window._yas.sendAppLogs) {
        return;
    }

    var $this = $(e.target),
        $a = $this.closest('.star-article');

    if ($a.length > 0) {
        var $li = $this.parents('li');

        window._yas.sendAppLogs({
            appop: 'YB_H5_STROLL_STAR_FLR_C',
            param: JSON.stringify({
                C_ID: C_ID,
                TAB_INDEX: 0,
                TAB_NAME: '全部',
                CONTENT_INDEX: $li.index() + 1,
                CONTENT_ID: $li.data('id')
            })
        }, true);
    }
});

setTimeout(function() {
    if (!window._yas || !window._yas.sendAppLogs) {
        return;
    }
    window._yas.sendAppLogs({
        appop: 'YB_H5_STROLL_STAR_TAB_C',
        param: JSON.stringify({
            C_ID: C_ID,
            TAB_INDEX: 0,
            TAB_NAME: '全部'
        })
    }, true);
}, 500);