├── README.md ├── ace ├── ace.js ├── package.json └── sample.html ├── apexcharts ├── apexchart.js ├── package.json └── sample.html ├── ckeditor ├── ckeditor.js ├── package.json └── sample.html ├── ckeditor5 ├── ckeditor5.js ├── document_style.css ├── package.json └── sample.html ├── codemirror ├── codemirror.js ├── package.json └── sample.html ├── codemirrormerge ├── codemirror_merge.js ├── package.json └── sample.html ├── d3 ├── d3.js ├── data │ └── flare.json ├── package.json └── sample.html ├── dhtmlx_v5 ├── dhtmlx.js ├── package.json └── sample.html ├── dndlist ├── dndlist.js ├── package.json └── sample.html ├── fabricjs ├── fabric.js ├── package.json └── sample.html ├── formeditor ├── form_editor.css ├── form_editor.js ├── package.json └── sample.html ├── fusion ├── data │ └── data.js ├── fusion.js ├── package.json ├── readme.md └── sample.html ├── gantt ├── gantt.js ├── package.json └── sample.html ├── heremap ├── heremap.js ├── package.json └── sample.html ├── highcharts ├── hcharts.js ├── package.json └── sample.html ├── hipchat ├── hipchat.js ├── package.json └── sample.html ├── justgage ├── justgage.js ├── package.json └── sample.html ├── konva ├── konva.js ├── package.json └── sample.html ├── monaco ├── monaco.js ├── package.json └── sample.html ├── nicedit ├── nicedit.js ├── package.json └── sample.html ├── openmap ├── openmap.js ├── package.json └── sample.html ├── paper ├── package.json ├── paper.js └── sample.html ├── plyr ├── package.json ├── plyr.js └── sample.html ├── raphael ├── data │ └── chart.json ├── package.json ├── raphael.js └── sample.html ├── ribbon ├── images │ ├── copy.gif │ ├── cut.gif │ ├── new.JPG │ ├── open.gif │ ├── paste.gif │ ├── print.JPG │ ├── redo.JPG │ ├── save.gif │ └── undo.JPG ├── package.json ├── ribbon.css ├── ribbon.js ├── sample.html └── sample_tabs.html ├── richtext ├── package.json ├── richtext.js └── sample.html ├── scheduler ├── package.json ├── sample.html ├── scheduler.js └── scheduler_data.json ├── selectdialog ├── package.json ├── sample.html ├── selectdialog.css └── selectdialog.js ├── sigma ├── package.json ├── sample.html └── sigma.js ├── tinymce ├── package.json ├── sample.html └── tinymce.js ├── tinymce5 ├── package.json ├── sample.html └── tinymce5.js ├── vis ├── package.json ├── sample.html └── vis.js └── yandexmap ├── package.json ├── sample.html └── yandexmap.js /README.md: -------------------------------------------------------------------------------- 1 | Webix Components 2 | ================== 3 | 4 | [![Join the chat at https://gitter.im/webix-hub/webix](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/webix-hub/webix) 5 | 6 | Collection of custom components 7 | 8 | - [Double list](http://webix-hub.github.io/components/dndlist/sample.html) (dndlist) 9 | - [Select dialog](http://webix-hub.github.io/components/selectdialog/sample.html) (select-dialog) 10 | - [Form Editor tool](http://webix-hub.github.io/components/formeditor/sample.html) (form-editor) 11 | - [Ribbon Control](http://webix-hub.github.io/components/ribbon/sample_tabs.html) (ribbon) 12 | 13 | Third Party Integrations 14 | ======================== 15 | 16 | Collection of third party integrations for the Webix UI 17 | 18 | Maps 19 | ------ 20 | - [Open Street Maps](http://webix-hub.github.io/components/openmap/sample.html) (open-map) 21 | - [Yandex Maps](http://webix-hub.github.io/components/yandexmap/sample.html) (yandex-map) 22 | - [Here Maps](http://webix-hub.github.io/components/heremap/sample.html), also known as Nokia Maps (here-map) 23 | 24 | 25 | Editors 26 | --------- 27 | - [CKEditor 4](http://webix-hub.github.io/components/ckeditor/sample.html) (ckeditor) 28 | - [CKEditor 5](http://webix-hub.github.io/components/ckeditor5/sample.html) (ckeditor5) 29 | - [Tiny MCE 4](http://webix-hub.github.io/components/tinymce/sample.html) (tinymce-editor) 30 | - [Tiny MCE 5](http://webix-hub.github.io/components/tinymce5/sample.html) (tinymce5-editor) 31 | - [Nic Edit](http://webix-hub.github.io/components/nicedit/sample.html) (nic-editor) 32 | - [Code Mirror](http://webix-hub.github.io/components/codemirror/sample.html) (codemirror-editor) 33 | - [Monaco](http://webix-hub.github.io/components/monaco/sample.html) (monaco-editor) 34 | - [Ace](http://webix-hub.github.io/components/ace/sample.html) (ace-editor) 35 | 36 | Charts 37 | ------- 38 | - [Raphael](http://webix-hub.github.io/components/raphael/sample.html) (raphael-chart) 39 | - [D3](http://webix-hub.github.io/components/d3/sample.html) (d3-chart) 40 | - [Sigma Chart](http://webix-hub.github.io/components/sigma/sample.html) (sigma-chart) 41 | - [Just Gage](http://webix-hub.github.io/components/justgage/sample.html) (justgage-chart) 42 | - [Fusion](http://webix-hub.github.io/components/fusion/sample.html) (fusion-chart) 43 | - [Vis](http://webix-hub.github.io/components/vis/sample.html) (vis-chart) 44 | - [Highcharts](http://webix-hub.github.io/components/highcharts/sample.html) (highchart) 45 | - [ApexCharts](http://webix-hub.github.io/components/apexcharts/sample.html) (apexchart) 46 | 47 | DHTMLX components 48 | ------------------- 49 | - [DHTMLX Scheduler](http://webix-hub.github.io/components/scheduler/sample.html) (dhx-scheduler) 50 | - [DHTMLX Gantt](http://webix-hub.github.io/components/gantt/sample.html) (dhx-gantt) 51 | - [DHTMLX Richtext](http://webix-hub.github.io/components/richtext/sample.html) (dhx-richtext) 52 | - [Using Webix with DHTMLX components](http://webix-hub.github.io/components/dhtmlx_v5/sample.html) 53 | 54 | Other 55 | ------ 56 | - [Hipchat](http://webix-hub.github.io/components/hipchat/sample.html) (hipchat) 57 | - [Konva](http://webix-hub.github.io/components/konva/sample.html) (konva) 58 | - [Paper](http://webix-hub.github.io/components/paper/sample.html) (paper) 59 | - [Fabric.js](http://webix-hub.github.io/components/fabricjs/sample.html) (fabric) 60 | - [Plyr](http://webix-hub.github.io/components/plyr/sample.html) (plyr-player) 61 | 62 | Thanks 63 | ------ 64 | - [MLukman](https://github.com/MLukman): FusionCharts integration and dndlist component 65 | - [franck34](https://github.com/franck34): ApexCharts 66 | - [jbruwes](https://github.com/jbruwes): Fabric.js -------------------------------------------------------------------------------- /ace/ace.js: -------------------------------------------------------------------------------- 1 | webix.protoUI({ 2 | name:"ace-editor", 3 | defaults:{ 4 | mode:"javascript", 5 | theme:"monokai" 6 | }, 7 | $init:function(config){ 8 | this.$view.innerHTML = "
"; 9 | this._waitEditor = webix.promise.defer(); 10 | this.$ready.push(this._render_cm_editor); 11 | }, 12 | $setSize: function(w, h) { 13 | if (webix.ui.view.prototype.$setSize.call(this, w, h)) { 14 | if (this._editor) { 15 | this._editor.resize(); 16 | } 17 | } 18 | }, 19 | _render_cm_editor:function(){ 20 | if (this.config.cdn === false){ 21 | this._render_when_ready(); 22 | return; 23 | }; 24 | 25 | this._cdn = this.config.cdn || "https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.6"; 26 | 27 | webix.require([ 28 | this._cdn + "/ace.js" 29 | ]).then( webix.bind(this._render_when_ready, this) ).catch(function(e){ 30 | console.log(e); 31 | }); 32 | }, 33 | _render_when_ready:function(){ 34 | 35 | if (this._cdn){ 36 | ace.config.set("basePath", this._cdn); 37 | ace.config.set("modePath", this._cdn); 38 | ace.config.set("workerPath", this._cdn); 39 | ace.config.set("themePath", this._cdn); 40 | }; 41 | 42 | this._editor = ace.edit(this.$view.firstChild); 43 | 44 | 45 | this._editor.$blockScrolling = Infinity; 46 | this._editor.setOptions({ 47 | fontFamily: "consolas,monospace", 48 | fontSize: "12pt" 49 | }); 50 | 51 | if(this.config.theme) 52 | this._editor.setTheme("ace/theme/"+this.config.theme); 53 | if(this.config.mode) 54 | this._editor.getSession().setMode("ace/mode/"+this.config.mode); 55 | if(this.config.value) 56 | this.setValue(this.config.value); 57 | if (this._focus_await) 58 | this.focus(); 59 | 60 | this._editor.navigateFileStart(); 61 | this._waitEditor.resolve(this._editor); 62 | }, 63 | setValue:function(value){ 64 | if(!value && value !== 0) 65 | value = ""; 66 | 67 | this.config.value = value; 68 | if(this._editor){ 69 | this._editor.setValue(value); 70 | } 71 | }, 72 | getValue:function(){ 73 | return this._editor ? this._editor.getValue() : this.config.value; 74 | }, 75 | focus:function(){ 76 | this._focus_await = true; 77 | if (this._editor) 78 | this._editor.focus(); 79 | }, 80 | getEditor:function(waitEditor){ 81 | return waitEditor?this._waitEditor:this._editor; 82 | } 83 | }, webix.ui.view); -------------------------------------------------------------------------------- /ace/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@wbx/view-ace-editor", 3 | "version": "1.4.6", 4 | "description": "Ace editor as Webix view", 5 | "main": "ace.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/webix-hub/components.git" 12 | }, 13 | "keywords": [ 14 | "webix", 15 | "ace", 16 | "editor", 17 | "view" 18 | ], 19 | "author": "XB Software", 20 | "license": "MIT", 21 | "bugs": { 22 | "url": "https://github.com/webix-hub/components/issues" 23 | }, 24 | "homepage": "https://github.com/webix-hub/components#readme" 25 | } -------------------------------------------------------------------------------- /ace/sample.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 18 | 19 | 20 | 21 | 22 | 43 | 44 | -------------------------------------------------------------------------------- /apexcharts/apexchart.js: -------------------------------------------------------------------------------- 1 | webix.protoUI({ 2 | name:"apexchart", 3 | $init:function(){ 4 | this.uid = "chart"+webix.uid(); 5 | this.$view.innerHTML = "
"; 6 | 7 | this._chart = null; 8 | this._waitChart = webix.promise.defer(); 9 | this.$ready.push(this._request_sources); 10 | }, 11 | _request_sources:function(){ 12 | var c = this.config; 13 | if (c.cdn === false){ 14 | webix.delay(this._render, this); 15 | return; 16 | }; 17 | 18 | var cdn = c.cdn || "https://cdnjs.cloudflare.com/ajax/libs/apexcharts/3.8.6"; 19 | var sources = []; 20 | 21 | sources.push(cdn+"/apexcharts.js"); 22 | 23 | webix.require(sources) 24 | .then(webix.bind( this._render, this )) 25 | .catch(function(e){ 26 | this._waitChart.reject(e); 27 | }); 28 | }, 29 | _render:function(){ 30 | try { 31 | var config = this.config.settings; 32 | this._chart = new ApexCharts(this.$view.firstChild, config); 33 | this._chart.render(); 34 | this._waitChart.resolve(this._chart); 35 | } catch(e) { 36 | console.log(e); 37 | this._waitChart.reject(e); 38 | } 39 | }, 40 | getChart:function(wait){ 41 | return wait ? this._waitChart : this._chart; 42 | } 43 | }, webix.ui.view); 44 | -------------------------------------------------------------------------------- /apexcharts/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@wbx/view-apexchart", 3 | "version": "3.8.6", 4 | "description": "apexcharts as Webix component", 5 | "main": "apexchart.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/webix-hub/components.git" 12 | }, 13 | "keywords": [ 14 | "webix", 15 | "apexchart", 16 | "apexcharts", 17 | "chart", 18 | "view" 19 | ], 20 | "author": "Apexcharts", 21 | "license": "MIT", 22 | "bugs": { 23 | "url": "https://github.com/webix-hub/components/issues" 24 | }, 25 | "homepage": "https://github.com/webix-hub/components#readme" 26 | } 27 | -------------------------------------------------------------------------------- /apexcharts/sample.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Apexcharts in Webix 9 | 10 | 11 | 12 | 121 | 122 | 123 | -------------------------------------------------------------------------------- /ckeditor/ckeditor.js: -------------------------------------------------------------------------------- 1 | webix.protoUI({ 2 | name:"ckeditor", 3 | $init:function(config){ 4 | this.$view.className += " webix_selectable"; 5 | this._waitEditor = webix.promise.defer(); 6 | 7 | var tid = config.textAreaID = "t"+webix.uid(); 8 | this.$view.innerHTML = ""; 9 | 10 | this.$ready.push(this._init_ckeditor_once); 11 | }, 12 | defaults:{ 13 | language:"en", 14 | toolbar: [ 15 | [ 'Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink' ], 16 | [ 'FontSize', 'TextColor', 'BGColor' ] 17 | ], 18 | editorConfig: {} 19 | }, 20 | _init_ckeditor_once:function(){ 21 | if (this.config.cdn === false){ 22 | webix.delay( webix.bind( this._render_ckeditor, this) ); 23 | return; 24 | }; 25 | 26 | var cdn = this.config.cdn || "//cdn.ckeditor.com/4.13.0/standard/"; 27 | 28 | window.CKEDITOR_BASEPATH = cdn; 29 | webix.require([cdn+"/ckeditor.js"]) 30 | .then( webix.bind(this._render_ckeditor, this) ) 31 | .catch(function(e){ 32 | console.log(e); 33 | }); 34 | }, 35 | _render_ckeditor:function(){ 36 | var initMethod = "replace"; 37 | if(this.config.editorType === "inline") { 38 | CKEDITOR.disableAutoInline = true; 39 | initMethod = "inline"; 40 | this.$view.style["overflow-y"] = "auto"; 41 | }; 42 | 43 | var barHeight = 70; // toolbar + bottombar, as initial sizes are set to the editable area 44 | var config = webix.extend({ 45 | toolbar: this.config.toolbar, 46 | language: this.config.language, 47 | width:this.$width, 48 | height:this.$height-barHeight, 49 | resize_enabled:false 50 | }, this.config.editorConfig); 51 | 52 | this._editor = CKEDITOR[initMethod](this.config.textAreaID, config); 53 | this._waitEditor.resolve(this._editor); 54 | }, 55 | _set_inner_size:function(x, y){ 56 | if (!this._editor || !this._editor.container || !this.$width || this.config.editorType === "inline") return; 57 | this._editor.resize(x, y); 58 | }, 59 | $setSize:function(x,y){ 60 | if (webix.ui.view.prototype.$setSize.call(this, x, y)){ 61 | this._set_inner_size(x,y); 62 | } 63 | }, 64 | setValue:function(value){ 65 | this.config.value = value; 66 | 67 | if (this._editor && this._editor.status === "ready") 68 | this._editor.setData(value); 69 | else webix.delay(function(){ 70 | this.setValue(value); 71 | },this,[],100); 72 | }, 73 | getValue:function(){ 74 | return this._editor?this._editor.getData():this.config.value; 75 | }, 76 | focus:function(){ 77 | this._focus_await = true; 78 | if (this._editor) 79 | this._editor.focus(); 80 | }, 81 | getEditor:function(waitEditor){ 82 | return waitEditor?this._waitEditor:this._editor; 83 | } 84 | }, webix.ui.view); 85 | -------------------------------------------------------------------------------- /ckeditor/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@wbx/view-ckeditor", 3 | "version": "4.13.0", 4 | "description": "CKEditor as Webix view", 5 | "main": "ckeditor.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/webix-hub/components.git" 12 | }, 13 | "keywords": [ 14 | "webix", 15 | "ckeditor", 16 | "editor", 17 | "view" 18 | ], 19 | "author": "XB Software", 20 | "license": "MIT", 21 | "bugs": { 22 | "url": "https://github.com/webix-hub/components/issues" 23 | }, 24 | "homepage": "https://github.com/webix-hub/components#readme" 25 | } -------------------------------------------------------------------------------- /ckeditor/sample.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 14 | 15 | 16 | 17 | 18 | 19 | 38 | 39 | -------------------------------------------------------------------------------- /ckeditor5/ckeditor5.js: -------------------------------------------------------------------------------- 1 | webix.protoUI({ 2 | name:"ckeditor5", 3 | $init:function(config){ 4 | var html = "
"; 5 | var editor = "
"; 6 | html += config.mode == "document" ? ("
"+editor+"
") : editor; 7 | 8 | this.$view.innerHTML = html; 9 | this._waitEditor = webix.promise.defer(); 10 | this.$ready.push(this._require_ckeditor); 11 | }, 12 | defaults:{ 13 | config:{} 14 | }, 15 | _require_ckeditor:function(){ 16 | if (this.config.cdn === false){ 17 | this._render_ckeditor(); 18 | return; 19 | }; 20 | 21 | // we use DecoupledEditor only 22 | var cdn = this.config.cdn || "https://cdn.ckeditor.com/ckeditor5/18.0.0/decoupled-document"; 23 | 24 | webix.require([cdn+"/ckeditor.js"]) 25 | .then( webix.bind(this._render_ckeditor, this) ) 26 | .catch(function(e){ 27 | console.log(e); 28 | }); 29 | }, 30 | _render_ckeditor:function(){ 31 | var config = webix.extend({ 32 | toolbar: { 33 | shouldNotGroupWhenFull: true 34 | } 35 | }, this.config.config, true); 36 | 37 | var editor = !window.DecoupledDocumentEditor ? DecoupledEditor : DecoupledDocumentEditor; //support Document Editor built with online builder 38 | 39 | editor.create(this.$view.querySelector(".webix_ck_editor"), config) 40 | .then(webix.bind(this._finalize_init, this)) 41 | .catch(function(e){ 42 | console.error(e); 43 | }); 44 | }, 45 | _finalize_init:function(editor){ 46 | this._tools_container = this.$view.querySelector(".webix_ck_toolbar"); 47 | this._tools_container.appendChild(editor.ui.view.toolbar.element); 48 | this._body_container = this.$view.childNodes[1]; 49 | 50 | this._editor = editor; 51 | this._waitEditor.resolve(this._editor); 52 | 53 | // correct height on focus/blur 54 | editor.ui.focusTracker.on("change:isFocused", webix.bind(function(){ 55 | this._set_height(this.$height); 56 | }, this)); 57 | 58 | this._set_height(this.$height); 59 | this.setValue(this.config.value); 60 | }, 61 | $setSize:function(x,y){ 62 | if (webix.ui.view.prototype.$setSize.call(this, x, y) && this._body_container) 63 | this._set_height(y); 64 | }, 65 | _set_height:function(y){ 66 | var toolbar = this._tools_container, 67 | toolH = toolbar ? toolbar.clientHeight+2 : 2; // 2px for borders 68 | var height = (y-toolH)+"px"; 69 | this._body_container.style.height = height; 70 | 71 | }, 72 | getEditor:function(wait){ 73 | return wait ? this._waitEditor : this._editor; 74 | }, 75 | setValue:function(value){ 76 | this.config.value = value; 77 | this.getEditor(true).then(function(editor){ 78 | editor.setData(value); 79 | }); 80 | }, 81 | getValue:function(value){ 82 | return this._editor ? this._editor.getData() : this.config.value; 83 | } 84 | }, webix.ui.view); -------------------------------------------------------------------------------- /ckeditor5/document_style.css: -------------------------------------------------------------------------------- 1 | /* CSS is taken from the related CKEditor5 tutorial 2 | https://ckeditor.com/docs/ckeditor5/latest/framework/guides/deep-dive/ui/document-editor.html 3 | */ 4 | 5 | .webix_ck_body { 6 | background: var(--ck-color-base-foreground); 7 | overflow-y: scroll; 8 | } 9 | 10 | .webix_ck_body>.ck-editor__editable { 11 | width: 15.8cm; 12 | min-height: 21cm; 13 | 14 | padding: 1cm 2cm 2cm 1cm; 15 | 16 | border: 1px hsl( 0,0%,82.7% ) solid; 17 | border-radius: var(--ck-border-radius); 18 | background: white; 19 | 20 | box-shadow: 0 0 5px hsla( 0,0%,0%,.1 ); 21 | 22 | margin: 1cm auto; 23 | } -------------------------------------------------------------------------------- /ckeditor5/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@wbx/view-ckeditor5", 3 | "version": "12.4.0", 4 | "description": "CKEditor5 as Webix view", 5 | "main": "ckeditor5.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/webix-hub/components.git" 12 | }, 13 | "keywords": [ 14 | "webix", 15 | "ckeditor", 16 | "ckeditor5", 17 | "text-editor", 18 | "editor" 19 | ], 20 | "author": "XB Software", 21 | "license": "MIT", 22 | "bugs": { 23 | "url": "https://github.com/webix-hub/components/issues" 24 | }, 25 | "homepage": "https://github.com/webix-hub/components#readme" 26 | } 27 | -------------------------------------------------------------------------------- /ckeditor5/sample.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 83 | 84 | -------------------------------------------------------------------------------- /codemirror/codemirror.js: -------------------------------------------------------------------------------- 1 | webix.protoUI({ 2 | name: "codemirror-editor", 3 | defaults: { 4 | mode: "javascript", 5 | lineNumbers: true, 6 | matchBrackets: true, 7 | theme: "default" 8 | }, 9 | $init: function (config) { 10 | this.$view.innerHTML = ""; 11 | this._textarea = this.$view.firstChild; 12 | this._waitEditor = webix.promise.defer(); 13 | this.$ready.push(this._render_cm_editor); 14 | }, 15 | complex_types: { 16 | php: { 17 | mode: ["xml", "javascript", "css", "htmlmixed", "clike"] 18 | }, 19 | htmlembedded: { 20 | mode: ["xml", "javascript", "css", "htmlmixed"], 21 | addon: ["mode/multiplex"] 22 | }, 23 | htmlmixed: { 24 | mode: ["xml", "javascript", "css"] 25 | }, 26 | dockerfile: { 27 | addon: ["mode/simple"] 28 | } 29 | }, 30 | _render_cm_editor: function () { 31 | 32 | if (this.config.cdn === false) { 33 | this._render_when_ready(); 34 | return; 35 | }; 36 | 37 | var cdn = this.config.cdn || "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/"; 38 | // basic 39 | var sources = [ 40 | cdn + "/codemirror.css", 41 | cdn + "/codemirror.js" 42 | ]; 43 | 44 | // mode 45 | var mode = this.config.mode ? this.config.mode : "javascript"; 46 | // complex modes based on others: htmlmixed, htmlembedded, php 47 | var extras = this.complex_types[mode]; 48 | if (extras) { 49 | if (extras["mode"]) { 50 | extras["mode"].forEach(function (name) { 51 | var path = "/mode/" + name + "/" + name + ".js"; 52 | sources.push(cdn + path); 53 | }); 54 | }; 55 | if (extras["addon"]) { 56 | extras["addon"].forEach(function (name) { 57 | var path = "/addon/" + name + ".js"; 58 | sources.push(cdn + path); 59 | }); 60 | }; 61 | }; 62 | sources.push(cdn + "/mode/" + mode + "/" + mode + ".js"); 63 | 64 | // theme 65 | if (this.config.theme && this.config.theme !== "default") { 66 | sources.push(cdn + "/theme/" + this.config.theme + ".css") 67 | }; 68 | 69 | // matchbrackets add-on 70 | if (this.config.matchBrackets) { 71 | sources.push(cdn + "/addon/edit/matchbrackets.js") 72 | }; 73 | 74 | webix.require(sources) 75 | .then(webix.bind(this._render_when_ready, this)) 76 | .catch(function (e) { 77 | console.log(e); 78 | }); 79 | }, 80 | _render_when_ready: function () { 81 | this._editor = CodeMirror.fromTextArea(this._textarea, { 82 | mode: this.config.mode, 83 | lineNumbers: this.config.lineNumbers, 84 | matchBrackets: this.config.matchBrackets, 85 | theme: this.config.theme 86 | }); 87 | 88 | this._waitEditor.resolve(this._editor); 89 | 90 | this.setValue(this.config.value); 91 | if (this._focus_await) 92 | this.focus(); 93 | }, 94 | _set_inner_size: function () { 95 | if (!this._editor || !this.$width) return; 96 | 97 | this._updateScrollSize(); 98 | this._editor.scrollTo(0, 0); //force repaint, mandatory for IE 99 | }, 100 | _updateScrollSize: function () { 101 | var box = this._editor.getWrapperElement(); 102 | var height = (this.$height || 0) + "px"; 103 | 104 | box.style.height = height; 105 | box.style.width = (this.$width || 0) + "px"; 106 | 107 | var scroll = this._editor.getScrollerElement(); 108 | if (scroll.style.height != height) { 109 | scroll.style.height = height; 110 | this._editor.refresh(); 111 | } 112 | }, 113 | $setSize: function (x, y) { 114 | if (webix.ui.view.prototype.$setSize.call(this, x, y)) { 115 | this._set_inner_size(); 116 | } 117 | }, 118 | setValue: function (value) { 119 | if (!value && value !== 0) 120 | value = ""; 121 | 122 | this.config.value = value; 123 | if (this._editor) { 124 | this._editor.setValue(value); 125 | //by default - clear editor's undo history when setting new value 126 | if (!this.config.preserveUndoHistory) 127 | this._editor.clearHistory(); 128 | this._updateScrollSize(); 129 | } 130 | }, 131 | getValue: function () { 132 | return this._editor ? this._editor.getValue() : this.config.value; 133 | }, 134 | focus: function () { 135 | this._focus_await = true; 136 | if (this._editor) 137 | this._editor.focus(); 138 | }, 139 | getEditor: function (waitEditor) { 140 | return waitEditor ? this._waitEditor : this._editor; 141 | }, 142 | //undo, redo, etc 143 | undo: function () { 144 | this._editor.undo(); 145 | }, 146 | redo: function () { 147 | this._editor.redo(); 148 | }, 149 | undoLength: function () { 150 | return this._editor.historySize().undo; 151 | } 152 | }, webix.ui.view); -------------------------------------------------------------------------------- /codemirror/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@wbx/view-codemirror-editor", 3 | "version": "5.48.4-e", 4 | "description": "CodeMirror as Webix view", 5 | "main": "codemirror.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/webix-hub/components.git" 12 | }, 13 | "keywords": [ 14 | "webix", 15 | "codemirror", 16 | "editor", 17 | "view" 18 | ], 19 | "author": "XB Software", 20 | "license": "MIT", 21 | "bugs": { 22 | "url": "https://github.com/webix-hub/components/issues" 23 | }, 24 | "homepage": "https://github.com/webix-hub/components#readme" 25 | } -------------------------------------------------------------------------------- /codemirror/sample.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 32 | 33 | -------------------------------------------------------------------------------- /codemirrormerge/codemirror_merge.js: -------------------------------------------------------------------------------- 1 | webix.protoUI({ 2 | name: "codemirror-merge-editor", 3 | defaults: { 4 | mode: "javascript", 5 | lineNumbers: true, 6 | matchBrackets: true, 7 | theme: "default", 8 | highlightDifferences: true, 9 | connect: "align", 10 | collapseIdentical: false, 11 | }, 12 | $init: function (config) { 13 | this._waitEditor = webix.promise.defer(); 14 | this.$ready.push(this._render_cm_editor); 15 | }, 16 | complex_types: { 17 | php: { 18 | mode: ["xml", "javascript", "css", "htmlmixed", "clike"], 19 | }, 20 | htmlembedded: { 21 | mode: ["xml", "javascript", "css", "htmlmixed"], 22 | addon: ["mode/multiplex"], 23 | }, 24 | htmlmixed: { 25 | mode: ["xml", "javascript", "css"], 26 | }, 27 | dockerfile: { 28 | addon: ["mode/simple"], 29 | }, 30 | }, 31 | _render_cm_editor: function () { 32 | 33 | if (this.config.cdn === false) { 34 | this._render_when_ready(); 35 | return; 36 | } 37 | 38 | const cdn = this.config.cdn || "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/"; 39 | // basic 40 | const sources = [ 41 | cdn + "/codemirror.css", 42 | cdn + "/codemirror.js", 43 | // merge add-on 44 | // This addon depends on the google-diff-match-patch library to compute the diffs 45 | cdn + "/addon/merge/merge.css", 46 | cdn + "/addon/merge/merge.js", 47 | "https://cdnjs.cloudflare.com/ajax/libs/diff_match_patch/20121119/diff_match_patch.js", 48 | ]; 49 | 50 | // mode 51 | const mode = this.config.mode ? this.config.mode : "javascript"; 52 | // complex modes based on others: htmlmixed, htmlembedded, php 53 | const extras = this.complex_types[mode]; 54 | if (extras) { 55 | if (extras["mode"]) { 56 | extras["mode"].forEach(function (name) { 57 | const path = "/mode/" + name + "/" + name + ".js"; 58 | sources.push(cdn + path); 59 | }); 60 | } 61 | if (extras["addon"]) { 62 | extras["addon"].forEach(function (name) { 63 | const path = "/addon/" + name + ".js"; 64 | sources.push(cdn + path); 65 | }); 66 | } 67 | } 68 | sources.push(cdn + "/mode/" + mode + "/" + mode + ".js"); 69 | 70 | // theme 71 | if (this.config.theme && this.config.theme !== "default") { 72 | sources.push(cdn + "/theme/" + this.config.theme + ".css"); 73 | } 74 | 75 | // matchbrackets add-on 76 | if (this.config.matchBrackets) { 77 | sources.push(cdn + "/addon/edit/matchbrackets.js"); 78 | } 79 | 80 | webix.require(sources) 81 | .then(webix.bind(this._render_when_ready, this)) 82 | .catch(function (e) { 83 | console.log(e); 84 | }); 85 | }, 86 | _render_when_ready: function () { 87 | this._editor = CodeMirror.MergeView(this.$view, { 88 | value: "", 89 | orig: "", 90 | origLeft: null, //2 panes by default 91 | lineNumbers: this.config.lineNumbers, 92 | mode: this.config.mode, 93 | highlightDifferences: this.config.highlightDifferences, 94 | connect: this.config.connect, 95 | collapseIdentical: this.config.collapseIdentical, 96 | }); 97 | 98 | this._waitEditor.resolve(this._editor); 99 | 100 | this._editorLeft = this._editor.editor(); 101 | this._editorRight = this._editor.rightOriginal(); 102 | 103 | this.setValues(this.config.value); 104 | if (this._focus_await) this.focus(); 105 | }, 106 | setValues: function (value) { 107 | if (!value) { 108 | value = { editorLeft: "", editorRight: "" }; 109 | } 110 | this.config.value = value; 111 | if (this._editor) { 112 | this._editorLeft.setValue(value.editorLeft || ""); 113 | this._editorRight.setValue(value.editorRight || ""); 114 | //by default - clear editor's undo history when setting new value 115 | if (!this.config.preserveUndoHistory) { 116 | this._editorLeft.clearHistory(); 117 | this._editorRight.clearHistory(); 118 | } 119 | } 120 | }, 121 | getValues: function () { 122 | if (this._editor) { 123 | const data = { 124 | editorLeft: this._editorLeft.getValue(), 125 | editorRight: this._editorRight.getValue(), 126 | }; 127 | return data; 128 | } 129 | return this.config.value; 130 | }, 131 | focus: function () { 132 | this._focus_await = true; 133 | if (this._editor && this._editorLeft) this._editorLeft.focus(); 134 | }, 135 | getEditor: function (waitEditor) { 136 | return waitEditor ? this._waitEditor : this._editor; 137 | }, 138 | }, webix.ui.view); 139 | -------------------------------------------------------------------------------- /codemirrormerge/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@wbx/view-codemirror-merge-editor", 3 | "version": "5.48.4-e", 4 | "description": "CodeMirror with merge addon as Webix view", 5 | "main": "codemirror_merge.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/webix-hub/components.git" 12 | }, 13 | "keywords": [ 14 | "webix", 15 | "codemirror", 16 | "merge", 17 | "editor", 18 | "view" 19 | ], 20 | "author": "XB Software", 21 | "license": "MIT", 22 | "bugs": { 23 | "url": "https://github.com/webix-hub/components/issues" 24 | }, 25 | "homepage": "https://github.com/webix-hub/components#readme" 26 | } -------------------------------------------------------------------------------- /codemirrormerge/sample.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 16 | 17 | 18 | 35 | 36 | -------------------------------------------------------------------------------- /d3/d3.js: -------------------------------------------------------------------------------- 1 | webix.protoUI({ 2 | name:"d3-chart", 3 | defaults:{ 4 | minified:true, 5 | version:"5" 6 | }, 7 | $init:function(){ 8 | this._waitContent = webix.promise.defer(); 9 | this.attachEvent("onAfterLoad", function(){ 10 | this._data_ready(); 11 | }); 12 | 13 | webix.delay(this._render_once, this); 14 | }, 15 | _render_once:function(){ 16 | 17 | if (this.config.cdn === false){ 18 | this._finalize_init(); 19 | return; 20 | }; 21 | 22 | var cdn = this.config.cdn ? this.config.cdn : "https://d3js.org"; 23 | // get the minified file by default 24 | var isMin = this.config.minified ? ".min" : ""; 25 | var version = this.config.version.toString(); 26 | 27 | var source = cdn+"/d3.v"+version+isMin+".js"; 28 | 29 | webix.require([ source ]) 30 | .then( webix.bind(this._finalize_init, this) ) 31 | .catch(function(e){ 32 | console.log(e); 33 | }); 34 | }, 35 | _finalize_init:function(){ 36 | this._waitContent.resolve(d3.select(this.$view)); 37 | if (this.config.init) 38 | this.config.init.call(this); 39 | }, 40 | _data_ready:function(){ 41 | webix.promise.all([ 42 | this._waitContent, 43 | this.waitData 44 | ]) 45 | .then( webix.bind(this.renderData, this) ); 46 | }, 47 | $setSize:function(x,y){ 48 | if (webix.ui.view.prototype.$setSize.call(this,x,y)){ 49 | this._data_ready(); 50 | } 51 | }, 52 | renderData:function(){ 53 | if (this.config.ready){ 54 | this.$view.innerHTML = ""; 55 | this.config.ready.call(this, this.data); 56 | } 57 | }, 58 | getSelection:function(wait){ 59 | return wait ? this._waitContent : d3.select(this.$view) 60 | } 61 | }, webix.AtomDataLoader, webix.EventSystem, webix.ui.view ); -------------------------------------------------------------------------------- /d3/data/flare.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "flare", 3 | "children": [ 4 | { 5 | "name": "analytics", 6 | "children": [ 7 | { 8 | "name": "cluster", 9 | "children": [ 10 | {"name": "AgglomerativeCluster", "size": 3938}, 11 | {"name": "CommunityStructure", "size": 3812}, 12 | {"name": "HierarchicalCluster", "size": 6714}, 13 | {"name": "MergeEdge", "size": 743} 14 | ] 15 | }, 16 | { 17 | "name": "graph", 18 | "children": [ 19 | {"name": "BetweennessCentrality", "size": 3534}, 20 | {"name": "LinkDistance", "size": 5731}, 21 | {"name": "MaxFlowMinCut", "size": 7840}, 22 | {"name": "ShortestPaths", "size": 5914}, 23 | {"name": "SpanningTree", "size": 3416} 24 | ] 25 | }, 26 | { 27 | "name": "optimization", 28 | "children": [ 29 | {"name": "AspectRatioBanker", "size": 7074} 30 | ] 31 | } 32 | ] 33 | }, 34 | { 35 | "name": "data", 36 | "children": [ 37 | { 38 | "name": "converters", 39 | "children": [ 40 | {"name": "Converters", "size": 721}, 41 | {"name": "DelimitedTextConverter", "size": 4294}, 42 | {"name": "GraphMLConverter", "size": 9800}, 43 | {"name": "IDataConverter", "size": 1314}, 44 | {"name": "JSONConverter", "size": 2220} 45 | ] 46 | }, 47 | {"name": "DataField", "size": 1759}, 48 | {"name": "DataSchema", "size": 2165}, 49 | {"name": "DataSet", "size": 586}, 50 | {"name": "DataSource", "size": 3331}, 51 | {"name": "DataTable", "size": 772}, 52 | {"name": "DataUtil", "size": 3322} 53 | ] 54 | }, 55 | { 56 | "name": "display", 57 | "children": [ 58 | {"name": "DirtySprite", "size": 8833}, 59 | {"name": "LineSprite", "size": 1732}, 60 | {"name": "RectSprite", "size": 3623}, 61 | {"name": "TextSprite", "size": 10066} 62 | ] 63 | }, 64 | { 65 | "name": "flex", 66 | "children": [ 67 | {"name": "FlareVis", "size": 4116} 68 | ] 69 | }, 70 | { 71 | "name": "physics", 72 | "children": [ 73 | {"name": "DragForce", "size": 1082}, 74 | {"name": "GravityForce", "size": 1336}, 75 | {"name": "IForce", "size": 319}, 76 | {"name": "NBodyForce", "size": 10498}, 77 | {"name": "Particle", "size": 2822}, 78 | {"name": "Simulation", "size": 9983}, 79 | {"name": "Spring", "size": 2213}, 80 | {"name": "SpringForce", "size": 1681} 81 | ] 82 | }, 83 | { 84 | "name": "scale", 85 | "children": [ 86 | {"name": "IScaleMap", "size": 2105}, 87 | {"name": "LinearScale", "size": 1316}, 88 | {"name": "LogScale", "size": 3151}, 89 | {"name": "OrdinalScale", "size": 3770}, 90 | {"name": "QuantileScale", "size": 2435}, 91 | {"name": "QuantitativeScale", "size": 4839}, 92 | {"name": "RootScale", "size": 1756}, 93 | {"name": "Scale", "size": 4268}, 94 | {"name": "ScaleType", "size": 1821}, 95 | {"name": "TimeScale", "size": 5833} 96 | ] 97 | }, 98 | { 99 | "name": "util", 100 | "children": [ 101 | {"name": "Arrays", "size": 8258}, 102 | {"name": "Colors", "size": 10001}, 103 | {"name": "Dates", "size": 8217}, 104 | {"name": "Displays", "size": 12555}, 105 | {"name": "Filter", "size": 2324}, 106 | {"name": "Geometry", "size": 10993}, 107 | { 108 | "name": "math", 109 | "children": [ 110 | {"name": "DenseMatrix", "size": 3165}, 111 | {"name": "IMatrix", "size": 2815}, 112 | {"name": "SparseMatrix", "size": 3366} 113 | ] 114 | }, 115 | {"name": "Maths", "size": 17705}, 116 | {"name": "Orientation", "size": 1486}, 117 | { 118 | "name": "palette", 119 | "children": [ 120 | {"name": "ColorPalette", "size": 6367}, 121 | {"name": "Palette", "size": 1229}, 122 | {"name": "ShapePalette", "size": 2059}, 123 | {"name": "SizePalette", "size": 2291} 124 | ] 125 | }, 126 | {"name": "Property", "size": 5559}, 127 | {"name": "Shapes", "size": 19118}, 128 | {"name": "Sort", "size": 6887}, 129 | {"name": "Stats", "size": 6557}, 130 | {"name": "Strings", "size": 22026} 131 | ] 132 | } 133 | ] 134 | } -------------------------------------------------------------------------------- /d3/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@wbx/view-d3-chart", 3 | "version": "5.12.0", 4 | "description": "D3 chart as Webix view", 5 | "main": "d3.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/webix-hub/components.git" 12 | }, 13 | "keywords": [ 14 | "webix", 15 | "d3", 16 | "chart", 17 | "view" 18 | ], 19 | "author": "XB Software", 20 | "license": "MIT", 21 | "bugs": { 22 | "url": "https://github.com/webix-hub/components/issues" 23 | }, 24 | "homepage": "https://github.com/webix-hub/components#readme" 25 | } -------------------------------------------------------------------------------- /d3/sample.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | D3 Chart 8 | 9 | 10 | 11 | 71 | 72 | 73 | 74 | 75 | 76 | -------------------------------------------------------------------------------- /dhtmlx_v5/dhtmlx.js: -------------------------------------------------------------------------------- 1 | if (typeof(window.dhtmlXCellObject) != "undefined") { 2 | 3 | dhtmlXCellObject.prototype.attachWebix = function(conf) { 4 | 5 | this.callEvent("_onBeforeContentAttach",["webix"]); 6 | 7 | var obj = document.createElement("DIV"); 8 | var id = obj.id = "webix_" + webix.uid(); 9 | 10 | obj.style.width = "100%"; 11 | obj.style.height = "100%"; 12 | obj.style.position = "relative"; 13 | obj.style.overflow = "hidden"; 14 | 15 | this._attachObject(obj); 16 | 17 | //mimic dhtmlxGrid API 18 | this.dataType = "grid"; 19 | this.dataObj = new webix.ui(conf, id); 20 | this.dataObj.setSizes = function(){ 21 | if (this.resize) this.resize(); 22 | else this.render(); 23 | }; 24 | 25 | 26 | // fix layout cell for material 27 | if (this.conf.skin == "material" && typeof(window.dhtmlXLayoutCell) == "function" && this instanceof window.dhtmlXLayoutCell) { 28 | this.cell.childNodes[this.conf.idx.cont].style.overflow = "hidden"; 29 | } 30 | 31 | obj = null; 32 | 33 | 34 | this.callEvent("_onContentAttach",[]); 35 | 36 | return this.dataObj; 37 | }; 38 | } -------------------------------------------------------------------------------- /dhtmlx_v5/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@wbx/view-dhxlayout-webix", 3 | "version": "5.1.0", 4 | "description": "Webix view in DHTMLX layout", 5 | "main": "dhtmlx.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/webix-hub/components.git" 12 | }, 13 | "keywords": [ 14 | "webix", 15 | "dhtmlx", 16 | "layout", 17 | "view" 18 | ], 19 | "author": "XB Software", 20 | "license": "MIT", 21 | "bugs": { 22 | "url": "https://github.com/webix-hub/components/issues" 23 | }, 24 | "homepage": "https://github.com/webix-hub/components#readme" 25 | } -------------------------------------------------------------------------------- /dhtmlx_v5/sample.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | DHTMLX 5 layouts 13 | 22 | 66 | 67 | 68 | 69 |
70 | 71 | 72 | -------------------------------------------------------------------------------- /dndlist/dndlist.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Webix Component "dndlist" 3 | * Version 1.0 4 | * By Muhammad Lukman Nasaruddin (https://github.com/MLukman/webix-components) 5 | * 6 | * Requires Webix >= 3.1.1 7 | */ 8 | webix.protoUI({ 9 | name: "dndlist", 10 | defaults: { 11 | label: "", 12 | labelWidth: 80, 13 | height: 200, 14 | choicesHeader: "Choices", 15 | valueHeader: "Selected", 16 | choices: [], 17 | value: [], 18 | swap: false 19 | }, 20 | $formElement: true, 21 | $init: function (cfg) { 22 | var dnd = this; 23 | config = webix.extend(this.defaults, cfg, true); 24 | var dtCommon = {view: "datatable", scrollX: false, drag: true}; 25 | var value = []; 26 | for (var i = 0; i < config.value.length; i++) { 27 | value.push({value: config.value[i]}); 28 | } 29 | var choicesDt = webix.extend(webix.copy(dtCommon), { 30 | id: 'choices', 31 | columns: [ 32 | { 33 | id: "value", 34 | header: { 35 | text: config.choicesHeader, 36 | colspan: 2 37 | }, 38 | fillspace: true 39 | }, 40 | { 41 | id: "_actions", 42 | header: " ", 43 | width: 35, 44 | template: function (row) { 45 | return ""; 46 | } 47 | } 48 | ], 49 | onClick: { 50 | 'mdi-plus-box': function (e, i) { 51 | var row = this.getItem(i.row); 52 | dnd.addValue(row.value); 53 | } 54 | }, 55 | on: { 56 | onItemDblClick: function (id) { 57 | dnd.addValue(this.getItem(id).value); 58 | } 59 | } 60 | }, true); 61 | var valueDt = webix.extend(webix.copy(dtCommon), { 62 | id: 'value', 63 | columns: [ 64 | { 65 | id: "value", 66 | header: { 67 | text: config.valueHeader, 68 | colspan: 2 69 | }, 70 | fillspace: true 71 | }, 72 | { 73 | id: "_actions", 74 | header: " ", 75 | width: 35, 76 | template: function (row) { 77 | return ""; 78 | } 79 | } 80 | ], 81 | onClick: { 82 | 'mdi-minus-box': function (e, i) { 83 | var row = this.getItem(i.row); 84 | dnd.removeValue(row.value); 85 | } 86 | }, 87 | on: { 88 | onItemDblClick: function (id) { 89 | dnd.removeValue(this.getItem(id).value); 90 | } 91 | } 92 | }, true); 93 | 94 | var spacer = {view: 'spacer', width: 10}; 95 | var cols = {cols: (config.swap ? [valueDt, spacer, choicesDt] : [choicesDt, spacer, valueDt])}; 96 | var label = (config.label != "" ? 97 | {id: 'label', view: 'label', label: config.label, width: config.labelWidth, align: config.labelAlign} : 98 | {width: 1, height: 1}); 99 | if (config.labelPosition === 'top') { 100 | config.rows = [ 101 | label, 102 | cols 103 | ]; 104 | } else { 105 | label.css = {padding: "1px 7.5px 0px 0px"}; 106 | config.cols = [ 107 | { 108 | rows: [label] 109 | }, 110 | cols 111 | ]; 112 | } 113 | 114 | this.$ready.push(function () { 115 | this.setValue(config.value); 116 | this.setChoices(config.choices); 117 | }); 118 | }, 119 | setChoices: function (choices) { 120 | var choicesDt = this.$$('choices'); 121 | choicesDt.clearAll(); 122 | var values = this.getValue(); 123 | for (var i = 0; i < choices.length; i++) { 124 | if (values.indexOf(choices[i]) === -1) { 125 | choicesDt.add({value: choices[i]}); 126 | } 127 | } 128 | }, 129 | setValue: function (values) { 130 | var existVal = this.getValue(); 131 | for (var i = 0; i < existVal.length; i++) { 132 | if (values.indexOf(existVal[i]) === -1) { 133 | this.removeValue(existVal[i]); 134 | } 135 | } 136 | for (var j = 0; j < values.length; j++) { 137 | this.addValue(values[j]); 138 | } 139 | }, 140 | getValue: function () { 141 | var value = []; 142 | var valueDt = this.$$('value'); 143 | valueDt.eachRow(function (row) { 144 | value.push(valueDt.getItem(row).value); 145 | }, true); 146 | return value; 147 | }, 148 | addValue: function (value) { 149 | var valueDt = this.$$('value'); 150 | var choicesDt = this.$$('choices'); 151 | var rowFinder = (function (row) { 152 | return row.value === value; 153 | }); 154 | if (!valueDt.find(rowFinder, true)) { 155 | valueDt.add({value: value}); 156 | } 157 | var choices = choicesDt.find(rowFinder); 158 | for (var i = 0; i < choices.length; i++) { 159 | choicesDt.remove(choices[i].id); 160 | } 161 | }, 162 | removeValue: function (val) { 163 | var valueDt = this.$$('value'); 164 | var choicesDt = this.$$('choices'); 165 | var rowFinder = (function (row) { 166 | return row.value === val; 167 | }); 168 | var value = valueDt.find(rowFinder); 169 | if (value.length === 0) { 170 | return; 171 | } 172 | for (var i = 0; i < value.length; i++) { 173 | valueDt.remove(value[i].id); 174 | } 175 | if (!choicesDt.find(rowFinder, true)) { 176 | choicesDt.add({value: val}); 177 | } 178 | } 179 | }, webix.IdSpace, webix.ui.layout); -------------------------------------------------------------------------------- /dndlist/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@wbx/view-dndlist", 3 | "version": "1.0.0", 4 | "description": "Webix Component: Drag & Drop List", 5 | "main": "dndlist.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/webix-hub/components.git" 12 | }, 13 | "keywords": [ 14 | "webix", 15 | "drag-n-drop", 16 | "dnd", 17 | "view" 18 | ], 19 | "author": "Muhammad Lukman", 20 | "license": "MIT", 21 | "bugs": { 22 | "url": "https://github.com/webix-hub/components/issues" 23 | }, 24 | "homepage": "https://github.com/webix-hub/components#readme" 25 | } -------------------------------------------------------------------------------- /dndlist/sample.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |

Webix Component: Drag & Drop List (dndlist)

11 |

By MLukman (https://github.com/MLukman)

12 |
13 |

Parameters:

14 | 15 |
16 |
choices
17 |
Array of strings that user can choose from
18 | 19 |
value
20 |
Array of strings that user have chosen
21 | 22 |
choicesHeader
23 |
The title for the choices list
24 | 25 |
valueHeader
26 |
The title for the selected values
27 | 28 |
swap
29 |
If true, the choices will be on the right and chosen values will be on the left. By default is false, which is choices on the left and chosen values on the right.
30 |
31 | 32 |

p/s: Standard parameters: name, height, label, labelWidth, labelAlign, labelPosition

33 | 34 |

Functions:

35 | 36 |
37 |
setChoices(array)
38 |
Sets the choices
39 | 40 |
addValue(string)
41 |
Add a value to the chosen values list (even if the value is not in the choices list)
42 | 43 |
removeValue(string)
44 |
Remove a value from the chosen values list and add it to the choices list. The value must exist in the chosen list.
45 |
46 | 47 |

p/s: Standard form control functions: getValue(), setValue(array)

48 | 49 | 93 | 94 | 95 | -------------------------------------------------------------------------------- /fabricjs/fabric.js: -------------------------------------------------------------------------------- 1 | webix.protoUI({ 2 | name: "fabric", 3 | $init: function() { 4 | this._waitCanvas = webix.promise.defer(); 5 | this.$ready.push(this.render); 6 | }, 7 | render: function() { 8 | if (this.config.cdn === false) { 9 | webix.delay(this._initCanvas, this); 10 | return; 11 | } 12 | var cdn = this.config.cdn ? this.config.cdn : "https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.4.0"; 13 | webix.require([cdn + "/fabric.min.js"]) 14 | .then(webix.bind(this._initCanvas, this)) 15 | .catch(function(e) { 16 | console.log(e); 17 | }); 18 | }, 19 | _initCanvas: function() { 20 | var elm = webix.html.create("canvas"); 21 | elm.id = this.config.canvas; 22 | this._canvas = this.$view.appendChild(elm); 23 | this._canvas = new fabric.Canvas(this._canvas, { 24 | renderOnAddRemove: false, 25 | selection: false, 26 | preserveObjectStacking: true 27 | }); 28 | this._waitCanvas.resolve(this._canvas); 29 | if (this.config.ready) this.config.ready.call(this, this._canvas); 30 | }, 31 | $setSize: function(x, y) { 32 | webix.ui.view.prototype.$setSize.call(this, x, y); 33 | this._waitCanvas.then(_ => { 34 | this._canvas.setWidth(x); 35 | this._canvas.setHeight(y); 36 | }); 37 | }, 38 | getCanvas: function(waitCanvas) { 39 | return waitCanvas ? this._waitCanvas : this._canvas; 40 | } 41 | }, webix.ui.view); -------------------------------------------------------------------------------- /fabricjs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@wbx/view-fabricjs", 3 | "version": "3.4.0", 4 | "description": "Fabric.js widget as Webix view", 5 | "main": "fabric.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/webix-hub/components.git" 12 | }, 13 | "keywords": [ 14 | "webix", 15 | "fabric", 16 | "canvas", 17 | "vector-graphics", 18 | "view" 19 | ], 20 | "author": "Wenig Web Werkstatt", 21 | "contributors": [ 22 | "Jerry Bruwes (https://w--w--w.com)" 23 | ], 24 | "license": "MIT", 25 | "bugs": { 26 | "url": "https://github.com/webix-hub/components/issues" 27 | }, 28 | "homepage": "https://github.com/webix-hub/components#readme" 29 | } 30 | -------------------------------------------------------------------------------- /fabricjs/sample.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Fabric.js 7 | 8 | 9 | 10 | 45 | 46 | -------------------------------------------------------------------------------- /formeditor/form_editor.css: -------------------------------------------------------------------------------- 1 | .webix_view.webix_form_editor .webix_editor_top{ 2 | position:relative; 3 | } 4 | .webix_view.webix_form_editor .webix_icon.wxi-plus-circle { 5 | color:#475466; 6 | } 7 | .webix_view.webix_form_editor .webix_icon.wxi-trash:hover, 8 | .webix_view.webix_form_editor .webix_icon.wxi-plus-circle:hover { 9 | cursor:pointer; 10 | color:#3498db; 11 | } 12 | .webix_view.webix_form_editor .webix_dtable_subview{ 13 | background-color:initial; 14 | padding-left:0px !important; 15 | } 16 | .webix_view.webix_form_editor .webix_dtable{ 17 | border-width:1px !important; 18 | } 19 | .webix_view.webix_form_editor .webix_ss_footer .webix_hcell{ 20 | background-color:initial; 21 | } 22 | .webix_view.webix_form_editor .webix_ss_footer .webix_icon{ 23 | margin-left:2px; 24 | } 25 | .webix_view.webix_form_editor .group_header{ 26 | border:none; 27 | font-weight:bold; 28 | } 29 | .group_header div{ 30 | padding:10px; 31 | margin-left:10px; 32 | } 33 | .group_header:before{ 34 | position: absolute; 35 | content: "\F001"; 36 | margin-top: 9px; 37 | margin-left: -3px; 38 | font-family:"Webix Awesome Icons"; 39 | font-size:20px; 40 | font-weight:400; 41 | } 42 | .webix_view.webix_form_editor .webix_form .webix_scroll_cont{ 43 | border-width: 0 0 0 2px !important; 44 | border-left: 2px solid #D2E3EF; 45 | } 46 | .webix_view.webix_form_editor .webix_form.webix_editor_top > .webix_scroll_cont{ 47 | border-width: 0px !important; 48 | } 49 | .webix_view.webix_form_editor .webix_el_text{ 50 | margin-left: 14px !important; 51 | } -------------------------------------------------------------------------------- /formeditor/form_editor.js: -------------------------------------------------------------------------------- 1 | webix.i18n.formEditor = { 2 | removeWarning: "You are going to remove this record. Are you sure?", 3 | ok:"OK", 4 | cancel:"Cancel" 5 | }; 6 | 7 | webix.protoUI({ 8 | name:"subform", 9 | defaults:{ 10 | borderless:true, 11 | paddingX:20, 12 | paddingY:0 13 | }, 14 | $init:function(){ 15 | this.attachEvent("onChange", function(newv, oldv){ 16 | if(!this.getParentView().getValue){ 17 | var top = webix.$$(this.config.$editor); 18 | top.callEvent("onChange", [top.getValues()]); 19 | } 20 | }); 21 | }, 22 | $setSize:function(x, y){ 23 | //need only left padding for non-top views 24 | if(!this.config.scroll) 25 | x += this.config.paddingX; 26 | webix.ui.form.prototype.$setSize.call(this, x, y); 27 | }, 28 | clear:function(){ 29 | webix.ui.form.prototype.clear.call(this); 30 | for(var i in this.elements) 31 | if(this.elements[i].clear) 32 | this.elements[i].clear(); 33 | }, 34 | getValue:function(){ 35 | return this.getValues(); 36 | }, 37 | setValue:function(values){ 38 | this.setValues(values); 39 | }, 40 | }, webix.ui.form); 41 | 42 | webix.protoUI({ 43 | name:"subgrid", 44 | defaults:{ paddingY:2 }, 45 | $init:function(){ 46 | this.$ready.push(function(){ 47 | var grid = this.getChildViews()[0]; 48 | grid.data.attachEvent("onStoreUpdated", webix.bind(function(id, obj, operation){ 49 | if(operation && operation !== "paint") 50 | this.callEvent("onChange", [arguments, grid]); 51 | }, this)); 52 | }); 53 | }, 54 | clear:function(){ 55 | this.getChildViews()[0].clearAll(); 56 | }, 57 | getValue:function(){ 58 | return this.getChildViews()[0].serialize(); 59 | }, 60 | setValue:function(values){ 61 | this.getChildViews()[0].parse(values); 62 | } 63 | }, webix.ui.subform); 64 | 65 | webix.protoUI({ 66 | name:"form-editor", 67 | _resizeMaster:function(view){ 68 | webix.delay(function(){ 69 | if(view.getMasterView){ 70 | var master = view.getMasterView(); 71 | if(master){ 72 | master.data.each(function(obj){ 73 | if(obj.$subopen) master.resizeSubView(obj.id); 74 | }); 75 | this._resizeMaster(master); 76 | } 77 | } 78 | else if(view.getParentView()) 79 | this._resizeMaster(view.getParentView()); 80 | else 81 | this.callEvent("onMasterResize", []); 82 | }, this); 83 | }, 84 | _resizeSub:function(){ 85 | for(var i=0; i", colspan:grid.columns.length }; 159 | 160 | grid.onClick = { 161 | "wxi-trash":function(e, id){ 162 | webix.confirm({ 163 | text:webix.i18n.formEditor.removeWarning, 164 | ok:webix.i18n.formEditor.ok, 165 | cancel:webix.i18n.formEditor.cancel, 166 | callback:webix.bind(function(res){ 167 | if(res) this.remove(id.row); 168 | }, this) 169 | }); 170 | }, 171 | "wxi-plus-circle":function(){ 172 | var id = this.add({}); 173 | if(self._isSubView(this)) 174 | self._delayEdit = {view:this, id:id}; 175 | else this.editCell(id); 176 | } 177 | }; 178 | 179 | if(subview.length) this._getSubView(grid, subview); 180 | 181 | var config = { view:"subgrid", rows:[grid], $editor:this.config.id }; 182 | if(name){ 183 | config.name = name; 184 | config.rows[0].autoheight = true; 185 | } 186 | else config.paddingX = 0; 187 | 188 | return config; 189 | }, 190 | _isSubView:function(view){ 191 | var parent = view.getParentView(); 192 | if(parent && parent.getMasterView) 193 | return true; 194 | if(parent) 195 | return this._isSubView(parent); 196 | return false; 197 | }, 198 | _getForm:function(data, name){ 199 | var config = { view:"subform", elements:[], $editor:this.config.id}; 200 | if(name) config.name = name; 201 | else { 202 | config.scroll = true; 203 | config.paddingX = config.paddingY = 7; 204 | } 205 | 206 | for(var i in data){ 207 | if(typeof data[i] === "object" ){ 208 | config.elements.push(this._getTemplate(i)); 209 | if(webix.isArray(data[i])) 210 | el = this._getGrid(data[i], i); 211 | else 212 | el = this._getForm(data[i], i); 213 | } 214 | else 215 | el = { view:"text", name:i, label:this._getLabel(i), value:data[i] }; 216 | 217 | config.elements.push(el); 218 | } 219 | return config; 220 | }, 221 | _getTemplate:function(name){ 222 | return { css:"group_header", autoheight:true, template:this._getLabel(name)}; 223 | }, 224 | _getLabel:function(label){ 225 | return label.charAt(0).toUpperCase() + label.slice(1); 226 | }, 227 | _getConfig:function(data){ 228 | var config = {}; 229 | 230 | if(data && typeof data == "object"){ 231 | if(!webix.isArray(data)) 232 | config = this._getForm(data, null); 233 | else 234 | config = this._getGrid(data); 235 | } 236 | 237 | config.css = "webix_editor_top"; 238 | return config; 239 | }, 240 | _afterInit:function(){ 241 | this.attachEvent("onMasterResize", function(){ 242 | if(this._delayEdit){ 243 | this._delayEdit.view.editCell(this._delayEdit.id); 244 | this._delayEdit = null; 245 | } 246 | }); 247 | }, 248 | _clean:function(obj){ 249 | var clean; 250 | if(webix.isArray(obj)){ 251 | for(var i=0; i 2 | 3 | 4 | Form Editor with Automatic Configuration 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /fusion/data/data.js: -------------------------------------------------------------------------------- 1 | var column2dData = [ 2 | { 3 | "label": "Jan", 4 | "value": "420000" 5 | }, 6 | { 7 | "label": "Feb", 8 | "value": "810000" 9 | }, 10 | { 11 | "label": "Mar", 12 | "value": "720000" 13 | }, 14 | { 15 | "label": "Apr", 16 | "value": "550000" 17 | }, 18 | { 19 | "label": "May", 20 | "value": "910000" 21 | }, 22 | { 23 | "label": "Jun", 24 | "value": "510000" 25 | }, 26 | { 27 | "label": "Jul", 28 | "value": "680000" 29 | }, 30 | { 31 | "label": "Aug", 32 | "value": "620000" 33 | }, 34 | { 35 | "label": "Sep", 36 | "value": "610000" 37 | }, 38 | { 39 | "label": "Oct", 40 | "value": "490000" 41 | }, 42 | { 43 | "label": "Nov", 44 | "value": "900000" 45 | }, 46 | { 47 | "label": "Dec", 48 | "value": "730000" 49 | } 50 | ]; 51 | 52 | var text = ""; 53 | text += "By MLukman (https://github.com/MLukman)"; 54 | text += "

FusionCharts require a licence, so if you have one (or a trial version), simply specify path to the folder as cdn.

"; 55 | text += "

Parameters:

"; 56 | text += "
"; 57 | text += "
cdn
"; 58 | text += "
Absolute path to your FusionChart files. If set to false, it is expected that files were included on the page.
"; 59 | text += "
config
"; 60 | text += "
The FusionCharts initialization config object
"; 61 | text += "
require
"; 62 | text += "
Whether to load up additional JS files or not. Default:"; 63 | text += "
{ charts: true, powercharts: false, widgets: false, gantt: false, maps: false }
"; 64 | text += "
"; 65 | text += "
"; 66 | text += "

Functions:

"; 67 | text += "
"; 68 | text += "
getChart()
"; 69 | text += "
Gets the FusionCharts object
"; 70 | text += "
"; -------------------------------------------------------------------------------- /fusion/fusion.js: -------------------------------------------------------------------------------- 1 | webix.protoUI({ 2 | name:"fusion-chart", 3 | defaults:{ 4 | config:{}, 5 | require: { 6 | charts: true, 7 | powercharts: false, 8 | widgets: false, 9 | gantt: false, 10 | maps: false 11 | } 12 | }, 13 | $init:function(config){ 14 | this._waitChart = webix.promise.defer(); 15 | webix.delay(this._render_once, this); 16 | }, 17 | _render_once: function(){ 18 | 19 | if (this.config.cdn === false){ 20 | this._render_chart(); 21 | return; 22 | }; 23 | 24 | var cdn = this.config.cdn; 25 | var check = cdn || window.FusionCharts; 26 | if (!check) 27 | webix.message({text:"No path to FusionChart sources", type:"error", expire:-1}); 28 | 29 | var sources = []; 30 | 31 | sources.push(cdn+"/fusioncharts.js"); 32 | 33 | for (var req in this.config.require) { 34 | if (this.config.require[req]) { 35 | sources.push(cdn+"/fusioncharts." + req + ".js"); 36 | } 37 | } 38 | 39 | // require theme js files 40 | if (this.config.config.dataSource.chart.theme) { 41 | var themes = this.config.config.dataSource.chart.theme.split(","); 42 | for (var i in themes) { 43 | sources.push(cdn+"/themes/fusioncharts.theme." + themes[i].trim() + ".js"); 44 | } 45 | } 46 | 47 | webix.require(sources) 48 | .then( webix.bind(this._render_chart, this) ) 49 | .catch(function(e){ 50 | console.log(e); 51 | }); 52 | }, 53 | _render_chart:function(){ 54 | var config = this.config.config; 55 | config.renderAt = this.$view; 56 | config.width = this.$width; 57 | config.height = this.$height; 58 | config.dataSource.chart.showBorder = 0; 59 | 60 | this._chart = new FusionCharts(config); 61 | this._chart.render(); 62 | 63 | this._waitChart.resolve(this._chart); 64 | }, 65 | $setSize:function(x,y){ 66 | if (webix.ui.view.prototype.$setSize.call(this,x,y)){ 67 | if (this._chart) { 68 | this._chart.resizeTo(this.$width, this.$height); 69 | } 70 | } 71 | }, 72 | getChart:function(waitChart){ 73 | return waitChart?this._waitChart:this._chart; 74 | } 75 | }, webix.ui.view); -------------------------------------------------------------------------------- /fusion/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@wbx/view-fusion-chart", 3 | "version": "3.12.2", 4 | "description": "FusionCharts as Webix component", 5 | "main": "fusion.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/webix-hub/components.git" 12 | }, 13 | "keywords": [ 14 | "webix", 15 | "fusionchart", 16 | "fusioncharts", 17 | "chart", 18 | "view" 19 | ], 20 | "author": "XB Software", 21 | "license": "MIT", 22 | "bugs": { 23 | "url": "https://github.com/webix-hub/components/issues" 24 | }, 25 | "homepage": "https://github.com/webix-hub/components#readme" 26 | } -------------------------------------------------------------------------------- /fusion/readme.md: -------------------------------------------------------------------------------- 1 | By MLukman (https://github.com/MLukman). 2 | 3 | **FusionCharts require a licence**, so this integration assumes that you have one (or a trial version), to specify path to the folder as `cdn` property. 4 | 5 | ### Parameters: 6 | 7 | - `cdn` 8 | Absolute path to your FusionChart files. If set to false, it is expected that files were included on the page. 9 | - `config` 10 | The FusionCharts initialization config object 11 | - `require` 12 | Whether to load up additional JS files or not. Default: 13 | ``` 14 | { charts: true, powercharts: false, widgets: false, gantt: false, maps: false } 15 | ``` 16 | ### Functions: 17 | 18 | - `getChart()` 19 | Gets the FusionCharts object -------------------------------------------------------------------------------- /fusion/sample.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | FusionCharts 12 | 13 | 14 | 94 | 95 | 96 | -------------------------------------------------------------------------------- /gantt/gantt.js: -------------------------------------------------------------------------------- 1 | webix.protoUI({ 2 | name:"dhx-gantt", 3 | defaults:{ 4 | }, 5 | $init:function(){ 6 | this._waitGantt = webix.promise.defer(); 7 | webix.delay(webix.bind(this._render_once, this)); 8 | }, 9 | getGantt:function(waitGantt){ 10 | return waitGantt ? this._waitGantt : this._gantt; 11 | }, 12 | $setSize: function(x,y){ 13 | if(webix.ui.view.prototype.$setSize.call(this,x,y)){ 14 | if(this._gantt) 15 | this._gantt.render(); 16 | } 17 | }, 18 | _render_once:function(){ 19 | 20 | if (this.config.cdn === false){ 21 | this._after_render_once(); 22 | return; 23 | } 24 | 25 | var cdn = this.config.cdn || "https://cdn.dhtmlx.com/gantt/6.2"; 26 | var skin = this.config.skin; 27 | var sources = []; 28 | 29 | sources.push(cdn+"/dhtmlxgantt.js"); 30 | sources.push(cdn+(skin ? "/skins/dhtmlxgantt_"+skin+".css" : "/dhtmlxgantt.css")); 31 | 32 | webix.require(sources) 33 | .then( webix.bind(this._after_render_once, this) ) 34 | .catch(function(e){ 35 | console.log(e); 36 | }); 37 | }, 38 | _after_render_once:function(){ 39 | var gantt = this._gantt = window.Gantt ? Gantt.getGanttInstance() : window.gantt; 40 | 41 | if (this.config.init) 42 | this.config.init.call(this, gantt); 43 | 44 | gantt.init(this.$view); 45 | if (this.config.ready) 46 | this.config.ready.call(this, gantt); 47 | 48 | this._waitGantt.resolve(gantt); 49 | } 50 | }, webix.ui.view); -------------------------------------------------------------------------------- /gantt/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@wbx/view-dhx-gantt", 3 | "version": "6.2.6", 4 | "description": "DHTMLX gantt as Webix view", 5 | "main": "gantt.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/webix-hub/components.git" 12 | }, 13 | "keywords": [ 14 | "webix", 15 | "dhtmlx", 16 | "gantt", 17 | "view" 18 | ], 19 | "author": "XB Software", 20 | "license": "MIT", 21 | "bugs": { 22 | "url": "https://github.com/webix-hub/components/issues" 23 | }, 24 | "homepage": "https://github.com/webix-hub/components#readme" 25 | } -------------------------------------------------------------------------------- /gantt/sample.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | DHTMLX Gantt Chart in Webix Web Apps 8 | 9 | 10 | 11 | 46 | 47 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /heremap/heremap.js: -------------------------------------------------------------------------------- 1 | webix.protoUI({ 2 | name:"here-map", 3 | defaults:{ 4 | zoom: 5, 5 | center:[ 39.5, -98.5 ], 6 | mapType: {type:"normal", layer:"map"}, 7 | modules:[] 8 | }, 9 | $init:function(config){ 10 | this.$view.innerHTML = "
"; 11 | this._contentobj = this.$view.firstChild; 12 | 13 | this._map = null; 14 | this._waitMap = webix.promise.defer(); 15 | 16 | webix.delay(this.render, this); //let it paint 17 | }, 18 | render:function(){ 19 | 20 | if(window.H && window.H.map){ 21 | this._initMap(); 22 | return; 23 | }; 24 | 25 | var cdn = "https://js.api.here.com/v3/3.1"; 26 | var sources = [ 27 | cdn+"/mapsjs-core.js", 28 | cdn+"/mapsjs-service.js" 29 | ]; 30 | 31 | var modules = this.config.modules; 32 | for (var i=0; i 2 | 3 | 4 | 5 | 6 | 7 | Here Map 8 | 9 | 10 | 44 | 45 | -------------------------------------------------------------------------------- /highcharts/hcharts.js: -------------------------------------------------------------------------------- 1 | webix.protoUI({ 2 | name:"highchart", 3 | defaults:{ 4 | modules:[] 5 | }, 6 | $init:function(){ 7 | this.uid = "chart"+webix.uid(); 8 | this.$view.innerHTML = "
"; 9 | 10 | this._chart = null; 11 | this._waitChart = webix.promise.defer(); 12 | this.$ready.push(this._request_sources); 13 | }, 14 | _request_sources:function(){ 15 | var c = this.config; 16 | if (c.cdn === false){ 17 | webix.delay(this._render, this); 18 | return; 19 | }; 20 | 21 | var cdn = c.cdn || "https://code.highcharts.com/11.3.0"; 22 | 23 | var sources = []; 24 | 25 | sources.push(cdn+"/highcharts.js"); 26 | 27 | // get theme 28 | var styledMode = c.settings && c.settings.chart && c.settings.chart.styledMode; 29 | if (styledMode){ 30 | sources.push(cdn + "/css/highcharts.css"); 31 | }; 32 | if (c.theme){ 33 | var theme_url = cdn; 34 | if (styledMode){ 35 | theme_url += "/css/themes/" + c.theme + ".css"; 36 | } else { 37 | theme_url += "/themes/" + c.theme + ".js"; 38 | } 39 | sources.push(theme_url); 40 | }; 41 | 42 | // get highcharts-more and 3D 43 | if (c.more) 44 | sources.push(cdn+"/highcharts-more.js"); 45 | var expect3d = c.settings && c.settings.chart && c.settings.chart.options3d; 46 | if (c.enable3d || expect3d) 47 | sources.push(cdn+"/highcharts-3d.js"); 48 | 49 | // get modules 50 | var mod = c.modules; 51 | for (var i = 0; i < mod.length; i++){ 52 | sources.push(cdn + "/modules/" + mod[i] + ".js"); 53 | }; 54 | 55 | webix.require(sources) 56 | .then(webix.bind( this._render, this )) 57 | .catch(function(e){ 58 | this._waitChart.reject(e); 59 | }); 60 | }, 61 | _render:function(){ 62 | var config = this.config.settings; 63 | this._chart = Highcharts.chart(this.$view.firstChild, config); 64 | this._waitChart.resolve(this._chart); 65 | }, 66 | $setSize:function(x,y){ 67 | if (webix.ui.view.prototype.$setSize.call(this,x,y)){ 68 | if (this._chart) { 69 | this._chart.setSize(this.$width, this.$height, false); 70 | } 71 | } 72 | }, 73 | getChart:function(wait){ 74 | return wait ? this._waitChart : this._chart; 75 | } 76 | }, webix.ui.view); -------------------------------------------------------------------------------- /highcharts/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@wbx/view-highchart", 3 | "version": "11.3.0", 4 | "description": "Highcharts as Webix component", 5 | "main": "hchart.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/webix-hub/components.git" 12 | }, 13 | "keywords": [ 14 | "webix", 15 | "highchart", 16 | "highcharts", 17 | "chart", 18 | "view" 19 | ], 20 | "author": "XB Software", 21 | "license": "MIT", 22 | "bugs": { 23 | "url": "https://github.com/webix-hub/components/issues" 24 | }, 25 | "homepage": "https://github.com/webix-hub/components#readme" 26 | } -------------------------------------------------------------------------------- /highcharts/sample.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Highcharts in Webix 9 | 10 | 11 | 12 | 69 | 70 | -------------------------------------------------------------------------------- /hipchat/hipchat.js: -------------------------------------------------------------------------------- 1 | webix.protoUI({ 2 | name:"hipchat", 3 | $init:function(config){ 4 | //configuration params 5 | var params = [ 6 | "anonymous=true", 7 | "minimal=true", 8 | "timezone="+config.timezone, 9 | "welcome_msg="+(config.welcome_msg||"Welcome to Webix Hub Chat") 10 | ]; 11 | 12 | //building full url 13 | var url = config.url + (config.url.indexOf("?") > 0 ? "&" : "?") + params.join("&"); 14 | if (url.indexOf("https://") !== 0) 15 | url = "https://" + url; 16 | 17 | //loading the hipchat 18 | this.$view.innerHTML = ""; 19 | }, 20 | }, webix.ui.view); -------------------------------------------------------------------------------- /hipchat/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@wbx/view-hipchat", 3 | "version": "1.0.0", 4 | "description": "Hipchat as Webix view", 5 | "main": "hipchat.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/webix-hub/components.git" 12 | }, 13 | "keywords": [ 14 | "webix", 15 | "hipchat", 16 | "chat", 17 | "view" 18 | ], 19 | "author": "XB Software", 20 | "license": "MIT", 21 | "bugs": { 22 | "url": "https://github.com/webix-hub/components/issues" 23 | }, 24 | "homepage": "https://github.com/webix-hub/components#readme" 25 | } -------------------------------------------------------------------------------- /hipchat/sample.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 17 | 18 | -------------------------------------------------------------------------------- /justgage/justgage.js: -------------------------------------------------------------------------------- 1 | webix.protoUI({ 2 | name:'justgage-chart', 3 | $init:function(config){ 4 | this._waitChart = webix.promise.defer(); 5 | this.$ready.push(this._request_and_render); 6 | }, 7 | defaults:{ 8 | minHeight:100, 9 | minWidth:200, 10 | min:0, 11 | max:100 12 | }, 13 | _request_and_render:function(){ 14 | 15 | if (this.config.cdn === false){ 16 | // justGage uses document.getElementById, so ensure the rendering is finished 17 | webix.delay(this._render_after_load, this); 18 | return; 19 | }; 20 | 21 | var cdn = this.config.cdn ? this.config.cdn : "https://cdnjs.cloudflare.com/ajax/libs/justgage/1.3.1"; 22 | 23 | var sources = []; 24 | 25 | sources.push("https://cdnjs.cloudflare.com/ajax/libs/raphael/2.2.8/raphael.min.js"); 26 | sources.push(cdn+"/justgage.js"); 27 | 28 | webix.require(sources) 29 | .then(webix.bind( this._render_after_load, this )) 30 | .catch(function(e){ 31 | console.log(e); 32 | }); 33 | }, 34 | _render_after_load:function(){ 35 | var temp_id = this.config.id+"_"+webix.uid(); 36 | 37 | this.$view.innerHTML= "
"; 38 | var gage_config = webix.extend({}, this.config); 39 | gage_config.id = temp_id; 40 | gage_config.relativeGaugeSize = true; 41 | 42 | this._chart = new JustGage(gage_config); 43 | 44 | this._waitChart.resolve(this._chart); 45 | }, 46 | setValue:function(value){ 47 | this.config.value=value; 48 | this._chart.refresh(value, this.config.max); 49 | }, 50 | getValue:function(){ 51 | return this.config.value; 52 | }, 53 | getChart:function(waitChart){ 54 | return waitChart ? this._waitChart : this._chart; 55 | } 56 | },webix.ui.view); -------------------------------------------------------------------------------- /justgage/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@wbx/view-justgage-chart", 3 | "version": "1.3.1", 4 | "description": "JustGage as Webix view", 5 | "main": "justgage.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/webix-hub/components.git" 12 | }, 13 | "keywords": [ 14 | "webix", 15 | "justgage", 16 | "gauge", 17 | "chart", 18 | "view" 19 | ], 20 | "author": "XB Software", 21 | "license": "MIT", 22 | "bugs": { 23 | "url": "https://github.com/webix-hub/components/issues" 24 | }, 25 | "homepage": "https://github.com/webix-hub/components#readme" 26 | } -------------------------------------------------------------------------------- /justgage/sample.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Raphael Just Gage 8 | 9 | 10 | 11 |
12 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /konva/konva.js: -------------------------------------------------------------------------------- 1 | webix.protoUI({ 2 | name:"konva", 3 | $init:function(){ 4 | this._waitStage = webix.promise.defer(); 5 | this.$ready.push(this.render); 6 | }, 7 | render:function(){ 8 | 9 | if(this.config.cdn == false){ 10 | webix.delay(this._initStage, this); 11 | return; 12 | } 13 | 14 | var cdn = this.config.cdn ? this.config.cdn : "https://unpkg.com/konva@4.0.13"; 15 | webix.require([ 16 | cdn+"/konva.min.js" 17 | ]) 18 | .then( webix.bind(this._initStage, this) ) 19 | .catch(function(e){ 20 | console.log(e) 21 | }); 22 | }, 23 | _initStage:function(){ 24 | this._stage = new Konva.Stage({ 25 | container: this.$view 26 | }); 27 | this._waitStage.resolve(this._stage); 28 | 29 | if (this.config.ready) 30 | this.config.ready.call(this, this._stage); 31 | }, 32 | $setSize:function(x,y){ 33 | if (webix.ui.view.prototype.$setSize.call(this, x,y)){ 34 | this._waitStage.then(function(stage){ 35 | stage.size({ width:x, height:y }); 36 | }); 37 | } 38 | }, 39 | getStage:function(waitStage){ 40 | return waitStage?this._waitStage:this._stage; 41 | } 42 | }, webix.ui.view); -------------------------------------------------------------------------------- /konva/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@wbx/view-konva", 3 | "version": "4.0.13", 4 | "description": "Konva widget as Webix view", 5 | "main": "konva.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/webix-hub/components.git" 12 | }, 13 | "keywords": [ 14 | "webix", 15 | "canvas", 16 | "konva", 17 | "view" 18 | ], 19 | "author": "XB Software", 20 | "license": "MIT", 21 | "bugs": { 22 | "url": "https://github.com/webix-hub/components/issues" 23 | }, 24 | "homepage": "https://github.com/webix-hub/components#readme" 25 | } -------------------------------------------------------------------------------- /konva/sample.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Konva 8 | 9 | 10 | 11 | 101 | 102 | -------------------------------------------------------------------------------- /monaco/monaco.js: -------------------------------------------------------------------------------- 1 | webix.protoUI({ 2 | name:"monaco-editor", 3 | defaults:{ 4 | language:"javascript" 5 | }, 6 | $init:function(config){ 7 | this._waitEditor = webix.promise.defer(); 8 | this.$ready.push(this._render_editor); 9 | }, 10 | _render_editor:function(){ 11 | 12 | if (this.config.cdn === false){ 13 | this._render_when_ready(); 14 | return; 15 | }; 16 | 17 | var cdn = this.config.cdn || "https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.18.0/min/"; 18 | 19 | webix.require(cdn + "vs/loader.js") 20 | .then(webix.bind(function(){ 21 | require.config({ paths: { 'vs': cdn+"vs/" }}); 22 | window.MonacoEnvironment = { 23 | getWorkerUrl: function(workerId, label) { 24 | return "data:text/javascript;charset=utf-8,"+ 25 | encodeURIComponent("self.MonacoEnvironment = { baseUrl: '"+cdn+"' }; importScripts('"+cdn+"/vs/base/worker/workerMain.js');"); 26 | } 27 | }; 28 | 29 | this._render_when_ready(); 30 | }, this)) 31 | .catch(console.log); 32 | }, 33 | _render_when_ready:function(){ 34 | require(["vs/editor/editor.main"], webix.bind(function () { 35 | var config = webix.copy(this.config); 36 | this._editor = monaco.editor.create(this.$view, config); 37 | 38 | this._waitEditor.resolve(this._editor); 39 | }, this)); 40 | 41 | if (this._focus_await) 42 | this._editor.focus(); 43 | }, 44 | $setSize:function(x,y){ 45 | if (webix.ui.view.prototype.$setSize.call(this, x, y) && this._editor){ 46 | this._editor.layout() 47 | } 48 | }, 49 | setValue:function(value){ 50 | if(!value && value !== 0) 51 | value = ""; 52 | 53 | this.config.value = value; 54 | if(this._editor){ 55 | this._editor.setValue(value); 56 | } 57 | }, 58 | getValue:function(){ 59 | return this._editor?this._editor.getValue():this.config.value; 60 | }, 61 | focus:function(){ 62 | this._focus_await = true; 63 | if (this._editor) 64 | this._editor.focus(); 65 | }, 66 | getEditor:function(waitEditor){ 67 | return waitEditor?this._waitEditor:this._editor; 68 | } 69 | }, webix.ui.view); -------------------------------------------------------------------------------- /monaco/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@wbx/view-monaco-editor", 3 | "version": "0.18.0", 4 | "description": "monaco as Webix view", 5 | "main": "monaco.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/webix-hub/components.git" 12 | }, 13 | "keywords": [ 14 | "webix", 15 | "monaco", 16 | "editor", 17 | "view" 18 | ], 19 | "author": "XB Software", 20 | "license": "MIT", 21 | "bugs": { 22 | "url": "https://github.com/webix-hub/components/issues" 23 | }, 24 | "homepage": "https://github.com/webix-hub/components#readme" 25 | } -------------------------------------------------------------------------------- /monaco/sample.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 33 | 34 | -------------------------------------------------------------------------------- /nicedit/nicedit.js: -------------------------------------------------------------------------------- 1 | webix.protoUI({ 2 | name:"nic-editor", 3 | defaults:{ 4 | config:{ }, 5 | value:"" 6 | }, 7 | $init:function(config){ 8 | this.$view.innerHTML = "
Loading...
"; 9 | this.$view.className += " webix_selectable"; 10 | 11 | this._waitEditor = webix.promise.defer(); 12 | this.$ready.push(this._init_nic_editor); 13 | }, 14 | _init_nic_editor:function(){ 15 | 16 | if (this.config.cdn === false){ 17 | this._render_nic_editor(); 18 | return; 19 | }; 20 | 21 | var sources = []; 22 | 23 | var cdn = this.config.cdn ? this.config.cdn : "https://cdnjs.cloudflare.com/ajax/libs/NicEdit/0.93"; 24 | 25 | sources.push(cdn+"/nicEdit.js"); 26 | 27 | if (!this.config.config.iconsPath) 28 | this.config.config.iconsPath = cdn+"/nicEditorIcons.gif"; 29 | 30 | webix.require(sources) 31 | .then(webix.bind(this._render_nic_editor, this)) 32 | .catch(function(e){ 33 | console.log(e); 34 | }); 35 | }, 36 | _render_nic_editor:function(){ 37 | if (!this._editorCss){ 38 | var style = ".nicEdit-panel{height:auto}\n"; 39 | style += ".nicEdit-panelContain{border-top-width:0px !important;}\n"; 40 | style += ".webix_selectable>div:nth-child(2){overflow-y:auto;}"; 41 | webix.html.addStyle(style); 42 | this._editorCss = true; 43 | } 44 | 45 | var nic = new nicEditor(this.config.config).panelInstance(this.$view.firstChild); 46 | this._editor = nic.nicInstances[nic.nicInstances.length-1]; 47 | this._set_inner_size(); 48 | 49 | this._waitEditor.resolve(this._editor); 50 | 51 | this.setValue(this.config.value); 52 | if (this._focus_await) 53 | this.focus(); 54 | }, 55 | _set_inner_size:function(){ 56 | if (!this._editor || !this.$width) return; 57 | 58 | var editorView = this.$view; 59 | var toolbar = editorView.firstChild; 60 | 61 | toolbar.style.width = this.$width+"px"; 62 | 63 | var toolbarHeight = toolbar.clientHeight || 0; 64 | var editor = toolbar.nextSibling; 65 | 66 | editor.style.width = (this.$width-20)+"px"; //2x10 - padding 67 | editor.style.height = (this.$height-20-toolbarHeight)+"px"; //2x10 padding + header with borders 68 | }, 69 | $setSize:function(x,y){ 70 | if (webix.ui.view.prototype.$setSize.call(this, x, y)){ 71 | this._set_inner_size(); 72 | } 73 | }, 74 | setValue:function(value){ 75 | this.config.value = value; 76 | if (this._editor) 77 | this._editor.setContent(value); 78 | }, 79 | getValue:function(){ 80 | return this._editor?this._editor.getContent():this.config.value; 81 | }, 82 | focus:function(){ 83 | this._focus_await = true; 84 | if (this._editor) 85 | this._editor.elm.focus(); 86 | }, 87 | getEditor:function(waitEditor){ 88 | return waitEditor?this._waitEditor:this._editor; 89 | } 90 | }, webix.ui.view); -------------------------------------------------------------------------------- /nicedit/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@wbx/view-nic-editor", 3 | "version": "0.93.1", 4 | "description": "NicEdit editor as Webix view", 5 | "main": "nicedit.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/webix-hub/components.git" 12 | }, 13 | "keywords": [ 14 | "webix", 15 | "nicedit", 16 | "editor", 17 | "view" 18 | ], 19 | "author": "XB Software", 20 | "license": "MIT", 21 | "bugs": { 22 | "url": "https://github.com/webix-hub/components/issues" 23 | }, 24 | "homepage": "https://github.com/webix-hub/components#readme" 25 | } -------------------------------------------------------------------------------- /nicedit/sample.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 38 | 39 | -------------------------------------------------------------------------------- /openmap/openmap.js: -------------------------------------------------------------------------------- 1 | webix.protoUI({ 2 | name:"open-map", 3 | defaults:{ 4 | zoom: 5, 5 | center:[ 39.5, -98.5 ], 6 | layer:"http://{s}.tile.osm.org/{z}/{x}/{y}.png", 7 | attribution: 'Map data © OpenStreetMap' 8 | }, 9 | $init:function(){ 10 | this.$view.innerHTML = "
"; 11 | this._contentobj = this.$view.firstChild; 12 | 13 | this._waitMap = webix.promise.defer(); 14 | this.$ready.push(this.render); 15 | 16 | // do not call Webix Touch handlers on the map 17 | webix.event(this.$view, "touchstart", function(e){ 18 | e.cancelBubble = true; 19 | }); 20 | }, 21 | getMap:function(waitMap){ 22 | return waitMap?this._waitMap:this._map; 23 | }, 24 | render:function(){ 25 | if (this.config.cdn === false && (!window.L || !window.L.map)){ 26 | this._initMap(); 27 | return; 28 | }; 29 | 30 | var cdn = this.config.cdn ? this.config.cdn : "https://unpkg.com/leaflet@1.5.1/dist"; 31 | 32 | webix.require([ 33 | cdn+"/leaflet.js", 34 | cdn+"/leaflet.css" 35 | ]) 36 | .then( webix.bind(this._initMap, this) ) 37 | .catch(function(e){ 38 | console.log(e); 39 | }); 40 | 41 | }, 42 | _initMap:function(define){ 43 | var c = this.config; 44 | 45 | if(this.isVisible(c.id)){ 46 | 47 | this._map = L.map(this._contentobj); 48 | this._map.setView(c.center, c.zoom); 49 | L.tileLayer(c.layer, { 50 | attribution: c.attribution 51 | }).addTo(this._map); 52 | 53 | this._waitMap.resolve(this._map); 54 | } 55 | }, 56 | center_setter:function(config){ 57 | if(this._map) 58 | this._map.panTo(config); 59 | return config; 60 | }, 61 | mapType_setter:function(config){ 62 | if(this._map) 63 | this._map.setType(config); 64 | 65 | return config; 66 | }, 67 | zoom_setter:function(config){ 68 | if(this._map) 69 | this._map.setZoom(config); 70 | 71 | return config; 72 | }, 73 | $setSize:function(){ 74 | webix.ui.view.prototype.$setSize.apply(this, arguments); 75 | if(this._map) 76 | this._map.invalidateSize(); 77 | } 78 | }, webix.ui.view, webix.EventSystem); 79 | -------------------------------------------------------------------------------- /openmap/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@wbx/view-open-map", 3 | "version": "1.5.1", 4 | "description": "Leaflet OpenStreet map as Webix view", 5 | "main": "openmap.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/webix-hub/components.git" 12 | }, 13 | "keywords": [ 14 | "webix", 15 | "openstreet", 16 | "leaflet", 17 | "map", 18 | "view" 19 | ], 20 | "author": "XB Software", 21 | "license": "MIT", 22 | "bugs": { 23 | "url": "https://github.com/webix-hub/components/issues" 24 | }, 25 | "homepage": "https://github.com/webix-hub/components#readme" 26 | } -------------------------------------------------------------------------------- /openmap/sample.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Open map integration 9 | 10 | 11 |
12 | 22 | 23 | -------------------------------------------------------------------------------- /paper/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@wbx/view-paper", 3 | "version": "0.12.2", 4 | "description": "Paper.js widget as Webix view", 5 | "main": "paper.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/webix-hub/components.git" 12 | }, 13 | "keywords": [ 14 | "webix", 15 | "paper", 16 | "canvas", 17 | "vector-graphics", 18 | "view" 19 | ], 20 | "author": "XB Software", 21 | "license": "MIT", 22 | "bugs": { 23 | "url": "https://github.com/webix-hub/components/issues" 24 | }, 25 | "homepage": "https://github.com/webix-hub/components#readme" 26 | } -------------------------------------------------------------------------------- /paper/paper.js: -------------------------------------------------------------------------------- 1 | webix.protoUI({ 2 | name:"paper", 3 | $init:function(config){ 4 | var elm = document.createElement("canvas"); 5 | elm.id = config.canvas; 6 | // elm.resize = true; 7 | this._canvas = this.$view.appendChild(elm); 8 | 9 | if (this.config.cdn === false) 10 | return; 11 | 12 | var cdn = this.config.cdn ? this.config.cdn : "https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.12.2" 13 | webix.require([cdn + "/paper-full.js"]) 14 | .then(webix.bind(this._init_paper, this)) 15 | .catch(function(e){ 16 | console.log(e); 17 | }); 18 | }, 19 | _init_paper:function(){ 20 | paper.install(window); 21 | paper.setup(this._canvas); 22 | this.config.ready.call(this); 23 | }, 24 | getView:function(){ 25 | return paper.project.getView(this._canvas.id); 26 | }, 27 | $setSize:function(x,y){ 28 | if (webix.ui.view.prototype.$setSize.call(this, x,y)){ 29 | this._canvas.width = x; 30 | this._canvas.height = y; 31 | if (window.paper){ 32 | this.getView().setViewSize(x,y); 33 | }; 34 | } 35 | } 36 | }, webix.ui.view, webix.EventSystem); -------------------------------------------------------------------------------- /paper/sample.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Paper 7 | 8 | 9 | 10 | 11 | 12 | 71 | 72 | 73 | 74 | -------------------------------------------------------------------------------- /plyr/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@wbx/view-plyr", 3 | "version": "3.5.10-c", 4 | "description": "Plyr player as Webix view", 5 | "main": "plyr.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/webix-hub/components.git" 12 | }, 13 | "keywords": [ 14 | "webix", 15 | "plyr", 16 | "html5 video", 17 | "html5 audio", 18 | "youtube", 19 | "vimeo", 20 | "video player", 21 | "web audio" 22 | ], 23 | "author": "XB Software", 24 | "license": "MIT", 25 | "bugs": { 26 | "url": "https://github.com/webix-hub/components/issues" 27 | }, 28 | "homepage": "https://github.com/webix-hub/components#readme" 29 | } -------------------------------------------------------------------------------- /plyr/plyr.js: -------------------------------------------------------------------------------- 1 | webix.protoUI({ 2 | name:"plyr-player", 3 | defaults:{ 4 | config:{}, 5 | source:{} 6 | }, 7 | $init:function(){ 8 | this.$view.innerHTML = '
'; 9 | this._container = this.$view.firstChild.firstChild; 10 | // visibility of tooltips and popup menu 11 | this.$view.style.overflow = "visible"; 12 | 13 | this._waitView = webix.promise.defer(); 14 | this.$ready.push(this.render); 15 | }, 16 | getPlayer:function(wait){ 17 | return wait?this._waitView:this._player; 18 | }, 19 | render:function(){ 20 | if (this.config.cdn === false || window.Plyr){ 21 | this._initPlyr(); 22 | return; 23 | }; 24 | 25 | var cdn = this.config.cdn ? this.config.cdn : "https://cdn.plyr.io/3.5.10"; 26 | 27 | webix.require([ 28 | cdn+"/plyr.js", 29 | cdn+"/plyr.css" 30 | ]) 31 | .then( webix.bind(this._initPlyr, this) ) 32 | .catch(function(e){ 33 | console.log(e); 34 | }); 35 | 36 | }, 37 | _initPlyr:function(){ 38 | if (this.$view){ 39 | var options = webix.extend({}, this.config.config); 40 | this._player = new Plyr(this._container, options); 41 | this._player.elements.container.setAttribute("tabindex", "-1"); 42 | // ensure proper desctruction 43 | this.attachEvent("onDestroy", function(){ 44 | if (this._player){ 45 | this._player.destroy(); 46 | } 47 | }); 48 | this._waitView.resolve(this._player); 49 | 50 | this._player.on("canplay", webix.bind(function(){ 51 | if (this._player.media){ 52 | // prevent focusing on media tag outside the expected UI 53 | this._player.media.setAttribute("tabindex", "-1"); 54 | this._normalizeRatio(); 55 | } 56 | }, this)); 57 | this._player.on("ready", webix.bind(function(){ 58 | if (this.$view){ 59 | // allow width less than 200px 60 | this.$view.querySelector(".plyr--full-ui").style["min-width"] = "0px"; 61 | this._normalizeRatio(); 62 | } 63 | }, this)); 64 | } 65 | }, 66 | $setSize:function(x,y){ 67 | this.$view.firstChild.style.width = x+"px"; 68 | this.$view.firstChild.style.height = (y-2)+"px"; 69 | if (this._player) 70 | this._normalizeRatio(x, y); 71 | }, 72 | source_setter:function(value){ 73 | this._waitView.then(function(player){ 74 | if (value) 75 | player.source = value; 76 | }); 77 | }, 78 | getPlyr:function(wait){ 79 | return wait ? this._waitView : this._player; 80 | }, 81 | _gcdRatio:function(x, y){ 82 | x = Math.abs(x); 83 | y = Math.abs(y); 84 | while(y) { 85 | var t = y; 86 | y = x % y; 87 | x = t; 88 | } 89 | return x; 90 | }, 91 | _normalizeRatio:function(x, y){ 92 | if (this.$view){ 93 | x = x || this.$view.clientWidth; 94 | y = y || this.$view.clientHeight; 95 | var div = this._gcdRatio(x, y), 96 | ratioX = (x/div).toString(), 97 | ratioY = (y/div).toString(), 98 | ratio = ratioX+":"+ratioY; 99 | this._player.ratio = ratio; 100 | } 101 | } 102 | }, webix.ui.view, webix.EventSystem); -------------------------------------------------------------------------------- /plyr/sample.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 6 | Plyr 7 | 8 | 9 | 10 | 11 | 12 | 92 | 93 | 94 | 95 | -------------------------------------------------------------------------------- /raphael/data/chart.json: -------------------------------------------------------------------------------- 1 | { 2 | "numbers": [null, null, null, null, 23, null, null, null, null, 40, null, 15, 10, null, 17, null, 14, 12, 20, 16, null, null, 5, 28, 35, 11, null, 2, 35, null, 22, null, null, 4, 3, null, 29, 5, 34, null, null, 26, null, null, null, null, 29, 8, null, 31, null, 19, 35, null, null, null, null, 1, 20, null, null, 21, 7, 5, 17, 23, 9, null, 6, null, 38, 27, 12, null, null, null, 37, 23, 17, null, 32, null, null, 7, null, null, 27, null, null, 18, null, 1, null, 39, 3, null, null, null, null, null, 17, 30, null, 2, 27, 22, null, null, null, null, 40, 38, 8, null, null, 8, null, 9, null, 38, null, null, 18, 15, 38, null, null, null, 24, null, 30, null, 10, null, null, null, 20, 30, null, null, 34, null, null, 30, null, 11, 30, null, null, 20, 3, null, null, null, 26, 3, 28, 23, null, null, null, 21, null, null, null, 20, null, null], 3 | "axisx": ["12am", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12pm", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11"], 4 | "axisy": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"] 5 | } -------------------------------------------------------------------------------- /raphael/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@wbx/view-raphael-chart", 3 | "version": "2.3.0", 4 | "description": "Raphael chart widget as Webix view", 5 | "main": "raphael.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/webix-hub/components.git" 12 | }, 13 | "keywords": [ 14 | "webix", 15 | "raphael", 16 | "chart", 17 | "view" 18 | ], 19 | "author": "XB Software", 20 | "license": "MIT", 21 | "bugs": { 22 | "url": "https://github.com/webix-hub/components/issues" 23 | }, 24 | "homepage": "https://github.com/webix-hub/components#readme" 25 | } -------------------------------------------------------------------------------- /raphael/raphael.js: -------------------------------------------------------------------------------- 1 | webix.protoUI({ 2 | name:"raphael-chart", 3 | defaults:{ 4 | }, 5 | $init:function(){ 6 | this._ready_awaits = 0; 7 | this._waitChart = webix.promise.defer(); 8 | 9 | this.attachEvent("onAfterLoad",function(){ 10 | if (this._ready_awaits == 2){ 11 | if (this.config.ready){ 12 | this.config.ready.call(this, this.data); 13 | this._ready_awaits = 3; 14 | } 15 | } else this._ready_awaits = 1; 16 | }); 17 | 18 | webix.delay(this._require_once, this); 19 | }, 20 | _require_once:function(){ 21 | if (this.config.cdn === false){ 22 | this._render_once(); 23 | return; 24 | }; 25 | 26 | var cdn = this.config.cdn ? this.config.cdn : "https://cdnjs.cloudflare.com/ajax/libs/raphael/2.3.0"; 27 | 28 | webix.require([ 29 | cdn + "/raphael.min.js" 30 | ]) 31 | .then(webix.bind(this._render_once, this)) 32 | .catch(function(e){ 33 | console.log(e); 34 | }); 35 | }, 36 | _render_once:function(){ 37 | this._chart = Raphael(this.$view, this.$width, this.$height); 38 | 39 | if (this.config.init) 40 | this.config.init.call(this); 41 | if (this._ready_awaits == 1 && this.config.ready){ 42 | this.config.ready.call(this, this.data); 43 | this._ready_awaits = 3; 44 | } else 45 | this._ready_awaits = 2; 46 | 47 | this._waitChart.resolve(this._chart); 48 | }, 49 | $setSize:function(x,y){ 50 | if (webix.ui.view.prototype.$setSize.call(this,x,y)){ 51 | if (this._ready_awaits == 3 && this.config.resize){ 52 | if (this._chart) { 53 | this._chart.setSize(this.$width, this.$height); 54 | this._chart.clear(); 55 | } 56 | this.config.ready.call(this, this.data); 57 | } 58 | } 59 | }, 60 | getChart:function(waitChart){ 61 | return waitChart?this._waitChart:this._chart; 62 | } 63 | }, webix.AtomDataLoader, webix.EventSystem, webix.ui.view ); -------------------------------------------------------------------------------- /raphael/sample.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Raphael Chart 8 | 9 | 10 | 11 | 95 | 96 | -------------------------------------------------------------------------------- /ribbon/images/copy.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webix-hub/components/d2bff5ac185935e93efff5914057e9116c63b962/ribbon/images/copy.gif -------------------------------------------------------------------------------- /ribbon/images/cut.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webix-hub/components/d2bff5ac185935e93efff5914057e9116c63b962/ribbon/images/cut.gif -------------------------------------------------------------------------------- /ribbon/images/new.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webix-hub/components/d2bff5ac185935e93efff5914057e9116c63b962/ribbon/images/new.JPG -------------------------------------------------------------------------------- /ribbon/images/open.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webix-hub/components/d2bff5ac185935e93efff5914057e9116c63b962/ribbon/images/open.gif -------------------------------------------------------------------------------- /ribbon/images/paste.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webix-hub/components/d2bff5ac185935e93efff5914057e9116c63b962/ribbon/images/paste.gif -------------------------------------------------------------------------------- /ribbon/images/print.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webix-hub/components/d2bff5ac185935e93efff5914057e9116c63b962/ribbon/images/print.JPG -------------------------------------------------------------------------------- /ribbon/images/redo.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webix-hub/components/d2bff5ac185935e93efff5914057e9116c63b962/ribbon/images/redo.JPG -------------------------------------------------------------------------------- /ribbon/images/save.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webix-hub/components/d2bff5ac185935e93efff5914057e9116c63b962/ribbon/images/save.gif -------------------------------------------------------------------------------- /ribbon/images/undo.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webix-hub/components/d2bff5ac185935e93efff5914057e9116c63b962/ribbon/images/undo.JPG -------------------------------------------------------------------------------- /ribbon/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@wbx/view-ribbon", 3 | "version": "1.0.1", 4 | "description": "Webix Ribbon widget", 5 | "main": "ribbon.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/webix-hub/components.git" 12 | }, 13 | "keywords": [ 14 | "webix", 15 | "ribbon", 16 | "view" 17 | ], 18 | "author": "XB Software", 19 | "license": "MIT", 20 | "bugs": { 21 | "url": "https://github.com/webix-hub/components/issues" 22 | }, 23 | "homepage": "https://github.com/webix-hub/components#readme" 24 | } -------------------------------------------------------------------------------- /ribbon/ribbon.css: -------------------------------------------------------------------------------- 1 | .webix_ribbon .webix_control.webix_el_label{ 2 | color:#999; 3 | text-align:center; 4 | } 5 | .webix_ribbon .webix_view{ 6 | background-color:#f4f4f4 !important; 7 | color:#666; 8 | } 9 | .webix_ribbon .webix_after_all_tabs{ 10 | height:0px !important; 11 | } 12 | .webix_ribbon .webix_tab_filler{ 13 | background-color:#eee; 14 | } 15 | .webix_ribbon div.webix_item_tab{ 16 | background-color:#eee; 17 | color:#666; 18 | border-color:#ddd; 19 | border-left-width:1px; 20 | } 21 | .webix_ribbon div.webix_item_tab.webix_selected { 22 | background-color:transparent; 23 | } 24 | .webix_ribbon .webix_el_combo span{ 25 | background-color:#888; 26 | } -------------------------------------------------------------------------------- /ribbon/ribbon.js: -------------------------------------------------------------------------------- 1 | webix.protoUI({ 2 | name:"ribbon", 3 | defaults:{ 4 | type:"line" 5 | }, 6 | $init:function(config){ 7 | if(config.tabs && config.tabs.length) config.cols = [this._getTabview(config.tabs)]; 8 | else if (config.items && config.items.length) webix.extend(config, this._getItems(config.items, "cols", true), true); 9 | 10 | this.$view.className += " webix_ribbon"; 11 | this.$ready.push(this._setActions); 12 | }, 13 | tabs_setter:function(value){}, 14 | items_setter:function(value){}, 15 | _setActions:function(){ 16 | this.attachEvent("onItemClick", function(){ 17 | var view = this.$eventSource; 18 | if(view.name == "button" || view.name == "icon") 19 | this.callEvent("onAction", [view.config.name, view.config.value]); 20 | }); 21 | this.attachEvent("onChange", function(newv, oldv){ 22 | var view = this.$eventSource; 23 | this.callEvent("onAction", [view.config.name, newv, oldv]); 24 | }); 25 | }, 26 | _getTabview:function(tabs){ 27 | var config = { view:"tabview", cells: [], tabbar:{optionWidth:100}, multiview:{fitBiggest:true} }; 28 | for(var i = 0; i 2 | 3 | 4 | Webix Ribbon::Plain 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 56 | 57 | 58 | 59 | 60 | 61 | -------------------------------------------------------------------------------- /ribbon/sample_tabs.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Webix Ribbon::Tabbar 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 75 | 76 | 77 | 78 | 79 | 80 | -------------------------------------------------------------------------------- /richtext/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@wbx/view-dhx-richtext", 3 | "version": "1.1.1", 4 | "description": "DHTMLX RichText as Webix view", 5 | "main": "richtext.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/webix-hub/components.git" 12 | }, 13 | "keywords": [ 14 | "webix", 15 | "richtext", 16 | "dhtmlx", 17 | "editor", 18 | "view" 19 | ], 20 | "author": "XB Software", 21 | "license": "MIT", 22 | "bugs": { 23 | "url": "https://github.com/webix-hub/components/issues" 24 | }, 25 | "homepage": "https://github.com/webix-hub/components#readme" 26 | } -------------------------------------------------------------------------------- /richtext/richtext.js: -------------------------------------------------------------------------------- 1 | webix.protoUI({ 2 | name:"dhx-richtext", 3 | defaults:{ 4 | config:{} 5 | }, 6 | $init:function(config){ 7 | var elm = webix.html.create("div", { 8 | // overflow-x for minimum width limitation in Richtext 1.1 9 | style:"height:100%;overflow-x:auto;" 10 | }); 11 | this.$view.appendChild(elm); 12 | this._waitEditor = webix.promise.defer(); 13 | this.$ready.push(this._require_richtext); 14 | }, 15 | _require_richtext:function(){ 16 | if (this.config.cdn === false){ 17 | this._init_richtext(); 18 | return; 19 | }; 20 | 21 | var cdn = this.config.cdn || "https://cdn.dhtmlx.com/richtext/1.1"; 22 | 23 | webix.require([ 24 | cdn+"/richtext.js", 25 | cdn+"/richtext.css" 26 | ]).then(webix.bind(this._init_richtext, this)).catch(function(e){ 27 | console.log(e); 28 | }); 29 | }, 30 | _init_richtext:function(){ 31 | var config = this.config.config; 32 | this._editor = new dhx.Richtext(this.$view.firstChild, config); 33 | this._waitEditor.resolve(this._editor); 34 | }, 35 | getEditor:function(wait){ 36 | return wait ? this._waitEditor : this._editor; 37 | }, 38 | value_setter:function(value){ 39 | this.setValue(value); 40 | }, 41 | setValue:function(value, mode){ 42 | this._waitEditor.then(function(editor){ 43 | editor.setValue(value, mode); 44 | }); 45 | }, 46 | getValue:function(mode){ 47 | return this._editor ? this._editor.getValue(mode) : ""; 48 | } 49 | }, webix.ui.view); -------------------------------------------------------------------------------- /richtext/sample.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 34 | 35 | -------------------------------------------------------------------------------- /scheduler/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@wbx/view-dhx-scheduler", 3 | "version": "5.2.0-a", 4 | "description": "DHTMLX Scheduler as Webix view", 5 | "main": "scheduler.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/webix-hub/components.git" 12 | }, 13 | "keywords": [ 14 | "webix", 15 | "dhtmlx", 16 | "scheduler", 17 | "view" 18 | ], 19 | "author": "Maksim Kozhukh", 20 | "license": "MIT", 21 | "bugs": { 22 | "url": "https://github.com/webix-hub/components/issues" 23 | }, 24 | "homepage": "https://github.com/webix-hub/components#readme" 25 | } 26 | -------------------------------------------------------------------------------- /scheduler/sample.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Scheduler 9 | 10 | 11 | 12 | 31 | 32 | -------------------------------------------------------------------------------- /scheduler/scheduler.js: -------------------------------------------------------------------------------- 1 | webix.protoUI({ 2 | name:"dhx-scheduler", 3 | defaults:{ 4 | tabs:["day", "week", "month"], 5 | skin:"terrace", 6 | ext:[] 7 | }, 8 | getScheduler:function(waitScheduler){ 9 | return waitScheduler ? this._waitScheduler : this._scheduler; 10 | }, 11 | $init:function(config){ 12 | this._waitScheduler = webix.promise.defer(); 13 | 14 | this.$ready.push(function(){ 15 | var tabs = this.config.tabs; 16 | var html = ["
 
 
"]; 17 | if (tabs) 18 | for (var i=0; i
"); 23 | html.push("
"); 24 | 25 | this.$view.innerHTML = html.join(""); 26 | 27 | //because we are not messing with resize model 28 | //if setSize will be implemented - below line can be replaced with webix.ready 29 | webix.delay(webix.bind(this._render_once, this)); 30 | }); 31 | 32 | this.attachEvent("onDestruct", function(){ 33 | var sch = this.getScheduler(); 34 | if (sch) 35 | scheduler.cancel_lightbox(); 36 | }); 37 | }, 38 | $setSize: function(x,y){ 39 | if(webix.ui.view.prototype.$setSize.call(this,x,y)){ 40 | if(this._scheduler) 41 | this._scheduler.setCurrentView(); 42 | } 43 | }, 44 | _render_once:function(){ 45 | this._cdn = this.config.cdn; 46 | 47 | // if 'false', do not try to load anything (assuming all sources were included to the page) 48 | if (this._cdn === false){ 49 | this._after_render_once(); 50 | return; 51 | }; 52 | 53 | // otherwise, use CDN 54 | this._cdn = this._cdn || "https://cdn.dhtmlx.com/scheduler/5.2"; 55 | 56 | var cdn = this._cdn; 57 | var skin = this.config.skin; 58 | if (skin === "terrace"){ 59 | skin = ""; 60 | } else { 61 | skin = "_"+skin; 62 | }; 63 | // main js/css files 64 | var sources = [ 65 | cdn+"/dhtmlxscheduler"+skin+".css", 66 | cdn+"/dhtmlxscheduler.js" 67 | ]; 68 | // modules from 'ext' folder of the package 69 | var ext = this.config.ext; 70 | if (ext && Array.isArray(ext) && ext.length){ 71 | var ext_to_load = ext.map(function(name){ 72 | return cdn+"/ext/dhtmlxscheduler_"+name+".js" 73 | }) 74 | sources = sources.concat(ext_to_load); 75 | }; 76 | 77 | webix.require(sources).then( webix.bind(this._after_render_once, this) ).catch(function(e){ 78 | console.log(e); 79 | }); 80 | }, 81 | _after_render_once:function(){ 82 | var scheduler = this._scheduler = (window.Scheduler && Scheduler.getSchedulerInstance) ? Scheduler.getSchedulerInstance() : window.scheduler; 83 | scheduler.skin = this.config.skin; 84 | 85 | if (this.config.init) 86 | this.config.init.call(this); 87 | 88 | scheduler.init(this.$view.firstChild, (this.config.date||new Date()), (this.config.mode||"week")); 89 | if (this.config.ready) 90 | this.config.ready.call(this); 91 | 92 | this._waitScheduler.resolve(scheduler); 93 | 94 | } 95 | }, webix.EventSystem, webix.ui.view); -------------------------------------------------------------------------------- /selectdialog/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@wbx/view-select-dialog", 3 | "version": "1.0.0", 4 | "description": "Webix SelectDialog widget", 5 | "main": "selectdialog.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/webix-hub/components.git" 12 | }, 13 | "keywords": [ 14 | "webix", 15 | "select-dialog", 16 | "view" 17 | ], 18 | "author": "XB Software", 19 | "license": "MIT", 20 | "bugs": { 21 | "url": "https://github.com/webix-hub/components/issues" 22 | }, 23 | "homepage": "https://github.com/webix-hub/components#readme" 24 | } -------------------------------------------------------------------------------- /selectdialog/sample.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Open Dialog 11 | 16 | 17 | 18 |
19 | 20 |
21 | 22 | 65 | 66 | -------------------------------------------------------------------------------- /selectdialog/selectdialog.css: -------------------------------------------------------------------------------- 1 | .wbx_seldialog_folder:hover, .wbx_seldialog_icon:hover{ 2 | background-color:#FFDB8F; 3 | } 4 | .wbx_seldialog_folder{ 5 | display:inline-block; 6 | font-size:15px; 7 | padding:3px; 8 | margin:-3px -3px 0 0; 9 | } 10 | .wbx_seldialog_icon{ 11 | margin-left: 5px; 12 | width: 12px; 13 | } 14 | -------------------------------------------------------------------------------- /selectdialog/selectdialog.js: -------------------------------------------------------------------------------- 1 | //hotkeys - detach 2 | //folders, getPath 3 | //callback - id, folder || getName, getPath 4 | 5 | 6 | webix.i18n.selectDialog = { 7 | header:"Open File", 8 | open: "Open", 9 | cancel: "Cancel", 10 | name: "Name" 11 | }; 12 | 13 | webix.protoUI({ 14 | name:"select-dialog", 15 | $init:function(config){ 16 | //we will store current state here 17 | this._folders = []; 18 | 19 | var locale = webix.i18n.selectDialog; 20 | 21 | //inner configuration 22 | var buttons = config.toolbar || [ 23 | {}, 24 | { view:"button", value:locale.open, width:150, 25 | click:function(){ this.getTopParentView().select(); } }, 26 | { view:"button", value:locale.cancel, width:150, 27 | click:function(){ this.getTopParentView().exit(); } } 28 | ]; 29 | 30 | var cols = config.columns || [ 31 | { id:"type", header:"", template:"{common.dialog_icon()}", width:50 }, 32 | { id:"name", header:locale.name, fillspace:true } 33 | ]; 34 | 35 | config.body = config.body || { 36 | rows:[ 37 | { view:"template", id:"template", css:"webix_path", 38 | height:35, template:function(data){ 39 | var html = "/"; 40 | for(var i in data) 41 | html+=""+data[i].name+" / "; 42 | return html; 43 | } 44 | }, 45 | { 46 | view:"datatable", 47 | id:"table", 48 | columns:cols, 49 | select:true, 50 | scrollX:false, 51 | navigation:true 52 | }, 53 | {view:"toolbar", id:"toolbar", elements: buttons } 54 | ] 55 | }; 56 | 57 | config.head = config.head || locale.header; 58 | 59 | //attach event handlers to sub components 60 | this.$ready.push(this._after_init); 61 | 62 | this.attachEvent("onShow", this._on_show); 63 | }, 64 | $onLoad:function(data, driver){ 65 | data = driver.getRecords(data); 66 | this._on_data_load(data); 67 | return true; 68 | }, 69 | _on_show:function(){ 70 | webix.UIManager.setFocus(this.getDatatable()); 71 | 72 | this._folders = []; 73 | this._showState(); 74 | }, 75 | _on_data_load:function(data){ 76 | var dtable = this.getDatatable(); 77 | 78 | dtable.$blockRender = true; 79 | dtable.parse(data); 80 | dtable.sort("#type#", "desc"); 81 | dtable.$blockRender = false; 82 | 83 | this._showState(); 84 | }, 85 | show:function(){ 86 | this._folders = []; 87 | webix.ui.window.prototype.show.apply(this, arguments); 88 | }, 89 | _after_init:function(){ 90 | var dtable = this.getDatatable(); 91 | var tpl = this.getTemplate(); 92 | 93 | tpl.define("onClick", { 94 | wbx_seldialog_icon : function(){ 95 | this.getTopParentView()._levelUp(); 96 | }, 97 | wbx_seldialog_folder : function(a, b, el){ 98 | this.getTopParentView()._levelUp(el.getAttribute("data-id")); 99 | } 100 | }); 101 | tpl.refresh(); 102 | 103 | dtable.type.dialog_icon = function(obj){ 104 | if(obj.type=="folder") 105 | return "
"; 106 | else if(obj.type=="file") 107 | return "
"; 108 | }; 109 | 110 | //hot keys 111 | webix.UIManager.addHotKey("enter", function(view){ 112 | if(view.getSelectedId()){ 113 | view.getTopParentView().select(view); 114 | return false; 115 | } 116 | }, dtable); 117 | 118 | webix.UIManager.addHotKey("backspace", function(view){ 119 | view.getTopParentView()._levelUp(); 120 | return false; 121 | }, dtable); 122 | 123 | webix.UIManager.addHotKey("escape", function(view){ 124 | var dialog = view.getTopParentView(); 125 | if(dialog.isVisible()) 126 | dialog.exit(); 127 | }, dtable); 128 | 129 | dtable.attachEvent("onItemDblClick", function(id){ 130 | this.getTopParentView().select(this); 131 | }); 132 | 133 | dtable.attachEvent("onBeforeAdd",function(obj){ 134 | obj.folder_id = this._folders.length ? this._folders[this._folders.length - 1]: 0; 135 | }); 136 | 137 | dtable = tpl = null; 138 | }, 139 | _showState:function(select_id){ 140 | this.getTemplate().setValues(this._folders); 141 | var dtable = this.getDatatable(); 142 | var pid = this._folders.length ? this._folders[this._folders.length - 1].id: 0; 143 | 144 | dtable.filter(function(obj){ 145 | return obj.folder_id == pid; 146 | }); 147 | if (select_id) 148 | dtable.select(select_id); 149 | else if (dtable.getFirstId()) 150 | dtable.select(dtable.getFirstId()); 151 | }, 152 | _levelUp:function(to_folder){ 153 | if (to_folder){ 154 | for (var i = 0; i < this._folders.length; i++){ 155 | if (this._folders[i].id == to_folder){ 156 | this._folders.splice(i+1, this._folders.length - i - 1); 157 | this._showState(); 158 | break; 159 | } 160 | } 161 | } else if (this._folders.length){ 162 | var leaving = this._folders.pop(); 163 | this._showState(leaving.id); 164 | } 165 | }, 166 | exit:function(){ 167 | this.config.onCancel.call(this); 168 | this.hide(); 169 | }, 170 | select:function(){ 171 | var view = this.getDatatable(); 172 | var id = view.getSelectedId(); 173 | if(id){ 174 | if(view.getItem(id).type=="folder"){ 175 | this._folders.push(view.getItem(id)); 176 | this._showState(); 177 | } 178 | else if(view.getItem(id).type=="file"){ 179 | this._openFile(id); 180 | } 181 | } 182 | }, 183 | _openFile:function(id){ 184 | var item = this.getDatatable().getItem(id); 185 | 186 | var path = []; 187 | for (var key in this._folders) 188 | path.push(this._folders[key].name); 189 | path = "/"+path.join("/"); 190 | 191 | this.callEvent("onItemOpen",[item.name, path, item, this._folders]); 192 | this.config.onOpen.call(this, item.name, path, item, this._folders); 193 | this.hide(); 194 | }, 195 | getDatatable:function(){ 196 | return this.$$("table"); 197 | }, 198 | getTemplate:function(){ 199 | return this.$$("template"); 200 | } 201 | }, webix.AtomDataLoader, webix.IdSpace, webix.ui.window); -------------------------------------------------------------------------------- /sigma/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@wbx/view-sigma-chart", 3 | "version": "1.2.1", 4 | "description": "Sigma chart as Webix widget", 5 | "main": "sigma.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/webix-hub/components.git" 12 | }, 13 | "keywords": [ 14 | "webix", 15 | "sigma", 16 | "chart", 17 | "view" 18 | ], 19 | "author": "XB Software", 20 | "license": "MIT", 21 | "bugs": { 22 | "url": "https://github.com/webix-hub/components/issues" 23 | }, 24 | "homepage": "https://github.com/webix-hub/components#readme" 25 | } -------------------------------------------------------------------------------- /sigma/sample.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Sigma Chart 8 | 9 | 10 | 11 | 52 | 53 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /sigma/sigma.js: -------------------------------------------------------------------------------- 1 | webix.protoUI({ 2 | name:"sigma-chart", 3 | defaults:{ 4 | plugins:[], 5 | config:{} 6 | }, 7 | $init:function(){ 8 | this._waitChart = webix.promise.defer(); 9 | webix.delay(webix.bind(this._init_once, this)); 10 | }, 11 | _init_once:function(){ 12 | 13 | if (this.config.cdn === false){ 14 | this._render_once(); 15 | return; 16 | }; 17 | 18 | var cdn = this.config.cdn ? this.config.cdn : "https://cdnjs.cloudflare.com/ajax/libs/sigma.js/1.2.1" 19 | 20 | var sources = []; 21 | 22 | sources.push(cdn + "/sigma.min.js"); 23 | 24 | var plugins = this.config.plugins; 25 | if (plugins.length){ 26 | for (var i = 0; i < plugins.length; i++){ 27 | sources.push(cdn + "/plugins/" + plugins[i] + ".min.js"); 28 | }; 29 | }; 30 | 31 | webix.require(sources) 32 | .then(webix.bind(this._render_once, this)) 33 | .catch(function(e){ 34 | console.log(e); 35 | }); 36 | }, 37 | _render_once:function(){ 38 | var obligatory_config = { container:this.$view }; 39 | var config = webix.extend(this.config.config, obligatory_config, true); 40 | 41 | this._chart = new sigma(config); 42 | 43 | if (this.config.ready) 44 | this.config.ready.call(this); 45 | 46 | this._waitChart.resolve(this._chart); 47 | }, 48 | $setSize:function(x,y){ 49 | webix.ui.view.prototype.$setSize.call(this,x,y); 50 | }, 51 | getChart:function(waitChart){ 52 | return waitChart?this._waitChart:this._chart; 53 | } 54 | }, webix.ui.view ); -------------------------------------------------------------------------------- /tinymce/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@wbx/view-tinymce-editor", 3 | "version": "4.9.6", 4 | "description": "TinyMCE editor as Webix widget", 5 | "main": "tinymce.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/webix-hub/components.git" 12 | }, 13 | "keywords": [ 14 | "webix", 15 | "tinymce", 16 | "editor", 17 | "view" 18 | ], 19 | "author": "XB Software", 20 | "license": "MIT", 21 | "bugs": { 22 | "url": "https://github.com/webix-hub/components/issues" 23 | }, 24 | "homepage": "https://github.com/webix-hub/components#readme" 25 | } -------------------------------------------------------------------------------- /tinymce/sample.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 31 | 32 | -------------------------------------------------------------------------------- /tinymce/tinymce.js: -------------------------------------------------------------------------------- 1 | webix.protoUI({ 2 | name:"tinymce-editor", 3 | defaults:{ 4 | config:{ theme:"modern", statusbar:false }, 5 | value:"" 6 | }, 7 | $init:function(){ 8 | this._mce_id = "webix_mce_"+(this.config.id || webix.uid()); 9 | this.$view.innerHTML = ""; 10 | this.$view.className += " webix_selectable"; 11 | 12 | this._waitEditor = webix.promise.defer(); 13 | 14 | this.$ready.push(this._require_tinymce_once); 15 | }, 16 | render:function(){ 17 | this._set_inner_size(); 18 | }, 19 | _require_tinymce_once:function(){ 20 | var c = this.config; 21 | 22 | if (c.cdn === false || window.tinymce){ 23 | this._init_tinymce_once(); 24 | return; 25 | }; 26 | 27 | var apiKey = c.apiKey ? c.apiKey : "no-api-key"; 28 | var cdn = c.cdn || "https://cdn.tiny.cloud/1/"+apiKey+"/tinymce/4.9.6-54"; 29 | 30 | //path to tinymce codebase 31 | window.tinyMCEPreInit = { 32 | query:"", 33 | base: cdn, 34 | suffix:".min" 35 | }; 36 | 37 | webix.require([ 38 | cdn+"/tinymce.min.js" 39 | ]) 40 | .then( webix.bind(this._init_tinymce_once, this) ) 41 | .catch(function(e){ 42 | console.log(e); 43 | }); 44 | }, 45 | _init_tinymce_once:function(){ 46 | if (!tinymce.dom.Event.domLoaded){ 47 | // woraround event logic in tinymce 48 | tinymce.dom.Event.domLoaded = true; 49 | webix.html.addStyle(".mce-tinymce.mce-container{ border-width:0px !important}"); 50 | }; 51 | 52 | var editor_config = webix.copy(this.config.config || {}); 53 | 54 | webix.extend(editor_config, { 55 | selector:"#"+this._mce_id, 56 | resize:false, 57 | mode:"exact" 58 | }, true); 59 | 60 | var custom_setup = editor_config.setup; 61 | 62 | editor_config.setup = webix.bind(function(editor){ 63 | if (custom_setup) 64 | custom_setup(editor); 65 | editor.on("init", webix.bind(this._mce_editor_ready, this), true); 66 | }, this); 67 | 68 | webix.delay(function(){ 69 | tinymce.init(editor_config) 70 | }, this); 71 | }, 72 | _mce_editor_ready:function(event){ 73 | if (!this._editor) 74 | this._editor = event.target; 75 | this._waitEditor.resolve(this._editor); 76 | 77 | this.setValue(this.config.value); 78 | this._set_inner_size(); 79 | }, 80 | _set_inner_size:function(){ 81 | if (this._editor){ 82 | this._editor.theme.resizeTo(this.$width-2, this.$height - this._get_bar_height()); 83 | } 84 | }, 85 | _get_bar_height:function(){ 86 | var bars = this.$view.querySelectorAll(".mce-toolbar, .mce-statusbar, .mce-menubar"); 87 | var height = 5; 88 | for (var i = 0; i < bars.length; i++){ 89 | height += bars[i].clientHeight; 90 | }; 91 | return height; 92 | }, 93 | $setSize:function(x,y){ 94 | if (webix.ui.view.prototype.$setSize.call(this, x, y)){ 95 | this._set_inner_size(); 96 | } 97 | }, 98 | setValue:function(value){ 99 | this.config.value = value; 100 | this._waitEditor.then(function(editor){ 101 | editor.setContent(value); 102 | }); 103 | }, 104 | getValue:function(){ 105 | return this._editor?this._editor.getContent():this.config.value; 106 | }, 107 | focus:function(){ 108 | this._waitEditor.then(function(editor){ 109 | editor.focus(); 110 | }); 111 | }, 112 | getEditor:function(wait){ 113 | return wait?this._waitEditor:this._editor; 114 | } 115 | }, webix.ui.view); -------------------------------------------------------------------------------- /tinymce5/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@wbx/view-tinymce5-editor", 3 | "version": "5.0.14", 4 | "description": "TinyMCE 5 editor as Webix widget", 5 | "main": "tinymce5.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/webix-hub/components.git" 12 | }, 13 | "keywords": [ 14 | "webix", 15 | "tinymce", 16 | "tinymce5", 17 | "editor" 18 | ], 19 | "author": "XB Software", 20 | "license": "MIT", 21 | "bugs": { 22 | "url": "https://github.com/webix-hub/components/issues" 23 | }, 24 | "homepage": "https://github.com/webix-hub/components#readme" 25 | } -------------------------------------------------------------------------------- /tinymce5/sample.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 10 | 11 | 12 | 33 | 34 | -------------------------------------------------------------------------------- /tinymce5/tinymce5.js: -------------------------------------------------------------------------------- 1 | webix.protoUI({ 2 | name:"tinymce5-editor", 3 | defaults:{ 4 | config:{ theme:"silver", statusbar:false }, 5 | value:"" 6 | }, 7 | $init:function(){ 8 | webix.html.addStyle(".tox-tinymce{ border:0px !important}"); 9 | 10 | this._mce_id = "webix_mce_"+(this.config.id || webix.uid()); 11 | this.$view.innerHTML = ""; 12 | 13 | this._waitEditor = webix.promise.defer(); 14 | 15 | this.$ready.push(this._require_tinymce_once); 16 | }, 17 | render:function(){ 18 | this._set_inner_size(); 19 | }, 20 | _require_tinymce_once:function(){ 21 | 22 | var c = this.config; 23 | 24 | if (c.cdn === false || window.tinymce){ 25 | this._init_tinymce_once(); 26 | return; 27 | }; 28 | 29 | var apiKey = c.apiKey ? c.apiKey : "no-api-key"; 30 | var cdn = c.cdn || "https://cdn.tiny.cloud/1/"+apiKey+"/tinymce/5.0.14-54"; 31 | 32 | //path to tinymce codebase 33 | window.tinyMCEPreInit = { 34 | query:"", 35 | base: cdn, 36 | suffix:".min" 37 | }; 38 | 39 | 40 | webix.require([ 41 | cdn+"/tinymce.min.js" 42 | ]) 43 | .then( webix.bind(this._init_tinymce_once, this) ) 44 | .catch(function(e){ 45 | console.log(e); 46 | }); 47 | 48 | }, 49 | _init_tinymce_once:function(){ 50 | if (!tinymce.dom.Event.domLoaded){ 51 | // woraround event logic in tinymce 52 | tinymce.dom.Event.domLoaded = true; 53 | }; 54 | 55 | var editor_config = webix.copy(this.config.config || {}); 56 | webix.extend(editor_config, { 57 | selector:"#"+this._mce_id, 58 | resize:false 59 | }, true); 60 | 61 | var custom_setup = editor_config.setup; 62 | editor_config.setup = webix.bind(function(editor){ 63 | if (custom_setup) 64 | custom_setup(editor); 65 | editor.on("init", webix.bind(this._mce_editor_ready, this), true); 66 | }, this); 67 | 68 | webix.delay(function(){ 69 | tinymce.init(editor_config) 70 | }, this); 71 | }, 72 | _mce_editor_ready:function(event){ 73 | this._editor = event.target; 74 | 75 | this.setValue(this.config.value); 76 | this._set_inner_size(); 77 | this._waitEditor.resolve(this._editor); 78 | }, 79 | _set_inner_size:function(){ 80 | if (this._editor){ 81 | this.$view.querySelector(".tox-tinymce").style.height = this.$height+"px"; 82 | } 83 | }, 84 | $setSize:function(x,y){ 85 | if (webix.ui.view.prototype.$setSize.call(this, x, y)){ 86 | this._set_inner_size(); 87 | }; 88 | }, 89 | setValue:function(value){ 90 | this.config.value = value; 91 | this._waitEditor.then(function(editor){ 92 | editor.setContent(value); 93 | }); 94 | }, 95 | getValue:function(){ 96 | return this._editor?this._editor.getContent():this.config.value; 97 | }, 98 | focus:function(){ 99 | this._waitEditor.then(function(editor){ 100 | editor.focus(); 101 | }); 102 | }, 103 | getEditor:function(wait){ 104 | return wait?this._waitEditor:this._editor; 105 | } 106 | }, webix.ui.view); -------------------------------------------------------------------------------- /vis/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@wbx/view-vis-chart", 3 | "version": "4.21.0", 4 | "description": "Vis chart as Webix widget", 5 | "main": "vis.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/webix-hub/components.git" 12 | }, 13 | "keywords": [ 14 | "webix", 15 | "vis", 16 | "chart", 17 | "view" 18 | ], 19 | "author": "XB Software", 20 | "license": "MIT", 21 | "bugs": { 22 | "url": "https://github.com/webix-hub/components/issues" 23 | }, 24 | "homepage": "https://github.com/webix-hub/components#readme" 25 | } -------------------------------------------------------------------------------- /vis/sample.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vis Graph3d Chart 8 | 9 | 10 | 11 | 115 | 116 | 117 | 118 | 119 | -------------------------------------------------------------------------------- /vis/vis.js: -------------------------------------------------------------------------------- 1 | webix.protoUI({ 2 | name:"vis-chart", 3 | $init:function(){ 4 | this._waitChart = webix.promise.defer(); 5 | webix.delay(webix.bind(this._init_once, this)); 6 | }, 7 | _init_once:function(){ 8 | 9 | if (this.config.cdn === false){ 10 | this._render_once(); 11 | return; 12 | }; 13 | 14 | var cdn = this.config.cdn ? this.config.cdn : "https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0"; 15 | 16 | var sources = []; 17 | 18 | sources.push(cdn + "/vis.min.js"); 19 | sources.push(cdn + "/vis.min.css"); 20 | 21 | webix.require(sources) 22 | .then(webix.bind(this._render_once, this)) 23 | .catch(function(e){ 24 | console.log(e); 25 | }); 26 | }, 27 | _render_once:function(){ 28 | var g3 = this.config.graph3d; 29 | if (g3){ 30 | this._get_chart_size(g3); 31 | var data = new vis.DataSet(this.config.data || []); 32 | this._chart = new vis.Graph3d(this.$view, data, g3); 33 | } 34 | 35 | var g2 = this.config.graph2d; 36 | if (g2){ 37 | this._get_chart_size(g2); 38 | var data = new vis.DataSet(this.config.data || []); 39 | this._chart = new vis.Graph2d(this.$view, data, g2); 40 | } 41 | 42 | var tm = this.config.timeline; 43 | if (tm){ 44 | this._get_chart_size(tm); 45 | var data = new vis.DataSet(this.config.data || []); 46 | this._chart = new vis.Timeline(this.$view, data, tm); 47 | } 48 | 49 | var nw = this.config.network; 50 | if (nw){ 51 | var data = { 52 | nodes : new vis.DataSet(this.config.data.nodes || []), 53 | edges : new vis.DataSet(this.config.data.edges || []) 54 | }; 55 | this._chart = new vis.Network(this.$view, data, nw); 56 | } 57 | 58 | if (this.config.ready){ 59 | var res = this.config.ready.call(this); 60 | this._chart = this._chart || res; 61 | } 62 | 63 | this._waitChart.resolve(this._chart); 64 | }, 65 | _get_chart_size:function(g3){ 66 | g3.width = this.$width+"px"; 67 | g3.height = this.$height+"px"; 68 | return g3; 69 | }, 70 | $setSize:function(x,y){ 71 | webix.ui.view.prototype.$setSize.call(this,x,y); 72 | if (this._chart){ 73 | this._chart.setOptions(this._get_chart_size({})); 74 | this._chart.redraw(); 75 | } 76 | }, 77 | getChart:function(waitChart){ 78 | return waitChart?this._waitChart:this._chart; 79 | } 80 | }, webix.ui.view ); -------------------------------------------------------------------------------- /yandexmap/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@wbx/view-yandex-map", 3 | "version": "2.1.0", 4 | "description": "Yandex Map as Webix widget", 5 | "main": "yandexmap.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/webix-hub/components.git" 12 | }, 13 | "keywords": [ 14 | "webix", 15 | "yandex", 16 | "yandex-map", 17 | "map", 18 | "view" 19 | ], 20 | "author": "XB Software", 21 | "license": "MIT", 22 | "bugs": { 23 | "url": "https://github.com/webix-hub/components/issues" 24 | }, 25 | "homepage": "https://github.com/webix-hub/components#readme" 26 | } -------------------------------------------------------------------------------- /yandexmap/sample.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 20 | 21 | -------------------------------------------------------------------------------- /yandexmap/yandexmap.js: -------------------------------------------------------------------------------- 1 | webix.protoUI({ 2 | name:"yandex-map", 3 | defaults:{ 4 | zoom: 5, 5 | center:[ 39.5, -98.5 ], 6 | mapType: "yandex#map", 7 | version:"2.1", 8 | lang:"en-US", 9 | load:["package.full"], 10 | apikey:false 11 | }, 12 | $init:function(config){ 13 | this.$view.innerHTML = "
"; 14 | this._contentobj = this.$view.firstChild; 15 | 16 | this._waitMap = webix.promise.defer(); 17 | this.$ready.push(this.render); 18 | }, 19 | getMap:function(waitMap){ 20 | return waitMap?this._waitMap:this._map; 21 | }, 22 | render:function(){ 23 | 24 | if( typeof ymaps !== "undefined" || this.config.cdn === false ){ 25 | this._initMap(); 26 | return; 27 | }; 28 | 29 | var cfg = this.config; 30 | var cdn = cfg.cdn ? cfg.cdn : "https://api-maps.yandex.ru/" 31 | 32 | // configuring request 33 | var requireMap = cdn + cfg.version + "/?lang=" + cfg.lang; 34 | requireMap += "&load=" + cfg.load.join(","); 35 | if (cfg.apikey) 36 | requireMap += "&apikey=" + cfg.apikey; 37 | 38 | webix.require([ 39 | requireMap 40 | ]) 41 | .then( webix.bind(this._initMap, this) ) 42 | .catch(function(e){ 43 | console.log(e); 44 | }); 45 | }, 46 | _initMap:function(define){ 47 | 48 | var c = this.config; 49 | 50 | ymaps.ready( 51 | webix.bind(function(){ 52 | this._map = new ymaps.Map(this._contentobj, { 53 | center:c.center, 54 | zoom:c.zoom, 55 | type:c.mapType 56 | }); 57 | this._waitMap.resolve(this._map); 58 | webix._ldYMap = null; 59 | }, this) 60 | ); 61 | }, 62 | center_setter:function(config){ 63 | if(this._map) 64 | this._map.setCenter(config); 65 | 66 | return config; 67 | }, 68 | mapType_setter:function(config){ 69 | //yadex#map, yadex#satellite, yadex#hybrid, yadex#publicMap 70 | if(this._map) 71 | this._map.setType(config); 72 | 73 | return config; 74 | }, 75 | zoom_setter:function(config){ 76 | if(this._map) 77 | this._map.setZoom(config); 78 | 79 | return config; 80 | } 81 | }, webix.ui.view); --------------------------------------------------------------------------------