Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Set pointer capture on the right target #1255

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Set pointer capture on the right target #1255

Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
0be67f1
Set pointer capture on the right target
NavidZ May 15, 2019
10a9957
Fix typo
NavidZ May 15, 2019
6e13450
Add the option to the readme
NavidZ May 15, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 29 additions & 10 deletions src/js/jquery.bxslider.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@
responsive: true,
slideZIndex: 50,
wrapperClass: 'bx-wrapper',
sliderSlopSize: 5,
Copy link

@aleksandrs-ledovskis aleksandrs-ledovskis May 15, 2019 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As I see, all current configuration options have some description in respective README section.

Could you add a short note/confirm what the "slop" value controls (move threshold to discern between slide/click) and what dimensions (pixels) it's measured in?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sorry. I missed it. I didn't know. I added one, Does that sound good?

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great! Hoping that any of project's maintainers can now race ahead with PR merge and new release 🤞


// TOUCH
touchEnabled: true,
Expand Down Expand Up @@ -1117,19 +1118,22 @@
slider.touch.originalPos = el.position();
var orig = e.originalEvent,
touchPoints = (typeof orig.changedTouches !== 'undefined') ? orig.changedTouches : [orig];
var chromePointerEvents = typeof PointerEvent === 'function';
if (chromePointerEvents) {
if (orig.pointerId === undefined) {
return;
}
}
var PointerEventsSupported = typeof PointerEvent === 'function';
if (PointerEventsSupported) {
if (orig.pointerId === undefined) {
// Skip touch events as the rest of the code runs with pointer events already.
return;
}
}
// record the starting touch x, y coordinates
slider.touch.start.x = touchPoints[0].pageX;
slider.touch.start.y = touchPoints[0].pageY;

if (slider.viewport.get(0).setPointerCapture) {
// This captures the event stream to the target to make sure even if the pointer leaves
// the slider bounday in the very next move it still keeps the events.
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Typo. Meant boundary?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed.

if (e.target.setPointerCapture) {
slider.pointerId = orig.pointerId;
slider.viewport.get(0).setPointerCapture(slider.pointerId);
e.target.setPointerCapture(slider.pointerId);
}
// store original event data for click fixation
slider.originalClickTarget = orig.originalTarget || orig.target;
Expand Down Expand Up @@ -1182,8 +1186,23 @@
yMovement = Math.abs(touchPoints[0].pageY - slider.touch.start.y),
value = 0,
change = 0;
// this is swipe
slider.hasMove = true;

if (xMovement > slider.settings.sliderSlopSize || yMovement > slider.settings.sliderSlopSize) {
// From now on all moves will be considered swipe.
slider.hasMove = true;

// Capture the pointerevent stream to the slider instead of the element that the pointerdown
// started on. This ensures the start element such as link doesn't get activated when user
// is done with swiping the slider and releases the pointer.
if (slider.viewport.get(0).setPointerCapture && typeof orig.pointerId !== 'undefined') {
slider.viewport.get(0).setPointerCapture(slider.pointerId);
}
}

// Only move the slider if we determined that we are in swipe mode. This ensures
// users can still click/tap on links even if the pointer moves within sliderSlopSize.
if (!slider.hasMove)
return;

// x axis swipe
if ((xMovement * 3) > yMovement && slider.settings.preventDefaultSwipeX) {
Expand Down