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

var $ = require('jquery'),
    IScroll = require('iscroll/iscroll-probe')
    Hammer = require('yoho.hammer');

var $filter;

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

var missStatus; //是否忽略选中状态

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

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

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

    $mainItem.on('touchstart', '.shower', function() {
        var bpIdData = $(this).attr('data-bp-id') || '';

        $mainItem.removeClass('highlight');
        $(this).addClass('highlight');

        $(document).trigger('shouldSendBpData', [bpIdData]);
    }).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
        });
    }

    hideFilter();
}

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

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

    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();//防止透点

        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();
            }
        }
    });
    if(opt.isScroll){
        $("ul.sub-classify").each(function(){

            $(this).wrap("<div class='sub-classify-farther' data-type='" + $(this).data("type") + "'></div>");
            // $(this).removeClass("sub-classify");

            var lastY=0,y=0;
            var $slider=$(this);

            $slider.on('touchstart', function(e) {
              lastY = e.originalEvent.touches[0].pageY;
            });
            $slider.on('touchmove', function(e) {
              var curY = e.originalEvent.touches[0].pageY;
              var deltaY = curY - lastY;
              var height = $(this)[0].scrollHeight;
              var limit = height - $(this).parent().height();
              y = y + deltaY;
              if (y < limit * -1)
                y = limit * -1;
              if (y > 0)
                y = 0;
              var translate = 'translate3d(0,' + y + 'px,0)';
              $(this).css({
                '-moz-transform': translate,
                '-ms-transform': translate,
                'transform': translate,
                '-webkit-transform': translate,
              });
              lastY = curY;
            });
            $slider.on('touchend', function(e) {});
        });
    }
    

}

//重置筛选面板
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;