chore: Manual cleanup

pull/8569/head
S. Elliott Johnson 3 years ago
parent ebcc50e9a1
commit 0af3f6c83b

@ -1,94 +1,102 @@
import { identity as linear, noop } from './utils'; import { identity as linear, noop } from './utils.js';
import { now } from './environment'; import { now } from './environment.js';
import { loop } from './loop'; import { loop } from './loop.js';
import { create_rule, delete_rule } from './style_manager'; import { create_rule, delete_rule } from './style_manager.js';
/** @param {Element & ElementCSSInlineStyle} node /** @param {Element & ElementCSSInlineStyle} node
* @param {PositionRect} from * @param {PositionRect} from
* @param {AnimationFn} fn * @param {AnimationFn} fn
* @returns {any} * @returns {any}
*/ */
export function create_animation(node, from, fn, params) { export function create_animation(node, from, fn, params) {
if (!from) if (!from) return noop;
return noop; const to = node.getBoundingClientRect();
const to = node.getBoundingClientRect(); if (
if (from.left === to.left && from.left === to.left &&
from.right === to.right && from.right === to.right &&
from.top === to.top && from.top === to.top &&
from.bottom === to.bottom) from.bottom === to.bottom
return noop; )
const { delay = 0, duration = 300, easing = linear, return noop;
// @ts-ignore todo: should this be separated from destructuring? Or start/end added to public api and documentation? const {
start: start_time = now() + delay, delay = 0,
// @ts-ignore todo: duration = 300,
end = start_time + duration, tick = noop, css } = fn(node, { from, to }, params); easing = linear,
let running = true; // @ts-ignore todo: should this be separated from destructuring? Or start/end added to public api and documentation?
let started = false; start: start_time = now() + delay,
let name; // @ts-ignore todo:
/** @returns {void} */ end = start_time + duration,
function start() { tick = noop,
if (css) { css
name = create_rule(node, 0, 1, duration, delay, easing, css); } = fn(node, { from, to }, params);
} let running = true;
if (!delay) { let started = false;
started = true; let name;
} /** @returns {void} */
} function start() {
/** @returns {void} */ if (css) {
function stop() { name = create_rule(node, 0, 1, duration, delay, easing, css);
if (css) }
delete_rule(node, name); if (!delay) {
running = false; started = true;
} }
loop((now) => { }
if (!started && now >= start_time) { /** @returns {void} */
started = true; function stop() {
} if (css) delete_rule(node, name);
if (started && now >= end) { running = false;
tick(1, 0); }
stop(); loop((now) => {
} if (!started && now >= start_time) {
if (!running) { started = true;
return false; }
} if (started && now >= end) {
if (started) { tick(1, 0);
const p = now - start_time; stop();
const t = 0 + 1 * easing(p / duration); }
tick(t, 1 - t); if (!running) {
} return false;
return true; }
}); if (started) {
start(); const p = now - start_time;
tick(0, 1); const t = 0 + 1 * easing(p / duration);
return stop; tick(t, 1 - t);
}
return true;
});
start();
tick(0, 1);
return stop;
} }
/** @param {Element & ElementCSSInlineStyle} node /** @param {Element & ElementCSSInlineStyle} node
* @returns {void} * @returns {void}
*/ */
export function fix_position(node) { export function fix_position(node) {
const style = getComputedStyle(node); const style = getComputedStyle(node);
if (style.position !== 'absolute' && style.position !== 'fixed') { if (style.position !== 'absolute' && style.position !== 'fixed') {
const { width, height } = style; const { width, height } = style;
const a = node.getBoundingClientRect(); const a = node.getBoundingClientRect();
node.style.position = 'absolute'; node.style.position = 'absolute';
node.style.width = width; node.style.width = width;
node.style.height = height; node.style.height = height;
add_transform(node, a); add_transform(node, a);
} }
} }
/** @param {Element & ElementCSSInlineStyle} node /** @param {Element & ElementCSSInlineStyle} node
* @param {PositionRect} a * @param {PositionRect} a
* @returns {void} * @returns {void}
*/ */
export function add_transform(node, a) { export function add_transform(node, a) {
const b = node.getBoundingClientRect(); const b = node.getBoundingClientRect();
if (a.left !== b.left || a.top !== b.top) { if (a.left !== b.left || a.top !== b.top) {
const style = getComputedStyle(node); const style = getComputedStyle(node);
const transform = style.transform === 'none' ? '' : style.transform; const transform = style.transform === 'none' ? '' : style.transform;
node.style.transform = `${transform} translate(${a.left - b.left}px, ${a.top - b.top}px)`; node.style.transform = `${transform} translate(${a.left - b.left}px, ${a.top - b.top}px)`;
} }
} }
/** @typedef {DOMRect | ClientRect} PositionRect */ /** @typedef {DOMRect | ClientRect} PositionRect */
/** /**
* @typedef {( * @typedef {(
@ -97,4 +105,3 @@ export function add_transform(node, a) {
* params: any * params: any
* ) => AnimationConfig} AnimationFn * ) => AnimationConfig} AnimationFn
*/ */

Loading…
Cancel
Save