https://billetterie.theatrechampselysees.fr/resources/js/lib/jquery.rs.carousel-touch.js

1/*global jQuery */
2/*jshint bitwise: true, camelcase: true, curly: true, eqeqeq: true, forin: true,
3immed: true, indent: 4, latedef: true, newcap: true, nonew: true, quotmark: single,
4undef: true, unused: true, strict: true, trailing: true, browser: true */
5
6/*
7 * jquery.rs.carousel-touch @VERSION
8 * @HOMEPAGE
9 *
10 * Copyright (c) 2013 Richard Scarrott
11 * http://www.richardscarrott.co.uk
12 *
13 * Dual licensed under the MIT and GPL licenses:
14 * http://www.opensource.org/licenses/mit-license.php
15 * http://www.gnu.org/licenses/gpl.html
16 *
17 * Depends:
18 *  jquery.js v1.8+
19 *  jquery.translate3d.js v0.2+ // if passing in translate3d true for hardware acceleration
20 *  jquery.event.drag.js v2.3+ // https://github.com/richardscarrott/jquery.threedubmedia/
21 *  jquery.ui.widget.js v1.8+
22 *  jquery.rs.carousel.js v0.11.1+
23 */
24
25(function ($) {
26
27    'use strict';
28
29    var _super = $.Widget.prototype;
30    
31    // custom drag, if supported it uses 'translate3d' instead of 'left / top'
32    // for hardware acceleration in iOS et al.
33    $.widget('rs.draggable3d', {
34    
35        options: {
36            axis: 'x',
37            translate3d: false
38        },
39        
40        _create: function () {
41
42            this.eventNamespace = this.eventNamespace || '.' + this.widgetName;
43            this._bindDragEvents();
44            
45            return;
46        },
47
48        _bindDragEvents: function () {
49
50            var self = this,
51                eventNamespace = this.eventNamespace;
52
53            this.element
54                .unbind(eventNamespace)
55                .bind('dragstart' + eventNamespace, {
56                    axis: this.options.axis
57                }, function (e) {
58                    self._start(e);
59                })
60                .bind('drag' + eventNamespace, function (e) {
61                    self._drag(e);
62                })
63                .bind('dragend' + eventNamespace, function (e) {
64                    self._end(e);
65                });
66
67            return;
68        },
69        
70        _getPosStr: function () {
71            
72            return this.options.axis === 'x' ? 'left' : 'top';
73            
74        },
75        
76        _start: function (e) {
77            
78            this.mouseStartPos = this.options.axis === 'x' ? e.pageX : e.pageY;
79            
80            if (this.options.translate3d) {
81                this.elPos = this.element.css('translate3d')[this.options.axis];
82            }
83            else {
84                this.elPos = parseInt(this.element.position()[this._getPosStr()], 10);
85            }
86            
87            this._trigger('start', e);
88
89            return;
90        },
91        
92        _drag: function (e) {
93        
94            var page = this.options.axis === 'x' ? e.pageX : e.pageY,
95                pos = (page - this.mouseStartPos) + this.elPos,
96                cssProps = {};
97            
98            if (this.options.translate3d) {
99                cssProps.translate3d = this.options.axis === 'x' ? {x: pos} : {y: pos};
100            }
101            else {
102                cssProps[this._getPosStr()] = pos;
103            }
104            
105            this.element.css(cssProps);
106            
107            return;
108        },
109        
110        _end: function (e) {
111            
112            this._trigger('stop', e);
113            
114            return;
115        },
116
117        _setOption: function (option) {
118        
119            _super._setOption.apply(this, arguments);
120            
121            if (option === 'axis') {
122                this._bindDragEvents();
123            }
124            
125            return;
126        },
127        
128        destroy: function () {
129        
130            var cssProps = {};
131            
132            if (this.options.translate3d) {
133                cssProps.translate3d = {};
134            }
135            else {
136                cssProps[this._getPosStr()] = '';
137            }
138            
139            this.element.css(cssProps);
140
141            _super.destroy.apply(this);
142            
143            return;
144        }
145        
146    });

147    
148})(jQuery);
149
150
151
152// touch extension
153(function ($) {
154    
155    'use strict';
156
157    var _super = $.rs.carousel.prototype;
158        
159    $.widget('rs.carousel', $.rs.carousel, {
160    
161        options: {
162            touch: false,
163            sensitivity: 1
164        },
165        
166        _create: function () {
167            
168            _super._create.apply(this);
169
170            this._initDrag();
171            
172            return;
173        },
174
175        _initDrag: function () {
176
177            var self = this;
178
179            this.elements.runner
180                .draggable3d({
181                    translate3d: this.options.translate3d,
182                    axis: this._getAxis(),
183                    start: function (e) {
184                        e = e.originalEvent.touches ? e.originalEvent.touches[0] : e;
185                        self._dragStartHandler(e);
186                    },
187                    stop: function (e) {
188                        e = e.originalEvent.touches ? e.originalEvent.touches[0] : e;
189                        self._dragStopHandler(e);
190                    }
191                });
192
193            return;
194        },
195
196        _destroyDrag: function () {
197
198            this.elements.runner
199                .draggable3d('destroy');
200
201            // go back to page as destroying draggable3d removes elements position
202            this.goToPage(this.index, false, undefined, true);
203
204            return;
205        },
206        
207        _getAxis: function () {
208            
209            return this.isHorizontal ? 'x' : 'y';
210        
211        },
212        
213        _dragStartHandler: function (e) {
214        
215            // remove transition class to ensure drag doesn't transition
216            if (this.options.translate3d) {
217                this.elements.runner
218                    .removeClass(this.widgetFullName + '-runner-transition');
219            }
220        
221            this.startTime = this._getTime();
222            
223            this.startPos = {
224                x: e.pageX,
225                y: e.pageY
226            };
227            
228            return;
229        },
230        
231        _dragStopHandler: function (e) {
232        
233            var time,
234                distance,
235                speed,
236                direction,
237                axis = this._getAxis();
238                
239            // if touch direction changes start date should prob be reset to correctly determine speed...
240            this.endTime = this._getTime();
241            
242            time = this.endTime - this.startTime;
243            
244            this.endPos = {
245                x: e.pageX,
246                y: e.pageY
247            };
248            
249            distance = Math.abs(this.startPos[axis] - this.endPos[axis]);
250            speed = distance / time;
251            direction = this.startPos[axis] > this.endPos[axis] ? 'next' : 'prev';
252
253            if (speed > this.options.sensitivity || distance > this._getMaskDim() / 2) {
254                if ((this.index === this.getNoOfPages() - 1 && direction === 'next') || (this.index === 0 && direction === 'prev')) {
255                    this.goToPage(this.index);
256                }
257                else {
258                    this[direction]();
259                }
260            }
261            else {
262                this.goToPage(this.index); // go back to current page
263            }
264            
265            return;
266        },
267        
268        _getTime: function () {
269            
270            var date = new Date();
271            return date.getTime();
272        
273        },
274        
275        _setOption: function (option, value) {
276        
277            _super._setOption.apply(this, arguments);
278            
279            switch (option) {
280                
281            case 'orientation':
282
283                this._switchAxis();
284
285                break;
286
287            case 'touch':
288                
289                if (value) {
290                    this._initDrag();
291                }
292                else {
293                    this._destroyDrag();
294                }
295
296                break;
297            }
298            
299            return;
300        },
301        
302        _switchAxis: function () {
303        
304            this.elements.runner
305                .draggable3d('option', 'axis', this._getAxis());
306            
307            return;
308        },
309        
310        destroy: function () {
311            
312            this._destroyDrag();
313            _super.destroy.apply(this);
314            
315            return;
316        }
317        
318    });

319
320})(jQuery);