Lightweight UI framework on top of the DOM.
npm install brandup-uiInstall NPM package brandup-ui.
``
npm i brandup-ui@latest
UIElement - wrapper для HTMLElement, который позволяет привязать к нему свою бизнес логику.
Возможности:
- Обработка комманд вызванных внутри HTMLElement, который связан с UIElement.HTMLElement
- Обработка событий элемента , который связан с UIElement.
`
abstract class UIElement {
abstract typeName: string;
readonly element: HTMLElement;
protected setElement(elem: HTMLElement): void;
protected defineEvent(eventName: string, eventOptions?: IEventOptions): void;
protected raiseEvent(eventName: string, eventArgs?: any): boolean;
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
removeEventListener(type: string, listener?: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
dispatchEvent(event: Event): boolean;
registerCommand(name: string, execute: CommandDelegate, canExecute: CommandCanExecuteDelegate = null): void;
registerAsyncCommand(name: string, delegate: CommandAsyncDelegate): void;
hasCommand(name: string): boolean;
execCommand(name: string, elem: HTMLElement): CommandExecutionResult;
protected _onRenderElement(_elem: HTMLElement);
protected _onCanExecCommand(_name: string, _elem: HTMLElement): boolean;
destroy(): void;
}
`
Класс UIElement позволяет регистрировать обработчики комманд, которые определяются в разметке HTML элемента.
`
this.registerCommand("send", (elem: HTMLElement, context: CommandContext) => { elem.innerHTML = "ok"; });
`
Так же можно регистрировать асинхронные команды:
`
this.registerAsyncCommand("command1-async", (context: CommandAsyncContext) => {
context.timeout = 3000;
context.target.innerHTML = "Loading...";
const t = window.setTimeout(() => {
context.target.innerHTML = "Ok";
context.complate();
}, 2000);
context.timeoutCallback = () => {
clearTimeout(t);
};
});
``
Команды вызываются по событию click.
Во время выполнения команды, у элемента добавляется стиль executing.