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

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

var $window = $(window),
    $starArticle = $('.star-article'),
    $headTab = $('.head-tab'),
    bannerLen = $('.avatar-swiper .swiper-slide').length;

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

var mySwiper;
*/

var avatarSwiper, avatarKey;

require('../common');

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

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

$(function() {
    var starIScroll;

    // 下拉刷新,上拉加载
    starIScroll = new PullRefresh('.star-wrap', {
        height: $(window).height() - $('#yoho-header').height() - $('.head-tab').height(),
        pullDown: function() {
            location.reload();
        },
        pullUp: function() {
            // $headTab.slideUp();
        }
    });

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

    // starIScroll.iScroll.on('scroll', function() {
    //     var scale = 1;
    //
    //     if (this.y < 0 && this.startY > -40) {
    //         console.log(headTabHeight + this.startY);
    //         scale = 2 / headTabHeight;
    //     }
    //     $headTab.css({
    //         transfrom: 'scale(' + scale + ')'
    //     });
    // });

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

        // 上滑
        if (this.directionY === 1) {
            $headTab.addClass('hide-tab');
        } else {
            $headTab.removeClass('hide-tab');
        }
    });
});

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

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

// 限制标题字数
function txtLimit(dom) {
    var $title = dom.find('.article-title'),
        $cont = dom.find('p');

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

// 明星动态文章图片相关操作
/*
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 (bannerLen > 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 ($('.avatar-swiper .swiper-slide').length > 1) {
    avatarSwiper = new Swiper('.avatar-swiper', {
        loop: true,
        loopedSlides: bannerLen,
        initialSlide: 3,
        centeredSlides: true,
        slidesPerView: 'auto',
        slidesOffsetBefore: '-' + $('.avatar-swiper').find('li').not('.swiper-slide-visible').width() / 2,
        watchSlidesProgress: true,
        watchSlidesVisibility: 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));

        // 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.slideTo(avatarKey, 1000, false);
    }
});


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