Skip to content

Commit 235a0c1

Browse files
author
Constantin Saguin
committed
Merge pull request brutaldesign#150 from dheera/master
css transitions + horizontal swipe gesture live tracking
2 parents a5a9ff8 + 2264a7e commit 235a0c1

File tree

2 files changed

+106
-28
lines changed

2 files changed

+106
-28
lines changed

‎src/css/swipebox.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,8 @@ html.swipebox-html.swipebox-touch {
1919
-moz-user-select: none;
2020
-ms-user-select: none;
2121
user-select: none;
22+
backface-visibility: hidden;
23+
-webkit-backface-visibility: hidden;
2224
}
2325

2426
#swipebox-slider {
@@ -29,6 +31,8 @@ html.swipebox-html.swipebox-touch {
2931
white-space: nowrap;
3032
position: absolute;
3133
display: none;
34+
backface-visibility: hidden;
35+
-webkit-backface-visibility: hidden;
3236
}
3337
#swipebox-slider .slide {
3438
background: url(../img/loader.gif) no-repeat center center;
@@ -87,6 +91,8 @@ html.swipebox-html.swipebox-touch {
8791
z-index: 999;
8892
height: 50px;
8993
width: 100%;
94+
backface-visibility: hidden;
95+
-webkit-backface-visibility: hidden;
9096
}
9197

9298
#swipebox-action {

‎src/js/jquery.swipebox.js‎

Lines changed: 100 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@
3131
supportSVG = !! document.createElementNS && !! document.createElementNS( 'http://www.w3.org/2000/svg', 'svg').createSVGRect,
3232
winWidth = window.innerWidth ? window.innerWidth : $( window ).width(),
3333
winHeight = window.innerHeight ? window.innerHeight : $( window ).height(),
34+
currentX = 0,
3435
/* jshint multistr: true */
3536
html = '<div id="swipebox-overlay">\
3637
<div id="swipebox-slider"></div>\
@@ -160,24 +161,27 @@
160161

