Function modifier

A resource-based API for building modifiers.

You can attach this to an element, and use a resource to manage the state, add event listeners, remove event listeners on cleanup, etc.

Using resources for modifiers provides a clear and concise API with easy to read concerns.

The signature for the modifier here is different from ember-modifier, where positional args and named args are grouped together into an array and object respectively.

This signature for ember-resource's modifier follows the plain function invocation signature.

import { resource } from 'ember-resources';
import { modifier } from 'reactiveweb/resource/modifier';

const wiggle = modifier((element, arg1, arg2, namedArgs) => {
    return resource(({ on }) => {
        let animation = element.animate([
            { transform: `translateX(${arg1}px)` },
            { transform: `translateX(-${arg2}px)` },
        ], {
            duration: 100,
            iterations: Infinity,
        });

        on.cleanup(() => animation.cancel());
    });
});

<template>
    <div {{wiggle 2 5 named="hello"}}>hello</div>
</template>
Copy

A resource-based API for building modifiers.

You can attach this to an element, and use a resource to manage the state, add event listeners, remove event listeners on cleanup, etc.

Using resources for modifiers provides a clear and concise API with easy to read concerns.

The signature for the modifier here is different from ember-modifier, where positional args and named args are grouped together into an array and object respectively.

This signature for ember-resource's modifier follows the plain function invocation signature.

import { resource } from 'ember-resources';
import { modifier } from 'reactiveweb/resource/modifier';

const wiggle = modifier((element, arg1, arg2, namedArgs) => {
    return resource(({ on }) => {
        let animation = element.animate([
            { transform: `translateX(${arg1}px)` },
            { transform: `translateX(-${arg2}px)` },
        ], {
            duration: 100,
            iterations: Infinity,
        });

        on.cleanup(() => animation.cancel());
    });
});

<template>
    <div {{wiggle 2 5 named="hello"}}>hello</div>
</template>
Copy

A resource-based API for building modifiers.

You can attach this to an element, and use a resource to manage the state, add event listeners, remove event listeners on cleanup, etc.

Using resources for modifiers provides a clear and concise API with easy to read concerns.

The signature for the modifier here is different from ember-modifier, where positional args and named args are grouped together into an array and object respectively.

This signature for ember-resource's modifier follows the plain function invocation signature.

import { resource } from 'ember-resources';
import { modifier } from 'reactiveweb/resource/modifier';

const wiggle = modifier((element, arg1, arg2, namedArgs) => {
    return resource(({ on }) => {
        let animation = element.animate([
            { transform: `translateX(${arg1}px)` },
            { transform: `translateX(-${arg2}px)` },
        ], {
            duration: 100,
            iterations: Infinity,
        });

        on.cleanup(() => animation.cancel());
    });
});

<template>
    <div {{wiggle 2 5 named="hello"}}>hello</div>
</template>
Copy

A resource-based API for building modifiers.

You can attach this to an element, and use a resource to manage the state, add event listeners, remove event listeners on cleanup, etc.

Using resources for modifiers provides a clear and concise API with easy to read concerns.

The signature for the modifier here is different from ember-modifier, where positional args and named args are grouped together into an array and object respectively.

This signature for ember-resource's modifier follows the plain function invocation signature.

import { resource } from 'ember-resources';
import { modifier } from 'reactiveweb/resource/modifier';

const wiggle = modifier((element, arg1, arg2, namedArgs) => {
    return resource(({ on }) => {
        let animation = element.animate([
            { transform: `translateX(${arg1}px)` },
            { transform: `translateX(-${arg2}px)` },
        ], {
            duration: 100,
            iterations: Infinity,
        });

        on.cleanup(() => animation.cancel());
    });
});

<template>
    <div {{wiggle 2 5 named="hello"}}>hello</div>
</template>
Copy