list filter

@@ -5,14 +5,12 @@
  * @date: 2015/10/19
  */
 
-var $ = require('jquery');
+var $ = require('jquery'),
+    Hammer = require('hammer');
 
-var $filter = $('.filter-mask');
+var $filter;
 
-var $classify = $filter.find('.classify'),
-    $subClassify = $filter.find('.sub-classify');
-
-var cbFn;
+var fCbFn, hCbFn; //筛选和关闭的回调
 
 //隐藏筛选界面
 function hideFilter() {
@@ -24,20 +22,7 @@ function showFilter() {
     $filter.removeClass('hide');
 }
 
-//注册sub-classify点击后的回调
-function registerCbFn(cb) {
-    cbFn = cb;
-}
-
-//设置完高度后显示sub并设置选中
-$classify.children(':first-child').addClass('active'); //T：不在HTML中使用{{#if @first}}active{{/if}}来初始化active为避免sub设置高度时的闪烁
-
-//classify switch
-$classify.delegate('.classify-item', 'click', function(e) {
-    var $this = $(this);
-
-    e.stopPropagation();
-
+function classifyTapEvt($this) {
     if ($this.hasClass('active')) {
         return;
     }
@@ -45,16 +30,10 @@ $classify.delegate('.classify-item', 'click', function(e) {
     $this.siblings('.active').removeClass('active');
 
     $this.addClass('active');
-});
-
-//点击Mask隐藏筛选界面
-$filter.click(function() {
-    hideFilter();
-});
+}
 
-$subClassify.delegate('li', 'click', function(e) {
-    var $this = $(this),
-        id = $this.data('id');
+function subClassifyTapEvt($this) {
+    var id = $this.data('id');
 
     var $sub = $this.closest('.sub-classify');
 
@@ -62,8 +41,6 @@ $subClassify.delegate('li', 'click', function(e) {
 
     var html, shower;
 
-    e.stopPropagation();
-
     if ($this.hasClass('chosed')) {
         return;
     }
@@ -86,19 +63,64 @@ $subClassify.delegate('li', 'click', function(e) {
         $shower.removeClass('default');
     }
 
-    if (cbFn) {
-        cbFn({
+    if (fCbFn) {
+        fCbFn({
             type: $sub.data('type'),
             id: id
         });
     }
 
     hideFilter();
-});
+}
 
+//初始化筛选
+function initFilter(cb) {
+    var filterHammer;
+
+    //注册回调
+    fCbFn = cb.fCbFn;
+    hCbFn = cb.hCbFn;
 
-exports.showFilter = showFilter;
 
-exports.hideFilter = hideFilter;
+    $filter = $('.filter-mask');
+
+    filterHammer = new Hammer($filter[0]);
+    filterHammer.on('tap', function(e) {
+        var $this = $(e.target),
+            $cur;
+
+        if ($this.closest('.filter-body').length > 0) {
+            $cur = $this.closest('.sub-item');
+            if ($cur.length > 0) {
+
+                //tap subclassify
+                $cur = $this.closest('li');
+
+                classifyTapEvt($cur);
+            } else {
+
+                //tap classify
+                $cur = $this.closest('.classify-item');
+
+                e.srcEvent.stopPropagation();
+
+                subClassifyTapEvt($cur);
+            }
+        } else {
+            hideFilter();
+
+            if (hCbFn) {
+                hCbFn();
+            }
+        }
+    });
+}
+
+//设置完高度后显示sub并设置选中
+//T：不在HTML中使用{{#if @first}}active{{/if}}来初始化active为避免sub设置高度时的闪烁
+// $filter.find('.classify > :first-child').addClass('active');
+exports.initFilter = initFilter;
+
+exports.showFilter = showFilter;
 
-exports.registerCbFn = registerCbFn;
\ No newline at end of file
+exports.hideFilter = hideFilter;
\ No newline at end of file

@@ -5,6 +5,7 @@
  */
 
 var $ = require('jquery'),
+    Hammer = require('hammer'),
     lazyLoad = require('yoho.lazyload');
 
 //品牌页参数
@@ -61,7 +62,11 @@ var $listNav = $('#list-nav'),
         }
     },
     $pre = $listNav.find('.active'), //纪录进入筛选前的active项，初始为选中项
-    searching;
+    searching,
+    navHammer,
+    btnIntroHammer,
+    introHammer,
+    brandColHammer;
 
 /**
  * 筛选注册的回调，筛选子项点击后逻辑
@@ -208,9 +213,27 @@ function search(opt) {
 
 }
 
-lazyLoad($('.lazy'));
+$.ajax({
+    type: 'GET',
+    url: '/search/filter',
+    data: defaultOpt,
+    success: function(data) {
+        $goodsContainer.append(data);
+
+        //初始化filter&注册filter回调
+        filter.initFilter({
+            fCbFn: search,
+            hCbFn: function() {
+
+                //切换active状态到$pre上
+                $pre.addClass('active');
+                $pre.siblings('.filter').removeClass('active');
+            }
+        });
+    }
+});
 
-filter.registerCbFn(search);
+lazyLoad($('.lazy'));
 
 writeSearch.bindWirteLocal($('#search-form'));
 
@@ -220,8 +243,9 @@ writeSearch.bindWirteLocal($('#search-form'));
 //3.筛选无active时点击展开筛选面板
 //4.筛选有active时点击隐藏筛选面板并恢复点击筛选前active项的active状态
 //5.当前active为筛选并且点击其他项时，隐藏筛选面板
-$listNav.delegate('li', 'click', function() {
-    var $this = $(this),
+navHammer = new Hammer($listNav[0]);
+navHammer.on('tap', function(e) {
+    var $this = $(e.target).closest('li'),
         nav,
         navType,
         $active;
@@ -318,51 +342,65 @@ $(window).scroll(function() {
     }
 });
 
-//品牌介绍
-$brandHeader.children('.btn-intro').bind('click', function() {
-    $introBox.removeClass('hide');
-});
+if ($brandHeader.length > 0) {
 
-$('.close-intro, .brand-intro-box').click(function() {
-    $introBox.addClass('hide');
-});
+    //品牌介绍
+    btnIntroHammer = new Hammer($brandHeader.children('.btn-intro')[0]);
+    btnIntroHammer.on('tap', function() {
+        $introBox.removeClass('hide');
 
-$('#brand-intro').click(function(e) {
-    e.stopPropagation();
-});
+        //防止混合scroll发生
+        $('body').addClass('overflow-hidden');
+    });
 
-//品牌收藏
-$brandHeader.children('.btn-col').bind('click', function() {
-    var $this = $(this);
+    //关闭品牌介绍
+    introHammer = new Hammer(document.getElementById('intro-box'));
+    introHammer.on('tap', function(e) {
+        var $this = $(e.target);
 
-    var id = $brandHeader.data('id'),
-        opt;
+        e.srcEvent.preventDefault();
 
-    if ($this.hasClass('coled')) {
-        opt = 'cancel';
-    } else {
-        opt = 'ok';
-    }
+        //关闭品牌介绍box
+        if ($this.closest('#brand-intro').length === 0 || $this.hasClass('close-intro')) {
+            $introBox.addClass('hide');
+            $('body').removeClass('overflow-hidden');
+        }
+    });
 
-    $.ajax({
-        type: 'POST',
-        url: '/product/opt/favoriteBrand',
-        data: {
-            id: id,
-            opt: opt
-        },
-        success: function(data) {
-            if (data.code === 200) {
-                $this.toggleClass('coled');
-            } else if (data.code === 400) {
-                tip.show('未登录');
-            }
-        },
-        error: function() {
-            tip.show('网络断开连接了~');
+    //品牌收藏
+    brandColHammer = new Hammer($brandHeader.children('.btn-col')[0]);
+    brandColHammer.on('tap', function() {
+        var $this = $(this);
+
+        var id = $brandHeader.data('id'),
+            opt;
+
+        if ($this.hasClass('coled')) {
+            opt = 'cancel';
+        } else {
+            opt = 'ok';
         }
+
+        $.ajax({
+            type: 'POST',
+            url: '/product/opt/favoriteBrand',
+            data: {
+                id: id,
+                opt: opt
+            },
+            success: function(data) {
+                if (data.code === 200) {
+                    $this.toggleClass('coled');
+                } else {
+                    tip.show(data.message);
+                }
+            },
+            error: function() {
+                tip.show('网络断开连接了~');
+            }
+        });
     });
-});
+}
 
 //初始请求最新第一页数据
 search();
\ No newline at end of file

@@ -22,7 +22,8 @@
       "iscroll": "5.1.2",
       "import-style": "1.0.0",
       "yoho.lazyload": "1.1.0",
-      "yoho.handlebars": "3.0.3"
+      "yoho.handlebars": "3.0.3",
+      "hammer": "2.0.4"
     },
     "devDependencies": {
       "expect.js": "0.3.1"

@@ -55,6 +55,10 @@ a {
     display: none;
 }
 
+.overflow-hidden {
+    overflow: hidden;
+}
+
 @font-face {
     font-family: "iconfont";
     src: font-url('iconfont.eot'); /* IE9*/

@@ -103,7 +103,7 @@
     }
 
     .brand-intro-box {
-        position: absolute;
+        position: fixed;
         top: 0;
         left: 0;
         right: 0;

@@ -3,14 +3,14 @@
         <div class="filter-body">
             <ul class="classify">
                 {{#each classify}}
-                    <li class="classify-item">
+                    <li class="classify-item{{#if @first}} active{{/if}}">
                         <p class="shower{{#if default}} default{{/if}}">
                             <span class="title">{{title}}：</span>
                             {{name}}
                         </p>
                         <ul class="sub-classify" data-type={{dataType}}>
                             {{# subs}}
-                                <li {{#if chosed}}class=chosed{{/if}} data-id={{dataId}}>
+                                <li class="sub-item{{#if chosed}} chosed{{/if}}" data-id={{dataId}}>
                                     {{name}}
                                     <i class="iconfont chosed-icon">&#xe617;</i>
                                 </li>