161162
if ( $this.doCssTrans() ) {
162163
$( '#swipebox-slider' ).css( {
163-
'-webkit-transition' : 'left 0.4s ease',
164-
'-moz-transition' : 'left 0.4s ease',
165-
'-o-transition' : 'left 0.4s ease',
166-
'-khtml-transition' : 'left 0.4s ease',
167-
'transition' : 'left 0.4s ease'
164+
'-webkit-transition' : '-webkit-transform 0.4s ease',
165+
'-moz-transition' : '-moz-transform 0.4s ease',
166+
'-o-transition' : '-o-transform 0.4s ease',
167+
'-khtml-transition' : '-khtml-transform 0.4s ease',
168+
'-ms-transition' : '-ms-transform 0.4s ease',
169+
'transition' : 'transform 0.4s ease'
168170
} );
169171
$( '#swipebox-overlay' ).css( {
170172
'-webkit-transition' : 'opacity 1s ease',
171173
'-moz-transition' : 'opacity 1s ease',
172174
'-o-transition' : 'opacity 1s ease',
173175
'-khtml-transition' : 'opacity 1s ease',
176+
'-ms-transition' : 'opacity 1s ease',
174177
'transition' : 'opacity 1s ease'
175178
} );
176179
$( '#swipebox-action, #swipebox-caption' ).css( {
177180
'-webkit-transition' : '0.5s',
178181
'-moz-transition' : '0.5s',
179182
'-o-transition' : '0.5s',
180183
'-khtml-transition' : '0.5s',
184+
'-ms-transition' : '0.5s',
181185
'transition' : '0.5s'
182186
} );
183187
}
@@ -291,10 +295,13 @@
291295
gesture : function () {
292296

293297
var $this = this,
294-
distance = null,
298+
hDistance = null,
295299
vDistance = null,
300+
hDistanceLast = null,
301+
vDistanceLast = null,
296302
vSwipe = false,
297-
swipMinDistance = 10,
303+
hSwipe = false,
304+
hSwipMinDistance = 10,
298305
vSwipMinDistance = 50,
299306
startCoords = {},
300307
endCoords = {},
@@ -309,16 +316,29 @@
309316

310317
$( this ).addClass( 'touching' );
311318

319+
vSwipe = false;
320+
hSwipe = false;
321+
312322
endCoords = event.originalEvent.targetTouches[0];
313323
startCoords.pageX = event.originalEvent.targetTouches[0].pageX;
314324
startCoords.pageY = event.originalEvent.targetTouches[0].pageY;
315325

326+
$('#swipebox-slider').css({
327+
'-webkit-transform' : 'translateX(' + currentX +'%)',
328+
'-moz-transform' : 'translateX(' + currentX + '%)',
329+
'-o-transform' : 'translateX(' + currentX + '%)',
330+
'-khtml-transform' : 'translateX(' + currentX + '%)',
331+
'-ms-transform' : 'translateX(' + currentX + '%)',
332+
'transform' : 'translateX(' + currentX + '%)',
333+
});
334+
316335
$( '.touching' ).bind( 'touchmove',function( event ) {
317336
event.preventDefault();
318337
event.stopPropagation();
319338
endCoords = event.originalEvent.targetTouches[0];
320339

321-
if ( plugin.settings.closeBySwipe ) {
340+
if ( !hSwipe && plugin.settings.closeBySwipe ) {
341+
vDistanceLast = vDistance;
322342
vDistance = endCoords.pageY - startCoords.pageY;
323343
if ( Math.abs( vDistance ) >= vSwipMinDistance || vSwipe ) {
324344
var opacity = 0.75 - Math.abs(vDistance) / slider.height();
@@ -330,6 +350,34 @@
330350
}
331351
}
332352

353+
hDistanceLast = hDistance;
354+
hDistance = endCoords.pageX - startCoords.pageX;
355+
hDistancePercent = hDistance*100/winWidth;
356+
357+
if( !hSwipe && !vSwipe && Math.abs( hDistance ) >= hSwipMinDistance) {
358+
$('#swipebox-slider').css({
359+
'-webkit-transition' : '',
360+
'-moz-transition' : '',
361+
'-o-transition' : '',
362+
'-khtml-transition' : '',
363+
'-ms-transition' : '',
364+
'transition' : ''
365+
});
366+
hSwipe = true;
367+
}
368+
369+
if( hSwipe ) {
370+
$('#swipebox-slider').css({
371+
'-webkit-transform' : 'translateX(' + (currentX + hDistancePercent) +'%)',
372+
'-moz-transform' : 'translateX(' + (currentX + hDistancePercent) + '%)',
373+
'-o-transform' : 'translateX(' + (currentX + hDistancePercent) + '%)',
374+
'-khtml-transform' : 'translateX(' + (currentX + hDistancePercent) + '%)',
375+
'-ms-transform' : 'translateX(' + (currentX + hDistancePercent) + '%)',
376+
'transform' : 'translateX(' + (currentX + hDistancePercent) + '%)'
377+
});
378+
}
379+
380+
333381
} );
334382

335383
return false;
@@ -338,8 +386,23 @@
338386
event.preventDefault();
339387
event.stopPropagation();
340388

341-
if ( plugin.settings.closeBySwipe ) {
342-
if ( slider.css( 'opacity' ) <= 0.5) {
389+
$('#swipebox-slider').css({
390+
'-webkit-transition' : '-webkit-transform 0.4s ease',
391+
'-moz-transition' : '-moz-transform 0.4s ease',
392+
'-o-transition' : '-o-transform 0.4s ease',
393+
'-khtml-transition' : '-khtml-transform 0.4s ease',
394+
'-ms-transition' : '-ms-transform 0.4s ease',
395+
'transition' : 'transform 0.4s ease'
396+
});
397+
398+
vDistance = endCoords.pageY - startCoords.pageY;
399+
hDistance = endCoords.pageX - startCoords.pageX;
400+
hDistancePercent = hDistance*100/winWidth;
401+
402+
403+
if ( vSwipe ) {
404+
vSwipe = false;
405+
if ( Math.abs( vDistance ) >= 2*vSwipMinDistance && Math.abs(vDistance) > Math.abs(vDistanceLast)) {
343406
var vOffset = vDistance > 0 ? slider.height() : - slider.height();
344407
slider.animate( { top: vOffset + 'px', 'opacity': 0 },
345408
300,
@@ -350,24 +413,15 @@
350413
slider.animate( { top: 0, 'opacity': 1 }, 300 );
351414
}
352415

353-
if ( vSwipe ) {
354-
vSwipe = false;
355-
return;
416+
} else if ( hSwipe ) {
417+
hSwipe = false;
418+
if( hDistance >= hSwipMinDistance && hDistance >= hDistanceLast) {
419+
// swipeLeft
420+
$this.getPrev();
421+
} else if ( hDistance <= -hSwipMinDistance && hDistance <= hDistanceLast) {
422+
// swipeRight
423+
$this.getNext();
356424
}
357-
}
358-
359-
distance = endCoords.pageX - startCoords.pageX;
360-
361-
if ( distance >= swipMinDistance ) {
362-
363-
// swipeLeft
364-
$this.getPrev();
365-
366-
} else if ( distance <= - swipMinDistance ) {
367-
368-
// swipeRight
369-
$this.getNext();
370-
371425
} else {
372426
// tap
373427
if ( ! bars.hasClass( 'visible-bars' ) ) {
@@ -379,6 +433,15 @@
379433
}
380434
}
381435

436+
$('#swipebox-slider').css({
437+
'-webkit-transform' : 'translateX(' + currentX + '%)',
438+
'-moz-transform' : 'translateX(' + currentX + '%)',
439+
'-o-transform' : 'translateX(' + currentX + '%)',
440+
'-khtml-transform' : 'translateX(' + currentX + '%)',
441+
'-ms-transform' : 'translateX(' + currentX + '%)',
442+
'transform' : 'translateX(' + currentX + '%)'
443+
});
444+
382445
$( '.touching' ).off( 'touchmove' ).removeClass( 'touching' );
383446

384447
} );
@@ -537,9 +600,18 @@
537600
isFirst = isFirst || false;
538601

539602
var slider = $( '#swipebox-slider' );
603+
604+
currentX = -index*100;
540605

541606
if ( this.doCssTrans() ) {
542-
slider.css( { left : ( -index*100 )+'%' } );
607+
slider.css({
608+
'-webkit-transform' : 'translateX(' + (-index*100)+'%)',
609+
'-moz-transform' : 'translateX(' + (-index*100)+'%)',
610+
'-o-transform' : 'translateX(' + (-index*100)+'%)',
611+
'-khtml-transform' : 'translateX(' + (-index*100)+'%)',
612+
'-ms-transform' : 'translateX(' + (-index*100)+'%)',
613+
'transform' : 'translateX(' + (-index*100)+'%)',
614+
});
543615
} else {
544616
slider.animate( { left : ( -index*100 )+'%' } );
545617
}

0 commit comments

Comments
 (0)