Authored by 郭成尧

'filter-js'

@@ -10,14 +10,16 @@ var $ = require('yoho-jquery'), @@ -10,14 +10,16 @@ var $ = require('yoho-jquery'),
10 10
11 var $filter; 11 var $filter;
12 12
13 -var fCbFn, hCbFn; // 筛选和关闭的回调 13 +var fCbFn, hCbFn; //筛选和关闭的回调
14 14
15 -// 隐藏筛选界面 15 +var missStatus; //是否忽略选中状态
  16 +
  17 +//隐藏筛选界面
16 function hideFilter() { 18 function hideFilter() {
17 $filter.addClass('hide'); 19 $filter.addClass('hide');
18 } 20 }
19 21
20 -// 显示筛选界面 22 +//显示筛选界面
21 function showFilter() { 23 function showFilter() {
22 $filter.removeClass('hide'); 24 $filter.removeClass('hide');
23 } 25 }
@@ -27,8 +29,12 @@ function highlightMainItem() { @@ -27,8 +29,12 @@ function highlightMainItem() {
27 var $mainItem = $('.filter-body .classify'); 29 var $mainItem = $('.filter-body .classify');
28 30
29 $mainItem.on('touchstart', '.shower', function() { 31 $mainItem.on('touchstart', '.shower', function() {
  32 + var bpIdData = $(this).attr('data-bp-id') || '';
  33 +
30 $mainItem.removeClass('highlight'); 34 $mainItem.removeClass('highlight');
31 $(this).addClass('highlight'); 35 $(this).addClass('highlight');
  36 +
  37 + $(document).trigger('shouldSendBpData', [bpIdData]);
32 }).on('touchend touchcancel', '.shower', function() { 38 }).on('touchend touchcancel', '.shower', function() {
33 $(this).removeClass('highlight'); 39 $(this).removeClass('highlight');
34 }); 40 });
@@ -46,7 +52,7 @@ function highlightSubItem() { @@ -46,7 +52,7 @@ function highlightSubItem() {
46 }); 52 });
47 } 53 }
48 54
49 -// 主筛选项Tap事件句柄 55 +//主筛选项Tap事件句柄
50 function classifyTapEvt($this) { 56 function classifyTapEvt($this) {
51 if ($this.hasClass('active')) { 57 if ($this.hasClass('active')) {
52 return; 58 return;
@@ -55,9 +61,10 @@ function classifyTapEvt($this) { @@ -55,9 +61,10 @@ function classifyTapEvt($this) {
55 $this.siblings('.active').removeClass('active'); 61 $this.siblings('.active').removeClass('active');
56 62
57 $this.addClass('active'); 63 $this.addClass('active');
  64 +
58 } 65 }
59 66
60 -// 子筛选项选中处理 67 +//子筛选项选中处理
61 function setSubClassify($this) { 68 function setSubClassify($this) {
62 var $sub = $this.closest('.sub-classify'); 69 var $sub = $this.closest('.sub-classify');
63 70
@@ -77,8 +84,8 @@ function setSubClassify($this) { @@ -77,8 +84,8 @@ function setSubClassify($this) {
77 shower = $.trim($shower.html()); 84 shower = $.trim($shower.html());
78 85
79 $shower.html( 86 $shower.html(
80 - shower.substring(0, shower.indexOf('</span>') + 7) + // 拆分出shower的title  
81 - html.substring(0, html.indexOf('<i')) // 拆分选中筛选值 87 + shower.substring(0, shower.indexOf('</span>') + 7) + //拆分出shower的title
  88 + html.substring(0, html.indexOf('<i')) //拆分选中筛选值
82 ); 89 );
83 90
84 if ($this.index() === 0) { 91 if ($this.index() === 0) {
@@ -90,7 +97,7 @@ function setSubClassify($this) { @@ -90,7 +97,7 @@ function setSubClassify($this) {
90 return $sub; 97 return $sub;
91 } 98 }
92 99
93 -// 子筛选项Tap句柄 100 +//子筛选项Tap句柄
94 function subClassifyTapEvt($this) { 101 function subClassifyTapEvt($this) {
95 var id = $this.data('id'); 102 var id = $this.data('id');
96 103
@@ -105,52 +112,41 @@ function subClassifyTapEvt($this) { @@ -105,52 +112,41 @@ function subClassifyTapEvt($this) {
105 }); 112 });
106 } 113 }
107 114
108 - if (hCbFn) {  
109 - hCbFn();  
110 - }  
111 -  
112 hideFilter(); 115 hideFilter();
113 } 116 }
114 117
115 -// 初始化筛选 118 +//初始化筛选
116 function initFilter(opt) { 119 function initFilter(opt) {
117 var filterHammer; 120 var filterHammer;
118 121
119 - // 注册回调 122 + //注册回调
120 fCbFn = opt.fCbFn; 123 fCbFn = opt.fCbFn;
121 hCbFn = opt.hCbFn; 124 hCbFn = opt.hCbFn;
122 125
123 - // 是否忽略选中状态  
124 - window.missStatus = opt.missStatus; 126 + missStatus = opt.missStatus;
125 127
126 highlightMainItem(); 128 highlightMainItem();
127 highlightSubItem(); 129 highlightSubItem();
128 130
129 $filter = $('.filter-mask'); 131 $filter = $('.filter-mask');
130 132
131 - // 页面没有filter的时候什么都不做  
132 - if (!$filter[0]) {  
133 - return;  
134 - }  
135 -  
136 filterHammer = new Hammer($filter[0]); 133 filterHammer = new Hammer($filter[0]);
137 filterHammer.on('tap', function(e) { 134 filterHammer.on('tap', function(e) {
138 var $this = $(e.target), 135 var $this = $(e.target),
139 $cur; 136 $cur;
140 -  
141 - e.preventDefault();// 防止透点 137 + // e.preventDefault();//防止透点
142 138
143 if ($this.closest('.filter-body').length > 0) { 139 if ($this.closest('.filter-body').length > 0) {
144 $cur = $this.closest('.sub-item'); 140 $cur = $this.closest('.sub-item');
145 if ($cur.length > 0) { 141 if ($cur.length > 0) {
146 142
147 - // tap subclassify 143 + //tap subclassify
148 $cur = $this.closest('li'); 144 $cur = $this.closest('li');
149 145
150 subClassifyTapEvt($cur); 146 subClassifyTapEvt($cur);
151 } else { 147 } else {
152 148
153 - // tap classify 149 + //tap classify
154 $cur = $this.closest('.classify-item'); 150 $cur = $this.closest('.classify-item');
155 151
156 e.srcEvent.stopPropagation(); 152 e.srcEvent.stopPropagation();
@@ -165,21 +161,56 @@ function initFilter(opt) { @@ -165,21 +161,56 @@ function initFilter(opt) {
165 } 161 }
166 } 162 }
167 }); 163 });
  164 + if(opt.isScroll){
  165 + $("ul.sub-classify").each(function(){
  166 +
  167 + $(this).wrap("<div class='sub-classify-farther' data-type='" + $(this).data("type") + "'></div>");
  168 + // $(this).removeClass("sub-classify");
  169 +
  170 + var lastY=0,y=0;
  171 + var $slider=$(this);
  172 +
  173 + $slider.on('touchstart', function(e) {
  174 + lastY = e.originalEvent.touches[0].pageY;
  175 + });
  176 + $slider.on('touchmove', function(e) {
  177 + var curY = e.originalEvent.touches[0].pageY;
  178 + var deltaY = curY - lastY;
  179 + var height = $(this)[0].scrollHeight;
  180 + var limit = height - $(this).parent().height();
  181 + y = y + deltaY;
  182 + if (y < limit * -1)
  183 + y = limit * -1;
  184 + if (y > 0)
  185 + y = 0;
  186 + var translate = 'translate3d(0,' + y + 'px,0)';
  187 + $(this).css({
  188 + '-moz-transform': translate,
  189 + '-ms-transform': translate,
  190 + 'transform': translate,
  191 + '-webkit-transform': translate,
  192 + });
  193 + lastY = curY;
  194 + });
  195 + $slider.on('touchend', function(e) {});
  196 + });
  197 + }
  198 +
168 199
169 } 200 }
170 201
171 -// 重置筛选面板 202 +//重置筛选面板
172 function resetFilter() { 203 function resetFilter() {
173 if (typeof $filter === 'undefined') { 204 if (typeof $filter === 'undefined') {
174 return; 205 return;
175 } 206 }
176 207
177 - // 重置子筛选项 208 + //重置子筛选项
178 $('.sub-classify').each(function() { 209 $('.sub-classify').each(function() {
179 setSubClassify($(this).children(':first-child')); 210 setSubClassify($(this).children(':first-child'));
180 }); 211 });
181 212
182 - // 重置主筛选项 213 + //重置主筛选项
183 classifyTapEvt($('.classify > :first-child')); 214 classifyTapEvt($('.classify > :first-child'));
184 } 215 }
185 216