aboutsummaryrefslogtreecommitdiff
path: root/src/animations
diff options
context:
space:
mode:
authorRuben Beltran del Rio <ruben@unlimited.pizza>2022-05-01 00:56:06 +0200
committerRuben Beltran del Rio <ruben@unlimited.pizza>2022-05-01 00:56:06 +0200
commita7cf03c192470cbab13edeb1aec99e0c66dede10 (patch)
tree581b4430d1de958dcb666bae80a7678332134602 /src/animations
parent010f307346e525ac2e4239a0549d2c1a4d6d102b (diff)
Update / use typescript
Diffstat (limited to 'src/animations')
-rw-r--r--src/animations/.blink.js.icloudbin0 -> 156 bytes
-rw-r--r--src/animations/.blink.test.js.icloudbin0 -> 161 bytes
-rw-r--r--src/animations/blink.js24
-rw-r--r--src/animations/blink.test.js103
4 files changed, 0 insertions, 127 deletions
diff --git a/src/animations/.blink.js.icloud b/src/animations/.blink.js.icloud
new file mode 100644
index 0000000..f1ebe83
--- /dev/null
+++ b/src/animations/.blink.js.icloud
Binary files differ
diff --git a/src/animations/.blink.test.js.icloud b/src/animations/.blink.test.js.icloud
new file mode 100644
index 0000000..ed1fc7b
--- /dev/null
+++ b/src/animations/.blink.test.js.icloud
Binary files differ
diff --git a/src/animations/blink.js b/src/animations/blink.js
deleted file mode 100644
index ca21382..0000000
--- a/src/animations/blink.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import { sineOut } from 'svelte/easing';
-
-export const blink = function blink(node, params) {
-
- const originalWidth = parseFloat(getComputedStyle(node).width);
- const originalHeight = parseFloat(getComputedStyle(node).height);
-
- return {
- delay: params.delay || 0,
- duration: params.duration || 400,
- easing: params.easing || sineOut,
- css: (t, u) => {
-
- const halfWidth = originalWidth / 2;
- const halfHeight = originalHeight / 2;
- const height = Math.round(t <= 0.2 ? (originalHeight * t) / 0.2 : originalHeight);
- const marginY = Math.round(t <= 0.2 ? halfHeight * (1 - t / 0.2) : 0);
- const width = Math.round(t > 0.2 ? ((t - 0.2) / 0.8) * originalWidth : 0);
- const marginX = Math.round(t > 0.2 ? (1 - (t - 0.2) / 0.8) * halfWidth : halfWidth);
-
- return `width: ${width}px; height: ${height}px; margin: ${marginY}px ${marginX}px`;
- }
- };
-};
diff --git a/src/animations/blink.test.js b/src/animations/blink.test.js
deleted file mode 100644
index 9834100..0000000
--- a/src/animations/blink.test.js
+++ /dev/null
@@ -1,103 +0,0 @@
-import { blink } from './blink';
-import { sineOut } from 'svelte/easing';
-
-const internals = {
- response: null
-};
-
-describe('blink', () => {
-
- test('it has a default delay of 0ms', () => {
-
- const response = blink(document.createElement('div'), {});
-
- expect(response.delay).toBe(0);
- });
-
- test('it allows delay to be overridden', () => {
-
- const response = blink(document.createElement('div'), {
- delay: 300
- });
-
- expect(response.delay).toBe(300);
- });
-
- test('it has a default duration of 400ms', () => {
-
- const response = blink(document.createElement('div'), {});
-
- expect(response.duration).toBe(400);
- });
-
- test('it allows delay to be overridden', () => {
-
- const response = blink(document.createElement('div'), {
- duration: 999
- });
-
- expect(response.duration).toBe(999);
- });
-
- test('it uses sineOut as the default easing function', () => {
-
- const response = blink(document.createElement('div'), {});
-
- expect(response.easing).toBe(sineOut);
- });
-
- test('it allows easing function to be overridden', () => {
-
- const response = blink(document.createElement('div'), {
- easing: () => 'excellent'
- });
-
- expect(response.easing()).toBe('excellent');
- });
-
- describe('css animation function', () => {
-
- beforeEach(() => {
-
- const div = document.createElement('div');
- div.style.width = '100px';
- div.style.height = '200px';
- internals.response = blink(div, {});
- });
-
- test('It starts with with zeroed width and height', () => {
-
- const css = internals.response.css(0, 1);
- expect(css).toContain('width: 0px');
- expect(css).toContain('height: 0px');
- });
-
- test('It grows to full height and 0 width in first 20%', () => {
-
- const css = internals.response.css(0.2, 0.8);
- expect(css).toContain('width: 0px');
- expect(css).toContain('height: 200px');
- });
-
- test('It expands to full height by the end', () => {
-
- const css = internals.response.css(1, 0);
- expect(css).toContain('width: 100px');
- expect(css).toContain('height: 200px');
- });
-
- test('It keeps element vertically centered by adjusting the margin', () => {
-
- const css = internals.response.css(0.1, 0.9);
- expect(css).toContain('margin: 50px 50px');
- expect(css).toContain('height: 100px');
- });
-
- test('It keeps element horizontally centered by adjusting the margin', () => {
-
- const css = internals.response.css(0.6, 0.4);
- expect(css).toContain('margin: 0px 25px');
- expect(css).toContain('width: 50px');
- });
- });
-});