filter.js 3.86 KB
/**
 * 筛选JS
 * 暴露三个接口:注册回调、显示filter、隐藏filter
 * @author: xuqi<qi.xu@yoho.cn>
 * @date: 2015/10/19
 */

var $ = require('yoho-jquery'),
    Hammer = require('yoho-hammer');

var $filter;

var fCbFn, hCbFn; // 筛选和关闭的回调

// 隐藏筛选界面
function hideFilter() {
    $filter.addClass('hide');
}

// 显示筛选界面
function showFilter() {
    $filter.removeClass('hide');
}

// 一级菜单点击时背景高亮
function highlightMainItem() {
    var $mainItem = $('.filter-body .classify');

    $mainItem.on('touchstart', '.shower', function() {
        $mainItem.removeClass('highlight');
        $(this).addClass('highlight');
    }).on('touchend touchcancel', '.shower', function() {
        $(this).removeClass('highlight');
    });
}

// 子菜单点击时背景高亮
function highlightSubItem() {
    var $subItem = $('.filter-body .sub-item');

    $subItem.on('touchstart', function() {
        $subItem.removeClass('highlight');
        $(this).addClass('highlight');
    }).on('touchend touchcancel', function() {
        $(this).removeClass('highlight');
    });
}

// 主筛选项Tap事件句柄
function classifyTapEvt($this) {
    if ($this.hasClass('active')) {
        return;
    }

    $this.siblings('.active').removeClass('active');

    $this.addClass('active');
}

// 子筛选项选中处理
function setSubClassify($this) {
    var $sub = $this.closest('.sub-classify');

    var $shower = $sub.siblings('.shower');

    var html, shower;

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

    $sub.children('.chosed').removeClass('chosed');
    $this.addClass('chosed');

    html = $.trim($this.html());

    shower = $.trim($shower.html());

    $shower.html(
        shower.substring(0, shower.indexOf('</span>') + 7) + // 拆分出shower的title
        html.substring(0, html.indexOf('<i')) // 拆分选中筛选值
    );

    if ($this.index() === 0) {
        $shower.addClass('default');
    } else {
        $shower.removeClass('default');
    }

    return $sub;
}

// 子筛选项Tap句柄
function subClassifyTapEvt($this) {
    var id = $this.data('id');

    var $sub;

    $sub = setSubClassify($this);

    if (fCbFn) {
        fCbFn({
            type: $sub.data('type'),
            id: id
        });
    }

    if (hCbFn) {
        hCbFn();
    }

    hideFilter();
}

// 初始化筛选
function initFilter(opt) {
    var filterHammer;

    // 注册回调
    fCbFn = opt.fCbFn;
    hCbFn = opt.hCbFn;

    // 是否忽略选中状态
    window.missStatus = opt.missStatus;

    highlightMainItem();
    highlightSubItem();

    $filter = $('.filter-mask');

    filterHammer = new Hammer($filter[0]);
    filterHammer.on('tap', function(e) {
        var $this = $(e.target),
            $cur;

        e.preventDefault();// 防止透点
        e.stopPropagation();

        if ($this.closest('.filter-body').length > 0) {
            $cur = $this.closest('.sub-item');
            if ($cur.length > 0) {

                // tap subclassify
                $cur = $this.closest('li');

                subClassifyTapEvt($cur);
            } else {

                // tap classify
                $cur = $this.closest('.classify-item');

                e.srcEvent.stopPropagation();

                classifyTapEvt($cur);
            }
        } else {
            hideFilter();

            if (hCbFn) {
                hCbFn();
            }
        }
    });

}

// 重置筛选面板
function resetFilter() {
    if (typeof $filter === 'undefined') {
        return;
    }

    // 重置子筛选项
    $('.sub-classify').each(function() {
        setSubClassify($(this).children(':first-child'));
    });

    // 重置主筛选项
    classifyTapEvt($('.classify > :first-child'));
}

exports.initFilter = initFilter;

exports.showFilter = showFilter;

exports.hideFilter = hideFilter;

exports.resetFilter = resetFilter;