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

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

var $window = $(window),
    $starArticle = $('.star-article'),
    $headTab = $('.head-tab'),
    stopLoading = false,
    avatarSwiper = [],
    getIndexHtml;

/*
    $swiperView = $('.swiper-view'),
    $viewImg = $('.view-img'),
    $body = $('body'),
    imgs = [],
    allImgs = {};

var mySwiper;
*/

var avatarKey, bannerLen;

require('../common');

lazyLoad($('img.lazy'));
ellipsis.init();

$window.on('mousewheel', false);

// 限制标题字数
function txtLimit(dom, item1, item2) {
    var $title = dom.find(item1),
        $cont = dom.find(item2);

    $title[0].mlellipsis(2);
    $cont[0].mlellipsis(3);
}

// 设置默认头像
function setAvatar($userAvatar) {
    var myImage = new Image(),
        avatar;

    // 部分老用户没有头像,显示默认头像
    avatar = $userAvatar.data('avatar');
    if (avatar) {
        myImage.src = avatar;
    }
    myImage.onload = function() {
        $userAvatar.css('background-image', 'url(' + avatar + ')');
    };
}

function setIndexAction() {
    var starIScroll;
    var $loadingTip = $('.loading-tip');

    // 下拉刷新,上拉加载
    starIScroll = new PullRefresh('.star-wrap', {
        height: $(window).height() - $('#yoho-header').height() - $('.head-tab').height(),
        pullDown: function() {
            if (!stopLoading) {
                stopLoading = true;
                getIndexHtml();
            }
        }
    });

    starIScroll.iScroll.on('scrollStart', function() {
        // 下拉
        if (this.directionY === -1) {
            $headTab.slideDown();
            $loadingTip.slideDown();
        }
    });

    starIScroll.iScroll.on('scroll', function() {
        if (this.startY < -180) {
            console.log('111');
        }
    });

    starIScroll.iScroll.on('scrollEnd', function() {
        // 上滑
        if (this.directionY === 1) {
            $headTab.slideUp(1000);
        }
        $loadingTip.slideUp();
    });

    // 明星动态文章图片相关操作
    /*
    function articleImgAction(dom, key) {
        var $articeImgs = dom.find('.artice-imgs'),
            $li = $articeImgs.find('li'),
            imgLen = $articeImgs.find('img').length,
            addFlagDom = $li.eq(2);

        var i;

        imgs = [];

        $li.each(function() {
            imgs.push($(this).find('img').attr('src'));
        });

        allImgs[key] = imgs;

        $li.on('click', function() {
            for (i = 0; i < imgLen; i++) {
                $swiperView.find('ul').append('<li class="swiper-slide">' +
                '<img class="swiper-lazy" data-src="' + allImgs[key][i] + '">' +
                '<div class="swiper-lazy-preloader"></div></li>');
            }
            setTimeout(function() {
                mySwiper = new Swiper('.swiper-view', {
                    lazyLoading: true,
                    lazyLoadingInPrevNext: true,
                    slideElement: 'li'
                });

                $('.swiper-view li').on('click', function(e) {
                    if (e.target.nodeName === 'IMG') {
                        return;
                    }
                    $viewImg.hide();
                    $body.css({
                        overflow: 'auto'
                    });
                    $viewImg.find('li').remove();
                    mySwiper.destroy(false);
                });
            }, 100);

            $viewImg.show();

            $body.css({
                overflow: 'hidden'
            });
        });

        if (imgLen > 3 && addFlagDom.find('.img-size').length < 1) {
            addFlagDom.append('<div class="img-size"><i class="pic-icon"></i>' + imgLen + '</div>');
        }
    }
    */

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

    // 明星头像 swiper 初始化
    // if (bannerLen > 1) {
    //     $('.avatar-swiper').each(function(key, item) {
    //         avatarSwiper[key] = new Swiper('.avatar-' + key, {
    //             loop: true,
    //             // loopedSlides: bannerLen,
    //             initialSlide: 2,
    //             centeredSlides: true,
    //             slidesPerView: 'auto',
    //             spaceBetween: 10,
    //             slidesOffsetBefore: '-' + $(item).find('li').not('.swiper-slide-visible').width() / 2,
    //             watchSlidesProgress: true,
    //             watchSlidesVisibility: true,
    //             observer: true,
    //             observeParents: true
    //         });
    //     });
    // }

    if (bannerLen > 1) {
        avatarSwiper[0] = new Swiper('.avatar-0', {
            loop: true,

            // loopedSlides: bannerLen,
            initialSlide: 2,
            centeredSlides: true,
            slidesPerView: 'auto',
            spaceBetween: 10,
            slidesOffsetBefore: '-' + $('.avatar-0').find('li').not('.swiper-slide-visible').width() / 2,
            watchSlidesProgress: true,
            watchSlidesVisibility: true,
            observer: true,
            observeParents: true
        });
    }

    // 明星动态头像左右滑动
    if ($('.article-avatar-swiper').find('li').length > 1) {
        new Swiper('.article-avatar-swiper', {
            initialSlide: 0,
            lazyLoading: true,
            lazyLoadingInPrevNext: true,
            loop: true,
            autoplay: 5000
        });
    }


    if ($('.star-info').find('li').length > 0) {
        $starArticle.each(function(key, item) {
            txtLimit($(item), '.article-title', 'p');

            // articleImgAction($(item), key);
        });
    }


    // 明星头像点击居中显示或跳转
    $('.avatar-swiper li').on('click', function() {
        if ($(this).hasClass('swiper-slide-active')) {
            location.href = $(this).find('img').data('url');
        } else {
            avatarKey = $(this).index();
            avatarSwiper[0].slideTo(avatarKey, 1000, false);
        }
    });


    $('.rank-avatar').each(function(key, item) {
        if ($(item).attr('data-avatar') !== '') {
            setAvatar($(item));
        }
    });

}

getIndexHtml = function() {
    loading.showLoadingMask();
    $.ajax({
        url: '/guang/star/getIndexHtml',
        dataType: 'html',
        success: function(data) {
            stopLoading = false;

            console.log(data);

            if (!data) {
                stopLoading = true;
                tip.show('没有更多内容了');
            }

            $('.star-main').html(data);

            // 限制标题字数
            $('.cont-area').each(function() {
                txtLimit($(this), '.title', '.cont-txt');
            });

            loading.hideLoadingMask();
            lazyLoad($('img.lazy'));
            bannerLen = $('.avatar-0 .swiper-slide').length;

            setTimeout(function() {
                setIndexAction();
            }, 100);

        },
        error: function() {
            tip.show('网络断开连接了~');
        }
    });
};

getIndexHtml();