@openglobus/og 0.18.0 → 0.18.1

package/lib/js/ui/ButtonGroup.js

@@ -0,0 +1,41 @@
+import { createEvents } from '../Events';
+const BUTTONGROUP_EVENTS = ["change"];
+class ButtonGroup {
+    constructor(options = {}) {
+        this._onChange = (isActive, btn) => {
+            if (isActive) {
+                btn.preventClick = true;
+                for (let i = 0; i < this._buttons.length; i++) {
+                    let bi = this._buttons[i];
+                    if (!bi.isEqual(btn)) {
+                        bi.setActive(false);
+                        bi.preventClick = false;
+                    }
+                }
+                this.events.dispatch(this.events.change, btn);
+            }
+        };
+        this.events = createEvents(BUTTONGROUP_EVENTS);
+        this._buttons = options.buttons || [];
+        for (let i = 0; i < this._buttons.length; i++) {
+            this._bindButton(this._buttons[i]);
+        }
+    }
+    _bindButton(button) {
+        button.events.on("change", this._onChange);
+    }
+    add(button) {
+        this._buttons.push(button);
+        this._bindButton(button);
+    }
+    remove(button) {
+        for (let i = 0; i < this._buttons.length; i++) {
+            if (this._buttons[i].isEqual(button)) {
+                this._buttons.splice(i);
+                button.events.off("change", this._onChange);
+                return;
+            }
+        }
+    }
+}
+export { ButtonGroup };

package/lib/js/ui/Dialog.d.ts

@@ -0,0 +1,55 @@
+import { Button } from './Button';
+import { IViewParams, View, ViewEventsList } from './View';
+import { EventsHandler } from "../Events";
+export interface IDialogParams extends IViewParams {
+    title?: string;
+    visible?: boolean;
+    resizable?: boolean;
+    width?: number;
+    height?: number;
+    left?: number;
+    top?: number;
+    minHeight?: number;
+    maxHeight?: number;
+    minWidth?: number;
+    maxWidth?: number;
+    useHide?: boolean;
+}
+type DialogEventsList = ["resize", "focus", "visibility", "dragstart", "dragend"];
+declare class Dialog<M> extends View<M> {
+    static __zIndex__: number;
+    events: EventsHandler<DialogEventsList> & EventsHandler<ViewEventsList>;
+    $header: HTMLElement | null;
+    $title: HTMLElement | null;
+    $container: HTMLElement | null;
+    $buttons: HTMLElement | null;
+    useHide: boolean;
+    protected _startPosX: number;
+    protected _startPosY: number;
+    protected _closeBtn: Button;
+    protected _visibility: boolean;
+    constructor(options?: IDialogParams);
+    setContainer(htmlStr: string): void;
+    get container(): HTMLElement | null;
+    get width(): number;
+    get height(): number;
+    bringToFront(): void;
+    render(params: any): this;
+    show(): void;
+    hide(): void;
+    close(): void;
+    setVisibility(visibility: boolean): void;
+    protected _initButtons(): void;
+    protected _initEvents(): void;
+    protected _onCloseBtnClick: () => void;
+    protected _onMouseDownAll: () => void;
+    protected _onMouseDown: (e: MouseEvent) => void;
+    setPosition(x?: number, y?: number): void;
+    protected _onMouseMove: (e: MouseEvent) => void;
+    protected _startDragging(): void;
+    protected _clearDragging(): void;
+    protected _onMouseUp: () => void;
+    remove(): void;
+    protected _clearEvents(): void;
+}
+export { Dialog };

package/lib/js/ui/Dialog.js

