vasille/lib/runner/web/binding/style.js

The same framework which is designed to build bulletproof frontends (core library).

import { Binding } from "./binding.js";
export function stringifyStyleValue(value) {
    if (value instanceof Array) {
        return value.map(item => `${item}px`).join(" ");
    }
    if (typeof value === "number") {
        return `${value}px`;
    }
    return value;
}
/**
 * Describes a style attribute binding
 * @class StyleBinding
 * @extends Binding
 */
export class StyleBinding extends Binding {
    /**
     * Constructs a style binding attribute
     * @param node {INode} the vasille node
     * @param name {string} the name of style property
     * @param value {IValue} the value to bind
     */
    constructor(node, name, value) {
        super(value);
        this.init(value => {
            /* istanbul ignore else */
            if (node.element instanceof HTMLElement) {
                node.element.style.setProperty(name, stringifyStyleValue(value));
            }
        });
    }
}