Skip to content

Commit

Permalink
Allow cursor animation to be customized.
Browse files Browse the repository at this point in the history
  • Loading branch information
alexmacarthur committed Jul 19, 2022
1 parent 4747a0d commit 79a9e73
Show file tree
Hide file tree
Showing 19 changed files with 3,110 additions and 3,026 deletions.
3,164 changes: 1,413 additions & 1,751 deletions package-lock.json

Large diffs are not rendered by default.

6 changes: 3 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,8 @@
},
"devDependencies": {
"husky": "^8.0.1",
"lerna": "^5.1.1",
"lint-staged": "^13.0.1",
"prettier": "^2.6.2"
"lerna": "^5.1.8",
"lint-staged": "^13.0.3",
"prettier": "^2.7.1"
}
}
15 changes: 9 additions & 6 deletions packages/typeit/__tests__/TypeIt.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -222,13 +222,14 @@ describe("type()", () => {
describe("move()", () => {
test("Should bookend action with same options when no options passed.", () => {
instance = new TypeIt("#element").move(1);
const queueItems = instance.getQueue().getItems();

instance
.getQueue()
.getItems()
.forEach((item) => {
expect(item.func.constructor.name).toEqual("Function");
});
const firstQueueItem = queueItems.shift();
expect(firstQueueItem.func).toBe(undefined);

queueItems.forEach((item) => {
expect(item.func.constructor.name).toEqual("Function");
});
});

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

instance = instance.reset();

// console.log(instance.getOptions());

//-- Ensure the arguments that define these properties were passed.
expect(instance.getOptions()).toMatchSnapshot();

Expand Down
31 changes: 22 additions & 9 deletions packages/typeit/__tests__/__snapshots__/TypeIt.test.js.snap
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ exports[`Initial queue only contains startDelay pause. 1`] = `
Array [
Object {
"delay": 250,
"func": [Function],
"shouldPauseCursor": [Function],
},
]
Expand Down Expand Up @@ -38,7 +37,6 @@ exports[`break() Should should queue break character object. 1`] = `
Array [
Object {
"delay": 250,
"func": [Function],
"shouldPauseCursor": [Function],
},
Object {
Expand Down Expand Up @@ -74,7 +72,6 @@ exports[`delete() Should temporarily update options when specified. 1`] = `
Array [
Object {
"delay": 250,
"func": [Function],
"shouldPauseCursor": [Function],
},
Object {
Expand All @@ -92,7 +89,6 @@ exports[`empty() addSplitPause() Adds different even split pause around strings.
Array [
Object {
"delay": 250,
"func": [Function],
"shouldPauseCursor": [Function],
},
Object {
Expand Down Expand Up @@ -189,7 +185,6 @@ exports[`empty() addSplitPause() Adds even split pause around strings. 1`] = `
Array [
Object {
"delay": 250,
"func": [Function],
"shouldPauseCursor": [Function],
},
]
Expand All @@ -199,7 +194,6 @@ exports[`empty() addSplitPause() Adds split pause around strings when value is a
Array [
Object {
"delay": 250,
"func": [Function],
"shouldPauseCursor": [Function],
},
Object {
Expand Down Expand Up @@ -296,7 +290,6 @@ exports[`empty() addSplitPause() Inserts split pause around multiple strings. 1`
Array [
Object {
"delay": 250,
"func": [Function],
"shouldPauseCursor": [Function],
},
Object {
Expand Down Expand Up @@ -487,7 +480,6 @@ exports[`move() Should temporarily update options when specified. 1`] = `
Array [
Object {
"delay": 250,
"func": [Function],
"shouldPauseCursor": [Function],
},
Object {
Expand All @@ -509,7 +501,28 @@ Object {
"beforeStep": [Function],
"beforeString": [Function],
"breakLines": true,
"cursor": true,
"cursor": Object {
"animation": Object {
"frames": Array [
Object {
"opacity": 0,
},
Object {
"opacity": 0,
},
Object {
"opacity": 1,
},
],
"options": Object {
"easing": "steps(2, start)",
"fill": "forwards",
"iterations": Infinity,
},
},
"autoPause": true,
"autoPauseDelay": 500,
},
"cursorChar": "|",
"cursorSpeed": 1000,
"deleteSpeed": null,
Expand Down
47 changes: 33 additions & 14 deletions packages/typeit/__tests__/helpers/fireItem.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -59,16 +59,24 @@ describe("cursor should be paused", () => {
queueItems,
wait,
cursor,
cursorOptions: {
autoPause: true,
autoPauseDelay: 500,
animation: {
frames: ["frame1", "frame2"],
},
},
});

expect(rebuildCursorAnimationSpy).toHaveBeenCalledTimes(1);
expect(rebuildCursorAnimationSpy).toHaveBeenCalledWith({
cursor,
frames: ["frame1", "frame2"],
timingOptions: {
delay: 500,
},
});
expect(rebuildCursorAnimationSpy).toHaveBeenCalledWith(
expect.objectContaining({
cursor,
options: {
delay: 500,
},
})
);

expect(mockAnimation.cancel).toHaveBeenCalledTimes(1);
});
Expand All @@ -94,16 +102,27 @@ describe("cursor should NOT be paused", () => {
queueItems,
wait,
cursor,
cursorOptions: {
animation: {
frames: ["frame1", "frame2"],
},
},
});

expect(rebuildCursorAnimationSpy).toHaveBeenCalledTimes(1);
expect(rebuildCursorAnimationSpy).toHaveBeenCalledWith({
cursor,
frames: ["frame1", "frame2"],
timingOptions: {
delay: 0,
},
});
expect(rebuildCursorAnimationSpy).toHaveBeenCalledWith(
expect.objectContaining({
cursor,
options: {
delay: 0,
},
cursorOptions: {
animation: {
frames: ["frame1", "frame2"],
},
},
})
);

expect(mockAnimation.cancel).not.toHaveBeenCalledTimes(1);
});
Expand Down
118 changes: 118 additions & 0 deletions packages/typeit/__tests__/helpers/processCursorOptions.test.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,118 @@
import processCursorOptions from "../../src/helpers/processCursorOptions";

describe("a boolean is passed", () => {
it("returns the defaults when it's true", () => {
const result = processCursorOptions(true);

expect(result).toEqual(
expect.objectContaining({
autoPause: true,
autoPauseDelay: 500,
animation: expect.anything(),
})
);
});

it("returns false when it's false", () => {
const result = processCursorOptions(false);

expect(result).toBe(false);
});
});

describe("an object is passed", () => {
describe("autoPause settings", () => {
it("uses defaults", () => {
const result = processCursorOptions({});

expect(result.autoPause).toBe(true);
expect(result.autoPauseDelay).toEqual(500);
});

it("uses custom values", () => {
const result = processCursorOptions({
autoPause: false,
autoPauseDelay: 800,
});

expect(result.autoPause).toBe(false);
expect(result.autoPauseDelay).toEqual(800);
});
});

describe("animation frames", () => {
it("uses default frames", () => {
const result = processCursorOptions({
animation: {},
});

expect(result.animation.options.iterations).toEqual(Infinity);
expect(result.animation.frames).toEqual([
{ opacity: 0 },
{ opacity: 0 },
{ opacity: 1 },
]);
});

it("uses custom frames", () => {
const result = processCursorOptions({
animation: {
frames: [
{ transform: "rotate(0)" },
{ transform: "rotate(0)" },
{ transform: "rotate(1)" },
],
},
});

expect(result.animation.options.iterations).toEqual(Infinity);
expect(result.animation.frames).toEqual([
{ transform: "rotate(0)" },
{ transform: "rotate(0)" },
{ transform: "rotate(1)" },
]);
});
});

describe("animation options", () => {
it("it uses defaults", () => {
const result = processCursorOptions({
animation: {
options: {
// iterations: Infinity,
},
},
});

expect(result.animation.options).toEqual(
expect.objectContaining({
iterations: Infinity,
easing: "steps(2, start)",
fill: "forwards",
})
);
});
});

it("it uses custom values", () => {
const result = processCursorOptions({
animation: {
options: {
iterations: 2,
fill: "backwards",
},
},
});

expect(result.animation.frames[0]).toEqual({
opacity: 0,
});
expect(result.animation.options).toEqual(
expect.objectContaining({
iterations: 2,
easing: "steps(2, start)",
fill: "backwards",
})
);
});
});
Loading

0 comments on commit 79a9e73

Please sign in to comment.