@@ -0,0 +1,173 @@
+import { getDefault, stringTemplate } from '../utils/shared';
+import { Button } from './Button';
+import { CLOSE_ICON } from './icons';
+import { View } from './View';
+const DIALOG_EVENTS = ["resize", "focus", "visibility", "dragstart", "dragend"];
+const TEMPLATE = `<div class="og-ddialog" 
+        style="display:{display}; resize:{resize}; width: {width}px; {height}; top: {top}px; left: {left}px; min-height: {minHeight}; max-height: {maxHeight}; min-width: {minWidth}; max-width: {maxWidth};">
+       <div class="og-ddialog-header">
+         <div class="og-ddialog-header__title">{title}</div>      
+         <div class="og-ddialog-header__buttons"></div>      
+        </div>
+       <div class="og-ddialog-container"></div>
+    </div>>`;
+class Dialog extends View {
+    constructor(options = {}) {
+        super({
+            template: stringTemplate(TEMPLATE, {
+                title: options.title || "",
+                display: getDefault(options.visible, true) ? "flex" : "none",
+                resize: getDefault(options.resizable, true) ? "both" : "none",
+                width: options.width || 300,
+                height: options.height ? `height:${options.height || 200}` : "",
+                left: options.left || 0,
+                top: options.top || 0,
+                minHeight: options.minHeight ? `${options.minHeight}px` : 'unset',
+                maxHeight: options.maxHeight ? `${options.maxHeight}px` : 'unset',
+                minWidth: options.minWidth ? `${options.minWidth}px` : 'unset',
+                maxWidth: options.maxWidth ? `${options.maxWidth}px` : 'unset',
+            }),
+            ...options
+        });
+        this._onCloseBtnClick = () => {
+            this.close();
+        };
+        this._onMouseDownAll = () => {
+            this.bringToFront();
+        };
+        this._onMouseDown = (e) => {
+            e.preventDefault();
+            this._startDragging();
+            this._startPosX = e.clientX;
+            this._startPosY = e.clientY;
+            document.addEventListener("mousemove", this._onMouseMove);
+            document.addEventListener("mouseup", this._onMouseUp);
+        };
+        this._onMouseMove = (e) => {
+            e.preventDefault();
+            let dx = this._startPosX - e.clientX;
+            let dy = this._startPosY - e.clientY;
+            this._startPosX = e.clientX;
+            this._startPosY = e.clientY;
+            this.setPosition(this.el.offsetLeft - dx, this.el.offsetTop - dy);
+        };
+        this._onMouseUp = () => {
+            this._clearDragging();
+            document.removeEventListener("mouseup", this._onMouseUp);
+            document.removeEventListener("mousemove", this._onMouseMove);
+        };
+        //@ts-ignore
+        this.events = this.events.registerNames(DIALOG_EVENTS);
+        this._startPosX = 0;
+        this._startPosY = 0;
+        this.$header = null;
+        this.$title = null;
+        this.$container = null;
+        this.$buttons = null;
+        this._closeBtn = new Button({
+            icon: CLOSE_ICON,
+            classList: ["og-button-size__20"]
+        });
+        this.useHide = options.useHide || false;
+        this._visibility = getDefault(options.visible, true);
+    }
+    setContainer(htmlStr) {
+        this.$container.innerHTML = htmlStr;
+    }
+    get container() {
+        return this.$container;
+    }
+    get width() {
+        return this.el ? parseFloat(this.el.style.width) : 0;
+    }
+    get height() {
+        return this.el ? parseFloat(this.el.style.height) : 0;
+    }
+    bringToFront() {
+        this.el.style.zIndex = String(Dialog.__zIndex__++);
+    }
+    render(params) {
+        super.render(params);
+        this.bringToFront();
+        this.$header = this.select(".og-ddialog-header");
+        this.$title = this.select(".og-ddialog-header__title");
+        this.$container = this.select(".og-ddialog-container");
+        this.$buttons = this.select(".og-ddialog-header__buttons");
+        this._initEvents();
+        this._initButtons();
+        return this;
+    }
+    show() {
+        if (!this._visibility) {
+            this._visibility = true;
+            this.el.style.display = "flex";
+            this.bringToFront();
+            this.events.dispatch(this.events.visibility, true, this);
+        }
+    }
+    hide() {
+        if (this._visibility) {
+            this._visibility = false;
+            this.el.style.display = "none";
+            this.events.dispatch(this.events.visibility, false, this);
+        }
+    }
+    close() {
+        if (this.useHide) {
+            this.hide();
+        }
+        else {
+            this.remove();
+        }
+    }
+    setVisibility(visibility) {
+        if (visibility) {
+            this.show();
+        }
+        else {
+            this.hide();
+        }
+    }
+    _initButtons() {
+        this._closeBtn.events.on("click", this._onCloseBtnClick);
+        this._closeBtn.appendTo(this.$buttons);
+    }
+    _initEvents() {
+        this.$header.addEventListener("mousedown", this._onMouseDown);
+        this.el.addEventListener("mousedown", this._onMouseDownAll);
+    }
+    setPosition(x, y) {
+        if (x != undefined) {
+            this.el.style.left = `${x}px`;
+        }
+        if (y != undefined) {
+            this.el.style.top = `${y}px`;
+        }
+    }
+    _startDragging() {
+        if (!this.el.classList.contains("dragging")) {
+            this.el.classList.add("dragging");
+            this.events.dispatch(this.events.dragstart, this);
+        }
+    }
+    _clearDragging() {
+        if (this.el.classList.contains("dragging")) {
+            this.events.dispatch(this.events.dragend, this);
+            this.el.classList.remove("dragging");
+        }
+    }
+    remove() {
+        this._clearDragging();
+        this._clearEvents();
+        super.remove();
+    }
+    _clearEvents() {
+        this._closeBtn.events.off("click", this._onCloseBtnClick);
+        document.removeEventListener("mouseup", this._onMouseUp);
+        document.removeEventListener("mousemove", this._onMouseMove);
+        this.$header.removeEventListener("mousedown", this._onMouseDown);
+        this.el.removeEventListener("mousedown", this._onMouseDownAll);
+    }
+}
+Dialog.__zIndex__ = 0;
+export { Dialog };

