/** * 筛选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; // 筛选和关闭的回调 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'); } if (hCbFn) { hCbFn(); } 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, filtering: true }); } if (hCbFn) { hCbFn(); } 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; // 这行不能注释,iphone下会出现穿透 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() { var lastY = 0, y = 0; var $slider = $(this); $(this).wrap('<div class=\'sub-classify-farther\' data-type=\'' + $(this).data('type') + '\'></div>'); // $(this).removeClass("sub-classify"); $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(); var translate; y = y + deltaY; if (y < limit * -1) { y = limit * -1; } if (y > 0) { y = 0; } 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() {}); }); } } // 重置筛选面板 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;