@openglobus/og 0.14.10 → 0.15.0

package/src/og/ui/Dialog.js

@@ -0,0 +1,242 @@
+'use strict'
+
+import { View } from './View.js';
+import { getDefault, stringTemplate } from '../utils/shared.js';
+import { Button } from './Button.js';
+
+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>>`;
+
+const CLOSE_ICON = `<svg className="svg-icon" style="width: 1em; height: 1em;vertical-align: middle;fill: currentColor; overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <path d="M777.856 280.192l-33.92-33.952-231.872 231.872-231.84-231.872-33.984 33.888 231.872 231.904-231.84 231.84 33.888 33.984 231.904-231.904 231.84 231.872 33.952-33.888-231.872-231.904z"/>
+</svg>`
+
+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,
+            eventList: ["resize", "focus", "visibility", "dragstart", "dragend", ...(options.eventList || [])],
+        });
+
+        this._startPosX = 0;
+        this._startPosY = 0;
+
+        this.$header;
+        this.$title;
+        this.$constainer;
+        this.$buttons;
+
+        this._closeBtn;
+
+        this.useHide = options.useHide || false;
+
+        this._visibility = getDefault(options.visible, true);
+    }
+
+    static set __zIndex(n) {
+        this.__zIndex__ = n;
+    }
+
+    static get __zIndex() {
+        if (!this.__zIndex__ && this.__zIndex__ !== 0) {
+            this.__zIndex__ = 0;
+        }
+        return this.__zIndex__;
+    }
+
+    setContainer(htmlStr) {
+        this.$constainer.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 = 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 = new Button({
+            icon: CLOSE_ICON,
+            classList: ["og-button-size__20"]
+        });
+
+        this._onCloseBtnClick_ = this._onCloseBtnClick.bind(this);
+        this._closeBtn.on("click", this._onCloseBtnClick_);
+
+        this._closeBtn.appendTo(this.$buttons);
+    }
+
+    _initEvents() {
+        this._onMouseDown_ = this._onMouseDown.bind(this);
+        this.$header.addEventListener("mousedown", this._onMouseDown_);
+
+        this._onMouseDownAll_ = this._onMouseDownAll.bind(this);
+        this.el.addEventListener("mousedown", this._onMouseDownAll_);
+    }
+
+    _onCloseBtnClick(e) {
+        this.close();
+    }
+
+    _onMouseDownAll() {
+        this.bringToFront();
+    }
+
+    _onMouseDown(e) {
+        e = e || window.event;
+        e.preventDefault();
+
+        this._startDragging();
+
+        this._startPosX = e.clientX;
+        this._startPosY = e.clientY;
+
+        this._onMouseMove_ = this._onMouseMove.bind(this)
+        document.addEventListener("mousemove", this._onMouseMove_);
+
+        this._onMouseUp_ = this._onMouseUp.bind(this);
+        document.addEventListener("mouseup", this._onMouseUp_);
+    }
+
+    setPosition(x, y) {
+        if (x != undefined) {
+            this.el.style.left = `${x}px`;
+        }
+        if (y != undefined) {
+            this.el.style.top = `${y}px`;
+        }
+    }
+
+    _onMouseMove(e) {
+        e = e || window.event;
+        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);
+    }
+
+    _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");
+        }
+    }
+
+    _onMouseUp() {
+        this._clearDragging();
+
+        document.removeEventListener("mouseup", this._onMouseUp_);
+        this._onMouseUp_ = undefined;
+
+        document.removeEventListener("mousemove", this._onMouseMove_);
+        this._onMouseMove_ = undefined;
+    }
+
+    remove() {
+        this._clearDragging();
+        this._clearEvents();
+        super.remove();
+    }
+
+    _clearEvents() {
+        this._closeBtn.off("click", this._onCloseBtnClick_);
+        this._onCloseBtnClick_ = undefined;
+
+        document.removeEventListener("mouseup", this._onMouseUp_);
+        this._onMouseUp_ = undefined;
+
+        document.removeEventListener("mousemove", this._onMouseMove_);
+        this._onMouseMove_ = undefined;
+
+        this.$header.removeEventListener("mousedown", this._onMouseDown_);
+        this._onMouseDown_ = undefined;
+
+        this.el.removeEventListener("mousedown", this._onMouseDownAll_);
+        this._onMouseDownAll_ = undefined;
+    }
+}
+
+export { Dialog }

package/src/og/ui/Slider.js

@@ -0,0 +1,144 @@
+'use strict';
+
+import { View } from './View.js';
+import { stringTemplate } from '../utils/shared.js';
+import { clamp } from '../math.js';
+
+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 || ""
+            }), ...options, eventList: ["change", ...(options.eventList || [])]
+        });
+
+        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._onResize_ = this._onResize.bind(this);
+        this._resizeObserver = new ResizeObserver(this._onResize_);
+
+        this.$label;
+        this.$pointer;
+        this.$progress;
+        this.$input;
+        this.$panel;
+    }
+
+    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;
+    }
+
+    _onResize(e) {
+        this._setOffset(this._value * this.$panel.clientWidth / (this._max - this._min));
+    }
+
+    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._onMouseDown_ = this._onMouseDown.bind(this);
+        this.$panel.addEventListener("mousedown", this._onMouseDown_);
+
+        this._onInput_ = this._onInput.bind(this);
+        this.$input.addEventListener("input", this._onInput_);
+
+        this._onMouseWheel_ = this._onMouseWheel.bind(this);
+        this.$panel.addEventListener("mousewheel", this._onMouseWheel_);
+    }
+
+    _onMouseWheel(e) {
+        e = e || window.event;
+        e.preventDefault();
+        e.stopPropagation();
+        this.value = this._value + Math.sign(e.wheelDelta) * (this._max - this._min) / 100.0;
+    }
+
+    _onInput(e) {
+        e = e || window.event;
+        e.preventDefault();
+        e.stopPropagation();
+        this.value = parseFloat(e.target.value);
+    }
+
+    _onMouseDown(e) {
+        e = e || window.event;
+        e.preventDefault();
+
+        this._startPosX = e.clientX;
+
+        this.value = this._min + (this._max - this._min) * (e.offsetX / this.$panel.clientWidth);
+
+        this._onMouseMove_ = this._onMouseMove.bind(this)
+        document.addEventListener("mousemove", this._onMouseMove_);
+
+        this._onMouseUp_ = this._onMouseUp.bind(this);
+        document.addEventListener("mouseup", this._onMouseUp_);
+    }
+
+    _setOffset(x) {
+        if (x >= 0 && x <= this.$panel.clientWidth) {
+            this.$pointer.style.left = this.$progress.style.width = `${x * 100 / this.$panel.clientWidth}%`;
+        }
+    }
+
+    _onMouseMove(e) {
+        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;
+    }
+
+    _onMouseUp() {
+        document.removeEventListener("mouseup", this._onMouseUp_);
+        this._onMouseUp_ = undefined;
+
+        document.removeEventListener("mousemove", this._onMouseMove_);
+        this._onMouseMove_ = undefined;
+    }
+}
+
+export {
+    Slider
+}

package/src/og/ui/ToggleButton.js

@@ -0,0 +1,51 @@
+'use strict';
+
+import { Button } from './Button.js';
+
+class ToggleButton extends Button {
+    constructor(options) {
+        super({
+            ...options,
+            eventList: ["change", ...(options.eventList || [])]
+        });
+
+        this._isActive = options.isActive || false;
+
+        this.preventClick = options.preventClick || false;
+    }
+
+    setActive(isActive, stopPropagation) {
+        if (isActive !== this._isActive) {
+            this._isActive = isActive;
+            this._toggle();
+            if (!stopPropagation) {
+                this._events.dispatch(this._events.change, isActive, this);
+            }
+        }
+    }
+
+    _toggle() {
+        this.el.classList.toggle("og-button__active");
+    }
+
+    get isActive() {
+        return this._isActive;
+    }
+
+    render(params) {
+        super.render(params);
+        if (this._isActive) {
+            this._toggle();
+        }
+        return this;
+    }
+
+    _onMouseClick(e) {
+        if (!this.preventClick) {
+            super._onMouseClick(e);
+            this.setActive(!this.isActive);
+        }
+    }
+}
+
+export { ToggleButton }

package/src/og/{control → ui}/UIhelpers.js

@@ -108,12 +108,16 @@ function isString(v) {
 }
 
 // Handles the click inside/outside a dialog - closes dialog when click outside
-export function btnClickHandler(btn_id, dialog_id, dialog_selector, btn_icon_id) {
+export function btnClickHandler(btn_id, dialog_id, dialog_selector, btn_icon_id, callback) {
     let btn = isString(btn_id) ? document.getElementById(btn_id) : btn_id;
     let dialog = document.getElementById(dialog_id);
     btn.onclick = function (e) {
+        
+        let off = true;
+        
         if (this.classList.contains('og-OFF')) {
             // Turn to ON
+            off = false;
             allMenuBtnOFF();
             allDialogsHide();
             this.classList.remove('og-OFF');
@@ -137,10 +141,15 @@ export function btnClickHandler(btn_id, dialog_id, dialog_selector, btn_icon_id)
             }
         } else {
             // Turn to OFF
+            off = true;
             this.classList.add('og-OFF');
             if (dialog) {
                 dialog.classList.add('og-hide');
             }
         }
+        
+        if (callback && typeof callback === 'function'){
+            callback(off);
+        }
     }
-}
+}

package/src/og/ui/View.js

@@ -0,0 +1,190 @@
+'use strict';
+
+
+import { stringTemplate } from '../utils/shared.js';
+import { parseHTML } from "../utils/shared.js";
+import { Events } from '../Events.js';
+
+class View {
+    constructor(options = {}) {
+        this.__id = View.__staticCounter++;
+        this._events = new Events(options.eventList || []);
+        this.model = options.model || null;
+        this.template = options.template || "";
+        this.parent = options.parent || null;
+        this._classList = options.classList || [];
+        if (options.appendTo) {
+            this.appendTo(options.appendTo);
+        }
+    }
+
+    static set __staticCounter(n) {
+        this.__counter__ = n;
+    }
+
+    static get __staticCounter() {
+        if (!this.__counter__ && this.__counter__ !== 0) {
+            this.__counter__ = 0;
+        }
+        return this.__counter__;
+    }
+
+    static getHTML(template, params) {
+        return stringTemplate(template, params);
+    }
+
+    static parseHTML(htmlStr) {
+        return parseHTML(htmlStr);
+    }
+
+    static insertAfter(newNodes, referenceNode) {
+        if (!Array.isArray(newNodes)) {
+            newNodes = [newNodes];
+        }
+        for (let i = 0; i < newNodes.length; i++) {
+            if (referenceNode.parentNode) {
+                referenceNode.parentNode.insertBefore(newNodes[i], referenceNode.nextSibling);
+            }
+        }
+        return newNodes;
+    }
+
+    static insertBefore(newNodes, referenceNode) {
+        if (!Array.isArray(newNodes)) {
+            newNodes = [newNodes];
+        }
+        for (let i = 0; i < newNodes.length; i++) {
+            if (referenceNode.parentNode) {
+                referenceNode.parentNode.insertBefore(newNodes[i], referenceNode);
+            }
+        }
+    }
+
+    on(eventName, callback, sender) {
+        return this._events.on(eventName, callback, sender);
+    }
+
+    off(eventName, callback) {
+        return this._events.off(eventName, callback);
+    }
+
+    insertBefore(view) {
+        if (!this.el) {
+            this.render();
+        }
+        if (this.el) {
+            if (view instanceof HTMLElement && view.parentNode) {
+                View.insertBefore(this.el, view);
+            }
+            if (view instanceof View && view.el.parentNode) {
+                View.insertBefore(this.el, view.el);
+            }
+        }
+    }
+
+    insertAfter(view) {
+        if (!this.el) {
+            this.render();
+        }
+        if (this.el) {
+            if (view instanceof HTMLElement && view.parentNode) {
+                View.insertAfter(this.el, view);
+            }
+            if (view instanceof View && view.el.parentNode) {
+                View.insertAfter(this.el, view.el);
+            }
+        }
+    }
+
+    isEqual(view) {
+        return view.__id === this.__id;
+    }
+
+    appendTo(node, clean, firstPosition) {
+        if (node) {
+            if (!this.el) {
+                this.beforeRender(node);
+                this.render();
+            }
+
+            if (this.el && this.el.parentNode) {
+                this.el.parentNode.removeChild(this.el);
+            }
+
+            if (clean) {
+                node.innerHTML = "";
+            }
+
+            if (firstPosition) {
+                if (node.childNodes[0]) {
+                    View.insertBefore(this.el, node.childNodes[0]);
+                } else {
+                    node.appendChild(this.el);
+                }
+            } else {
+                node.appendChild(this.el);
+            }
+            this.afterRender(node);
+        }
+
+        return this;
+    }
+
+    afterRender(parentNode) {
+        //virtual
+    }
+
+    beforeRender(parentNode) {
+        //virtual
+    }
+
+    stopPropagation() {
+        this._events.stopPropagation();
+    }
+
+    renderTemplate(params) {
+        return View.parseHTML(View.getHTML(this.template, params || {}))[0];
+    }
+
+    render(params) {
+        this.el = this.renderTemplate(params);
+        for (let i = 0, len = this._classList.length; i < len; i++) {
+            this.el.classList.add(this._classList[i]);
+        }
+        return this;
+    }
+
+    select(queryStr) {
+        return this.el.querySelector(queryStr);
+    }
+
+    selectRemove(queryStr) {
+        if (this.el) {
+            let r = this.select(queryStr);
+            if (r && r.parentNode) {
+                r.parentNode.removeChild(r);
+                return r;
+            }
+        }
+    }
+
+    selectAll(queryStr, callback) {
+        if (this.el) {
+            const res = this.el.querySelectorAll(queryStr);
+            if (callback) {
+                for (let i = 0, len = res.length; i < len; i++) {
+                    callback(res[i], i);
+                }
+            }
+            return res;
+        }
+    }
+
+    remove() {
+        if (this.el && this.el.parentNode) {
+            this.el.parentNode.removeChild(this.el);
+        }
+    }
+}
+
+export { View };