package/lib/js/ui/Slider.d.ts

@@ -0,0 +1,38 @@
+import { EventsHandler } from "../Events";
+import { IViewParams, View, ViewEventsList } from './View';
+interface ISliderParams extends IViewParams {
+    label?: string;
+    value?: number;
+    min?: number;
+    max?: number;
+}
+type SliderEventsList = ["change"];
+declare class Slider extends View<null> {
+    events: EventsHandler<SliderEventsList> & EventsHandler<ViewEventsList>;
+    protected _value: number;
+    protected _min: number;
+    protected _max: number;
+    protected _startPosX: number;
+    protected _resizeObserver: ResizeObserver;
+    protected $label: HTMLElement | null;
+    protected $pointer: HTMLElement | null;
+    protected $progress: HTMLElement | null;
+    protected $input: HTMLInputElement | null;
+    protected $panel: HTMLElement | null;
+    constructor(options?: ISliderParams);
+    render(params: any): this;
+    protected _onResize: () => void;
+    set value(val: number);
+    get value(): number;
+    protected _initEvents(): void;
+    protected _clearEvents(): void;
+    protected _onMouseWheel: (e: WheelEvent) => void;
+    protected _onMouseWheelFF: (e: WheelEvent) => void;
+    protected _onInput: (e: Event) => void;
+    protected _onMouseDown: (e: MouseEvent) => void;
+    protected _setOffset(x: number): void;
+    protected _onMouseMove: (e: MouseEvent) => void;
+    protected _onMouseUp: () => void;
+    remove(): void;
+}
+export { Slider };

package/lib/js/ui/Slider.js

