Skip to content

Commit 5cebe47

Browse files
jireniusjirenius
committed
Updated package.json
Added slideVertical Fixed test
1 parent 108fac7 commit 5cebe47

File tree

5 files changed

+77
-52
lines changed

5 files changed

+77
-52
lines changed

‎.babelrc

+3-3
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,12 @@
22
"env": {
33
"test": {
44
"presets": [
5-
["env"]
5+
["@babel/env"]
66
]
77
},
88
"commonjs": {
99
"presets": [
10-
["env", {
10+
["@babel/env", {
1111
"useBuiltIns": false
1212
}]
1313
],
@@ -17,7 +17,7 @@
1717
},
1818
"es": {
1919
"presets": [
20-
["env", {
20+
["@babel/env", {
2121
"useBuiltIns": false,
2222
"modules": false
2323
}]

‎package.json

+14-14
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@
88
"files": [
99
"dist",
1010
"lib",
11-
"src",
1211
"index.js",
1312
"anim.js",
1413
"array.js",
@@ -21,10 +20,11 @@
2120
"build": "npm run clean && npm run build:commonjs && npm run build:es && npm run build:umd && npm run build:umd:min",
2221
"build:commonjs": "cross-env BABEL_ENV=commonjs babel src --out-dir lib",
2322
"build:es": "cross-env BABEL_ENV=es babel src --out-dir ./",
24-
"build:umd": "cross-env BABEL_ENV=es NODE_ENV=development node_modules/.bin/rollup src/index.js --config --sourcemap --file dist/modapp-utils.js",
23+
"build:umd": "cross-env BABEL_ENV=es NODE_ENV=development rollup src/index.js --config --sourcemap --file dist/modapp-utils.js",
2524
"build:umd:min": "cross-env BABEL_ENV=es NODE_ENV=production rollup src/index.js --config --file dist/modapp-utils.min.js",
2625
"eslint": "eslint src/**/*.js",
27-
"test": "npm run eslint"
26+
"jest": "jest src --coverage",
27+
"test": "npm run eslint && npm run jest"
2828
},
2929
"repository": {
3030
"type": "git",
@@ -34,16 +34,16 @@
3434
"license": "MIT",
3535
"homepage": "https://github.com/jirenius/modapp-utils",
3636
"devDependencies": {
37-
"babel-cli": "^6.26.0",
38-
"babel-plugin-external-helpers": "^6.22.0",
39-
"babel-preset-env": "^1.6.1",
40-
"cross-env": "^5.2.0",
41-
"eslint": "^4.19.1",
42-
"rimraf": "^2.6.2",
43-
"rollup": "^0.60.7",
44-
"rollup-plugin-babel": "^3.0.5",
45-
"rollup-plugin-commonjs": "^9.1.3",
46-
"rollup-plugin-node-resolve": "^3.3.0",
47-
"rollup-plugin-uglify": "^4.0.0"
37+
"@babel/cli": "^7.10.1",
38+
"@babel/core": "^7.10.2",
39+
"@babel/preset-env": "^7.10.2",
40+
"@rollup/plugin-babel": "^5.0.3",
41+
"babel-jest": "^26.0.1",
42+
"cross-env": "^7.0.2",
43+
"eslint": "^7.2.0",
44+
"jest": "^26.0.1",
45+
"rimraf": "^3.0.2",
46+
"rollup": "^2.14.0",
47+
"rollup-plugin-terser": "^6.1.0"
4848
}
4949
}

‎rollup.config.js

+5-17
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,14 @@
1-
import babel from 'rollup-plugin-babel';
2-
import resolve from 'rollup-plugin-node-resolve';
3-
import commonjs from 'rollup-plugin-commonjs';
4-
import { uglify } from 'rollup-plugin-uglify';
1+
import babel from '@rollup/plugin-babel';
2+
import { terser } from "rollup-plugin-terser";
53

64
export default {
75
input: 'src/index.js',
86
output: {
9-
format: 'umd',
107
name: 'modapp-utils',
11-
exports: 'named'
8+
format: 'umd'
129
},
1310
plugins: [
14-
resolve({
15-
jsnext: true,
16-
main: true,
17-
browser: true,
18-
}),
19-
babel({
20-
exclude: 'node_modules/**',
21-
plugins: [ 'external-helpers' ]
22-
}),
23-
commonjs(),
24-
(process.env.NODE_ENV === 'production' && uglify()),
11+
babel({ babelHelpers: 'bundled' }),
12+
(process.env.NODE_ENV === 'production' && terser()),
2513
],
2614
};

‎src/anim.js

+50-16
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ let easeOut = function(p) {
5555
};
5656

5757
let unstyledCbs = null;
58-
let getUnstyledHeight = function(el, cb) {
58+
let getUnstyledDimensions = function(el, cb) {
5959
if (unstyledCbs !== null) {
6060
unstyledCbs.push([ el, cb, '', 0 ]);
6161
return;
@@ -74,6 +74,7 @@ let getUnstyledHeight = function(el, cb) {
7474
// Check calculated heights
7575
for (let c of cs) {
7676
c[3] = c[0].offsetHeight;
77+
c[4] = c[0].offsetWidth;
7778
}
7879

7980
// Reset all styles
@@ -83,7 +84,7 @@ let getUnstyledHeight = function(el, cb) {
8384

8485
// Call all callbacks
8586
for (let c of cs) {
86-
c[1](c[3]);
87+
c[1](c[3], c[4]);
8788
}
8889
});
8990
};
@@ -224,7 +225,7 @@ export let swipeIn = function(el, direction, opt = {}) {
224225
};
225226

226227
/**
227-
* Slides down an element while while fading it in.
228+
* Slides an element vertically while fading it in.
228229
* @param {HTMLElement} el HTML element to slide up/down.
229230
* @param {boolean} show Flag if element should be slide up (show), will slide down (hide) if false.
230231
* @param {object} [opt] Optional parameters
@@ -233,25 +234,58 @@ export let swipeIn = function(el, direction, opt = {}) {
233234
* @param {function} [opt.callback] Optional callback function once the animation is complete.
234235
* @returns {object} Animation token
235236
*/
236-
export let slideVertical = function (el, show, opt = {}) {
237+
export let slideVertical = function (el, show, opt) {
238+
return internalSlide(false, el, show, opt);
239+
};
240+
241+
/**
242+
* Slides an element horizontally while fading it in.
243+
* @param {HTMLElement} el HTML element to slide up/down.
244+
* @param {boolean} show Flag if element should be slide up (show), will slide down (hide) if false.
245+
* @param {object} [opt] Optional parameters
246+
* @param {number} [opt.duration] Optional fade duration in milliseconds.
247+
* @param {number} [opt.reset] Optional reset flag. If true, opacity and position will be reset. If false, animation will continue from current height and opacity. Default is true.
248+
* @param {function} [opt.callback] Optional callback function once the animation is complete.
249+
* @returns {object} Animation token
250+
*/
251+
export let slideHorizontal = function(el, show, opt) {
252+
return internalSlide(true, el, show, opt);
253+
};
254+
255+
/**
256+
* Slides an element horizontally while fading it in.
257+
* @param {boolean} hori Flag if slide should be horizontal instead of vertical.
258+
* @param {HTMLElement} el HTML element to slide up/down.
259+
* @param {boolean} show Flag if element should be slide up (show), will slide down (hide) if false.
260+
* @param {object} [opt] Optional parameters
261+
* @param {number} [opt.duration] Optional fade duration in milliseconds.
262+
* @param {number} [opt.reset] Optional reset flag. If true, opacity and position will be reset. If false, animation will continue from current height and opacity. Default is true.
263+
* @param {function} [opt.callback] Optional callback function once the animation is complete.
264+
* @returns {object} Animation token
265+
* @private
266+
*/
267+
let internalSlide = function (hori, el, show, opt = {}) {
237268
let token = { requestId: true };
238269
let progress = 0;
239-
let origin, target, height, e;
270+
let origin, target, d, e;
240271
let reset = opt.reset !== undefined ? opt.reset : true;
241272
let f = reset || show
242-
? getUnstyledHeight
243-
: (el, cb) => cb(0);
273+
? getUnstyledDimensions
274+
: (el, cb) => cb(0, 0);
275+
let prop = hori ? 'width' : 'height';
276+
let offsetProp = hori ? 'offsetWidth' : 'offsetHeight';
244277

245-
f(el, unstyledHeight => {
278+
f(el, (unstyledHeight, unstyledWidth) => {
246279
if (!token.requestId) {
247280
return;
248281
}
282+
let dim = hori ? unstyledWidth : unstyledHeight;
249283

250284
if (reset) {
251285
el.style.opacity = show ? 0 : 1;
252-
target = show ? unstyledHeight : 0;
253-
origin = show ? 0 : unstyledHeight;
254-
el.style.height = origin + 'px';
286+
target = show ? dim : 0;
287+
origin = show ? 0 : dim;
288+
el.style[prop] = origin + 'px';
255289
} else {
256290
progress = invert(
257291
el.style.opacity
@@ -268,14 +302,14 @@ export let slideVertical = function (el, show, opt = {}) {
268302
}
269303

270304
target = show
271-
? unstyledHeight
305+
? dim
272306
: 0;
273307

274308
e = easeOut(progress);
275-
height = el.style.display === 'none'
309+
d = el.style.display === 'none'
276310
? 0
277-
: el.offsetHeight;
278-
origin = (height - (e * target)) / (1 - e);
311+
: el[offsetProp];
312+
origin = (d - (e * target)) / (1 - e);
279313
}
280314

281315
el.style.display = '';
@@ -287,7 +321,7 @@ export let slideVertical = function (el, show, opt = {}) {
287321
p => {
288322
e = easeOut(p);
289323
el.style.opacity = show ? p : 1 - p;
290-
el.style.height = (e * target + (1 - e) * origin) + 'px';
324+
el.style[prop] = (e * target + (1 - e) * origin) + 'px';
291325
},
292326
() => slideDone(el, show, opt.callback),
293327
token

‎src/uri.test.js

+5-2
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,12 @@ import * as uri from './uri.js';
33
describe('uri', () => {
44

55
let setSearch = function(val) {
6-
Object.defineProperty(window.location, 'search', {
6+
global.window = Object.create(window);
7+
Object.defineProperty(window, 'location', {
78
writable: true,
8-
value: val
9+
value: {
10+
search: val
11+
}
912
});
1013
};
1114

0 commit comments

Comments
 (0)