@openglobus/og 0.14.4 → 0.15.0

package/src/og/ui/Button.js

@@ -0,0 +1,106 @@
+'use strict'
+
+import { View } from './View.js';
+import { stringTemplate } from '../utils/shared.js';
+
+const TEMPLATE =
+    `<div class="og-button">
+       <div class="og-button-icon">{icon}</div>
+       <div class="og-button-text">{text}</div>
+    </div>`;
+
+class Button extends View {
+    constructor(options = {}) {
+        super({
+            template: stringTemplate(TEMPLATE, {
+                icon: options.icon || "",
+                text: options.text || ""
+            }),
+            ...options,
+            eventList: ["click", "mousedown", "mouseup", "touchstart", "touchend", "touchcancel", ...(options.eventList || [])]
+        });
+
+        this.name = options.name || "";
+
+        this.$icon;
+        this.$text;
+    }
+
+    render(params) {
+        super.render(params);
+        this.$icon = this.select(".og-button-icon");
+        this.$text = this.select(".og-button-text");
+        this.el.__og_button__ = this;
+        this._initEvents();
+        return this;
+    }
+
+    _initEvents() {
+        this._onMouseClick_ = this._onMouseClick.bind(this);
+        this.el.addEventListener("click", this._onMouseClick_);
+
+        this._onMouseDown_ = this._onMouseDown.bind(this);
+        this.el.addEventListener("mousedown", this._onMouseDown_);
+
+        this._onMouseUp_ = this._onMouseUp.bind(this);
+        this.el.addEventListener("mouseup", this._onMouseUp_);
+
+        this._onTouchStart_ = this._onTouchStart.bind(this);
+        this.el.addEventListener("touchstart", this._onTouchStart_);
+
+        this._onTouchEnd_ = this._onTouchEnd.bind(this);
+        this.el.addEventListener("touchend", this._onTouchEnd_);
+
+        this._onTouchCancel_ = this._onTouchCancel.bind(this);
+        this.el.addEventListener("touchcancel", this._onTouchCancel_);
+
+    }
+
+    _onMouseDown(e) {
+        e = e || window.event;
+        e.preventDefault();
+        this._events.dispatch(this._events.mousedown, this, e);
+    }
+
+    _onMouseUp(e) {
+        e = e || window.event;
+        e.preventDefault();
+        this._events.dispatch(this._events.mouseup, this, e);
+    }
+
+    _onTouchStart(e) {
+        e = e || window.event;
+        e.preventDefault();
+        this._events.dispatch(this._events.touchstart, this, e);
+    }
+
+    _onTouchEnd(e) {
+        e = e || window.event;
+        e.preventDefault();
+        this._events.dispatch(this._events.touchend, this, e);
+    }
+
+    _onTouchCancel(e) {
+        e = e || window.event;
+        e.preventDefault();
+        this._events.dispatch(this._events.touchcancel, this, e);
+    }
+
+    _onMouseClick(e) {
+        e = e || window.event;
+        e.preventDefault();
+        this._events.dispatch(this._events.click, this, e);
+    }
+
+    remove() {
+        this._clearEvents();
+        super.remove();
+    }
+
+    _clearEvents() {
+        this.el.removeEventListener("click", this._onMouseClick_);
+        this._onMouseClick_ = undefined;
+    }
+}
+
+export { Button }

package/src/og/ui/ButtonGroup.js

@@ -0,0 +1,57 @@
+'use strict';
+
+import { Events } from '../Events.js';
+
+class ButtonGroup {
+    constructor(options) {
+        this._events = new Events(["change", ...(options.eventList || [])]);
+
+        this._buttons = options.buttons
+        for (let i = 0; i < this._buttons.length; i++) {
+            this._bindButton(this._buttons[i]);
+        }
+    }
+
+    on(eventName, callback, sender) {
+        this._events.on(eventName, callback, sender);
+    }
+
+    off(eventName, callback) {
+        this._events.off(eventName, callback);
+    }
+
+    _bindButton(button) {
+        button.on("change", this._onChange, this);
+    }
+
+    add(button) {
+        this._buttons.push(button);
+        this._bindButton(button);
+    }
+
+    _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);
+        }
+    }
+
+    remove(button) {
+        for (let i = 0; i < this._buttons.length; i++) {
+            if (this._buttons[i].isEqual(button)) {
+                this._buttons.splice(i);
+                button.off("change", this._onChange);
+                return;
+            }
+        }
+    }
+}
+
+export { ButtonGroup }

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 }