home.js 7.39 KB
/**
 *  首页
 * @author: liangzhifeng<zhifeng.liang@yoho.cn>
 * @date: 2015/10/12
 */
var $ = require('jquery'),
    Swiper = require('yoho.iswiper'),
    lazyLoad = require('yoho.lazyload'),
    $mobileWrap = $('.mobile-wrap'),
    $overlay = $('.overlay'),
    $sideNav = $('.side-nav'),
    $subNav = $('.sub-nav'),
    bannerSwiper,
    recommendSwiper,
    hotBrandsSwiper,
    trendTopicSwiper,
    goodsSwiper;

var start = 0,
    swiperClass,
    $logotrans = $('.home-header .logo'),
    openSideNav = false,
    isen = true;

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

function preventDefault(e) {
    e = e || window.event;
    e.preventDefault && e.preventDefault();
    e.returnValue = false;
}

function stopPropagation(e){
    e = e || window.event;
    e.stopPropagation && e.stopPropagation();
    e.cancelBubble = false;
}

function innerScroll(e){
    // 阻止冒泡到document
    // document上已经preventDefault
    stopPropagation(e);

    var delta = e.wheelDelta || e.detail || 0;
    var box = $(this).get(0);

    if($(box).height() + box.scrollTop >= box.scrollHeight){
        if(delta < 0) {
            preventDefault(e);
            return false;
        }
    }
    if(box.scrollTop === 0){
        if(delta > 0) {
            preventDefault(e);
            return false;
        }
    }
    // 会阻止原生滚动
    // return false;
}

var disableScroll = function(){
    $(document).on('mousewheel', preventDefault);
    $(document).on('touchmove', preventDefault);
};

var enableScroll = function(){
    $(document).off('mousewheel', preventDefault);
    $(document).off('touchmove', preventDefault);
};

// bind
/**$('#closePopup').on('click', function(e){
    $('#popupLayer').hide();
    $('#bgMask').hide();
    enableScroll();
});**/

// 内部可滚
$sideNav.on('mousewheel', innerScroll);
// 外部禁用
disableScroll();


// 移动端touch重写
var startX, startY;
$sideNav.on('touchstart', function(e){
    startX = e.changedTouches[0].pageX;
    startY = e.changedTouches[0].pageY;
});

// 仿innerScroll方法
$sideNav.on('touchmove', function(e){
    e.stopPropagation();

    var deltaX = e.changedTouches[0].pageX - startX;
    var deltaY = e.changedTouches[0].pageY - startY;

    // 只能纵向滚
    if(Math.abs(deltaY) < Math.abs(deltaX)){
        e.preventDefault();
        return false;
    }

    var box = $(this).get(0);

    if($(box).height() + box.scrollTop >= box.scrollHeight){
        if(deltaY < 0) {
            e.preventDefault();
            return false;
        }
    }
    if(box.scrollTop === 0){
        if(deltaY > 0) {
            e.preventDefault();
            return false;
        }
    }
    // 会阻止原生滚动
    // return false;
});

$('.nav-btn').on('touchstart', function(event) {
    $sideNav.css('pointer-events', 'none');
    $mobileWrap.addClass('menu-open');
    $overlay.show().css('opacity', 0.3);
    $sideNav.addClass('on');
    event.preventDefault();
    event.stopPropagation();
    openSideNav = true;

    //设置boy高宽,页面不能上下滑动
    $('body').css({
        height: $(window).height(),
        overflow: 'hidden'
    });

    setTimeout(function() {
        $sideNav.css('pointer-events', 'auto');
    }, 400);

    return false;
});

function hideSideBar() {
    openSideNav = false;
    if ($mobileWrap.hasClass('menu-open')) {
        $mobileWrap.removeClass('menu-open');
        $('.overlay').hide();
        $('.sub-nav').removeClass('show');
        $sideNav.removeClass('on');
        $('body').css({
            height: 'auto',
            overflow: 'auto'
        });
        enableScroll();
    }
}

