Skip to content

Commit 79a9e73

Browse files
alexmacarthuralexmacarthur
committed
Allow cursor animation to be customized.
1 parent 4747a0d commit 79a9e73

19 files changed

+3110
-3026
lines changed

‎package-lock.json‎

Lines changed: 1413 additions & 1751 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,8 @@
1616
},
1717
"devDependencies": {
1818
"husky": "^8.0.1",
19-
"lerna": "^5.1.1",
20-
"lint-staged": "^13.0.1",
21-
"prettier": "^2.6.2"
19+
"lerna": "^5.1.8",
20+
"lint-staged": "^13.0.3",
21+
"prettier": "^2.7.1"
2222
}
2323
}

‎packages/typeit/__tests__/TypeIt.test.js‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -222,13 +222,14 @@ describe("type()", () => {
222222
describe("move()", () => {
223223
test("Should bookend action with same options when no options passed.", () => {
224224
instance = new TypeIt("#element").move(1);
225+
const queueItems = instance.getQueue().getItems();
225226

226-
instance
227-
.getQueue()
228-
.getItems()
229-
.forEach((item) => {
230-
expect(item.func.constructor.name).toEqual("Function");
231-
});
227+
const firstQueueItem = queueItems.shift();
228+
expect(firstQueueItem.func).toBe(undefined);
229+
230+
queueItems.forEach((item) => {
231+
expect(item.func.constructor.name).toEqual("Function");
232+
});
232233
});
233234

234235
test("Should temporarily update options when specified.", () => {
@@ -385,6 +386,8 @@ describe("reset()", () => {
385386

386387
instance = instance.reset();
387388

389+
// console.log(instance.getOptions());
390+
388391
//-- Ensure the arguments that define these properties were passed.
389392
expect(instance.getOptions()).toMatchSnapshot();
390393

‎packages/typeit/__tests__/__snapshots__/TypeIt.test.js.snap‎

Lines changed: 22 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ exports[`Initial queue only contains startDelay pause. 1`] = `
44
Array [
55
Object {
66
"delay": 250,
7-
"func": [Function],
87
"shouldPauseCursor": [Function],
98
},
109
]
@@ -38,7 +37,6 @@ exports[`break() Should should queue break character object. 1`] = `
3837
Array [
3938
Object {
4039
"delay": 250,
41-
"func": [Function],
4240
"shouldPauseCursor": [Function],
4341
},
4442
Object {
@@ -74,7 +72,6 @@ exports[`delete() Should temporarily update options when specified. 1`] = `
7472
Array [
7573
Object {
7674
"delay": 250,
77-
"func": [Function],
7875
"shouldPauseCursor": [Function],
7976
},
8077
Object {
@@ -92,7 +89,6 @@ exports[`empty() addSplitPause() Adds different even split pause around strings.
9289
Array [
9390
Object {
9491
"delay": 250,
95-
"func": [Function],
9692
"shouldPauseCursor": [Function],
9793
},
9894
Object {
@@ -189,7 +185,6 @@ exports[`empty() addSplitPause() Adds even split pause around strings. 1`] = `
189185
Array [
190186
Object {
191187
"delay": 250,
192-
"func": [Function],
193188
"shouldPauseCursor": [Function],
194189
},
195190
]
@@ -199,7 +194,6 @@ exports[`empty() addSplitPause() Adds split pause around strings when value is a
199194
Array [
200195
Object {
201196
"delay": 250,
202-
"func": [Function],
203197
"shouldPauseCursor": [Function],
204198
},
205199
Object {
@@ -296,7 +290,6 @@ exports[`empty() addSplitPause() Inserts split pause around multiple strings. 1`
296290
Array [
297291
Object {
298292
"delay": 250,
299-
"func": [Function],
300293
"shouldPauseCursor": [Function],
301294
},
302295
Object {
@@ -487,7 +480,6 @@ exports[`move() Should temporarily update options when specified. 1`] = `
487480
Array [
488481
Object {
489482
"delay": 250,
490-
"func": [Function],
491483
"shouldPauseCursor": [Function],
492484
},
493485
Object {
@@ -509,7 +501,28 @@ Object {
509501
"beforeStep": [Function],
510502
"beforeString": [Function],
511503
"breakLines": true,
512-
"cursor": true,
504+
"cursor": Object {
505+
"animation": Object {
506+
"frames": Array [
507+
Object {
508+
"opacity": 0,
509+
},
510+
Object {
511+
"opacity": 0,
512+
},
513+
Object {
514+
"opacity": 1,
515+
},
516+
],
517+
"options": Object {
518+
"easing": "steps(2, start)",
519+
"fill": "forwards",
520+
"iterations": Infinity,
521+
},
522+
},
523+
"autoPause": true,
524+
"autoPauseDelay": 500,
525+
},
513526
"cursorChar": "|",
514527
"cursorSpeed": 1000,
515528
"deleteSpeed": null,

‎packages/typeit/__tests__/helpers/fireItem.test.js‎

Lines changed: 33 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -59,16 +59,24 @@ describe("cursor should be paused", () => {
5959
queueItems,
6060
wait,
6161
cursor,
62+
cursorOptions: {
63+
autoPause: true,
64+
autoPauseDelay: 500,
65+
animation: {
66+
frames: ["frame1", "frame2"],
67+
},
68+
},
6269
});
6370

6471
expect(rebuildCursorAnimationSpy).toHaveBeenCalledTimes(1);
65-
expect(rebuildCursorAnimationSpy).toHaveBeenCalledWith({
66-
cursor,
67-
frames: ["frame1", "frame2"],
68-
timingOptions: {
69-
delay: 500,
70-
},
71-
});
72+
expect(rebuildCursorAnimationSpy).toHaveBeenCalledWith(
73+
expect.objectContaining({
74+
cursor,
75+
options: {
76+
delay: 500,
77+
},
78+
})
79+
);
7280

7381
expect(mockAnimation.cancel).toHaveBeenCalledTimes(1);
7482
});
@@ -94,16 +102,27 @@ describe("cursor should NOT be paused", () => {
94102
queueItems,
95103
wait,
96104
cursor,
105+
cursorOptions: {
106+
animation: {
107+
frames: ["frame1", "frame2"],
108+
},
109+
},
97110
});
98111

99112
expect(rebuildCursorAnimationSpy).toHaveBeenCalledTimes(1);
100-
expect(rebuildCursorAnimationSpy).toHaveBeenCalledWith({
101-
cursor,
102-
frames: ["frame1", "frame2"],
103-
timingOptions: {
104-
delay: 0,
105-
},
106-
});
113+
expect(rebuildCursorAnimationSpy).toHaveBeenCalledWith(
114+
expect.objectContaining({
115+
cursor,
116+
options: {
117+
delay: 0,
118+
},
119+
cursorOptions: {
120+
animation: {
121+
frames: ["frame1", "frame2"],
122+
},
123+
},
124+
})
125+
);
107126

108127
expect(mockAnimation.cancel).not.toHaveBeenCalledTimes(1);
109128
});

‎packages/typeit/__tests__/helpers/processCursorOptions.test.js‎

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
import processCursorOptions from "../../src/helpers/processCursorOptions";
2+
3+
describe("a boolean is passed", () => {
4+
it("returns the defaults when it's true", () => {
5+
const result = processCursorOptions(true);
6+
7+
expect(result).toEqual(
8+
expect.objectContaining({
9+
autoPause: true,
10+
autoPauseDelay: 500,
11+
animation: expect.anything(),
12+
})
13+
);
14+
});
15+
16+
it("returns false when it's false", () => {
17+
const result = processCursorOptions(false);
18+
19+
expect(result).toBe(false);
20+
});
21+
});
22+
23+
describe("an object is passed", () => {
24+
describe("autoPause settings", () => {
25+
it("uses defaults", () => {
26+
const result = processCursorOptions({});
27+
28+
expect(result.autoPause).toBe(true);
29+
expect(result.autoPauseDelay).toEqual(500);
30+
});
31+
32+
it("uses custom values", () => {
33+
const result = processCursorOptions({
34+
autoPause: false,
35+
autoPauseDelay: 800,
36+
});
37+
38+
expect(result.autoPause).toBe(false);
39+
expect(result.autoPauseDelay).toEqual(800);
40+
});
41+
});
42+
43+
describe("animation frames", () => {
44+
it("uses default frames", () => {
45+
const result = processCursorOptions({
46+
animation: {},
47+
});
48+
49+
expect(result.animation.options.iterations).toEqual(Infinity);
50+
expect(result.animation.frames).toEqual([
51+
{ opacity: 0 },
52+
{ opacity: 0 },
53+
{ opacity: 1 },
54+
]);
55+
});
56+
57+
it("uses custom frames", () => {
58+
const result = processCursorOptions({
59+
animation: {
60+
frames: [
61+
{ transform: "rotate(0)" },
62+
{ transform: "rotate(0)" },
63+
{ transform: "rotate(1)" },
64+
],
65+
},
66+
});
67+
68+
expect(result.animation.options.iterations).toEqual(Infinity);
69+
expect(result.animation.frames).toEqual([
70+
{ transform: "rotate(0)" },
71+
{ transform: "rotate(0)" },
72+
{ transform: "rotate(1)" },
73+
]);
74+
});
75+
});
76+
77+
describe("animation options", () => {
78+
it("it uses defaults", () => {
79+
const result = processCursorOptions({
80+
animation: {
81+
options: {
82+
// iterations: Infinity,
83+
},
84+
},
85+
});
86+
87+
expect(result.animation.options).toEqual(
88+
expect.objectContaining({
89+
iterations: Infinity,
90+
easing: "steps(2, start)",
91+
fill: "forwards",
92+
})
93+
);
94+
});
95+
});
96+
97+
it("it uses custom values", () => {
98+
const result = processCursorOptions({
99+
animation: {
100+
options: {
101+
iterations: 2,
102+
fill: "backwards",
103+
},
104+
},
105+
});
106+
107+
expect(result.animation.frames[0]).toEqual({
108+
opacity: 0,
109+
});
110+
expect(result.animation.options).toEqual(
111+
expect.objectContaining({
112+
iterations: 2,
113+
easing: "steps(2, start)",
114+
fill: "backwards",
115+
})
116+
);
117+
});
118+
});

0 commit comments

Comments
 (0)