mframejs/src/mframejs/attribute/miscAttribute.ts

simple framework

import { customAttribute } from '../decorator/exported';
import { IAttribute, IListener, IBindingContext } from '../interface/exported';
import { BindingEngine } from '../binding/exported';


/**
 * simple attribute for misc types of events/attibutes
 *
 */

@customAttribute('readonly.bind')
@customAttribute('disabled.bind')
@customAttribute('show.bind')
@customAttribute('class.bind')
@customAttribute('src.bind')
export class MiscAttributes implements IAttribute {

    // public
    public $element: HTMLElement;
    public $attribute: Attr;
    public $bindingContext: IBindingContext;

    // private
    private subscribeInternal: IListener;
    private value: string;
    private init: boolean;
    private name: string;


    /**
     * created
     *
     */
    public created() {

        this.value = this.$attribute.value;
        this.name = this.$attribute.name.replace('.bind', '');
        this.init = true;
        this.subscribeInternal = {
            name: this.name + 'Attribute(misc)',
            value: this.value,
            call: (newValue: any, oldValue: any) => {
                if (oldValue !== newValue || this.init) {
                    this.init = false;
                    switch (this.name) {
                        case 'readonly':
                            if (newValue) {
                                (this.$element as HTMLInputElement).readOnly = newValue;
                            } else {
                                this.$element.removeAttribute(this.name);
                            }
                            break;
                        case 'src':
                            if (newValue) {
                                (this.$element as HTMLImageElement).src = newValue;
                            } else {
                                this.$element.removeAttribute(this.name);
                            }
                            break;
                        case 'disabled':
                            if (newValue) {
                                (this.$element as HTMLInputElement).disabled = newValue;
                            } else {
                                this.$element.removeAttribute(this.name);
                            }
                            break;
                        case 'class':
                            if (newValue) {
                                // TODO: do I want to just add/remove classes ?
                                this.$element.className = newValue;
                            } else {
                                this.$element.className = '';
                            }
                            break;
                        case 'show':
                            if (newValue) {
                                // TODO: remove or set block, check first, or just have a marker on element?
                                // or just use a class?
                                this.$element.style['display'] = 'block';
                            } else {
                                this.$element.style['display'] = 'none';
                            }
                            break;
                        default:
                            this.$element.setAttribute(this.name, newValue);
                    }
                }
            }
        };

        BindingEngine.subscribeClassProperty(this.$bindingContext, this.value, this.subscribeInternal);
    }



    /**
     * detached
     *
     */
    public detached() {
        BindingEngine.unSubscribeClassProperty(this.$bindingContext, this.subscribeInternal);
    }



    /**
     * attached
     *
     */
    public attached() {
        // TODO: do I even need to do this, do I even want to do this?
        this.$element.removeAttribute(this.$attribute.name);
    }



}