mframejs/src/mframejs/utils/domEventHandler.ts

simple framework

import { DOM } from '../utils/exported';
/**
* will be event handler, just need to rethink and redo it all
* main pointis to delegate the events, so we have 1 event listener for many elements and let event bubble
*
*/
export class DomEventHandler {

    private eventHandlerBinded: any;
    private count = 0;
    private id: any[] = [];
    private events: any[] = [];
    private target: any[] = [];
    private call: any[] = [];

    constructor() {
        this.eventHandlerBinded = this.eventHandler.bind(this);
    }


    public listenFor(event: string, target: any, call: Function): number {
        this.count++;

        if (this.events.indexOf(event) === -1) {
            this.addEventListener(event);
        }

        this.id.push(this.count);
        this.events.push(event);
        this.target.push(target);
        this.call.push(call);

        return this.count;

    }



    public removeListener(id: number): void {
        this.id.splice(id, 1);
        const event = this.events.splice(id, 1);
        this.target.splice(id, 1);
        this.call.splice(id, 1);
        if (this.events.indexOf(event) === -1) {
            this.removeEventListener(event);
        }
    }



    private addEventListener(event: any): void {
        (DOM.document.body as any).addEventListener(event, (this.eventHandlerBinded as EventListenerOrEventListenerObject), false);
    }



    private removeEventListener(event: any): void {
        (DOM.document.body as any).removeEventListener(event, (this.eventHandlerBinded as EventListenerOrEventListenerObject), false);
    }



    private eventHandler(event: any): void {

        const targetID = this.target.indexOf(event.target);
        const targetEvent = this.events[targetID];
        const eventID = this.events.indexOf(event.type);

        if (eventID !== -1 && targetID !== -1) {
            if (targetID !== -1 && targetEvent === event.type) {
                this.call[targetID](event);
            } else {
                // todo
            }
        }
    }


}