collocation-block.js
3.09 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
var lazyLoad = require('yoho-jquery-lazyload');
/**
* 搭配区块
*
* @constructor
*/
function CollocationBlock() {
this.elem = $('.collocation-block');
this.container = this.elem.children('.thumb-container');
this.elem.find('.prod');
this.prods = this.elem.find('.prod');
//this.fixedContainer = $('#wrapper')
// .after(this.container.clone().addClass('fixed-thumb-container fixed-bottom'))
// .next('.thumb-container');
//lazyLoad(this.fixedContainer.find('.lazy'));
this.container.delegate('.thumb', 'touchend', this._touchHandler.bind(this));
// this.fixedContainer.delegate('.thumb', 'touchend', this._touchHandler.bind(this));
this.thumbs = this.container.find('li');
// this.fixedThumbs = this.fixedContainer.find('li');
// 初始化箭头位置
this._updateCollocationArrowPos(this.thumbs.filter('.focus'));
var scrollFn = () => {
var pos = this.container.offset(),
posFixed = this.fixedContainer.offset();
var visible = false;
if (posFixed.top >= pos.top) {
visible = false;
} else {
visible = true;
}
if (posFixed.top + this.fixedContainer.height() > $('ul.brand-list').offset().top) {
visible = false;
} else if (pos.top < $(window).scrollTop()) {
visible = true;
this.fixedContainer.removeClass('fixed-bottom').addClass('fixed-top');
} else {
this.fixedContainer.removeClass('fixed-top').addClass('fixed-bottom');
}
this.fixedContainer.css({
visibility: visible ? 'visible' : 'hidden'
});
};
//$(document).on('scroll', scrollFn);
//$(document).on('touchmove', scrollFn);
}
CollocationBlock.exists = function() {
return $('.collocation-block').size() > 0;
};
$.extend(CollocationBlock.prototype, {
/**
* 计算搭配的箭头的位置
* @param current 当前focus的搭配项
*/
_updateCollocationArrowPos: function(current) {
var left = current.offset().left,
bgPos = -$(window).width() + left + (this.thumbs.width() / 2) + 'px';
this.container.css({
backgroundPosition: bgPos + ' bottom'
});
/*
this.fixedContainer.css({
backgroundPosition: bgPos + ' bottom'
});
*/
},
/**
* 搭配thumb的touch事件句柄
*
* @param e
* @private
*/
_touchHandler: function(e) {
var current = $(e.currentTarget),
index = current.index();
if (current.hasClass('focus')) {
return;
}
this.thumbs.removeClass('focus');
// this.fixedThumbs.removeClass('focus');
current.addClass('focus');
// 更新箭头位置
this._updateCollocationArrowPos(current);
this.prods.not('.hide').addClass('hide');
this.curProds = this.prods.eq(index);
this.curProds.removeClass('hide');
$('body').animate({
scrollTop: this.elem.offset().top
}, 400);
}
});
module.exports = CollocationBlock;