@openglobus/og 0.24.1 → 0.25.0

package/lib/js/ui/Checkbox.js

@@ -1,110 +0,0 @@
-import { View } from './View';
-import { stringTemplate } from '../utils/shared';
-const SLIDER_EVENTS = ["change"];
-const TEMPLATE = `<div class="og-checkbox">
-      <div class="og-input-label">{label}</div>
-      <div class="og-checkbox-input">
-        <input type="checkbox" {checked}/>
-      </div>
-    </div>`;
-class Checkbox extends View {
-    constructor(options = {}) {
-        super({
-            template: stringTemplate(TEMPLATE, {
-                label: options.label || "",
-                checked: options.checked ? "checked" : ""
-            })
-        });
-        this._onResize = () => {
-        };
-        this._onMouseWheel = (e) => {
-            //@ts-ignore
-            e = e || window.event;
-            e.preventDefault();
-            e.stopPropagation();
-        };
-        this._onMouseWheelFF = (e) => {
-            this._onMouseWheel(e);
-        };
-        this._onClick = (e) => {
-            //@ts-ignore
-            e = e || window.event;
-            e.stopPropagation();
-            this.checked = !this._checked;
-        };
-        this._checked = options.checked || false;
-        this._disabled = options.disabled || false;
-        //@ts-ignore
-        this.events = this.events.registerNames(SLIDER_EVENTS);
-        this.$label = null;
-        this.$input = null;
-    }
-    set disabled(disabled) {
-        this._disabled = disabled;
-        this._updateDisabled();
-    }
-    _updateDisabled() {
-        if (!this.el)
-            return;
-        if (this._disabled) {
-            this.el.classList.add("og-input-disabled");
-        }
-        else {
-            this.el.classList.remove("og-input-disabled");
-        }
-    }
-    get disabled() {
-        return this._disabled;
-    }
-    render(params) {
-        super.render(params);
-        this.$label = this.select(".og-input-label");
-        if (this.$label.innerHTML === "") {
-            this.$label.style.display = "none";
-        }
-        this.$input = this.select("input");
-        this.$input.checked = this._checked;
-        this._updateDisabled();
-        this._initEvents();
-        return this;
-    }
-    set checked(isChecked) {
-        if (isChecked !== this._checked) {
-            this._checked = isChecked;
-            if (this.$input) {
-                this.$input.checked = this._checked;
-            }
-            this.events.dispatch(this.events.change, this._checked, this);
-        }
-    }
-    get checked() {
-        return this._checked;
-    }
-    _initEvents() {
-        //@ts-ignore
-        this.el.addEventListener("mousewheel", this._onMouseWheel);
-        this.el.addEventListener("wheel", this._onMouseWheelFF);
-        this.$input.addEventListener("click", this._onClick);
-    }
-    _clearEvents() {
-        //@ts-ignore
-        this.el.removeEventListener("mousewheel", this._onMouseWheel);
-        this.el.removeEventListener("wheel", this._onMouseWheelFF);
-        this.$input.removeEventListener("click", this._onClick);
-    }
-    remove() {
-        this._clearEvents();
-        super.remove();
-    }
-    set visibility(visibility) {
-        if (this.el) {
-            if (visibility) {
-                this.el.style.display = "";
-            }
-            else {
-                this.el.style.display = "none";
-            }
-        }
-    }
-}
-export { Checkbox };

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

@@ -1,23 +0,0 @@
-import type { EventsHandler } from "../Events";
-import { View } from './View';
-import type { IViewParams, ViewEventsList } from './View';
-interface IColorParams extends IViewParams {
-    label?: string;
-    value?: string;
-}
-type ColorEventsList = ["input"];
-declare class Color extends View<null> {
-    events: EventsHandler<ColorEventsList> & EventsHandler<ViewEventsList>;
-    protected _value: string;
-    protected $label: HTMLElement | null;
-    protected $input: HTMLInputElement | null;
-    constructor(options?: IColorParams);
-    render(params: any): this;
-    set value(val: string);
-    get value(): string;
-    protected _initEvents(): void;
-    protected _clearEvents(): void;
-    protected _onInput: (e: Event) => void;
-    remove(): void;
-}
-export { Color };

