Skip to content

Commit

Permalink
fix a drag issue when slides have img child
Browse files Browse the repository at this point in the history
  • Loading branch information
@ganlanyuan
ganlanyuan committed Sep 5, 2017
1 parent 0552400 commit 8f8c4f7
Show file tree
Hide file tree
Showing 10 changed files with 1,475 additions and 240 deletions.
2 changes: 1 addition & 1 deletion dist/min/tiny-slider.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/sourcemaps/tiny-slider.js.map
View file

Large diffs are not rendered by default.

85 changes: 41 additions & 44 deletions dist/tiny-slider.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1030,7 +1030,6 @@ var tns = function(options) {
// mouse drag
if (hasMouseDrag) {
var mouseDrag = getOption('mouseDrag'),
mousePressed = false,
isDragEvent = false;
}

Expand Down Expand Up @@ -2463,8 +2462,8 @@ var tns = function(options) {
return e.target || e.srcElement;
}

function isLinkElement(el) {
return el.tagName.toLowerCase() === 'a';
function isTouchEvent(e) {
return e.type.indexOf('touch') >= 0;
}

function preventDefaultBehavior(e) {
Expand All @@ -2477,46 +2476,47 @@ var tns = function(options) {

function onTouchOrMouseStart(e) {
e = e || win.event;
if (isLinkElement(getTarget(e)) && e.type !== 'touchstart') { preventDefaultBehavior(e); }
var ev;

var ev = e.type === 'touchstart' ? e.changedTouches[0] : e;
startX = parseInt(ev.clientX);
startY = parseInt(ev.clientY);
translateInit = parseFloat(container.style[transformAttr].replace(transformPrefix, '').replace(transformPostfix, ''));

if (e.type === 'touchstart') {
if (isTouchEvent(e)) {
ev = e.changedTouches[0];
events.emit('touchStart', info(e));
} else {
ev = e;
preventDefaultBehavior(e);
events.emit('dragStart', info(e));
mousePressed = true;
}

startX = parseInt(ev.clientX);
startY = parseInt(ev.clientY);
translateInit = parseFloat(container.style[transformAttr].replace(transformPrefix, '').replace(transformPostfix, ''));
}

function onTouchOrMouseMove(e) {
e = e || win.event;

// "mousemove" event after "mousedown" indecate it's "drag", not "click"
// set isDragEvent to true
if (mousePressed && e.type === 'mousemove' && !isDragEvent) {
isDragEvent = true;
}

// make sure touch started or mouse draged
if (startX !== null) {
if (isLinkElement(getTarget(e)) && e.type !== 'touchmove') { preventDefaultBehavior(e); }
var ev;
if (isTouchEvent(e)) {
ev = e.changedTouches[0];
} else {
ev = e;
preventDefaultBehavior(e);
}

var ev = e.type === 'touchmove' ? e.changedTouches[0] : e;
disX = parseInt(ev.clientX) - startX;
disY = parseInt(ev.clientY) - startY;

if (getTouchDirection(toDegree(disY, disX), 15) === options.axis) {
touchedOrDraged = true;

if (e.type === 'touchmove') {
if (getTouchDirection(toDegree(disY, disX), 15) === options.axis && disX) {
if (isTouchEvent(e)) {
events.emit('touchMove', info(e));
} else {
// "mousemove" event after "mousedown" indecate
// it is "drag", not "click"
if (!isDragEvent) { isDragEvent = true; }
events.emit('dragMove', info(e));
}
if (!touchedOrDraged) { touchedOrDraged = true; }

var x = translateInit;
if (horizontal) {
Expand All @@ -2542,13 +2542,18 @@ var tns = function(options) {
function onTouchOrMouseEnd(e) {
e = e || win.event;

// reset mousePressed
if (mousePressed) { mousePressed = false; }

if (touchedOrDraged) {
touchedOrDraged = false;
var ev;

if (isTouchEvent(e)) {
ev = e.changedTouches[0];
events.emit('touchEnd', info(e));
} else {
ev = e;
events.emit('dragEnd', info(e));
}

var ev = e.type.indexOf('touch') === 0 ? e.changedTouches[0] : e;
disX = parseInt(ev.clientX) - startX;
disY = parseInt(ev.clientY) - startY;

Expand All @@ -2574,29 +2579,21 @@ var tns = function(options) {
}
}

if (e.type.indexOf('touch') === 0) {
events.emit('touchEnd', info(e));
} else {
events.emit('dragEnd', info(e));
}

render();
}

// drag vs click
if (isDragEvent) {
// reset isDragEvent
isDragEvent = false;
// drag vs click
if (isDragEvent) {
// reset isDragEvent
isDragEvent = false;

// prevent "click"
var target = getTarget(e);
if (isLinkElement(target)) {
// prevent "click"
var target = getTarget(e);
addEvents(target, {'click': function preventClick(e) {
preventDefaultBehavior(e);
removeEvents(target, {'click': preventClick});
}});
}
}
}
}
}

// === RESIZE FUNCTIONS === //
Expand Down
85 changes: 41 additions & 44 deletions src/tiny-slider.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -357,7 +357,6 @@ export var tns = function(options) {
// mouse drag
if (hasMouseDrag) {
var mouseDrag = getOption('mouseDrag'),
mousePressed = false,
isDragEvent = false;
}

Expand Down Expand Up @@ -1790,8 +1789,8 @@ export var tns = function(options) {
return e.target || e.srcElement;
}

function isLinkElement(el) {
return el.tagName.toLowerCase() === 'a';
function isTouchEvent(e) {
return e.type.indexOf('touch') >= 0;
}

function preventDefaultBehavior(e) {
Expand All @@ -1804,46 +1803,47 @@ export var tns = function(options) {

function onTouchOrMouseStart(e) {
e = e || win.event;
if (isLinkElement(getTarget(e)) && e.type !== 'touchstart') { preventDefaultBehavior(e); }
var ev;

var ev = e.type === 'touchstart' ? e.changedTouches[0] : e;
startX = parseInt(ev.clientX);
startY = parseInt(ev.clientY);
translateInit = parseFloat(container.style[transformAttr].replace(transformPrefix, '').replace(transformPostfix, ''));

if (e.type === 'touchstart') {
if (isTouchEvent(e)) {
ev = e.changedTouches[0];
events.emit('touchStart', info(e));
} else {
ev = e;
preventDefaultBehavior(e);
events.emit('dragStart', info(e));
mousePressed = true;
}

startX = parseInt(ev.clientX);
startY = parseInt(ev.clientY);
translateInit = parseFloat(container.style[transformAttr].replace(transformPrefix, '').replace(transformPostfix, ''));
}

function onTouchOrMouseMove(e) {
e = e || win.event;

// "mousemove" event after "mousedown" indecate it's "drag", not "click"
// set isDragEvent to true
if (mousePressed && e.type === 'mousemove' && !isDragEvent) {
isDragEvent = true;
}

// make sure touch started or mouse draged
if (startX !== null) {
if (isLinkElement(getTarget(e)) && e.type !== 'touchmove') { preventDefaultBehavior(e); }
var ev;
if (isTouchEvent(e)) {
ev = e.changedTouches[0];
} else {
ev = e;
preventDefaultBehavior(e);
}

var ev = e.type === 'touchmove' ? e.changedTouches[0] : e;
disX = parseInt(ev.clientX) - startX;
disY = parseInt(ev.clientY) - startY;

if (getTouchDirection(toDegree(disY, disX), 15) === options.axis) {
touchedOrDraged = true;

if (e.type === 'touchmove') {
if (getTouchDirection(toDegree(disY, disX), 15) === options.axis && disX) {
if (isTouchEvent(e)) {
events.emit('touchMove', info(e));
} else {
// "mousemove" event after "mousedown" indecate
// it is "drag", not "click"
if (!isDragEvent) { isDragEvent = true; }
events.emit('dragMove', info(e));
}
if (!touchedOrDraged) { touchedOrDraged = true; }

var x = translateInit;
if (horizontal) {
Expand All @@ -1869,13 +1869,18 @@ export var tns = function(options) {
function onTouchOrMouseEnd(e) {
e = e || win.event;

// reset mousePressed
if (mousePressed) { mousePressed = false; }

if (touchedOrDraged) {
touchedOrDraged = false;
var ev;

if (isTouchEvent(e)) {
ev = e.changedTouches[0];
events.emit('touchEnd', info(e));
} else {
ev = e;
events.emit('dragEnd', info(e));
}

var ev = e.type.indexOf('touch') === 0 ? e.changedTouches[0] : e;
disX = parseInt(ev.clientX) - startX;
disY = parseInt(ev.clientY) - startY;

Expand All @@ -1901,29 +1906,21 @@ export var tns = function(options) {
}
}

if (e.type.indexOf('touch') === 0) {
events.emit('touchEnd', info(e));
} else {
events.emit('dragEnd', info(e));
}

render();
}

// drag vs click
if (isDragEvent) {
// reset isDragEvent
isDragEvent = false;
// drag vs click
if (isDragEvent) {
// reset isDragEvent
isDragEvent = false;

// prevent "click"
var target = getTarget(e);
if (isLinkElement(target)) {
// prevent "click"
var target = getTarget(e);
addEvents(target, {'click': function preventClick(e) {
preventDefaultBehavior(e);
removeEvents(target, {'click': preventClick});
}});
}
}
}
}
}

// === RESIZE FUNCTIONS === //
Expand Down
Loading

0 comments on commit 8f8c4f7

Please sign in to comment.