@@ -0,0 +1,129 @@
+import { clamp } from '../math';
+import { View } from './View';
+import { stringTemplate } from '../utils/shared';
+const SLIDER_EVENTS = ["change"];
+const TEMPLATE = `<div class="og-slider">
+      <div class="og-slider-label">{label}</div>
+      <div class="og-slider-panel">
+        <div class="og-slider-progress"></div>      
+        <div class="og-slider-pointer"></div>
+      </div>
+      <input type="number"/>
+    </div>`;
+class Slider extends View {
+    constructor(options = {}) {
+        super({
+            template: stringTemplate(TEMPLATE, {
+                label: options.label || ""
+            })
+        });
+        this._onResize = () => {
+            this._setOffset(this._value * this.$panel.clientWidth / (this._max - this._min));
+        };
+        this._onMouseWheel = (e) => {
+            //@ts-ignore
+            e = e || window.event;
+            e.preventDefault();
+            e.stopPropagation();
+            //@ts-ignore
+            this.value = this._value + Math.sign(e.wheelDelta) * (this._max - this._min) / 100.0;
+        };
+        this._onMouseWheelFF = (e) => {
+            this._onMouseWheel(e);
+        };
+        this._onInput = (e) => {
+            //@ts-ignore
+            e = e || window.event;
+            e.preventDefault();
+            e.stopPropagation();
+            //@ts-ignore
+            this.value = parseFloat(e.target.value);
+        };
+        this._onMouseDown = (e) => {
+            //@ts-ignore
+            e = e || window.event;
+            e.preventDefault();
+            this._startPosX = e.clientX;
+            this.value = this._min + (this._max - this._min) * (e.offsetX / this.$panel.clientWidth);
+            document.addEventListener("mousemove", this._onMouseMove);
+            document.addEventListener("mouseup", this._onMouseUp);
+        };
+        this._onMouseMove = (e) => {
+            //@ts-ignore
+            e = e || window.event;
+            e.preventDefault();
+            e.stopPropagation();
+            let rect = this.$panel.getBoundingClientRect();
+            let clientX = clamp(e.clientX, rect.left, rect.right);
+            let dx = this._startPosX - clientX;
+            this._startPosX = clientX;
+            this.value = (this.$pointer.offsetLeft - dx) * (this._max - this._min) / this.$panel.clientWidth;
+        };
+        this._onMouseUp = () => {
+            document.removeEventListener("mouseup", this._onMouseUp);
+            document.removeEventListener("mousemove", this._onMouseMove);
+        };
+        //@ts-ignore
+        this.events = this.events.registerNames(SLIDER_EVENTS);
+        this._value = options.value || 0.0;
+        this._min = options.min || 0.0;
+        this._max = options.max || 1.0;
+        //this._step = options.step || ((this._max - this._min) / 10.0);
+        this._resizeObserver = new ResizeObserver(this._onResize);
+        this._startPosX = 0;
+        this.$label = null;
+        this.$pointer = null;
+        this.$progress = null;
+        this.$input = null;
+        this.$panel = null;
+    }
+    render(params) {
+        super.render(params);
+        this.$label = this.select(".og-slider-label");
+        if (this.$label.innerHTML === "") {
+            this.$label.style.display = "none";
+        }
+        this.$pointer = this.select(".og-slider-pointer");
+        this.$progress = this.select(".og-slider-progress");
+        this.$panel = this.select(".og-slider-panel");
+        this.$input = this.select("input");
+        this._resizeObserver.observe(this.el);
+        this._initEvents();
+        return this;
+    }
+    set value(val) {
+        if (val !== this._value) {
+            this._value = clamp(val, this._min, this._max);
+            this.$input.value = this._value.toString();
+            this._setOffset(this._value * this.$panel.clientWidth / (this._max - this._min));
+            this.events.dispatch(this.events.change, this._value, this);
+        }
+    }
+    get value() {
+        return this._value;
+    }
+    _initEvents() {
+        this.$panel.addEventListener("mousedown", this._onMouseDown);
+        //@ts-ignore
+        this.$panel.addEventListener("mousewheel", this._onMouseWheel);
+        this.$panel.addEventListener("wheel", this._onMouseWheelFF);
+        this.$input.addEventListener("input", this._onInput);
+    }
+    _clearEvents() {
+        this.$panel.removeEventListener("mousedown", this._onMouseDown);
+        //@ts-ignore
+        this.$panel.removeEventListener("mousewheel", this._onMouseWheel);
+        this.$panel.removeEventListener("wheel", this._onMouseWheelFF);
+        this.$input.removeEventListener("input", this._onInput);
+    }
+    _setOffset(x) {
+        if (x >= 0 && x <= this.$panel.clientWidth) {
+            this.$pointer.style.left = this.$progress.style.width = `${x * 100 / this.$panel.clientWidth}%`;
+        }
+    }
+    remove() {
+        this._clearEvents();
+        super.remove();
+    }
+}
+export { Slider };

