Skip to content

Commit

Permalink
Support drag for the fade type(#30, #62).
Browse files Browse the repository at this point in the history
  • Loading branch information
@NaotoshiFujita
NaotoshiFujita committed Jun 17, 2020
1 parent 0d8311a commit fc2aec9
Show file tree
Hide file tree
Showing 8 changed files with 91 additions and 66 deletions.
47 changes: 28 additions & 19 deletions dist/js/splide.esm.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/*!
* Splide.js
* Version : 2.3.9
* Version : 2.4.0
* License : MIT
* Copyright: 2020 Naotoshi Fujita
*/
Expand Down Expand Up @@ -827,10 +827,6 @@ var FADE = 'fade';
*/

/* harmony default export */ var fade = (function (Splide, Components) {
if (Components.Drag) {
Components.Drag.required = false;
}

var Fade = {
/**
* Called when the component is mounted.
Expand Down Expand Up @@ -3895,7 +3891,7 @@ var FRICTION_REDUCER = 7;
var startCoord;
/**
* Analyzed info on starting drag.
*
*
* @type {Object|null}
*/

Expand Down Expand Up @@ -3940,7 +3936,7 @@ var FRICTION_REDUCER = 7;
*
* @type {boolean}
*/
disabled: !Splide.options.drag,
disabled: false,

/**
* Called when the component is mounted.
Expand Down Expand Up @@ -3994,8 +3990,10 @@ var FRICTION_REDUCER = 7;
e.preventDefault();
}

var position = startCoord[axis] + currentInfo.offset[axis];
Track.translate(resist(position));
if (!Splide.is(FADE)) {
var position = startCoord[axis] + currentInfo.offset[axis];
Track.translate(resist(position));
}
} else {
if (shouldMove(currentInfo)) {
Splide.emit('drag', startInfo);
Expand Down Expand Up @@ -4038,7 +4036,7 @@ var FRICTION_REDUCER = 7;


function resist(position) {
if (!Splide.is(LOOP)) {
if (Splide.is(SLIDE)) {
var sign = Track.sign;

var _start = sign * Track.trim(Track.toPosition(0));
Expand Down Expand Up @@ -4086,24 +4084,35 @@ var FRICTION_REDUCER = 7;
if (absV > 0) {
var Layout = Components.Layout;
var options = Splide.options;
var index = Splide.index;
var sign = velocity < 0 ? -1 : 1;
var destination = Track.position;
var adjacent = index + sign * Track.sign;
var destIndex = index;

if (!Splide.is(FADE)) {
var destination = Track.position;

if (absV > options.flickVelocityThreshold && abs(info.offset[axis]) < options.swipeDistanceThreshold) {
destination += sign * Math.min(absV * options.flickPower, Layout.width * (options.flickMaxPages || 1));
if (absV > options.flickVelocityThreshold && abs(info.offset[axis]) < options.swipeDistanceThreshold) {
destination += sign * Math.min(absV * options.flickPower, Layout.width * (options.flickMaxPages || 1));
}

destIndex = Track.toIndex(destination);
}
/*
* Do not allow the track to go to a previous position.
* Always use the adjacent index for the fade mode.
*/

var index = Track.toIndex(destination); // Do not allow the track to go to a previous position.

if (index === Splide.index) {
index += sign * Track.sign;
if (destIndex === index) {
destIndex = adjacent;
}

if (!Splide.is(LOOP)) {
index = between(index, 0, Controller.edgeIndex);
if (Splide.is(SLIDE)) {
destIndex = between(destIndex, 0, Controller.edgeIndex);
}

Controller.go(index, options.isNavigation);
Controller.go(destIndex, options.isNavigation);
}
}
/**
Expand Down
47 changes: 28 additions & 19 deletions dist/js/splide.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/*!
* Splide.js
* Version : 2.3.9
* Version : 2.4.0
* License : MIT
* Copyright: 2020 Naotoshi Fujita
*/
Expand Down Expand Up @@ -817,10 +817,6 @@ var FADE = 'fade';
*/

/* harmony default export */ var fade = (function (Splide, Components) {
if (Components.Drag) {
Components.Drag.required = false;
}

var Fade = {
/**
* Called when the component is mounted.
Expand Down Expand Up @@ -3885,7 +3881,7 @@ var FRICTION_REDUCER = 7;
var startCoord;
/**
* Analyzed info on starting drag.
*
*
* @type {Object|null}
*/

Expand Down Expand Up @@ -3930,7 +3926,7 @@ var FRICTION_REDUCER = 7;
*
* @type {boolean}
*/
disabled: !Splide.options.drag,
disabled: false,

/**
* Called when the component is mounted.
Expand Down Expand Up @@ -3984,8 +3980,10 @@ var FRICTION_REDUCER = 7;
e.preventDefault();
}

var position = startCoord[axis] + currentInfo.offset[axis];
Track.translate(resist(position));
if (!Splide.is(FADE)) {
var position = startCoord[axis] + currentInfo.offset[axis];
Track.translate(resist(position));
}
} else {
if (shouldMove(currentInfo)) {
Splide.emit('drag', startInfo);
Expand Down Expand Up @@ -4028,7 +4026,7 @@ var FRICTION_REDUCER = 7;


function resist(position) {
if (!Splide.is(LOOP)) {
if (Splide.is(SLIDE)) {
var sign = Track.sign;

var _start = sign * Track.trim(Track.toPosition(0));
Expand Down Expand Up @@ -4076,24 +4074,35 @@ var FRICTION_REDUCER = 7;
if (absV > 0) {
var Layout = Components.Layout;
var options = Splide.options;
var index = Splide.index;
var sign = velocity < 0 ? -1 : 1;
var destination = Track.position;
var adjacent = index + sign * Track.sign;
var destIndex = index;

if (!Splide.is(FADE)) {
var destination = Track.position;

if (absV > options.flickVelocityThreshold && abs(info.offset[axis]) < options.swipeDistanceThreshold) {
destination += sign * Math.min(absV * options.flickPower, Layout.width * (options.flickMaxPages || 1));
if (absV > options.flickVelocityThreshold && abs(info.offset[axis]) < options.swipeDistanceThreshold) {
destination += sign * Math.min(absV * options.flickPower, Layout.width * (options.flickMaxPages || 1));
}

destIndex = Track.toIndex(destination);
}
/*
* Do not allow the track to go to a previous position.
* Always use the adjacent index for the fade mode.
*/

var index = Track.toIndex(destination); // Do not allow the track to go to a previous position.

if (index === Splide.index) {
index += sign * Track.sign;
if (destIndex === index) {
destIndex = adjacent;
}

if (!Splide.is(LOOP)) {
index = between(index, 0, Controller.edgeIndex);
if (Splide.is(SLIDE)) {
destIndex = between(destIndex, 0, Controller.edgeIndex);
}

Controller.go(index, options.isNavigation);
Controller.go(destIndex, options.isNavigation);
}
}
/**
Expand Down
4 changes: 2 additions & 2 deletions dist/js/splide.min.js
View file

Large diffs are not rendered by default.

Binary file modified dist/js/splide.min.js.gz
View file
Binary file not shown.
2 changes: 1 addition & 1 deletion package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@splidejs/splide",
"version": "2.3.9",
"version": "2.4.0",
"description": "Splide is a lightweight and powerful slider without any dependencies.",
"author": "Naotoshi Fujita",
"license": "MIT",
Expand Down
51 changes: 31 additions & 20 deletions src/js/components/drag/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
* @copyright Naotoshi Fujita. All rights reserved.
*/

import { LOOP } from '../../constants/types';
import { FADE, SLIDE } from '../../constants/types';
import { TTB } from '../../constants/directions';
import { IDLE } from '../../constants/states';
import { between } from '../../utils/utils';
Expand Down Expand Up @@ -56,7 +56,7 @@ export default ( Splide, Components ) => {

/**
* Analyzed info on starting drag.
*
*
* @type {Object|null}
*/
let startInfo;
Expand Down Expand Up @@ -100,7 +100,7 @@ export default ( Splide, Components ) => {
*
* @type {boolean}
*/
disabled: ! Splide.options.drag,
disabled: false,

/**
* Called when the component is mounted.
Expand Down Expand Up @@ -153,8 +153,10 @@ export default ( Splide, Components ) => {
e.preventDefault();
}

const position = startCoord[ axis ] + currentInfo.offset[ axis ];
Track.translate( resist( position ) );
if ( ! Splide.is( FADE ) ) {
const position = startCoord[ axis ] + currentInfo.offset[ axis ];
Track.translate( resist( position ) );
}
} else {
if ( shouldMove( currentInfo ) ) {
Splide.emit( 'drag', startInfo );
Expand Down Expand Up @@ -193,7 +195,7 @@ export default ( Splide, Components ) => {
* @return {Object} - Adjusted position.
*/
function resist( position ) {
if ( ! Splide.is( LOOP ) ) {
if ( Splide.is( SLIDE ) ) {
const sign = Track.sign;
const start = sign * Track.trim( Track.toPosition( 0 ) );
const end = sign * Track.trim( Track.toPosition( Controller.edgeIndex ) );
Expand Down Expand Up @@ -235,28 +237,37 @@ export default ( Splide, Components ) => {
const absV = abs( velocity );

if ( absV > 0 ) {
const Layout = Components.Layout;
const options = Splide.options;
const sign = velocity < 0 ? -1 : 1;
const Layout = Components.Layout;
const options = Splide.options;
const index = Splide.index;
const sign = velocity < 0 ? -1 : 1;
const adjacent = index + sign * Track.sign;

let destination = Track.position;
let destIndex = index;

if ( absV > options.flickVelocityThreshold && abs( info.offset[ axis ] ) < options.swipeDistanceThreshold ) {
destination += sign * Math.min( absV * options.flickPower, Layout.width * ( options.flickMaxPages || 1 ) );
}
if ( ! Splide.is( FADE ) ) {
let destination = Track.position;

let index = Track.toIndex( destination );
if ( absV > options.flickVelocityThreshold && abs( info.offset[ axis ] ) < options.swipeDistanceThreshold ) {
destination += sign * Math.min( absV * options.flickPower, Layout.width * ( options.flickMaxPages || 1 ) );
}

destIndex = Track.toIndex( destination );
}

// Do not allow the track to go to a previous position.
if ( index === Splide.index ) {
index += sign * Track.sign;
/*
* Do not allow the track to go to a previous position.
* Always use the adjacent index for the fade mode.
*/
if ( destIndex === index ) {
destIndex = adjacent;
}

if ( ! Splide.is( LOOP ) ) {
index = between( index, 0, Controller.edgeIndex );
if ( Splide.is( SLIDE ) ) {
destIndex = between( destIndex, 0, Controller.edgeIndex );
}

Controller.go( index, options.isNavigation );
Controller.go( destIndex, options.isNavigation );
}
}

Expand Down
4 changes: 0 additions & 4 deletions src/js/transitions/fade/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,10 +18,6 @@ import { unit } from "../../utils/utils";
* @return {Object} - The component object.
*/
export default ( Splide, Components ) => {
if ( Components.Drag ) {
Components.Drag.required = false;
}

const Fade = {
/**
* Called when the component is mounted.
Expand Down

0 comments on commit fc2aec9

Please sign in to comment.