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 { hash } from './transitions.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) {
if (!from) return;
@ -38,10 +37,7 @@ export function wrapAnimation(node, from, fn, params) {
if (info.css) {
if (delay) node.style.cssText = cssText;
const rule = generate_rule(program, ease, info.css);
program.name = `__svelte_${hash(rule)}`;
add_rule(rule, program.name);
program.name = create_rule(program, ease, info.css);
node.style.animation = (node.style.animation || '')
.split(', ')

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

@ -1,15 +1,6 @@
import { identity as linear, noop, run } from './utils.js';
import { loop } from './loop.js';
import { add_rule, delete_rule, generate_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;
}
import { create_rule, delete_rule } from './style_manager.js';
export function wrapTransition(component, node, fn, params, intro) {
let obj = fn.call(component, node, params);
@ -100,8 +91,7 @@ export function wrapTransition(component, node, fn, params, intro) {
if (obj.css) {
if (obj.delay) node.style.cssText = cssText;
const rule = generate_rule(program, ease, obj.css);
add_rule(rule, program.name = '__svelte_' + hash(rule));
program.name = create_rule(program, ease, obj.css);
node.style.animation = (node.style.animation || '')
.split(', ')

Loading…
Cancel
Save