cate-all.js 2.4 KB
/**
 * 分类
 * @author: xuqi<qi.xu@yoho.cn>
 * @date: 2015/10/14
 */

let $ = require('yoho-jquery');
let FastClick = require('yoho-fastclick');

let $nav = $('.category-nav'),
    $categoryContainer = $('.category-container'),
    $contents = $categoryContainer.children('.content'),
    $subLevelItem = $categoryContainer.find('.sub-level li');


$(function() {
    FastClick.attach(document.body);
});

function resetHeight() {
    let h = document.body.scrollHeight - $nav.outerHeight();

    $contents.height(h);
}
resetHeight();

$nav.on('contextmenu', function() {
    return false;
});
$('.category-container').on('contextmenu', function() {
    return false;
});

$nav.on('touchend touchcancel', function(e) {
    let $this = $(e.target).closest('li'),
        selector = '.' + $this.data('channel');

    if ($this.hasClass('focus')) {
        return;
    }

    $nav.find('li.focus').removeClass('focus');
    $this.addClass('focus');

    $contents.addClass('hide');
    $contents.filter(selector).removeClass('hide');

    $('html,body').animate({
        scrollTop: 0
    }, 100);
});

$categoryContainer.on('click', function(e) {
    let $this = $(e.target),
        $subLevel,
        $cur, index;

    $cur = $this.closest('.p-level-item');

    // 第一次单击右则空白处,出现冒泡
    if ($(e.target).closest('.sub-level').length <= 0) {
        e.preventDefault();
    }

    if ($this[0] && $this[0].tagName === 'LI' && $this.find('a').attr('href')) {
        location.href = $this.find('a').attr('href');
    }

    if ($this[0] && $this[0].tagName === 'A' && $this.attr('href')) {
        location.href = $this.attr('href');
    }

    if ($cur.length > 0) {
        index = $cur.index();
        $subLevel = $this.closest('.content').find('.sub-level');

        if ($this.hasClass('focus')) {
            return;
        }

        $this.closest('.primary-level').children('.focus').removeClass('focus');
        $this.addClass('focus');

        $('.trilanglefont').not('.hide').addClass('hide');
        $this.children('.trilanglefont').removeClass('hide');

        $subLevel.not('.hide').addClass('hide');
        $subLevel.eq(index).removeClass('hide');
    }
});

$categoryContainer.find('.sub-level').on('touchstart', 'li', function() {
    $subLevelItem.removeClass('highlight');
    $(this).addClass('highlight');
}).on('touchend touchcancel', 'li', function() {
    $(this).removeClass('highlight');
});