From f7c303a94deb82af996408e94bf2d8722451b7ea Mon Sep 17 00:00:00 2001 From: Dmitriy Zayceff Date: Mon, 12 Mar 2018 16:03:41 +0300 Subject: [PATCH] Upd. --- wizard-core/src-php/.inc/core-functions.php | 33 ---------- wizard-web-ui/resources/dnext-engine.js | 72 ++++++++++----------- wizard-web-ui/resources/dnext-engine.js.map | 2 +- 3 files changed, 37 insertions(+), 70 deletions(-) delete mode 100644 wizard-core/src-php/.inc/core-functions.php diff --git a/wizard-core/src-php/.inc/core-functions.php b/wizard-core/src-php/.inc/core-functions.php deleted file mode 100644 index 9b14db0..0000000 --- a/wizard-core/src-php/.inc/core-functions.php +++ /dev/null @@ -1,33 +0,0 @@ - {\r\n if (sessionStorage.getItem('AppMediator.reloading')) {\r\n setTimeout(() => window.location.reload(true), 200);\r\n }\r\n });\r\n\r\n this.dispatcher.onOpen(() => {\r\n sessionStorage.setItem('AppMediator.reloading', false);\r\n\r\n this.send('initialize', {});\r\n this.sendIfCan('ui-ready', {\r\n location: {\r\n contextUrl: contextUrl,\r\n hash: window.location.hash ? window.location.hash.substr(1) : '',\r\n path: window.location.pathname,\r\n host: window.location.host,\r\n port: window.location.port,\r\n protocol: window.location.protocol,\r\n target: window.location.target,\r\n }\r\n });\r\n });\r\n\r\n this.dispatcher.onClose(() => {\r\n this.dispatcher = null;\r\n\r\n if (this.node) {\r\n this.node.free();\r\n }\r\n });\r\n\r\n const handlers = {\r\n 'ui-render': this.triggerRenderView,\r\n 'ui-reload': this.triggerReload,\r\n 'ui-alert': this.triggerAlert,\r\n 'ui-set-property': this.triggerSetProperty,\r\n 'ui-call-method': this.triggerCallMethod,\r\n 'ui-event-link': this.triggerOnEventLink,\r\n 'ui-create-node': this.triggerCreateNode,\r\n 'ui-create-css-style': this.triggerCreateCssStyle,\r\n 'ui-destroy-css-style': this.triggerDestroyCssStyle\r\n };\r\n\r\n this.dispatcher.onMessage((data) => {\r\n const message = JSON.parse(data);\r\n const type = message.type;\r\n\r\n console.debug(\"AppMediator.receive\", message);\r\n\r\n if (handlers.hasOwnProperty(type)) {\r\n handlers[type].call(this, message);\r\n } else {\r\n switch (type) {\r\n case \"system-console-log\":\r\n const text = message['message'];\r\n\r\n switch (message['kind']) {\r\n case 'warn':\r\n console.warn(text);\r\n break;\r\n case 'error':\r\n console.error(text);\r\n break;\r\n case 'info':\r\n console.info(text);\r\n break;\r\n case 'debug':\r\n console.debug(text);\r\n break;\r\n case 'trace':\r\n console.trace(text);\r\n break;\r\n case 'clear':\r\n console.clear();\r\n break;\r\n default:\r\n console.log(text);\r\n break;\r\n }\r\n\r\n break;\r\n\r\n case \"system-eval\":\r\n const {script, callback} = message;\r\n const result = eval(script);\r\n\r\n if (callback) {\r\n callback(result);\r\n }\r\n\r\n break;\r\n\r\n case \"system-callback\":\r\n const {id} = message;\r\n\r\n if (this._callbacks[id]) {\r\n this._callbacks[id].apply(message);\r\n delete this._callbacks[id];\r\n }\r\n\r\n break;\r\n\r\n case \"history-push\":\r\n const url = message['url'];\r\n const title = message['title'];\r\n const hash = message['hash'];\r\n\r\n if (window.location.pathname === url) {\r\n if (title !== undefined) {\r\n document.title = title;\r\n }\r\n if (hash !== undefined) {\r\n window.location.hash = hash;\r\n }\r\n\r\n break;\r\n }\r\n\r\n window.history.pushState(null, message['title'], url);\r\n\r\n if (title !== undefined) {\r\n document.title = title;\r\n }\r\n if (hash !== undefined) {\r\n window.location.hash = hash;\r\n }\r\n\r\n break;\r\n\r\n case \"page-set-properties\":\r\n if (message['title'] !== undefined) {\r\n document.title = message['title'];\r\n }\r\n\r\n if (message['hash'] !== undefined) {\r\n window.location.hash = message['hash'];\r\n }\r\n\r\n break;\r\n }\r\n }\r\n });\r\n\r\n setInterval(() => {\r\n const docVisible = !document.hidden;\r\n\r\n if (docVisible !== this.activated) {\r\n this.activated = docVisible;\r\n\r\n if (this.activated) {\r\n this.sendIfCan('activate', {});\r\n }\r\n }\r\n }, 1);\r\n }\r\n\r\n parseValue(value) {\r\n if (value instanceof Object) {\r\n if (value.hasOwnProperty('$node')) {\r\n return this.findNodeByUuidGlobally(value['$node']);\r\n } else if (value.hasOwnProperty('$createNode')) {\r\n const schema = value['$createNode'];\r\n\r\n const uiLoader = new UILoader();\r\n return uiLoader.load(schema);\r\n } else if (value.hasOwnProperty('$callable')) {\r\n const uuid = value['$callable'];\r\n\r\n return () => {\r\n this.sendIfCan('callback-trigger', {\r\n 'uuid': uuid,\r\n 'args': arguments\r\n });\r\n };\r\n }\r\n }\r\n\r\n if (value instanceof Array) {\r\n for (let i = 0; i < value.length; i++) {\r\n value[i] = this.parseValue(value[i]);\r\n }\r\n\r\n return value;\r\n }\r\n\r\n if (value instanceof Object) {\r\n const newValue = {};\r\n\r\n for (let key in value) {\r\n if (value.hasOwnProperty(key)) {\r\n newValue[key] = this.parseValue(value[key]);\r\n }\r\n }\r\n\r\n return newValue;\r\n }\r\n\r\n return value;\r\n }\r\n\r\n prepareValue(value) {\r\n if (value instanceof Node) {\r\n if (value.uuid !== undefined) {\r\n return {'$node': value.uuid}\r\n } else {\r\n console.error('Cannot send unregistered node', value);\r\n return null;\r\n }\r\n }\r\n\r\n if (value instanceof Array) {\r\n for (let i = 0; i < value.length; i++) {\r\n value[i] = this.prepareValue(value[i]);\r\n }\r\n\r\n return value;\r\n }\r\n\r\n if (value instanceof Object) {\r\n const newValue = {};\r\n\r\n for (let key in value) {\r\n if (value.hasOwnProperty(key)) {\r\n newValue[key] = this.prepareValue(value[key]);\r\n }\r\n }\r\n\r\n return newValue;\r\n }\r\n\r\n return value;\r\n }\r\n\r\n /**\r\n * @param node\r\n * @param data\r\n * @param callback\r\n */\r\n sendUserInput(node, data, callback = null) {\r\n if (!this.dispatcher) {\r\n return;\r\n }\r\n\r\n if (!document.hidden) {\r\n setTimeout(() => {\r\n let newData = data;\r\n\r\n if (typeof data === \"function\") {\r\n newData = data();\r\n }\r\n\r\n this.sendIfCan('ui-user-input', {\r\n 'uuid': node.uuid,\r\n 'data': this.prepareValue(newData)\r\n }, callback)\r\n }, 0);\r\n } else {\r\n console.warn('Ignore User input');\r\n }\r\n }\r\n\r\n /**\r\n * @param type\r\n * @param message\r\n * @param callback\r\n * @returns {boolean}\r\n */\r\n sendIfCan(type, message, callback) {\r\n if (this.dispatcher !== undefined) {\r\n this.send(type, message, callback);\r\n return true;\r\n } else {\r\n return false;\r\n }\r\n }\r\n\r\n /**\r\n * @param type\r\n * @param message\r\n * @param callback\r\n */\r\n send(type, message, callback) {\r\n if (this.dispatcher === undefined) {\r\n throw \"Mediator is not in watching state.\";\r\n }\r\n\r\n message.type = type;\r\n message.id = Math.random().toString(36).substring(7);\r\n message.sessionId = this.sessionId;\r\n message.sessionIdUuid = this.uuid;\r\n\r\n if (callback) {\r\n this._callbacks[message.id] = callback;\r\n message.needCallback = true;\r\n }\r\n\r\n console.debug(\"AppMediator.send\", message);\r\n\r\n this.dispatcher.send(JSON.stringify(message));\r\n }\r\n\r\n findNodeByUuidGlobally(uuid) {\r\n let found = this.findNodeByUuid(uuid, this.node);\r\n\r\n if (found === null) {\r\n if (this._nodes.hasOwnProperty(uuid)) {\r\n found = this._nodes[uuid];\r\n }\r\n }\r\n\r\n if (found === null) {\r\n for (const key in this._nodes) {\r\n if (this._nodes.hasOwnProperty(key)) {\r\n const found = this.findNodeByUuid(uuid, this._nodes[key]);\r\n\r\n if (found !== null) {\r\n return found;\r\n }\r\n }\r\n }\r\n }\r\n\r\n return found;\r\n }\r\n\r\n findNodeByUuid(uuid, node) {\r\n if (uuid === node.uuid) {\r\n return node;\r\n }\r\n\r\n let children = node.innerNodes();\r\n\r\n for (let i = 0; i < children.length; i++) {\r\n if (children[i].uuid === uuid) {\r\n return children[i];\r\n }\r\n\r\n const found = this.findNodeByUuid(uuid, children[i]);\r\n\r\n if (found !== null) {\r\n return found;\r\n }\r\n }\r\n\r\n return null;\r\n }\r\n\r\n triggerEvent(node, event, e) {\r\n const data = {\r\n type: e.type,\r\n which: e.which,\r\n result: e.result,\r\n namespace: e.namespace,\r\n position: [e.pageX, e.pageY]\r\n };\r\n\r\n this.sendIfCan('ui-trigger', {\r\n uuid: node.uuid,\r\n event: event,\r\n data: this.prepareValue(data),\r\n });\r\n }\r\n\r\n /**\r\n * Render new view.\r\n * @param message\r\n */\r\n triggerRenderView(message) {\r\n const uiLoader = new UILoader();\r\n this.node = uiLoader.load(message['schema']);\r\n\r\n this.rootDom.empty();\r\n this.rootDom.append(this.node.dom);\r\n\r\n this.sendIfCan('ui-render-done', {\r\n size: [this.node.dom.width(), this.node.dom.height()]\r\n }, () => {\r\n const triggerRender = (node) => {\r\n node.trigger('render');\r\n\r\n let innerNodes = node.innerNodes();\r\n\r\n for (let key in innerNodes) {\r\n if (innerNodes.hasOwnProperty(key)) {\r\n triggerRender(innerNodes[key]);\r\n }\r\n }\r\n };\r\n\r\n triggerRender(this.node);\r\n\r\n for (const key in this._nodes) {\r\n if (this._nodes.hasOwnProperty(key)) {\r\n triggerRender(this._nodes[key]);\r\n }\r\n }\r\n });\r\n }\r\n\r\n triggerAlert(message) {\r\n const text = message['text'];\r\n alert(text);\r\n }\r\n\r\n triggerCallMethod(message) {\r\n const uuid = message['uuid'];\r\n const method = message['method'];\r\n const args = this.parseValue(message['args'] || []);\r\n\r\n const node = this.findNodeByUuidGlobally(uuid);\r\n\r\n if (node !== null) {\r\n node[method].apply(node, args);\r\n } else {\r\n console.warn(`Failed to call method .${method}(), node with uuid = ${uuid} is not found`);\r\n }\r\n }\r\n\r\n triggerSetProperty(message) {\r\n const uuid = message['uuid'];\r\n const property = message['property'];\r\n const value = this.parseValue(message['value']);\r\n\r\n const node = this.findNodeByUuidGlobally(uuid);\r\n\r\n if (node !== null) {\r\n node[property] = value;\r\n } else {\r\n console.warn(`Failed to set property .${property}, node with uuid = ${uuid} is not found`);\r\n }\r\n }\r\n\r\n triggerOnEventLink(message) {\r\n const uuid = message['uuid'];\r\n const event = message['event'];\r\n\r\n const node = this.findNodeByUuidGlobally(uuid);\r\n\r\n if (node !== null) {\r\n node.off(`${event}.AppMediator`);\r\n\r\n node.on(`${event}.AppMediator`, (e) => {\r\n this.triggerEvent(node, event, e);\r\n });\r\n } else {\r\n console.warn(`Failed to link event ${event}, node with uuid = ${uuid} is not found`);\r\n }\r\n }\r\n\r\n triggerCreateNode(message) {\r\n const schema = message['schema'];\r\n\r\n const uiLoader = new UILoader();\r\n const node = uiLoader.load(schema);\r\n\r\n this._nodes[node.uuid] = node;\r\n\r\n node.trigger('render');\r\n }\r\n\r\n triggerCreateCssStyle(message) {\r\n this.triggerDestroyCssStyle(message);\r\n\r\n const { id, style } = message;\r\n\r\n const tag = document.createElement('style');\r\n\r\n tag.type = 'text/css';\r\n tag.innerHTML = style;\r\n tag.id = id;\r\n tag.className = 'dynamic-css';\r\n\r\n jQuery('head').append(jQuery(tag));\r\n }\r\n\r\n triggerDestroyCssStyle(message) {\r\n const { id } = message;\r\n jQuery(`.dynamic-css#${id}`).remove();\r\n }\r\n\r\n triggerReload(message) {\r\n sessionStorage.setItem('AppMediator.reloading', true);\r\n setTimeout(() => window.location.reload(true), 50);\r\n }\r\n}\r\n\r\nexport default new AppMediator();","import AppDispatcher from \"./AppDispatcher\";\r\n\r\nclass ChromiumEmbeddedAppDispatcher extends AppDispatcher\r\n{\r\n constructor(wsUrl) {\r\n super();\r\n\r\n this.wsUrl = wsUrl;\r\n\r\n this.onMessage(() => {});\r\n this.onError(() => {});\r\n this.onClose(() => {});\r\n }\r\n\r\n onOpen(callback) {\r\n window.cefOpenHandler = () => {\r\n callback();\r\n };\r\n\r\n setTimeout(() => window.cefOpenHandler(), 1);\r\n }\r\n\r\n onMessage(callback) {\r\n window.cefMessageHandler = (data) => callback(data);\r\n }\r\n\r\n onError(callback) {\r\n window.cefErrorHandler = () => callback();\r\n }\r\n\r\n onClose(callback) {\r\n window.cefCloseHandler = () => callback();\r\n }\r\n\r\n send(data) {\r\n window.cefQuery({\r\n request: 'ws:' + this.wsUrl + ':' + data,\r\n persistent: false,\r\n onSuccess: (res) => {\r\n },\r\n onFailure: (error_code, error_message) => {\r\n if (window.cefErrorHandler && error_code !== -1) {\r\n window.cefErrorHandler.call();\r\n }\r\n }\r\n });\r\n }\r\n}\r\n\r\nexport default ChromiumEmbeddedAppDispatcher;","import App from './App';\r\nimport UILoader from './UILoader';\r\nimport AppMediator from \"./AppMediator\";\r\nimport WebSocketAppDispatcher from \"./WebSocketAppDispatcher\";\r\nimport ChromiumEmbeddedAppDispatcher from \"./ChromiumEmbeddedAppDispatcher\";\r\n\r\nexport default {\r\n App, UILoader, AppMediator,\r\n WebSocketAppDispatcher, ChromiumEmbeddedAppDispatcher\r\n}\r\n","import Node from './../UX/Node';\r\nimport Container from './../UX/Container';\r\nimport UX from './../UX/UX';\r\nimport AppMediator from './AppMediator';\r\n\r\nclass UILoader {\r\n\r\n linkToMediator(node, data) {\r\n const watchedEvents = data['_watchedEvents'];\r\n if (watchedEvents !== undefined) {\r\n for (let watchedEvent of watchedEvents) {\r\n node.on(`${watchedEvent}.AppMediator`, (e) => {\r\n AppMediator.triggerEvent(node, watchedEvent, e);\r\n })\r\n }\r\n }\r\n }\r\n\r\n /**\r\n * @param object\r\n * @returns {Node}\r\n */\r\n load(object) {\r\n if (object && typeof object === \"object\") {\r\n const type = object['_'];\r\n\r\n if (!type) {\r\n throw new Error(\"Type is not defined in '_' property!\");\r\n }\r\n\r\n let cls = UX[type];\r\n\r\n if (!cls) {\r\n cls = window[type];\r\n }\r\n\r\n if (!cls) {\r\n throw new Error(`Type '${type}' is not defined`);\r\n }\r\n\r\n const node = new cls();\r\n\r\n if (node instanceof Node) {\r\n if (node instanceof Container && jQuery.isArray(object['_content'])) {\r\n const children = object['_content'];\r\n\r\n for (let i = 0; i < children.length; i++) {\r\n const child = this.load(children[i]);\r\n node.add(child);\r\n }\r\n }\r\n\r\n node.loadSchema(object);\r\n this.linkToMediator(node, object);\r\n return node;\r\n } else {\r\n throw new Error(`Type '${type}' is not UI component class`);\r\n }\r\n }\r\n }\r\n\r\n /**\r\n * @param {string} jsonString\r\n * @returns {Node}\r\n */\r\n loadFromJson(jsonString) {\r\n return this.load(JSON.parse(jsonString));\r\n }\r\n\r\n /**\r\n *\r\n * @param {string} urlToJson\r\n * @param {function} callback\r\n */\r\n loadFromUrl(urlToJson, callback) {\r\n jQuery.getJSON(urlToJson, (data) => {\r\n callback(this.load(data));\r\n });\r\n }\r\n}\r\n\r\nexport default UILoader;\r\n","\r\nimport AppDispatcher from \"./AppDispatcher\";\r\n\r\n/**\r\n * WebSocket App Dispatcher\r\n */\r\nclass WebSocketAppDispatcher extends AppDispatcher\r\n{\r\n constructor(wsUrl) {\r\n super();\r\n\r\n const loc = window.location;\r\n\r\n this.wsUrl = wsUrl;\r\n let newUri = '';\r\n\r\n if (loc.protocol === \"https:\") {\r\n newUri = \"wss:\";\r\n } else {\r\n newUri = \"ws:\";\r\n }\r\n\r\n newUri += \"//\" + loc.host;\r\n newUri += wsUrl;\r\n\r\n this.ws = new WebSocket(newUri);\r\n }\r\n\r\n onOpen(callback) {\r\n this.ws.onopen = () => callback();\r\n }\r\n\r\n onMessage(callback) {\r\n this.ws.onmessage = (e) => callback(e.data);\r\n }\r\n\r\n onError(callback) {\r\n this.ws.onerror = () => callback();\r\n }\r\n\r\n onClose(callback) {\r\n this.ws.onclose = () => callback();\r\n }\r\n\r\n send(data) {\r\n return this.ws.send(data);\r\n }\r\n}\r\n\r\nexport default WebSocketAppDispatcher;","import Container from './Container';\r\n\r\nclass AnchorPane extends Container {\r\n createDom() {\r\n const dom = super.createDom();\r\n dom.addClass('ux-anchor-pane');\r\n return dom;\r\n }\r\n\r\n createSlotDom(object) {\r\n object.dom.css('position', 'absolute');\r\n return object.dom;\r\n }\r\n\r\n childToBack(object) {\r\n const dom = object.dom;\r\n dom.detach();\r\n\r\n this.dom.prepend(dom);\r\n }\r\n\r\n childToFront(object) {\r\n const dom = object.dom;\r\n dom.detach();\r\n this.dom.append(dom);\r\n }\r\n}\r\n\r\nexport default AnchorPane;\r\n","import Labeled from './Labeled';\r\n\r\nconst kinds = [\r\n 'success', 'primary', 'secondary', 'info', 'warning', 'danger', 'link', 'dark', 'light'\r\n];\r\n\r\nclass Button extends Labeled {\r\n\r\n constructor(text, graphic) {\r\n super(text, graphic);\r\n\r\n this.on('click.Button', function () {\r\n this.trigger('action');\r\n });\r\n }\r\n\r\n get outline() {\r\n return !!this.dom.data('--outline');\r\n }\r\n\r\n set outline(value) {\r\n const kind = this.kind;\r\n this.dom.data('--outline', !!value);\r\n this.kind = kind;\r\n }\r\n\r\n get kind() {\r\n const dom = this.dom;\r\n\r\n for (let kind of kinds) {\r\n if (dom.hasClass(`btn-${kind}`) || dom.hasClass(`btn-outline-${kind}`)) {\r\n return kind;\r\n }\r\n }\r\n\r\n return 'default';\r\n }\r\n\r\n set kind(value) {\r\n this.dom.removeClass(`btn-${this.kind}`);\r\n this.dom.removeClass(`btn-outline-${this.kind}`);\r\n\r\n if (this.outline) {\r\n this.dom.addClass(`btn-outline-${value}`);\r\n } else {\r\n this.dom.addClass(`btn-${value}`);\r\n }\r\n }\r\n\r\n createDom() {\r\n const dom = jQuery('');\r\n dom.addClass('ux-labeled');\r\n dom.addClass('ux-button');\r\n\r\n dom.addClass('btn');\r\n dom.addClass('btn-default');\r\n\r\n return dom;\r\n }\r\n}\r\n\r\nexport default Button;\r\n","import Labeled from './Labeled';\r\nimport AppMediator from '../NX/AppMediator';\r\n\r\nclass Checkbox extends Labeled {\r\n constructor(text, graphic) {\r\n super(text, graphic);\r\n\r\n this.dom.on('click.Checkbox', (e) => {\r\n if (e.target.tagName === 'INPUT') {\r\n AppMediator.sendUserInput(this, {selected: this.selected}, () => {\r\n this.trigger('action', e);\r\n });\r\n }\r\n });\r\n }\r\n\r\n createDom() {\r\n const dom = jQuery('');\r\n dom.addClass('ux-labeled');\r\n dom.addClass('ux-checkbox');\r\n return dom;\r\n }\r\n\r\n get checked() {\r\n return this.dom.find('input[type=checkbox]').prop('checked');\r\n }\r\n\r\n set checked(value) {\r\n this.dom.find('input[type=checkbox]').prop('checked', value);\r\n }\r\n\r\n get selected() {\r\n return this.checked;\r\n }\r\n\r\n set selected(value) {\r\n this.checked = value;\r\n }\r\n\r\n get enabled() {\r\n return !this.dom.find('input[type=checkbox]').prop(\"disabled\");\r\n }\r\n\r\n set enabled(value) {\r\n this.dom.find('input[type=checkbox]').prop('disabled', !value);\r\n }\r\n}\r\n\r\nexport default Checkbox;\r\n","import SelectControl from './SelectControl';\r\n\r\nclass Combobox extends SelectControl {\r\n createDom() {\r\n var dom = super.createDom();\r\n dom.addClass('ux-combobox');\r\n return dom;\r\n }\r\n}\r\n\r\nexport default Combobox;\r\n","import Node from \"./Node\";\r\n\r\nclass Container extends Node {\r\n constructor(nodes) {\r\n super();\r\n this.add(...arguments);\r\n this.contentDom = this.dom;\r\n }\r\n\r\n get align() {\r\n return [this.verAlign, this.horAlign];\r\n }\r\n\r\n set align(value) {\r\n if (value instanceof Array && value.length >= 2) {\r\n this.horAlign = value[1];\r\n this.verAlign = value[0];\r\n }\r\n }\r\n\r\n get horAlign() {\r\n if (this.dom.hasClass('ux-m-halign-right')) {\r\n return 'right';\r\n } else if (this.hasClass('ux-m-halign-center')) {\r\n return 'center';\r\n }\r\n\r\n return 'left';\r\n }\r\n\r\n set horAlign(value) {\r\n this.dom.removeClass('ux-m-halign-left');\r\n this.dom.removeClass('ux-m-halign-right');\r\n this.dom.removeClass('ux-m-halign-center');\r\n\r\n this.dom.addClass('ux-m-halign-' + value);\r\n }\r\n\r\n get verAlign() {\r\n if (this.dom.hasClass('ux-m-valign-bottom')) {\r\n return 'bottom';\r\n } else if (this.hasClass('ux-m-valign-center')) {\r\n return 'center';\r\n }\r\n\r\n return 'top';\r\n }\r\n\r\n set verAlign(value) {\r\n this.dom.removeClass('ux-m-valign-top');\r\n this.dom.removeClass('ux-m-valign-bottom');\r\n this.dom.removeClass('ux-m-valign-center');\r\n\r\n this.dom.addClass('ux-m-valign-' + value);\r\n }\r\n\r\n createSlotDom(object) {\r\n if (!(object instanceof Node)) {\r\n throw new TypeError('createSlotDom(): 1 argument must be instance of Node')\r\n }\r\n\r\n const dom = jQuery('
').append(object.dom);\r\n dom.addClass('ux-slot');\r\n\r\n dom.data('--wrapper', object);\r\n object.dom.data('--wrapper-dom', dom);\r\n\r\n const width = object.data('--width-percent');\r\n const height = object.data('--height-percent');\r\n const visible = object.css('display') !== 'none';\r\n\r\n if (typeof width === 'string') {\r\n dom.width(width);\r\n object.dom.width('100%');\r\n }\r\n\r\n if (typeof height === 'string') {\r\n dom.height(height);\r\n object.dom.height('100%');\r\n }\r\n\r\n if (!visible) {\r\n dom.hide();\r\n }\r\n\r\n return dom;\r\n }\r\n\r\n createDom() {\r\n const dom = jQuery('
');\r\n dom.addClass('ux-container');\r\n\r\n return dom;\r\n }\r\n\r\n child(id) {\r\n const dom = this.contentDom.find(`#${id}`);\r\n\r\n if (dom && dom.length) {\r\n return Node.getFromDom(dom);\r\n }\r\n\r\n return null;\r\n }\r\n\r\n count() {\r\n return this.contentDom.children().length;\r\n }\r\n\r\n children() {\r\n const children = [];\r\n\r\n this.contentDom.children().each(function () {\r\n children.push(Node.getFromDom(jQuery(this)));\r\n });\r\n\r\n return children;\r\n }\r\n\r\n innerNodes() {\r\n return this.children();\r\n }\r\n\r\n removeByIndex(index) {\r\n const child = this.children()[index];\r\n \r\n if (child) {\r\n child.free();\r\n }\r\n }\r\n\r\n add(nodes) {\r\n for (let i = 0; i < arguments.length; i++) {\r\n this.contentDom.append(this.createSlotDom(arguments[i]));\r\n }\r\n\r\n return this;\r\n }\r\n\r\n insert(index, nodes) {\r\n index = index | 0;\r\n\r\n const children = this.contentDom.children();\r\n\r\n if (!children.length || index >= children.length) {\r\n return this.add(...Array.prototype.slice.call(arguments, 1));\r\n }\r\n\r\n nodes = Array.prototype.slice.call(arguments, 1);\r\n\r\n let i = 0;\r\n const self = this;\r\n\r\n this.dom.children().each(function () {\r\n if (index === i) {\r\n for (let k = 0; k < nodes.length; k++) {\r\n const slot = self.createSlotDom(nodes[k]);\r\n slot.insertBefore(this);\r\n }\r\n\r\n return false;\r\n }\r\n\r\n i++;\r\n });\r\n\r\n return this;\r\n }\r\n\r\n clear() {\r\n this.contentDom.empty();\r\n }\r\n\r\n show() {\r\n this.dom.css('display', '');\r\n return this;\r\n }\r\n}\r\n\r\nexport default Container;\r\n","import Container from './Container';\r\n\r\nclass HBox extends Container {\r\n\r\n constructor(nodes) {\r\n super(...arguments);\r\n\r\n this.spacing = 0;\r\n this.align = ['top', 'left'];\r\n }\r\n\r\n get fitHeight() {\r\n return this.dom.hasClass('ux-m-fit-height');\r\n }\r\n\r\n set fitHeight(value) {\r\n if (value) {\r\n this.dom.addClass('ux-m-fit-height');\r\n } else {\r\n this.dom.removeClass('ux-m-fit-height');\r\n }\r\n }\r\n\r\n get spacing() {\r\n return this._spacing;\r\n }\r\n\r\n set spacing(value) {\r\n this._spacing = value;\r\n const slots = this.dom.find('> div');\r\n\r\n slots.css('margin-right', value + 'px');\r\n slots.last().css('margin-right', 0);\r\n }\r\n\r\n createDom() {\r\n const dom = super.createDom();\r\n dom.addClass('ux-h-box');\r\n\r\n return dom;\r\n }\r\n\r\n createSlotDom(object) {\r\n const dom = super.createSlotDom(object);\r\n return dom;\r\n }\r\n\r\n add(nodes) {\r\n super.add(...arguments);\r\n this.spacing = this.spacing;\r\n }\r\n\r\n insert(index, nodes) {\r\n super.insert(...arguments);\r\n this.spacing = this.spacing;\r\n }\r\n}\r\n\r\nexport default HBox;\r\n","import Labeled from \"./Labeled\";\r\n\r\n/**\r\n *\r\n */\r\nclass Hyperlink extends Labeled {\r\n get href() {\r\n return this.dom.attr('href');\r\n }\r\n\r\n set href(value) {\r\n this.dom.attr('href', value);\r\n }\r\n\r\n get target() {\r\n return this.dom.attr('target') || '_self';\r\n }\r\n\r\n set target(value) {\r\n this.dom.attr('target', value);\r\n }\r\n\r\n createDom() {\r\n const dom = jQuery('');\r\n dom.on('click.Hyperlink', (e) => {\r\n if (this.href === '#') {\r\n e.preventDefault();\r\n return false;\r\n }\r\n\r\n return true;\r\n });\r\n\r\n return dom;\r\n }\r\n}\r\n\r\nexport default Hyperlink;","import Node from './Node';\r\nimport Utils from \"./util/Utils\";\r\n\r\nclass Icon extends Node {\r\n get kind() {\r\n this.dom.text();\r\n }\r\n\r\n set kind(value) {\r\n this.dom.text(value);\r\n }\r\n\r\n get color() {\r\n return this.dom.css('color') || 'black';\r\n }\r\n\r\n set color(value) {\r\n this.dom.css('color', value);\r\n }\r\n\r\n get imageSize() {\r\n return Utils.toPt(this.dom.css('font-size'));\r\n }\r\n\r\n set imageSize(value) {\r\n this.dom.css('font-size', value);\r\n }\r\n\r\n createDom() {\r\n return jQuery('');\r\n }\r\n}\r\n\r\nexport default Icon;","import Node from './Node';\r\n\r\nclass ImageView extends Node {\r\n\r\n constructor(image) {\r\n super();\r\n\r\n this.proportional = true;\r\n this.displayType = 'origin';\r\n\r\n if (image !== undefined) {\r\n this.source = image;\r\n }\r\n }\r\n\r\n get source() {\r\n let source = this.dom.css('background-image');\r\n\r\n if (source) {\r\n source = /^url\\((['\"]?)(.*)\\1\\)$/.exec(source);\r\n return source ? source[2] : null;\r\n }\r\n\r\n return null;\r\n }\r\n\r\n set source(value) {\r\n this.dom.css({'background-image': `url('${value}')`});\r\n\r\n if (this.displayType === 'origin') {\r\n this.dom.find('img').attr('src', value);\r\n }\r\n }\r\n\r\n get centered() {\r\n return this.dom.css('background-position') === '50% 50%';\r\n }\r\n\r\n set centered(value) {\r\n this.dom.css('background-position', value ? '50% 50%' : '0 0');\r\n }\r\n\r\n get displayType() {\r\n switch (this.dom.css('background-size')) {\r\n case '100% 100%': return 'filled';\r\n case 'cover': return 'cropped';\r\n case 'resized': return 'resized';\r\n\r\n case 'auto':\r\n case 'auto auto': return 'origin';\r\n\r\n default:\r\n return '';\r\n }\r\n }\r\n\r\n set displayType(type) {\r\n this.dom.find('img').remove();\r\n\r\n switch (type.toString().toLowerCase()) {\r\n case 'filled':\r\n this.dom.css('background-size', `100% 100%`);\r\n break;\r\n case 'cropped':\r\n this.dom.css('background-size', 'cover');\r\n break;\r\n case 'resized':\r\n this.dom.css('background-size', 'contain');\r\n break;\r\n case 'origin':\r\n const source = this.source;\r\n this.dom.css('background-size', 'auto auto');\r\n this.dom.append(jQuery(''));\r\n this.source = source;\r\n break;\r\n }\r\n }\r\n\r\n createDom() {\r\n const dom = jQuery('
');\r\n dom.addClass('ux-image-view');\r\n\r\n dom.css({\r\n display: 'inline-block',\r\n backgroundRepeat: 'no-repeat',\r\n backgroundSize: '100% 100%',\r\n backgroundPosition: '0 0'\r\n });\r\n return dom;\r\n }\r\n}\r\n\r\nexport default ImageView;\r\n","import Labeled from './Labeled';\r\n\r\n\r\nclass Label extends Labeled {\r\n\r\n createDom() {\r\n const dom = jQuery('');\r\n return dom;\r\n }\r\n}\r\n\r\nexport default Label;\r\n","import Node from './Node';\r\nimport Font from './paint/Font';\r\nimport ImageView from './ImageView';\r\nimport Utils from './util/Utils';\r\n\r\nclass Labeled extends Node {\r\n constructor(text, graphic) {\r\n super();\r\n this.textPreFormatted = false;\r\n this.textType = 'text';\r\n this.contentDisplay = 'left';\r\n this.graphicTextGap = 4;\r\n this.graphic = graphic;\r\n this.text = text;\r\n this.align = ['center', 'center'];\r\n }\r\n\r\n get font() {\r\n return Font.getFromDom(this.dom);\r\n }\r\n\r\n set font(value) {\r\n Font.applyToDom(this.dom, value);\r\n }\r\n\r\n get align() {\r\n return [this.verAlign, this.horAlign];\r\n }\r\n\r\n set align(value) {\r\n if (value instanceof Array && value.length >= 2) {\r\n this.horAlign = value[1];\r\n this.verAlign = value[0];\r\n }\r\n }\r\n\r\n get horAlign() {\r\n if (this.dom.hasClass('ux-m-halign-right')) {\r\n return 'right';\r\n } else if (this.hasClass('ux-m-halign-center')) {\r\n return 'center';\r\n }\r\n\r\n return 'left';\r\n }\r\n\r\n set horAlign(value) {\r\n this.dom.removeClass('ux-m-halign-left');\r\n this.dom.removeClass('ux-m-halign-right');\r\n this.dom.removeClass('ux-m-halign-center');\r\n\r\n this.dom.addClass('ux-m-halign-' + value);\r\n }\r\n\r\n get verAlign() {\r\n if (this.dom.hasClass('ux-m-valign-bottom')) {\r\n return 'bottom';\r\n } else if (this.hasClass('ux-m-valign-center')) {\r\n return 'center';\r\n }\r\n\r\n return 'top';\r\n }\r\n\r\n set verAlign(value) {\r\n this.dom.removeClass('ux-m-valign-top');\r\n this.dom.removeClass('ux-m-valign-bottom');\r\n this.dom.removeClass('ux-m-valign-center');\r\n\r\n this.dom.addClass('ux-m-valign-' + value);\r\n }\r\n\r\n get text() {\r\n let dom = this.dom.find('span.ux-labeled-text');\r\n\r\n if (this.textPreFormatted) {\r\n dom = dom.find('> pre');\r\n }\r\n\r\n switch (this.textType) {\r\n case 'text':\r\n return dom.text();\r\n case 'html':\r\n return dom.html();\r\n }\r\n\r\n return '';\r\n }\r\n\r\n set text(value) {\r\n let dom = this.dom.find('span.ux-labeled-text');\r\n\r\n if (this.textPreFormatted) {\r\n dom = dom.find('> pre');\r\n }\r\n\r\n switch (this.textType) {\r\n case 'text':\r\n dom.text(value);\r\n break;\r\n\r\n case 'html':\r\n dom.html(value);\r\n break;\r\n }\r\n }\r\n\r\n get textPreFormatted() {\r\n return this.dom.find('span.ux-labeled-text').has('> pre').length > 0;\r\n }\r\n\r\n set textPreFormatted(value) {\r\n if (this.textPreFormatted === value) {\r\n return;\r\n }\r\n\r\n const dom = this.dom.find('span.ux-labeled-text');\r\n if (value) {\r\n dom.html('
' + dom.html() + '
');\r\n } else {\r\n dom.html(dom.find('> pre').html());\r\n }\r\n }\r\n\r\n get textColor() {\r\n return this.dom.css('color');\r\n }\r\n\r\n set textColor(value) {\r\n this.dom.css('color', value ? value : '');\r\n }\r\n\r\n get textType() {\r\n return this._textType;\r\n }\r\n\r\n set textType(value) {\r\n const text = this.text;\r\n const graphic = this.graphic;\r\n\r\n if (value) {\r\n this._textType = value.toString().toLowerCase();\r\n } else {\r\n this._textType = 'text';\r\n }\r\n\r\n this.text = text;\r\n this.graphic = graphic;\r\n }\r\n\r\n get contentDisplay() {\r\n if (this.dom.first().hasClass('ux-graphic')) {\r\n if (this.dom.hasClass('ux-labeled-vertical')) {\r\n return 'top';\r\n } else {\r\n return 'left';\r\n }\r\n } else if (this.dom.last().hasClass('ux-graphic')) {\r\n if (this.dom.hasClass('ux-labeled-vertical')) {\r\n return 'bottom';\r\n } else {\r\n return 'right';\r\n }\r\n } else {\r\n return this._contentDisplay;\r\n }\r\n }\r\n\r\n set contentDisplay(value) {\r\n const graphic = this.graphic;\r\n const graphicGap = this.graphicTextGap;\r\n this._contentDisplay = value;\r\n\r\n switch (value) {\r\n case 'top':\r\n case 'bottom':\r\n this.dom.addClass('ux-labeled-vertical');\r\n break;\r\n\r\n case 'right':\r\n this.dom.removeClass('ux-labeled-vertical');\r\n break;\r\n\r\n case 'left':\r\n default:\r\n this.dom.removeClass('ux-labeled-vertical');\r\n this._contentDisplay = 'left';\r\n break;\r\n }\r\n\r\n this.graphic = graphic;\r\n this.graphicTextGap = graphicGap;\r\n }\r\n\r\n get graphicTextGap() {\r\n const grDom = this.dom.find('.ux-graphic');\r\n\r\n if (grDom.length) {\r\n let prop = 'margin-right';\r\n\r\n switch (this.contentDisplay) {\r\n case 'bottom':\r\n prop = 'margin-top';\r\n break;\r\n case 'right':\r\n prop = 'margin-left';\r\n break;\r\n case 'top':\r\n prop = 'margin-bottom';\r\n break;\r\n }\r\n\r\n return Utils.toPt(grDom.css(prop));\r\n } else {\r\n return this._graphicGap;\r\n }\r\n }\r\n\r\n set graphicTextGap(value) {\r\n this._graphicGap = value;\r\n\r\n const grDom = this.dom.find('.ux-graphic');\r\n\r\n if (grDom.length) {\r\n grDom.css('margin', 0);\r\n\r\n let prop = 'margin-right';\r\n\r\n switch (this.contentDisplay) {\r\n case 'bottom':\r\n prop = 'margin-top';\r\n break;\r\n case 'right':\r\n prop = 'margin-left';\r\n break;\r\n case 'top':\r\n prop = 'margin-bottom';\r\n break;\r\n }\r\n\r\n grDom.css(prop, value + 'px');\r\n }\r\n }\r\n\r\n get graphic() {\r\n return Node.getFromDom(this.dom.find('.ux-graphic > *').first());\r\n }\r\n\r\n set graphic(node) {\r\n const graphicGap = this.graphicTextGap;\r\n this.dom.find('.ux-graphic').remove();\r\n\r\n if (node) {\r\n if (typeof node === 'string' || node instanceof String) {\r\n node = new ImageView(node);\r\n }\r\n\r\n const dom = jQuery('').append(node.dom);\r\n\r\n switch (this.contentDisplay) {\r\n case 'top':\r\n case 'left':\r\n this.dom.prepend(dom);\r\n break;\r\n case 'bottom':\r\n case 'right':\r\n this.dom.append(dom);\r\n break;\r\n }\r\n\r\n this.graphicTextGap = graphicGap;\r\n }\r\n }\r\n\r\n innerNodes() {\r\n const result = [];\r\n\r\n if (this.graphic) {\r\n result.push(this.graphic);\r\n }\r\n\r\n return result;\r\n }\r\n}\r\n\r\nexport default Labeled;\r\n","import Container from './Container';\r\nimport Node from './Node';\r\nimport AppMediator from '../NX/AppMediator';\r\nimport Font from \"./paint/Font\";\r\n\r\nclass ListView extends Container {\r\n constructor() {\r\n super();\r\n\r\n this.spacing = 0;\r\n this.align = ['center', 'left'];\r\n\r\n this.dom.on('change.ListView', () => {\r\n const data = {\r\n selected: this.selected,\r\n selectedIndex: this.selectedIndex\r\n };\r\n\r\n AppMediator.sendUserInput(this, data, () => {\r\n this.trigger('action');\r\n });\r\n })\r\n }\r\n\r\n get font() {\r\n return Font.getFromDom(this.dom);\r\n }\r\n\r\n set font(value) {\r\n Font.applyToDom(this.dom, value);\r\n }\r\n\r\n get selectedIndex() {\r\n let index = -1;\r\n let result = -1;\r\n\r\n this.dom.find('> .ux-slot').each(function () {\r\n index++;\r\n\r\n if (jQuery(this).hasClass('active')) {\r\n result = index;\r\n return true;\r\n }\r\n });\r\n\r\n return result;\r\n }\r\n\r\n set selectedIndex(value) {\r\n const children = this.children();\r\n\r\n if (value >= 0 && value < children.length) {\r\n this.selected = children[value];\r\n } else {\r\n this.selected = null;\r\n }\r\n }\r\n\r\n get selected() {\r\n const dom = this.dom.find('> .ux-slot.active').first();\r\n\r\n if (dom) {\r\n return Node.getFromDom(dom);\r\n }\r\n\r\n return null;\r\n }\r\n\r\n set selected(object) {\r\n this.dom.find('> .ux-slot.active').removeClass('active');\r\n\r\n if (object instanceof Node) {\r\n object.dom.closest('.ux-slot').addClass('active');\r\n }\r\n }\r\n\r\n createDom() {\r\n const dom = super.createDom();\r\n dom.addClass('list-group');\r\n dom.addClass('ux-list-view');\r\n return dom;\r\n }\r\n\r\n createSlotDom(object) {\r\n if (!(object instanceof Node)) {\r\n throw new TypeError('createSlotDom(): 1 argument must be instance of Node')\r\n }\r\n\r\n const dom = jQuery('').append(object.dom);\r\n\r\n dom.on('click.ListView', (e) => {\r\n dom.closest('.ux-list-view').find('> .ux-slot').removeClass('active');\r\n dom.addClass('active');\r\n\r\n this.trigger('change');\r\n e.preventDefault();\r\n return false;\r\n });\r\n\r\n dom.data('--wrapper', object);\r\n object.dom.data('--wrapper-dom', dom);\r\n return dom;\r\n }\r\n}\r\n\r\nexport default ListView;\r\n","import SelectControl from './SelectControl';\r\n\r\nclass Listbox extends SelectControl {\r\n\r\n createDom() {\r\n var dom = super.createDom();\r\n dom.prop('multiple', true);\r\n dom.addClass('ux-listbox');\r\n return dom;\r\n }\r\n}\r\n\r\nexport default Listbox;\r\n","import Utils from './util/Utils';\r\nimport UILoader from \"../NX/UILoader\";\r\n\r\nconst KEY_CODES = {\r\n Enter: 13,\r\n Backspace: 8,\r\n Tab: 9,\r\n Cancel: 0x03,\r\n Clear: 0x0C,\r\n Shift: 0x10,\r\n Ctrl: 0x11,\r\n Alt: 0x12,\r\n Pause: 0x13,\r\n CapsLock: 0x14,\r\n Esc: 0x1B,\r\n Escape: 0x1B,\r\n Space: 0x20,\r\n PageUp: 0x21,\r\n PageDown: 0x22,\r\n End: 0x23,\r\n Home: 0x24,\r\n Left: 0x25,\r\n Up: 0x26,\r\n Right: 0x27,\r\n Down: 0x28,\r\n Comma:0x2C,\r\n Delete: 0x7F,\r\n F1: 0x70, F2: 0x71, F3: 0x72, F4: 0x73, F5: 0x74, F6: 0x75, F7: 0x76, F8: 0x77, F9: 0x78, F10: 0x79, F11: 0x7A, F12: 0x7B,\r\n PrintScreen: 0x9A,\r\n Insert: 0x9B\r\n};\r\n\r\n/**\r\n * Base HTML Node class.\r\n **/\r\nclass Node {\r\n constructor(dom) {\r\n this.__observers = [];\r\n\r\n if (dom === undefined) {\r\n this.dom = this.createDom();\r\n\r\n if (!(this.dom instanceof jQuery)) {\r\n throw new Error(\"Method createDom() must return instance of an jQuery object\");\r\n }\r\n } else {\r\n if (dom instanceof jQuery) {\r\n this.dom = dom;\r\n } else {\r\n throw new Error(\"Non-jquery object cannot be passed into Node.construct()\");\r\n }\r\n }\r\n\r\n this.dom.data('--wrapper', this);\r\n\r\n this.dom.on('dblclick.Node', (e) => {\r\n this.trigger('click-2x', e);\r\n });\r\n\r\n this.dom.on('click.Node', (e) => {\r\n switch (e.which) {\r\n case 1:\r\n this.trigger('click-left', e); break;\r\n case 2:\r\n this.trigger('click-middle', e); break;\r\n case 3:\r\n this.trigger('click-right', e); break;\r\n }\r\n });\r\n\r\n const keyEventBuilder = (event) => {\r\n return (e) => {\r\n let found = false;\r\n\r\n for (let key in KEY_CODES) {\r\n const value = KEY_CODES[key];\r\n\r\n if (value === e.keyCode) {\r\n this.trigger(event + '-' + key.toLowerCase(), e);\r\n\r\n if (event.shiftKey) this.trigger(`${event}-shift+${key.toLowerCase()}`, e);\r\n if (event.ctrlKey) this.trigger(`${event}-ctrl+${key.toLowerCase()}`, e);\r\n if (event.altKey) this.trigger(`${event}-alt+${key.toLowerCase()}`, e);\r\n\r\n found = true;\r\n }\r\n }\r\n\r\n switch (event.keyCode) {\r\n case KEY_CODES.Up:\r\n case KEY_CODES.Right:\r\n case KEY_CODES.Down:\r\n case KEY_CODES.Left:\r\n this.trigger(event + '-anydirection', e);\r\n\r\n if (event.shiftKey) this.trigger(`${event}-shift+anydirection`, e);\r\n if (event.ctrlKey) this.trigger(`${event}-ctrl+anydirection`, e);\r\n if (event.altKey) this.trigger(`${event}-alt+anydirection`, e);\r\n\r\n break;\r\n }\r\n\r\n if (event.hasOwnProperty('char') && !found) {\r\n const char = event.char.toString().toLowerCase();\r\n this.trigger(event + '-' + char, e);\r\n\r\n if (event.shiftKey) this.trigger(`${event}-shift+${char}`, e);\r\n if (event.ctrlKey) this.trigger(`${event}-ctrl+${char}`, e);\r\n if (event.altKey) this.trigger(`${event}-alt+${char}`, e);\r\n\r\n if ('0123456789'.indexOf(char) > -1) {\r\n this.trigger(event + '-anydigit', e);\r\n\r\n if (event.shiftKey) this.trigger(`${event}-shift+anydigit`, e);\r\n if (event.ctrlKey) this.trigger(`${event}-ctrl+anydigit`, e);\r\n if (event.altKey) this.trigger(`${event}-alt+anydigit`, e);\r\n }\r\n\r\n if ('qwertyuiopasdfghjklzxcvbnm'.indexOf(char) > -1) {\r\n this.trigger(event + '-anyletter', e);\r\n\r\n if (event.shiftKey) this.trigger(`${event}-shift+anyletter`, e);\r\n if (event.ctrlKey) this.trigger(`${event}-ctrl+anyletter`, e);\r\n if (event.altKey) this.trigger(`${event}-alt+anyletter`, e);\r\n }\r\n }\r\n };\r\n };\r\n\r\n this.dom.on('keydown.Node', keyEventBuilder('keydown'));\r\n this.dom.on('keyup.Node', keyEventBuilder('keyup'));\r\n }\r\n\r\n /**\r\n * @param {function} handler\r\n */\r\n __forEachObservers(handler) {\r\n for (let observer of this.__observers) {\r\n handler(observer);\r\n }\r\n }\r\n\r\n __triggerPropertyChange(name, newValue) {\r\n this.__forEachObservers(observer => {\r\n const oldValue = this[name];\r\n observer.triggerPropertyChange(name, oldValue, newValue)\r\n });\r\n }\r\n\r\n /**\r\n * @returns {string}\r\n */\r\n get uuid() {\r\n return this.dom.attr('uuid')\r\n }\r\n\r\n /**\r\n * @param {string} value\r\n */\r\n set uuid(value) {\r\n this.dom.removeClass(this.uuid);\r\n this.dom.attr('uuid', value);\r\n this.dom.addClass(value);\r\n }\r\n\r\n get id() {\r\n return this.dom.attr('id')\r\n }\r\n\r\n set id(value) {\r\n this.dom.attr('id', value);\r\n }\r\n\r\n /**\r\n * @returns {Array}\r\n */\r\n get classes() {\r\n return this.dom.data('custom-classes') || [];\r\n }\r\n\r\n /**\r\n * @param {Array} value\r\n */\r\n set classes(value) {\r\n const oldClasses = this.classes;\r\n let classes = [];\r\n\r\n if (value instanceof Array) {\r\n classes = value;\r\n } else {\r\n classes = value.toString().split(' ');\r\n }\r\n\r\n this.dom.data('custom-classes', classes);\r\n\r\n if (oldClasses.length > 0) {\r\n this.dom.removeClass(oldClasses.join(' '));\r\n }\r\n\r\n this.dom.addClass(classes.join(' '));\r\n }\r\n\r\n get style() {\r\n return this.dom.attr('style');\r\n }\r\n\r\n set style(value) {\r\n this.dom.attr('style', value);\r\n }\r\n\r\n get visible() {\r\n let dom = this.dom;\r\n\r\n if (this.dom.data('--wrapper-dom')) {\r\n dom = this.dom.data('--wrapper-dom');\r\n }\r\n\r\n return dom.is(':visible');\r\n }\r\n\r\n set visible(value) {\r\n if (value) {\r\n this.show();\r\n } else {\r\n this.hide();\r\n }\r\n }\r\n\r\n get opacity() {\r\n return this.dom.css('opacity');\r\n }\r\n\r\n set opacity(value) {\r\n this.dom.css('opacity', value);\r\n }\r\n\r\n get enabled() {\r\n return !this.dom.prop(\"disabled\");\r\n }\r\n\r\n set enabled(value) {\r\n this.dom.prop('disabled', !value);\r\n }\r\n\r\n get selectionEnabled() {\r\n return this.dom.css('user-select') !== 'none';\r\n }\r\n\r\n set selectionEnabled(value) {\r\n this.dom.css('user-select', value ? '' : 'none');\r\n }\r\n\r\n get focused() {\r\n return this.dom.is(':focus');\r\n }\r\n\r\n get x() {\r\n return this.dom.position().left;\r\n }\r\n\r\n set x(value) {\r\n this.dom.css({left: value});\r\n }\r\n\r\n get y() {\r\n return this.dom.position().top;\r\n }\r\n\r\n set y(value) {\r\n this.dom.css({top: value});\r\n }\r\n\r\n get position() {\r\n return [this.x, this.y];\r\n }\r\n\r\n set position(value) {\r\n if (value instanceof Array && value.length >= 2) {\r\n this.x = value[0];\r\n this.y = value[1];\r\n }\r\n }\r\n\r\n get width() {\r\n if (this.data('--width-percent')) {\r\n return this.data('--width-percent');\r\n }\r\n\r\n return this.dom.width()\r\n }\r\n\r\n set width(value) {\r\n this.dom.width(value);\r\n\r\n if (typeof value === 'string' && value.indexOf('%') > -1) {\r\n this.data('--width-percent', value);\r\n\r\n const wrapperDom = this.dom.data('--wrapper-dom');\r\n if (wrapperDom) {\r\n this.dom.width('100%');\r\n }\r\n } else {\r\n this.data('--width-percent', null);\r\n }\r\n }\r\n\r\n get height() {\r\n if (this.data('--height-percent')) {\r\n return this.data('--height-percent');\r\n }\r\n\r\n return this.dom.height()\r\n }\r\n\r\n set height(value) {\r\n this.dom.height(value);\r\n\r\n if (typeof value === 'string' && value.indexOf('%') > -1) {\r\n this.data('--height-percent', value);\r\n\r\n const wrapperDom = this.dom.data('--wrapper-dom');\r\n if (wrapperDom) {\r\n this.dom.height('100%');\r\n }\r\n } else {\r\n this.data('--height-percent', null);\r\n }\r\n }\r\n\r\n get size() {\r\n return [this.width, this.height]\r\n }\r\n\r\n set size(value) {\r\n if (value instanceof Array && value.length >= 2) {\r\n this.width = value[0];\r\n this.height = value[1];\r\n }\r\n }\r\n\r\n get tooltip() {\r\n return this.dom.data('tooltip');\r\n }\r\n\r\n __setTooltip(tooltip) {\r\n this.dom.data('--tooltip', tooltip);\r\n\r\n /*if (this.dom.data('bs.tooltip')) {\r\n this.dom.tooltip('dispose');\r\n }*/\r\n\r\n if (tooltip) {\r\n const options = jQuery.extend({},\r\n { title: tooltip instanceof Node ? tooltip.dom : tooltip },\r\n this.tooltipOptions\r\n );\r\n\r\n this.dom.tooltip(options);\r\n }\r\n }\r\n\r\n set tooltip(tooltip) {\r\n if (this.tooltip === tooltip) return;\r\n\r\n this.__setTooltip(tooltip);\r\n }\r\n\r\n get tooltipOptions() {\r\n return this.dom.data('--tooltipOptions') || {};\r\n }\r\n\r\n set tooltipOptions(options) {\r\n this.dom.data('--tooltipOptions', options || {});\r\n this.__setTooltip(this.tooltip);\r\n }\r\n\r\n get padding() {\r\n return [\r\n Utils.toPt(this.dom.css('padding-top')),\r\n Utils.toPt(this.dom.css('padding-right')),\r\n Utils.toPt(this.dom.css('padding-bottom')),\r\n Utils.toPt(this.dom.css('padding-left'))\r\n ];\r\n }\r\n\r\n set padding(value) {\r\n if (value instanceof Array) {\r\n if (value.length >= 4) {\r\n this.dom.css({\r\n 'padding-top': value[0], 'padding-right': value[1],\r\n 'padding-bottom': value[2], 'padding-left': value[3]\r\n });\r\n } else if (value.length >= 2) {\r\n this.dom.css({\r\n 'padding-top': value[0], 'padding-right': value[1],\r\n 'padding-bottom': value[0], 'padding-left': value[1]\r\n });\r\n } else if (value.length >= 1) {\r\n this.dom.css('padding', value[0]);\r\n } else {\r\n this.dom.css('padding', 0);\r\n }\r\n } else {\r\n this.dom.css('padding', value);\r\n }\r\n }\r\n\r\n get cursor() {\r\n return this.dom.css('cursor');\r\n }\r\n\r\n set cursor(value) {\r\n this.dom.css('cursor', value);\r\n }\r\n\r\n get parent() {\r\n let parent = null;\r\n\r\n if (this.dom.data('--wrapper-dom')) {\r\n parent = this.dom.data('--wrapper-dom').parent();\r\n } else {\r\n parent = this.dom.parent();\r\n }\r\n\r\n if (!parent) {\r\n return null;\r\n }\r\n\r\n return Node.getFromDom(parent);\r\n }\r\n\r\n get userData() {\r\n return this.dom.data('--user-data');\r\n }\r\n\r\n set userData(value) {\r\n this.dom.data('--user-data', value);\r\n }\r\n\r\n createDom() {\r\n throw new Error(\"Cannot call abstract method createDom()\");\r\n }\r\n\r\n requestFocus() {\r\n this.focus();\r\n }\r\n\r\n relocate(x, y) {\r\n this.position = [x, y];\r\n }\r\n\r\n resize(width, height) {\r\n this.size = [width, height];\r\n }\r\n\r\n focus() {\r\n this.dom.focus();\r\n }\r\n\r\n css(value) {\r\n return this.dom.css(...arguments);\r\n }\r\n\r\n data(params) {\r\n if (arguments.length === 1) {\r\n return this.dom.data(...arguments);\r\n } else {\r\n this.dom.data(...arguments);\r\n return this;\r\n }\r\n }\r\n\r\n lookup(selector) {\r\n const dom = this.dom.find(selector).first();\r\n\r\n if (dom) {\r\n return Node.getFromDom(dom);\r\n }\r\n\r\n return null;\r\n }\r\n\r\n lookupAll(selector) {\r\n const nodes = [];\r\n\r\n this.dom.find(selector).each(() => {\r\n nodes.push(Node.getFromDom(this));\r\n });\r\n\r\n return nodes;\r\n }\r\n\r\n toFront() {\r\n const parent = this.parent;\r\n\r\n if (parent) {\r\n if (parent['childToFront']) {\r\n parent.childToFront(this);\r\n }\r\n }\r\n }\r\n\r\n toBack() {\r\n const parent = this.parent;\r\n\r\n if (parent) {\r\n if (parent['childToBack']) {\r\n parent.childToBack(this);\r\n }\r\n }\r\n }\r\n\r\n free() {\r\n const wrapperDom = this.dom.data('--wrapper-dom');\r\n\r\n if (wrapperDom) {\r\n wrapperDom.remove();\r\n } else {\r\n this.dom.detach();\r\n }\r\n\r\n return this;\r\n }\r\n\r\n show() {\r\n let dom = this.dom;\r\n dom.css('display', '');\r\n\r\n if (this.dom.data('--wrapper-dom')) {\r\n dom = this.dom.data('--wrapper-dom');\r\n dom.css('display', '');\r\n }\r\n\r\n return this;\r\n }\r\n\r\n hide() {\r\n let dom = this.dom;\r\n dom.hide();\r\n\r\n if (this.dom.data('--wrapper-dom')) {\r\n dom = this.dom.data('--wrapper-dom');\r\n dom.hide();\r\n }\r\n\r\n return this;\r\n }\r\n\r\n toggle() {\r\n if (this.visible) {\r\n this.show();\r\n } else {\r\n this.hide();\r\n }\r\n\r\n return this;\r\n }\r\n\r\n /**\r\n * @param {object} properties\r\n * @param {object} options\r\n */\r\n animate(properties, options) {\r\n this.dom.animate(properties, options);\r\n }\r\n\r\n /**\r\n * Stop animation.\r\n */\r\n stopAllAnimate(clearQueue, jumpToEnd, callback) {\r\n this.dom.stop(clearQueue, jumpToEnd);\r\n\r\n if (callback) {\r\n callback();\r\n }\r\n }\r\n\r\n /**\r\n * Stop animation by queue.\r\n * @param queue\r\n * @param clearQueue\r\n * @param jumpToEnd\r\n */\r\n stopAnimate(queue, clearQueue, jumpToEnd, callback) {\r\n this.dom.stop(queue, clearQueue, jumpToEnd);\r\n\r\n if (callback) {\r\n callback();\r\n }\r\n }\r\n\r\n on(event, callback) {\r\n this.dom.on(event, (event) => {\r\n event.sender = this;\r\n callback.call(this, event);\r\n });\r\n\r\n return this;\r\n }\r\n\r\n /**\r\n * @param {string} event\r\n * @returns {Node}\r\n */\r\n off(event) {\r\n this.dom.off(event);\r\n return this;\r\n }\r\n\r\n /**\r\n * @param {string} event\r\n * @param params\r\n * @returns {*}\r\n */\r\n trigger(event, params) {\r\n return this.dom.trigger(event, params);\r\n }\r\n\r\n /**\r\n * @param {string} id\r\n * @returns {Node}\r\n */\r\n child(id) {\r\n return null;\r\n }\r\n\r\n /**\r\n * Returns inner Nodes as array.\r\n * @returns {Array}\r\n */\r\n innerNodes() {\r\n return [];\r\n }\r\n\r\n /**\r\n * @param object\r\n */\r\n loadSchema(object) {\r\n for (const prop in object) {\r\n if (object.hasOwnProperty(prop)) {\r\n if (prop[0] === '_') {\r\n continue;\r\n }\r\n\r\n let value = object[prop];\r\n\r\n if (value.hasOwnProperty('_')) {\r\n const uiLoader = new UILoader();\r\n value = uiLoader.load(value);\r\n }\r\n\r\n switch (prop) {\r\n default:\r\n this[prop] = value;\r\n break;\r\n }\r\n }\r\n }\r\n\r\n if (object.classes) {\r\n this.classes = object.classes;\r\n }\r\n }\r\n\r\n static getFromDom(jqueryObject) {\r\n if (jqueryObject === null || jqueryObject.length === 0) {\r\n return null;\r\n }\r\n\r\n if (jqueryObject instanceof jQuery) {\r\n let wrapper = jqueryObject.data('--wrapper');\r\n return wrapper ? wrapper : new Node(jqueryObject);\r\n }\r\n\r\n throw new Error(\"Node.getFromDom(): 1 argument must be an jQuery object\");\r\n }\r\n}\r\n\r\nexport default Node;\r\n","import TextInputControl from './TextInputControl';\r\n\r\nclass PasswordField extends TextInputControl {\r\n createDom() {\r\n var dom = jQuery('');\r\n return dom;\r\n }\r\n}\r\n\r\nexport default PasswordField;\r\n","import Node from './Node';\r\nimport Utils from './util/Utils';\r\n\r\nclass ProgressBar extends Node {\r\n get progress() {\r\n return Utils.toPt(this.dom.find('> .progress-bar').css('width'));\r\n }\r\n\r\n set progress(value) {\r\n this.dom.find('> .progress-bar').css('width', value + '%');\r\n }\r\n\r\n get kind() {\r\n const dom = this.dom.find('> .progress-bar');\r\n\r\n if (dom.hasClass('progress-bar-success')) {\r\n return 'success';\r\n } else if (dom.hasClass('progress-bar-info')) {\r\n return 'info';\r\n } else if (dom.hasClass('progress-bar-warning')) {\r\n return 'warning';\r\n } else if (dom.hasClass('progress-bar-danger')) {\r\n return 'danger';\r\n }\r\n\r\n return 'default';\r\n }\r\n\r\n set kind(value) {\r\n const dom = this.dom.find('> .progress-bar');\r\n \r\n dom.removeClass(`progress-bar-${this.kind}`);\r\n dom.addClass(`progress-bar-${value}`);\r\n }\r\n\r\n get animated() {\r\n const dom = this.dom.find('> .progress-bar');\r\n return dom.hasClass('active');\r\n }\r\n\r\n set animated(value) {\r\n const dom = this.dom.find('> .progress-bar');\r\n\r\n if (value) {\r\n dom.addClass('active');\r\n } else {\r\n dom.removeClass('active');\r\n }\r\n }\r\n\r\n get striped() {\r\n const dom = this.dom.find('> .progress-bar');\r\n return dom.hasClass('progress-bar-striped');\r\n }\r\n\r\n set striped(value) {\r\n const dom = this.dom.find('> .progress-bar');\r\n\r\n if (value) {\r\n dom.addClass('progress-bar-striped');\r\n } else {\r\n dom.removeClass('progress-bar-striped');\r\n }\r\n }\r\n\r\n get value() {\r\n let width = this.dom.find('> .progress-bar').css('width');\r\n\r\n if (!width) {\r\n return 0;\r\n }\r\n\r\n return parseInt(width);\r\n }\r\n\r\n set value(v) {\r\n this.dom.find('> .progress-bar').css('width', v + \"%\");\r\n }\r\n\r\n createDom() {\r\n const dom = jQuery('
');\r\n\r\n return dom;\r\n }\r\n}\r\n\r\nexport default ProgressBar;\r\n","import Node from './Node';\r\nimport AppMediator from '../NX/AppMediator';\r\n\r\nexport default class SelectControl extends Node {\r\n constructor(items) {\r\n super();\r\n\r\n if (items) {\r\n this.items = items;\r\n }\r\n\r\n this.dom.on('change.SelectControl', (e) => {\r\n AppMediator.sendUserInput(this, {selected: this.selected, selectedText: this.selectedText}, () => {\r\n this.trigger('action', e);\r\n });\r\n });\r\n }\r\n\r\n get items() {\r\n const result = {};\r\n\r\n this.dom.find('option').each(function () {\r\n result[jQuery(this).attr('value')] = jQuery(this).text();\r\n });\r\n\r\n return result;\r\n }\r\n\r\n set items(value) {\r\n this.dom.find('option').remove();\r\n\r\n for (const key in value) {\r\n if (value.hasOwnProperty(key)) {\r\n this.dom.append(jQuery(``));\r\n }\r\n }\r\n }\r\n\r\n get selected() {\r\n return this.dom.val();\r\n }\r\n\r\n set selected(value) {\r\n this.dom.val(value);\r\n }\r\n\r\n get selectedText() {\r\n return this.dom.find('option:selected').text();\r\n }\r\n\r\n set selectedText(value) {\r\n this.selected = null;\r\n\r\n this.dom.find('option').each(function () {\r\n if (jQuery(this).text() === value) {\r\n jQuery(this).prop('selected', true);\r\n return false;\r\n }\r\n });\r\n }\r\n\r\n\r\n loadSchema(object) {\r\n super.loadSchema(object);\r\n\r\n if (object.hasOwnProperty('selected')) {\r\n this.selected = object.selected;\r\n }\r\n\r\n if (object.hasOwnProperty('selectedText')) {\r\n this.selectedText = object.selectedText;\r\n }\r\n }\r\n\r\n createDom() {\r\n const dom = jQuery('');\r\n dom.addClass('ux-labeled');\r\n dom.addClass('ux-switch');\r\n\r\n\r\n dom.on('click.Switch', (e) => {\r\n const checkbox = dom.find('input[type=checkbox]');\r\n\r\n if (!checkbox.prop('disabled')) {\r\n checkbox.prop('checked', !checkbox.prop('checked'));\r\n\r\n AppMediator.sendUserInput(this, {selected: this.selected}, () => {\r\n this.trigger('action', e);\r\n });\r\n }\r\n });\r\n\r\n return dom;\r\n }\r\n}\r\n\r\nexport default Switch;","import TextInputControl from './TextInputControl';\r\n\r\nclass TextArea extends TextInputControl {\r\n\r\n get wrap() {\r\n return this.dom.attr('wrap');\r\n }\r\n\r\n set wrap(value) {\r\n this.dom.attr('wrap', value);\r\n }\r\n\r\n createDom() {\r\n var dom = jQuery('