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
| var YOOdrawer = new Class({
initialize: function(wrapper, items, options) {
this.setOptions({
layout: 'vertical',
itemstyle: 'top',
shiftSize: 50,
transition: Fx.Transitions.Expo.easeOut
}, options);
this.wrapper = $(wrapper);
this.items = $$(items);
this.fx = new Fx.Elements(this.items, {wait: false, duration: 600, transition: this.options.transition });
if (this.options.layout != 'vertical') this.options.itemstyle = 'left';
var pos = {};
this.items.each(function(item, i) {
pos[i] = item.getStyle(this.options.itemstyle).toInt();
item.addEvent('mouseenter', this.itemFx.bind(this, [pos, item, i]));
}, this);
},
itemFx: function(pos, item, i) {
var o = {};
item.addClass('active');
this.items.each(function(other, j) {
var s = other.getStyle(this.options.itemstyle).toInt();
if (j >= i) {
if (s != pos[j]) o[j] = this.itemStyle(s, pos[j]);
} else {
if (s != pos[j] - this.options.shiftSize) o[j] = this.itemStyle(s, pos[j] - this.options.shiftSize);
}
if (j != i) {
other.removeClass('active');
}
}, this);
this.fx.start(o);
},
itemStyle: function(startVal, endVal) {
if (this.options.layout == 'vertical') { return {top: [startVal, endVal]}; } else { return {left: [startVal, endVal]}; }
}
});
YOOdrawer.implement(new Options); |