package/lib/js/ui/Color.js

@@ -1,59 +0,0 @@
-import { View } from './View';
-import { stringTemplate } from '../utils/shared';
-const COLOR_EVENTS = ["input"];
-const TEMPLATE = `<div class="og-color">
-      <label for="{id}" class="og-color-label">{label}</label>
-      <input type="color" name="{id}" value="{value}"/>
-    </div>`;
-let __labelCounter__ = 0;
-class Color extends View {
-    constructor(options = {}) {
-        super({
-            template: stringTemplate(TEMPLATE, {
-                id: `color-${__labelCounter__++}`,
-                label: options.label || "",
-                value: options.value || "#000000",
-            })
-        });
-        this._onInput = (e) => {
-            //@ts-ignore
-            this.value = e.target.value;
-        };
-        //@ts-ignore
-        this.events = this.events.registerNames(COLOR_EVENTS);
-        this._value = options.value || "blue";
-        this.$label = null;
-        this.$input = null;
-    }
-    render(params) {
-        super.render(params);
-        this.$label = this.select(".og-color-label");
-        if (this.$label.innerHTML === "") {
-            this.$label.style.display = "none";
-        }
-        this.$input = this.select("input");
-        this._initEvents();
-        return this;
-    }
-    set value(val) {
-        if (val !== this._value) {
-            this._value = val;
-            this.$input.value = this._value;
-            this.events.dispatch(this.events.input, this._value, this);
-        }
-    }
-    get value() {
-        return this._value;
-    }
-    _initEvents() {
-        this.$input.addEventListener("input", this._onInput);
-    }
-    _clearEvents() {
-        this.$input.removeEventListener("input", this._onInput);
-    }
-    remove() {
-        this._clearEvents();
-        super.remove();
-    }
-}
-export { Color };

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

