-
Notifications
You must be signed in to change notification settings - Fork 92
/
kort.js
143 lines (104 loc) · 3.35 KB
/
kort.js
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
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
/*!
* kort 0.1
* http://lab.hakim.se/kort
* MIT licensed
*
* Copyright (C) 2011 Hakim El Hattab (http://hakim.se, @hakimel)
*/
var Kort = (function(){
var OFFSET_MARGIN = 2;
var supports3DTransforms = 'WebkitPerspective' in document.body.style ||
'MozPerspective' in document.body.style ||
'msPerspective' in document.body.style ||
'OPerspective' in document.body.style ||
'perspective' in document.body.style;
/**
* Binds events for all elements with the class 'kort'.
*/
function bind() {
// Properties that are read from the DOM when the user hovers
// and then cached to avoid needless DOM interaction
var elementLeft = 0,
elementWidth = 0,
elementChildren = [];
// Gotta have 3D transform support
if( supports3DTransforms ) {
[].slice.call( document.querySelectorAll( '.kort' ) ).forEach( function( element, i ) {
// Make sure we don't bind to the same element twice
if( element.classList.contains( 'kort-activated' ) === false ) {
element.classList.add( 'kort-activated' );
function onMouseOver( event ) {
updateState();
addMargin();
}
function onMouseMove( event ) {
update( event.clientX );
}
function onMouseOut( event ) {
removeMargin();
}
function onTouchStart( event ) {
updateState();
addMargin();
update( event.touches[0].clientX );
element.classList.add( 'touching' );
document.addEventListener( 'touchmove', onTouchMove, false );
document.addEventListener( 'touchend', onTouchEnd, false );
}
function onTouchMove( event ) {
update( event.touches[0].clientX );
event.preventDefault();
}
function onTouchEnd( event ) {
removeMargin();
element.classList.remove( 'touching' );
document.removeEventListener( 'touchmove', onTouchMove, false );
document.removeEventListener( 'touchend', onTouchEnd, false );
}
function updateState() {
elementLeft = element.offsetLeft;
elementWidth = element.offsetWidth;
elementChildren = [].slice.call( element.children );
}
function update( x ) {
// Find the present element based on the x position
var present = Math.floor( ( x - elementLeft ) / elementWidth * elementChildren.length );
// Cap to 0 - number_of_elements
present = Math.max( Math.min( present, elementChildren.length - 1 ), 0 );
elementChildren.forEach( function( child, i ) {
if( i === present ) {
child.classList.add( 'present' );
}
else {
child.classList.remove( 'present' );
}
} );
}
function addMargin() {
elementChildren.forEach( function( child, i ) {
child.style.marginLeft = ( i * OFFSET_MARGIN ) + 'px';
} );
}
function removeMargin() {
elementChildren.forEach( function( child, i ) {
child.style.marginLeft = 0;
} );
}
if( 'ontouchstart' in window ) {
element.addEventListener( 'touchstart', onTouchStart, false );
}
else {
element.addEventListener( 'mouseover', onMouseOver, false );
element.addEventListener( 'mouseout', onMouseOut, false );
element.addEventListener( 'mousemove', onMouseMove, false );
}
}
} );
}
}
// Bind elments that are currently in the DOM
bind();
return {
bind: bind
};
})();