star-classroom.js 6.27 KB
/**
 * 星潮教室-首页
 * @author: wsl<shuiling.wang@yoho.cn>
 * @date: 2016/4/11
 */

var $ = require('jquery'),
    Swiper = require('yoho.iswiper'),
    calendar = require('../guang/calendar'),
    lazyLoad = require('yoho.lazyload'),
    tip = require('../plugin/tip');

var bannerSwiper, collocationSwiper;

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

$('body').addClass('star-class-body');

// 日历弹出框显示及粉丝排行榜数据组装
function intimacyData(data) {
    var $ul = $('.fan-charts-cont'),
        $myIntimacy = $('.my-intimacy'),
        $increased = $('.increased'),
        signDay = data.signDay.split(','),
        html = '',
        style = '',
        bgStyle = '',
        nowDate = new Date(),
        nowYear = nowDate.getFullYear(),
        nowMonth = nowDate.getMonth(),
        nowDaysNub = calendar.calculateMonthDays(nowMonth, nowYear);

    var i, j;

    if (signDay.length > 0) {
        for (i = 0; i < nowDaysNub; i++) {
            for (j = 0; j < signDay.length; j++) {
                if (i === parseInt(signDay[j])) {
                    $('.now-days').eq(i - 1).addClass('signItem');
                }
            }
        }
    }

    for (i = 0; i < data.fanCharts.length; i++) {
        if (i === 0) {
            style = 'font-bold';
        } else {
            style = '';
        }

        if (data.fanCharts[i].img !== '') {
            bgStyle = 'background-image:url(' + data.fanCharts[i].img + ')';
        } else {
            bgStyle = '';
        }

        html += '<li>' +
                '<i class="rank-ico">' + data.fanCharts[i].num + '</i>' +
                '<span data-avatar="' + data.fanCharts[i].img + '" style="' + bgStyle +
                '" class="rank-avatar"></span>' +
                '<span class="fans-name">' + data.fanCharts[i].name + '</span>' +
                '<div class="fans-intimacy">亲密度<span class="' + style + '">' +
                data.fanCharts[i].intimacyNum + '</span></div>' +
                '</li>';
    }

    $ul.html(html);

    $myIntimacy.find('span').html(data.todayIntimacy);
    $increased.find('span').html(data.todayIntimacy);

    if (data.intimacyNum === 0) {
        $('.my-intimacy').hide();
        $('.increased').show();
    } else {
        $('.my-intimacy').show();
        $('.increased').hide();
    }

    $('.pop-intimacy').show();
    $('.classroom-mask').show();
    $('body').css({
        overflow: 'hidden'
    });
}

//当前字符串字节数统计
function bytesCountAction(code, bytesCount) {
    if (/^[\u0000-\u00ff]$/.test(code)) {
        bytesCount += 1;
    } else {
        bytesCount += 2;
    }

    return bytesCount;
}

// 亲密度用户名字字数限制
function limitUsername() {
    var $name = $('.home-floor-sign').find('.user-name'),
        nameVal = $name.html(),
        nameSize = nameVal.length,
        bytesCount = 0,
        bcount = 0,
        newName = '';

    var i, code;

    for (i = 0; i < nameSize; i++) {
        code = nameVal.charAt(i);
        bytesCount = bytesCountAction(code, bytesCount);

        if (bytesCount < 5) {
            newName += code;
        }
    }

    if (bytesCount > 8) {
        newName += '..';
    }

    for (i = 0; i < nameSize; i++) {
        code = nameVal.charAt(i);
        bcount = bytesCountAction(code, bcount);

        if (bcount > bytesCount - 2) {
            newName += code;
        }
    }

    $name.html(newName);
}

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'
    });
}

if ($('.collocation-swiper').find('li').length > 1) {
    collocationSwiper = new Swiper('.collocation-swiper', {
        lazyLoading: true,
        lazyLoadingInPrevNext: true,
        lazyLoadingOnTransitionStart: true,
        grabCursor: true,
        slidesPerView: 'auto',
        slideElement: 'li',
        watchSlidesVisibility: true
    });
}

// 星鲜事显示点赞人数的区域
if ($('.artice-zan').find('li').length > 0) {
    $('.zan-more').show();
}

if ($('.home-floor-sign').length > 0) {
    limitUsername();
}

// 星鲜事点赞事件
$(document).on('click', '.like-ico', function() {
    var $that = $(this),
        addString = '';

    $.ajax({
        type: 'POST',
        url: '/guang/starclass/setPraise',
        data: {
            articleId: $that.parents('li').attr('articleId')
        },
        success: function(data) {
            var code = data.code;

            if (code === 200) {
                if ($that.hasClass('like')) {
                    $that.removeClass('like');
                } else {
                    $that.addClass('like');
                }

                if (data.num > 99) {
                    addString = '+';
                } else {
                    addString = '';
                }

                $that.parent().find('.zan-more').html(data.num + addString);
            }
        },
        error: function() {
            tip.show('网络断开连接了~');
        }
    });
});

// 增加亲密度请求
$('.add-intimacy').on('click', function() {
    $.ajax({
        type: 'GET',
        url: '/guang/starclass/sign',
        success: function(data) {
            var code = data.code;

            if (code === 200) {
                intimacyData(data.data);
            }

            if (code === 201) {
                window.location = data.data;
            }
        },
        error: function() {
            tip.show('网络断开连接了~');
        }
    });
});

// 关闭日历弹出窗事件
$('.pop-intimacy .pop-close, .classroom-mask').on('click', function() {
    $('.pop-intimacy').hide();
    $('.classroom-mask').hide();

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

function setAvatar() {
    var $userAvatar = $('.user-head'),
        myImage = new Image(),
        avatar;

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

if ($('.user-head').attr('data-avatar') !== '') {
    setAvatar();
}