[update] version 8.1.0

README.md

@@ -1,4 +1,4 @@
-Webix UI v.8.0.1
+Webix UI v.8.1.0
 ================
 
 [![npm version](https://badge.fury.io/js/webix.svg)](https://badge.fury.io/js/webix)
@@ -7,7 +7,7 @@ https://webix.com
 
 If you don't know where to start - check 
 
-- https://webix.com/tutorials/intro/1
+- https://webix.com/quick-start/#!/1
 - https://docs.webix.com/
 - https://forum.webix.com
 
@@ -46,4 +46,4 @@ you can get help at https://forum.webix.com
 
 
 
-(c) XB Software Ltd. 2020
+(c) XB Software Ltd. 2020

package.json

@@ -1,7 +1,7 @@
 {
   "name": "webix",
   "productTag": "webix",
-  "version": "8.0.1",
+  "version": "8.1.0",
   "description": "Javascript UI for Web",
   "scripts": {
     "lint": "yarn eslint \"sources/**/*.js\"",

sources/core/copypaste.js

@@ -1,27 +1,28 @@
 import UIManager from "../core/uimanager";
-import {isUndefined} from "../webix/helpers";
+import {isUndefined, delay} from "../webix/helpers";
 import template from "../webix/template";
 
 import clipbuffer from "../webix/clipbuffer";
+import csv from "../webix/csv";
 import env from "../webix/env";
 
 const CopyPaste = {
 	clipboard_setter: function(value) {
 		if (env.touch) return value;
 
 		if (value === true || value === 1) value = "modify";
-		this.attachEvent("onAfterSelect", function(id) {
-			if (!this.getEditor || !this.getEditor()){
-				var item = this.getItem(id);
-				var text = this.type.templateCopy(item);
-				clipbuffer.set(text, this);
-				clipbuffer.focus();
-				UIManager.setFocus(this);
-			}
+		this.attachEvent("onAfterSelect", this._sel_to_clip);
+		this.attachEvent("onAfterEditStop", function(v, ed){
+			const sel = this.getSelectedId(true);
+			if(sel.length == 1 && ed.id == sel[0])
+				this._sel_to_clip();
 		});
+
 		this.attachEvent("onPaste", function(text) {
-			if (!isUndefined(this._paste[this._settings.clipboard]))
-				this._paste[this._settings.clipboard].call(this, text);
+			if (!isUndefined(this._paste[this._settings.clipboard])) {
+				const data = csv.parse(text, this._settings.delimiter);
+				this._paste[this._settings.clipboard].call(this, data);
+			}
 		});
 		this.attachEvent("onFocus", function() {
 			clipbuffer.focus();
@@ -35,16 +36,37 @@ const CopyPaste = {
 		});
 		return value;
 	},
+	_sel_to_clip: function() {
+		delay(() => { //wait until editor is closed
+			if (!this.getEditor || !this.getEditor()){
+				const sel = this.getSelectedId(true);
+				const data = [];
+				for(let i = 0; i < sel.length; i++){
+					const id = sel[i];
+					const item = this.getItem(id);
+					data.push([this.type.templateCopy(item)]);
+				}
+
+				const text = data.length === 1 ? data[0][0] : csv.stringify(data, this._settings.delimiter);
+
+				clipbuffer.set(text, this);
+				clipbuffer.focus();
+				UIManager.setFocus(this);
+			}
+		});
+	},
 	_paste: {
 		// insert new item with pasted value
 		insert: function(text) {
-			this.add({ value: text });
+			text.forEach(value => this.add({ value }));
 		},
 		// change value of each selected item
 		modify: function(text) {
 			var sel = this.getSelectedId(true);
 			for (var i = 0; i < sel.length; i++) {
-				this.getItem(sel[i]).value = text;
+				if(isUndefined(text[i]))
+					return;
+				this.getItem(sel[i]).value = text[i];
 				this.refresh(sel[i]);
 			}
 		},

sources/core/date.js

@@ -314,6 +314,12 @@ const wDate = {
 					return 	d0.getMonth() == d.getMonth() && d0.getYear() == d.getYear();
 				});
 				break;
+			case "quarter":
+				date.setMonth(date.getMonth() + inc * 3);
+				this._correctDate(date,d,inc,function(d,d0){
+					return 	d0.getMonth() == d.getMonth() && d0.getYear() == d.getYear();
+				});
+				break;
 			case "year":
 				date.setYear(date.getFullYear()+inc);
 				this._correctDate(date,d,inc,function(d,d0){

sources/core/dragcontrol.js

@@ -68,13 +68,16 @@ const DragControl ={
 		const dragCtrl = DragControl;
 		const master = this._getActiveDragMaster();
 		// for data items only
-		if (master && master._getDragItemPos){
+		if (master && master.$longTouchLimit){
 			if (!dragCtrl._html && !dragCtrl.createDrag(e)) return;
 			e.longtouch_drag = true;
 
+			const pos = { x:e.x, y:e.y };
+			const customPos = dragCtrl.$dragPos(pos, e);
+
 			const ctx = dragCtrl._drag_context;
-			dragCtrl._html.style.left= e.x+dragCtrl.left+ (ctx.x_offset||0)+"px";
-			dragCtrl._html.style.top= e.y+dragCtrl.top+ (ctx.y_offset||0) +"px";
+			dragCtrl._html.style.top= pos.y+dragCtrl.top+(customPos||!ctx.y_offset?0:ctx.y_offset)+"px";
+			dragCtrl._html.style.left= pos.x+dragCtrl.left+(customPos||!ctx.x_offset?0:ctx.x_offset)+"px";
 		}
 	},
 	/*
@@ -128,7 +131,7 @@ const DragControl ={
 		var master = DragControl._getActiveDragMaster();
 
 		// only long-touched elements can be dragged
-		var longTouchLimit = (master && env.touch && master._getDragItemPos && !Touch._long_touched);
+		var longTouchLimit = (env.touch && master && master.$longTouchLimit && !Touch._long_touched);
 		if (longTouchLimit || Math.abs(pos.x-DragControl._start_pos.x)<5 && Math.abs(pos.y-DragControl._start_pos.y)<5)
 			return;
 

sources/core/dragitem.js

@@ -149,6 +149,7 @@ const DragItem ={
 			context.from.move(context.source,context.index,context.to, details);
 		}
 	},
+	$longTouchLimit: true,
 	_getDragItemPos: function(pos,e){
 		if (this.getItemNode){
 			var id = this.locate(e, true);

sources/core/tablepaste.js

@@ -5,16 +5,21 @@ import clipbuffer from "../webix/clipbuffer";
 import csv from "../webix/csv";
 import env from "../webix/env";
 
-import {isUndefined} from "../webix/helpers";
+import {isUndefined, delay} from "../webix/helpers";
 
 
 const TablePaste = {
 	clipboard_setter:function(value){
 		if (env.touch) return value;
-		
+
 		if (value === true || value === 1) value = "block";
 		clipbuffer.init();
 		this.attachEvent("onSelectChange",this._sel_to_clip);
+		this.attachEvent("onAfterEditStop", function(v, ed){
+			const sel = this.getSelectedId(true);
+			if(sel.length == 1 && ed.row == sel[0].row)
+				this._sel_to_clip();
+		});
 		// solution for clicks on selected items
 		this.attachEvent("onItemClick",function(){
 			if(document.activeElement && this.$view.contains(document.activeElement)){
@@ -28,13 +33,14 @@ const TablePaste = {
 	},
 	templateCopy_setter: template,
 	_sel_to_clip: function() {
-		if (!this.getEditor || !this.getEditor()){
-			var data = this._get_sel_text();
-			clipbuffer.set(data);
-			UIManager.setFocus(this);
-		}
+		delay(() => { //wait until editor is closed
+			if (!this.getEditor || !this.getEditor()){
+				var data = this._get_sel_text();
+				clipbuffer.set(data);
+				UIManager.setFocus(this);
+			}
+		});
 	},
-
 	_get_sel_text: function() {
 		var data = [];
 		var filter = this._settings.templateCopy;

sources/core/touch.js

@@ -148,13 +148,13 @@ const Touch = {
 				Touch._init_scroller(delta); //apply scrolling
 			} else if (env.isMac) {
 				const view = $$(Touch._start_context);
-				if (view && view.$hasYScroll && view.$hasYScroll()){
+				if (view && view.$hasYScroll && view.$hasYScroll() && e.cancelable){
 					return preventEvent(e);
 				}
 			}
 		}
 
-		if (Touch._scroll_mode)
+		if (Touch._scroll_mode && e.cancelable)
 			return preventEvent(e);
 	},
 	_set_scroll_pos:function(){

sources/core/treedataloader.js

@@ -9,11 +9,10 @@ const TreeDataLoader = {
 		//redefine methods
 		this._feed_common = this._feed_commonA;
 	},
-	_feed_commonA:function(id, count, callback, url){
+	_feed_commonA:function(from, count, callback, url, details, defer){
 		// branch loading
-		var details = (count === 0?{parent: encodeURIComponent(id)}:null);
-
-		return DataLoader.prototype._feed_common.call(this,id, count, callback, url, details);
+		details = (count === 0) ? {parent: encodeURIComponent(from)} : null;
+		return DataLoader.prototype._feed_common.call(this, from, count, callback, url, details, defer);
 	},
 	//load next set of data rows
 	loadBranch:function(id, callback, url){

sources/css/colorselect.less

@@ -56,6 +56,10 @@
 	user-select: none; 
 	-webkit-user-select: none;   
 }
+.webix_color_circle:focus, 
+.webix_color_area_active .webix_color_circle{
+	box-shadow:inset 0 0 4px #fff;
+}
 .webix_color_line_circle {
 	position: absolute;
 	width: 12px;
@@ -66,6 +70,11 @@
 	border: 2px solid #FFFFFF;
 	border-radius:50%;
 }
+.webix_color_line_circle:focus,
+.webix_color_area_active .webix_color_line_circle{
+	box-shadow:inset 0 0 8px #fff;
+}
+
 .webix_color_out_block, .webix_color_out_text{
 	height:32px;
 	float:left;

sources/css/inputs.less

@@ -381,15 +381,18 @@ body:not(:-moz-handler-blocked) .webix_el_select select{
 }
 
 .webix_view.webix_control .webix_disabled_box{
-	label, .webix_input_icon, button{
+	label, .webix_input_icon, button, .webix_slider_title{
 		color: @disabledFontColor;
 	}
-	input, select, textarea, .webix_inp_static{
+	input, select, textarea, .webix_inp_static, .webix_slider_right, .webix_slider_handle{
 		.inputDisabled();
 	}
 	.webix_inp_counter_prev, .webix_inp_counter_next, .webix_segment_0, .webix_segment_1, .webix_segment_N{
 		.buttonDisabled;
 	}
+	.webix_slider_left {
+		background-color:@disabledFontColor;
+	}
 }
 .webix_disabled_top_label{
 	color: @disabledFontColor;

sources/css/skins/compact/config.less

@@ -156,7 +156,7 @@
 
 // buttons in bars:
 
-	.webix_el_button, .webix_el_label, .webix_inp_label{
+	.webix_el_button, .webix_el_label, .webix_inp_label, .webix_slider_title{
 		color: @barFontColor;
 	}
 	.webix_el_label .webix_el_box{

sources/css/skins/contrast/config.less

@@ -1125,6 +1125,13 @@ div.webix_inp_static,.webix_el_textarea textarea {
 .webix_rangeslider .webix_slider_title_box{
 	height:21px;
 }
+.webix_view.webix_control .webix_disabled_box{
+	.webix_slider_handle, .webix_slider_left{
+		border-color:@disabledFontColor;
+	}
+}
+
+
 .webix_switch_handle:focus,
 .webix_switch_box:active .webix_switch_handle{
 	box-shadow: 0 0px 2px 2px #fff;

sources/css/skins/flat/config.less

@@ -156,7 +156,7 @@
 
 	// buttons in bars:
 
-	.webix_el_button, .webix_el_label, .webix_inp_label{
+	.webix_el_button, .webix_el_label, .webix_inp_label, .webix_slider_title{
 		color: @barFontColor;
 	}
 	.webix_el_label .webix_el_box{

sources/css/skins/material/config.less

@@ -176,7 +176,7 @@
 	background: @secondaryBg;
 	border-color: @secondaryBg;
 
-	.webix_el_button, .webix_el_label .webix_el_box, .webix_inp_label, .webix_inp_top_label{
+	.webix_el_button, .webix_el_label .webix_el_box, .webix_inp_label, .webix_inp_top_label, .webix_slider_title{
 		color: @darkBarFontColor;
 	}
 	.webix_secondary, .webix_transparent{

sources/css/skins/mini/config.less

@@ -176,7 +176,7 @@
 	background: @secondaryBg;
 	border-color: @secondaryBg;
 
-	.webix_el_button, .webix_el_label .webix_el_box, .webix_inp_label, .webix_inp_top_label{
+	.webix_el_button, .webix_el_label .webix_el_box, .webix_inp_label, .webix_inp_top_label, .webix_slider_title{
 		color: @darkBarFontColor;
 	}
 	.webix_secondary, .webix_transparent{

sources/views/chart.js

@@ -14,7 +14,7 @@ import HtmlMap from "../core/htmlmap";
 import Canvas from "../core/canvas";
 import GroupMethods from "../core/groupmethods";
 
-import {locate, offset as getOffset, pos as getPos, create} from "../webix/html";
+import {locate, offset as getOffset, pos as getPos, create, remove} from "../webix/html";
 import {protoUI} from "../ui/core";
 import {bind, extend, isUndefined} from "../webix/helpers";
 import {assert} from "../webix/debug";
@@ -845,8 +845,20 @@ const api = {
 			for(i = 0; i < legend.values.length; i++){
 				legendItems.push(this._drawLegendText(legendContainer,legend.values[i].text,(typeof legend.values[i].id!="undefined"?typeof legend.values[i].id:i),legend.values[i].$hidden));
 			}
-		if (legendContainer.offsetWidth === 0)
-			legendContainer.style.width = "auto"; 
+
+		const rendered = document.body.contains(this._contentobj);
+		let parentNode, d;
+
+		// inside window
+		if(!rendered){
+			d = create("DIV",{"style":"visibility:hidden; position:absolute; top:0px; left:0px;"},"");
+
+			parentNode = this._contentobj.parentNode;
+
+			document.body.appendChild(d);
+			d.appendChild(this._contentobj);
+		}
+
 		legendWidth = legendContainer.offsetWidth;
 		legendHeight = legendContainer.offsetHeight;
 
@@ -892,6 +904,12 @@ const api = {
 			this._drawLegendMarker(ctx,item.offsetLeft+x,item.offsetTop+y,itemColor,item.offsetHeight,disabled,i);
 		}
 		ctx.restore();
+
+		if(!rendered){
+			parentNode.appendChild(this._contentobj);
+			remove(d);
+		}
+
 		legendItems = null;
 	},
 	/**