scratch – Blame information for rev 117

Subversion Repositories:
Rev:
Rev Author Line No. Line
117 office 1 /*=========================
2 Mousewheel Control
3 ===========================*/
4 s.mousewheel = {
5 event: false,
6 lastScrollTime: (new window.Date()).getTime()
7 };
8 function isEventSupported() {
9 var eventName = 'onwheel';
10 var isSupported = eventName in document;
11  
12 if (!isSupported) {
13 var element = document.createElement('div');
14 element.setAttribute(eventName, 'return;');
15 isSupported = typeof element[eventName] === 'function';
16 }
17  
18 if (!isSupported &&
19 document.implementation &&
20 document.implementation.hasFeature &&
21 // always returns true in newer browsers as per the standard.
22 // @see http://dom.spec.whatwg.org/#dom-domimplementation-hasfeature
23 document.implementation.hasFeature('', '') !== true ) {
24 // This is the only way to test support for the `wheel` event in IE9+.
25 isSupported = document.implementation.hasFeature('Events.wheel', '3.0');
26 }
27  
28 return isSupported;
29 }
30 /**
31 * Mouse wheel (and 2-finger trackpad) support on the web sucks. It is
32 * complicated, thus this doc is long and (hopefully) detailed enough to answer
33 * your questions.
34 *
35 * If you need to react to the mouse wheel in a predictable way, this code is
36 * like your bestest friend. * hugs *
37 *
38 * As of today, there are 4 DOM event types you can listen to:
39 *
40 * 'wheel' -- Chrome(31+), FF(17+), IE(9+)
41 * 'mousewheel' -- Chrome, IE(6+), Opera, Safari
42 * 'MozMousePixelScroll' -- FF(3.5 only!) (2010-2013) -- don't bother!
43 * 'DOMMouseScroll' -- FF(0.9.7+) since 2003
44 *
45 * So what to do? The is the best:
46 *
47 * normalizeWheel.getEventType();
48 *
49 * In your event callback, use this code to get sane interpretation of the
50 * deltas. This code will return an object with properties:
51 *
52 * spinX -- normalized spin speed (use for zoom) - x plane
53 * spinY -- " - y plane
54 * pixelX -- normalized distance (to pixels) - x plane
55 * pixelY -- " - y plane
56 *
57 * Wheel values are provided by the browser assuming you are using the wheel to
58 * scroll a web page by a number of lines or pixels (or pages). Values can vary
59 * significantly on different platforms and browsers, forgetting that you can
60 * scroll at different speeds. Some devices (like trackpads) emit more events
61 * at smaller increments with fine granularity, and some emit massive jumps with
62 * linear speed or acceleration.
63 *
64 * This code does its best to normalize the deltas for you:
65 *
66 * - spin is trying to normalize how far the wheel was spun (or trackpad
67 * dragged). This is super useful for zoom support where you want to
68 * throw away the chunky scroll steps on the PC and make those equal to
69 * the slow and smooth tiny steps on the Mac. Key data: This code tries to
70 * resolve a single slow step on a wheel to 1.
71 *
72 * - pixel is normalizing the desired scroll delta in pixel units. You'll
73 * get the crazy differences between browsers, but at least it'll be in
74 * pixels!
75 *
76 * - positive value indicates scrolling DOWN/RIGHT, negative UP/LEFT. This
77 * should translate to positive value zooming IN, negative zooming OUT.
78 * This matches the newer 'wheel' event.
79 *
80 * Why are there spinX, spinY (or pixels)?
81 *
82 * - spinX is a 2-finger side drag on the trackpad, and a shift + wheel turn
83 * with a mouse. It results in side-scrolling in the browser by default.
84 *
85 * - spinY is what you expect -- it's the classic axis of a mouse wheel.
86 *
87 * - I dropped spinZ/pixelZ. It is supported by the DOM 3 'wheel' event and
88 * probably is by browsers in conjunction with fancy 3D controllers .. but
89 * you know.
90 *
91 * Implementation info:
92 *
93 * Examples of 'wheel' event if you scroll slowly (down) by one step with an
94 * average mouse:
95 *
96 * OS X + Chrome (mouse) - 4 pixel delta (wheelDelta -120)
97 * OS X + Safari (mouse) - N/A pixel delta (wheelDelta -12)
98 * OS X + Firefox (mouse) - 0.1 line delta (wheelDelta N/A)
99 * Win8 + Chrome (mouse) - 100 pixel delta (wheelDelta -120)
100 * Win8 + Firefox (mouse) - 3 line delta (wheelDelta -120)
101 *
102 * On the trackpad:
103 *
104 * OS X + Chrome (trackpad) - 2 pixel delta (wheelDelta -6)
105 * OS X + Firefox (trackpad) - 1 pixel delta (wheelDelta N/A)
106 *
107 * On other/older browsers.. it's more complicated as there can be multiple and
108 * also missing delta values.
109 *
110 * The 'wheel' event is more standard:
111 *
112 * http://www.w3.org/TR/DOM-Level-3-Events/#events-wheelevents
113 *
114 * The basics is that it includes a unit, deltaMode (pixels, lines, pages), and
115 * deltaX, deltaY and deltaZ. Some browsers provide other values to maintain
116 * backward compatibility with older events. Those other values help us
117 * better normalize spin speed. Example of what the browsers provide:
118 *
119 * | event.wheelDelta | event.detail
120 * ------------------+------------------+--------------
121 * Safari v5/OS X | -120 | 0
122 * Safari v5/Win7 | -120 | 0
123 * Chrome v17/OS X | -120 | 0
124 * Chrome v17/Win7 | -120 | 0
125 * IE9/Win7 | -120 | undefined
126 * Firefox v4/OS X | undefined | 1
127 * Firefox v4/Win7 | undefined | 3
128 *
129 */
130 function normalizeWheel( /*object*/ event ) /*object*/ {
131 // Reasonable defaults
132 var PIXEL_STEP = 10;
133 var LINE_HEIGHT = 40;
134 var PAGE_HEIGHT = 800;
135  
136 var sX = 0, sY = 0, // spinX, spinY
137 pX = 0, pY = 0; // pixelX, pixelY
138  
139 // Legacy
140 if( 'detail' in event ) {
141 sY = event.detail;
142 }
143 if( 'wheelDelta' in event ) {
144 sY = -event.wheelDelta / 120;
145 }
146 if( 'wheelDeltaY' in event ) {
147 sY = -event.wheelDeltaY / 120;
148 }
149 if( 'wheelDeltaX' in event ) {
150 sX = -event.wheelDeltaX / 120;
151 }
152  
153 // side scrolling on FF with DOMMouseScroll
154 if( 'axis' in event && event.axis === event.HORIZONTAL_AXIS ) {
155 sX = sY;
156 sY = 0;
157 }
158  
159 pX = sX * PIXEL_STEP;
160 pY = sY * PIXEL_STEP;
161  
162 if( 'deltaY' in event ) {
163 pY = event.deltaY;
164 }
165 if( 'deltaX' in event ) {
166 pX = event.deltaX;
167 }
168  
169 if( (pX || pY) && event.deltaMode ) {
170 if( event.deltaMode === 1 ) { // delta in LINE units
171 pX *= LINE_HEIGHT;
172 pY *= LINE_HEIGHT;
173 } else { // delta in PAGE units
174 pX *= PAGE_HEIGHT;
175 pY *= PAGE_HEIGHT;
176 }
177 }
178  
179 // Fall-back if spin cannot be determined
180 if( pX && !sX ) {
181 sX = (pX < 1) ? -1 : 1;
182 < 1) ? -1 : 1; }
183 < 1) ? -1 : 1; if( pY && !sY ) {
184 < 1) ? -1 : 1; sY = (pY < 1) ? -1 : 1;
185 < 1) ? -1 : 1;< 1) ? -1 : 1; }
186  
187 < 1) ? -1 : 1;< 1) ? -1 : 1; return {
188 < 1) ? -1 : 1;< 1) ? -1 : 1; spinX: sX,
189 < 1) ? -1 : 1;< 1) ? -1 : 1; spinY: sY,
190 < 1) ? -1 : 1;< 1) ? -1 : 1; pixelX: pX,
191 < 1) ? -1 : 1;< 1) ? -1 : 1; pixelY: pY
192 < 1) ? -1 : 1;< 1) ? -1 : 1; };
193 < 1) ? -1 : 1;< 1) ? -1 : 1;}
194 < 1) ? -1 : 1;< 1) ? -1 : 1;if (s.params.mousewheelControl) {
195 < 1) ? -1 : 1;< 1) ? -1 : 1; /**
196 < 1) ? -1 : 1;< 1) ? -1 : 1; * The best combination if you prefer spinX + spinY normalization. It favors
197 < 1) ? -1 : 1;< 1) ? -1 : 1; * the older DOMMouseScroll for Firefox, as FF does not include wheelDelta with
198 < 1) ? -1 : 1;< 1) ? -1 : 1; * 'wheel' event, making spin speed determination impossible.
199 < 1) ? -1 : 1;< 1) ? -1 : 1; */
200 < 1) ? -1 : 1;< 1) ? -1 : 1; s.mousewheel.event = (navigator.userAgent.indexOf('firefox') > -1) ?
201 < 1) ? -1 : 1;< 1) ? -1 : 1; 'DOMMouseScroll' :
202 < 1) ? -1 : 1;< 1) ? -1 : 1; isEventSupported() ?
203 < 1) ? -1 : 1;< 1) ? -1 : 1; 'wheel' : 'mousewheel';
204 < 1) ? -1 : 1;< 1) ? -1 : 1;}
205 < 1) ? -1 : 1;< 1) ? -1 : 1;function handleMousewheel(e) {
206 < 1) ? -1 : 1;< 1) ? -1 : 1; if (e.originalEvent) e = e.originalEvent; //jquery fix
207 < 1) ? -1 : 1;< 1) ? -1 : 1; var delta = 0;
208 < 1) ? -1 : 1;< 1) ? -1 : 1; var rtlFactor = s.rtl ? -1 : 1;
209  
210 < 1) ? -1 : 1;< 1) ? -1 : 1; var data = normalizeWheel( e );
211  
212 < 1) ? -1 : 1;< 1) ? -1 : 1; if (s.params.mousewheelForceToAxis) {
213 < 1) ? -1 : 1;< 1) ? -1 : 1; if (s.isHorizontal()) {
214 < 1) ? -1 : 1;< 1) ? -1 : 1; if (Math.abs(data.pixelX) > Math.abs(data.pixelY)) delta = data.pixelX * rtlFactor;
215 < 1) ? -1 : 1;< 1) ? -1 : 1; else return;
216 < 1) ? -1 : 1;< 1) ? -1 : 1; }
217 < 1) ? -1 : 1;< 1) ? -1 : 1; else {
218 < 1) ? -1 : 1;< 1) ? -1 : 1; if (Math.abs(data.pixelY) > Math.abs(data.pixelX)) delta = data.pixelY;
219 < 1) ? -1 : 1;< 1) ? -1 : 1; else return;
220 < 1) ? -1 : 1;< 1) ? -1 : 1; }
221 < 1) ? -1 : 1;< 1) ? -1 : 1; }
222 < 1) ? -1 : 1;< 1) ? -1 : 1; else {
223 < 1) ? -1 : 1;< 1) ? -1 : 1; delta = Math.abs(data.pixelX) > Math.abs(data.pixelY) ? - data.pixelX * rtlFactor : - data.pixelY;
224 < 1) ? -1 : 1;< 1) ? -1 : 1; }
225  
226 < 1) ? -1 : 1;< 1) ? -1 : 1; if (delta === 0) return;
227  
228 < 1) ? -1 : 1;< 1) ? -1 : 1; if (s.params.mousewheelInvert) delta = -delta;
229  
230 < 1) ? -1 : 1;< 1) ? -1 : 1; if (!s.params.freeMode) {
231 < 1) ? -1 : 1;< 1) ? -1 : 1; if ((new window.Date()).getTime() - s.mousewheel.lastScrollTime > 60) {
232 < 1) ? -1 : 1;< 1) ? -1 : 1; if (delta < 0) {
233 < 1) ? -1 : 1;< 1) ? -1 : 1;< 0) { if ((!s.isEnd || s.params.loop) && !s.animating) {
234 < 1) ? -1 : 1;< 1) ? -1 : 1;< 0) { s.slideNext();
235 < 1) ? -1 : 1;< 1) ? -1 : 1;< 0) { s.emit('onScroll', s, e);
236 < 1) ? -1 : 1;< 1) ? -1 : 1;< 0) { }
237 < 1) ? -1 : 1;< 1) ? -1 : 1;< 0) { else if (s.params.mousewheelReleaseOnEdges) return true;
238 < 1) ? -1 : 1;< 1) ? -1 : 1;< 0) { }
239 < 1) ? -1 : 1;< 1) ? -1 : 1;< 0) { else {
240 < 1) ? -1 : 1;< 1) ? -1 : 1;< 0) { if ((!s.isBeginning || s.params.loop) && !s.animating) {
241 < 1) ? -1 : 1;< 1) ? -1 : 1;< 0) { s.slidePrev();
242 < 1) ? -1 : 1;< 1) ? -1 : 1;< 0) { s.emit('onScroll', s, e);
243 < 1) ? -1 : 1;< 1) ? -1 : 1;< 0) { }
244 < 1) ? -1 : 1;< 1) ? -1 : 1;< 0) { else if (s.params.mousewheelReleaseOnEdges) return true;
245 < 1) ? -1 : 1;< 1) ? -1 : 1;< 0) { }
246 < 1) ? -1 : 1;< 1) ? -1 : 1;< 0) { }
247 < 1) ? -1 : 1;< 1) ? -1 : 1;< 0) { s.mousewheel.lastScrollTime = (new window.Date()).getTime();
248  
249 < 1) ? -1 : 1;< 1) ? -1 : 1;< 0) { }
250 < 1) ? -1 : 1;< 1) ? -1 : 1;< 0) { else {
251 < 1) ? -1 : 1;< 1) ? -1 : 1;< 0) { //Freemode or scrollContainer:
252 < 1) ? -1 : 1;< 1) ? -1 : 1;< 0) { var position = s.getWrapperTranslate() + delta * s.params.mousewheelSensitivity;
253 < 1) ? -1 : 1;< 1) ? -1 : 1;< 0) { var wasBeginning = s.isBeginning,
254 < 1) ? -1 : 1;< 1) ? -1 : 1;< 0) { wasEnd = s.isEnd;
255  
256 < 1) ? -1 : 1;< 1) ? -1 : 1;< 0) { if (position >= s.minTranslate()) position = s.minTranslate();
257 < 1) ? -1 : 1;< 1) ? -1 : 1;< 0) { if (position <= s.maxTranslate()) position = s.maxTranslate();
258  
259 < 1) ? -1 : 1;< 1) ? -1 : 1;< 0) {<= s.maxTranslate()) position = s.maxTranslate(); s.setWrapperTransition(0);
260 < 1) ? -1 : 1;< 1) ? -1 : 1;< 0) {<= s.maxTranslate()) position = s.maxTranslate(); s.setWrapperTranslate(position);
261 < 1) ? -1 : 1;< 1) ? -1 : 1;< 0) {<= s.maxTranslate()) position = s.maxTranslate(); s.updateProgress();
262 < 1) ? -1 : 1;< 1) ? -1 : 1;< 0) {<= s.maxTranslate()) position = s.maxTranslate(); s.updateActiveIndex();
263  
264 < 1) ? -1 : 1;< 1) ? -1 : 1;< 0) {<= s.maxTranslate()) position = s.maxTranslate(); if (!wasBeginning && s.isBeginning || !wasEnd && s.isEnd) {
265 < 1) ? -1 : 1;< 1) ? -1 : 1;< 0) {<= s.maxTranslate()) position = s.maxTranslate(); s.updateClasses();
266 < 1) ? -1 : 1;< 1) ? -1 : 1;< 0) {<= s.maxTranslate()) position = s.maxTranslate(); }
267  
268 < 1) ? -1 : 1;< 1) ? -1 : 1;< 0) {<= s.maxTranslate()) position = s.maxTranslate(); if (s.params.freeModeSticky) {
269 < 1) ? -1 : 1;< 1) ? -1 : 1;< 0) {<= s.maxTranslate()) position = s.maxTranslate(); clearTimeout(s.mousewheel.timeout);
270 < 1) ? -1 : 1;< 1) ? -1 : 1;< 0) {<= s.maxTranslate()) position = s.maxTranslate(); s.mousewheel.timeout = setTimeout(function () {
271 < 1) ? -1 : 1;< 1) ? -1 : 1;< 0) {<= s.maxTranslate()) position = s.maxTranslate(); s.slideReset();
272 < 1) ? -1 : 1;< 1) ? -1 : 1;< 0) {<= s.maxTranslate()) position = s.maxTranslate(); }, 300);
273 < 1) ? -1 : 1;< 1) ? -1 : 1;< 0) {<= s.maxTranslate()) position = s.maxTranslate(); }
274 < 1) ? -1 : 1;< 1) ? -1 : 1;< 0) {<= s.maxTranslate()) position = s.maxTranslate(); else {
275 < 1) ? -1 : 1;< 1) ? -1 : 1;< 0) {<= s.maxTranslate()) position = s.maxTranslate(); if (s.params.lazyLoading && s.lazy) {
276 < 1) ? -1 : 1;< 1) ? -1 : 1;< 0) {<= s.maxTranslate()) position = s.maxTranslate(); s.lazy.load();
277 < 1) ? -1 : 1;< 1) ? -1 : 1;< 0) {<= s.maxTranslate()) position = s.maxTranslate(); }
278 < 1) ? -1 : 1;< 1) ? -1 : 1;< 0) {<= s.maxTranslate()) position = s.maxTranslate(); }
279 < 1) ? -1 : 1;< 1) ? -1 : 1;< 0) {<= s.maxTranslate()) position = s.maxTranslate(); // Emit event
280 < 1) ? -1 : 1;< 1) ? -1 : 1;< 0) {<= s.maxTranslate()) position = s.maxTranslate(); s.emit('onScroll', s, e);
281  
282 < 1) ? -1 : 1;< 1) ? -1 : 1;< 0) {<= s.maxTranslate()) position = s.maxTranslate(); // Stop autoplay
283 < 1) ? -1 : 1;< 1) ? -1 : 1;< 0) {<= s.maxTranslate()) position = s.maxTranslate(); if (s.params.autoplay && s.params.autoplayDisableOnInteraction) s.stopAutoplay();
284  
285 < 1) ? -1 : 1;< 1) ? -1 : 1;< 0) {<= s.maxTranslate()) position = s.maxTranslate(); // Return page scroll on edge positions
286 < 1) ? -1 : 1;< 1) ? -1 : 1;< 0) {<= s.maxTranslate()) position = s.maxTranslate(); if (position === 0 || position === s.maxTranslate()) return;
287 < 1) ? -1 : 1;< 1) ? -1 : 1;< 0) {<= s.maxTranslate()) position = s.maxTranslate(); }
288  
289 < 1) ? -1 : 1;< 1) ? -1 : 1;< 0) {<= s.maxTranslate()) position = s.maxTranslate(); if (e.preventDefault) e.preventDefault();
290 < 1) ? -1 : 1;< 1) ? -1 : 1;< 0) {<= s.maxTranslate()) position = s.maxTranslate(); else e.returnValue = false;
291 < 1) ? -1 : 1;< 1) ? -1 : 1;< 0) {<= s.maxTranslate()) position = s.maxTranslate(); return false;
292 < 1) ? -1 : 1;< 1) ? -1 : 1;< 0) {<= s.maxTranslate()) position = s.maxTranslate();}
293 < 1) ? -1 : 1;< 1) ? -1 : 1;< 0) {<= s.maxTranslate()) position = s.maxTranslate();s.disableMousewheelControl = function () {
294 < 1) ? -1 : 1;< 1) ? -1 : 1;< 0) {<= s.maxTranslate()) position = s.maxTranslate(); if (!s.mousewheel.event) return false;
295 < 1) ? -1 : 1;< 1) ? -1 : 1;< 0) {<= s.maxTranslate()) position = s.maxTranslate(); var target = s.container;
296 < 1) ? -1 : 1;< 1) ? -1 : 1;< 0) {<= s.maxTranslate()) position = s.maxTranslate(); if (s.params.mousewheelEventsTarged !== 'container') {
297 < 1) ? -1 : 1;< 1) ? -1 : 1;< 0) {<= s.maxTranslate()) position = s.maxTranslate(); target = $(s.params.mousewheelEventsTarged);
298 < 1) ? -1 : 1;< 1) ? -1 : 1;< 0) {<= s.maxTranslate()) position = s.maxTranslate(); }
299 < 1) ? -1 : 1;< 1) ? -1 : 1;< 0) {<= s.maxTranslate()) position = s.maxTranslate(); target.off(s.mousewheel.event, handleMousewheel);
300 < 1) ? -1 : 1;< 1) ? -1 : 1;< 0) {<= s.maxTranslate()) position = s.maxTranslate(); s.params.mousewheelControl = false;
301 < 1) ? -1 : 1;< 1) ? -1 : 1;< 0) {<= s.maxTranslate()) position = s.maxTranslate(); return true;
302 < 1) ? -1 : 1;< 1) ? -1 : 1;< 0) {<= s.maxTranslate()) position = s.maxTranslate();};
303  
304 < 1) ? -1 : 1;< 1) ? -1 : 1;< 0) {<= s.maxTranslate()) position = s.maxTranslate();s.enableMousewheelControl = function () {
305 < 1) ? -1 : 1;< 1) ? -1 : 1;< 0) {<= s.maxTranslate()) position = s.maxTranslate(); if (!s.mousewheel.event) return false;
306 < 1) ? -1 : 1;< 1) ? -1 : 1;< 0) {<= s.maxTranslate()) position = s.maxTranslate(); var target = s.container;
307 < 1) ? -1 : 1;< 1) ? -1 : 1;< 0) {<= s.maxTranslate()) position = s.maxTranslate(); if (s.params.mousewheelEventsTarged !== 'container') {
308 < 1) ? -1 : 1;< 1) ? -1 : 1;< 0) {<= s.maxTranslate()) position = s.maxTranslate(); target = $(s.params.mousewheelEventsTarged);
309 < 1) ? -1 : 1;< 1) ? -1 : 1;< 0) {<= s.maxTranslate()) position = s.maxTranslate(); }
310 < 1) ? -1 : 1;< 1) ? -1 : 1;< 0) {<= s.maxTranslate()) position = s.maxTranslate(); target.on(s.mousewheel.event, handleMousewheel);
311 < 1) ? -1 : 1;< 1) ? -1 : 1;< 0) {<= s.maxTranslate()) position = s.maxTranslate(); s.params.mousewheelControl = true;
312 < 1) ? -1 : 1;< 1) ? -1 : 1;< 0) {<= s.maxTranslate()) position = s.maxTranslate(); return true;
313 < 1) ? -1 : 1;< 1) ? -1 : 1;< 0) {<= s.maxTranslate()) position = s.maxTranslate();};