$('.overlay').on('touchstart', function(e) {
    hideSideBar();
    return false;
});

//点击一级导航,弹出二级导航
$sideNav.on('touchend', 'li', function(e) {
    if ($(this).find('.sub-nav').size() > 0) {
        $('.sub-nav').removeClass('show');
        $(this).find('.sub-nav').addClass('show');
    }

    if (e.target.pathname === location.pathname) {
        hideSideBar();
        return false;
    }
});

//返回一级导航,收起二级导航
$subNav.each(function() {
    $(this).find('li').eq(0).on('touchstart', function() {
        $('.sub-nav').removeClass('show');
        return false;
    });
}).on('touchstart', function(e) {
    if (e.currentTarget !== e.target) {
        $subNav.find('li').removeClass('current');
    }
});

// 侧边栏点击背景色变化
function highlight($elem) {
    $elem.find('li').on('touchstart', function() {
        $(this).addClass('highlight');
    }).on('touchend touchcancel', function() {
        $(this).removeClass('highlight');
    });
}
highlight($sideNav);
highlight($subNav);


//头部banner轮播
if ($('.banner-swiper').find('li').size() > 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'
    });
}

//热门品牌滑动
hotBrandsSwiper = new Swiper('.brands-swiper', {
    grabCursor: true,
    slidesPerView: 'auto',
    wrapperClass: 'brands-list',
    slideElement: 'li'
});

//推荐搭配滑动
recommendSwiper = new Swiper('.recommend-swiper', {
    grabCursor: true,
    slidesPerView: 'auto',
    wrapperClass: 'recommend-list',
    slideElement: 'li'
});

//潮品话题轮播
if ($('.trend-topic-swiper').find('li').size() > 1) {
    trendTopicSwiper = new Swiper('.trend-topic-swiper', {
        loop: true,
        autoplay: 3000,
        autoplayDisableOnInteraction: false,
        paginationClickable: true,
        slideElement: 'li',
        pagination: '.trend-topic-content .pagination-inner'
    });
}

//潮流上装/经典裤装等轮播
$('.category-swiper').each(function(i, index) {
    swiperClass = 'category-swiper' + i;
    $(this).addClass(swiperClass);
    if ($('.' + swiperClass).find('.swiper-slide').size() > 1) {
        goodsSwiper = new Swiper('.' + swiperClass, {
            loop: true,
            autoplay: 3000,
            autoplayDisableOnInteraction: false,
            paginationClickable: true,
            slideElement: 'li',
            pagination: '.' + swiperClass + ' .pagination-inner'
        });
    }
});

//logo动画
function tsAnimate() {
    start = start + 10;
    $logotrans.css({
        transform: 'rotateX(' + start + 'deg)',
        '-webkit-transform': 'rotateX(' + start + 'deg)',
        '-moz-transform': 'rotateX(' + start + 'deg)'
    });
    if (start / 90 % 2 === 1) {
        if (isen) {
            $logotrans.addClass('animate');
            isen = false;
        } else {
            $logotrans.removeClass('animate');
            isen = true;
        }
    }
    if (start / 90 % 2 === 0 && start % 360 !== 0) {
        window.setTimeout(tsAnimate, 3000);
    } else {
        if (start % 360 === 0) {
            window.setTimeout(tsAnimate, 60 * 1000);
        } else {
            window.requestAnimationFrame(tsAnimate);
        }
    }
}

setTimeout(tsAnimate, 3000);

$('.home-header .iconfont').on('touchstart', function() {
    $(this).addClass('highlight');
}).on('touchend touchcancel', function() {
    $(this).removeClass('highlight');
});

// 底部留出tab 的高度
window.reMarginFooter('.footer-tab');

//set cookie
exports.set = function(c) {
    window.setCookie('_Channel', c, {
        expires: 365,
        domain: '.m.yohobuy.com'
    });
};

require('./maybe-like')();