rimmel/dist/esm/sinks/class-sink.js

A Stream-Oriented UI library for the Rx.Observable Universe

import { SINK_TAG } from '../constants.js';
import { asap } from '../lib/drain.js';

const TOGGLE_CLASS_SINK_TAG = 'ToggleClass';
const ToggleClassSink = (className) => (node) => node.classList.toggle.bind(node.classList, className);
const ClassNameSink = (node) => (str) => node.className = str;
const ClassObjectSink = (node) => {
    const cl = node.classList;
    const set = (str) => node.className = str;
    const add = cl.add.bind(cl);
    const remove = cl.remove.bind(cl);
    cl.toggle.bind(cl);
    return (name) => {
        typeof name == 'string'
            ? set(name)
            // FIXME: is it safe to assume it's an object, at this point?
            : [].concat(name).forEach(obj => Object.entries(obj)
                // TODO: support 3-state with toggle
                .forEach(([k, v]) => asap(v ? add : remove, k)));
    };
};
/**
 * A specialised sink to toggle individual classes on a given element
 * Will toggle the specified class name on the specified element, whenever the source emits. The actual value of the source will be ignored, as it's the emissions which will cause the class toggling.
 * @param source A present or future string
 * @param className The class name to toggle
 * @returns RMLTemplateExpression A template expression for the "className" attribute
 * @example <div class="${ToggleClassName('class1', stringPromise)}">
 * @example <div class="${ToggleClassName('class2', stringObservable)}">
**/
const ToggleClass = (source, className) => ({
    type: SINK_TAG,
    t: TOGGLE_CLASS_SINK_TAG,
    source,
    sink: ToggleClassSink(className),
});
/**
 * A specialised sink for the "class" HTML attribute
 * Will set the whole className of an element to the string emitted by the source
 * @param source A present or future string
 * @returns RMLTemplateExpression A template expression for the "className" attribute
 * @example <div class="${stringPromise}">
 * @example <div class="${stringObservable}">
 * @example <div class="${ClassName(stringObservable)}">
**/
const ClassName = (source) => ({
    type: SINK_TAG,
    t: 'ClassName',
    source,
    sink: ClassNameSink,
});

export { ClassName, ClassNameSink, ClassObjectSink, TOGGLE_CLASS_SINK_TAG, ToggleClass, ToggleClassSink };
//# sourceMappingURL=class-sink.js.map