refactor some stuff

pull/1937/head
Richard Harris 6 years ago
parent 8d1afbb3d4
commit 15b054f6a7

@ -1,7 +1,6 @@
import { identity as linear } from './utils.js'; import { identity as linear } from './utils.js';
import { hash } from './transitions.js';
import { loop } from './loop.js'; import { loop } from './loop.js';
import { add_rule, delete_rule, generate_rule } from './style_manager.js'; import { create_rule, delete_rule } from './style_manager.js';
export function wrapAnimation(node, from, fn, params) { export function wrapAnimation(node, from, fn, params) {
if (!from) return; if (!from) return;
@ -38,10 +37,7 @@ export function wrapAnimation(node, from, fn, params) {
if (info.css) { if (info.css) {
if (delay) node.style.cssText = cssText; if (delay) node.style.cssText = cssText;
const rule = generate_rule(program, ease, info.css); program.name = create_rule(program, ease, info.css);
program.name = `__svelte_${hash(rule)}`;
add_rule(rule, program.name);
node.style.animation = (node.style.animation || '') node.style.animation = (node.style.animation || '')
.split(', ') .split(', ')

@ -4,20 +4,40 @@ let stylesheet;
let active = 0; let active = 0;
let current_rules = {}; let current_rules = {};
export function add_rule(rule, name) { // https://github.com/darkskyapp/string-hash/blob/master/index.js
if (!stylesheet) { function hash(str) {
const style = createElement('style'); let hash = 5381;
document.head.appendChild(style); let i = str.length;
stylesheet = style.sheet;
while (i--) hash = ((hash << 5) - hash) ^ str.charCodeAt(i);
return hash >>> 0;
}
export function create_rule({ a, b, delta, duration }, ease, fn) {
const step = 16.666 / duration;
let keyframes = '{\n';
for (let p = 0; p <= 1; p += step) {
const t = a + delta * ease(p);
keyframes += p * 100 + `%{${fn(t, 1 - t)}}\n`;
} }
active += 1; const rule = keyframes + `100% {${fn(b, 1 - b)}}\n}`;
console.log(`adding rule`, active); const name = `__svelte_${hash(rule)}`;
if (!current_rules[name]) { if (!current_rules[name]) {
if (!stylesheet) {
const style = createElement('style');
document.head.appendChild(style);
stylesheet = style.sheet;
}
current_rules[name] = true; current_rules[name] = true;
stylesheet.insertRule(`@keyframes ${name} ${rule}`, stylesheet.cssRules.length); stylesheet.insertRule(`@keyframes ${name} ${rule}`, stylesheet.cssRules.length);
} }
active += 1;
return name;
} }
export function delete_rule(node, name) { export function delete_rule(node, name) {
@ -26,25 +46,11 @@ export function delete_rule(node, name) {
.filter(anim => anim && anim.indexOf(name) === -1) .filter(anim => anim && anim.indexOf(name) === -1)
.join(', '); .join(', ');
console.trace(`removing rule`, active - 1);
if (--active <= 0) clear_rules(); if (--active <= 0) clear_rules();
} }
export function generate_rule({ a, b, delta, duration }, ease, fn) {
const step = 16.666 / duration;
let keyframes = '{\n';
for (let p = 0; p <= 1; p += step) {
const t = a + delta * ease(p);
keyframes += p * 100 + `%{${fn(t, 1 - t)}}\n`;
}
return keyframes + `100% {${fn(b, 1 - b)}}\n}`;
}
export function clear_rules() { export function clear_rules() {
let i = stylesheet.cssRules.length; let i = stylesheet.cssRules.length;
console.log(`clearing ${i} rules`);
while (i--) stylesheet.deleteRule(i); while (i--) stylesheet.deleteRule(i);
current_rules = {}; current_rules = {};
} }

@ -1,15 +1,6 @@
import { identity as linear, noop, run } from './utils.js'; import { identity as linear, noop, run } from './utils.js';
import { loop } from './loop.js'; import { loop } from './loop.js';
import { add_rule, delete_rule, generate_rule } from './style_manager.js'; import { create_rule, delete_rule } from './style_manager.js';
// https://github.com/darkskyapp/string-hash/blob/master/index.js
export function hash(str) {
let hash = 5381;
let i = str.length;
while (i--) hash = ((hash << 5) - hash) ^ str.charCodeAt(i);
return hash >>> 0;
}
export function wrapTransition(component, node, fn, params, intro) { export function wrapTransition(component, node, fn, params, intro) {
let obj = fn.call(component, node, params); let obj = fn.call(component, node, params);
@ -100,8 +91,7 @@ export function wrapTransition(component, node, fn, params, intro) {
if (obj.css) { if (obj.css) {
if (obj.delay) node.style.cssText = cssText; if (obj.delay) node.style.cssText = cssText;
const rule = generate_rule(program, ease, obj.css); program.name = create_rule(program, ease, obj.css);
add_rule(rule, program.name = '__svelte_' + hash(rule));
node.style.animation = (node.style.animation || '') node.style.animation = (node.style.animation || '')
.split(', ') .split(', ')

Loading…
Cancel
Save