@@ -1,59 +0,0 @@
-import { Button } from './Button';
-import { View } from './View';
-import type { IViewParams, ViewEventsList } from './View';
-import type { EventsHandler } from "../Events";
-export interface IDialogParams extends IViewParams {
-    title?: string;
-    visible?: boolean;
-    resizable?: boolean;
-    width?: number;
-    height?: number;
-    left?: number;
-    right?: 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;
-    protected _right: number | null;
-    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;
-    getVisibility(): boolean;
-    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

@@ -1,193 +0,0 @@
-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}px` : "",
-                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);
-        this._right = options.right != undefined ? options.right : null;
-    }
-    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();
-        if (this._right != null) {
-            this.el.style.visibility = "hidden";
-            const observer = new IntersectionObserver((entries, obs) => {
-                entries.forEach(entry => {
-                    if (entry.isIntersecting) {
-                        this.el.style.visibility = "visible";
-                        //@ts-ignore
-                        if (this.el.parentNode) {
-                            this.setPosition(this.el.parentNode.clientWidth - this.el.clientWidth - this._right);
-                            obs.disconnect();
-                        }
-                    }
-                });
-            });
-            observer.observe(this.el);
-        }
-        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();
-        }
-    }
-    getVisibility() {
-        return this._visibility;
-    }
-    _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/Input.d.ts

@@ -1,33 +0,0 @@
-import type { EventsHandler } from "../Events";
-import { View } from './View';
-import type { IViewParams, ViewEventsList } from './View';
-interface IInputParams extends IViewParams {
-    label?: string;
-    value?: string;
-    min?: number;
-    max?: number;
-    type?: string;
-    maxFixed?: number;
-}
-type InputEventsList = ["change"];
-declare class Input extends View<null> {
-    events: EventsHandler<InputEventsList> & EventsHandler<ViewEventsList>;
-    protected _value: string;
-    protected $label: HTMLElement | null;
-    protected $input: HTMLInputElement | null;
-    protected _maxFixed: number;
-    constructor(options?: IInputParams);
-    render(params: any): this;
-    protected _onResize: () => void;
-    set value(val: string | number);
-    protected _setValue(val: string | number): void;
-    get value(): string;
-    protected _initEvents(): void;
-    protected _clearEvents(): void;
-    protected _onMouseWheel: (e: WheelEvent) => void;
-    protected _onMouseWheelFF: (e: WheelEvent) => void;
-    protected _onInput: (e: Event) => void;
-    remove(): void;
-    set visibility(visibility: boolean);
-}
-export { Input };

package/lib/js/ui/Input.js

@@ -1,107 +0,0 @@
-import { View } from './View';
-import { stringTemplate, toFixedMax } from '../utils/shared';
-const SLIDER_EVENTS = ["change"];
-const TEMPLATE = `<div class="og-input">
-      <div class="og-input-label">{label}</div>
-      <input type="{type}"/>
-    </div>`;
-class Input extends View {
-    constructor(options = {}) {
-        super({
-            template: stringTemplate(TEMPLATE, {
-                label: options.label || "",
-                type: options.type || "text"
-            })
-        });
-        this._onResize = () => {
-        };
-        this._onMouseWheel = (e) => {
-            //@ts-ignore
-            e = e || window.event;
-            e.preventDefault();
-            e.stopPropagation();
-        };
-        this._onMouseWheelFF = (e) => {
-            this._onMouseWheel(e);
-        };
-        this._onInput = (e) => {
-            //@ts-ignore
-            e = e || window.event;
-            e.preventDefault();
-            e.stopPropagation();
-            //@ts-ignore
-            this._setValue(e.target.value);
-        };
-        //@ts-ignore
-        this.events = this.events.registerNames(SLIDER_EVENTS);
-        this._value = options.value || "";
-        this._maxFixed = options.maxFixed != undefined ? options.maxFixed : -1;
-        this.$label = null;
-        this.$input = null;
-    }
-    render(params) {
-        super.render(params);
-        this.$label = this.select(".og-input-label");
-        if (this.$label.innerHTML === "") {
-            this.$label.style.display = "none";
-        }
-        this.$input = this.select("input");
-        this._initEvents();
-        return this;
-    }
-    set value(val) {
-        if (val !== this._value) {
-            if (typeof val === "number") {
-                this._value = toFixedMax(val, this._maxFixed);
-            }
-            else {
-                this._value = val;
-            }
-            if (this.$input) {
-                this.$input.value = this._value;
-            }
-            this.events.dispatch(this.events.change, this._value, this);
-        }
-    }
-    _setValue(val) {
-        if (val !== this._value) {
-            if (typeof val === "number") {
-                this._value = toFixedMax(val, this._maxFixed);
-            }
-            else {
-                this._value = val;
-            }
-            this.events.dispatch(this.events.change, this._value, this);
-        }
-    }
-    get value() {
-        return this._value;
-    }
-    _initEvents() {
-        //@ts-ignore
-        this.el.addEventListener("mousewheel", this._onMouseWheel);
-        this.el.addEventListener("wheel", this._onMouseWheelFF);
-        this.$input.addEventListener("input", this._onInput);
-    }
-    _clearEvents() {
-        //@ts-ignore
-        this.el.removeEventListener("mousewheel", this._onMouseWheel);
-        this.el.removeEventListener("wheel", this._onMouseWheelFF);
-        this.$input.removeEventListener("input", this._onInput);
-    }
-    remove() {
-        this._clearEvents();
-        super.remove();
-    }
-    set visibility(visibility) {
-        if (this.el) {
-            if (visibility) {
-                this.el.style.display = "";
-            }
-            else {
-                this.el.style.display = "none";
-            }
-        }
-    }
-}
-export { Input };

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

@@ -1,39 +0,0 @@
-import type { EventsHandler } from "../Events";
-import { View } from './View';
-import type { IViewParams, 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 };