mframejs/dist/ts/view/addAttribute.ts

simple framework

import { ContainerAttributes } from '../container/exported';
import { IControllerArray, IBindingContext } from '../interface/exported';
import { AttributeController } from './attributeController';
import { InterpolateController } from './interpolateController';
import { ViewController } from './viewController';

/**
 * Helper class to add custom attribute element
 *
 * @public
 * @param htmlNode - node you want to add use/ have attribute
 * @param bindingContext - binding context to use
 * @param attributeName - attribute name to add
 * @param value - value to use
 * @param viewController - viewcontroller to use
 * @param autoAttach - call attached when created ? defaults to true if not set
 */
export function addAttribute(
    htmlNode: HTMLElement,
    bindingContext: IBindingContext,
    attributeName: string,
    value: string,
    viewController: ViewController,
    autoAttach?: boolean) {
    autoAttach = autoAttach === undefined ? true : autoAttach;
    const arr: IControllerArray = [];
    if ((htmlNode as any).getAttribute) {
        htmlNode.setAttribute(attributeName, value);
        const attributeNode = htmlNode.getAttributeNode(attributeName);
        let customAttribute = ContainerAttributes.findAttribute(attributeNode.name);
        if (!customAttribute && attributeNode.name) {
            customAttribute = ContainerAttributes.findAttribute(attributeNode.name.replace('.bind', ''));
            if (!customAttribute && attributeNode.name) {
                customAttribute = ContainerAttributes.findAttribute(attributeNode.name.replace(/([@a-z]\w+\.)/g, '#VARIABLE#'));
            }
        }

        if (customAttribute) {
            const instance = new AttributeController(bindingContext, htmlNode, attributeNode, customAttribute, viewController);
            instance.init();
            if (instance) {
                if (autoAttach) {
                    instance.attached();
                }
                arr.push(instance);
            }
        } else {
            if (attributeNode.value.indexOf('${') !== -1 || attributeNode.value.indexOf('@{') !== -1) {
                if (attributeNode.name.indexOf('.bind') === -1) {
                    const interpolateController = new InterpolateController(bindingContext, attributeNode, viewController, true);
                    interpolateController.init();
                    if (autoAttach) {
                        interpolateController.attached();
                    }
                    arr.push(interpolateController);
                }
            }
        }
    }

    return arr;
}