@openglobus/og 0.17.2 → 0.18.1

package/src/og/ui/Dialog.js

@@ -1,239 +0,0 @@
-'use strict'
-
-import { getDefault, stringTemplate } from '../utils/shared.js';
-import { Button } from './Button.js';
-import { CLOSE_ICON } from './icons.js';
-import { View } from './View.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>>`;
-
-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

@@ -1,170 +0,0 @@
-'use strict';
-
-import { clamp } from '../math.js';
-import { stringTemplate } from '../utils/shared.js';
-import { View } from './View.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_);
-
-        this._onMouseWheelFF_ = this._onMouseWheelFF.bind(this);
-        this.$panel.addEventListener("wheel", this._onMouseWheelFF_);
-    }
-
-    _clearEvents() {
-        this.$panel.removeEventListener("mousedown", this._onMouseDown_);
-        this._onMouseDown_ = undefined;
-
-        this.$input.removeEventListener("input", this._onInput_);
-        this._onInput_ = undefined;
-
-        this.$panel.removeEventListener("mousewheel", this._onMouseWheel_);
-        this._onMouseWheel_ = undefined;
-
-        this.$panel.removeEventListener("wheel", this._onMouseWheelFF_);
-        this._onMouseWheelFF_ = undefined;
-    }
-
-    _onMouseWheel(e) {
-        e = e || window.event;
-        e.preventDefault();
-        e.stopPropagation();
-        this.value = this._value + Math.sign(e.wheelDelta) * (this._max - this._min) / 100.0;
-    }
-
-    _onMouseWheelFF(e) {
-        this._onMouseWheel(e);
-    }
-
-    _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;
-    }
-
-    remove() {
-        this._clearEvents();
-        super.remove();
-    }
-}
-
-export {
-    Slider
-};

package/src/og/ui/ToggleButton.js

@@ -1,51 +0,0 @@
-'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/ui/UIhelpers.js

@@ -1,155 +0,0 @@
-'use strict';
-
-/* 
-* Helper functions for UI/UX
-*/
-
-// Creates new DOM elements and assigns attributes
-export function elementFactory(type, attributes, ...children) {
-    const el = document.createElement(type)
-    let key = null;
-    for (key in attributes) {
-        el.setAttribute(key, attributes[key])
-    }
-
-    children.forEach(child => {
-        if (typeof child === 'string') {
-            el.appendChild(document.createTextNode(child))
-        } else {
-            el.appendChild(child)
-        }
-    })
-
-    return el;
-}
-
-// Appends array of children to parent
-export function appendChildren(parent, childrenArray) {
-    childrenArray.forEach(child => parent.appendChild(child))
-}
-
-// Cycles an array of text and outputs next
-export function toggleText(elementText, textArray) {
-    let textIndex = textArray.indexOf(elementText);
-    let nextIndex;
-    textIndex >= 0 && textIndex < textArray.length - 1 ?
-        nextIndex = textIndex + 1 :
-        nextIndex = 0;
-    return textArray[nextIndex];
-}
-
-// Enables a movement of a DOM element. Also disables/enables mouse navigations for og-planet
-export function enableElmovement(el, planet) {
-
-    let newPosX = 0,
-        newPosY = 0,
-        startPosX = 0,
-        startPosY = 0;
-
-    const behaviour = (e) => {
-        e.preventDefault();
-        planet.renderer.controls.mouseNavigation.deactivate()
-        // get the starting position of the cursor
-        startPosX = e.clientX;
-        startPosY = e.clientY;
-
-        document.addEventListener('mousemove', mouseMove);
-
-        document.addEventListener('mouseup', function (e) {
-            document.removeEventListener('mousemove', mouseMove);
-            planet.renderer.controls.mouseNavigation.activate();
-        });
-    }
-
-    const mouseMove = (e) => {
-        // calculate the new position
-        newPosX = startPosX - e.clientX;
-        newPosY = startPosY - e.clientY;
-
-        // with each move we also want to update the start X and Y
-        startPosX = e.clientX;
-        startPosY = e.clientY;
-
-        // set the element's new position:
-        el.style.top = (el.offsetTop - newPosY) + "px";
-        el.style.left = (el.offsetLeft - newPosX) + "px";
-    }
-
-    return { behaviour, mouseMove }
-}
-
-// Get all nodes of a class
-export function getAllnodes(CSSclass) {
-    return document.querySelectorAll(CSSclass);
-}
-
-// Convert nodelist to an Array
-export function nodesToArray(nodeList) {
-    return Array.from(nodeList);
-}
-
-// Adds a class to all elements selected
-export function setAllCSSclass(CSSclass, nodeArray) {
-    return nodeArray.forEach(x => x.classList.add(CSSclass));
-}
-
-// Sets all menu buttons to off
-export function allMenuBtnOFF() {
-    setAllCSSclass('og-OFF', nodesToArray(getAllnodes('.og-menu-btn')));
-}
-
-// Hides all dialoges of main menu
-export function allDialogsHide() {
-    setAllCSSclass('og-hide', nodesToArray(getAllnodes('.og-dialog')));
-}
-
-function isString(v) {
-    return typeof v === 'string' || v instanceof String;
-}
-
-// Handles the click inside/outside a dialog - closes dialog when click outside
-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');
-            if (dialog) {
-                dialog.classList.remove('og-hide');
-            }
-
-            if (this.classList.contains('og-has-dialog')) {
-                document.addEventListener('click', (e) => {
-                    if (e.target.matches(dialog_selector) || e.target.matches(btn_icon_id)) { //inside
-                        return;
-                    } else {//outside
-                        btn.classList.add('og-OFF');
-                        if (dialog) {
-                            dialog.classList.add('og-hide')
-                        }
-                        // TODO needs fix
-                        // this.removeEventListener('click', arguments.callee);
-                    }
-                })
-            }
-        } 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);
-        }
-    }
-}