package/lib/js/ui/ToggleButton.d.ts

@@ -0,0 +1,20 @@
+import { Button, IButtonParams, ButtonEventsList } from './Button';
+import { EventsHandler } from "../Events";
+import { ViewEventsList } from "./View";
+interface IToggleButtonParams extends IButtonParams {
+    isActive?: boolean;
+    preventClick?: boolean;
+}
+type ToggleButtonEventsList = ["change"];
+declare class ToggleButton extends Button {
+    events: EventsHandler<ToggleButtonEventsList> & EventsHandler<ButtonEventsList> & EventsHandler<ViewEventsList>;
+    protected _isActive: boolean;
+    preventClick: boolean;
+    constructor(options: IToggleButtonParams);
+    setActive(isActive: boolean, stopPropagation?: boolean): void;
+    protected _toggle(): void;
+    get isActive(): boolean;
+    render(params: any): this;
+    protected _onMouseClick: (e: MouseEvent) => void;
+}
+export { ToggleButton };

package/lib/js/ui/ToggleButton.js

@@ -0,0 +1,42 @@
+import { Button } from './Button';
+const TOGGLEBUTTON_EVENTS = ["change"];
+class ToggleButton extends Button {
+    constructor(options) {
+        super({
+            ...options
+        });
+        this._onMouseClick = (e) => {
+            if (!this.preventClick) {
+                this._mouseClickHandler(e);
+                this.setActive(!this.isActive);
+            }
+        };
+        //@ts-ignore
+        this.events = this.events.registerNames(TOGGLEBUTTON_EVENTS);
+        this._isActive = options.isActive || false;
+        this.preventClick = options.preventClick || false;
+    }
+    setActive(isActive, stopPropagation = false) {
+        if (isActive !== this._isActive) {
+            this._isActive = isActive;
+            this._toggle();
+            if (!stopPropagation) {
+                this.events.dispatch(this.events.change, isActive, this);
+            }
+        }
+    }
+    _toggle() {
+        this.el && this.el.classList.toggle("og-button__active");
+    }
+    get isActive() {
+        return this._isActive;
+    }
+    render(params) {
+        super.render(params);
+        if (this._isActive) {
+            this._toggle();
+        }
+        return this;
+    }
+}
+export { ToggleButton };

package/lib/js/ui/View.d.ts

@@ -0,0 +1,37 @@
+import { EventsHandler } from '../Events';
+export interface IViewParams {
+    model?: any;
+    template?: string;
+    parent?: View<any> | null;
+    classList?: string[];
+}
+export type ViewEventsList = ["render"];
+declare class View<M> {
+    static __counter__: number;
+    protected __id: number;
+    events: EventsHandler<ViewEventsList>;
+    model: M;
+    template: string;
+    parent: View<any> | null;
+    el: HTMLElement | null;
+    protected _classList: string[];
+    constructor(options?: IViewParams);
+    static getHTML(template: string, params: any): string;
+    static parseHTML(htmlStr: string): HTMLElement[];
+    static insertAfter(newNodes: HTMLElement | HTMLElement[], referenceNode: Node): HTMLElement[];
+    static insertBefore(newNodes: HTMLElement | HTMLElement[], referenceNode: Node): HTMLElement[];
+    insertBefore(view: View<any> | HTMLElement): void;
+    insertAfter(view: View<any> | HTMLElement): void;
+    isEqual(view: View<any>): boolean;
+    appendTo(node: HTMLElement, clean?: boolean, firstPosition?: boolean): this;
+    afterRender(parentNode: HTMLElement): void;
+    beforeRender(parentNode: HTMLElement): void;
+    stopPropagation(): void;
+    renderTemplate(params: any): HTMLElement;
+    render(params?: any): this;
+    select<T extends HTMLElement>(queryStr: string): T | null;
+    selectRemove(queryStr: string): HTMLElement | undefined;
+    selectAll(queryStr: string, callback?: Function): NodeListOf<Element> | undefined;
+    remove(): void;
+}
+export { View };